플러터(Flutter) 소개

Flutter

Flutter란?

Flutter는 Google에서 개발한 오픈소스 UI 프레임워크로, 하나의 코드베이스로 Android, iOS, 웹, 데스크톱, 임베디드 시스템에서 실행되는 애플리케이션을 개발할 수 있습니다. Dart 언어를 사용하며, 성능이 뛰어나고 빠른 개발 속도를 제공합니다.

Flutter의 주요 특징

1. 크로스 플랫폼 개발
   • 한 번의 코드 작성으로 Android, iOS, 웹, Windows, macOS, Linux 등의 다양한 플랫폼을 지원합니다.
2. Hot Reload(핫 리로드)
   • 코드 변경 사항을 즉시 반영하여 빠른 개발과 실험이 가능합니다.
3. 자체 렌더링 엔진(스키아)
   • Flutter는 네이티브 위젯이 아닌 자체 렌더링 엔진(Skia)을 사용하여 UI를 직접 그립니다. 이를 통해 일관된 디자인과 부드러운 성능을 제공합니다.
4. 풍부한 위젯 라이브러리
   • Flutter는 Material Design(안드로이드 스타일)과 Cupertino(iOS 스타일) 위젯을 기본으로 제공하여 다양한 UI를 쉽게 구현할 수 있습니다.
5. Dart 언어 기반
   • JIT(Just-In-Time)와 AOT(Ahead-Of-Time) 컴파일을 지원하며, 정적 타입 언어이지만 개발 속도가 빠릅니다.

Flutter와 Skia 엔진

Skia란?

Skia는 Google이 개발한 2D 그래픽 엔진으로, Flutter의 렌더링 엔진 역할을 합니다. Chrome 브라우저, Android 그래픽 시스템에서도 사용되며, GPU 가속을 지원하여 고성능 UI를 제공합니다.

Flutter에서 Skia의 역할

1. 플랫폼 독립적 UI 렌더링
   • Android, iOS 등 네이티브 UI 컴포넌트가 아니라, Skia를 통해 Flutter에서 모든 UI 요소를 직접 렌더링합니다.
2. 고성능 및 일관성 유지
   • Skia를 통해 각 플랫폼별 차이를 최소화하며, 동일한 UI를 빠르고 부드럽게 표현할 수 있습니다.
3. 벡터 그래픽 및 GPU 최적화
   • Skia는 GPU를 활용하여 부드러운 애니메이션 및 복잡한 그래픽 렌더링을 최적화합니다.
4. 자유로운 커스텀 UI 제작 가능
   • 네이티브 UI를 사용할 필요 없이 완전히 커스텀한 UI를 만들 수 있음.

Flutter의 렌더링 과정 (간단한 개요)

1. Dart 코드 작성 → Flutter 프레임워크가 UI 트리를 구성
2. Flutter Engine(Skia 포함)이 UI를 렌더링
3. GPU 가속을 통해 디바이스 화면에 출력

Flutter가 Skia를 사용함으로써 얻는 이점

• 일관된 UI → 네이티브 UI 종속성이 없기 때문에 플랫폼별 차이가 없음
• 고속 렌더링 → GPU 최적화로 빠른 화면 전환 및 애니메이션 가능
• 유연한 UI 커스터마이징 → 제한 없이 다양한 디자인 구현 가능

Flutter의 강력한 성능과 Skia 엔진 덕분에, 네이티브에 가까운 속도로 동작하면서도 크로스 플랫폼의 장점을 유지할 수 있습니다.

Flutter 프레임워크의 구조

Flutter는 다층 구조(Layered Architecture)로 이루어져 있으며, 아래이미지와 같이 Embedder, Engine, Framework  3계층 + Dart Runtime & Compiler 로 4가지 주요 계층으로 구성됩니다.

1. Embedder (임베더)

