---
term: 'CDN (콘텐츠 전송 네트워크)'
seoTitle: 'CDN이란? 콘텐츠 전송 네트워크의 작동 방식과 캐시 전략'
headline: 'CDN(콘텐츠 전송 네트워크)이란?'
slug: cdn-content-delivery-network
category: cloud-architecture
shortDefinition: 'CDN은 분산된 서버들이 사용자 가까이에 콘텐츠를 캐시하여 페이지와 파일이 어디서나 빠르게 로드되게 하는 네트워크입니다.'
relatedTerms:
  - edge-computing-edge-functions
  - ssr-vs-csr-vs-ssg
  - jamstack
  - api-payload-optimization
contrastsWith:
  - edge-computing-edge-functions
faq:
  - question: 'CDN을 쉽게 설명하면 무엇입니까?'
    answer: '콘텐츠의 캐시 사본을 사용자 가까이에 보관하는, 지리적으로 분산된 서버 네트워크입니다. 모든 요청이 오리진 서버까지, 때로는 바다 건너까지 이동하는 대신 대부분의 요청은 가까운 엣지 서버가 밀리초 단위로 응답합니다. 주요 사이트의 웹 트래픽 대부분이 이런 방식으로 전송됩니다.'
  - question: 'CDN은 어떻게 작동합니까?'
    answer: '라우팅과 캐싱의 조합입니다. 사용자의 요청은 가장 가까운 PoP(point of presence)로 유도되고, 그 엣지 서버가 신선한 캐시 사본을 가지고 있으면(캐시 히트) 즉시 응답합니다. 없으면(캐시 미스) 엣지가 오리진에서 가져와 설정된 TTL(time to live) 동안 사본을 저장하고, 만료될 때까지 근처의 모든 사용자에게 캐시에서 제공합니다.'
  - question: 'CDN은 웹 호스팅과 같은 것입니까?'
    answer: '아닙니다. CDN은 호스팅을 보완할 뿐 대체하지 않습니다. 호스트(오리진)는 권위 있는 원본 콘텐츠를 저장하고, CDN은 엣지에 임시 사본을 보관합니다. 오리진이 사라지면 CDN도 결국 제공할 것이 없어집니다. 역할 분담은 이렇습니다. 오리진은 진실의 원천이고, CDN은 배포 계층입니다.'
  - question: '캐시 히트, 캐시 미스, TTL이란 무엇입니까?'
    answer: '히트는 엣지가 캐시 사본으로 응답했다는 뜻입니다. 빠르고, 오리진은 요청이 있었는지조차 모릅니다. 미스는 엣지에 신선한 사본이 없어 오리진에서 가져왔다는 뜻입니다. 근처의 첫 방문자에게 한 번만 느립니다. TTL(time to live)은 캐시 사본이 신선한 것으로 간주되는 기간이며 Cache-Control 헤더로 설정합니다. 캐시 설계는 대부분 오래된 콘텐츠를 제공하지 않으면서 히트를 최대화하는 기술입니다.'
  - question: 'CDN이 동적 콘텐츠도 제공할 수 있습니까?'
    answer: '고전적인 의미의 캐시로는 불가능합니다. 개인화된 API 응답은 사용자마다 다르기 때문입니다. 그래도 CDN은 최적화된 경로, 지속 연결, 사용자 가까이에서 종료되는 TLS로 동적 트래픽을 가속하며, 최신 플랫폼은 엣지에서 로직을 직접 실행합니다. 실용적인 구분은 이렇습니다. 정적 자산은 공격적으로 캐시하고, 동적 응답은 가속하며, 효과가 있는 곳에서는 엣지에서 연산합니다.'
  - question: 'CDN은 DDoS 공격을 어떻게 막습니까?'
    answer: '거대한 규모로 길목을 지키는 방식입니다. 리버스 프록시인 CDN은 오리진의 주소를 숨기고, 분산된 용량으로 대규모 트래픽 공격을 수많은 PoP에 걸쳐 흡수합니다. 서버 한 대를 무너뜨릴 트래픽이 전 세계 네트워크로 흩어지고, 무엇이든 오리진에 닿기 전에 엣지에서 필터링됩니다.'
  - question: 'CDN이 필요 없는 경우는 언제입니까?'
    answer: '사용자가 서버 리전 근처에 모여 있으면 먼 엣지를 거치는 추가 홉이 오히려 지연 시간을 늘릴 수 있습니다. 트래픽이 너무 적어 방문 사이에 캐시가 만료되면(끝없는 미스는 아무 효과가 없습니다), 그리고 작은 동적 앱에서 애초에 전송 속도가 병목이 아니면 필요 없습니다. CDN은 거리와 볼륨에 거는 지렛대이며, 둘 다 없으면 이득 없는 설정일 뿐입니다.'
  - question: 'CDN과 엣지 컴퓨팅의 차이는 무엇입니까?'
    answer: 'CDN은 콘텐츠를 사용자 가까이로 옮기고, 엣지 컴퓨팅은 연산을 가까이로 옮깁니다. 전송 대 결정입니다. CDN은 "이 파일을 어디서나 빠르게 제공하라"에 답하고, 엣지 함수는 "이 로직을 사용자 근처에서 실행하라"에 답합니다. 실제로는 둘이 수렴하여 최신 CDN 플랫폼은 PoP에서 코드를 실행하지만, 이 사고 모델은 여전히 유효합니다.'
