---
category: Computer_Science_and_Theory
tags: [auto-wikified, technical-documentation, computer_science_and_theory]
title: Shader Compilation Jank
description: "**Shader Compilation Jank(셰이더 컴파일 잰크)**는 모바일 기기에서 복잡한 애니메이션이나 새로운 시각 효과가 처음 실행될 때, 필요한 셰이더를 실시간으로 컴파일하면서 발생하는 화면 끊김 현상이다 [1, 2]."
last_updated: 2026-05-04
---

# Shader Compilation Jank

## 📌 Brief Summary
**Shader Compilation Jank(셰이더 컴파일 잰크)**는 모바일 기기에서 복잡한 애니메이션이나 새로운 시각 효과가 처음 실행될 때, 필요한 셰이더를 실시간으로 컴파일하면서 발생하는 화면 끊김 현상이다 [1, 2]. 이는 기존 Flutter 프레임워크에서 지속적으로 지적되던 가장 고질적인 성능 문제였으며, '셰이더 워밍업(shader warmup)'과 같은 꼼수(hacks)로도 완전히 해결할 수 없었다 [2]. 현재는 런타임 대신 빌드 시점에 셰이더를 미리 컴파일하는 **Impeller 렌더링 엔진**이 도입되면서 이 문제가 근본적으로 해결되고 있다 [2, 3].

## 📖 Core Content
* **발생 원인 및 현상**
  애플리케이션 구동 중 복잡한 애니메이션이나 사용자가 처음 마주하는 새로운 시각적 효과를 처리할 때, 렌더링 엔진이 **필요한 셰이더를 실시간(on the fly)으로 컴파일**해야 하는 상황에서 발생한다 [1]. 이 컴파일 과정에서 프레임 드랍이 일어나며, 결과적으로 눈에 띄는 화면 끊김인 '잰크(Jank)' 현상을 유발한다 [1, 2].
* **해결 기술 (Impeller 렌더링 엔진)**
  Flutter는 셰이더 컴파일 잰크라는 역사적인 성능 문제를 해결하기 위해 기존 엔진을 대체하는 **Impeller**를 도입했다 [1]. Impeller는 런타임에 셰이더를 컴파일하는 대신, **애플리케이션 빌드 과정에서 더 작고 단순하며 최적화된 셰이더의 모든 변형을 미리 컴파일(pre-compile)**하는 아키텍처를 채택했다 [2, 3].
* **성능 개선 효과**
  미리 셰이더가 준비되어 있기 때문에 새로운 효과를 처음 렌더링할 때 발생하던 프레임 드랍 현상이 제거된다 [1, 2]. 이를 통해 앱 실행 시 첫 프레임부터 예측 가능하고 매끄러운 성능을 제공하며, **고주사율 기기에서도 복잡한 전환 및 애니메이션을 60fps 또는 120fps로 일관되게 렌더링**할 수 있다 [3, 4].

## ⚖️ Trade-offs & Caveats
셰이더 컴파일 잰크를 해결하기 위한 아키텍처 변경 및 Impeller 엔진 도입과 관련하여 다음과 같은 제약 사항과 트레이드오프가 존재한다.

* **플랫폼별 도입 성숙도 차이**
  iOS 환경에서는 Impeller가 2023년(Flutter 3.10)부터 안정화되어 기본 그래픽 백엔드로 적용되었고 잰크 현상이 성공적으로 제거되었다 [2]. 하지만 **Android 환경에서는 아직 프리뷰 단계이거나 활발히 개발이 진행 중인 상태**로, 플랫폼 간에 최적화와 안정성 수준의 격차가 존재한다 [2, 4].
* **기본 앱 용량(APK 크기) 증가**
  해당 렌더링 방식을 구현하기 위해 Flutter 앱은 **Impeller 렌더링 엔진과 Dart 런타임을 앱과 함께 배포(ship)해야 하는 부담**이 있다 [5]. 이로 인해 최소한의 기능을 가진 앱이라도 기본 APK 크기가 약 8~12MB 수준에 달하게 되며, 이는 OS의 네이티브 컴포넌트를 사용하는 다른 프레임워크(React Native의 경우 5~8MB)에 비해 메모리와 초기 앱 용량에서 불리한 요소로 작용한다 [5].

---
*Last updated: 2026-05-03*