플랫폼별 네이티브 코드(Android: Java/Kotlin, iOS: Objective-C/Swift, Windows/macOS/Linux: C/C++)로 작성된 계층으로, Flutter 엔진과 운영 체제(OS) 사이에서 브릿지 역할을 합니다. Embedder는 Flutter 앱이 특정 플랫폼에서 실행될 수 있도록 하는 핵심 요소입니다.

• Flutter 엔진을 실행하고 OS와 상호작용
• 이벤트 전달(입력, 키보드, 터치, 시스템 메시지)
• 네이티브 코드 호출 (예: 카메라, GPS, 알림, 파일 시스템 등)
• 화면을 생성하고 Flutter의 렌더링 출력을 표시

2. Flutter Engine (플러터 엔진)

Flutter의 핵심 요소 중 하나로, Skia 그래픽 엔진을 사용하여 UI를 렌더링합니다.
C++로 작성되었으며, Flutter의 UI 렌더링, 애니메이션, 플러그인, 네트워크, 텍스트 렌더링, 이벤트 핸들링 등을 담당합니다.

Flutter Engine은 앱의 UI를 직접 그리는 중요한 역할을 하며, 모든 플랫폼에서 동일한 UI/애니메이션 성능을 제공합니다.

• Skia 엔진을 사용한 렌더링
• Dart VM(Dart 가상 머신) 실행 및 JIT/AOT 컴파일
• 애니메이션 프레임워크 처리
• 플러그인 시스템 지원 (플랫폼 네이티브 기능과 연결)

3. Flutter Framework (플러터 프레임워크)

Flutter 앱 개발자가 직접 다루는 부분으로, Dart로 작성되었습니다. Flutter의 UI 요소(위젯), 애니메이션, 제스처, 상태 관리 등이 포함됩니다.

Flutter Framework도 내부적으로 다음과 같은 3계층으로 구성됩니다.

3.1. Rendering Layer (렌더링 계층)

Flutter 엔진과 상호작용하며 위젯을 화면에 렌더링하는 역할을 합니다. Flutter는 네이티브 UI 컴포넌트가 아닌 자체 위젯을 사용하므로, 모든 UI를 직접 그려야 합니다.

• RenderObject → UI 트리를 구성하고, 레이아웃 및 페인팅 처리
• Layer Tree → UI를 최적화하여 화면에 표시

3.2. Widget Layer (위젯 계층)

Flutter에서 모든 UI 요소는 위젯(Widget)으로 표현됩니다. 위젯 계층은 상태(State) 관리를 담당하며, UI를 선언적으로 구성할 수 있도록 합니다.

• StatelessWidget → 변하지 않는 UI (예: 텍스트, 아이콘)
• StatefulWidget → 상태가 변하는 UI (예: 버튼, 애니메이션)
• InheritedWidget → 상태 공유 (예: Provider, Riverpod)

3.3. Material & Cupertino Layer (디자인 계층)

Flutter는 Android와 iOS 스타일의 UI를 쉽게 만들 수 있도록 Material Design과 Cupertino 위젯을 제공합니다. Flutter의 위젯 시스템은 선언적(Declarative) 방식으로 동작하여, UI 변경 사항을 간단한 코드로 적용할 수 있습니다.

• Material Widgets → Android 스타일 UI
• Cupertino Widgets → iOS 스타일 UI

4. Dart Runtime & Compiler (Dart 런타임 & 컴파일러)

Flutter는 Dart 언어를 기반으로 동작하며, Dart의 강력한 JIT(Just-In-Time) & AOT(Ahead-Of-Time) 컴파일러를 활용합니다.

• 개발 중(HOT RELOAD & HOT RESTART) → JIT 컴파일 사용 (빠른 개발 속도)
• 프로덕션 빌드(배포 시) → AOT 컴파일 사용 (최적화된 네이티브 코드)

4가지 주요 계층 정리

1. Embedder → OS와 Flutter 엔진 연결
2. Flutter Engine → UI 렌더링, 애니메이션, 플러그인 관리
3. Flutter Framework → 위젯 시스템, 상태 관리, 애니메이션 처리
4. Dart Runtime & Compiler → Dart 코드 실행 및 최적화