📡 velog에서 이미지를 업로드할 때 CDN을 활용하는 방법

공부하는 내용들을 자주 기록하는 곳이 velog이다보니, velog를 살펴보며 동작하는 원리가 궁금해진 것들이 몇 가지가 있었다. 그 중 하나가 CDN!

CDN(Content Delivery Network)이란?

CDN은 많은 장소에 걸쳐 분산된 서버들의 그룹입니다.
이러한 서버들은 데이터의 중복 복사본들을 저장하여, 서버가 최종 사용자와 가장 가까운 서버를 기준으로 데이터 요청을 처리할 수 있습니다.
CDN은 높은 트래픽에도 영향을 덜 받는 빠른 서비스를 제공할 수 있습니다.

🤔 CDN을 사용하는 이유는?

• CDN을 통해서 라이브러리의 정적 asset을 제공하면 라이브러리의 자체 서버에 요청 부담이 줄어듭니다.
• 대부분의 CDN들은 전 세계에 서버를 가지고 있습니다. 따라서 CDN 서버들은 지리학적으로 특정 라이브러리의 서버보다 사용자와 더 가깝습니다. 지리학적 거리는 지연시간에 비례하여 영향을 미칩니다.
• CDN들은 이미 적절한 캐시 설정이 되어있습니다. CDN을 사용하면 자체 서버의 정적 asset을 위한 추가적인 설정을 하지 않아도 됩니다.

---

1️⃣ blob: URL

velog 글 작성 시 업로드하고자 하는 사진을 복사-붙여넣기 하면 다음과 같이 뜬다.

