핵심 요약
크리에이트립은 Android WebView에서 무한 CSS 애니메이션의 높은 CPU 비용 문제를 분석하고, 원인으로 웹뷰 호스트 뷰의 지속 draw 루프를 지목하며, 애니메이션을 웹뷰 밖으로 옮기거나 필요 시 중지하는 해결 방향을 제시했습니다.
구현 방법
- RN/제품 코드를 제거한 순수 Android WebView 최소 재현 하네스 구성
- 다양한 애니메이션 유형 비교 및 CPU/GPU 비용 측정(앱 프로세스 CPU, gfxinfo 프레임, onDraw 로그)
- Marquee를 포함한 여러 형태에서 지속 프레임 생성의 원인 재현 여부 확인
- 문제 원인과 대응 방향을 바탕으로 웹뷰 밖 렌더링/멈춤 전략 제시
주요 결과
- 가시 화면에서 앱 CPU 약 96–102%, gfxinfo 프레임 약 1367(6초) 관측
- 오프스크린/다른 탭에서 CPU 약 3.7–6%, gfxinfo 프레임 0
- will-change 등 일반 최적화로도 웹뷰 호스트 뷰의 draw 루프 증가를 완전히 제거하지 못함
- 해결책으로 애니메이션을 RN/native 또는 네이티브 Android 뷰로 분리하는 전략 제안
