Flutter에서 GPU 렌더링 이해하기: Skia에서 Impeller까지

Flutter는 강력한 UI 프레임워크로서 빠른 렌더링을 제공하기 위해 GPU(Graphics Processing Unit)를 적극 활용합니다. 특히, Skia 엔진을 사용하여 다양한 플랫폼에서 일관된 그래픽 성능을 보장해왔습니다. 하지만 성능 향상과 최적화를 위해 Flutter 팀은 새로운 렌더링 엔진인 Impeller를 도입했습니다. 이번 글에서는 Flutter의 GPU 렌더링 과정과 Impeller 엔진의 등장 배경 및 특징을 자세히 살펴보겠습니다.

1. Flutter의 렌더링 엔진: Skia와 Impeller

Skia: 기존의 렌더링 엔진

Flutter는 기본적으로 Skia라는 2D 그래픽 엔진을 사용하여 UI를 렌더링합니다. Skia는 Chrome, Android 등에서도 사용되는 강력한 오픈소스 그래픽 라이브러리로, 벡터 그래픽, 글꼴 렌더링, 비트맵 이미지 등을 처리하는 기능을 제공합니다.

하지만 Skia를 활용한 Flutter의 렌더링 방식에는 몇 가지 한계가 있었습니다.

• 실시간 셰이더 컴파일 문제: Flutter의 애니메이션 및 UI 변화를 처리할 때, 셰이더(Shader)를 즉석에서 컴파일하는 과정에서 지연(Jank)이 발생하는 경우가 많았습니다.
• Metal 및 Vulkan 최적화 부족: iOS에서는 Metal API를, Android에서는 Vulkan API를 활용해야 고성능 그래픽 처리가 가능하지만, Skia는 이를 완벽하게 활용하지 못했습니다.

Impeller: 새로운 렌더링 엔진의 등장

이러한 문제를 해결하기 위해 Flutter 3.10부터 iOS에서 기본 렌더링 엔진이 Skia에서 Impeller로 변경되었습니다. Impeller는 GPU 최적화에 초점을 맞춘 새로운 렌더링 엔진으로, Skia보다 더 나은 성능과 안정성을 제공합니다.

Impeller의 주요 특징

1. 셰이더 사전 컴파일(Precompiled Shader)
   • 기존 Skia에서는 실시간으로 셰이더를 컴파일하면서 지연이 발생했지만, Impeller는 앱 실행 전에 셰이더를 미리 컴파일하여 성능 문제를 해결합니다.
2. Metal 및 Vulkan 완전 지원
   • Impeller는 iOS에서는 Metal, Android에서는 Vulkan을 적극적으로 활용하여 최적화된 성능을 제공합니다.
3. 더 빠르고 부드러운 애니메이션
   • Skia 기반의 Flutter 앱에서는 화면 전환이나 애니메이션에서 간헐적으로 끊김이 발생할 수 있었지만, Impeller는 이를 개선하여 부드러운 애니메이션을 제공합니다.

현재 Impeller는 iOS에서는 기본적으로 활성화되어 있으며, Android에서도 실험적으로 사용할 수 있습니다.

---

2. Flutter의 GPU 렌더링 과정

Flutter는 GPU를 활용하여 UI를 렌더링하며, 기본적인 렌더링 과정은 다음과 같습니다.

1. User Input (사용자 입력 처리)

Flutter 애플리케이션에서 사용자의 터치, 클릭 등의 입력이 발생하면, 위젯 트리에 변경이 반영될 수 있습니다. 이 단계에서 애니메이션이 실행되거나, 새로운 UI가 갱신될 수 있습니다.

2. Animation (애니메이션 단계)

입력에 따라 애니메이션이 필요할 경우, Flutter의 AnimationController가 실행됩니다. 이 과정에서 프레임마다 애니메이션이 진행되며, 위젯 트리의 변경이 발생할 수 있습니다.

3. Build (위젯 트리 생성)

Flutter는 build() 메서드를 호출하여 새로운 위젯 트리를 생성합니다. 위젯 트리는 UI 구조를 정의하며, 화면에 표시될 내용을 결정하는 중요한 역할을 합니다.

4. Layout (레이아웃 단계)

위젯이 화면에서 차지할 크기와 위치를 결정하는 단계입니다. Flutter는 부모 위젯이 자식 위젯에게 공간을 할당하고, 이를 바탕으로 화면을 구성합니다.

5. Paint (그리기 단계)

각 위젯의 시각적 요소를 그리는 단계입니다. Flutter의 Canvas를 사용하여 실제 화면에 어떻게 표시될지를 정의합니다.

6. Composition (합성 단계)

UI 요소들이 여러 개의 Layer로 나뉘어 합성되는 과정입니다. Flutter는 Layer Tree를 관리하며, 최적의 방법으로 화면을 조합합니다.

7. Rasterization (최종 렌더링)

마지막으로 GPU에서 데이터를 받아 화면에 픽셀 단위로 변환하는 단계입니다. 이 단계에서 Skia 또는 Impeller가 실제 화면에 UI를 렌더링합니다.

---

3. Impeller를 활용한 성능 최적화 방법

Impeller를 활용하면 더욱 빠르고 부드러운 UI를 만들 수 있습니다. 최적화된 애니메이션과 렌더링을 위해 몇 가지 팁을 소개합니다.

1. Impeller 활성화하기

iOS에서는 기본적으로 Impeller가 활성화되어 있지만, Android에서는 실험적으로 사용할 수 있습니다.

flutter build apk --enable-impeller

위 명령어를 실행하면 Android에서도 Impeller를 활성화할 수 있습니다.

2. 복잡한 애니메이션 최적화

Impeller는 애니메이션 성능을 향상시키지만, 여전히 복잡한 UI 요소는 성능에 영향을 줄 수 있습니다. 이를 최적화하기 위해 다음을 고려할 수 있습니다.

• RepaintBoundary를 활용하여 불필요한 UI 갱신을 방지
• Transform 위젯을 적절히 사용하여 부드러운 애니메이션 제공
• ShaderMask와 같은 고급 효과 사용 시 GPU 부하를 고려

3. 적절한 이미지 포맷 사용

Flutter에서 이미지를 사용할 때는 GPU에서 최적화된 포맷을 활용하는 것이 중요합니다.

• PNG보다는 WebP 또는 JPEG를 사용하는 것이 성능에 유리할 수 있음
• flutter_image_compression 같은 패키지를 사용하여 이미지 크기 최적화

---

4. 결론

Flutter는 강력한 GPU 렌더링 엔진을 활용하여 크로스 플랫폼에서 뛰어난 성능을 제공합니다. 기존의 Skia에서 Impeller로 전환됨에 따라 애니메이션과 UI 렌더링 성능이 더욱 향상되었습니다. 특히 Impeller는 셰이더 사전 컴파일, Metal 및 Vulkan 최적화, 레이어 기반 렌더링 개선을 통해 Flutter 애플리케이션을 더욱 부드럽고 빠르게 만들 수 있습니다.

앞으로도 Impeller는 지속적으로 개선될 예정이며, Android에서도 더욱 안정적인 렌더링 엔진으로 자리 잡을 것입니다. Impeller를 적극적으로 활용하여 더욱 부드럽고 효율적인 Flutter 앱을 만들어 보시죠 !!
읽어주셔서 감사합니다 오늘도 즐코 빡코 !!