meepin

posts

이미지 데이터 처리: Base64, Blob, Binary

May 11, 2025 updated May 11, 2025 csshttp

각 용어에 대해 명확히 정리해 드리겠습니다.

⸻

📌 1. Base64란?

✅ 정의 • Base64는 바이너리(이진) 데이터를 ASCII 문자(텍스트) 형태로 표현할 때 쓰는 인코딩 방식입니다. • 주로 이미지 파일, 오디오, 비디오와 같은 바이너리 데이터를 텍스트 형식으로 변환하여 웹이나 이메일 등 텍스트 기반 프로토콜에서 전송할 때 사용합니다.

✅ Base64의 특징 • 알파벳 문자(A-Z, a-z), 숫자(0-9), ‘+’, ‘/’, ‘=’ 문자로만 구성됩니다. • 용량이 원본 데이터에 비해 약 33% 정도 증가합니다. • 텍스트 형태이므로 HTML, CSS, JS 코드 내에 쉽게 삽입 가능합니다.

✅ 예시 • 이미지 파일의 Base64 예시:

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA...

•	텍스트 형태이기 때문에, 바로 복사/붙여넣기가 가능합니다.

⸻

📌 2. Blob이란?

✅ 정의 • Blob(Binary Large Object)은 자바스크립트 환경에서 이진 데이터를 저장하기 위해 사용되는 객체 타입입니다. • 이미지, 오디오, 비디오, PDF 등 다양한 형태의 데이터를 Blob으로 표현할 수 있습니다. • 브라우저에서 파일을 다운로드하거나 업로드 시 사용됩니다.

✅ Blob의 특징 • Blob 자체는 데이터의 내용을 직접 보여주지 않고, 이진 데이터를 효율적으로 관리하는 객체입니다. • File 객체도 Blob을 상속한 특수한 형태의 Blob 객체입니다.

✅ 예시

Blob 객체를 생성하는 예시:

// Blob으로 텍스트를 표현 const blob = new Blob(['Hello, world!'], { type: 'text/plain' });

// Blob으로 이미지 바이너리를 표현 const imgBlob = new Blob([arrayBufferData], { type: 'image/png' });

•	Blob은 실제 내용 대신 Blob 객체의 참조(URL.createObjectURL)만으로 브라우저에서 사용 가능합니다.

const url = URL.createObjectURL(blob); // "blob:http://example.com/123e4567-e89b-12d3-a456-426614174000"

•	URL.createObjectURL로 만든 주소로 <img>, <a> 등 HTML 요소에서 사용 가능합니다.

⸻

📌 3. 바이너리(Binary)란?

✅ 정의 • 바이너리(binary)는 데이터를 0과 1이라는 이진수 형태로 표현하는 방식입니다. • 이미지, 비디오, 오디오, 문서 등의 실제 파일 원본은 모두 바이너리 데이터입니다. • 이진 데이터는 사람이 직접 읽거나 수정하기 어렵고, 컴퓨터가 직접 읽고 처리합니다.

✅ 바이너리 데이터의 특징 • 텍스트와 달리 사람이 직접 볼 수 없으며, 컴퓨터만 해석 가능합니다. • 용량이 원본 그대로 유지됩니다 (압축을 따로 하지 않는 이상).

✅ 예시

예를 들어 이미지 파일의 원본은 다음과 같은 형태의 바이너리 데이터입니다.

00010011 01011101 10101110 10110001 ... (실제 이미지 파일 데이터)

바이너리 데이터를 직접 보는 것은 불가능하지 않지만, 보통은 텍스트 편집기나 일반 브라우저에서는 글자 깨짐이나 잘못된 형식으로 보이게 됩니다.

⸻

🎯 정확한 비교 정리

구분 Base64 Blob Binary(바이너리) 데이터 형태 텍스트 데이터 (ASCII 문자) JS에서 관리하는 이진 데이터 객체 실제 원본 데이터 (이진 형태) 용량 크기 원본보다 약 33% 증가 원본 크기 그대로 유지 원본 크기 그대로 유지 사용처 웹상 이미지 미리보기, 텍스트 전송 파일 업로드/다운로드, 파일 관리 실제 데이터 전송, 저장 브라우저 표시 바로 표시 가능 ( src로 가능) Blob URL 생성하여 사용 가능 직접 표시 불가능 (URL 필요) 편집 용이성 텍스트 형태로 수정 가능 직접 수정 불가, URL로 접근 직접 수정 어려움 (전용 프로그램 필요) 예시 data:image/png;base64,iVBORw... blob:http://example.com/uuid... 01010100 01100101 01110011...

⸻

🔍 이미지를 다룰 때 일반적인 흐름

웹에서 이미지 파일을 다룰 때 일반적인 데이터 변화 흐름을 다시 정리하면 다음과 같습니다.

📌 이미지 선택 및 미리보기 (클라이언트)

  1. 사용자가 이미지 선택 ()
  2. 미리보기 용도로 Base64로 변환하여 화면에 표시 (FileReader를 사용하여 Base64 생성)

reader.readAsDataURL(file);

📌 이미지 전송 (클라이언트 → 서버) 3. 실제 파일 업로드 시 원본 바이너리 (File 객체)를 FormData로 서버에 전송

formData.append('photo', file);

📌 서버에서 파일 저장 (서버) 4. 서버는 받은 바이너리 데이터를 파일시스템 or 클라우드 스토리지에 원본 파일로 저장 5. 저장 후 생성된 URL 또는 경로 문자열만 DB에 저장

📌 DB 저장 데이터 형태 • 실제 DB는 이미지 URL(경로)만 문자열로 저장합니다.

{ "imageURL": "https://storage.example.com/image123.png" }

⸻

🎯 결론적 정리 • Base64: 텍스트 기반 전송 (미리보기 용도) • Blob: JS에서 바이너리 데이터를 효율적으로 관리하는 객체 (파일 처리용) • Binary: 실제 파일 데이터 원본 (파일 저장 및 전송 시 사용)

결론적으로 웹 개발에서 실제 이미지 전송 및 저장 과정은 다음과 같습니다.

사용자 선택 → File 객체 → 서버로 원본 전송(바이너리) → 서버 저장 → URL 생성 → DB URL 저장

이 흐름으로 이루어지며, DB에 직접 Base64 또는 바이너리 데이터를 저장하는 일은 거의 없습니다. (용량, 성능 문제 때문입니다.)