![업로드중..](blob:https://velog.io/01ba3af8-7827-4c0e-9e97-9e97d2f2011d26)

이것은 브라우저의 Blob API 에서 제공하는 기능으로, 브라우저 내부에서만 존재하는 임시 URL이다.
사용자가 선택하거나 복사한 이미지 파일을 클라이언트 메모리에서 임시로 접근할 수 있게 하는 URL이기 때문에, 다른 브라우저나 컴퓨터에서는 접근이 불가능하다.

blob: 뒤에 존재하는 UUID(ex> 01ba3af8-7827-4c0e-9e97-9e97d2f2011d26)는 브라우저가 임시로 부여한 고유 식별자이며, 서버에 전송되기 전까지만 존재하기 때문에 1초도 안 되는 시간 동안만 존재하다가 CDN URL로 교체된다.

정리하자면,

사용자가 ctrl + c & ctrl + v 하거나 drag & drop 하면 브라우저가 먼저 임시 URL을 만들어서 이미지가 업로드 중임을 표시하는 것이다.

🧐 Blob이란?

Blob(Binary Large Object) 은 바이너리 타입의 큰 객체를 나타낸다. 일반적으로 이미지, 소리, 멀티미디어 파일이 Blob에 속한다.

const myBlob = new Blob(["Hello to the world!"], {type: "text/plain"})

// myBlob
// Blob {size: 20, type: 'text/plain'}

위와 같이 Blob 생성자를 이용해 myBlob 객체를 만들었다. myBlob 객체는 size와 type의 2가지 속성을 갖는 것을 알 수 있는데, size 속성은 데이터의 크기(바이트)를, type 속성은 데이터의 타입을 MIME 타입으로 나타낸다.

Blob 객체는 optional type과 blobParts로 이루어져 있다.

---

Blob API는 다음과 같은 경우들에 주로 사용한다.

1. 청크로 업로드하는 경우

File 객체는 Blob 의 특수한 타입이며, 모든 Blob 타입의 맥락에서 사용할 수 있다. 따라서 큰 파일을 전송하기 위해 slice 메서드를 사용해 파일을 나누고, 청크 단위로 업로드를 할 수 있다.

const file = new File(["a".repeat(1000000)], "bytefer.txt");
const chunkSize = 40000;
const url = "https://httpbin.org/post";
async function chunkedUpload() {
  for (let start = 0; start < file.size; start += chunkSize) {
    const chunk = file.slice(start, start + chunkSize + 1);
    const fd = new FormData();
    fd.append("data", chunk);
    await fetch(url, { method: "post", body: fd })
      .then((res) => res.text());
  }
}

2. 인터넷에서 데이터를 다운로드하는 경우

const downloadBlob = (url, callback) => {
  const xhr = new XMLHttpRequest()
  xhr.open('GET', url)
  xhr.responseType = 'blob'
  xhr.onload = () => {
    callback(xhr.response)
  }
  xhr.send(null)
}

위 예제의 downloadBlob 함수를 사용해서 인터넷에서 데이터를 다운로드하고 이를 Blob 객체에 저장할 수 있다.

스트림의 바이너리 데이터를 얻기 위해, XMLHttpRequest API 대신 fetch API를 사용할 수도 있다.

const myImage = document.querySelector('img');
const myRequest = new Request('flowers.jpg');
fetch(myRequest)
  .then(function(response) {
    return response.blob();
  })
 .then(function(myBlob) {
   let objectURL = URL.createObjectURL(myBlob);
   myImage.src = objectURL;
});

위 코드에서는 fetch 요청에 성공하면 response 객체의 blob() 메서드를 호출해, response 객체로부터 Blob 객체를 읽어온다. 그런 다음 createObjectURL() 메서드를 호출해 objectURL을 생성하고, 이 URL을 이미지 요소의 src 속성에 할당해 이미지가 표시되도록 한다.

3. 이미지를 압축하는 경우

이미지 업로드 전에 파일의 크기를 줄여 전송 속도를 개선하고 싶을 때, Canvas API를 활용할 수 있다.

1. canvas.toDataURL(mimeType, quality)

• mimeType의 default 값은 image/png
• image/jpeg 또는 image/webp 는 quality(0~1) 옵션으로 압축률 조정이 가능하다.
• 반환값은 base64 형태의 DataURL.

2. Data URL → Blob 변환
전송 효율을 위해 base64 문자열을 다시 Blob 으로 변환할 수 있다.

canvas.toBlob((blob) => {
  // blob을 서버로 업로드 or 로컬에 저장 or html 태그에 넣기
}, "image/jpeg", 0.8);

🔎 서버로 전송하는 예시

canvas.toBlob((blob) => {
  const formData = new FormData();
  formData.append("file", blob, "canvas.jpg");

  fetch("/upload", {
    method: "POST",
    body: formData,
  });
}, "image/jpeg", 0.8);

toDataURL() 은 동기로 동작하며 문자열을 반환하고, toBlob() 은 비동기로 동작하며 Blob 객체를 반환하기 때문에, toBlob() 이 더 적합하다.

정리하면, Canvas API로 이미지를 리사이징 혹은 압축하고, Blob으로 변환한 후, 서버로 전송하는 것이 일반적으로 쓰이는 흐름이다.

4. Blob URL을 생성하는 경우

Blob URL은 Blob 및 File 객체를 이미지의 URL 소스나 바이너리 데이터를 다운로드하기 위한 링크 등으로 사용할 수 있도록 하는 의사 프로토콜(pseudo-protocol)이다.

브라우저에서 Blob URL을 생성하기 위해 URL.createObjectURL() 함수를 사용하는데, 이 함수는 Blob 객체를 가져와서 blob:<origin>/<uuid> 형태의 고유한 URL을 생성한다.

생성된 URL 형태는 다음과 같은 형태이다.

blob:https://velog.io/01ba3af8-7827-4c0e-9e97-9e97d2f2011d26

브라우저는 Blob 객체를 메모리에 유지하고, 내부적으로 URL ↔ Blob 맵핑을 관리한다. Blob 객체는 문서가 언로드될 때 자동으로 해제되지만, 앱이 오래 실행되면 불필요하게 메모리를 차지할 수 있다. 따라서 Blob이 더 이상 필요 없을 때는 URL.revokeObjectURL 을 호출해서 메모리를 해제해주어야 한다.

const download = (fileName, blob) => {
  const link = document.createElement("a");
  link.href = URL.createObjectURL(blob); // Blob URL 생성
  link.download = fileName;
  link.click();
  URL.revokeObjectURL(link.href);        // 메모리 해제
};

const btn = document.querySelector("#downloadBtn");
btn.addEventListener("click", () => {
  const blob = new Blob(["Hello Blob!"], { type: "text/plain" });
  download("blob.txt", blob);
});

정리하자면 Blob URL은 파일을 미리보기/다운로드할 때는 유용하지만, 사용 후에는 반드시 해제해야 메모리 누수를 막을 수 있다.

5. Blob에서 Data URL로 변환하는 경우

오늘날 대부분의 브라우저는 Data URL이라고 불리는 기능을 지원하는데, 이 기능은 이미지와 다른 파일의 바이너리 데이터를 base64로 인코딩해 웹 페이지에 텍스트 문자열 형태로 포함될 수 있도록 해주는 기능이다.

Data URL은 다음과 같은 구조로 이루어져 있다.

data:[<mediatype>][;base64],<data>

접두사(data:)와 데이터의 타입을 나타내는 MIME 타입, optional 요소인 base64 태그, 데이터 자체 이렇게 네 가지 부분으로 이루어져 있다.

mediatype 은 MIME 타입의 문자열로, 기본값은 text/plain;charset=US-ASCII이다. 따라서 데이터가 텍스트 타입이라면 텍스트를 바로 포함시킬 수 있다. 만약 바이너리 타입이라면, 포함시키기 전에 base64 인코딩을 할 수 있다.

Data URL은 작은 이미지나 아이콘을 Data URL로 변환해 HTML/CSS에 직접 포함하면 네트워크 요청 수를 줄일 수 있다는 장점이 있지만, base64 인코딩은 원본보다 크기가 약 33% 정도 늘어나기 때문에 큰 이미지에는 비효율적이며, 페이지 로딩 속도를 저하시킬 수 있다는 단점이 있다.

그래서 FileReader API를 통해 간편하게 이미지의 로컬 미리보기 기능을 구현할 수 있다.

<input type="file" accept="image/*" onchange="loadFile(event)">
<img id="output"/>
<script>
  const loadFile = function(event) {
    const reader = new FileReader();
    reader.onload = function(){
      const output = document.querySelector('output');
      output.src = reader.result;
    };
    reader.readAsDataURL(event.target.files[0]);
  };
</script>

위 예시 코드에서는 파일 타입 입력 박스의 onChange 이벤트 핸들러에 loadFile() 함수를 바인딩했다. 이 함수에서는 FileReader 객체를 생성하고 해당 객체에 onload 이벤트 핸들러를 바인딩한 다음, FileReader 객체의 readAsDataURL() 메서드를 호출해 로컬 이미지에 해당하는 File 객체를 Data URL로 변환한다.

클라이언트에서 Data URL 형태로 서버에 전송하면, 서버는 base64로 인코딩된 데이터를 다시 바이너리로 디코딩해서 파일로 저장할 수 있다.

하지만 실무에서는 보통 Data URL보다 FormData나 multipart 업로드 방식을 더 자주 사용한다.

2️⃣ 서버 업로드 후 CDN URL로 교체

![](https://velog.velcdn.com/images/id/post/d3fbbd80-db70-48eb-95d7-fe84b1bb189a/image.png)

이것은 이미지 파일의 URL 예시이다. 이 URL은 어떻게 생기는 걸까?

1. 먼저 브라우저가 이미지 파일을 multipart/form-data 와 같은 형식으로 서버에 전송하면, 서버는 그 파일을 파일 스토리지에 저장한다.
2. CDN은 저장소 파일을 전 세계에 있는 노드들에 캐싱하고 배포한다.
3. 서버는 브라우저에게 최종적으로 접근 가능한 https://velog.velcdn.com/... 와 같은 URL을 반환한다.
4. 브라우저는 blob: URL을 CDN으로부터 받은 URL로 교체한다.

🤔 업로드하는 컨텐츠가 동일하더라도 UUID는 왜 계속 변경될까?

post/d3fbbd80-db70-48eb-95d7-fe84b1bb189a

이것은 게시글 단위(post)와 이미지 단위(image) UUID를 포함한 URL 구조이다. velog에서는 같은 이미지더라도 복사-붙여넣기할 때마다 새로운 UUID를 생성하는데, 왜 그런 것일까? 궁금해졌다.

이것은 다음과 같은 목적이 있다.

1. 게시글에 이미지가 여러 번 사용될 때 충돌하는 것을 방지한다.
2. CDN 캐싱 문제를 방지한다.
3. 수정/삭제에 대해 추적이 가능하다.

위와 같은 이유로, 동일한 파일이더라도 서버에서는 새 파일처럼 취급해서 URL을 새로 부여하는 것이다.

🤡 정리해보자!

1. CDN은 전 세계에 분산된 서버망으로, 사용자와 가까운 서버에서 콘텐츠를 제공하여 속도와 안정성을 높인다.
2. 브라우저는 업로드 과정에서 blob URL을 먼저 만들어 임시로 이미지를 표시한다.
3. Blob은 이미지/동영상 같은 바이너리 데이터를 다루기 위한 객체이며, Data URL, Blob URL 등 다양한 방식으로 활용할 수 있다.
4. 업로드가 완료되면 서버가 파일을 저장하고, CDN이 최종적으로 접근 가능한 URL을 발급해 Blob URL을 교체한다.
5. 동일한 파일이라도 서버는 새 UUID를 부여해 캐싱 문제나 충돌을 방지하고 관리성을 높인다.

👉 정리하면 사용자는 단순히 이미지를 붙여넣기만 하지만, 실제로는 브라우저가 Blob API를 통해 임시 URL을 생성하고, 서버-스토리지-CDN을 거쳐 최종적으로 안정적인 URL로 교체되는 흐름이 동작하는 것이다.

Reference

CDN(콘텐츠 전송 네트워크)이란 무엇일까요? CDN은 어떻게 작동하나요? | Akamai
MDN Web Docs 용어 사전: 웹 용어 정의 > CDN
An Introduction to Blob API & Its Use Cases