웹 개발을 하다 보면 Base64라는 단어를 종종 접하게 된다. 특히 이미지나 파일을 다룰 때 혹은 토큰을 디코딩할 때 주로 쓰이는데, Base64가 정확하게 무엇이고, 왜 필요한지, 어디에 쓰이는지 공부해보았다.
📘 Base64란?
Base64는 바이너리 데이터를 텍스트로 변환하는 인코딩 방식이다.
우리가 컴퓨터에서 다루는 데이터는 대부분 바이너리(0과 1)로 이루어져 있다. 그런데 이 바이너리 데이터를 이메일이나 웹 요청 등 텍스트 기반 시스템으로 전송하려면 문제가 생길 수 있다. 모든 시스템이 바이너리를 그대로 이해하지는 못하기 때문인데, 바이너리 데이터를 문자로 변환해서 안전하게 전송할 수 있도록 만든 방식이 바로 Base64이다.
🤔 왜 '64'일까?
Base64는 아래의 64개 문자를 사용해서 데이터를 표현한다:
A–Z, a–z, 0–9, +, /총 26(대문자) + 26(소문자) + 10(숫자) + 2(기호) = 64가지 문자를 이용해 데이터를 표현하는 방식이라 Base64라고 부른다.
🔄 어떻게 작동할까?
간단히 작동 방식을 살펴보자:
- 먼저 데이터를 3바이트(24비트)씩 끊는다.
- 24비트를 6비트씩 4개의 그룹으로 나눈다.
- 이 6비트를 정수로 보고, 64개의 문자 중 하나로 매핑한다.
예를 들어, Man이라는 문자열을 Base64로 변환하면 다음과 같은 결과가 나온다:
| 문자 | ASCII | 2진수(8비트) |
|---|---|---|
| M | 77 | 01001101 |
| a | 97 | 01100001 |
| n | 110 | 01101110 |
총 24비트 데이터를 6비트씩 나누면:
010011 010110 000101 101110
→ 19 22 5 46
→ T W F uMan → TWFu🧠 ‘Man’ → ‘TWFu’? 왜 변환하는 거지?
여기까지 봤을때 “문자열 ‘Man’도 이미 텍스트인데 왜 또 이상한 문자(TWFu)로 바꿔야 해?” 라는 의문이 들 수 있다.
Man은 사람이 보기엔 이미 문자지만, 컴퓨터 입장에선 0과 1로 된 바이너리 데이터이다. Base64는 이 바이너리 데이터를 모든 환경에서 깨지지 않도록 안전한 텍스트로 인코딩하는 것이 핵심이다.
💡 언제 사용될까? (활용 예시)
1. 이미지 인라인 처리 (Data URI)
웹에서 이미지를 Base64로 인코딩하면 이미지 파일을 따로 저장하지 않고 HTML이나 CSS 안에 바로 삽입할 수 있다.
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA..." />2. 인증 토큰 (JWT)
JWT(JSON Web Token)은 사용자의 인증 정보를 담고 있는 토큰으로, 내부 정보가 Base64로 인코딩되어 있다.
eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9. // Header (Base64)
eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6... // Payload (Base64)
Base64로 인코딩된 값은 누구나 디코딩할 수 있으며, 암호화된 것은 아니기 때문에 보안 정보는 포함시키면 안 된다는 점 주의!
3. 이메일 첨부파일
이메일 시스템은 기본적으로 텍스트 기반이기 때문에, 첨부파일(이미지, 문서 등)은 Base64로 인코딩해서 전송된다.
🖼️ 이미지나 오디오가 어떻게 Base64 문자열로 바뀌는 걸까?
위에서 문자를 Base64로 변환하는 방법은 살펴봤는데, 이미지나 오디오와 같은 미디어 파일은 어떻게 Base64 문자열로 변환되는 것인지 궁금해졌다.
여기서 핵심은 모든 파일은 결국 0과 1로 이루어진 '바이너리 데이터'라는 점이다.
✅ 모든 파일은 결국 '바이트(byte)' 덩어리
이미지, 오디오, PDF, 문서 등 어떤 파일이든 컴퓨터 안에선 0과 1로 된 데이터다. 이진 데이터(바이너리)를 8자리 단위(8비트 = 1바이트)로 저장한다.
예를 들어, 어떤 이미지 파일이 아래처럼 저장되어 있다고 했을때:
11001010 01101100 11110000 10101010 ...이건 우리가 보기엔 "의미 없는 숫자"지만, 컴퓨터는 이걸 "이건 JPEG 이미지야" 또는 "이건 MP3 음원이야"라고 해석할 수 있다.
⚠️ 함께 알아두면 좋은 개념
🔐 Base64는 "암호화"가 아니다!
Base64는 인코딩(Encoding)이다. 즉, 데이터의 형태를 바꾸는 것일 뿐, 보안을 위한 암호화(Encryption)는 아니다.
누구나 쉽게 디코딩할 수 있으니 민감한 정보는 Base64로 인코딩만 해서는 안 된다.
🛠 디코딩(Decoding)
Base64로 인코딩된 데이터를 다시 원래 데이터로 바꾸는 것을 디코딩이라고 한다.
JavaScript에서는 atob() 함수로 디코딩, btoa() 함수로 인코딩할 수 있다.
btoa("hello"); // aGVsbG8=
atob("aGVsbG8="); // hello✍️ 마무리
Base64는 텍스트 기반 시스템에서 바이너리 데이터를 안전하게 전송하기 위한 방식이며, 이미지, 파일, 인증 토큰 등 다양한 곳에서 쓰인다.
Base64는 64개의 문자로 구성된 인코딩 방식- 주로 웹 요청, 이메일, 이미지 처리, 토큰 등에 활용
- 보안 목적이 아니므로 민감한 데이터는 적절한 암호화와 함께 사용해야 함
