프론트엔드 코드를 보다가 이미지 src에 data:image/png;base64,iVBORw0KGgo... 같은 긴 문자열이 들어있는 걸 본 적 있을 것이다. 이게 Base64로 인코딩된 이미지다. 별도 파일 없이 HTML이나 CSS 안에 이미지 데이터를 직접 넣는 방식인데, 어떤 원리로 동작하는지 모르면 코드가 이상해 보일 수밖에 없다.
Base64가 뭔가
Base64는 바이너리 데이터를 ASCII 문자 64개(A-Z, a-z, 0-9, +, /)로 표현하는 인코딩 방식이다. 원래 바이너리(0과 1)로 이루어진 데이터를 텍스트만 전송할 수 있는 환경에서 안전하게 보내기 위해 만들어졌다.
3바이트(24비트)를 6비트씩 4개로 쪼개서 각각을 문자 하나에 대응시킨다. 그래서 원본보다 크기가 약 33% 증가한다. "Hello"(5바이트)를 인코딩하면 "SGVsbG8="(8글자)가 된다.
어디에 쓰이나
| 활용처 | 이유 | 예시 |
|---|---|---|
| 이메일 첨부파일 | SMTP는 텍스트만 전송 가능 | MIME 인코딩 |
| 이미지 Data URL | HTTP 요청 수 줄임 | data:image/png;base64,... |
| JWT 토큰 | JSON을 URL 안전하게 전달 | Header.Payload.Signature |
| API 인증 | Basic Auth 헤더 | Authorization: Basic dXNlcjpwYXNz |
| XML/JSON 내 바이너리 | 텍스트 포맷에 바이너리 삽입 | 인증서, 키 데이터 |
이미지를 Base64로 바꾸면 좋은 경우
아이콘이나 로고처럼 크기가 작은 이미지(수 KB 이하)는 Base64로 변환해서 CSS에 넣으면 HTTP 요청이 줄어든다. 외부 파일을 로드하는 대신 코드 자체에 이미지가 포함되니까 초기 렌더링이 빨라진다.
반대로 수십 KB 이상의 이미지는 Base64로 넣으면 HTML/CSS 파일 크기가 커져서 오히려 느려진다. 캐싱도 안 되니까 큰 이미지는 일반 파일로 두는 게 맞다.
기준 일반적으로 5KB 이하의 이미지만 Data URL로 변환하고, 그 이상은 별도 파일로 관리하는 게 성능상 유리하다.
텍스트와 이미지 변환하기
개발 중에 Base64 문자열을 디코딩해서 내용을 확인하거나, 이미지를 Data URL로 변환해야 할 때가 있다. Base64 온라인 변환기에 텍스트를 넣으면 즉시 인코딩/디코딩 결과가 나오고, 이미지 탭에서는 파일을 드래그 앤 드롭하면 Data URL이 생성된다. 변환이 브라우저 안에서만 처리되기 때문에 민감한 데이터를 서버에 보내지 않아도 된다.
Base64URL은 뭐가 다른가
표준 Base64에서 쓰는 +와 /는 URL에서 특수한 의미를 가진다. 그래서 URL이나 파일명에 쓸 때는 이 두 문자를 -와 _로 바꾼 변형이 Base64URL이다. JWT 토큰이 이 방식을 쓴다.
표준 Base64: SGVsbG8gV29ybGQ+Pw==
Base64URL: SGVsbG8gV29ybGQ-Pw패딩 문자(=)도 생략하는 경우가 많다. JWT를 직접 파싱할 때 이 차이를 모르면 디코딩이 실패할 수 있으니 주의해야 한다.
Base64는 암호화가 아니다. 누구나 디코딩할 수 있으니까 민감한 정보를 Base64로만 감싸서 보내면 안 된다. 데이터 전송 포맷일 뿐이라는 점만 기억하면 된다.