Frame Rendering 16ms 달성을 위한 Flutter 렌더링 최적화 전략

Context

앱 규모 확장 시 Widget Rebuild 빈도 증가로 인한 UI Lag 및 Frame Drop 발생. Main Thread의 과부하와 깊은 Widget Tree 구조로 인한 레이아웃 계산 비용 상승이 성능 병목 지점으로 작용.

Technical Solution

• const 생성자와 전용 Builder(ValueListenableBuilder, Selector)를 통한 불필요한 Widget Rebuild 최소화 설계
• compute() 함수 기반의 별도 Isolate 활용으로 고비용 연산을 Offload 하여 Main Thread UI Freeze 방지
• ListView.builder 도입을 통한 Lazy Loading 구현으로 대규모 리스트의 메모리 점유율 최적화
• RepaintBoundary 적용으로 복잡한 애니메이션 영역의 Repaint 범위를 제한하여 GPU 부하 감소
• build() 메서드 내 무거운 로직 제거 및 initState() 단계로의 데이터 로딩 시점 분리를 통한 렌더링 주기 최적화
• cacheWidth/cacheHeight 설정을 통한 이미지 디코딩 메모리 사용량 제어

Impact

• Frame rendering time target 16ms 달성 및 Jank 현상 제거

Key Takeaway

UI 성능 최적화의 핵심은 렌더링 파이프라인의 불필요한 작업을 제거하고, 연산 부하를 적절한 스레드나 시점으로 분산하는 구조적 효율화에 있음.