카카오웹툰은 하드웨어 가속과 IntersectionObserver를 어떻게 사용했을까?
프론트엔드
카카오웹툰은 하드웨어 가속과 IntersectionObserver를 어떻게 사용했을까?
두줄요약
카카오웹툰 웹 개편에서 GPU 가속과 IntersectionObserver로 인터랙션·지연 로딩을 최적화했습니다. 스크롤 이벤트 대비 Observer의 안정적 프레임과 적용 시 주의점을 공유합니다.
문제 상황
- 앱 수준의 디자인과 인터랙션을 웹에 적용하며 증가한 렌더링 비용
- 다수 이미지·비디오와 스크롤 기반 패럴랙스에서의 성능 저하 우려
해결 방법
transform: translate3d와opacity변경으로 GPU 가속 및 Layout·Paint 과정 회피- IntersectionObserver 기반 이미지·비디오 지연 로딩과 재사용 가능한 훅 구성
- 복잡한 패럴랙스는 이벤트 페이지 외 범위에서 제외
성능/운영 포인트
- CPU 6배 스로틀링 비교에서 스크롤 이벤트 10~60프레임, IntersectionObserver 50~60프레임 관찰
root,rootMargin,threshold로 관찰 기준과 사전 로딩 범위 조정- 미지원 브라우저 대응을 위한 Polyfill 필요
주의할 점
will-change다수 적용 시 100~200ms 사전 준비 비용에 따른 초기 렌더링 저하 가능성- GPU 가속만으로 저사양 모바일의 60FPS 보장 불가
- 하드웨어 가속과 IntersectionObserver의 무분별한 사용 지양
