카카오웹툰, SSR 캐싱·로딩 시머 등 프론트엔드 성능 최적화 사례 공개

카카오엔터테인먼트는 카카오웹툰에 적용된 프론트엔드 성능 및 사용자 경험 개선 사례를 소개했습니다. 먼저 Next.js 기반의 SSR(Server-Side Rendering) 환경에서 매 요청마다 발생하는 렌더링 비용을 줄이기 위해 SSR 결과에 캐싱을 적용했습니다. 동일한 서버 환경에서의 부하 테스트 결과, 캐싱 적용 여부에 따라 TPS(초당 트랜잭션 수)와 응답 시간에서 수십 배 이상의 개선 효과가 확인되었습니다. 초기에는 캐시 만료 시 즉시 무효화하고 재렌더링했으나, 이로 인한 요청 지연 문제를 해결하기 위해 갱신 요청만 발생시키고 완료 시점에 캐시를 교체하는 방식으로 최적화했습니다. 또한 ISR(Incremental Static Regeneration)을 고려하거나 SEO가 불필요한 영역은 정적 페이지로 분리하는 전략도 병행했습니다.

사용자 경험 측면에서는 SPA의 빠른 페이지 전환을 위해 빈 화면이나 스피너 대신 실제 레이아웃과 유사한 Loading Shimmer(Skeleton)를 적용하여 체감 속도를 높였습니다. 리소스 최적화를 위해 SVG, WebP, PNG 등 브라우저 지원 여부에 따라 최적화된 이미지 포맷을 선택하도록 <picture> 태그를 활용한 커스텀 React 컴포넌트를 개발했으며, 영상 역시 MP4, WebM, MOV 중 지원 포맷을 자동 선택하도록 구성했습니다. 특히 iOS 15와 macOS Big Sur의 Safari에서 알파채널이 포함된 WebM 영상이 정상 표시되지 않는 이슈에 대응하기 위해 OS 및 브라우저 판단 로직을 추가했습니다.

인터랙션 성능 개선을 위해서는 Intersection Observer를 활용해 화면 밖의 리소스를 지연 로드(Lazy Loading)하고, requestAnimationFrame을 사용해 렌더링을 방해하지 않는 부드러운 애니메이션을 구현했습니다. 스크롤 이벤트 리스너 등록 시 {passive: true} 옵션을 적용하여 컴포지터 스레드가 메인 스레드의 preventDefault() 호출 여부를 기다리지 않고 즉시 합성(Composition)을 수행하도록 함으로써 스크롤 지연을 최소화했습니다. 마지막으로 저사양 기기나 구형 브라우저 사용자를 위해 무거운 모션이나 영상 기능을 제한하는 라이트(Lite) 모드를 적용해 콘텐츠 소비에 방해가 되지 않도록 트레이드오프를 고려하기도 했습니다.