카카오웹툰, IntersectionObserver로 렌더링 퍼포먼스 최적화 사례 공개

카카오웹툰은 복잡한 인터랙션과 패럴랙스 효과로 인한 렌더링 부하를 해결하기 위해 하드웨어 가속과 IntersectionObserver를 적용한 최적화 사례를 공유했다. 초기 렌더링 지연을 줄이고 GPU 연산을 활용하기 위해 transform: translate3d 속성을 주로 사용했으며, 이는 will-change나 animation 속성보다 유연하고 효율적인 접근으로 평가된다.

특히 뷰포트 진입 감지를 위한 IntersectionObserver의 성능을 검증하기 위해 CPU를 6배 느리게 설정한 Throttling 환경에서 테스트를 진행했다. 그 결과, 기존 스크롤 이벤트 방식은 10~60프레임으로 불안정한 반면, IntersectionObserver는 50~60프레임을 유지하며 명확한 성능 개선을 보였다.

이 API는 root, rootMargin, threshold 옵션을 통해 정밀한 교차 감지가 가능하며, isIntersecting이나 intersectionRatio 등 다양한 Entry 속성을 제공한다. 카카오웹툰은 이를 활용해 이미지와 비디오의 Lazy Load를 구현하여 불필요한 리소스 로딩을 차단하고, 전체적인 웹 성능을 앱 수준으로 끌어올리는 데 기여했다.