[Flutter] 보이지 않는 위젯(layout widget)

flutter를 사용함에 있어서 가장 많이 듣게 되는 단어는 단연 위젯(widget)입니다. 플러터는 거의 대부분(almost) 위젯으로 이루어져 있다고 해도 과언이 아닐 정도로 위젯이 차지하는 비중은 대단합니다.

위젯을 한마디로 표현하라고 하면, 'UI를 만들기 위해서 사용되는 class 집합'정도로 표현할 수 있겠습니다.

아무리 복잡한 화면도 가장 간단한 위젯의 조합으로부터 시작됩니다. 위젯을 쌓고 또 쌓다 보면 화면이 만들어지는 것이죠. 그렇기 때문에 이 위젯에 대해서 정확히 이해하고 있어야 화면 내에 UI 컴포넌트를 적재적소에 원하는 크기로 삽입할 수 있습니다.

layout Widget vs UI element Widget

위젯은 크게 레이아웃 위젯(layout widget)과 UI 요소 위젯(UI element widget)으로 구분할 수 있습니다. 지금까지는 그냥 위젯이라는 이름으로 구분없이 사용하셨겠지만 위 두 차이를 정확히 이해한다면 앞으로의 flutter 코딩에 큰 도움이 될 것입니다.

위 화면을 보면 3개의 아이콘이 보이고 각각의 아이콘 아래에 라벨이 붙어있는 모습을 볼 수 있습니다.
바로 아래에 있는 화면은 레이아웃을 시각적으로 보여주는 그림입니다. 아이콘 하나를 둘러싼 수많은 선들이 보이시나요? 각각이 위젯이고 우리가 눈으로 보는 아이콘을 하나 배치하기 위해서 바깥에 보이지 않는 위젯이 여러 개 존재합니다.

다음은 위 화면의 위젯을 트리구조의 다이어그램으로 나타내 본 것입니다.

가장 상단에 위치한 Container를 중심으로 아래에 Row가 하나 보이고 그 아래에 Column이 3개가 배치되어 있습니다. 각각의 Column은 모두 동일한 하위 구조를 갖고 있는데 하나의 Icon과 하나의 Container, 그리고 그 Container는 Text 위젯을 하위로 두고 있습니다.

Container에 대해서 조금 더 알아보도록 합시다. 이 구조에서 Container가 하는 역할은 무엇일까요? 다른 위젯들과 달리 Container는 화면 구성에서 별도의 영역으로 보이는 것 같지 않습니다. 여기서 Container는 하위에 있는 위젯을 사용자가 커스터마이즈 하기 위한 영역을 설정하기 위한 범위를 지정한 것이라고 생각하시면 되겠습니다. 복수의 자식들(children)을 가질 수 있는 Column이나 Row 위젯과 달리 Container 위젯은 단 하나의 자식(child)을 가질 수 있는데, 이 자식은 하나의 단일 위젯이 될 수도 있고(Text, Row, Column etc..) 아니면 개발자가 새롭게 정의한 별도의 위젯이 될 수도 있습니다. Container로 묶인 하위 위젯에 개발자는 padding, margin, borders, background color 등을 설정할 수 있고 이는 Container안에만 적용되는 성질로 부여됩니다.

그 외의 위젯들은 프로퍼티(properties)를 이용해서 제어할 수 있습니다. Icon은 color라는 프로퍼트를 이용해서 색을 변경할 수 있고, Text는 Text.style이라는 프로퍼티를 이용해 제어가 가능합니다. Column이나 Row와 같은 경우 프로퍼티의 이용 목적이 약간 다른데, 주로 하위 자식 위젯들의 정렬과 사이 간격 조정 등을 위해 사용하는 경우가 많습니다.

정리하자면, 플러터는 위젯으로 구성되어 있고 그 위젯은 그 사용 목적에 따라 Icon, Text와 같이 UI 요소를 만들기 위해서 사용하는 위젯과 Container, Column, Row와 같이 레이아웃을 구성할 목적으로 만드는 위젯으로 나눌 수 있습니다.

레이아웃 위젯과 UI 위젯을 구분해서 기억한다면 실제 화면을 구성할 때 조금 더 명확한 이해를 가지고 일을 할 수 있을 것입니다.