#01 Flutter

FLUTTER란 무엇인가?  -> 엔진과 프레임워크 구조의 이해

안녕하세요, 오늘부터 Flutter에 대한 기술 블로그를 시작하게 되었습니다.
첫 번째 포스팅에서는 Flutter의 핵심 구조, 즉 엔진과 프레임워크에 대해 알아보겠습니다.
"Flutter는 뭘로 만들어졌고, 내부에서 어떻게 동작할까?"라는 궁금증을 가진 분들에게 도움이 되었으면 합니다.!!

---

Flutter란?

Flutter는 Google이 개발한 오픈소스 UI 툴킷입니다.
하나의 코드베이스로 iOS, Android, 웹, 데스크탑 앱까지 만들 수 있게 해주는 크로스 플랫폼 프레임워크입니다.

• 언어: Dart
• 주요 특징:
  • 빠른 개발 (Hot Reload)
  • 일관된 UI/UX (플랫폼 종속성 없음)
  • 높은 성능 (네이티브 수준)

---

Flutter의 구성 요소

Flutter는 크게 두 가지 주요 레이어로 구성됩니다:

1. Flutter Framework (Dart로 작성됨)

Flutter 개발자가 주로 사용하는 부분이며, 다음과 같은 계층으로 구성되어 있습니다:

• Widgets Layer
  • 우리가 직접 사용하는 UI 요소들 (Text, Column, Container, Scaffold 등)
• Rendering Layer
  • 위젯 트리를 렌더 트리로 변환하고, 실제로 화면에 그리는 작업을 담당
• Animation, Gesture Layer
  • 애니메이션 처리, 터치 및 제스처 인식
• Foundation Layer
  • ChangeNotifier, BuildContext 등 기본적인 Flutter 동작을 위한 핵심 기능 제공

즉, 우리가 Dart로 작성하는 모든 Flutter 코드는 이 프레임워크 계층 위에서 동작합니다.

 

---

2. Flutter Engine (C++로 작성됨)

Flutter의 하위 레벨 엔진은 성능과 관련된 처리를 담당하며, 다음과 같은 주요 기능이 포함됩니다:

• Skia
  • Google의 2D 그래픽 엔진으로, Flutter의 모든 UI를 직접 그립니다.
    → 플랫폼 위젯을 사용하는 게 아니라, Flutter만의 방식으로 화면을 렌더링합니다.
• Dart Runtime
  • Flutter 앱에서 사용하는 Dart 코드를 실행합니다.
  • AOT(실행 파일), JIT(개발 중) 컴파일을 모두 지원합니다.
• Text Rendering, Accessibility, Plugin System 등
  • 텍스트 렌더링, 플랫폼 채널 (예: 카메라, GPS 등 네이티브 기능 연동) 등을 처리합니다.

---

Framework ↔ Engine 사이의 연결 구조

Framework (Dart 코드)는 엔진과 플랫폼 채널을 통해 통신합니다.

 

Flutter Framework (Dart)

↓

 

Platform Channel Flutter Engine (C++)

 

↓

 

Native Platform (Java/Kotlin, Obj-C/Swift)

 

 

예를 들어, 카메라 기능을 호출할 때는 Dart 코드가 플랫폼 채널을 통해 네이티브 코드(Java/Swift 등)로 요청을 보내고, 결과를 다시 Dart로 받아옵니다.

---

왜 직접 그리는 방식(Skia)을 선택했을까?

• Android나 iOS의 기본 위젯을 사용하는 대신 직접 위젯을 렌더링함으로써,
  • 동일한 UI/UX를 모든 플랫폼에서 보장
  • 플랫폼 API 변경에 영향받지 않음
  • 커스터마이징이 매우 쉬움 (예: Material 3, Cupertino 위젯 커스터마이징 등)

---

마무리

Flutter는 단순히 UI 프레임워크가 아니라, 엔진부터 위젯까지 모든 계층을 직접 구현한 독립적인 플랫폼입니다.

앞으로 이 블로그에서는 실무에서 유용한 Flutter 팁, 패턴, 성능 개선법 등 더 나아가 아키텍처관련하여 다양한 내용을 다뤄볼 예정입니다.

읽어주셔서 감사합니다 !