핵심 요약
카카오엔터테인먼트의 카카오웹툰 개편에서 하드웨어 가속과 IntersectionObserver를 활용해 렌더링 성능을 개선하고 lazy loading을 적용했습니다.
주요 경험
- transform: translate3d와 opacity만 변경하는 방식으로 레이어를 승격시켜 Layout/Paint를 피하고 60fps 부드러운 인터랙션 구현에 기여했다.
- IntersectionObserver를 활용한 lazy load 도입과 polyfill 확보로 호환성 고려, 스크롤 기반 대비 50~60fps의 안정성을 확인했다.
- 테스트는 CPU를 6배 느리게 Throttling한 환경에서 수행했고, 패럴랙스 제거 및 로딩 지연 최소화로 체감 성능이 개선됐다.
얻은 인사이트
- 하드웨어 가속은 상황에 따라 유의미하게 작용하나 남용 시 초기 렌더링이 느려질 수 있다.
- transform/opacity 중심 변경과 IntersectionObserver의 조합이 렌더링 흐름을 단순화하고 로딩 성능을 개선한다.
- 필요 시에만 GPU 승격을 적용하고, 다양한 브라우저 지원을 위해 polyfill과 대체 방법을 준비하는 것이 중요.
