Base64 인코딩 완전 정복: 개발자를 위한 사용 가이드

Base64가 뭔가요? 왜 이미지를 텍스트로 바꾸나요? 개발하다 보면 자주 마주치는 Base64 인코딩의 모든 것을 쉽게 설명합니다.

1. Base64란 무엇인가?

Base64는 바이너리 데이터(이미지, 파일 등)를 텍스트 형태로 변환하는 인코딩 방식입니다. 64개의 안전한 문자(A-Z, a-z, 0-9, +, /)만 사용하여 데이터를 표현합니다.

예시:

원본 텍스트: Hello

Base64 인코딩: SGVsbG8=

2. 왜 Base64를 사용할까?

이유 #1: 이메일 전송

이메일은 텍스트만 전송할 수 있습니다. 이미지 첨부 파일은 Base64로 변환되어 전송됩니다.

이유 #2: Data URI

HTML/CSS에서 이미지를 직접 삽입할 때 Base64를 사용합니다.

<img src="data:image/png;base64,iVBORw0KG..." />

이유 #3: API 인증

Basic Authentication에서 username:password를 Base64로 인코딩하여 전송합니다.

3. Base64의 장단점

장점:

• ✅ 바이너리 데이터를 텍스트로 안전하게 전송
• ✅ 별도 파일 업로드 없이 HTML/CSS에 이미지 삽입 가능
• ✅ HTTP 요청 수 감소 (작은 아이콘들)

단점:

• ❌ 용량이 약 33% 증가합니다
• ❌ 큰 이미지는 적합하지 않음
• ❌ 브라우저 캐싱 불가

4. Base64 사용 사례

사례 1: 작은 아이콘 삽입

웹사이트 로딩 속도를 높이기 위해 작은 아이콘(10KB 이하)을 Base64로 인코딩하여 CSS에 직접 삽입합니다.

사례 2: JWT 토큰

JSON Web Token은 Header와 Payload를 Base64로 인코딩합니다.

사례 3: 이미지 미리보기

파일 업로드 미리보기 기능에서 이미지를 Base64로 변환하여 즉시 보여줍니다.

5. Base64 인코딩/디코딩 하는 방법

방법 1: JavaScript

// 인코딩 const encoded = btoa("Hello");  // "SGVsbG8=" // 디코딩 const decoded = atob("SGVsbG8=");  // "Hello"

방법 2: Python

import base64 # 인코딩 encoded = base64.b64encode(b"Hello") # 디코딩 decoded = base64.b64decode(encoded)

방법 3: 온라인 도구 사용 (가장 간편!)

코드 없이 클릭 한 번으로 변환하세요.

6. Base64는 암호화가 아닙니다!

7. 언제 Base64를 사용하면 좋을까?

• ✅ 작은 이미지 (10KB 이하)
• ✅ 아이콘, 로고
• ✅ Data URI가 필요한 경우
• ✅ 이메일 첨부 파일

사용하지 말아야 할 경우:

• ❌ 큰 이미지 (100KB 이상)
• ❌ 보안이 필요한 데이터
• ❌ 자주 변경되는 이미지

마무리

Base64는 개발자라면 반드시 알아야 할 기본 개념입니다. 언제 사용하고, 언제 사용하지 말아야 하는지만 제대로 알아도 웹 성능 최적화에 큰 도움이 됩니다.

Cheetset이 여러분의 개발 여정을 응원합니다! 🚀