Dart 와 Flutter

Dart와 Flutter는 Google에서 개발한 기술로, 현대적인 모바일 및 웹 애플리케이션 개발을 위해 함께 사용됩니다. Dart는 프로그래밍 언어이고, Flutter는 이 언어를 기반으로 한 UI 프레임워크입니다.

---

🧑‍💻 Dart란?

Dart는 객체지향적이며 정적 타입을 사용하는 프로그래밍 언어로, 주로 Flutter 앱 개발에 사용됩니다. 주요 특징은 다음과 같습니다:

• JIT(Just-In-Time) 및 AOT(Ahead-Of-Time) 컴파일 지원: 개발 중에는 JIT 컴파일을 통해 빠른 피드백을 제공하고, 배포 시에는 AOT 컴파일을 통해 성능을 최적화합니다. 
• Hot Reload 기능: 코드 변경 사항을 즉시 반영하여 개발 효율성을 높입니다.
• Null Safety 지원: Null 관련 오류를 컴파일 타임에 방지하여 안정성을 향상시킵니다.
• 다양한 플랫폼 지원: 웹, 모바일, 데스크톱 등 여러 플랫폼에서 실행할 수 있습니다.

---

📱 Flutter란?

Flutter는 Dart 언어를 기반으로 한 UI 프레임워크로, 하나의 코드베이스로 다양한 플랫폼(Android, iOS, 웹, 데스크톱 등)의 애플리케이션을 개발할 수 있습니다. 주요 특징은 다음과 같습니다:

• 크로스 플랫폼 개발: 하나의 코드로 여러 플랫폼에 대응할 수 있습니다.
• 고성능 렌더링 엔진: Skia 그래픽 엔진을 사용하여 부드러운 UI를 제공합니다.
• 풍부한 위젯: Material Design과 Cupertino 스타일의 위젯을 기본으로 제공하여 다양한 UI를 쉽게 구현할 수 있습니다.
• Hot Reload 지원: Dart의 JIT 컴파일을 활용하여 코드 변경 사항을 즉시 반영합니다.

---

🔗 Dart와 Flutter의 관계

Flutter는 Dart 언어를 사용하여 개발되었으며, 두 기술은 긴밀하게 통합되어 있습니다. 이러한 통합은 다음과 같은 이점을 제공합니다:

• 최적화된 성능: Dart의 AOT 컴파일을 통해 Flutter 앱의 실행 속도를 향상시킬 수 있습니다.
• 개발 생산성 향상: Hot Reload 기능을 통해 개발자가 빠르게 변경 사항을 테스트하고 반영할 수 있습니다.
• 일관된 개발 경험: Dart와 Flutter의 통합으로 인해 개발자는 하나의 언어와 프레임워크로 다양한 플랫폼에 대응하는 앱을 개발할 수 있습니다.

• Dart: 객체지향적이며 정적 타입을 사용하는 프로그래밍 언어로, JIT 및 AOT 컴파일을 지원하고, Null Safety와 Hot Reload 기능을 제공합니다.
• Flutter: Dart를 기반으로 한 UI 프레임워크로, 크로스 플랫폼 개발, 고성능 렌더링, 풍부한 위젯, Hot Reload 기능을 제공합니다.

 

---

 

 

다음은 Flutter 프레임워크의 구조를 계층별로 상세하게 정리한 설명입니다. 각 계층의 역할과 상호작용을 중심으로, 여러분이 구조를 깊이 이해할 수 있도록 구성했습니다.

---

1. 전체 계층 구조 🏗️

Flutter는 크게 3대 계층 구조로 설계되어 있습니다:

1. Embedder (임베더)
2. Engine (엔진)
3. Framework (프레임워크)

이 외에도 Dart 앱과 Runner(앱 실행 진입점)도 포함되어 전체 앱 구조를 완성합니다.

---

2. Embedder 계층

• 플랫폼 네이티브 환경 접속을 담당하며, 운영체제와의 상호작용을 수행합니다.
• OS에 따라 Android는 Java/C++, iOS/macOS는 Objective-C/Swift, Windows/Linux는 C++로 구현됩니다.
• 주요 역할: 화면 출력(surface), 사용자 입력, 접근성(accessibility), 이벤트 루프 관리 등.
• Embedder 덕분에 Flutter 코드를 기존 앱에 모듈로 통합하거나 단독 실행 앱으로 패키징할 수 있습니다.