codeLanguages: [javascript, dart, swift, kotlin]
externalAuthorities:
  - name: 'CDN — MDN Web Docs Glossary'
    url: 'https://developer.mozilla.org/en-US/docs/Glossary/CDN'
  - name: 'Content delivery network (Wikipedia)'
    url: 'https://en.wikipedia.org/wiki/Content_delivery_network'
  - name: 'HTTP Cache-Control — MDN Web Docs'
    url: 'https://developer.mozilla.org/en-US/docs/Web/HTTP/Reference/Headers/Cache-Control'
  - name: 'Back4app file storage documentation'
    url: 'https://www.back4app.com/docs'
cta:
  title: '첫날부터 빠르게 제공되는 파일'
  text: 'Back4app에 파일을 업로드하면 돌려받는 URL은 기본적으로 CDN 친화적입니다. 이미지, 미디어, 다운로드를 위한 캐시 준비가 된 전송에, 데이터베이스와 인증, API까지 이미 옆에서 관리됩니다. 따로 설정할 배포 계층이 없습니다.'
  linkText: '무료로 시작하기'
  linkUrl: 'https://www.back4app.com/signup'
author: 'Back4app Engineering'
publishedDate: '2026-11-02'
translationKey: cdn-content-delivery-network
---

**CDN은 분산된 서버들이 사용자 가까이에 콘텐츠를 캐시하여 페이지와 파일이 어디서나 빠르게 로드되게 하는 네트워크입니다.** CDN이 푸는 문제는 물리학입니다. 상파울루에서 프랑크푸르트의 서버로 가는 요청은 매번 왕복 거리만큼 지연 시간을 치릅니다. CDN은 그 요청에 상파울루에서 응답합니다. 그리고 한 가지를 분명히 해 두면 끝없는 혼란을 피할 수 있습니다. CDN은 호스팅을 *보완*할 뿐, 결코 대체하지 않습니다.

## 핵심 요약

| 질문 | 답변 |
| --- | --- |
| 정의 | 콘텐츠의 캐시 사본을 보관하는 분산 엣지 서버 |
| 해결하는 문제 | 거리. 지연 시간은 오리진까지의 왕복에 비례해 늘어남 |
| 작동 원리 | 가장 가까운 엣지로 라우팅 → 캐시 히트는 즉시 응답, 미스는 오리진에서 한 번만 가져옴 |
| 조절 수단 | Cache-Control 헤더, TTL, 퍼지 또는 버전이 붙은 파일 이름 |
| 아닌 것 | 웹 호스트도, 엣지 컴퓨팅도 아님. 저장이나 로직이 아니라 전송 |

## CDN을 움직이는 조절 수단

캐싱 계약 전체가 HTTP 헤더 하나에 들어갑니다. 그리고 이것이 CDN 설명마다 가장 덜 설명되는 부분입니다:

```text
# 오리진이 사용자와의 사이에 있는 모든 캐시에 내리는 지시:
Cache-Control: public, max-age=300, s-maxage=86400, stale-while-revalidate=3600

  public                  → 어떤 캐시든 저장 가능
  max-age=300             → 브라우저: 5분간 신선
  s-maxage=86400          → CDN 엣지: 24시간 신선
  stale-while-revalidate  → 오래된 사본을 즉시 제공하고 백그라운드에서 갱신

# 다른 전략: 만료도 퍼지도 하지 않고 파일 이름에 버전을 붙임
/_assets/app.3f9c1b.css   → "영구" 캐시. 새 빌드는 새 URL을 의미
```

