Base64 인코딩이란? 이미지 변환부터 JWT까지 활용법

HTML 파일 하나에 이미지까지 포함시키고 싶은데 외부 파일 경로를 쓸 수가 없다. 이럴 때 이미지를 텍스트 형태로 바꿔서 코드 안에 직접 넣는 방법이 있다. 그게 Base64 인코딩이다.

Base64가 뭔가

바이너리 데이터(이미지, 파일 등)를 텍스트로 변환하는 인코딩 방식이다. 64개의 ASCII 문자(A-Z, a-z, 0-9, +, /)만 사용해서 어떤 데이터든 텍스트로 표현할 수 있다.

변환 원리는 이렇다.

1. 원본 데이터를 3바이트씩 묶는다
2. 3바이트(24비트)를 6비트씩 4개로 나눈다
3. 각 6비트 값을 64개 문자 중 하나로 대응시킨다

3바이트가 4문자로 변하니까 크기가 약 33% 증가한다. 암호화가 아니라 단순 인코딩이므로 누구나 원래 데이터로 되돌릴 수 있다.

어디서 쓰이나

HTML 인라인 이미지

이미지를 별도 파일로 두지 않고 HTML 안에 직접 넣을 수 있다.

<img src="data:image/png;base64,iVBORw0KGgo..." />

작은 아이콘이나 로고에 쓰면 HTTP 요청 수가 줄어 로딩이 빨라진다. 다만 이미지가 크면 HTML 파일 자체가 무거워지므로 수 KB 이하의 작은 이미지에만 쓰는 게 맞다.

JWT 토큰

JWT(JSON Web Token)는 헤더, 페이로드, 서명 세 부분을 Base64로 인코딩한 뒤 점(.)으로 이어붙인 구조다. 로그인 후 서버에서 발급받는 토큰이 이런 형태다.

eyJhbGciOiJIUzI1NiJ9.eyJ1c2VyIjoiaG9uZyJ9.서명부분

가운데 부분을 디코딩하면 {"user":"hong"} 같은 JSON이 나온다. 디버깅 중 토큰 내용을 확인할 때 유용하다.

이메일 첨부파일

이메일 프로토콜(SMTP)은 원래 텍스트만 전송할 수 있다. 첨부파일을 보내려면 Base64로 인코딩해서 텍스트 형태로 변환한 뒤 전송하고, 수신 측에서 다시 디코딩한다.

API 데이터 전송

바이너리 데이터를 JSON에 담아야 할 때 Base64로 변환한다. JSON은 텍스트 형식이라 바이너리를 직접 넣을 수 없기 때문이다.

실무에서 바로 쓰기

Base64 변환 도구에서 텍스트를 입력하면 인코딩 결과가 바로 나온다. 반대로 Base64 문자열을 넣으면 원본 텍스트로 디코딩된다. 이미지 파일을 드래그해서 올리면 Data URL 형태의 Base64 코드가 생성되니까 HTML에 바로 붙여넣을 수 있다.

주의 Base64는 암호화가 아니다. 인코딩된 데이터는 누구나 쉽게 디코딩할 수 있으므로, 비밀번호나 개인정보를 Base64로 변환해서 전송하는 건 보안에 도움이 되지 않는다.

Base64는 데이터의 형태를 바꿔주는 도구일 뿐이다. 원리를 알면 JWT 디버깅부터 이미지 인라인 삽입까지 활용 범위가 넓어진다.