개발자가 보내준 HTML 파일을 열었더니, <img> 태그의 src에 URL 대신 알파벳과 숫자가 수백 줄이나 들어 있었다. data:image/png;base64,iVBORw0KGgo...로 시작하는 이 문자열이 Base64로 인코딩된 이미지다. 별도 파일 없이 텍스트만으로 이미지를 표현하는 방식이다.
Base64가 뭔데
Base64는 바이너리 데이터를 텍스트(ASCII) 문자로 변환하는 인코딩 방식이다. 이름에서 알 수 있듯이, A-Z, a-z, 0-9, +, / 총 64개의 문자만 사용한다.
왜 굳이 변환을 할까? 이메일 프로토콜이나 JSON, HTML처럼 텍스트만 다루는 환경에서는 바이너리 파일(이미지, PDF 등)을 직접 넣을 수 없기 때문이다. Base64로 변환하면 어떤 바이너리든 텍스트 형태로 안전하게 전달할 수 있다.
어디에 쓰이나
- 이메일 첨부파일: SMTP 프로토콜은 텍스트만 전송 가능하다. 첨부파일은 Base64로 인코딩되어 메일 본문에 포함된다.
- Data URL: 작은 아이콘이나 로고를 CSS/HTML에 직접 삽입할 때 쓴다. HTTP 요청 수를 줄여서 페이지 로딩이 빨라진다.
- API 인증: HTTP Basic Authentication은
사용자:비밀번호를 Base64로 인코딩해서 헤더에 담는다. - JWT 토큰: 웹 로그인에 쓰이는 JWT의 헤더와 페이로드가 Base64URL 형식이다.
주의 Base64는 암호화가 아니다. 누구나 디코딩할 수 있기 때문에, 비밀번호나 민감한 정보를 Base64만으로 보호하면 안 된다. 전달 형식을 맞추기 위한 인코딩일 뿐이다.
용량이 33% 늘어나는 이유
Base64는 3바이트의 바이너리 데이터를 4개의 텍스트 문자로 변환한다. 원본 대비 약 33% 용량이 증가하는 구조다. 그래서 큰 이미지는 Base64보다 파일로 제공하는 게 낫고, 수 KB 이하의 작은 아이콘 정도만 Data URL로 넣는 게 실무 관행이다.
텍스트와 이미지를 변환하는 법
텍스트를 붙여넣으면 즉시 Base64 문자열이 나오고, 이미지 파일을 드래그해서 올리면 Data URL 형식의 Base64 코드가 생성되는 Base64 변환기로 양방향 변환이 가능하다. 디코딩 모드에서는 Base64 문자열을 넣으면 원본 텍스트가 복원되고, 입출력 바이트 수와 크기 증가율까지 표시해준다.
Base64는 데이터를 숨기는 게 아니라, 텍스트로 옮길 수 있게 포장하는 기술이다. 이 차이를 알면 쓸 곳과 쓰지 말아야 할 곳이 구분된다.