← 블로그 목록

Base64와 URL 인코딩 완벽 정리: 원리부터 실무까지

데이터 인코딩의 기본 개념, Base64 인코딩/디코딩, URL 인코딩의 차이와 활용법을 정리했습니다.

인코딩, 왜 필요한가?

컴퓨터는 0과 1로 모든 데이터를 표현합니다. 하지만 사람이 읽을 수 있는 텍스트, 이미지, 파일 등은 어떻게 전송하고 저장할까요? 이때 필요한 것이 "인코딩(Encoding)"입니다.

인코딩은 한 형식의 데이터를 다른 형식으로 변환하는 과정입니다. 가장 많이 사용되는 두 가지가 Base64 인코딩URL 인코딩입니다.

1부: Base64 인코딩

Base64란?

Base64는 이진 데이터를 ASCII 텍스트

사용되는 64개 문자

A~Z (26자)
a~z (26자)
0~9 (10자)
+ (1자)
/ (1자)
= (패딩용)

합계: 64개

Base64 인코딩 원리

8비트 데이터를 6비트씩 묶어서 변환합니다:

원본 텍스트: "A"
바이너리: 01000001

6비트씩 재정렬: 010000 01(0000) → 패딩 추가
010000 = 16 → Q
010000 = 16 → Q
0000 (4비트, 2비트 패딩) = 0 → A
= (패딩)

결과: QQ==

구체적인 예시

원본: "Hello"
바이너리:
H = 01001000
e = 01100101
l = 01101100
l = 01101100
o = 01101111

6비트씩 재정렬:
010010 001011 001001 101100 011011 000110 1111(00)

십진수: 18, 11, 9, 44, 27, 6, 60 (패딩: 61, 61)
Base64 테이블: S, L, J, s, b, G, 8, =, =

결과: SGVsbG8=

Base64 인코딩 사용처

1. 이메일 첨부파일

MIME (Multipurpose Internet Mail Extensions) 프로토콜에서 바이너리 파일을 텍스트로 변환하여 이메일로 전송:

From: sender@example.com
To: receiver@example.com
...
--boundary
Content-Type: image/png; name="photo.png"
Content-Transfer-Encoding: base64

iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNk+M9QDwADhgGAWjR9awAAAABJRU5ErkJggg==

2. 데이터 URI 스킴

HTML에서 이미지를 직접 임베드:

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

3. API 인증 (Basic Auth)

REST API에서 사용자명:비밀번호를 Base64로 인코딩하여 전송:

Authorization: Basic dXNlcm5hbWU6cGFzc3dvcmQ=
// "username:password"를 Base64 변환

4. JWT (JSON Web Token)

토큰의 Header와 Payload를 Base64로 인코딩:

eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.
eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiaWF0IjoxNTE2MjM5MDIyfQ.
SflKxwRJSMeKKF2QT4fwpMeJf36POk6yJV_adQssw5c

Base64 인코딩의 특징

장점

  • 호환성: 모든 텍스트 기반 시스템에서 사용 가능
  • 안전성: 특수문자 없음 (이메일 등에서 안전)
  • 표준화: RFC 4648로 표준화됨

단점

  • 용량 증가: 원본의 약 33% 더 큼 (6비트→8비트)
  • 속도: 인코딩/디코딩에 CPU 사용
  • 보안 아님: 인코딩 ≠ 암호화

Base64 예시

원본Base64
Hello WorldSGVsbG8gV29ybGQ=
한글7ZWc6riA
12345MTIzNDU=
{"key":"value"}eyJrZXkiOiJ2YWx1ZSJ9

2부: URL 인코딩

URL 인코딩이란?

URL 인코딩 (또는 Percent Encoding)은 URL에 포함된 특수문자를 %로 시작하는 16진수로 변환하는 방식입니다.

URL 인코딩이 필요한 이유

URL은 정해진 문법을 가지고 있습니다. 예를 들어 ?, &, = 같은 문자는 URL 구문에 특별한 의미를 가지기 때문에, 데이터에 포함되면 혼동을 초래합니다:

잘못된 URL:
https://search.example.com?q=Hello World

올바른 URL:
https://search.example.com?q=Hello%20World

URL 인코딩 규칙

인코딩되지 않는 문자 (안전한 문자)

A-Z, a-z, 0-9
- _ . ~
이 문자들은 그대로 사용됨

인코딩되는 문자 (예약 문자)

! # $ % & ' ( ) * + , / : ; = ? @ [ ]
: → %3A
/ → %2F
? → %3F
& → %26
= → %3D
공백 → %20

URL 인코딩 예시

