사용자 경험과 성능 개선 방법 in 카카오웹툰

카카오웹툰 프론트엔드 팀이 실제로 적용한 CDN, SSR 캐싱, Loading Shimmer, 이미지 최적화 등 성능 개선 전략을 정리한다. 이론적 소개가 아닌 실제 서비스에서 적용하면서 발견한 트레이드오프와 개선 수치를 함께 제공한다.

핵심 포인트 - CDN 기본 적용: 이미지·정적 리소스를 CDN으로 제공해 서버 부하 없이 전 세계 빠른 전송 - SSR 캐싱: 사용자마다 달라지는 추천 영역 포함으로 정적 페이지 불가 → Next.js SSR + 캐싱 적용. 부하 테스트에서 캐싱 적용 후 TPS·응답 시간 수십 배 이상 개선 - 캐시 갱신 전략: 캐시 만료 즉시 무효화 방식에서 "갱신 요청만 발생시키고 완료 시 캐시 업데이트" 방식으로 전환 — 렌더링 중 요청도 즉각 응답 가능 - Loading Shimmer(Skeleton UI): API 대기 중 spinner 대신 로딩 후 레이아웃과 유사한 shimmer 표시로 자연스러운 전환 구현 - ISR(Incremental Static Regeneration): SSR 캐싱 대안으로 고려. 주기적으로 정적 페이지 재생성 - 이미지 최적화: 포맷(WebP/AVIF), 크기 조절(srcset), 지연 로딩(lazy loading) 적용으로 페이지 로드 시간 단축

상세 정리 - 성능-매출 상관관계: Pinterest 40% 로드 감소 → 전환율 15% 증가. BBC 매 초 지연마다 10% 사용자 이탈. Amazon 1초 빠를수록 판매량 1% 증가 - 카카오웹툰 SSR 선택 이유: 개인화 추천 영역 + SEO 동시 충족 필요. CSR은 SEO 불리, SSG는 개인화 불가 - SSR 캐싱 초기 방식의 문제: 캐시 만료 시 재렌더링이 완료될 때까지 해당 시점 요청들이 지연 → 트래픽 몰리면 병목 - 개선된 캐싱 방식: 만료된 캐시를 바로 무효화하지 않고 이전 캐시 응답 유지하면서 백그라운드에서 갱신(stale-while-revalidate 개념) - Loading Shimmer 구현: CSS gradient animation으로 반짝이는 효과, 실제 콘텐츠 레이아웃과 일치하는 뼈대로 사용자 체감 속도 향상 - 실무 조언: "특별히 새로운 내용은 아닙니다 — 구글링에 나오는 방법들의 실제 적용 사례"로 소개. 새 기술보다 검증된 기법의 실전 조합이 핵심

왜 읽나: CDN부터 SSR 캐싱 전략 개선, Loading Shimmer, 이미지 최적화까지 실제 서비스 적용 경험과 수치를 통해 프론트엔드 성능 최적화의 우선순위와 실전 조합 방법을 파악할 수 있다.