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

API 응답에서 "SGVsbG8gV29ybGQ=" 같은 문자열이 나왔다. 암호화된 건 아니고, Base64로 인코딩된 텍스트다. 디코딩하면 "Hello World"가 된다. 개발 중에 이런 형태를 자주 마주치게 되는데, 원리를 알면 어렵지 않다.

Base64가 뭔지

Base64는 바이너리 데이터를 텍스트 형태로 변환하는 인코딩 방식이다. A~Z, a~z, 0~9, +, / 총 64개 문자만 사용해서 어떤 데이터든 텍스트로 표현한다. 끝에 붙는 =는 패딩(길이 맞추기)이다.

암호화가 아니라 표현 형식 변환이다. 누구나 디코딩할 수 있으므로 보안 목적으로는 쓸 수 없다.

Base64를 쓰는 이유

텍스트만 전송할 수 있는 경로에 바이너리 데이터(이미지, 파일 등)를 보내야 할 때 쓴다.

• 이메일 첨부파일 — SMTP 프로토콜은 텍스트만 전송 가능하다. 첨부 파일은 Base64로 변환되어 이메일 본문에 삽입된다.
• HTML 인라인 이미지 — data:image/png;base64,... 형태로 이미지를 HTML에 직접 넣을 수 있다. 별도 이미지 파일 요청이 없어져서 로딩이 빨라진다.
• API 데이터 전송 — JSON에는 바이너리를 직접 넣을 수 없다. 파일이나 인증 정보를 Base64로 인코딩해서 문자열로 전송한다.
• JWT 토큰 — JWT의 헤더와 페이로드는 Base64URL로 인코딩되어 있다. 디코딩하면 토큰에 담긴 정보(사용자 ID, 만료 시간 등)를 읽을 수 있다.

텍스트 변환과 이미지 변환

텍스트 Base64 변환

텍스트를 입력하면 Base64 문자열이 나오고, 반대로 Base64 문자열을 넣으면 원본 텍스트가 복원된다. Base64 변환 도구에서 양방향 변환이 가능하고, 입출력 크기 변화율도 같이 표시된다.

이미지 Base64 변환

이미지 파일을 드래그해서 놓으면 data:image/png;base64,... 형태의 Data URL이 생성된다. 이걸 HTML의 img 태그 src에 넣으면 별도 이미지 파일 없이 이미지가 표시된다.

주의 Base64 인코딩은 원본 대비 약 33% 크기가 증가한다. 3바이트를 4글자로 변환하기 때문이다. 큰 이미지를 Base64로 HTML에 넣으면 페이지 크기가 크게 늘어나므로, 아이콘이나 소형 이미지에만 쓰는 게 적합하다.

Base64는 암호화가 아니라 변환이다. 이 구분만 명확하면 개발 중에 헷갈릴 일이 없다.