CDN(Content Delivery Network)은 전 세계에 분산된 엣지 서버를 통해 사용자에게 가장 가까운 서버에서 콘텐츠를 제공합니다. 첫 요청 시 오리진에서 콘텐츠를 가져와 엣지에 캐시하고(Cache MISS), 이후 요청은 캐시된 콘텐츠를 반환합니다(Cache HIT).지연 시간 감소, 오리진 부하 분산,가용성 향상이 주요 이점입니다.
01 · Concept
CDN (Content Delivery Network)
CDN은 전 세계에 분산된 엣지 서버를 통해 사용자에게 가장 가까운 위치에서 콘텐츠를 제공하여 성능을 최적화합니다.
CDN은 정적 에셋(이미지, CSS, JS)뿐 아니라 API 응답까지 캐싱할 수 있습니다.Cache HIT이면 엣지에서 바로 응답하고,Cache MISS이면 오리진에서 가져와 캐시 후 응답합니다. 캐시 무효화 전략과 Cache-Control 헤더 설정이 핵심입니다.
02 · Interactive Demo
CDN 요청 흐름과 캐시 전략
CDN의 Cache HIT/MISS 흐름과 엣지 서버 분포를 확인하세요.
5ms사용자 → 가장 가까운 엣지 서버
1ms엣지: 캐시 확인 → HIT ✓
5ms엣지 → 사용자 (캐시된 응답)
Cache HIT
엣지 서버에 캐시된 콘텐츠를 바로 반환 (빠름)
Cache MISS
캐시에 없으므로 오리진에서 가져와 캐시 후 반환
Stale-While-Revalidate
만료된 캐시를 먼저 반환하고, 백그라운드에서 갱신
03 · Code Example
코드 예시
실제 코드로 동작 원리를 확인하세요.
// Cloudflare Workers에서 캐시 제어
export default {
async fetch(request, env) {
const url = new URL(request.url);
// 정적 에셋: 장기 캐시
if (url.pathname.startsWith('/assets/')) {
const response = await fetch(request);
const headers = new Headers(response.headers);
headers.set('Cache-Control',
'public, max-age=31536000, immutable');
return new Response(response.body, {
status: response.status,
headers,
});
}
// HTML: 짧은 캐시 + 재검증
const response = await fetch(request);
const headers = new Headers(response.headers);
headers.set('Cache-Control',
'public, max-age=0, must-revalidate');
headers.set('CDN-Cache-Control', 'max-age=60');
return new Response(response.body, {
status: response.status,
headers,
});
}
};04 · Interview Point
면접 핵심 질문
1. TTL 기반:
max-age로 만료 시간 설정 2. 수동 퍼지: CDN API를 통해 특정 URL의 캐시를 삭제 3. 에셋 핑거프린팅: 파일명에 해시를 포함하여 변경 시 새 URL 사용 4. Stale-While-Revalidate: 만료된 캐시를 제공하면서 백그라운드 갱신. 가장 효과적인 전략은 핑거프린팅 + 장기 캐시(immutable)이며, Next.js 등 프레임워크에서 기본 제공됩니다.CDN은 HTTP 캐시 헤더를 기반으로 동작합니다.
Cache-Control의 s-maxage는 CDN(공유 캐시)에만 적용되고,max-age는 브라우저 캐시에 적용됩니다. CDN 전용 헤더로 CDN-Cache-Control(Cloudflare)이나Surrogate-Control(Fastly)을 사용하면 브라우저와 CDN의 캐시 정책을 독립적으로 관리할 수 있습니다.