(Flutter – Graphics) Rendering system: Skia & Impeller

Flutter의 Rendering 소개

참조: Flutter’s rendering model

렌더링 엔진(Rendering engine) 이란?

렌더링 엔진은 애플리케이션 코드에서 추상적인 명령을 화면상의 시각적 요소로 변환하는 소프트웨어입니다.

모바일 앱, 비디오 게임, 웹사이트의 그래픽과 사용자 인터페이스 뒤에서 작동하여 코드를 픽셀, 색상, 형태, 애니메이션으로 변환합니다.

이 과정을 통해 개발자는 사용자가 디바이스에서 상호작용하는 인터페이스와 이를 표시할 수 있게 됩니다..

Flutter의 Rendering 모델이란?

전통적인 Android 앱은 Java 코드 호출 후, Android 시스템 라이브러리가 Canvas 객체에 자체를 그리는 컴포넌트를 제공하고, Skia 그래픽 엔진이 CPU나 GPU를 호출해 디바이스에 그리기를 완료합니다.

반면, 크로스 플랫폼 프레임워크는 기본적인 Android 및 iOS UI 라이브러리 위에 추상화 계층을 만들어, 각 플랫폼 표현의 불일치를 개발 도구들로 극복하고자 합니다. 이 과정은 UI와 앱 로직 간의 상호 작용이 많을 때 상당한 오버헤드를 추가할 수 있습니다.

Flutter는 이러한 추상화를 최소화하고, 시스템 UI 위젯 라이브러리 대신 자체 위젯 세트를 사용합니다. Flutter의 비주얼을 그리는 Dart 코드는 네이티브 코드로 컴파일되며, Skia(또는 미래에는 Impeller)를 사용해 렌더링합니다.

Flutter 3.10에서는 iOS에서 Impeller를 기본 렌더링 엔진으로 설정했습니다.

Flutter Rendering Pipeline

Flutter의 Rendering pipeline은 직관적이며 빠릅니다.

아래 단계중 4. Layout, 5. Paint, 6. Composition 이 Rendering 동작에 해당됩니다.

1. User Input (사용자 입력):
   • 사용자가 앱과 상호 작용하는 모든 방식을 처리합니다.
   • 예를 들어 터치, 클릭, 스크롤 등의 이벤트가 여기에 해당됩니다.
2. Animation (애니메이션):
   • 정의된 애니메이션에 따라 위젯의 상태가 시간에 따라 어떻게 변할지 결정합니다.
   • 이는 일정 간격으로 화면을 갱신하여 애니메이션 효과를 나타냅니다.
3. Build (빌드):
   • 위젯의 상태 변화에 따라 위젯 트리가 재구성됩니다.
   • Flutter에서는 상태가 변경될 때마다 위젯을 다시 “빌드”합니다.
4. Layout (레이아웃):
   • 각 위젯의 크기와 위치를 결정합니다.
   • 이 단계에서 위젯은 주어진 부모 위젯의 제약 조건 내에서 최적의 크기를 계산합니다.
5. Paint (페인트):
   • 위젯을 실제 픽셀로 변환합니다.
   • 이 단계에서 위젯의 시각적 표현이 캔버스에 그려집니다.
6. Composition (합성):
   • 다양한 레이어를 올바른 순서대로 합성하여 최종 이미지를 만듭니다.
7. Rasterize (래스터화):
   • 합성된 이미지를 GPU가 이해할 수 있는 명령으로 변환하여 실제 화면에 표시합니다.

Skia

개요

Skia는 초기부터 선택된 Flutter의 기본 렌더링 엔진으로, 2D 그래픽스를 위한 오픈 소스 라이브러리입니다.

Google에서 개발하고 유지 관리하는 이 라이브러리는 Chrome, Android, Flutter 등 다양한 제품에서 널리 사용됩니다.

Skia는 벡터 그래픽스, 텍스트 렌더링, 이미지 디코딩을 처리하며, GPU 가속을 통해 고성능의 그래픽스 렌더링을 제공합니다.

Flutter 앱에서 복잡한 UI와 부드러운 애니메이션을 가능하게 하는 데 필수적인 역할을 합니다.

Skia의 주요 특징

