이메일 첨부 파일이 원래 바이너리 데이터인데, 텍스트 기반 프로토콜(SMTP)을 통해 전송된다. 바이너리를 텍스트로 바꿔주는 게 Base64의 역할이다. 개발을 하다 보면 이 변환이 필요한 순간이 생각보다 자주 온다.
Base64가 뭔가
Base64는 바이너리 데이터를 A~Z, a~z, 0~9, +, / 총 64개 문자로 표현하는 인코딩 방식이다. 암호화가 아니라 형식 변환이라서, 디코딩하면 원본 그대로 복원된다.
핵심 Base64는 보안 목적이 아니다. 텍스트만 전달할 수 있는 환경에서 이미지나 파일 같은 바이너리 데이터를 실어 보내기 위한 포장 방법이다.
실제로 어디에 쓰이나
- 이메일 첨부: SMTP는 텍스트만 전송 가능하므로, 첨부 파일을 Base64로 변환해서 보낸다
- HTML/CSS 내장 이미지: 작은 아이콘을
data:image/png;base64,...형태로 HTML에 직접 삽입하면 HTTP 요청을 줄일 수 있다 - JWT 토큰: Header와 Payload가 Base64URL로 인코딩돼 있어서, 디코딩하면 토큰 내용을 확인할 수 있다
- API 인증: HTTP Basic Authentication에서 사용자명:비밀번호를 Base64로 인코딩해서 헤더에 넣는다
Base64의 단점
Base64로 변환하면 원본보다 크기가 약 33% 늘어난다. 3바이트가 4바이트로 변환되기 때문이다. 큰 이미지를 Base64로 HTML에 넣으면 오히려 페이지 로딩이 느려질 수 있다.
| 원본 크기 | Base64 변환 후 | 증가율 |
|---|---|---|
| 1KB | 약 1.33KB | +33% |
| 10KB | 약 13.3KB | +33% |
| 100KB | 약 133KB | +33% |
그래서 아이콘이나 작은 SVG(수 KB 이하)는 Base64로 인라인 처리해도 괜찮지만, 사진 같은 큰 파일은 별도 URL로 로드하는 게 낫다.
JWT 토큰 내용이 궁금하거나, API 디버깅 중 Base64 문자열을 해석해야 할 때 Base64 변환기에 붙여넣으면 바로 디코딩된다. 반대로 이미지를 드래그해서 놓으면 Data URL 형식의 Base64 코드가 나오니까, HTML에 직접 넣을 때도 쓸 수 있다.