HTML 코드 안에 이미지를 별도 파일 없이 직접 넣을 수 있다는 걸 아는 개발자는 많지만, 그게 어떻게 가능한지 설명하라고 하면 막히는 경우가 있다. 답은 Base64 인코딩이다. 바이너리 데이터(이미지, 파일)를 텍스트 문자열로 바꾸는 방식인데, 웹 개발에서 생각보다 자주 마주친다.
Base64가 뭔가
Base64는 바이너리 데이터를 A-Z, a-z, 0-9, +, / 총 64개 문자로 표현하는 인코딩 방식이다. 원본 데이터 3바이트를 4개 문자로 변환하기 때문에 결과물은 원본보다 약 33% 커진다.
예시
원본 텍스트:Hello
Base64 결과:SGVsbG8=
끝에 붙는=은 패딩 문자로, 바이트 수가 3의 배수가 아닐 때 채워진다.
어디에 쓰는가
- HTML/CSS 인라인 이미지
<img src="data:image/png;base64,iVBOR...">형태로 이미지를 HTML에 직접 삽입한다. 작은 아이콘이나 로고에 쓰면 HTTP 요청 수를 줄일 수 있다.- 이메일 첨부파일
- 이메일 프로토콜(SMTP)은 텍스트만 전송한다. 이미지나 문서를 보내려면 Base64로 변환해서 텍스트 형태로 실어 보낸다.
- API 데이터 전송
- JSON은 바이너리를 직접 담을 수 없다. 파일이나 이미지를 API로 보낼 때 Base64 문자열로 변환해서 JSON 필드에 넣는 방식이 흔하다.
- JWT 토큰
- JSON Web Token의 헤더와 페이로드는 Base64URL로 인코딩되어 있다. JWT를 디코딩하면 어떤 정보가 담겨 있는지 확인할 수 있다.
텍스트와 이미지 변환하는 법
Base64 변환기에 텍스트를 입력하거나 이미지를 드래그해서 놓으면 된다. 텍스트는 인코딩/디코딩 버튼으로 양방향 변환이 가능하고, 이미지는 Data URL 형태(data:image/png;base64,...)로 바로 생성된다. 결과를 복사해서 HTML이나 CSS에 붙여넣으면 끝이다.
Base64 vs Base64URL
| 항목 | Base64 | Base64URL |
|---|---|---|
| 특수 문자 | +, / | -, _ |
| 패딩 | = 사용 | = 생략 가능 |
| URL 안전 | X (+ 와 /가 URL에서 의미 있음) | O |
| 대표 사용처 | 이메일, 이미지 삽입 | JWT, URL 파라미터 |
URL이나 파일명에 Base64를 쓸 때는 +와 /가 문제를 일으킬 수 있다. 이 경우 Base64URL을 써야 안전하다.
주의 Base64는 인코딩이지 암호화가 아니다. 누구든 디코딩하면 원본을 볼 수 있다. 민감한 데이터를 Base64로 "숨기는" 건 보안에 전혀 도움이 안 된다.
Base64는 데이터를 텍스트로 옮겨야 할 때 쓰는 변환 도구다. 암호화와 혼동하지 않는 것만 기억하면 실무에서 헤매지 않는다.