프로젝트 상담

INSIGHTS · Business

Next.js MVP 이미지 최적화 적용 후 CDN 비용 절감 실무 사례

BLICT · 2026. 10. 3. · 수정 2026. 10. 3.

Next.js 기반 MVP에서 이미지 최적화 전략을 도입해 CDN 트래픽 비용을 효과적으로 절감한 실제 사례를 통해, 이미지 처리 우선순위와 점검 기준을 알 수 있습니다.

Next.js MVP에서 이미지 트래픽 비용이 치솟는 순간

서비스 MVP 단계는 빠른 출시와 반복이 우선이지만, 실제 운영 트래픽이 유입되면서 예상치 못한 비용 이슈가 곧바로 드러난다. 특히 이미지 트래픽은 초기 MVP에서 간과되기 쉽다. 블릭트에서 진행한 한 신규 B2B 플랫폼 MVP는 Next.js로 개발해 정적/동적 페이지를 혼합 제공했는데, 서비스 오픈 2주 만에 CDN(CloudFront) 비용이 예상치의 3배로 치솟았다.

문제의 핵심은 이미지 트래픽이 전체 CDN 전송량의 70%를 차지한다는 점이었다. MVP 특성상 대용량 리소스 관리에 우선순위를 두지 않았고, Next.js 기본 설정대로 <img /> 태그를 남발해버렸다. 현장에서 가장 막히는 지점은 "이미지 최적화의 ROI가 과연 지금 필요한가?"라는 질문과, "우선 어디부터 손대야 하나?"였다. 실제로 프론트엔드 개발자는 이미지 트래픽이 전체 비용에 영향을 미친다는 점을 체감하기 전까지는 최적화에 소극적이기 쉽다.

이같은 상황에서 실무적으로 진행한 점검 순서는 다음과 같다.

  1. CDN 대시보드 트래픽 분석: 요청별, 경로별 트래픽 집계
  2. 주요 페이지별 이미지 평균 용량 및 요청 수 파악
  3. 이미지 업로드 및 사용 경로(관리자/사용자/외부 등) 분리
  4. 이미지 포맷별 전송량 및 캐시 히트 비율 체크
  5. 불필요한 대용량 이미지 사용 여부 확인

Next.js 이미지 최적화 적용의 우선순위와 실제 적용 방식

이미지 최적화는 당장 전면적으로 적용하기보다는, 트래픽과 노출 빈도가 높은 페이지 및 리소스부터 선별적으로 적용하는 것이 중요하다. 블릭트 사례에서는 관리자 상품 등록 이미지, 메인 배너, 썸네일 이미지가 전체 트래픽의 60% 이상을 차지했다.

Next.js의 next/image 컴포넌트는 빌트인 이미지 최적화 기능을 제공한다. 하지만, 사내 CDN과 연동해 이미지를 변환하거나, 외부 스토리지(예: S3)에서 이미지를 서빙하는 경우엔 추가 구성이 필요하다. 현장에서 막히는 지점은 "S3-origin 이미지를 next/image가 어떻게 최적화해주나?", "외부 이미지는 그대로 최적화가 가능한가?"다.

블릭트에서는 우선적으로

  • 메인/리스트/상세 페이지의 썸네일 이미지를 next/image로 교체
  • S3 공개 버킷 이미지를 origin으로 지정, loader 커스텀 구현
  • 주요 배너 이미지는 관리자 등록 시 WebP로 변환하는 사전 처리
  • 저용량 썸네일은 width/height 설정으로 리사이즈 제한
    이렇게 단계를 나눠 적용했다.

예시로, S3 이미지를 next/image에서 최적화하는 커스텀 로더는 다음과 같이 구현했다.

// /lib/imageLoader.js
export default function s3Loader({ src, width, quality }) {
  return `https://s3.ap-northeast-2.amazonaws.com/your-bucket/${src}?w=${width}&q=${quality || 75}`;
}

그리고 <Image src="..." loader={s3Loader} ... /> 방식으로 적용했다.

이미지 트래픽 절감 효과와 실제 비용 변화

Next.js 이미지 최적화 적용 후, CDN 트래픽과 비용은 눈에 띄게 감소했다. 최적화 전후 비교 결과,

  • 메인 및 리스트 썸네일 평균 용량: 400KB → 90KB
  • 주요 배너 이미지: 1.2MB → 250KB(사전 WebP 변환)
  • 전체 CDN 이미지 트래픽: 약 58% 절감
  • 월간 CDN 비용: 약 3분의 1 수준으로 감소

이 과정에서 실무적으로 가장 큰 효과를 본 부분은 이미지 리사이즈 및 포맷 변경이다. 실제 트래픽 분석 결과, 모바일 접속자가 전체의 70%를 차지했음에도, PC용 대용량 이미지를 그대로 내려받고 있었다.
WebP 포맷 변환도 브라우저 지원 범위를 점검해, 지원이 안 되는 브라우저에는 jpeg/png fallback을 적용했다.

이미지 경로별 캐시 정책도 튜닝했다.

  • 썸네일 등 변동 가능성이 낮은 이미지는 캐시 만료 기간을 최대(30일)로
  • 자주 변경되는 상품 상세 이미지는 짧게(1일)로
    CDN 캐시 히트율이 40%대에서 75% 이상으로 올랐다.

실전에서 마주치는 한계와, 점검 우선순위

이미지 최적화 전략을 실제 프로젝트에 적용할 때 부딪히는 현실적인 한계는 크게 세 가지다.
첫째, 이미지 업로드 경로가 다양하고, 원본 관리 체계가 통일되지 않는 경우가 많다. 관리자 업로드, 외부 파트너 링크, 자동 크롤링 등 다양한 경로가 혼재하면 일괄 최적화 적용이 어렵다.
둘째, next/image 컴포넌트가 모든 사용 케이스에 '즉시' 적용되지 않는다. 외부 호스트 이미지, 동적 경로 이미지는 별도 loader나 프록시 서버가 필요하다.
셋째, 이미지 최적화가 사용자 경험(UX)에 미치는 영향에 대한 우려다. 너무 aggressive한 리사이즈/압축은 이미지 품질 저하로 이어질 수 있어, 마케팅·디자인팀과 협의가 필수다.

이때 점검 순서는 다음과 같다.

  1. 전체 이미지 리소스의 업로드/사용 경로 매핑
  2. 트래픽 상위 20% 리소스 중심의 최적화 적용 시나리오 도출
  3. next/image 적용 가능 영역과 별도 처리 영역 분리
  4. 각 적용 방식별 fallback 정책(포맷, 사이즈, origin) 명확화
  5. 적용 전/후 성능 및 품질 체감 테스트 진행

실무 적용 체크리스트

  • 이미지 트래픽 상위 경로(페이지/리소스)를 우선 분석해 적용 대상을 명확히 한다.
  • next/image 적용이 가능한 이미지와, 커스텀 로더/프록시가 필요한 이미지를 분리한다.
  • 모바일/PC 환경별로 필요한 해상도·포맷을 정의하고, 불필요하게 큰 이미지는 리사이즈한다.
  • 캐시 정책을 트래픽 특성(변경 빈도, 사용자 노출 등)에 맞게 세분화한다.
  • 이미지 최적화 전후, 실제 트래픽 및 비용 데이터를 측정해 효과를 검증한다.

관련 글