웹 개발을 하다 보면 이미지를 별도 파일로 올리지 않고 HTML이나 CSS 안에 직접 넣어야 할 때가 있다. 이때 등장하는 게 data:image/png;base64,iVBORw0KGgo... 같은 긴 문자열이다. 이 문자열이 Base64로 인코딩된 이미지 데이터다.
Base64가 하는 일
Base64는 바이너리 데이터를 텍스트 문자(A-Z, a-z, 0-9, +, /)로 변환하는 인코딩 방식이다. 이메일, JSON, URL처럼 텍스트만 다루는 환경에서 이미지, 파일 같은 바이너리 데이터를 전송해야 할 때 사용한다.
- 입력: 어떤 데이터든 가능 (텍스트, 이미지, 파일)
- 출력: A-Z, a-z, 0-9, +, / 로만 이루어진 문자열
- 크기 변화: 원본 대비 약 33% 증가
암호화가 아니라 인코딩이므로 누구든 디코딩할 수 있다. 보안 목적이 아니라 데이터 전송 호환성을 위한 기술이다.
실무에서 쓰이는 곳
- HTML/CSS 인라인 이미지
- 아이콘처럼 작은 이미지를 Data URL로 삽입하면 HTTP 요청 수를 줄일 수 있다. 다만 파일이 크면 HTML 자체가 무거워지니 10KB 이하 이미지에만 권장된다.
- JWT 토큰
- JWT(JSON Web Token)의 헤더와 페이로드는 Base64URL로 인코딩된 JSON이다. 디코딩하면 토큰에 담긴 사용자 정보와 만료 시간을 확인할 수 있다.
- API 데이터 전송
- REST API에서 이미지나 파일을 JSON 본문에 담아 보낼 때 Base64로 인코딩한다. multipart/form-data 대신 사용하는 방식이다.
- 이메일 첨부파일
- MIME 형식의 이메일에서 첨부파일은 Base64로 인코딩되어 전송된다.
텍스트와 이미지 변환하기
텍스트를 Base64로 바꾸거나, 인코딩된 문자열을 원문으로 되돌려야 할 때 Base64 변환 도구에 붙여넣으면 바로 결과가 나온다. 이미지도 드래그해서 놓으면 Data URL 형태의 Base64 문자열이 생성되고, 반대로 Base64 문자열을 넣으면 이미지 미리보기를 볼 수 있다. 입출력 크기 비교도 표시되니 인코딩 후 용량이 얼마나 늘어나는지 확인하기 좋다.
TIP Base64URL은 일반 Base64에서 +를 -로, /를 _로 바꾼 변형이다. URL이나 파일명에 안전하게 쓸 수 있어서 JWT 같은 웹 토큰에서 표준으로 사용한다.