HTML 소스 코드를 열었더니 이미지 태그에 data:image/png;base64,iVBORw0KGgo...라는 긴 문자열이 들어 있다. 이건 이미지 파일을 Base64로 변환해서 텍스트로 직접 삽입한 것이다. 별도 이미지 파일 없이 HTML 하나로 이미지를 표현하는 방식이다.
Base64가 뭔가
Base64는 바이너리 데이터(이미지, 파일 등)를 A~Z, a~z, 0~9, +, / 총 64개의 문자로 바꾸는 인코딩 방식이다. 이메일처럼 텍스트만 전송할 수 있는 환경에서 이미지나 파일을 보내기 위해 만들어졌다.
예시
원본 텍스트: "안녕하세요"
Base64 인코딩: "7JWI64WV7ZWY7IS47JqU"
원본보다 약 33% 크기가 늘어나지만, 텍스트 기반 채널로 안전하게 전송할 수 있다.
Base64가 쓰이는 곳
- 이미지 Data URL : 작은 아이콘이나 로고를 HTML/CSS에 직접 삽입할 때 사용한다. HTTP 요청 수를 줄여 페이지 로딩이 빨라질 수 있다
- 이메일 첨부파일 : SMTP 프로토콜은 텍스트 기반이라 첨부 파일을 Base64로 변환해서 보낸다
- JWT 토큰 : 웹 인증에 사용되는 JWT(JSON Web Token)의 헤더와 페이로드가 Base64URL로 인코딩되어 있다
- API 인증 : HTTP Basic 인증에서 아이디:비밀번호를 Base64로 인코딩해서 헤더에 담는다
텍스트와 이미지 변환하기
텍스트를 넣으면 Base64 문자열이 나오고, 이미지를 드래그하면 Data URL이 생성되는 Base64 인코딩 도구가 있다. 인코딩과 디코딩을 전환할 수 있어서 API에서 받은 Base64 데이터를 원본으로 복원할 때도 쓸 수 있다.
텍스트 변환
- 입력창에 원본 텍스트를 넣는다
- 인코딩 버튼을 누르면 Base64 문자열이 출력된다
- 디코딩 모드로 전환하면 Base64를 원본 텍스트로 되돌릴 수 있다
이미지 변환
- 이미지 파일을 드래그 앤 드롭한다
- Data URL 형태의 Base64 문자열이 생성된다
- 이 문자열을 HTML의 img 태그 src에 넣으면 이미지가 표시된다
주의할 점
| 구분 | 내용 |
|---|---|
| 크기 증가 | Base64 변환 시 원본보다 약 33% 커진다. 큰 이미지는 파일로 서빙하는 게 낫다 |
| 보안 | Base64는 암호화가 아니라 인코딩이다. 누구나 디코딩할 수 있으므로 비밀번호를 Base64에 담으면 안 된다 |
| 캐싱 불가 | Data URL로 삽입된 이미지는 브라우저가 캐시하지 않는다. 자주 쓰는 큰 이미지에는 부적합하다 |
Base64는 암호화처럼 보이지만 단순한 인코딩일 뿐이다. 변환 원리를 알고 있으면 JWT 디버깅부터 이미지 임베딩까지 개발 중에 마주치는 여러 상황에서 도움이 된다.