Base64 인코딩이란, 이미지 Data URL 변환까지

이메일 첨부 파일을 보내면 서버 내부에서는 바이너리 데이터를 텍스트로 바꿔서 전송한다. 그때 쓰이는 방식이 Base64 인코딩이다. 개발자가 아니더라도 이미지를 HTML에 직접 심거나, API 응답을 확인할 때 한 번쯤 마주치게 된다.

Base64가 쓰이는 곳

Base64는 바이너리 데이터를 A~Z, a~z, 0~9, +, / 총 64개 문자로 변환하는 방식이다. 텍스트만 전달할 수 있는 환경에서 이미지나 파일을 보내야 할 때 사용한다.

• 이메일 첨부: MIME 프로토콜에서 바이너리 파일을 텍스트로 변환
• HTML/CSS 인라인 이미지: 외부 파일 없이 이미지를 코드에 직접 삽입
• API 통신: JSON에 바이너리 데이터를 포함시킬 때
• JWT 토큰: 인증 토큰의 페이로드가 Base64로 인코딩됨

이미지를 Base64로 바꾸면

웹 페이지에서 이미지를 로드하려면 보통 별도의 이미지 파일을 서버에 올리고 URL로 연결한다. 하지만 아이콘이나 작은 이미지라면 Base64로 변환해서 HTML이나 CSS에 직접 넣는 게 HTTP 요청 수를 줄이는 방법이 된다.

참고 Base64로 변환하면 원본보다 크기가 약 33% 늘어난다. 수십 KB 이하의 작은 이미지에는 유리하지만, 큰 이미지에 적용하면 오히려 페이지가 무거워진다.

온라인 Base64 변환기에 이미지를 드래그 앤 드롭으로 올리면 Data URL이 바로 생성된다. PNG, JPG, GIF, SVG, WebP 모두 지원하고, 생성된 코드를 HTML의 <img src="...">에 바로 붙여넣을 수 있다.

텍스트 인코딩과 디코딩

이미지뿐 아니라 일반 텍스트도 Base64로 변환할 수 있다. API 응답에서 Base64로 인코딩된 데이터를 받았을 때, 디코딩하면 원본 텍스트가 나온다.

한글은 UTF-8로 먼저 바이트 변환을 거친 뒤 Base64로 인코딩된다. 디코딩할 때도 같은 과정을 역순으로 거치기 때문에 한글이 깨지지 않는다. 입력한 데이터는 브라우저에서만 처리되고 서버로 전송되지 않는다.

API 디버깅 중 Base64 문자열을 만났을 때, 콘솔을 열지 않아도 붙여넣기 한 번이면 원본을 바로 확인할 수 있다.