유틸리티

Base64 인코딩이란? 텍스트와 이미지 변환 방법 정리

API 응답에서 의미를 알 수 없는 긴 영문+숫자 문자열이 나왔다. 끝에 등호(=)가 하나 또는 두 개 붙어 있다면 높은 확률로 Base64 인코딩된 데이터다. 이걸 디코딩하면 원래 텍스트나 이미지가 복원된다.

Base64는 왜 쓰는 걸까

Base64는 바이너리 데이터를 텍스트 문자(A-Z, a-z, 0-9, +, /)로 변환하는 인코딩 방식이다. 이미지나 파일 같은 바이너리를 텍스트 기반 환경(이메일, JSON, HTML)에서 안전하게 전송하기 위해 쓴다.

  • 이메일 첨부파일: SMTP 프로토콜은 텍스트만 전송 가능하다. 첨부 파일은 Base64로 변환돼서 본문에 삽입된다.
  • Data URL: HTML에서 <img src="data:image/png;base64,..."> 형태로 이미지를 직접 삽입할 때 쓴다. 별도 파일 요청 없이 한 번에 로딩된다.
  • JWT 토큰: 웹 인증에 쓰이는 JWT는 Header.Payload.Signature 세 부분이 Base64URL로 인코딩돼 있다.
  • API 통신: 바이너리 파일을 JSON 필드에 담아 전송할 때 Base64 문자열로 감싼다.
주의 Base64는 암호화가 아니다. 누구나 디코딩할 수 있으므로 비밀번호나 민감 데이터를 Base64로 "숨기는" 것은 보안 효과가 없다.

텍스트 변환

Base64 변환 도구에 텍스트를 넣고 인코딩 버튼을 누르면 Base64 문자열이 나온다. 반대로 Base64 문자열을 넣고 디코딩하면 원문이 복원된다. 한글도 UTF-8로 자동 처리되니 깨질 걱정은 없다.

인코딩하면 원본 대비 약 33% 크기가 커진다. 3바이트가 4문자로 바뀌기 때문이다. 입출력 바이트 수와 증가율이 실시간으로 표시되니 용량 감안이 필요할 때 참고하면 된다.

이미지 변환

이미지 탭에서 PNG, JPG, GIF, WebP 파일을 드래그하면 Data URL 형태의 Base64 문자열이 생성된다. 이걸 CSS의 background-image나 HTML의 img src에 직접 넣으면 서버 요청 없이 이미지를 표시할 수 있다.

작은 아이콘이나 로고를 인라인으로 넣을 때 유용하지만, 큰 이미지는 HTML 파일 자체가 무거워지니까 수십 KB 이하의 파일에만 쓰는 게 좋다.