Flutter?
02 What is Flutter
Flutter?

Flutter는 단일 코드(dart) 를 기반으로,
모바일(Android, iOS), 웹, 데스크톱 등에서 새로운 서비스를 빌드할 수 있는 앱 SDK(Software Development Kit)입니다.

Why Flutter?

Flutter를 이용하면서 얻는 이점은 무엇일까요?

  • 높은 생산성
    1. 단일 코드로 다양한 플랫폼을 대응합니다.
    2. 선언적 문법을 통해 UI를 직관적으로 확인하며, 적은 코드로 더 많은 것을 할 수 있습니다.
    3. 다양한 기능을 활용해 빠른 개발이 가능합니다.
      1. hot Reload
      2. hot Restart
      3. Debugging with BreakPoint
  • 아름다운 UX
    1. Google의 Material 디자인, Apple의 Cupertino 디자인에 맞는 다양한 위젯을 사용할 수 있습니다.
    2. Hero 등과 같이 아름다운 애니메이션을 쉽게 구현할 수 있습니다.


핵심 원리

1. 모든 것은 'Widget'이다.

Widget은 Flutter 앱의 UI를 이루는 기본 구성 요소입니다.

기존에 다른 프레임워크에서는 뷰, 컨트롤러, 레이아웃, 속성들이 분리되어 있었지만, Flutter는 이러한 것들을 모두 Widget으로 관리합니다.

다음의 것들이 Widget의 대표 예시입니다.

  • 디스플레이 위젯 (버튼, 이미지 등)
  • 레이아웃 위젯 (패딩, 마진 등등)
  • 스타일 위젯 (폰트, 색상 등)

Widget은 Widget 간 조합을 통해 계층 구조를 형성합니다. 이러한 구조에서 자식 Widget은 부모의 속성을 상속받습니다.

이런 구조를 가짐으로서, Widget을 새로 그려줄 때, 필요한 부분만 새로 그려줌으로서 효율성과 성능을 극대화시킬 수 있습니다.


그림 1. Widget의 구성

그림 1. Widget의 구성

2. 네이티브에 뒤쳐지지 않는 성능

기존의 도구는 작성한 코드가 모든 플랫폼을 아우를 수 있는 도구를 거쳐, Android, iOS 등 각 플랫폼들의 UI 라이브러리에 접근하여 화면을 그리려는 시도가 많았습니다.
이 방식은 작성한 코드와 플랫폼 사이에 많은 상호작용이 있을 경우 성능과 시간적으로 무조건 손해를 보았습니다.

하지만 Flutter는 자체 UI 엔진인 Skia 엔진을 활용하여, 각 플랫폼들의 UI 라이브러리를 우회합니다. Flutter 내 Dart 코드는 직접 시스템에 접근하여 UI 를 그립니다.
Flutter 내에서 자체 UI 엔진을 가지고 있으므로 개발자는 플랫폼 정보, 버전 등에 상관없이 동일한 스타일의 화면을 만들어낼 수 있습니다.

그림 2. Flutter와 기존 접근 방식의 차이

그림 2. Flutter와 기존 접근 방식의 차이

3. 레이어 케이크는 맛있다

Flutter 프레임워크는 계층으로 구성되어 있습니다.
각 계층은 하위 계층을 기반으로 하며, 상위 계층일 수록 더 자주 사용하게 됩니다.

그림 3. Flutter 계층 구조

그림 3. Flutter 계층 구조

위의 이야기 도중 우리는 크로스 플랫폼 이라는 용어를 접했습니다.
이러한 용어가 왜 등장했고 기존의 크로스 플랫폼과 Flutter 가 무슨 차이가 있는지 이해하기 어려우실 수 있습니다.

따라서 본격적인 학습을 시작하기에 앞서 크로스 플랫폼이 무엇인지 알아보고, Flutter는 어떤 특성을 가지고 있는지, Flutter가 가지는 차별성은 무엇인지 알아봅시다.

질문하기
추가 자료
no files uploaded

추가 자료가 없습니다

여기서 새로운 학습 자료를 확인하세요!
선생님이 추가한 자료들을 바로 확인할 수 있어요.