Flutter Impeller 엔진 최적화: Metal·Vulkan 120fps 구현

Flutter 앱의 첫 렌더링 순간, 화면이 툭툭 끊기는 **셰이더 컴파일 랭크(Shader Compilation Jank)**는 오랫동안 Flutter 개발자를 괴롭혀온 숙제였다. Skia 엔진 시절에는 앱이 실행된 후 처음 렌더링되는 애니메이션이나 커스텀 그래픽이 나타날 때 JIT(Just-In-Time) 방식으로 셰이더를 컴파일하느라 순간적인 프레임 드랍이 발생했다.

Flutter팀이 차세대 렌더링 엔진으로 개발한 Impeller는 이 구조를 근본적으로 바꿨다. 런타임 JIT 셰이더 컴파일 대신 AOT(Ahead-Of-Time) 사전 컴파일을 도입하고, iOS의 Metal과 Android의 Vulkan 같은 최신 GPU 그래픽 API를 직접 제어한다. 2026년 기준 Impeller는 iOS 전면 적용을 거쳐 Android API 29+ 디바이스에서도 기본 렌더러로 완전 정착했다.

이 글은 Impeller 엔진의 내부 작동 아키텍처(Skia와의 차이점), iOS Metal과 Android Vulkan에서의 파이프라인 구조, Flutter DevTools를 활용한 드로우 콜(Draw Call) 분석, 그리고 120Hz 고주사율 디바이스에서 프레임 타깃(8.33ms)을 안정적으로 맞추는 실전 렌더링 최적화 테크닉 5가지를 상세히 다룬다.

핵심 요약

Impeller 엔진의 핵심: JIT 셰이더 컴파일 제거 → AOT 사전 컴파일 + Modern GPU API(Metal, Vulkan) 직접 바인딩으로 셰이더 랭크를 0ms로 억제한다.

성능 지표: Skia 대비 래스터화(Rasterization) 속도 50% 향상, 래스터 프레임 드랍 30~50% 감소, GPU 전력 소모 15~20% 절감.

120Hz 주사율 대응: 120fps 환경에서는 프레임 당 주어진 시간이 8.33ms에 불과하다. UI 스레드와 래스터 스레드 각각의 연산 시간을 8ms 미만으로 통제해야 한다.

Impeller 전용 프로파일링: 2026년 Flutter DevTools의 Impeller Inspector로 드로우 콜 배치(Batching), 텍스처 메모리 할당, GPU 타임라인을 정밀 분석할 수 있다.

최적화 5대 수칙: CustomPainter 레이어 분리 (RepaintBoundary), 셰이더 유니폼 전달 최소화, 텍스처 아틀라스 활용, const 위젯 100% 적용, Vulkan 폴백 대응 테스트.

Skia vs Impeller: 왜 렌더링 엔진을 전면 교체했는가?

Flutter 공식 문서에 따르면, Impeller는 Skia의 추상화 레이어를 거치지 않고 플랫폼 네이티브 그래픽 API와 직접 통신하도록 처음부터 다시 설계된 엔진이다.

비교 항목	기존 Skia 엔진	차세대 Impeller 엔진
셰이더 컴파일 시점	런타임 JIT (최초 애니메이션 시 랭크 발생)	빌드 타임 AOT (사전 컴파일, 랭크 0ms)
백엔드 그래픽 API	OpenGL ES 위주 (Metal/Vulkan 추상화)	iOS Metal / Android Vulkan 전용 백엔드
드로우 콜 배치	개별 드로우 콜 발행 (오버헤드 높음)	자동 파이프라인 래스터 배치 (GPU 오버헤드 최소화)
프레임 일관성	프레임 타임 변동폭 큼	프레임 타임 8ms 미만 일정하게 유지
GPU 전력 소모	기준 대비 100%	15~20% 절감 (배터리 효율 향상)
Android 지원 범위	전 디바이스 (OpenGL ES 3.0)	API 29+ Vulkan 기본, 하위 디바이스 OpenGL 폴백

Skia는 크로스 플랫폼 2D 파이프라인으로서 훌륭했지만, 런타임에 GLSL 셰이더를 기계어로 변환하는 구조 때문에 첫 렌더링 시 10~50ms의 프레임 스파이크가 불가피했다. Impeller는 엔진 빌드 시점에 모든 MSL(Metal Shading Language) 및 SPIR-V 셰이더를 바이너리로 굽는 방식을 택해 랭크 원인을 원천 차단했다.

Impeller 파이프라인: Metal과 Vulkan 하드웨어 가속 구조

Impeller는 두 가지 파이프라인 레이어로 구성된다:

