HTML 소스코드를 보다가 data:image/png;base64,iVBORw0KGgo...로 시작하는 긴 문자열을 발견했다. 이미지 파일 대신 이 문자열이 들어가 있는데, 브라우저에서는 멀쩡하게 이미지가 보인다. 이게 Base64 인코딩이다.
Base64가 뭔가
Base64는 바이너리 데이터(이미지, 파일 등)를 텍스트 문자로 변환하는 인코딩 방식이다. A~Z, a~z, 0~9, +, / 이렇게 64개의 문자만 사용해서 모든 데이터를 표현한다.
예시 "Hello" →SGVsbG8=
"안녕하세요" →7JWI64WV7ZWY7IS47JqU
원본 데이터보다 약 33% 크기가 늘어나지만, 텍스트만 다룰 수 있는 환경에서 바이너리 데이터를 전달할 수 있게 된다.
어디에 쓰이는가
- 이메일 첨부파일
- 이메일 프로토콜(SMTP)은 원래 텍스트만 전송할 수 있다. 이미지나 문서를 첨부하면 내부적으로 Base64로 변환돼서 전송된다.
- HTML/CSS 인라인 이미지
- 작은 아이콘이나 로고를 별도 파일 없이 HTML에 직접 넣을 수 있다. HTTP 요청 수를 줄여서 페이지 로딩이 빨라지는 효과가 있다.
- API 데이터 전송
- JSON으로 이미지를 보내야 할 때 Base64 문자열로 변환해서 담는다. JSON은 텍스트 형식이라 바이너리를 직접 넣을 수 없기 때문이다.
- JWT 토큰
- 웹 인증에 쓰이는 JWT(JSON Web Token)의 페이로드가 Base64로 인코딩돼 있다. 디코딩하면 사용자 정보가 담긴 JSON이 나온다.
Base64 인코딩은 암호화가 아니다
자주 혼동하는 부분이다. Base64는 데이터 형식을 바꾸는 것이지, 보안을 위한 암호화가 아니다. 누구든 Base64 문자열을 디코딩하면 원본을 그대로 볼 수 있다. 비밀번호나 민감한 정보를 Base64로 "숨기는" 것은 의미가 없다.
이미지를 Base64로 변환하면 좋은 경우
| 상황 | Base64 사용 | 파일 사용 |
|---|---|---|
| 작은 아이콘 (1~2KB) | 유리 (HTTP 요청 절약) | 불필요한 요청 발생 |
| 큰 이미지 (100KB+) | 불리 (HTML 파일 비대해짐) | 유리 (캐싱 가능) |
| 이메일 본문 이미지 | 유리 (외부 링크 차단 우회) | 보안 정책으로 차단될 수 있음 |
텍스트를 Base64로 바꾸거나 이미지를 Data URL로 변환해야 할 때 Base64 변환기에 내용을 넣으면 된다. 이미지는 드래그 앤 드롭으로 올리면 바로 Data URL이 생성되고, 한글 텍스트도 UTF-8 처리가 자동으로 돼서 깨짐 없이 변환된다.
TIP CSS에서 배경 이미지를 Base64로 넣으면 외부 이미지 파일 의존성이 사라진다. 단, CSS 파일 크기가 커지므로 1~2KB 이하의 작은 이미지에만 쓰는 게 좋다.
Base64는 데이터를 텍스트로 옮기는 다리 역할이다. 원리를 알면 API 연동, 이메일 처리, 프론트엔드 최적화에서 왜 이걸 쓰는지 이해가 된다.