---

3. Engine 계층

• C++ 기반의 렌더링 엔진으로, UI를 GPU로 출력할 수 있는 핵심 기능을 담당합니다.
• 주요 기능:
  • 렌더링: Skia 또는 iOS Impeller 기반 
  • 래스터화(rasterization): composited scene → 화면 픽셀
  • 텍스트 레이아웃, 파일 & 네트워크 I/O, 접근성 지원, 플러그인 시스템, Dart runtime 등
• dartAPI로 프레임워크에 기능을 노출하며, Embedder API로 플랫폼 호환을 수행합니다.

---

4. Framework 계층

프레임워크는 Dart로 작성되었으며, 계층적 라이브러리 구조를 갖추고 있습니다.

a. Foundation & 서비스 계층

• 기본 클래스, 컬렉션, 애니메이션(Animation), 페인팅(Painting), 제스처(Gesture) 등 핵심 기능 제공

b. 렌더링 계층

• RenderObject 기반으로 레이아웃(Layout)과 페인팅(Painting)를 수행해 화면 표현 준비
• 레이아웃: 제약(constraints)이 위에서 아래로, 크기 측정(sizes)은 아래에서 위로 흐름

c. 위젯 계층

• 위젯은 UI 구성의 단위; StatelessWidget/StatefulWidget으로 분류
• 위젯 자체는 불변(immutable), build() 메서드로 UI를 State에 따라 재구성

d. 디자인 라이브러리 계층

• Material (구글 디자인), Cupertino (iOS 디자인) 스타일 위젯 세트를 제공합니다

---

5. Dart 앱 계층

• 개발자가 작성하는 애플리케이션 코드로, UI를 구성하는 위젯 트리와 비즈니스 로직이 포함됩니다
• 상태 관리를 통해 UI가 재구성되고, 이벤트 처리 및 플랫폼 채널(Platform Channels)을 활용한 네이티브 연동도 수행합니다.

---

6. Runner 계층

• 플랫폼별 응용 프로그램 진입 지점입니다 (Android MainActivity, iOS AppDelegate, Windows main.cpp 등).
• Embedder와 Dart 앱, 엔진을 연결해 실제 **실행 가능한 앱(**app bundle)이 완성됩니다

---

7. Reactive Model & 데이터 흐름

• Flutter는 선언형 UI 기반으로 설계되었습니다: UI = f(state)
• 상태 변경 시 setState() 호출 → 프레임워크가 build() 재실행 → 위젯 트리 갱신
• 단방향 데이터 흐름(UI ↔ 상태 ↔ 데이터) 기반

---

8. 앱 내부 아키텍처(패턴): MVVM, Clean Architecture 등

프레임워크 계층 외, 실제 앱은 다음 계층들을 가집니다:

• UI layer: View(ViewModel과 연결)
• Logic/Domain layer: 비즈니스 로직, 유스케이스
• Data layer: Repository, 서비스(API 등)
  이 구조는 Separation of Concerns, Single Source of Truth, Testability와 같은 원칙을 따릅니다

Flutter 앱 아키텍처

아키텍처는 유지 관리 가능하고 탄력적이며 확장 가능한 Flutter 앱을 구축하는 데 중요한 부분입니다. 

 '아키텍처'는 프로젝트 요구 사항과 팀이 성장함에 따라 Flutter 앱을 확장하고 구성하며 디자인하는 방법을 말합니다.

---

9. Flutter Web/데스크톱 지원

• 핵심 3계층 구조는 동일하게 유지되며, Engine 레이어는 웹용 렌더러(HTML/CSS/JS 또는 CanvasKit)를 사용하고, Embedder는 브라우저나 플랫폼별 코드에 대응합니다.

---

10. 요약 비교 테이블

계층 구현 언어 주요 기능

Embedder	Java/C++, Obj‑C, C++	플랫폼 통합, 이벤트 루프, 화면 및 입력 연결
Engine	C++	렌더링, Text Layout, Dart runtime, I/O, 플러그인
Framework	Dart	위젯, 레이아웃, 페인팅, 애니메이션, 제스처, 디자인 UI
Dart App	Dart	비즈니스 로직, 위젯 구성, 상태 관리
Runner	플랫폼별 네이티브 코드	앱 실행 진입점, 빌드 구성 및 통합

---

🤝 상호 동작 흐름 요약

