웹뷰 속 무한 CSS 애니메이션의 숨은 비용

핵심 내용

• 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는 웹뷰 사용 여부와 함께 운영 비용까지 고려