AOT 셰이더 툴체인 (impellerc): Flutter 엔진 빌드 시점에 .vert, .frag GLSL 셰이더 파일을 읽어서 iOS용 Metal 바이트코드 또는 Android용 Vulkan SPIR-V 파이프라인 상태 객체(PSO: Pipeline State Object)로 컴파일한다.
Impeller Runtime (HAL: Hardware Abstraction Layer): 런타임에 렌더 트리를 수신하면 GPU 커맨드 버퍼(Command Buffer)를 즉시 생성하고, Metal / Vulkan 드라이버로 전달한다.

[Flutter Dart UI Code] 
        │
        ▼
[DisplayList Builder] ──(명령 기록)──► [Impeller HAL]
                                             │
                       ┌─────────────────────┴─────────────────────┐
                       ▼                                           ▼
             [iOS: Metal Backend]                       [Android: Vulkan Backend]
             • MTLCommandBuffer                         • VkCommandBuffer
             • MTLRenderPipelineState                   • VkPipeline / VkRenderPass
                       │                                           │
                       ▼                                           ▼
             [Apple Silicon GPU]                        [Adreno / Mali GPU]

Vulkan 백엔드에서는 VkRenderPass와 VkCommandBuffer 생성을 비동기 스레드에서 병렬 처리하므로, CPU가 GPU를 기다리는 대기 시간이 Skia 대비 절반 이하로 줄어든다.

120Hz 모드 성능 예산: 8.33ms 타깃 맞추기

최신 아이폰(ProMotion 120Hz)과 안드로이드 플래그십 디바이스는 초당 120회 화면을 갱신한다. 60Hz 시절에는 프레임당 16.6ms의 여유가 있었지만, 120Hz 환경에서는 8.33ms 안에 한 프레임의 모든 연산이 완료되어야 한다.

60Hz 프레임 예산:  ├──────────────── 16.6ms ────────────────┤
120Hz 프레임 예산: ├────── 8.33ms ──────┤
                  ├─── UI 스레드 ───┼─── 래스터 스레드 ───┤
                       (< 4.0ms)           (< 4.0ms)

Impeller 환경에서 120fps를 달성하려면, UI 스레드(Dart 코드 실행)와 래스터 스레드(GPU 커맨드 제출)가 각각 4ms 이내로 작업을 끝내야 한다.

실전 렌더링 최적화 테크닉 5가지

Impeller가 셰이더 랭크를 없애주더라도, 비효율적인 Dart 코드나 과도한 재그리기(Rebuild)는 여전히 프레임 드랍을 유발한다. 다음 5가지 실전 최적화 패턴을 적용해야 120fps를 완벽하게 유지할 수 있다.

1. RepaintBoundary로 무거운 CustomPainter 레이어 격리

복잡한 캔버스 그래픽이나 애니메이션을 그릴 때, 상위 위젯이 리빌드되면 전체 캔버스가 다시 지나게 된다. RepaintBoundary를 씌우면 Impeller는 해당 레이어를 별도의 GPU 텍스처 텍스처 래스터 캐시로 격리한다.

// 변경 전: Parent 리빌드 시 CustomPainter 전체 다시 그리기
Widget build(BuildContext context) {
  return Column(
    children: [
      Text('카운터: $counter'), // 카운터 변경 시 아래 캔버스도 리빌드!
      MyComplexGraphPainter(data: graphData),
    ],
  );
}

// 변경 후: RepaintBoundary로 레이어 격리 — GPU 래스터 재사용
Widget build(BuildContext context) {
  return Column(
    children: [
      Text('카운터: $counter'),
      RepaintBoundary(
        child: MyComplexGraphPainter(data: graphData),
      ),
    ],
  );
}

2. const 위젯 선언과 Selectors/Watch의 정밀 스코핑

위젯 트리 전체가 리빌드되면 Dart 스레드가 4ms 예산을 순식간에 소진한다. 상태 관리 패키지(Riverpod, Provider) 사용 시 위젯 하위 트리만 선택적으로 리빌드하도록 스코프를 좁혀야 한다. Riverpod 3.0 자동 메모리 해제 가이드에서 언급했듯, select 연산자로 필요한 속성만 구독하는 것이 필수다.

// Riverpod 예시: 전체 User 객체 대신 name만 구독하여 불필요한 리빌드 차단
Widget build(BuildContext context, WidgetRef ref) {
  final userName = ref.watch(userProvider.select((u) => u.name));
  return Text(userName);
}

3. SaveLayer 사용 최소화 (`ClipRRect` 대신 `BorderRadius`)

saveLayer는 GPU에 별도의 오프스크린 버퍼(Offscreen Buffer)를 할당하도록 명령하므로 Impeller 렌더 파이프라인에서 가장 무거운 연산 중 하나다. ClipRRect 대신 DecoratedBox나 BoxDecoration으로 라운딩을 처리하면 오프스크린 버퍼 생성을 방지할 수 있다.