앱에서 파일이 어디에서 오는지도 중요합니다. 관리형 백엔드에서는 업로드가 캐싱 설정이 이미 합리적인, 전송 준비가 된 URL을 돌려줍니다:

**JavaScript:**

```javascript
// JavaScript / Node.js — Back4app JS SDK
// Upload once; the returned URL serves from edge cache worldwide
const file = new Parse.File('hero.webp', { base64: imageData });
await file.save();
console.log(file.url()); // CDN-backed, cache-friendly URL
```

**Flutter:**

```dart
// Flutter / Dart — Back4app Flutter SDK
final file = ParseFile(File('hero.webp'));
await file.save();
print(file.url); // CDN-backed, cache-friendly URL
```

**Swift:**

```swift
// iOS / Swift — Back4app Swift SDK
let file = ParseFile(name: "hero.webp", data: imageData)
file.save { result in
  if case .success(let saved) = result {
    print(saved.url ?? "") // CDN-backed, cache-friendly URL
  }
}
```

**Kotlin:**

```kotlin
// Android / Kotlin — Back4app Android SDK
val file = ParseFile("hero.webp", imageBytes)
file.saveInBackground { e ->
  if (e == null) Log.d("CDN", file.url) // CDN-backed, cache-friendly URL
}
```

## 요청 하나의 해부

```mermaid
flowchart LR
  accTitle: CDN이 요청을 처리하는 방식
  accDescr: 사용자는 가장 가까운 PoP로 라우팅됩니다. 캐시 히트는 엣지에서 즉시 제공되고, 미스는 오리진 서버에서 가져와 TTL에 따라 응답을 캐시한 뒤 로컬에서 제공합니다.
  U["사용자"] --> R["라우팅<br/>(가장 가까운 PoP)"]
  R --> E["엣지 서버"]
  E -->|"캐시 히트"| U2["ms 단위로 응답"]
  E -->|"캐시 미스"| O["오리진 서버"]
  O -->|"응답 + TTL"| E
```

용어를 한 번에 정리합니다. **오리진**은 실제 서버, 즉 진실의 원천입니다. **PoP**(point of presence)는 CDN 데이터 센터의 위치이고, **엣지 서버**는 그 안에서 캐싱을 담당하는 머신입니다. 오리진을 거치지 않고 응답한 요청의 비율인 **캐시 히트율**이 이 모든 작업이 최적화하는 지표이며, 그 레버가 위의 헤더들입니다. 사용자 입장에서 개선되는 것은 **TTFB**(time to first byte)이고, 페이지 전체를 엣지에 캐시하면 TTFB에서 이어지는 로딩 지표도 함께 좋아집니다.

## CDN vs. 웹 호스팅 vs. 엣지 컴퓨팅

| 기준 | 웹 호스팅(오리진) | CDN | 엣지 컴퓨팅 |
| --- | --- | --- | --- |
| 역할 | 권위 있는 원본 콘텐츠를 저장 | 캐시 사본을 배포 | 사용자 근처에서 로직을 실행 |
| 답하는 질문 | "내 사이트는 어디에 있는가?" | "왜 도쿄에서 빠른가?" | "도쿄에서 연산할 수 있는가?" |
| 상태 | 영구적 | 임시적, TTL에 묶임 | 보통 무상태 |
| 없으면 | 사이트가 없음 | 느린 사이트, 노출된 오리진 | 모든 결정마다 왕복 |
| 일반적인 콘텐츠 | 모든 것, 한 번씩 | 정적 자산, 미디어, 캐시된 전체 페이지 | 개인화, 인증 확인, 리라이트 |

