What is Base64 Encoding? When and Why to Use It
Base64 ์ธ์ฝ๋ฉ์ด๋?
Base64๋ ๋ฐ์ด๋๋ฆฌ ๋ฐ์ดํฐ(์ด๋ฏธ์ง, ํ์ผ ๋ฑ)๋ฅผ ํ
์คํธ ํํ๋ก ๋ณํํ๋ ์ธ์ฝ๋ฉ ๋ฐฉ์์
๋๋ค. ์ด๋ฆ์ โ64โ๋ ์ฌ์ฉํ๋ ๋ฌธ์ ์งํฉ์ ์์์ ์ ๋ํฉ๋๋ค โ ์๋ฌธ ๋์๋ฌธ์(A-Z, a-z), ์ซ์(0-9), ๊ทธ๋ฆฌ๊ณ +์ / ๊ธฐํธ, ์ด 64๊ฐ์ ๋ฌธ์๋ง ์ฌ์ฉํฉ๋๋ค.
Base64๋ก ์ธ์ฝ๋ฉ๋ ๋ฐ์ดํฐ๋ ์ด๋์๋ ์์ ํ๊ฒ ์ ์กํ ์ ์๋ ASCII ํ ์คํธ๊ฐ ๋ฉ๋๋ค. ์ด๋ฉ์ผ, URL, HTML, JSON ๋ฑ ํ ์คํธ๋ง ํ์ฉํ๋ ํ๊ฒฝ์์ ๋ฐ์ด๋๋ฆฌ ๋ฐ์ดํฐ๋ฅผ ์ ๋ฌํด์ผ ํ ๋ ํนํ ์ ์ฉํฉ๋๋ค.
์ Base64๊ฐ ํ์ํ๊ฐ?
์ปดํจํฐ์ ๋ชจ๋ ๋ฐ์ดํฐ๋ ๊ทผ๋ณธ์ ์ผ๋ก 0๊ณผ 1์ ์ด์ง์(๋ฐ์ด๋๋ฆฌ)๋ก ๊ตฌ์ฑ๋ฉ๋๋ค. ์ด๋ฏธ์ง ํ์ผ, PDF, ์์ ํ์ผ ๋ฑ์ ๋ชจ๋ ๋ฐ์ด๋๋ฆฌ ๋ฐ์ดํฐ์ ๋๋ค. ๋ฌธ์ ๋ ๋ง์ ์์คํ ๊ณผ ํ๋กํ ์ฝ์ด ํ ์คํธ ๋ฐ์ดํฐ๋ง ์ฒ๋ฆฌํ๋๋ก ์ค๊ณ๋์ด ์๋ค๋ ์ ์ ๋๋ค.
์๋ฅผ ๋ค์ด:
- ์ด๋ฉ์ผ(SMTP): ์๋ 7๋นํธ ASCII ํ ์คํธ๋ง ์ง์ํ์ต๋๋ค. ์ฒจ๋ถ ํ์ผ์ ๋ณด๋ด๋ ค๋ฉด Base64๋ก ๋ณํํด์ผ ํ์ต๋๋ค.
- HTML/CSS: ์ด๋ฏธ์ง๋ฅผ ๋ณ๋ ํ์ผ ์์ด HTML/CSS ์์ ์ง์ ํฌํจ์ํฌ ์ ์์ต๋๋ค.
- JSON API: ์ด๋ฏธ์ง๋ ํ์ผ์ JSON ํ์ด๋ก๋์ ๋ด์ ์ ์กํ ๋ ์ฌ์ฉํฉ๋๋ค.
- ์ธ์ฆ ํ ํฐ: HTTP Basic ์ธ์ฆ์์
์ฌ์ฉ์๋ช :๋น๋ฐ๋ฒํธ๋ฅผ Base64๋ก ์ธ์ฝ๋ฉํด ์ ์กํฉ๋๋ค.
Base64 ์ธ์ฝ๋ฉ ์๋ฆฌ
Base64๋ 3๋ฐ์ดํธ(24๋นํธ)๋ฅผ 4๊ฐ์ 6๋นํธ ๊ทธ๋ฃน์ผ๋ก ๋๋๊ณ , ๊ฐ ๊ทธ๋ฃน์ 64๊ฐ ๋ฌธ์ ์ค ํ๋๋ก ๋งคํํฉ๋๋ค.
์์: ๋ฌธ์ Man์ Base64๋ก ์ธ์ฝ๋ฉํด๋ด
์๋ค.
M a n
77 97 110 (ASCII ์ฝ๋)
01001101 01100001 01101110 (์ด์ง์)
6๋นํธ์ฉ ๋๋๊ธฐ:
010011 010110 000101 101110
Base64 ๋ฌธ์ ๋งคํ:
T W F u
๊ฒฐ๊ณผ: TWFu
์๋ณธ 3๋ฐ์ดํธ๊ฐ 4๊ฐ์ Base64 ๋ฌธ์๋ก ๋ณํ๋ฉ๋๋ค. ์ด ๋๋ฌธ์ Base64๋ก ์ธ์ฝ๋ฉํ๋ฉด ๋ฐ์ดํฐ ํฌ๊ธฐ๊ฐ ์ฝ 33% ์ฆ๊ฐํฉ๋๋ค.
์ค์ ํ์ฉ ์ฌ๋ก
1. HTML์ ์ด๋ฏธ์ง ์ง์ ์ฝ์ (Data URI)
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNk+M9QDwADhgGAWjR9awAAAABJRU5ErkJggg==" alt="1px ์ด๋ฏธ์ง" />
์ด ๋ฐฉ์์ ์ฌ์ฉํ๋ฉด ์์ ์์ด์ฝ์ด๋ ๋ก๊ณ ๋ฅผ ๋ณ๋ HTTP ์์ฒญ ์์ด ํ์ด์ง์ ํฌํจ์ํฌ ์ ์์ต๋๋ค. ํนํ ์์ด์ฝ์ด ๋ง์ ๊ฒฝ์ฐ HTTP ์์ฒญ ์๋ฅผ ์ค์ฌ ํ์ด์ง ๋ก๋ฉ ์๋๋ฅผ ๋์ด๋ ๋ฐ ๋์์ด ๋ฉ๋๋ค.
2. CSS ๋ฐฐ๊ฒฝ ์ด๋ฏธ์ง
.icon {
background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==');
}
3. API๋ฅผ ํตํ ํ์ผ ์ ์ก
JSON API๋ก ์ด๋ฏธ์ง๋ฅผ ์ ๋ก๋ํ ๋:
{
"filename": "profile.jpg",
"content_type": "image/jpeg",
"data": "/9j/4AAQSkZJRgABAQEASABIAAD/..."
}
4. HTTP Basic ์ธ์ฆ
Authorization: Basic dXNlcm5hbWU6cGFzc3dvcmQ=
dXNlcm5hbWU6cGFzc3dvcmQ= ๋ฅผ ๋์ฝ๋ฉํ๋ฉด username:password ๊ฐ ๋ฉ๋๋ค.
5. JWT ํ ํฐ
JSON Web Token(JWT)์ ํค๋์ ํ์ด๋ก๋๋ Base64URL๋ก ์ธ์ฝ๋ฉ๋ฉ๋๋ค(URL-safe ๋ฒ์ ์ผ๋ก +โ-, /โ_).
Base64 ์ธ์ฝ๋ฉ vs ์ํธํ
์ค์ํ ์คํด๋ฅผ ์ง๊ณ ๋์ด๊ฐ๊ฒ ์ต๋๋ค. Base64๋ ์ํธํ๊ฐ ์๋๋๋ค.
| ๋น๊ต ํญ๋ชฉ | Base64 | ์ํธํ |
|---|---|---|
| ๋ชฉ์ | ํ์ ๋ณํ | ๋ฐ์ดํฐ ๋ณดํธ |
| ํค ํ์ | ์์ | ์์ |
| ๋ณต์ ๊ฐ๋ฅ | ๋๊ตฌ๋ ๋์ฝ๋ฉ ๊ฐ๋ฅ | ํค ์์ด ๋ณต์ ๋ถ๊ฐ |
| ๋ณด์์ฑ | ์์ | ๋์ |
Base64๋ก ์ธ์ฝ๋ฉ๋ ๋ฐ์ดํฐ๋ ๋๊ตฌ๋ ์ฝ๊ฒ ๋์ฝ๋ฉํ ์ ์์ต๋๋ค. ๋น๋ฐ๋ฒํธ๋ ๋ฏผ๊ฐํ ์ ๋ณด๋ฅผ Base64๋ก โ์จ๊ธด๋คโ๋ ๊ฒ์ ๋ณด์์ ์๋ฌด ์๋ฏธ๊ฐ ์์ต๋๋ค.
URL-Safe Base64
ํ์ค Base64์ +์ /๋ URL์์ ํน์ํ ์๋ฏธ๋ฅผ ๊ฐ์ง๋ฏ๋ก, URL์ Base64๋ฅผ ํฌํจ์ํฌ ๋๋ URL-Safe Base64๋ฅผ ์ฌ์ฉํฉ๋๋ค.
+โ-/โ_- ํจ๋ฉ
=โ ์๋ตํ๊ฑฐ๋%3D๋ก ์ธ์ฝ๋ฉ
JWT, OAuth ํ ํฐ, ๋ง์ ์น API์์ URL-Safe Base64๋ฅผ ์ฌ์ฉํฉ๋๋ค.
Base64 ์ธ์ฝ๋ฉ/๋์ฝ๋ฉ ๋ฐฉ๋ฒ
JavaScript
// ์ธ์ฝ๋ฉ
const encoded = btoa('Hello, World!');
console.log(encoded); // SGVsbG8sIFdvcmxkIQ==
// ๋์ฝ๋ฉ
const decoded = atob('SGVsbG8sIFdvcmxkIQ==');
console.log(decoded); // Hello, World!
Python
import base64
# ์ธ์ฝ๋ฉ
encoded = base64.b64encode(b'Hello, World!')
print(encoded) # b'SGVsbG8sIFdvcmxkIQ=='
# ๋์ฝ๋ฉ
decoded = base64.b64decode('SGVsbG8sIFdvcmxkIQ==')
print(decoded) # b'Hello, World!'
๋ช ๋ น์ค(ํฐ๋ฏธ๋)
# ์ธ์ฝ๋ฉ
echo -n "Hello, World!" | base64
# SGVsbG8sIFdvcmxkIQ==
# ๋์ฝ๋ฉ
echo "SGVsbG8sIFdvcmxkIQ==" | base64 --decode
# Hello, World!
๋ง๋ฌด๋ฆฌ
Base64๋ ๋ณต์กํ ์ํธํ ๊ธฐ์ ์ด ์๋๋ผ, ๋จ์ํ ๋ฐ์ด๋๋ฆฌ ๋ฐ์ดํฐ๋ฅผ ํ ์คํธ๋ก ๋ณํํ๋ ๋๊ตฌ์ ๋๋ค. ์ธ์ ์ฌ์ฉํด์ผ ํ๋์ง, ๊ทธ๋ฆฌ๊ณ ๋ณด์ ์ธก๋ฉด์์ ์ด๋ค ํ๊ณ๊ฐ ์๋์ง๋ฅผ ์ดํดํ๋ ๊ฒ์ด ์ค์ํฉ๋๋ค.
๋น ๋ฅด๊ฒ ํ ์คํธ๋ ํ์ผ์ Base64๋ก ๋ณํํ๊ณ ์ถ๋ค๋ฉด Base64 ์ธ์ฝ๋/๋์ฝ๋ ๋๊ตฌ๋ฅผ ์ฌ์ฉํด๋ณด์ธ์. ํ ์คํธ ์ ๋ ฅ๋ถํฐ ํ์ผ ์ ๋ก๋๊น์ง ๊ฐํธํ๊ฒ ๋ณํํ ์ ์์ต๋๋ค.