Hwan'Story › @kim-hwan

Flutter 아키텍처 개요 1편: 레이어 모델

· (수정 ) · 조회 2115

Flutter 아키텍처 개요

플러터 공식 사이트에서 설명하고 있는 플러터 아키텍처 개요에 대해서 읽어보고 정리해본다.

개요

플러터는 여러 운영체제에서 코드를 재사용할 수 있도록 설계되어 있는 크로스 플랫폼 UI 툴킷이다. 애플리케이션이 직접 플랫폼 서비스와 인터페이스 할 수 있도록 설계되어 있어 서로 다른 플랫폼에 애플리케이션을 출시하더라도 최대한 많은 코드를 공유하면서 고성능 앱을 지원하는 것이 목표이다.

목차

  1. 레이어 모델
    • 플러터를 구성하는 요소들
  2. 반응형 유저 인터페이스
    • 플러터 사용자 인터페이스 개발의 핵심 개념
  3. 위젯에 대한 소개
    • 플러터 사용자 인터페이스의 기본 요소
  4. 렌더링 프로세스
    • 플러터가 UI 코드를 픽셀로 바꾸는 방법
  5. 플랫폼 임베더에 대한 개요
    • 모바일과 데스크톱 OS들에서 플러터 앱을 실행하게 하는 코드
  6. 다른 코드와 플러터의 통합
    • 플러터에 사용할 수 있는 다양한 기술에 대해서
  7. 웹 지원
    • 브라우저 환경에서 플러터 특징에 대한 발언

아키텍처 레이어

플러터를 구성하는 요소들

플러터는 확장이 가능한 레이어 시스템으로 설계되어 있다. 이것은 각각 기본 레이어에 의존하는 일련의 독립적인 라이브러리들로 존재한다. 어떠한 레이어도 아래 레이어에 대한 접근 권한이 없으며, 프레임워크 레벨의 모든 부분은 선택적이고 교체가능하게 디자인되어 있다.

archdiagram.png

  1. 플랫폼별 임베더
    • 운영체제와 직접 닿아있어 플랫폼 종속적인 렌더링, 사용자 입력, 통신 등의 기능을 플랫폼 종속적으로 수행한다.
      • 현재 안드로이드, 맥OS, 윈도우, 리눅스 플랫폼의 임베더가 제공된다.
  2. 엔진
    • 플러터의 핵심으로 대부분 C++ 언어로 작성되어 있다. Skia 엔진을 통한 그래픽, 파일 및 네트워크, Dart 런타임 등 플러터의 핵심 API를 로우 레벨로 구현한다.
    • 엔진은 기본 C++ 코드를 Dart 클래스로 래핑하는 dart:ui를 통해 Flutter 프레임워크에 제공된다.
  3. 프레임워크
    • 실제 플러터 앱 개발자가 사용하는 상위 수준의 기능들을 제공한다.

app-anatomy.svg

위 그림은 플러터로 개발된 가장 기본적인 앱의 개요를 보여준다.

  • 다트 앱

    1. 위젯을 원하는 UI로 한다.
    2. 비즈니스 로직을 구현한다.

  • 프레임워크

    1. 고품질 앱(예: 위젯, 히트 테스트, 제스처 감지, 접근성, 텍스트 입력)을 구축하기 위한 상위 수준의 API를 제공한다.
    2. 앱의 위젯 트리를 장면으로 합성한다.

  • 엔진

    1. 합성된 장면의 래스터화를 담당한다.
    2. Flutter의 핵심 API(예: 그래픽, 텍스트 레이아웃, Dart 런타임)의 로우레벨 구현을 제공한다.
    3. dart:ui API를 사용하여 프레임워크에 해당 기능을 제공한다.
    4. 엔진의 임베더 API를 사용하여 특정 플랫폼과 통합한다.

  • 임베더

    1. 렌더링 표면, 접근성 및 입력과 같은 서비스에 대한 액세스를 위해 기본 운영 체제와 관련 동작을 수행한다.
    2. 이벤트 루프를 관리한다.
    3. 임베더를 앱에 통합하기 위한 플랫폼별 API를 제공한다.

  • Runner

    1. 임베더의 플랫폼별 API에 노출된 부분을 대상 플랫폼에서 실행 가능한 앱 패키지로 구성한다.
    2. 앱 개발자가 소유한 Flutter Create에서 생성된 앱 템플릿의 일부이다.

정리

Flutter의 아키텍처 레이는 크게 4가지로 나눌 수 있다.

  1. Framework Layer: Flutter의 Framework Layer는 UI, Gesture, Animation, Painting, Text 및 기타 모든 사용자 인터페이스 요소를 포함한다. 이 층은 기본적으로 위젯을 사용하여 구성된다.

  2. Engine Layer: Flutter의 Engine Layer는 그래픽스, 애니메이션, 터치 이벤트 처리, 레이아웃 및 렌더링과 같은 저수준 서비스를 제공한다. 이 층은 Dart 코드와 C / C ++ 코드로 구성된다.

  3. Embedding Layer: Flutter의 Embedding Layer는 Flutter Engine과 클라이언트 애플리케이션 간의 인터페이스를 제공한다. 이 층은 Android, iOS, 웹 브라우저 및 기타 플랫폼에 대한 Flutter 애플리케이션의 빌드를 위해 필요하다.

  4. Application Layer: Flutter의 Application Layer는 애플리케이션 로직 및 상태 관리를 담당한다. 이 층은 비즈니스 로직, 데이터베이스 접근 및 네트워킹과 같은 기능을 처리하고, Flutter Framework와 함께 사용하여 위젯을 빌드한다.

이러한 층들은 서로 다른 역할을 가지고 있으며, Flutter 애플리케이션을 만드는 데 필요한 모든 요소를 제공한다.

출처

https://docs.flutter.dev/resources/architectural-overview#architectural-layers

관련 게시글