Base64 인코딩이란? 텍스트와 이미지 변환 원리, 활용법

웹페이지 소스를 열었더니 <img src="data:image/png;base64,iVBORw0KGgo..."> 같은 끝도 없이 긴 문자열이 들어 있다. 이미지 파일 경로 대신 이런 코드가 박혀 있는 이유가 뭘까. 이게 바로 Base64 인코딩이다.

Base64가 뭔가

Base64는 바이너리 데이터(이미지, 파일, 특수문자 등)를 영문 대소문자(A-Z, a-z), 숫자(0-9), +, / 총 64개 문자로만 표현하는 인코딩 방식이다. 원래 데이터 3바이트를 4글자로 변환하기 때문에, 인코딩 후 크기가 약 33% 늘어난다.

핵심 개념 Base64는 암호화가 아니다. 누구나 디코딩하면 원본을 볼 수 있다. 목적은 보안이 아니라 "텍스트만 통과할 수 있는 경로에서 바이너리 데이터를 안전하게 전달하는 것"이다.

어디에 쓰이는가

• 이메일 첨부파일: SMTP 프로토콜은 텍스트만 전송할 수 있어서, 첨부 파일을 Base64로 변환해서 보낸다
• HTML/CSS 이미지 삽입: 아이콘처럼 작은 이미지를 Data URL로 직접 넣으면 HTTP 요청 횟수를 줄일 수 있다
• API 통신: JSON으로 이미지나 파일 데이터를 주고받을 때 Base64 문자열로 감싸서 전달한다
• JWT 토큰: 헤더와 페이로드가 Base64URL로 인코딩되어 있다

Base64와 Base64URL의 차이

일반 Base64의 +와 /는 URL에서 특수한 의미를 가지기 때문에, URL 안에 Base64를 넣어야 할 때는 Base64URL 방식을 쓴다.

이미지를 Base64로 바꾸면 좋은 경우

모든 이미지를 Base64로 넣으면 오히려 느려진다. 파일 크기가 33% 커지고, 브라우저 캐시도 안 되기 때문이다. 효과가 있는 건 이런 경우다.

• 1~2KB짜리 아이콘이나 불릿 이미지
• 이메일 템플릿에 로고를 직접 삽입해야 할 때
• 외부 이미지 호스팅 없이 HTML 파일 하나로 완결해야 할 때

반대로 수십 KB 이상 사진이면 일반 이미지 파일로 두는 게 낫다.

텍스트와 이미지 변환하기

터미널에서 echo -n "텍스트" | base64 명령어로도 가능하지만, 이미지까지 처리하려면 번거롭다. Base64 변환기를 쓰면 텍스트는 입력 즉시, 이미지는 드래그 앤 드롭으로 바로 Data URL이 생성된다. PNG, JPG, GIF, SVG, WebP 모두 지원되고, 입출력 바이트 수와 크기 증가율까지 표시되니까 용량 판단도 할 수 있다.

Base64는 개발하면서 자주 마주치지만 정작 원리를 따져보는 경우는 드물다. "텍스트로만 데이터를 보내야 하는 상황에서 바이너리를 안전하게 감싸는 방법", 이 한 문장이면 충분하다.