// ❌ 비효율적: saveLayer 오프스크린 버퍼 생성 유발
ClipRRect(
  borderRadius: BorderRadius.circular(16),
  child: Container(color: Colors.blue, height: 100),
)

// ✅ 최적화: Impeller 드로우 콜 단일 패스 처리
Container(
  height: 100,
  decoration: BoxDecoration(
    color: Colors.blue,
    borderRadius: BorderRadius.circular(16),
  ),
)

4. Custom Shader 유니폼(Uniform) 전달 최소화

Flutter 3.x+의 Fragment Program으로 작성한 커스텀 GLSL 셰이더를 사용할 때, Dart에서 매 프레임마다 대량의 Float32Array 유니폼 데이터를 전달하면 CPU-GPU 버스 병목이 생긴다. 유니폼 파라미터 개수를 최소화하고 시간(u_time) 정보만 전달하도록 설계한다.

5. Vulkan 디바이스 폴백(Fallback) 호환성 검증

Android 생태계에는 여전히 Vulkan 드라이버 구현이 부실하거나 지원하지 않는 구형 디바이스(API 28 이하 또는 저가형 칩셋)가 존재한다. Impeller는 이런 경우 자동으로 OpenGL ES 백엔드로 폴백한다.

# Android 실기기에서 Impeller Vulkan 옵션 강제 켜기/끄기 테스트
flutter run --profile --enable-impeller
flutter run --profile --no-enable-impeller # OpenGL 폴백 동작 검증

DevTools Impeller Inspector로 프레임 드랍 추적하기

Flutter DevTools의 Impeller Inspector를 활용하면 GPU 렌더링 병목의 원인을 눈으로 직접 확인할 수 있다.

# 프로파일 모드로 앱 실행 후 DevTools 열기
flutter run --profile

DevTools 타임라인 읽는 법

UI Thread (Dart Execution): Build, Layout, Paint 단계의 실행 시간 확인. 4ms 초과 시 RepaintBoundary 추가 및 위젯 분리 필요.
Raster Thread (Impeller GPU Command): Impeller::RenderPass::Draw 시간 확인. 4ms 초과 시 saveLayer 호출 횟수 및 과도한 뷰 클리핑 여부 점검.
GPU Frame Graph: 분홍색/빨간색 바로 표시되는 프레임 스파이크 탐색.

드로우 콜 횟수가 한 화면에서 100개를 넘어가면 텍스처 아틀라스(Texture Atlas)나 Canvas.drawPoints 모아그리기로 드로우 콜을 배칭해야 한다. Flutter DevTools 메모리 누수 및 CPU 프로파일링 실전 가이드에서 타임라인 심층 분석 기법을 상세히 다뤘다.

자주 묻는 질문

Impeller는 모든 Android 디바이스에서 동작하나요?

Android API 29 (Android 10) 이상 및 Vulkan 1.1을 지원하는 디바이스에서는 Impeller가 기본 렌더러로 작동합니다. Vulkan을 지원하지 않는 구형 칩셋이나 API 28 이하 디바이스에서는 Impeller의 OpenGL 백엔드 또는 레거시 Skia 백엔드로 자동 폴백되므로 개발자가 별도 처리할 필요가 없습니다.

iOS에서 Skia 엔진으로 돌아갈 수 있나요?

아닙니다. 최신 Flutter SDK 버전부터 iOS에서의 Skia 플래그는 완전히 제거되었습니다. iOS 앱은 100% Impeller 엔진(Metal 백엔드)으로 구동됩니다.

Impeller 적용 후 앱 용량이 늘어나나요?

Impeller 셰이더 컴파일러(impellerc) 바이너리와 AOT 컴파일된 셰이더 파이프라인 파일이 앱 번들에 포함되면서 APK/IPA 용량이 약 2~3MB 정도 증가합니다. 하지만 셰이더 랭크 0ms 달성과 래스터 성능 향상 이점이 압도적으로 큽니다.

3D 타드파티 라이브러리(SceneKit, Unity)와 혼용 시 문제가 없나요?

Impeller는 Metal / Vulkan 하드웨어 컨텍스트를 직접 공유하므로, Texture 위젯을 통한 3D 엔진 렌더링 파이프라인 통합이 Skia 시절보다 훨씬 매끄럽고 텍스처 동기화 레이턴시가 낮습니다.

Web 플랫폼에서도 Impeller를 사용하나요?

아닙니다. Flutter Web은 WebAssembly(Wasm) + CanvasKit 또는 Skwasm 엔진을 사용합니다. Impeller는 모바일(iOS/Android) 및 데스크톱 네이티브 렌더링에 특화된 엔진입니다. 웹 성능 최적화는 Flutter Web Wasm + Skwasm 가이드를 참고하세요.