👨‍💻 [Flutter] Flutter의 프레임워크 계층적 구조는 어떻게 되나요?

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

Flutter의 프레임워크 계층적 구조는 어떻게 되는지 간략히 알아보았습니다.

---

질문 >

Flutter의 프레임워크 계층적 구조는 어떻게 되나요?

답변 >

Flutter는 효율적이고 일관된 애플리케이션 개발을 지원하기 위해 계층적 프레임워크 구조를 제공합니다. 이 구조는 높은 수준의 추상화부터 저수준의 시스템 통합까지 계층별로 나뉘며, 개발자가 원하는 수준에서 작업할 수 있도록 유연성을 제공합니다.

---

Flutter 프레임워크의 계층적 구조

Flutter의 계층적 구조는 4개의 주요 계층으로 구성됩니다:

---

1. Widgets (위젯 계층)

• Flutter 애플리케이션 개발의 최상위 계층으로, 모든 UI 요소는 위젯으로 표현됩니다.
• 위젯은 Flutter의 기본적인 빌딩 블록으로, 레이아웃, 스타일, 사용자 상호작용 등을 정의합니다.
• StatelessWidget과 StatefulWidget으로 나뉘며, 위젯 트리 구조를 통해 복잡한 UI를 구현합니다.

예제 위젯:

• 기본 위젯: Text, Image, Icon
• 구조적 위젯: Column, Row, Container
• 상호작용 위젯: ElevatedButton, TextField

---

2. Rendering (렌더링 계층)

• 위젯 계층 아래에서 동작하며, 위젯의 구성을 화면에 렌더링하는 책임을 집니다.
• 렌더링 트리를 생성하여 위젯의 배치, 크기 조정, 그리기 등의 작업을 처리합니다.
• 이 계층은 위젯 계층과 독립적으로 설계되어 있어, 위젯의 상태 변경이나 레이아웃 변화를 효율적으로 처리할 수 있습니다.

구성 요소:

• RenderObject: 렌더링 트리의 기본 구성 요소로, 레이아웃과 그리기를 담당.
• PipelineOwner: 렌더링 프로세스를 관리.

---

3. Composition Layer (구성 계층)

• Flutter의 중간 계층으로, 렌더링 계층과 시스템 계층을 연결하는 역할을 합니다.
• 레이어 시스템을 통해 애플리케이션이 GPU와 통신하여 고성능 그래픽을 구현할 수 있도록 합니다.
• 주로 커스텀 위젯이나 애니메이션을 구현할 때 활용됩니다.

예제:

• CustomPaint: 사용자가 직접 그림을 그리기 위해 사용하는 위젯.
• Canvas: 2D 그래픽을 처리하기 위한 도구.
• SceneBuilder: 화면에 장면(Scene)을 구성하는 도구.

---

4. Engine (엔진 계층)

• Flutter의 가장 저수준 계층으로, 애플리케이션과 디바이스 간의 상호작용을 담당합니다.
• C++로 작성된 Skia 그래픽 엔진을 사용하여 GPU를 통해 고성능 그래픽을 렌더링합니다.
• 애플리케이션의 네이티브 코드를 처리하며, 플랫폼별 런타임과 상호작용합니다.

구성 요소:

• Skia: 2D 그래픽 렌더링 엔진.
• Dart Runtime: Flutter의 코드 실행 환경.
• Text Rendering: 텍스트 렌더링을 처리.
• Plugin System: 네이티브 코드와 통신하는 플러그인 시스템.

---

Flutter 계층의 데이터 흐름

1. 사용자 입력:
   • 사용자가 화면을 터치하거나 버튼을 클릭합니다.
   • 이벤트는 위젯 계층에서 처리됩니다.
2. 위젯 트리 업데이트:
   • 입력에 따라 위젯 트리에서 상태(State) 변화가 발생합니다.
   • 변경된 위젯 트리는 렌더링 트리로 전달됩니다.
3. 렌더링 트리 생성 및 업데이트:
   • 렌더링 트리가 새로 생성되거나 업데이트되어 레이아웃과 그리기 작업이 수행됩니다.
4. 그래픽 엔진 처리:
   • 렌더링 트리는 구성 계층을 통해 Skia 엔진으로 전달됩니다.
   • Skia 엔진은 GPU를 사용하여 최종 UI를 화면에 렌더링합니다.

---

Flutter 계층 구조의 장점

1. 유연성:
   • 개발자는 고수준 위젯 계층에서 작업하거나, 필요에 따라 낮은 수준의 구성 계층과 엔진 계층까지 접근할 수 있습니다.
2. 고성능:
   • Skia 엔진과 GPU를 활용한 렌더링으로 네이티브 성능에 가까운 결과를 제공합니다.
3. 일관된 UI:
   • 모든 플랫폼(Android, iOS, Web, Desktop)에서 동일한 위젯 계층을 사용하여 UI의 일관성을 유지합니다.
4. Hot Reload:
   • 위젯 계층에서 코드 변경 사항을 즉시 반영할 수 있어 빠른 피드백 루프를 제공합니다.

---

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!"),
        ),
      ),
    );
  }
}

1. Widgets 계층:
   • Text, AppBar, Scaffold 등이 위젯으로 구성됩니다.
2. Rendering 계층:
   • Text와 Center 위젯의 위치, 크기 등을 계산하여 화면에 렌더링합니다.
3. Composition Layer:
   • Canvas와 같은 도구를 사용하여 그래픽 장면을 구성합니다.
4. Engine 계층:
   • Skia 엔진이 GPU를 사용해 최종적으로 화면에 UI를 렌더링합니다.

---

결론

Flutter의 계층적 프레임워크는 높은 수준의 추상화와 저수준의 엔진 통합을 결합하여 유연하면서도 강력한 개발 환경을 제공합니다. 이 계층적 구조를 이해하면 Flutter 애플리케이션의 작동 방식을 깊이 파악할 수 있으며, 고성능 크로스 플랫폼 애플리케이션을 개발하는 데 유리합니다.

---

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

---

🎬 유튜브 채널 🎬

위로그@WiLog

🎬 치지직 채널 🎬

위로그 채널 - CHZZK

---