웹페이지 소스를 열어보면 <img src="data:image/png;base64,iVBOR..."> 같은 문자열이 보일 때가 있다. 이미지 파일을 텍스트로 바꿔 HTML에 직접 삽입한 것인데, 이때 쓰이는 변환 방식이 Base64다.
Base64가 뭔가
Base64는 바이너리 데이터를 ASCII 문자(영문 대소문자, 숫자, +, /)로 바꾸는 인코딩 방식이다. 이메일 첨부파일, API 통신, JWT 토큰 등 텍스트만 전송할 수 있는 환경에서 이미지나 파일 데이터를 실어 보낼 때 쓴다. 원본 데이터보다 약 33% 용량이 늘어나지만, 어떤 시스템에서든 깨지지 않고 전달된다는 장점이 있다.
실무에서 Base64를 쓰는 경우
- 이미지 Data URL — 작은 아이콘이나 로고를 HTML/CSS에 직접 삽입할 때. 별도 이미지 파일 요청이 줄어 로딩이 빨라진다.
- API 파일 전송 — JSON으로 이미지나 PDF를 보내야 할 때 Base64로 인코딩해서 문자열 필드에 담는다.
- JWT 토큰 — 로그인 인증에 쓰이는 JWT는 Header.Payload.Signature 구조인데, 각 부분이 Base64URL로 인코딩돼 있다.
- 이메일 첨부파일 — SMTP 프로토콜은 텍스트 기반이라 첨부파일을 Base64로 변환해 전송한다.
텍스트 인코딩과 이미지 인코딩
| 구분 | 텍스트 Base64 | 이미지 Base64 |
|---|---|---|
| 입력 | 일반 문자열 | 이미지 파일(PNG, JPG 등) |
| 출력 | Base64 문자열 | data:image/png;base64,... 형식 |
| 용도 | API 파라미터, 설정값 저장 | HTML/CSS 인라인 이미지 |
| 크기 변화 | 원본 대비 약 33% 증가 | 원본 대비 약 37% 증가(헤더 포함) |
텍스트 변환은 btoa()나 atob() 같은 JavaScript 내장 함수로 처리할 수 있지만, 한글이 포함돼 있으면 UTF-8 처리를 별도로 해줘야 해서 번거롭다.
브라우저에서 바로 변환하기
코드를 작성하지 않고 빠르게 확인만 하고 싶다면 온라인 Base64 변환기가 편하다. 텍스트 탭에서 문자열을 넣으면 인코딩, 디코딩 결과가 즉시 나오고, 이미지 탭에서는 파일을 드래그앤드롭하면 Data URL이 생성된다. 입출력 크기와 증가율도 같이 표시되니 인코딩 후 데이터가 얼마나 커지는지 바로 파악할 수 있다.
TIP 이미지를 Base64로 바꿔 HTML에 넣으면 HTTP 요청이 줄어드는 대신 HTML 파일 자체가 커진다. 일반적으로 5KB 이하의 아이콘에만 쓰고, 큰 이미지는 별도 파일로 로딩하는 게 성능에 유리하다.
Base64 자체는 암호화가 아니라 인코딩이다. 누구나 디코딩할 수 있으니 민감한 데이터를 Base64로 감추는 건 의미가 없다. 변환이 필요한 순간에 빠르게 돌려보는 용도로 쓰면 된다.