이메일에 첨부한 이미지가 상대방에게 깨져서 도착한 적이 있다. HTML 파일 하나에 이미지까지 합쳐서 보내고 싶은데, 외부 파일을 참조하면 경로가 틀어진다. 이런 상황에서 쓰는 게 Base64다.
Base64가 뭔가
Base64는 바이너리 데이터(이미지, 파일 등)를 텍스트 문자열로 바꾸는 인코딩 방식이다. A~Z, a~z, 0~9, +, / 이 64개 문자만 사용해서 어떤 데이터든 텍스트로 표현할 수 있다.
예시
"Hello" → Base64:SGVsbG8=
원본 5바이트 → Base64 8바이트 (약 33% 증가)
암호화가 아니다. 누구나 디코딩할 수 있다. 데이터를 텍스트로 안전하게 전달하기 위한 인코딩일 뿐이다.
어디에 쓰이나
- 이미지를 HTML/CSS에 직접 삽입
- 작은 아이콘이나 로고를 외부 파일 없이 HTML 안에 넣을 수 있다. HTTP 요청 수를 줄여서 페이지 로딩이 빨라진다.
<img src="data:image/png;base64,iVBOR..." /> - 이메일 첨부
- MIME 프로토콜에서 첨부 파일을 전송할 때 Base64로 인코딩한다. 이메일 시스템이 바이너리를 직접 처리하지 못하기 때문이다.
- API 데이터 전송
- JSON으로 파일 데이터를 보낼 때 Base64 문자열로 변환해서 넣는다. JSON은 텍스트 기반이라 바이너리를 직접 담을 수 없다.
- JWT 토큰
- 인증 토큰(JWT)의 헤더와 페이로드가 Base64URL로 인코딩되어 있다. 디코딩하면 토큰에 담긴 사용자 정보를 확인할 수 있다.
이미지를 Data URL로 변환하는 법
Data URL은 data:[MIME타입];base64,[인코딩된 데이터] 형식이다. Base64 인코딩 도구에서 이미지 탭을 선택하고 파일을 드래그 앤 드롭하면, 해당 이미지의 Data URL이 바로 생성된다. 복사해서 HTML의 img 태그 src에 넣으면 외부 파일 없이 이미지가 표시된다.
Data URL 사용 시 주의점
- 크기 제한: Base64로 변환하면 원본보다 약 33% 커진다. 큰 이미지는 HTML 파일이 무거워지므로 작은 아이콘(수 KB)에만 쓰는 게 좋다.
- 캐시 불가: 외부 이미지 파일은 브라우저가 캐시하지만, Data URL은 캐시되지 않는다. 매번 전체 데이터를 로드한다.
- 가독성: Base64 문자열이 수천 자가 되면 소스 코드 가독성이 급격히 떨어진다.
TIP 이미지 크기가 10KB 이하인 아이콘, 불릿 이미지, 간단한 SVG에 Data URL을 쓰면 HTTP 요청이 줄어들어 성능에 도움이 된다. 그 이상의 이미지는 일반 파일로 서빙하는 게 낫다.
Base64는 데이터를 텍스트로 바꿔야 할 때의 표준 도구다. 원리를 알면 이메일 첨부 문제, 이미지 삽입, API 데이터 전송에서 당황할 일이 없다.