Files
2nd/10_Wiki/Topics/_Archive_Orphans/Shader_Compilation_Jank.md
T

3.7 KiB

category, tags, title, description, last_updated
category tags title description last_updated
Computer_Science_and_Theory
auto-wikified
technical-documentation
computer_science_and_theory
Shader Compilation Jank **Shader Compilation Jank(셰이더 컴파일 잰크)**는 모바일 기기에서 복잡한 애니메이션이나 새로운 시각 효과가 처음 실행될 때, 필요한 셰이더를 실시간으로 컴파일하면서 발생하는 화면 끊김 현상이다 [1, 2]. 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 크기가 약 812MB 수준에 달하게 되며, 이는 OS의 네이티브 컴포넌트를 사용하는 다른 프레임워크(React Native의 경우 58MB)에 비해 메모리와 초기 앱 용량에서 불리한 요소로 작용한다 [5].

Last updated: 2026-05-03