핵심 요약
카카오엔터테인먼트의 카카오웹툰에서 프런트엔드 UX와 성능 개선을 위해 CDN과 SSR 캐싱, Loading Shimmer, Lazy Loading, 이미지/비디오 포맷 최적화, IntersectionObserver, requestAnimationFrame, Passive 이벤트 리스너, Light 모드 등을 도입해 초기 화면 로드 속도와 전환 반응성을 크게 개선했습니다.
구현 방법
- Next.js 기반 SSR에 캐싱(I SR) 적용으로 요청 처리량과 응답 시간 개선
- CDN 활용 및 리소스 최적화: SVG/WebP 우선 사용, 를 통한 포맷 자동 선택, 비디오 포맷 다중 지원(MP4/WebM/MOV) 및 브라우저 이슈 예외 처리
- 로딩 UX: Loading Shimmer(스켈톤) 도입으로 초기 화면 빠른 표시 및 Suspense를 통한 데이터 페칭 구조 개선
- Lazy Loading 및 성능 스케줄링: IntersectionObserver 기반 ATF 우선 로딩, requestAnimationFrame으로 렌더링/애니메이션 작업 분할
- 렌더링 최적화: 터치/스크롤 이벤트의 passive 옵션 활용으로 부드러운 스크롤 구현
- 모션 관리: 라이트 모드 도입으로 무거운 모션 제거 가능성 제공
주요 결과
- 동일 서버 환경에서 SSR 캐싱 도입 시 TPS와 응답시간이 수십 배 개선
- Pinterest 사례에서 페이지 로드 시간 40% 감소로 검색 유입 증가 및 가입자 전환율 15% 증가
- 로딩 속도 1초 단축 시 아마존 매출 1%, 구글 검색량 0.2%, 월마트 전환율 2% 증가에 준하는 영향
- 이미지/비디오 포맷 최적화와 Loading Shimmer, IntersectionObserver, passive 리스너의 조합으로 사용자 경험과 반응성 향상
