[ 앱 개발자 도전기 : 크로스플랫폼_Flutter ] Flutter의 아키텍처 이해 : Flutter 런타임 구조 & 위젯 트리와 렌더 트리, Element 트리의 관계.

▽ [ 앱 개발자 도전기 : 크로스플랫폼_Flutter ] Flutter의 아키텍처 이해 : Flutter 런타임 구조 & 위젯 트리와 렌더 트리, Element 트리의 관계.

목  차


🧬  Flutter의 아키텍처 이해 : 📦 Flutter 런타임 구조 

      - Flutter 엔진(Dart VM, Skia, 플랫폼 채널)의 역할

      - impeller vs Skia 렌더링 엔진 비교

      - Framework → Engine → Embedder 계층 구조

      - 앱이 실행될 때 내부적으로 어떤 단계로 진행되는지


🧬  Flutter의 아키텍처 이해 : 🔁 위젯 트리와 렌더 트리, Element 트리의 관계.

      - BuildContext, Element Tree, Widget Tree의 관계

      - Render Tree와 Paint 단계

      - State 변화가 화면에 반영되는 과정
      

🧬 Flutter의 아키텍처 이해 : 📦 Flutter 런타임 구조

---

① Flutter 엔진(Dart VM, Skia, 플랫폼 채널)의 역할

🧠 기초 개념

Flutter 엔진은 Dart 코드를 실행하고, 화면을 그리며, 네이티브 기능과 통신하는 핵심 런타임.

• Flutter 엔진은 Flutter 앱의 “심장” 역할

• 앱을 실행하고, UI를 그리고, 네이티브 기능과 연결하는 핵심 모듈

• 세 가지 주요 구성요소.

  • Dart VM → Dart 코드 실행

  • Skia/Impeller → UI 직접 렌더링

  • Platform Channel → Dart ↔ 네이티브 데이터 교환

📘 기본 개념

Dart VM

• 개발 시: JIT 컴파일로 빠른 코드 반영 (Hot Reload 가능)

• 배포 시: AOT 컴파일로 네이티브 코드 변환 → 성능 최적화

Skia/Impeller

• Skia: 범용 2D 그래픽 엔진 (OpenGL 기반)

• Impeller: Metal(iOS), Vulkan(Android) 기반 차세대 렌더러 → 프레임 드랍 최소화

Platform Channel

• Dart 코드에서 네이티브 API 호출 가능 (카메라, GPS, 센서 등)

• 네이티브에서도 Dart 코드 호출 가능

⚙️ 심화 개념

• Dart VM과 Isolate

  • 모든 Flutter 앱은 최소 하나의 메인 Isolate에서 동작

  • 무거운 연산은 별도의 Isolate로 분리해 UI 끊김 방지

• 렌더링 파이프라인

  • Dart 코드 → 위젯 빌드 → RenderObject 생성

  • Skia/Impeller가 이를 GPU에 전달해 픽셀로 그림

• 플랫폼 채널 동작 원리

  • JSON, 바이너리 메시지 직렬화 후 전송

  • 각 플랫폼의 Embedder가 해석하여 OS API 호출

  • Platform Channel은 MethodChannel / EventChannel / BasicMessageChannel로 용도 구분

    • MethodChannel → 단방향 요청/응답

    • EventChannel → 지속적인 스트림 데이터

    • BasicMessageChannel → 자유로운 데이터 전송

🧬 더 깊은 심화 개념

• Impeller의 예측 렌더링

  • GPU 명령을 미리 준비하여 프레임 타임 안정화

• JIT vs AOT의 내부 차이

  • JIT: 런타임 해석 → 메모리 부담 ↑, 빌드 속도 ↓

  • AOT: 기계어 변환 후 실행 → 런타임 오버헤드 ↓

• Platform Channel 성능 최적화

  • 호출 빈도 최소화 (자주 호출 시 성능 저하)

  • FFI로 대체 가능 (네이티브 라이브러리 직접 호출)

🔗 연관된 개념들

• GPU 렌더링 파이프라인 (Vertex → Fragment → Composition)

• FFI(외부 함수 인터페이스) → Platform Channel 대체 가능

• Isolate 기반 병렬 처리 모델

• Flutter Embedder 아키텍처

• DevTools로 엔진 성능 분석

🛠 실무 활용 맥락

• 네이티브 기능 연동

  • 카메라: Platform Channel로 Swift/Kotlin 네이티브 코드 호출

  • 결제 시스템: 네이티브 SDK 연결 후 Dart API 제공

• 성능 튜닝

  • Impeller 활성화(iOS 기본 적용, Android opt-in)

  • Platform Channel 호출 최소화, 필요 시 FFI 사용

• 병렬 처리

  • 이미지 인코딩, 암호화 연산 등은 별도 Isolate로 처리

• 멀티플랫폼 전략

  • 하나의 엔진 구조로 Android/iOS뿐 아니라 Desktop/Web 확장 가능

② Impeller vs Skia 렌더링 엔진 비교

🧠 기초 개념

• Skia: Flutter 초창기부터 사용된 2D 렌더링 엔진 (OpenGL 기반)

• Impeller: iOS에서는 Metal, Android에서는 Vulkan을 사용하는 차세대 엔진

📘 기본 개념

⚙️ 심화 개념

🧬 더 깊은 심화 개념

🔗 연관된 개념들

🛠 실무 활용 맥락

③ Framework → Engine → Embedder 계층 구조

🧠 기초 개념

📘 기본 개념

⚙️ 심화 개념

🧬 더 깊은 심화 개념

🔗 연관된 개념들

🛠 실무 활용 맥락

④ 앱 실행 단계.

🧠 기초 개념

📘 기본 개념

⚙️ 심화 개념

🧬 더 깊은 심화 개념

🔗 연관된 개념들

🛠 실무 활용 맥락