Flutter 아키텍처

Flutter는 앱을 개발할 때, 여러 계층으로 구성된 아케텍처를 사용한다. 이 아키텍처는 Flutter의 핵심 구성 요소를 각 계층으로 나누어 설명한다.
주요 계층을 살펴보면

1. Framework

   • Flutter 애플리케이션은 Dart 프로그래밍 언어로 작성되었다. Dart 프레임워크는 Flutter에서 제공하는 다양한 위젯과 라이브러리로 구성되어 있다. 위젯 계층은 애플리케이션의 UI를 구성하며, 이를 통해 개발자는 사용자 인터페이스를 구축할 수 있다.
   • 주요 구성 요소로는 Material과 Cupertino 디자인 시스템을 지원하는 위젯, 애니메이션 및 제스처 처리 등이 있다.
   • Flutter를 사용하는 개발자는 보통 이 영역을 주로 다루게 될 것이다.

2. Engine

   • Flutter 엔진은 C++로 작성되어 있으며, 주로 저수준의 그래픽 렌더링을 담당한다. 이 엔진은 Skia라는 고성능 그래픽 라이브러리를 사용하여 2D 그래픽을 렌더링하며, Dart 런타임도 포함되어 있다.
   • 이 계층은 또한 텍스트 렌더링, 입력 처리, 이미지 및 비디오 디코딩 등 다양한 기능을 제공한다.

3. Embedder

   • Embedder는 특정 플랫폼(Android, iOS, Linux, web 등)에서 Flutter 애플리케이션을 실행할 수 있도록 도와주는 계층이다. 플랫폼별 Embedder는 엔진과 통신하며, 네이티브 코드와 Flutter 코드 간의 상호작용을 가능하게 한다.
   • 각 플랫폼은 고유의 Embedder를 사용하여 Flutter의 엔진을 실행하고, 플랫폼의 표준 출력 및 입력 메커니즘과 상호작용을 할 수 있다.
   • 특징으로는 각 플랫폼의 네이티브 언어로 작성되어 있다.

Skia 엔진

Skia는 flutter의 그래픽 엔진으로 2D 그래픽을 고속으로 렌더링하는 라이브러리이다.
이 엔진은 Google에서 개발한 오픈 소스 그래픽 라이브러리로(사실 구글이 Skia 엔진을 만든 회사를 인수한 것) Flutter 뿐만 아니라 다양한 플랫폼에서 사용되고 있다.
Skia에서 사용하는 OpenGL이라는 그래픽 라이브러리를 사용하고, 이 OpenGL이 여러 운영체제에서 사용할 수 있도록 만들어다.
Skia는 벡터 그래픽, 텍스트, 이미지 처리, 그리고 다양한 그래픽 효과를 제공하여 복잡한 사용자 인터페이스를 부드럽고 효율적으로 렌더링할 수 있게 해준다.

Skia 엔진의 주요 기능

1. 벡터 그래픽 렌더링:
   • Skia는 벡터 기반의 그래픽을 렌더링하는 데 최적화되어 있다. 이는 직선, 곡선, 다각형 등의 기하학적 도형을 그릴 때 주로 사용된다. 벡터 그래픽은 해상도에 의존하지 않으므로 크기 조절을 하더라도 품질이 유지된다.
2. 텍스트 렌더링:
   • Skia는 텍스트 렌더링도 지원한다. 폰트를 로드하고, 텍스트를 화면에 표시하는 데 필요한 기능을 제공한다.
3. 비트맵 이미지 처리:
   • Skia는 비트맵 이미지를 처리할 수 있는 다양한 기능을 제공한다. 예를 들어, 이미지를 로드하고, 변환(회전 등), 필터링(블러, 컬러 조정 등)하는 작업을 수행할 수 있다.
4. 반투명 및 혼합 모드:
   • Skia는 다양한 혼합 모드를 지원하여, 반투명한 요소들이 서로 겹쳐질 때 어떻게 렌더링 될지를 결정한다. 이를 통해 복잡한 시각적 효과를 구현할 수 있다.
5. 하드웨어 가속:
   • Skia는 GPU를 활용한 하드웨어 가속을 지원한다. 이를 통해 그래픽 렌더링 작업이 CPU 대신 GPU에서 수행되어 성능이 크게 향상된다.
6. 플랫폼 독립성:
   • Skia는 다양한 플랫폼에서 동작할 수 있도록 설계되었다. 이로 인해 Skia를 사용하는 애플리케이션은 동일한 코드로 여러 운영 체제에서 일관된 그래픽 품질을 유지할 수 있다.

Flutter가 Skia 엔진을 사용했을 때의 장점

다른 크로스 플랫폼 프레임워크들은 보통 웹뷰를 사용하거나 각 플랫폼의 UI 라이브러리들을 사용한다.
플러터는 웹뷰 대신 직접 Skia 엔진을 사용해 화면을 그리는데, 이때 새로 렌더링이 필요한 위젯들만 렌더링하기 때문에 다른 크로스 플랫폼 프레임워크보다 높은 퍼포먼스를 보장한다.

React Native와의 비교

React Native
가장 대표적인 크로스 플랫폼 프레임워크 중 하나인 RN(React Native)와의 비교를 해보자
RN은 Javascript 코드가 기기와 통신하기 위한 통로 역할을 하는 브릿지를 통해서 통신한다.
GPS, 블루투스 등의 기능을 이용하면 브릿지를 항상 지나게 된다. 또한 RN은 각 플랫폼에서 제공하는 UI를 그대로 사용하고 이 또한 브릿지를 지난다.
결국 플랫폼과 RN 간 통신을 할 때 필요한 리소스 비용이 상당히 높아진다.

Flutter
반면 Flutter의 경우 자체 Skia 엔진과 Dart의 컴파일 언어적 특성으로 빠른 퍼포먼스를 자랑한다.
RN과 다르게 중간에 bridge 없이 프레임워크가 디바이스와 직접 통신을 하며 트리 구조로 구성된 Widget이라는 단위로 각 UI 요소를 직접 그린다.