[MDN의 정의](https://developer.mozilla.org/en-US/docs/Glossary/CDN)는 벤더 페이지가 건너뛰는 단서를 덧붙입니다. 서드파티 CDN 스크립트는 공급망 의존성이고(integrity 속성이 괜히 있는 것이 아닙니다), CDN으로 가는 추가 DNS 조회는 첫 방문에서 오히려 시간을 잡아먹을 수도 있습니다. CDN은 마법이 아니라 지렛대입니다.

## 일반적인 사용 사례

- **대규모 정적 자산.** CSS, JavaScript, 폰트, 이미지. 핑거프린트가 붙은 파일 이름과 긴 TTL을 함께 쓰면 재방문은 순수한 엣지 트래픽이 됩니다.
- **미디어와 다운로드.** 오리진 대역폭이 곧 청구서이자 병목이 되는 비디오 세그먼트와 대용량 파일.
- **전 세계 사용자.** 네 대륙에 서버를 운영하지 않고도 네 대륙에서 같은 페이지를 100ms 이내에 제공합니다.
- **트래픽 급증과 출시.** 엣지가 급증을 흡수하고, 오리진은 그중 일부만 받습니다.
- **보안 태세.** 리버스 프록시 뒤에 숨은 오리진, 엣지에서 종료되는 TLS, 네트워크 전체로 흩어지는 대규모 트래픽 공격.

## CDN이 필요할까? 결정 매트릭스

| CDN이 효과를 내는 경우… | 건너뛰거나 미뤄도 되는 경우… |
| --- | --- |
| 사용자가 오리진에서 멀리 있음 | 사용자가 서버 리전 근처에 모여 있음 |
| 자산과 미디어가 트래픽의 대부분 | 앱이 작고 동적이며 API에 묶여 있음 |
| 트래픽 급증이 비즈니스의 일부 | 트래픽이 너무 적어 캐시가 웜 상태로 유지되지 않음 |
| 오리진 대역폭이 실제 비용 | 움직이는 부품 하나가 늘어나는 부담이 절약되는 ms보다 큼 |
| 오리진 앞에서 DDoS를 흡수하고 싶음 | 개인화된 응답을 캐시하려는 것임(불가능) |

아무도 적지 않는 솔직한 한 줄이 있습니다. 트래픽이 적은 사이트에서는 방문 사이에 캐시 사본이 만료되어 모든 요청이 미스가 되고, CDN은 아무 이득 없이 홉 하나를 더할 뿐입니다. 입력값은 거리와 볼륨입니다. 둘 다 없다면 다른 것부터 고치는 것이 좋습니다.

## 한계와 트레이드오프

- **오래된 콘텐츠가 기본 실패 모드입니다.** 긴 TTL은 어제의 파일을 오늘 자신 있게 제공한다는 뜻입니다. 해법은 퍼지(느리고 CDN마다 다름) 또는 버전이 붙은 파일 이름(더 나음)입니다.
- **캐시 무효화는 정말로 어렵습니다.** 유명한 두 가지 난제 중 하나로 꼽히는 데는 이유가 있습니다. 무효화가 거의 필요 없도록 URL을 설계해야 합니다.
- **동적 콘텐츠는 캐싱에 저항합니다.** 사용자별 응답은 공유할 수 없습니다. 가속과 엣지 로직이 도움이 되지만, 일은 여전히 오리진이 합니다.
- **핵심 경로에 의존성이 하나 생깁니다.** CDN 장애는 인터넷 전체의 기상 이변 같은 사건이며, 엣지가 다운되면 "여러분의" 사이트도 다운됩니다.
- **디버깅에 계층이 하나 늘어납니다.** 어느 캐시가 이 응답을 제공했는가? 어떤 헤더로? 캐시 상태 헤더와 엣지별 동작이 관측 가능성의 일부가 됩니다.

## Back4app에서의 CDN

Back4app은 관리형 데이터베이스, 자동 생성되는 REST 및 GraphQL API, 인증, 파일 스토리지, Cloud Code 서버리스 함수를 결합한 오픈소스 Backend as a Service(BaaS) 플랫폼입니다. CDN 친화적인 전송은 파일 계층에 내장되어 있습니다. 어떤 SDK로든(위의 탭) 업로드하면 돌려받는 URL은 전송 준비가 되어 있습니다. 안정적이고, 캐시 가능하며, API의 동적 트래픽과 독립적이어서 앱의 캐시 가능한 절반과 캐시 불가능한 절반이 깔끔하게 분리됩니다. [Back4app Containers](https://www.back4app.com/container-as-a-service)에 호스팅된 웹 프론트엔드는 어떤 CDN 뒤에도 자연스럽게 자리 잡으며, 수명이 긴 핑거프린트 자산과 수명이 짧은 HTML이라는 고전적인 패턴을 헤더 하나로 설정합니다.