사용자 경험과 성능 개선 방법 in 카카오웹툰
프론트엔드
사용자 경험과 성능 개선 방법 in 카카오웹툰
두줄요약
카카오웹툰의 SSR 캐싱, 리소스 최적화, 지연 로딩 기반 성능 개선 사례를 소개했습니다. 로딩 체감, 인터랙션, 저사양 환경까지 고려한 UX 트레이드오프를 설명합니다.
구조와 흐름
- Next.js SSR 결과를 CDN 캐싱하고, 만료 시 기존 캐시를 유지한 채 비동기 갱신
- SVG·WebP·PNG와 영상 포맷을 브라우저 지원 조건에 맞춰 제공
- ATF 우선 로딩과 Intersection Observer 기반 lazy loading 적용
성능/운영 포인트
- SSR 캐싱으로 부하 테스트의 TPS와 응답 시간에서 수십 배 이상 개선
- Loading Shimmer로 CSR 전환 중 레이아웃을 먼저 보여주는 체감 성능 개선
- requestAnimationFrame 기반 인터랙션 처리와 passive 이벤트 리스너로 렌더링·스크롤 방해 최소화
트레이드오프
- 사용자별 추천·변경 가능한 작품 정보와 SSR 캐싱 간 실시간성 조절
- 저사양 기기·브라우저에서 모션과 영상을 제한하는 라이트 모드 적용
- WebM 알파채널 Safari 표시 문제를 위한 OS·브라우저별 예외 처리
적용해볼 점
- SEO와 첫 진입 속도가 중요하면 SSR 캐싱 또는 ISR 검토
- 로딩 표현이 실제 콘텐츠 로드를 방해하지 않도록 필요한 영역에만 Shimmer 적용
- 스크롤 관련 이벤트에서 preventDefault 미사용 시 passive 옵션 활용
