프론트엔드
카카오웹툰은 하드웨어 가속과 IntersectionObserver를 어떻게 사용했을까?
두줄요약
카카오웹툰은 GPU 가속과 lazy load로 복잡한 웹 인터랙션의 렌더링 비용을 줄였습니다. 스크롤 이벤트 대신 IntersectionObserver를 활용해 안정적인 프레임 성능을 확인했습니다.
구조와 흐름
translate3d와will-change를 통한 요소 레이어 승격 및 GPU 렌더링 활용transform,opacity변경으로 Layout·Paint 단계 회피- 뷰포트 진입 시점의
IntersectionObserver기반 이미지·비디오 lazy load
성능/운영 포인트
- 스크롤 위치 기반 인터랙션에서
translate3d와opacity적용 - CPU 6배 throttling 비교에서 스크롤 이벤트 10~60프레임,
IntersectionObserver50~60프레임 측정 - 패럴랙스 효과의 웹 렌더링 비용을 고려한 일부 페이지 외 제거
주의할 점
will-change다수 사용 시 100~200ms 사전 준비 비용에 따른 초기 렌더링 저하- 포지셔닝 속성 변경 대신
transform,opacity중심의 애니메이션 구성 IntersectionObserver미지원 브라우저 대응을 위한 Polyfill 필요- 하드웨어 가속과 옵저버의 무분별한 적용 지양
