Widget이란?
UI
Flutter는 Cross Platform이라고 다들 알고 있지만, UI Toolkit이라고 불리기도 한다.
Flutter에서 UI란 굉장히 중요한 요소이고, Flutter가 인기있는 이유도, 하나의 소스코드로 멋진 UI를 여러 Platform에 출력 할 수 있기 때문이기도 하다.
Flutter를 사용하는 과반수 이상의 이유가 UI 때문이라고 해도 과언이 아닐 정도이기도 하다.
이처럼 Flutter에서 UI는 매우 중요하다.
Widget
위에 말했듯, Flutter에서 UI는 매우 중요하다.
그리고 Flutter UI의 가장 기본적인 단위는 Widget이다.
Flutter는 UI를 구성하는 각 요소가 모두 Widget으로 이루어져 있다. 간단한 블록부터, 텍스트 입력 창, 심지어 화면 내 특정 요소 간의 간격 조차 Widget으로 관리가 된다.
그래서 Flutter 개발자에게 UI를 효율적이고 디자이너가 만든 디자인을 구현하는 데에 요구되는 역량 중에 하나가, Widget을 얼마나 적제적소에 효과적으로 사용할 수 있느냐이다.
Flutter 기본 SDK의 Widget만 해도 상당히 많고, pub.dev를 통해 제공되는 오픈소스 Widget을 모두 더하면 매우 많은 Widget들이 있다.
Widget Tree
Flutter의 Widget은 블록과도 같다.
무슨 말이냐면, Widget을 조합해서 사용하는 방식에 따라 전혀 다른 UI를 만들어 낼 수도 있고, 한 화면에서 만들어 뒀던 Widget을 다른 화면에서 그대로 가져와서 사용할 수도 있다.
또한, Widget들 간에 수평적인 관계도 존재하지만, 수직적인 관계도 만들 수 있다.
이렇듯, Widget들 간의 관계를 나타낸 형태를 Widget Tree라고 하며, 이 개념은 상태를 관리할 때도 매우 중요한 개념으로 사용된다.
Stateless Widget/Stateful Widget
Widget을 직접 만들 때는 위 2가지를 활용하게 된다.
위 2가지 개념에 대해서는 다른 글에서 좀 더 자세하게 다뤄보겠다.
그래도 일단 간단하게 이야기해보면, 화면을 갱신 할 필요가 없는 정적인 화면을 구성할 때는 Stateless Widget을, 특정한 상황에 따라 화면을 갱신할 필요가 있다면 Stateful Widget을 사용한다.
※ MaterialApp
: 가장 기본이 되는, Widget들의 가장 최상단에 위치
※ Scaffold
: MaterialApp에서 화면을 구성할 때, 가장 기본이 되는 도화지라고 생각하면 됨. 기본 화면을 가장 쉽게 만들 수 있는 방법 중 하나.
Hot restart/Hot reload
Dart 언어는 JIT컴파일러와 AOT컴파일러가 사용된다.
그리고 Flutter는 이러한 언어적 특지응ㄹ 사용해, 빠른 개발을 위해 Hot restart/Hot Reload 기능을 제공하고 있다.
이 2가지 기능을 사용하면, JIT컴파일러를 활용하여, 오래 걸리는 컴파일 과정을 거치지 않고도 코드의 변경 사항을 즉시 반영할 수 있어 훨씬 편하고 빠르게 개발할 수 있다.
Hot restart
Hot restart는 말 그대로 앱을 다시 시작하는 형태이다. 이 기능을 활용하면, 앱의 모든 상태가 초기화되고, 앱의 코드 변경 사항을 반영할 수 있게 된다.
Hot reload
Hot reload는 hot restart와는 조금 다르게 앱을 재실행하진 않지만, 코드의 변경 사항을 반영하는 기능이다.
위 기능을 활용하면, 앱의 상태를 유지하면서 코드의 수정사항을 확인할 수 있어 더욱 빠르고 편하게 개발을 할 수 있다.
Hot restart/ Hot reload 사용 시 주의사항
Hot Restart/Hot reload 모두 앱을 재 컴파일 후 빌드하는 것은 아니기 때문에, 앱의 기초가 되는 네이티브 코드의 수정이나, 라이브러리나 Asset의 추가 등의 상황에서는 정상 작동되지 않는다.
또한, 지나치게 많은 코드의 변경사항이 있을 경우, Reload/Restart순으로 실행중인 프로세스가 상위 재시동을 요청할 수 있다. 특히, 상태를 관리하는 개발 단계일 때는 위 기능을 사용할 때 주의가 필요하다.
상태를 남겨놓은 상태에서 테스트를 해야하는 경우에는 Hot reload를 하는 것이 좋고, 상태값이 중요하지 않은 상태에서 단순 UI만 확인하고 싶다면 Hot restart가 조금 더 적합하다.
디자인 가이드?
Design Guide
Flutter 내에서 대표적인 2개의 디자인 가이드를 활용하여 개발 할 수 있다. 물론, 2가지 가이드에서 벗어나 커스텀 디자인 가이드도 적용할 수 있다.
하지만 지금 말하는 2가지 디자인 가이드는 IT의 오랜 시간 앱을 만들어온 Google과 Apple의 노하우가 담긴 디자인 가이드이기 때문에 가급적 해당 가이드를 활용하여 만들어도 충분히 앱을 개인화하여 만들 수 있다.
Google의 철학이 녹어져 있는 디자인 가이드는 Material Design이고, Apple의 철학이 녹아져 있는 디자인 가이드는 Cupertino Design이라고 Flutter에서는 말한다.
해당 디자인 가이드들을 디바이스에 따라 분리해서 구현 할 수도 있고, 혹은 Android기기에서 Cupertino의 디자인 가이드를 따르거나, iPhone에서 Material 디자인 가이드를 따르게 만들 수도 있다.
Material Design
Material Design은 Google에서 제시하는 디자인 가이드이며, 개인화 된 앱을 구현하는데에 중점이 맞춰져 있다고 할 수 있다.
Material Design에 맞게 여러 Widget들이 이미 구현이 대부분 되어있으며, Flutter에서는 Material 2와3을 개발자의 취향에 맞게 선택하여 활용할 수도 있게 한다.
또한, Flutter의 경우, Google에서 주도적으로 개발하고 있는 프레임워크이다보니, 비교적 Cupertino Widget보다 Material Widget이 더 많이 존재하는 부분도 있다.
디자인 가이드를 따르는게 좋을까?
디자인 가이드를 따르는 것이 창의성 측면에서 방해가 될 수 있다고 생각할 수 있지만, 디자인 가이드 자체보다는 디자인 가이드 내부에 들어가는 콘텐츠가 더 독창적인 요소를 불러일으킬 수 있다.
앱 전반의 Font 스타일링을 담당하는 Typography부터, Color등의 Theme 요소를 더욱 잘 활용하는 것이 오히려 창의적인 앱을 만드는데 효과적일 수 있다. 특히 별도의 디자이너가 없이 소규모 앱 개발 인원을 보유한 상황이라면, 개발자들만으로도 완성도 있고 사용성 높은 앱을 구현 하는것에 있어서 디자인 가이드를 지키는 것이 앱의 완성도를 높이는데 도움이 될 것이다.
