[사이드 프로젝트 개발기] Flutter의 UI 개발

드디어 Flutter 앱을 만들기 시작했습니다.
강의는 Flutter 3.0&Firebase Build a Grocery App&WEB Admin Panel 을 듣고 있습니다.

확실히 이런 부트캠프 류의 강의 대부분은 장단점이 명확한 것 같습니다.
짧은 시간 내에 결과물을 확인할 수 있지만 “이 코드를 왜?”에 대한 의문을 해결하기는 조금 어려운 것 같습니다.

강의를 듣기 전에는, 전체 강의가 17시간이니까 1.5배속으로 들으면서 한주에 끝내야겠다는 생각이 있었습니다.
하지만 언어도 처음이고 환경도 처음이고 ㅠ.ㅠ 1.5배속은 커녕 정속으로 듣기도 어려워 중간중간 일시정지를 하면서 듣고 있습니다.

그래도 UI 개발은 거의 들었기에, Flutter의 UI 개발과 관련된 얘기를 좀 해볼까 합니다.

Flutter는 material 디자인의 컴포넌트를 기본적으로 제공하고 있는데,
웹 개발할 때 사용해 본 Vuetify (또는 부트스트랩과 같은 라이브러리)와 굉장히 유사했습니다.

대부분의 컴포넌트(Button, Icon, IconButton 등..)가 존재하여 별도의 라이브러리 설치를 하지 않아도
사용할 수 있어 개발이 편리합니다.

그러다 보니 처음 코드 작성 시 웹 개발과 유사하다고 생각해서, 웹 개발하듯이 접근했으나 정말 정말 손에 안 익었습니다.
Dart의 특징인지는 모르겠지만, 컴포넌트의 이름이나 속성값은 웹의 CSS와 유사하여 친숙했지만 값을 할당하는 방식은 너무 달랐습니다.

예를 들어 어떤 텍스트에 스타일을 지정할 때, 제가 기대한 코드는

style = TextStyle();
style.fontWeight = 700;
style.fontSize = 10;

Text("텍스트입니다", style=style)

과 같이 객체의 속성값에 바로 지정해서 사용하는 방식이었는데 실제로는 그렇지 않았습니다.

Text("텍스트입니다", style=TextStyle(fontWeight=700, fontSize=10))

과 같이 객체 생성자에 값을 넣듯이 바로 생성하여 할당합니다.

처음 작성 시에는 어색했지만, 이제는 오히려 이전에 기대했던 방식으로 작성하는 것이 더 어색할 것 같네요.

다른 부분들은 많이 익숙해졌지만, 아직도 어색한 부분은 여백을 처리하는 부분과
VSCode의 플러그인을 활용한 개발 방식입니다.

먼저 웹은 CSS를 통해서 요소에 여백을 지정할 수 있는데,
Flutter는 Padding() 클래스로 감싸 계층구조를 활용하여 여백을 지정합니다.

웹으로 작성하면

<div style="padding: 10px;">Hello</div>

로 작성할 수 있는 코드가

Padding(padding: const EdgeInset.all(10), child: Text("Hello"))

로 표현됩니다.

이렇게 여백을 계층구조로 표현해서 그런지 VSCode 플러그인에서는 이미 작성된 코드를
자동으로 Wrap 할 수 있는 기능을 제공해 줍니다.

이렇게 Wrap 하는 코드를 작성해 주는데, 굉장히 편리해서 생각보다 마우스를 많이 쓰게 됩니다. (개인적으로 선호하지 않는데도 불구하고..)

이렇게 그나마 강의를 들으니, Flutter UI를 어떻게 구성해야 하는지 감은 확실히 잡을 수 있었습니다.
웹을 개발하는 것만큼의 속도를 낼 수는 없지만, 필요할 때 네이티브 앱을 시도해 볼 수 있겠다는 자신감이 생긴 점과
공식 문서를 볼 수 있게 된 것이 가장 큰 수확입니다.

그리고 Flutter의 경우에 파이썬의 pip나 node의 npm 수준은 아니지만 pub.dev라는 패키지 플랫폼도 되어있어서 꽤나 편하게 패키지도 설치&관리할 수 있었습니다!

다음 포스팅에서는 서버 통신 + 개인적으로 디바이스 처리(카메라 등) 하는 것까지 살펴보고 공유해 보겠습니다 🙂

마지막으로 앱 개발 캡처 화면 공유로 마무리 ~~
(다크 모드 개발도 Shared Preference로 쉽게 구현할 수 있었습니다!)

---

---