[Flutter] Flutter 위젯 디자인에 관하여

Flutter 위젯 디자인 개요

---

Flutter를 세팅하고 flutter 프로젝트를 만들었다면, 이제 위젯을 디자인하는 방법에 대해서 알아보자.
Flutter의 특징을 하나씩 알아가며 어떤 식으로 앱을 디자인하게 되는지 학습한다.

 

위젯

Flutter에서 앱을 디자인할 때는 위젯을 생각하면 된다.

아래의 사진은 iOS와 Android OS의 위젯화면이다. ▼

iOS와 Android OS 위젯

 

 

Flutter에서 앱을 디자인 하는 방법은 쉽게 말해 위젯을 짜깁기 하는 것이다.

Flutter는 선언형 UI를 채택하고 있기 때문에 각종 UI들이 위젯의 형태로 미리 구현이 되어있다.

글자를 넣고 싶다면 글자 위젯, 박스를 넣고 싶다면 박스 위젯을 넣는 식으로 디자인을 한다.▼

위젯안에 위젯안에 위젯안에 위젯안에...위젯

 

 

위젯 내부에 위젯을 넣는 식으로 짜깁기 한다.

 

위젯 트리

 

 

그렇다면 이 위젯들은 어떤 구조로 짜깁기 되는 것일까?

 

 

Flutter의 위젯은 트리 형태로 구성이 된다.

위젯 내부에 위젯이 들어가는 형태를 하향식 트리구조의 형태로 표현한다.

처음에 이게 무슨 소리인가 싶을 수 있는데, 위에 간단하게 그려놓은 위젯으로 예시를 들어보겠다.

가장 먼저 내부 요소들을 감싸는 위젯인 Container위젯이 최상단에 존재하게 된다.

부모 위젯이 자식 위젯을 감싸게 되며, 현재는 Container가 모두를 감싸는 구조이기에 가장 최상단에 위치한 부모 위젯이 된다. ▼

부모 위젯인 Container 구조

 

 

그리고 Container의 자식으로 글씨들과 이미지를 세로축을 기준으로 묶어줄 Column이 들어가게 된다. ▼

세로축을 묶어주는 Column 구조

 

 

그럼 Column 내부에는 첫번째 섹션으로 나눈 Text가, 그리고 다음 섹션으로는 이미지와 글씨를 가로축 기준으로 묶어줄 Row가 들어간다. ▼

Text와 Row 구조

 

 

그리고 마지막으로 Row에는 왼쪽의 Image와 오른쪽의 Text가 들어가게 되어 이런 트리 구조가 생성된다. ▼

전체 구조

 

 

 

이런 식으로 Flutter의 위젯은 트리의 구조를 통해 구현되며, 코드를 짤 때에도 이와 같은 구조로 코드가 작성된다.

 

그렇다면 위젯 구조를 어떻게 봐야하는지?

---

구현하고자 하는 위젯이 생기게 되면 머리속이든 실제 노트든 어딘가에 그 형태를 그리게 될 것이다.

개인 프로젝트라면 위와 같이 구조를 짜지만, 어느정도 구색을 갖춘 팀 프로젝트라면 디자이너가 구현할 위젯들의 모습을 제공해준다. ▼

이런 식으로 디자인을 제공해준다. 사실 이건 필자가 디자인했다.

 

 

페이지에 대한 코드를 짜기 전에 위젯에 대한 코드를 짤 것인데, 어떤 식으로 구현을 해야할 지 처음이라면 조금 난감할 수 있다.

사실 정해진 정답은 없지만, 세로축을 기준으로 구성을 하는 것이 생각하기에 좋다.

아래의 위젯을 보며 구조를 파악해보자.

 

전체 구조 파악

초보한테 이걸 만들어오라고 하면 배쨀 수 밖에요...

 

이 위젯을 구현을 하라고 하면 조금 난감할 수 있다.

 

컨테이너는 하나지만 위젯들이 이리저리 많이 배치되어있기 때문이다.

 

하지만 위에서부터 하나씩 보게되면 크게 어렵지 않다.

 

 

 

세로축을 기준으로 큰 덩어리 나누기

 

가장 먼저 세로축을 기준으로 가로로 한 줄씩 나눠본다.

 

가로로 스트링 치즈를 자르듯 잘라보면, 가장 위의 위젯부터 하나씩 큰 덩어리가 나오게 된다.

 

 

 

 

 

덩어리 분석

가로로 잘게 찢은 덩어리들을 분석해본다.

라벨링을 하듯 각 덩어리가 어떤 역할을 하는지 적어보다 보면 어떤 식으로 구현해야하는지 큰 틀이 나오게 된다. ▼

대략적인 라벨링

 

 

위에서부터 하나씩 라벨링을 해보면,

 

1. 가장 위의 위젯은 글자들만 있으니 Text위젯으로 구현하면 될 것이다.
2. 그 아래에는 사진들의 리스트가 존재하니, List를 통해 구현을 하면 될 것이다.
3. 그 다음엔 직선형 그래프가 존재하는데, 그래프의 경우에는 별도로 구현을 해야하는 부분이니 나중에 구현을 한다고 생각하자.
4. 그리고 그 아래에는 여러 위젯들이 한 줄로 나열되어있다.
   이 위젯들은 가록축으로 나열되어있으니 Row로 구현하면 된다.
5. 마지막은 버튼으로 보이니 추후에 버튼 위젯을 수정하여 구현하면 된다.

 

세분화

이렇게 덩어리 분석이 끝났다면 조금 더 세분화 하여 어떤 위젯을 사용할 것인지 써본다. ▼

 

바로 위에서 크게 나눴던 덩어리들을 더 잘게 세분화 하면 이렇게 나온다.

1. Text는 더 잘게 쪼갤 수 없으니 그대로 만들면 된다.
2. List는 Image의 List로 구현한다.
3. 그래프는 Container를 겹쳐서 구현을 하니 Stack을 사용한다.
4. Row로 구성되는 덩어리에는 두 개의 Time Picker와 가운데를 이어주는 Text가 들어가게 될 것이다.
5. 마지막으로 Button은 그 위에 Text만 올라가면 된다.

 

이렇게 세분화가 되었고, 이후에는 계속해서 더 세분화하여 위젯 트리를 생성하면 된다.

 

 

앞에서는 세부 순서를 이야기하긴 했지만, 사실은 세분화의 연속이라고 봐도 무방하다.

 

전체를 계속해서 세분화하며 위젯 트리에 위젯을 넣는 식으로 구현한다고 생각하면 쉽다.

 

 

마치며

---

이번에는 Flutter의 위젯을 구성하는 방법에 대해 간단하게 알아보았다.

위젯 트리에 관한 내용은 위에서 설명한 것보다 더 복잡하고 알아야할 내용도 많지만 우선은 이정도로만 작성하고 나중에 알아보는 것으로 하겠다.