원본: "Hello World"
인코딩: "Hello%20World"

원본: "user@example.com"
인코딩: "user%40example.com"

원본: "한글/테스트?query=값&flag=1"
인코딩: "%ED%95%9C%EA%B8%80%2F%ED%85%8C%EC%8A%A4%ED%8A%B8%3Fquery%3D%EA%B0%92%26flag%3D1"

URL 인코딩 사용처

1. 검색 쿼리

https://www.google.com/search?q=파이썬%20튜토리얼

2. POST 데이터 (application/x-www-form-urlencoded)

name=John%20Doe&email=john%40example.com&phone=%2B82-10-1234-5678

3. 파일 경로

https://example.com/files/My%20Document%202024.pdf

4. API 매개변수

POST /api/users
Content-Type: application/x-www-form-urlencoded

username=john_doe&password=P%40ss123%26Secret

Base64 vs URL 인코딩

비교표

항목Base64URL 인코딩
목적바이너리 → 텍스트URL 안전한 텍스트
사용 문자A-Za-z0-9+/=%XX (16진수)
용량 증가약 33% 증가불규칙 (한글은 9배)
주 용도파일, 이메일, APIURL, 폼 데이터
가독성낮음중간 (영문은 높음)
URL 안전No (+, / 문제)Yes

선택 기준

  • Base64: 바이너리 데이터, 이메일, API 응답
  • URL 인코딩: URL 쿼리 문자열, 폼 데이터

실무 활용

JavaScript에서 Base64

// 인코딩
const encoded = btoa("Hello World");
console.log(encoded); // SGVsbG8gV29ybGQ=

// 디코딩
const decoded = atob("SGVsbG8gV29ybGQ=");
console.log(decoded); // Hello World

// 한글은 먼저 UTF-8로 변환 필요
const korean = "안녕하세요";
const encoded = btoa(unescape(encodeURIComponent(korean)));
const decoded = decodeURIComponent(escape(atob(encoded)));

JavaScript에서 URL 인코딩

// 인코딩
const encoded = encodeURIComponent("Hello World?");
console.log(encoded); // Hello%20World%3F

// 디코딩
const decoded = decodeURIComponent("Hello%20World%3F");
console.log(decoded); // Hello World?

Python에서 Base64

import base64

# 인코딩
text = "Hello World"
encoded = base64.b64encode(text.encode()).decode()
print(encoded)  # SGVsbG8gV29ybGQ=

# 디코딩
decoded = base64.b64decode(encoded).decode()
print(decoded)  # Hello World

Python에서 URL 인코딩

from urllib.parse import quote, unquote

# 인코딩
text = "Hello World?"
encoded = quote(text)
print(encoded)  # Hello%20World%3F

# 디코딩
decoded = unquote(encoded)
print(decoded)  # Hello World?

인코딩 도구 활용

Base64 변환기

Base64 변환기를 사용하면:

  • 텍스트 ↔ Base64 양방향 변환
  • 파일 인코딩/디코딩 (이미지 포함)
  • 대량 데이터 처리
  • 실시간 결과 확인

URL 인코더/디코더

URL 인코더/디코더를 사용하면:

  • URL 쿼리 문자열 인코딩
  • 폼 데이터 인코딩
  • 특수문자 자동 변환
  • 한글, 이모지 등 특수 문자 처리

자주 하는 실수

1. Base64를 암호화로 착각

❌ "Base64로 암호화하면 안전하다"

✅ Base64는 인코딩일 뿐, 누구나 디코딩 가능합니다. 보안이 필요하면 AES, RSA 등의 암호화를 사용하세요.

2. URL에 Base64 사용

❌ "Base64는 텍스트니까 URL에 사용 가능"

Base64의 +/ 문자가 URL 쿼리에서 문제가 될 수 있습니다.

✅ URL에는 URL 인코딩을 사용하거나, Base64-URL Safe 버전을 사용하세요.

3. 한글 인코딩 실패

❌ JavaScript btoa()로 직접 한글 인코딩

// 오류 발생!
btoa("한글");  // DOMException

✅ UTF-8로 먼저 변환 후 인코딩

4. 인코딩 중복

❌ Base64 → URL 인코딩 → 다시 디코딩할 때 순서 무시

✅ 인코딩한 순서의 역순으로 디코딩하세요

마무리

Base64 인코딩과 URL 인코딩은 웹 개발의 필수 개념입니다. 각각의 용도를 정확히 이해하면 API 개발, 데이터 전송, 파일 처리 등에서 문제 없이 작업할 수 있습니다.

Base64 변환기URL 인코더/디코더로 실시간으로 변환을 테스트해보세요!