Flutter는 단일 코드(dart) 를 기반으로,
모바일(Android, iOS), 웹, 데스크톱 등에서 새로운 서비스를 빌드할 수 있는 앱 SDK(Software Development Kit)입니다.
Why Flutter?
Flutter를 이용하면서 얻는 이점은 무엇일까요?
- 높은 생산성
- 단일 코드로 다양한 플랫폼을 대응합니다.
- 선언적 문법을 통해 UI를 직관적으로 확인하며, 적은 코드로 더 많은 것을 할 수 있습니다.
- 다양한 기능을 활용해 빠른 개발이 가능합니다.
- hot Reload
- hot Restart
- Debugging with BreakPoint
- 아름다운 UX
- Google의 Material 디자인, Apple의 Cupertino 디자인에 맞는 다양한 위젯을 사용할 수 있습니다.
- Hero 등과 같이 아름다운 애니메이션을 쉽게 구현할 수 있습니다.
핵심 원리
1. 모든 것은 'Widget'이다.
Widget은 Flutter 앱의 UI를 이루는 기본 구성 요소입니다.
기존에 다른 프레임워크에서는 뷰, 컨트롤러, 레이아웃, 속성들이 분리되어 있었지만, Flutter는 이러한 것들을 모두 Widget으로 관리합니다.
다음의 것들이 Widget의 대표 예시입니다.
- 디스플레이 위젯 (버튼, 이미지 등)
- 레이아웃 위젯 (패딩, 마진 등등)
- 스타일 위젯 (폰트, 색상 등)
Widget은 Widget 간 조합을 통해 계층 구조를 형성합니다. 이러한 구조에서 자식 Widget은 부모의 속성을 상속받습니다.
이런 구조를 가짐으로서, Widget을 새로 그려줄 때, 필요한 부분만 새로 그려줌으로서 효율성과 성능을 극대화시킬 수 있습니다.
그림 1. Widget의 구성
2. 네이티브에 뒤쳐지지 않는 성능
기존의 도구는 작성한 코드가 모든 플랫폼을 아우를 수 있는 도구를 거쳐, Android, iOS 등 각 플랫폼들의 UI 라이브러리에 접근하여 화면을 그리려는 시도가 많았습니다.
이 방식은 작성한 코드와 플랫폼 사이에 많은 상호작용이 있을 경우 성능과 시간적으로 무조건 손해를 보았습니다.
하지만 Flutter는 자체 UI 엔진인 Skia 엔진을 활용하여, 각 플랫폼들의 UI 라이브러리를 우회합니다. Flutter 내 Dart 코드는 직접 시스템에 접근하여 UI 를 그립니다.
Flutter 내에서 자체 UI 엔진을 가지고 있으므로 개발자는 플랫폼 정보, 버전 등에 상관없이 동일한 스타일의 화면을 만들어낼 수 있습니다.
그림 2. Flutter와 기존 접근 방식의 차이
3. 레이어 케이크는 맛있다
Flutter 프레임워크는 계층으로 구성되어 있습니다.
각 계층은 하위 계층을 기반으로 하며, 상위 계층일 수록 더 자주 사용하게 됩니다.
그림 3. Flutter 계층 구조
위의 이야기 도중 우리는 크로스 플랫폼 이라는 용어를 접했습니다.
이러한 용어가 왜 등장했고 기존의 크로스 플랫폼과 Flutter 가 무슨 차이가 있는지 이해하기 어려우실 수 있습니다.
따라서 본격적인 학습을 시작하기에 앞서 크로스 플랫폼이 무엇인지 알아보고, Flutter는 어떤 특성을 가지고 있는지, Flutter가 가지는 차별성은 무엇인지 알아봅시다.