1. 앱 실행: Runner → Embedder 초기화
2. Dart VM/AOT 구동: 엔진 위에서 Dart 앱 실행
3. 위젯 트리 build: Framework 계층에서 build() 실행
4. 렌더 트리 구성: 위젯 → Element → RenderObject
5. GPU 렌더링: Engine이 composited scene을 rasterize → Embedder 통해 화면 출력
6. 입력 처리: Embedder → Engine → 프레임워크 → 위젯으로 이벤트 전달

 

---

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

아래는 대표적인 Flutter 프레임워크 구조 다이어그램을 모아 설명한 것입니다. 이미지 상단부터 Embedder, Engine, Framework 계층이 어떻게 구성되고 상호작용하는지 상세하게 보여 줍니다.

---

🌐 Flutter 계층 구조 요약

1. Embedder (플랫폼 임베더)

• OS별 네이티브 언어(Java, C++, Objective-C/Swift 등)로 작성되어 시스템과 Flutter 엔진을 연결합니다.
• 화면(surface), 입력(event loop), 접근성, 네이티브 플러그인 연결 등을 담당합니다 (docs.flutter.dev).

2. Engine (엔진)

• 주로 C++로 구현되며, Skia / Impeller 렌더링 엔진 활용.
• 텍스트 레이아웃, 파일 I/O, 네트워킹, 접근성, Dart runtime 기능 포함.
• dartAPI를 통해 framework에 노출됩니다.

3. Framework (프레임워크)

• Dart로 작성된 계층적 구조로, 점층적으로 추상화:
  1. Foundation: Animation, Painting, Gesture, Collection 등 기본 도구.
  2. Rendering: RenderObject 기반 레이아웃 및 화면 페인팅.
  3. Widgets: StatelessWidget, StatefulWidget – 구성 단위 UI 요소.
  4. Material & Cupertino: 플랫폼 디자인 스타일 위젯 모음.

4. Dart 앱 & Runner

• 사용자 작성 Dart 코드: 위젯 트리, 상태 관리, 비즈니스 로직 포함.
• Runner: 각 플랫폼(MainActivity, AppDelegate 등) 진입점 설정하여 앱 구동 구조 완성.

---

🔄 구조의 상호 동작 흐름

1. 앱 실행: Runner → Embedder 초기화 후 이벤트 루프 설정.
2. Dart 런타임 구동: Engine 위에서 Dart 앱 시작.
3. 빌드 & 렌더링: Framework 내 build() → Element → RenderObject 트리 생성.
4. GPU 출력: Engine이 composited scene을 rasterize → 화면에 전달.
5. 이벤트 처리: 사용자 입력이 Embedder → Engine → Framework → 위젯에 전달 .

---

🧱 추가 개념

• 선언형 UI(declarative UI)
  UI는 상태(state)의 함수로서 변경 시 build() 호출되어 UI가 갱신됩니다.
• 플랫폼 독립성과 확장성
  이러한 계층 구조 덕분에 Android, iOS, 웹, 데스크톱까지 동일한 코드 기반으로 애플리케이션을 제공할 수 있습니다.
• 패키지 생태계 확장
  core framework 외에도, 커뮤니티 기반의 다양한 패키지들(camera, http 등)로 기능을 확장할 수 있습니다 .

---

✅ 마무리 정리

• Embedder: 네이티브 플랫폼 통합 담당
• Engine: 렌더링과 Dart 런타임 처리
• Framework: 위젯 기반 UI 구성 및 상태 관리
• Dart 앱 + Runner: 개발자가 작성한 Business Logic과 네이티브 진입점

이 구조 덕분에 Flutter는 고성능, 크로스 플랫폼, 생산성 높은 개발환경을 제공합니다.

 

Flutter의 구조는 Embedder – Engine – Framework로 명확한 계층을 이루며, 각 계층은 독립적이면서도 서로 긴밀히 연결됩니다.
앱 내부에서는 MVVM, Clean Architecture 등의 패턴을 통해 비즈니스 로직과 UI 상태를 분리하여 효율적이며 유지보수 가능한 구조를 구성합니다.
이러한 구조 덕분에 Flutter는 고성능, 크로스 플랫폼, 개발 생산성, 풍부한 UI 요소, Hot Reload 등 장점을 모두 갖춘 프레임워크로 평가받고 있습니다.

---

참고 Site : https://docs.flutter.dev/