👨‍💻 [Flutter] Flutter 의 구조는 어떻게 되나요?

👨‍💻 안녕하세요, 윌리 프로젝트의 윌리 입니다.

Flutter 의 구조는 어떻게 되는지 간략히 알아보았습니다.

---

질문 >

Flutter 의 구조는 어떻게 되나요?

답변 >

Flutter의 구조는 고수준의 UI 구성 요소부터 저수준의 그래픽 렌더링 엔진까지 계층적으로 설계되어 있습니다. 이러한 구조는 개발자가 다양한 수준의 복잡성을 다루면서 크로스 플랫폼 애플리케이션을 효율적으로 구축할 수 있도록 돕습니다.

---

Flutter의 기본 구조

Flutter의 구조는 크게 4개의 계층으로 나뉩니다:

---

1. Dart Framework (프레임워크 계층)

Flutter에서 개발자가 직접 작업하는 계층으로, Dart로 작성된 Flutter의 핵심 구성 요소를 포함합니다.

1. 위젯 계층:
   • Flutter의 모든 UI는 위젯으로 표현됩니다.
   • 위젯은 Flutter 애플리케이션의 기본 빌딩 블록이며, UI의 상태(State)와 레이아웃(Layout)을 정의합니다.
   • 두 가지 주요 위젯:
     • StatelessWidget: 상태가 변하지 않는 위젯.
     • StatefulWidget: 상태가 변할 수 있는 위젯.
   예:

Center(
  child: Text('Hello, Flutter!'),
);

1. 렌더링 계층:
   • 위젯 계층 아래에서 작동하며, 위젯을 렌더링 트리(Rendering Tree)로 변환합니다.
   • 화면에 위젯의 배치, 크기 조정, 그리기 등을 담당합니다.
2. 애니메이션과 제스처 계층:
   • 애니메이션과 사용자의 제스처(터치, 스와이프 등)를 처리합니다.
   • 예: AnimationController, GestureDetector.
3. Material 및 Cupertino:
   • 플랫폼별 디자인 언어를 지원:
     • Material Design: Android 스타일 UI.
     • Cupertino: iOS 스타일 UI.

---

2. Flutter Engine (엔진 계층)

Flutter 엔진은 **C++**로 작성된 코어 엔진으로, 아래와 같은 기능을 제공합니다:

1. Skia 그래픽 엔진:
   • GPU 가속 2D 그래픽 렌더링 엔진.
   • Flutter의 고성능 UI 렌더링을 담당.
2. Dart Virtual Machine:
   • Dart 코드를 실행하는 런타임 환경.
   • JIT(Just In Time) 및 AOT(Ahead Of Time) 컴파일 지원.
3. 텍스트 렌더링:
   • 다양한 글꼴 스타일과 텍스트 렌더링 기능.
4. 플러그인 시스템:
   • 네이티브 기능(Android, iOS의 카메라, GPS 등)을 호출하기 위한 인터페이스.

---

3. Embedder (임베더 계층)

Embedder 계층은 Flutter와 운영 체제를 연결합니다. 플랫폼별로 제공되며, Flutter 엔진을 네이티브 애플리케이션에 통합합니다.

1. 기능:
   • 네이티브 플랫폼(Android, iOS, Windows, macOS, Linux, Web)에서 Flutter 애플리케이션을 실행.
   • Flutter 엔진이 화면에 그린 UI를 네이티브 윈도우에 렌더링.
   • 네이티브 코드(Java/Kotlin, Swift/Objective-C 등)와의 통신.
2. 플랫폼별 Embedder:
   • Android: Java/Kotlin.
   • iOS: Swift/Objective-C.
   • Web: JavaScript.
   • Windows/macOS/Linux: C++.

---

4. Operating System (운영 체제 계층)

Flutter는 네이티브 운영 체제와 상호작용하며, 기본적인 시스템 리소스를 사용합니다.

1. 입출력 처리:
   • 사용자 입력(터치, 키보드 등)을 수신하고 처리.
   • GPU를 통한 그래픽 렌더링.
2. 네이티브 기능 호출:
   • 카메라, GPS, 파일 시스템 접근 등.
3. 플랫폼별 네이티브 UI와 통합:
   • 상태 표시줄, 앱 스위처 등 네이티브 UI 요소와 통합.

---

Flutter 구조의 데이터 흐름

Flutter 애플리케이션은 다음과 같은 흐름으로 동작합니다:

1. 사용자 입력:
   • 사용자가 화면을 터치하거나 버튼을 클릭하면 이벤트가 발생.
   • 제스처 계층이 이벤트를 처리하고, 필요시 상태(State) 변경을 요청.
2. 상태(State) 변경:
   • 상태가 변경되면 위젯 트리에서 변경된 부분만 다시 빌드.
3. 렌더링:
   • 렌더링 계층이 위젯 트리를 렌더링 트리로 변환.
   • 레이아웃 계산 및 화면에 그리기.
4. 그래픽 엔진:
   • Skia 엔진이 GPU를 통해 UI를 화면에 렌더링.
5. 운영 체제와 상호작용:
   • Flutter는 운영 체제와 협력하여 네이티브 기능을 처리.

---

Flutter 구조의 장점

1. 크로스 플랫폼 지원:
   • 하나의 코드베이스로 iOS, Android, Web, Desktop을 지원.
2. 고성능:
   • Skia 엔진을 활용한 GPU 가속 렌더링으로 네이티브에 가까운 성능 제공.
3. Hot Reload:
   • 개발자가 코드 변경 사항을 즉시 반영해 빠른 피드백 루프 제공.
4. 위젯 기반 아키텍처:
   • 직관적인 위젯 트리 구조로 UI 설계가 간단하고 유연.
5. 일관된 UI/UX:
   • 모든 플랫폼에서 동일한 사용자 경험 제공.

---

Flutter 구조의 시각화

+-------------------+
|   Dart Framework  | <- 위젯, 렌더링, 애니메이션, 제스처
+-------------------+
|   Flutter Engine  | <- Skia, Dart VM, 플러그인 시스템
+-------------------+
|     Embedder      | <- 플랫폼별 런타임 (Android, iOS 등)
+-------------------+
|  Operating System | <- OS 리소스와 상호작용
+-------------------+

---

Flutter 구조 예제

Flutter 애플리케이션 코드:

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Flutter 구조 예제'),
        ),
        body: Center(
          child: Text('Hello, Flutter!'),
        ),
      ),
    );
  }
}

• Dart Framework: 위젯 트리(Scaffold, AppBar, Text)를 구성.
• Flutter Engine: Skia 엔진을 통해 화면 렌더링.
• Embedder: 네이티브 앱(Android, iOS)에서 Flutter 엔진 실행.
• Operating System: GPU와 디바이스 리소스를 사용.

---

Flutter의 구조는 다양한 플랫폼에서 일관된 성능과 사용자 경험을 제공하며, 개발자가 직관적으로 애플리케이션을 설계하고 확장할 수 있도록 돕는 체계적인 계층 구조를 가지고 있습니다.

---

"이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다."

---

🎬 유튜브 채널 🎬

위로그@WiLog

🎬 치지직 채널 🎬

위로그 채널 - CHZZK

---