프론트엔드
사용자 경험과 성능 개선 방법 in 카카오웹툰
두줄요약
카카오웹툰의 SSR 캐싱, CDN, 지연 로딩 기반 성능 개선 사례를 소개했습니다.\n로딩 쉬머와 이벤트·애니메이션 최적화, 라이트 모드로 UX를 보완했습니다.
구조와 흐름
- Next.js SSR로 초기 완성 페이지와 SEO 제공
- CDN 기반 리소스 전송 및 SSR 결과 캐싱으로 서버 렌더링 비용 완화
- 만료 즉시 무효화 대신 갱신 완료 시점 교체로 응답 지연 최소화
성능/운영 포인트
- 캐싱 적용 부하 테스트에서 TPS와 응답 시간의 수십 배 개선
- SVG·WebP·PNG 및 MP4·WebM·MOV의 브라우저 지원별 리소스 제공
- ATF 우선 로드와 Intersection Observer 기반 lazy loading 적용
적용해볼 점
- Loading Shimmer로 CSR 전환 중 빈 화면·스피너보다 자연스러운 체감 속도 제공
- requestAnimationFrame 기반 애니메이션·작업 분할 및 passive 이벤트 리스너 기반 스크롤 반응성 개선
- 저사양 기기·브라우저에서 모션과 영상을 제한하는 라이트 모드 운영
