웹뷰 속 무한 CSS 애니메이션의 숨은 비용
프론트엔드
웹뷰 속 무한 CSS 애니메이션의 숨은 비용
두줄요약
Android 웹뷰에서 무한 CSS 애니메이션이 앱 CPU를 크게 올리는 현상을 조사했습니다. transform 최적화만으로는 해결되지 않았고, 지속 애니메이션 자체를 줄이는 방향이 필요했습니다.
핵심 내용
- Android React Native 앱의 웹뷰에서 보이는 무한 CSS 애니메이션이 앱 프로세스 CPU를 크게 올리는 현상 분석
- transform: translateX뿐 아니라 opacity 애니메이션, 단순 박스 애니메이션에서도 유사한 고CPU 재현
- 일반 Chrome의 최적화와 달리 웹뷰는 Android View 렌더링 경로와 맞물려 지속 draw loop 비용이 커질 수 있음
구조와 흐름
- 실제 앱에서 가시성 여부에 따라 CPU와 frame 카운터가 크게 달라지는 점을 먼저 확인
- 제품 코드 제거 후 최소 재현 하네스로 static, paused, box-transform, text-transform, opacity-animation 등을 비교
- Chrome과 웹뷰의 렌더링 경로 차이를 통해 웹뷰에서의 host view integration 비용을 해석
주의할 점
- transform, opacity, will-change, translateZ(0)만으로는 웹뷰 고CPU 현상을 해결하지 못할 수 있음
- foreground-visible 상태의 무한 애니메이션은 웹뷰에서 지속적인 draw/onDraw 호출을 유발할 수 있음
- 웹뷰 안의 애니메이션 최적화보다 애니메이션 자체를 멈추거나 웹뷰 밖으로 옮기는 대응이 필요
적용해볼 점
- 웹뷰 내 지속형 애니메이션의 가시성 조건과 CPU, frame 카운터를 함께 점검
- 최소 재현 환경으로 원인 요소를 분리해 실험하는 방식 적용
- 무한 marquee류 UI는 웹뷰 사용 여부와 함께 운영 비용까지 고려