웹뷰 속 무한 CSS 애니메이션의 숨은 비용
2
AI 요약
이 글은 AI가 원문을 분석하여 핵심 내용을 요약한 것입니다.
이 게시물은 Android React Native 앱의 웹뷰에서 보이는 무한 CSS 애니메이션이 높은 CPU와 지속 draw/onDraw 호출을 유발하는 현상을 설명합니다. transform/opacity를 쓰면 좋아야 한다는 통념과 달리, infinite 애니메이션은 매 프레임 compositor frame 생성이 계속되어 Android 앱의 View 렌더링 루프와 맞물리며 비용이 커질 수 있다고 정리합니다. 오디오 플레이어의 Marquee가 화면에 보일 때 앱 CPU가 약 96~102%, gfxinfo frame 카운터가 약 1367로 급증했고 화면 밖/다른 탭에서는 앱 CPU가 한 자리수로 내려가 재현성을 확인했다고 합니다. 순수 Android 웹뷰 최소 재현에서 static/애니메이션 미실행은 idle이었지만 box-transform, text-transform, opacity-animation 등에서도 동일한 고CPU와 frame 폭증이 재현되어 특정 속성이나 Marquee 텍스트 자체만의 문제가 아니라고 결론냅니다. will-change: transform, translateZ(0) 같은 힌트만으로는 해결되지 않으며, 핵심 대응은 웹뷰 안에서 무한 애니메이션을 지속 실행하지 않거나 웹뷰 밖으로 빼는 전략이 필요하다고 제안합니다.
