카카오웹툰은 하드웨어 가속과 IntersectionObserver를 어떻게 사용했을까?

카카오웹툰 팀이 애니메이션 성능 문제를 해결하는 과정에서 하드웨어 가속의 원리와 IntersectionObserver를 활용한 lazy loading 구현 방법을 정리한 글이다. GPU 렌더링 파이프라인을 이해하고 실제 코드에 적용하는 방법을 다룬다. 단순 CSS 속성 하나가 60fps를 가능하게 하는 이유를 렌더링 레이어 관점에서 설명한다.

핵심 포인트 - GPU 하드웨어 가속은 transform/opacity 변경 시 Layout·Paint 과정을 스킵해 60fps 달성 - translate3d로 Graphics Layer로 승격시키면 메인 스레드 부하 없이 GPU가 직접 처리 - will-change는 100~200ms 사전 준비로 첫 애니메이션 지연을 없애지만 남용하면 초기 렌더링이 느려짐 - DOM→RenderObject→RenderLayer→GraphicsLayer→GPU 파이프라인 이해가 최적화의 핵심 - IntersectionObserver로 뷰포트 진입을 감지해 이미지·컴포넌트를 지연 로딩 - will-change: transform vs translate3d 선택 기준과 트레이드오프를 실측 데이터로 비교

상세 정리 - 브라우저 렌더링: HTML 파싱→DOM→RenderObject→RenderLayer→GraphicsLayer→GPU 순서로 합성 - GraphicsLayer(승격된 레이어)는 GPU가 독립적으로 처리하므로 리페인트 없이 변환 가능 - transform: translateZ(0) 또는 translate3d(0,0,0)로 강제 레이어 승격 유도 - transform/opacity만 변경하면 Composite 단계만 실행 → Layout·Paint 과정 완전 스킵 - keyframes 애니메이션과 will-change의 차이: 전자는 매 프레임 재계산, will-change는 사전 최적화 - will-change: 너무 많이 쓰면 GPU 메모리 과점유 → 초기 렌더링 지연 역효과 - IntersectionObserver API: 요소가 뷰포트에 들어오는 시점을 비동기로 감지 - 기존 scroll 이벤트 방식 대비 메인 스레드 블로킹 없음, 브라우저 최적화 자동 적용 - threshold 옵션으로 노출 비율 기준 설정 가능 (0~1 사이 값) - 카카오웹툰에서 실제 적용: 웹툰 이미지 lazy loading + 스크롤 애니메이션 결합 - CSS animation vs JS requestAnimationFrame: GPU 레이어 승격 여부에 따라 성능 차이 - 레이어 승격 확인: Chrome DevTools의 Layers 패널로 GraphicsLayer 생성 여부 시각화

왜 읽나: 스크롤 애니메이션이나 이미지 최적화를 구현하면서 버벅임을 경험한 프론트엔드 개발자에게 GPU 렌더링 파이프라인과 실용적 해결책을 함께 알려주는 글이다.