필사 모드: 이미지 & 비디오 CDN + 미디어 최적화 2026 완벽 가이드 - Cloudinary · Imgix · ImageKit · Bunny CDN · Cloudflare Images · Mux Video · Fastly Image Optimizer · Vercel Image · Next.js Image · AVIF · WebP 심층 분석
한국어들어가며 — 2026년 5월, 미디어 CDN은 왜 다시 뜨거운가
웹사이트 페이지 평균 무게는 2026년 1분기 기준 **모바일 2.4MB, 데스크톱 2.9MB**(HTTP Archive Web Almanac 2026 사전 공개 데이터)를 돌파했다. 이 가운데 50% 이상이 이미지와 비디오다. Core Web Vitals의 LCP 임계값 2.5초를 지키려면 결국 **무엇을, 언제, 어떤 포맷과 해상도로** 전송하느냐가 전부다.
여기에 2024 ~ 2026년의 **AI 콘텐츠 폭증**이 더해졌다. 이커머스 상품 사진을 Stable Diffusion 기반 파이프라인이 자동 생성하고, 숏폼 비디오를 Runway · Pika · Luma가 만들어낸다. 원본 자산 수 자체가 폭증했고, 변환 횟수도 늘어났다. "원본 한 장에 변형 30장"이 평범한 시대다.
이 글은 **이미지 CDN + 비디오 CDN + 미디어 최적화** 스택을 2026년 5월 시점에서 SaaS, 하이퍼스케일러, 프레임워크 통합, 셀프호스트까지 한 번에 본다. 마지막엔 한국과 일본 로컬 CDN 옵션, AI 보정 흐름, 비용 최적화 패턴까지 정리한다.
미디어 CDN이 풀어야 할 5가지 문제
이미지 · 비디오 CDN은 단순히 "더 빨리 보내기"가 아니라 5가지 문제를 한 곳에서 해결해야 한다.
1. **포맷 협상(format negotiation)**: 브라우저별로 AVIF / WebP / JPEG XL / HEIC 지원이 다르다. Accept 헤더와 User-Agent로 최적 포맷을 골라준다.
2. **사이즈 / 크롭 변환**: 같은 원본을 200px · 400px · 800px · 1600px로 잘라준다. art direction이 필요한 경우 srcset · picture 요소와 맞물린다.
3. **품질 협상(quality)**: q=auto:eco vs q=80 vs lossless. Save-Data 헤더와 모바일 네트워크 추정값을 본다.
4. **엣지 캐싱**: 200+ POP에 캐시. 첫 요청 origin → 변환 → 캐시, 이후 요청은 엣지 hit.
5. **메타데이터 / 보안**: signed URL, EXIF 제거, watermark, DRM(비디오).
이 5가지를 다 잘하면 "이미지 CDN", 비디오 트랜스코드까지 추가하면 "비디오 CDN", 자산 관리 + 협업까지 추가하면 "DAM(Digital Asset Management)"이 된다.
이미지 SaaS CDN — 5대 강자 한눈에
이미지에 특화된 SaaS CDN 중 2026년 시장점유율 기준 5개가 사실상 시장을 갈라 가진다.
- **Cloudinary**: 이스라엘 발 SaaS. 2025년부터 GenAI Suite(Generative Fill, Background Removal, AI Upscale) 정식 출시. 가장 풍부한 변환 카탈로그. 무료 25 monthly credits.
- **Imgix**: URL-기반 트랜스폼의 정석. 단순한 query param API. 미국 시장 강세.
- **ImageKit**: 인도 발, 가성비 챔피언. Cloudinary 호환 API + 더 저렴한 가격.
- **Bunny.net Optimizer + Bunny Stream**: 슬로베니아 발. 이미지 + 비디오 CDN 통합, 가격 매우 공격적.
- **Uploadcare**: 우크라이나 발. DAM에 더 가깝다. 업로드 위젯 + 변환 + CDN 묶음.
부수적으로 **Sirv, Cloudimage, Kraken.io(Internet Marketing Ninjas), KeyCDN Image Processing, Optimole** 같은 옵션도 살아있다. 글로벌 트래픽이 아니라 특정 리전에 집중된 사이트라면 굳이 Cloudinary 가격을 낼 이유가 없다.
Cloudinary — 변환 카탈로그와 GenAI
Cloudinary의 강점은 단순 변환이 아니라 **변환 카탈로그의 압도적 양**이다. 2026년 5월 기준 다음이 모두 URL 한 줄로 가능하다.
https://res.cloudinary.com/demo/image/upload/
w_800,h_600,c_fill,g_auto,q_auto:eco,f_auto/
e_background_removal/
l_text:Arial_60_bold:Hello/
sample.jpg
핵심 트랜스폼은 다음과 같다.
- `f_auto`: 포맷 자동 협상(AVIF/WebP/JPEG XL/JPEG/PNG).
- `q_auto`: 품질 자동(eco, good, best).
- `c_fill,g_auto`: AI gravity. 얼굴 / 주제 자동 검출 후 크롭.
- `e_background_removal`: 2024 GA. 배경 자동 제거.
- `e_gen_fill`: 2024 GA. Generative Fill로 outpainting.
- `e_gen_replace:prompt_to`: 영역 교체. 2025 정식 출시.
가격은 monthly credits 방식이다. 1 credit ≈ 1,000 변환 또는 1GB 저장 또는 1GB 송출. 무료 25, Plus 225, Advanced 600, 그 이상 Enterprise 협상.
자체 호스팅을 강제로 한다면 Cloudinary는 선택지가 아니다. 대신 Sharp + imgproxy 조합으로 일부 트랜스폼을 흉내낸다.
Imgix — URL-only transforms의 정수
Imgix는 "URL 파라미터만으로 다 한다"라는 단순함을 끝까지 밀고 간다. 같은 변환을 Imgix에서 쓰면 다음과 같다.
https://example.imgix.net/sample.jpg
?w=800&h=600&fit=crop&crop=faces
&auto=format,compress&q=70
핵심 파라미터:
- `auto=format`: 포맷 자동 협상.
- `auto=compress`: 품질 자동.
- `fit=crop&crop=faces` or `crop=entropy`: AI 크롭.
- `mask=ellipse` etc.: 마스크 변환.
- `blur=20`: 블러.
Imgix는 변환 카탈로그가 Cloudinary보다 짧지만, **URL 캐시 키가 깔끔하다**. 변환 카탈로그가 GenAI까지 가지 않고 정통 이미지 변환에 집중한다. 가격은 Standard $75/mo(100K masters, 100K rendered), Premium $300/mo. Master image당 과금이 특이하다.
ImageKit — 인도발 가성비 챔피언
ImageKit은 Cloudinary와 API 호환을 유지하면서 가격을 절반 이하로 책정한다. URL 형태:
https://ik.imagekit.io/demo/tr:w-800,h-600,fo-face,q-80,f-auto/sample.jpg
`tr:` prefix가 transformation, 콤마로 chain. 핵심:
- `f-auto`: 포맷 자동.
- `q-80`: 품질.
- `fo-face`: focus on face.
- `w-800,h-600,c-maintain_ratio`: 비율 유지 리사이즈.
- `e-bgremove`: 배경 제거(유료 추가 옵션).
가격은 무료 20GB 송출, Custom plans는 GB-bandwidth 단위 과금이라 traffic이 큰 사이트에서 Cloudinary 대비 30~60% 절감 사례가 보고된다.
Bunny.net — 슬로베니아발 통합 미디어 스택
Bunny.net은 CDN + Bunny Optimizer + Bunny Stream을 묶어 **이미지와 비디오를 한 계정에서** 관리한다. 가격이 압도적이다.
- **Bunny CDN**: GB당 $0.01 ~ $0.06(리전별).
- **Bunny Optimizer**: 추가 $9.5/mo(고정), 후 무제한 변환.
- **Bunny Stream**: 비디오 인코딩 $0.005/min, 송출 $0.005/GB.
Optimizer는 URL query로 동작한다.
https://example.b-cdn.net/sample.jpg
?width=800&height=600&aspect_ratio=4:3
&quality=80&format=auto&optimizer=image
전통적 CDN 위에 변환 레이어를 얹는 형태라, "기존 origin 자산을 그대로 두고 변환만 추가"하는 시나리오에 잘 맞는다.
하이퍼스케일러 이미지 서비스 — Cloudflare · AWS · GCP · Azure
기존 하이퍼스케일러 CDN도 이미지 변환을 1급 시민으로 다룬다.
- **Cloudflare Images + Cloudflare Stream**: 2026 기준 Cloudflare Images는 변환당 과금 모델과 plan-based 모델 둘 다 제공. 이미지 storage $5/100K images, transform $0.50/1K, 송출 무료. Cloudflare Stream은 분당 인코딩 $5/1K min, 송출 $1/1K min.
- **AWS CloudFront + Lambda@Edge / CloudFront Functions + S3 Image Optimization**: AWS Solutions Constructs 중 `serverless-image-handler`가 표준 패턴. Sharp를 Lambda에 올려 query param으로 변환.
- **GCP Cloud CDN + Cloud Run + libvips**: GCS origin → Cloud Run 함수 → Cloud CDN edge. 자체 구현 비중이 크다.
- **Azure CDN + Azure Front Door + Functions**: Azure는 Image Processing API가 약해서 Functions + ImageSharp(.NET) or Sharp로 채운다.
플랫 가격(Cloudflare)과 사용량 가격(AWS / GCP / Azure)이 갈리는데, 트래픽 패턴이 안정적이라면 Cloudflare가 단순하고 저렴하다.
프레임워크 통합 — Next.js Image · Astro Image · SvelteKit · Nuxt · Gatsby
프론트엔드 프레임워크가 이미지 컴포넌트를 1급으로 다루기 시작한 건 Next.js 10(2020)부터다. 2026년 5월 시점 표준은 다음과 같다.
- **Next.js Image + Vercel Image Optimization**: 사용량 기반. Pro plan 5,000 transforms 포함, 이후 transform당 $0.005. Local + Remote loaders 모두 지원.
- **Astro Image (`astro:assets`)**: build-time 변환 + runtime Sharp. 정적 사이트에서 짱.
- **SvelteKit + `enhanced:img` (Vite plugin)**: build-time 변환 + responsive srcset 자동 생성.
- **Nuxt Image**: provider 추상화. Cloudinary, Imgix, ImageKit, Bunny 등 8개 이상 백엔드.
- **Gatsby Image (`gatsby-plugin-image`)**: build-time 중심. Gatsby Cloud(현 Netlify) 이미지 CDN과 통합.
Next.js Image의 전형적 사용:
export default function Hero() {
return (
src="/hero.jpg"
alt="Hero"
width={1600}
height={900}
sizes="(max-width: 768px) 100vw, 50vw"
priority
fetchPriority="high"
/>
)
}
Next.js Image는 자동으로 `srcset`을 생성하고, 브라우저 Accept 헤더 기반으로 AVIF / WebP / JPEG 중 하나를 리턴한다. `priority`는 LCP 후보, `fetchPriority="high"`는 브라우저 우선순위 힌트다.
Vercel Image Optimization — 변환당 과금의 실제 비용
Vercel Image Optimization은 Next.js Image의 백엔드다. 2026년 5월 가격은 다음과 같다.
- **Hobby**: 1,000 transforms/mo 무료, 이후 사용 불가.
- **Pro**: 5,000 transforms/mo 포함, 초과 시 transform당 $0.005.
- **Enterprise**: 협상.
"transform"은 unique URL 단위라 캐시 hit는 비용 없음. 트래픽이 큰 사이트는 Pro에서 transform 단가가 부담될 수 있어서, 외부 loader(Cloudinary, Imgix, ImageKit)로 우회하는 패턴이 일반적이다.
const cloudinaryLoader = ({ src, width, quality }) => {
return `https://res.cloudinary.com/demo/image/upload/w_$WIDTH,q_$QUALITY,f_auto/$SRC`
.replace('$WIDTH', width)
.replace('$QUALITY', (quality || 75).toString())
.replace('$SRC', src)
}
export default function Pic() {
return <Image loader={cloudinaryLoader} src="hero.jpg" width={1200} height={800} alt="" />
}
placeholder 값으로 `$WIDTH`, `$QUALITY`, `$SRC`를 쓰는 이유는 MDX 안에서 백틱 안 템플릿 리터럴이 안전하지 않은 경우를 피하기 위한 것이고, 실제 코드에선 백틱 + 표준 템플릿 리터럴을 쓴다.
셀프호스트 트랜스폼 — Sharp · imgproxy · Thumbor · libvips
SaaS를 쓰지 않고 직접 변환 서버를 운영한다면 2026년 표준은 다음과 같다.
- **Sharp (Node, libvips 바인딩)**: Node 생태계 1위. Next.js Image도 내부적으로 sharp를 쓴다. 빠르고 메모리 효율이 좋다.
- **imgproxy (Go)**: 단일 바이너리 서버. URL signed 기반, libvips 사용. 자체 호스팅용 가장 인기.
- **Thumbor (Python)**: Globo.com이 만든 OSS. 오래된 만큼 안정적이지만 메모리/속도는 imgproxy에 밀린다.
- **Pillow / Pillow-SIMD (Python)**: Django · Flask 등 Python 백엔드에서 직접 호출.
- **libvips (C)**: 위 도구들 대부분의 백엔드 엔진. CLI(`vips`, `vipsthumbnail`)로도 사용.
- **ImageMagick / GraphicsMagick**: 호환성 측면에서 여전히 살아있지만 속도와 메모리는 libvips 대비 5 ~ 10배 느림.
Sharp의 전형적 사용:
await sharp('input.jpg')
.resize({ width: 1200, height: 800, fit: 'cover' })
.toFormat('avif', { quality: 60 })
.toFile('output.avif')
imgproxy의 URL 형태:
https://imgproxy.example.com/insecure/
rs:fill:800:600:1/g:sm/q:80/f:webp/
plain/https://origin.example.com/sample.jpg
imgproxy는 운영비가 가장 낮은 셀프호스트 옵션이다. K8s에 deployment 하나 + autoscale, origin은 S3 / R2 / GCS.
모던 포맷 2026 — AVIF, WebP, JPEG XL, HEIF/HEIC, JPEG
2026년 5월 시점 브라우저 지원 현황은 다음과 같다.
- **AVIF**: Chrome 85+(2020), Firefox 93+(2021), Safari 16+(2022). 모든 메이저 브라우저 지원. JPEG 대비 30 ~ 50% 작음.
- **WebP**: 2010년 Google이 만든 포맷. 모든 모던 브라우저 지원. AVIF 대비 압축률이 낮지만 인코딩이 빠르다.
- **JPEG XL**: Firefox(2022~), Safari 17+(2023). Chrome은 2022년 도입했다가 2023년 제거 → 2024년 재논의 → 2026년 5월 시점 flag-behind로 부활. AVIF 대비 무손실 압축에서 강함.
- **HEIF/HEIC**: Apple 기기 native(iPhone 카메라 기본 포맷). 웹에서는 Safari만 native, 다른 곳에선 변환 필수.
- **JPEG (1992)**: 여전히 universal fallback. JPEG 2000은 사실상 사망.
실전 권장은 다음과 같다.
1. 원본은 가능하면 JPEG XL 또는 PNG / TIFF로 보관.
2. 송출은 `<picture>` 또는 CDN `f_auto`로 AVIF → WebP → JPEG 순 협상.
3. Apple 사용자 비중이 높은 사이트는 HEIC native 송출도 고려.
`<picture>` element와 art direction
art direction이 필요한 경우 `<picture>` 요소를 직접 쓴다.
media="(max-width: 768px)"
srcset="hero-mobile.avif"
type="image/avif"
/>
`<picture>`는 art direction(다른 이미지 자체) + 포맷 협상(같은 이미지의 다른 포맷)을 한 번에 한다. `<img srcset>`은 같은 이미지의 다른 해상도만 처리한다.
비디오 CDN — Mux, Cloudflare Stream, Bunny Stream, AWS Elemental
비디오는 이미지보다 1 ~ 2 자릿수 복잡하다. 인코딩(transcoding), 패키징(packaging), 스트리밍(streaming), DRM, 분석(QoE)이 다 들어간다. 2026년 5월 SaaS 강자들:
- **Mux Video**: 개발자 친화 1등. API 한 줄로 업로드 → HLS/DASH 패키징 → CDN 송출. 가격은 인코딩 분당 $0.0045 ~ $0.05, 송출 GB당 $0.005 ~ $0.01.
- **Cloudflare Stream**: 분당 인코딩 $5/1K, 송출 $1/1K. 가격 단순.
- **Bunny Stream**: 분당 인코딩 $0.005, 송출 $0.005/GB. 가격 압도적.
- **AWS Elemental MediaConvert + IVS**: 인코딩 + 라이브 스트리밍 묶음. AWS 생태계 내부 표준.
- **JW Player**, **Brightcove**, **Vimeo Pro/Enterprise**: 플레이어 + CDN + DAM까지 통합한 OTT 솔루션.
- **Wowza, Daily.co, LiveKit, Agora**: 실시간 / 화상회의 영역.
Mux의 전형적 API:
curl https://api.mux.com/video/v1/assets \
-H "Content-Type: application/json" \
-u $MUX_TOKEN_ID:$MUX_TOKEN_SECRET \
-d '{
"input": "https://example.com/video.mp4",
"playback_policy": ["public"],
"encoding_tier": "smart"
}'
응답으로 `playback_id`가 오면 `https://stream.mux.com/$PLAYBACK_ID.m3u8`로 HLS 재생 가능. 모든 transcoding과 CDN은 Mux가 처리한다.
적응형 스트리밍 — HLS, DASH, CMAF, LL-HLS, WebRTC
비디오 전송 프로토콜은 5가지로 갈린다.
- **HLS (HTTP Live Streaming, Apple)**: 가장 보편적. `.m3u8` manifest + `.ts` 세그먼트. 모든 모던 클라이언트 지원.
- **DASH (MPEG-DASH)**: HLS와 거의 동일 기능, `.mpd` manifest + `.m4s` 세그먼트. 비-Apple 진영에서 인기.
- **CMAF (Common Media Application Format)**: HLS / DASH가 같은 fMP4 세그먼트를 공유. 저장 비용 절감.
- **LL-HLS, Low-Latency DASH**: 글래스-투-글래스 지연 2 ~ 4초까지 단축. 일반 HLS는 10 ~ 30초.
- **WebRTC**: 서브초 지연. 화상회의 / 라이브 인터랙티브 한정. LiveKit, Daily.co, Agora가 주력.
CMAF + LL-HLS / LL-DASH 조합이 2026년 라이브 스트리밍 표준이다. VOD는 HLS + DASH(CMAF로 통일) 조합이 무난하다.
코덱 2026 — AV1, HEVC, H.264, VVC, VP9, LCEVC
코덱은 별도 레이어다. 컨테이너(.mp4, .ts)와 무관하게 압축 효율이 갈린다.
- **H.264 (AVC)**: 2003년 표준. 여전히 universal. 모든 디바이스 디코드.
- **HEVC (H.265)**: H.264 대비 50% 향상. Apple 기기, 최신 Android, 최신 TV 지원. 라이선싱 복잡(MPEG-LA, HEVC Advance, Velos Media).
- **VP9 (Google)**: HEVC와 동급 압축, royalty-free. YouTube가 메인.
- **AV1 (AOMedia)**: 2018 표준. 차세대 royalty-free 코덱. Netflix, YouTube, Twitch 채택. 인코딩 속도가 느린 게 단점이지만 SVT-AV1, libaom 최적화로 2025년 이후 실용권.
- **VVC (H.266)**: 2020 표준. HEVC 대비 50% 향상. 2026년부터 일부 8K / VR 콘텐츠에 채택 시작.
- **LCEVC (V-Nova, MPEG-5 Part 2)**: 기존 코덱 위에 enhancement layer를 얹는 방식. base codec(H.264 등) + LCEVC enhancement.
2026년 권장 인코딩 ladder:
1. 메인: H.264 (최소 호환).
2. 추가: HEVC(고화질, Apple 진영) + AV1(모던 브라우저, 대역폭 절감).
3. 일부 시범: VVC(8K), LCEVC(저대역).
CDN이 multi-codec ABR(adaptive bitrate)을 자동 생성해주는 게 Mux, Cloudflare Stream, Bunny Stream의 핵심 가치다.
AI 보정 — 업스케일, 스마트 크롭, Generative Fill
2024년부터 CDN에 AI 기능이 본격 들어왔다.
- **AI 업스케일링**: 저해상도 원본을 4K로 확대. Topaz Gigapixel, Real-ESRGAN, SUPIR(2024 ICLR). iter75에서 별도 다룸.
- **스마트 크롭 / focal point detection**: 얼굴 · 주제 자동 감지 후 크롭. Cloudinary `g_auto`, ImageKit `fo-face`, Imgix `crop=faces`.
- **Generative Fill / Outpainting**: 빈 공간 자동 채움. Cloudinary `e_gen_fill`(2024 GA), Adobe Firefly Services.
- **Background Removal**: Cloudinary `e_background_removal`(2024 GA), Remove.bg API, Photoroom API.
- **Object Replacement**: 영역 교체. Cloudinary `e_gen_replace`(2025 GA).
이 기능들이 CDN URL 한 줄로 가능해지면서 별도 이미지 편집 파이프라인이 사라지는 추세다.
DAM (Digital Asset Management) — 이미지 CDN의 상위 카테고리
DAM은 이미지 CDN에 협업 · 권한 · 라이프사이클 관리를 더한 것이다. 2026년 5월 시장은 다음과 같다.
- **Bynder**: 네덜란드 발. 마케팅 팀 DAM 1위.
- **Brandfolder (Smartsheet 인수)**: 미국. Salesforce 등 CRM 통합 강점.
- **Cloudinary DAM (formerly Wirewheel)**: Cloudinary 위에 협업 레이어.
- **MediaValet**: 캐나다.
- **Aprimo**: 미국. 엔터프라이즈 마케팅 운영 통합.
- **OpenText Hightail**: 협업 + 자산 공유.
DAM 시장은 SaaS 가격이 매우 비싸다(연 $20K ~ $100K+). 중소 규모에선 Cloudinary 또는 Bunny + Notion / Airtable 조합으로 대체하는 패턴이 많다.
AI 이미지 태깅 — Cloudinary AI, Google Vision, AWS Rekognition, Clarifai
자산이 늘어나면 검색이 문제다. AI 태깅 API:
- **Cloudinary AI Tagging (Add-On)**: Imagga, Google, AWS, Microsoft 4개 엔진 중 택일.
- **Google Cloud Vision API**: label, object detection, OCR, landmark, face, safe search.
- **AWS Rekognition**: 같은 카탈로그, AWS 통합.
- **Azure AI Vision (구 Computer Vision)**: 동일.
- **Clarifai**: 커스텀 모델 학습 가능한 vision PaaS.
- **OpenAI Vision (GPT-4o, GPT-5)**: free-form 설명 / 태깅. 가격은 token 기반.
2026년 5월 트렌드는 **LLM 기반 멀티모달 태깅**이다. Clarifai, Cloudinary가 GPT-5 / Claude / Gemini 기반 자연어 태깅을 옵션으로 제공한다.
한국 이미지 CDN — NHN Cloud, NAVER Cloud, Kakao i Cloud
한국 로컬 CDN 옵션:
- **NHN Cloud Image Service**: NHN(구 NHN Toast) Cloud. KR/JP 리전 강점. 한국어 문서.
- **NAVER Cloud Image (구 NAVER Cloud Platform)**: NAVER 자체 인프라. KR 강점. 클라우드 + CDN 통합.
- **Kakao i Cloud**: 카카오엔터프라이즈. KR 강점. KakaoTalk · 카카오톡 채널 연동.
한국 사용자 비중이 절대적이면(전체 트래픽의 70% 이상이 KR) 글로벌 CDN(Cloudflare, AWS) 대비 KR 내 지연이 더 낮은 NHN / NAVER / Kakao 옵션이 메리트가 있다. 다만 글로벌 송출이 추가되면 Cloudflare가 다시 유리해진다.
일본 이미지 CDN — Sakura CDN, CDNetworks Japan, Akamai Japan, Edgio Japan
일본 시장은 다음 옵션이 크다.
- **Sakura Internet CDN (Image Flux)**: Sakura가 운영하는 이미지 변환 + CDN. JP 강점.
- **CDNetworks Japan**: 글로벌 CDN이지만 JP 거점 강하다.
- **Akamai Japan**: 엔터프라이즈 표준.
- **Edgio Japan (구 Limelight Networks)**: 비디오 CDN 강점이 컸으나 2024년 chapter 11 → 재구조화. 2026년 5월 현재 일부 서비스 유지.
- **J:COM Vision, NTT Communications CDN**: 통신사 발.
JP 콘텐츠 비중이 큰 사이트(만화, 애니메이션 스트리밍 등)는 Sakura Image Flux + Bunny / Cloudflare 글로벌 조합이 일반적이다.
비용 최적화 패턴 — Lazy loading, srcset, fetchpriority
CDN 가격을 아무리 낮춰도 **불필요한 변환과 송출이 0**이 되는 게 가장 빠른 절감이다.
1. **`loading="lazy"`**: 뷰포트 진입 시점에 로드. 모든 이미지에 기본값 권장. LCP 후보만 `loading="eager"`.
2. **`fetchpriority="high"`**: LCP 후보에 명시. 브라우저 우선순위 큐 상단으로.
3. **`srcset`과 `sizes`**: 디바이스 픽셀 밀도 + 뷰포트 크기에 맞춰 적정 해상도만 송출.
4. **`<picture>` art direction**: 모바일과 데스크톱이 다른 이미지일 때.
5. **CDN 캐시 키 정규화**: query param 순서, 대소문자, 불필요 파라미터 제거.
6. **HTTP/2 / HTTP/3 + Brotli**: CDN 기본 지원.
7. **Service Worker offline cache**: 재방문 트래픽 줄임.
LCP 후보 이미지의 Next.js Image 사용:
src="/hero.jpg"
alt=""
width={1600}
height={900}
priority
fetchPriority="high"
sizes="(max-width: 768px) 100vw, 50vw"
/>
비-LCP 이미지:
src="/thumb.jpg"
alt=""
width={400}
height={300}
loading="lazy"
sizes="(max-width: 768px) 50vw, 25vw"
/>
가격 모델 비교 — Per-transform vs Per-GB vs Flat
이미지 CDN 가격 모델은 크게 3가지다.
1. **Per-transform (Cloudinary credits, Vercel Image, Cloudflare Images transform)**: 변환 횟수에 직접 과금. 트래픽 패턴이 들쭉날쭉하면 예측 어려움.
2. **Per-GB-delivered (Bunny, Cloudflare 일부, Imgix)**: 송출 데이터량 과금. 트래픽이 커질수록 단가 협상 여지.
3. **Storage + bandwidth (S3 + CloudFront, GCS + Cloud CDN)**: 저장과 송출 따로. 셀프호스트 변환과 결합 시 유리.
4. **Flat-rate (Cloudflare Images plan-based, Bunny Optimizer)**: 정액. 변환 횟수가 압도적으로 많을 때 유리.
월 트래픽 별 추천 조합(개략적, 2026년 5월 공시가 기준):
- **소규모(< 100GB/mo)**: Cloudflare Images Free / Bunny / Cloudinary Free.
- **중규모(100GB ~ 1TB)**: Bunny Optimizer + CDN, Imgix Standard, Cloudinary Plus.
- **대규모(1TB ~ 10TB)**: Cloudinary Advanced, ImageKit Custom, Bunny Volume.
- **초대규모(>10TB)**: 셀프호스트 imgproxy + Cloudflare R2, AWS Lambda@Edge + S3, Enterprise 협상.
Core Web Vitals와 미디어 — LCP, INP, CLS
2024년 3월 INP가 FID를 대체하면서 Core Web Vitals 3대 지표는 다음과 같다.
- **LCP (Largest Contentful Paint)**: 2.5초 이하 권장. 거의 항상 hero 이미지가 LCP 후보. 이미지 CDN과 직결.
- **INP (Interaction to Next Paint)**: 200ms 이하 권장. 이미지보다 JS 영향이 크다.
- **CLS (Cumulative Layout Shift)**: 0.1 이하 권장. 이미지에 width / height(또는 aspect-ratio)를 명시해야 한다.
이미지 CDN을 잘 써도 `<img>`에 width / height가 빠지면 CLS가 망가진다. Next.js Image, Astro Image, SvelteKit `enhanced:img`는 이를 자동 처리한다.
실전 체크리스트 — 새 프로젝트 미디어 스택 결정
새 프로젝트를 시작할 때 다음 순서로 결정한다.
1. **트래픽 규모와 예측**: 월 5GB? 5TB? 50TB? 가격 모델이 갈린다.
2. **지역 분포**: 글로벌? 한국만? 일본만? 로컬 CDN 가능성.
3. **변환 카탈로그 요구**: GenAI 필요한가? `f_auto` + 리사이즈만이면 모든 도구 가능.
4. **비디오 포함 여부**: 이미지 + 비디오를 한 곳에서 하면 Bunny / Cloudflare / Mux.
5. **프레임워크**: Next.js? Astro? Nuxt? built-in Image 컴포넌트 + provider 선택.
6. **DAM 필요 여부**: 마케팅 팀 협업 필요하면 DAM. 개발자 위주 사이트면 불필요.
7. **셀프호스트 의사**: 데이터 주권 / 비용 / 컴플라이언스로 SaaS 거부면 imgproxy + S3 / R2.
가장 흔한 2026년 조합 3가지:
- **개발자 사이트 (블로그, 문서)**: Next.js Image + Vercel(Pro) 또는 Cloudflare Images 무료.
- **이커머스 중간 규모**: Cloudinary 또는 ImageKit + Next.js / Nuxt loader.
- **콘텐츠 / 미디어 회사**: Bunny Optimizer + Bunny Stream(이미지 + 비디오), 또는 Mux + Cloudflare Images.
마무리 — 2026년 미디어 CDN은 "한 곳에서 다 함"이 답이다
2026년 5월 시점 미디어 CDN의 추세는 분명하다.
- **포맷 협상(AVIF / WebP / JPEG XL)**은 사실상 기본값. f_auto 없는 도구는 시장에서 사라졌다.
- **AI 변환(스마트 크롭, Generative Fill, 배경 제거)**이 1급 시민으로 들어왔다.
- **이미지 + 비디오 통합 CDN**(Bunny, Cloudflare, Mux)이 별도 도구를 묶는 쪽보다 빠르게 성장.
- **가격 모델**은 per-transform vs per-GB가 양립하지만 트래픽이 커지면 per-GB / flat이 유리.
- **프레임워크 통합**(Next.js Image, Astro Image, Nuxt Image)이 표준화되면서 provider 교체 비용이 낮아졌다.
새 프로젝트를 시작한다면 첫 결정은 "어느 CDN"이 아니라 **"어느 프레임워크 컴포넌트와 어떤 loader 추상화"** 다. 백엔드는 그 다음에 갈아끼우면 된다.
References
- [Cloudinary Documentation](https://cloudinary.com/documentation)
- [Imgix Documentation](https://docs.imgix.com/)
- [ImageKit Documentation](https://docs.imagekit.io/)
- [Bunny.net Stream & Optimizer Documentation](https://docs.bunny.net/)
- [Cloudflare Images Documentation](https://developers.cloudflare.com/images/)
- [Cloudflare Stream Documentation](https://developers.cloudflare.com/stream/)
- [Mux Video Documentation](https://docs.mux.com/)
- [Fastly Image Optimizer Documentation](https://docs.fastly.com/products/image-optimizer)
- [AWS Serverless Image Handler Solution](https://aws.amazon.com/solutions/implementations/serverless-image-handler/)
- [Vercel Image Optimization Docs](https://vercel.com/docs/image-optimization)
- [Next.js Image Component](https://nextjs.org/docs/app/api-reference/components/image)
- [Astro Image and Assets](https://docs.astro.build/en/guides/images/)
- [SvelteKit Image Optimization (`enhanced:img`)](https://kit.svelte.dev/docs/images)
- [Nuxt Image](https://image.nuxt.com/)
- [Gatsby Plugin Image](https://www.gatsbyjs.com/plugins/gatsby-plugin-image/)
- [Sharp (libvips binding for Node)](https://sharp.pixelplumbing.com/)
- [imgproxy Docs](https://docs.imgproxy.net/)
- [Thumbor GitHub](https://github.com/thumbor/thumbor)
- [libvips Documentation](https://www.libvips.org/)
- [AVIF Format Overview (Web.dev)](https://web.dev/articles/compress-images-avif)
- [WebP Format Overview](https://developers.google.com/speed/webp)
- [JPEG XL Reference](https://jpegxl.info/)
- [HLS Specification (RFC 8216)](https://datatracker.ietf.org/doc/html/rfc8216)
- [MPEG-DASH Standard](https://dashif.org/)
- [CMAF Overview (ISO/IEC 23000-19)](https://www.iso.org/standard/79106.html)
- [AV1 / AOMedia](https://aomedia.org/)
- [VVC / H.266 Reference](https://www.itu.int/rec/T-REC-H.266)
- [Core Web Vitals (Google Search Central)](https://developers.google.com/search/docs/appearance/core-web-vitals)
- [HTTP Archive Web Almanac](https://almanac.httparchive.org/)
- [NHN Cloud Image Service](https://www.toast.com/service/contents-delivery/image-service)
- [NAVER Cloud Platform CDN](https://www.ncloud.com/product/networking/cdnplus)
- [Sakura Internet Image Flux](https://www.sakura.ad.jp/services/imageflux/)
현재 단락 (1/297)
웹사이트 페이지 평균 무게는 2026년 1분기 기준 **모바일 2.4MB, 데스크톱 2.9MB**(HTTP Archive Web Almanac 2026 사전 공개 데이터)를 돌파했...