• 고성능 렌더링:
  • Skia는 GPU 가속을 사용하여 고성능으로 그래픽을 렌더링할 수 있습니다.
  • 이를 통해 복잡한 애니메이션과 부드러운 스크롤링 같은 효과를 높은 프레임 속도로 구현할 수 있습니다.
• 플랫폼 독립성:
  • Skia는 다양한 운영 체제와 플랫폼에서 사용될 수 있도록 설계되었습니다.
  • 이로 인해 Flutter는 Android, iOS, 웹, 데스크톱 등 여러 플랫폼에서 일관된 그래픽스 품질을 제공할 수 있습니다.
• 다양한 그래픽스 기능:
  • Skia는 텍스트, 도형, 이미지, 셰이더 등 다양한 그래픽 요소를 다루는 기능을 제공합니다.
  • 이를 통해 개발자는 복잡한 UI 디자인과 시각적 효과를 쉽게 구현할 수 있습니다.
• 커스텀 위젯과 효과 개발:
  • Flutter 개발자는 Skia의 기능을 활용하여 커스텀 위젯과 복잡한 그래픽 효과를 개발할 수 있습니다.
  • 이는 Flutter 앱이 기본 위젯만 사용하는 것을 넘어서 독창적이고 차별화된 사용자 경험을 제공할 수 있게 합니다.

Impeller

개요

Impeller는 Flutter의 성능을 한 단계 끌어올리기 위해 개발된 실험적인 렌더링 엔진으로 3.10버전부터 iOS에서 Impeller를 기본 렌더링 엔진으로 적용 하기 시작했습니다.

이는 Skia의 대안으로, 모던 GPU 아키텍처를 최대한 활용하여 렌더링 성능을 개선하는 것을 목표로 합니다.

Impeller는 Metal, Vulkan, OpenGL 과 같은 저수준 그래픽스 API를 직접 사용함으로써, 더 나은 성능과 효율성을 제공합니다.

현재는 Flutter에서 선택적으로 사용할 수 있으며, 특히 복잡한 그래픽스와 애니메이션을 더 부드럽게 처리할 수 있는 잠재력을 가지고 있습니다.

Impeller의 주요 특징

• 고성능 GPU 가속 렌더링:
  • Impeller는 GPU의 강력한 연산 능력을 최대한 활용하여 복잡한 UI와 애니메이션을 더 부드럽고 빠르게 렌더링합니다.
• 저수준 그래픽스 API 사용:
  • Impeller는 메탈, 다이렉트3D, Vulkan 같은 저수준 API를 직접 사용하여, 그래픽스 처리의 효율성과 성능을 최적화합니다.
• 플랫폼 간 성능 최적화:
  • Impeller는 다양한 플랫폼에서 일관된 성능 개선을 제공하기 위해 설계되었습니다.
  • 이는 Flutter 앱이 iOS, Android, 데스크톱 등 여러 플랫폼에서도 높은 성능을 유지할 수 있게 합니다.
• 실험적인 렌더링 엔진:
  • 현재 Impeller는 실험적인 단계에 있으며, Flutter에서 선택적으로 사용할 수 있습니다.
  • 특히, Flutter 3.10부터 iOS에서 Impeller를 기본 렌더링 엔진으로 사용하며, Android에서는 프리뷰 모드로 제공됩니다.

Skia vs Impeller

Skia와 Impeller는 Flutter 애플리케이션에서 사용되는 두 가지 다른 그래픽스 렌더링 엔진입니다.

Impeller 적용 방법

참조: Impeller rendering engine

iOS

iOS는 기본적으로 Impeller가 활성화 되며, 비활성화 하기 위해서는 빌드시 다음 옵션을 추가하여 비활성화 합니다.

$ flutter run --no-enable-impeller

macOS

Flutter 3.13 Stable 버전 부터는 macOS에서도 Impeller를 미리보기로 사용할 수 있습니다.

macOS에서 Impeller를 활성화 하려면 빌드시 다음 옵션을 추가하여 활성화 합니다.

$ flutter run --enable-impeller

Android

Flutter 3.16부터 Vulkan을 지원하는 Android 기기에서 다음 옵션을 주어 impeller를 활성화 할 수 있습니다.

$ flutter run --enable-impeller

참조링크

impeller github docs

Understanding Impeller: A deep-dive into Flutter’s Rendering Engine