Skip to main content
KO
guide

What is Base64 Encoding? When and Why to Use It

2026-03-25 ยท 5 min read

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 ์ธ์ฝ”๋”/๋””์ฝ”๋” ๋„๊ตฌ๋ฅผ ์‚ฌ์šฉํ•ด๋ณด์„ธ์š”. ํ…์ŠคํŠธ ์ž…๋ ฅ๋ถ€ํ„ฐ ํŒŒ์ผ ์—…๋กœ๋“œ๊นŒ์ง€ ๊ฐ„ํŽธํ•˜๊ฒŒ ๋ณ€ํ™˜ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.