개발 중에 API 응답 값을 보면 eyJhbGciOiJIUzI1NiJ9... 같은 긴 문자열이 나올 때가 있다. JWT 토큰이다. 이걸 Base64 디코딩하면 안에 들어 있는 JSON 데이터를 읽을 수 있다.
Base64가 뭔가
Base64는 바이너리 데이터를 텍스트 문자(A-Z, a-z, 0-9, +, /)로만 표현하는 인코딩 방식이다. 3바이트(24비트)를 4개의 문자로 바꾸기 때문에 원본보다 약 33% 크기가 커지지만, 텍스트로만 데이터를 다뤄야 하는 환경에서 바이너리 파일을 안전하게 전달할 수 있다.
어디서 쓰이나
- 이메일 첨부파일 — SMTP 프로토콜은 텍스트만 전송하기 때문에 이미지나 PDF를 Base64로 변환해서 보낸다
- CSS/HTML 인라인 이미지 —
data:image/png;base64,...형태로 이미지를 HTML에 직접 삽입하면 별도 HTTP 요청 없이 표시 가능 - JWT (JSON Web Token) — 헤더와 페이로드가 Base64URL로 인코딩되어 있다. 디코딩하면 사용자 정보, 만료 시간 등을 확인 가능
- API 인증 — HTTP Basic 인증에서 "사용자명:비밀번호"를 Base64로 인코딩해서 헤더에 담는다
인코딩과 암호화는 다르다
주의 Base64는 암호화가 아니다. 누구나 디코딩할 수 있으니 비밀번호나 민감 정보를 Base64로만 처리하면 보안이 전혀 되지 않는다. 보안이 필요하면 AES, RSA 같은 암호화 알고리즘을 별도로 적용해야 한다.
텍스트·이미지 Base64 변환
자바스크립트에서는 btoa(), atob() 함수를 쓰지만, 한글처럼 멀티바이트 문자가 포함되면 에러가 나서 추가 처리가 필요하다. 코드 없이 빠르게 변환하고 싶다면 Base64 인코더에 텍스트를 붙여넣거나 이미지를 드래그하면 된다. 이미지의 경우 Data URL 형태로 변환되어 CSS background-image에 바로 쓸 수 있다.
Data URL 활용 예시
background-image: url('data:image/png;base64,iVBORw0KGgo...');작은 아이콘(1~2KB 이하)에 이 방식을 쓰면 HTTP 요청 수를 줄여 페이지 로딩 속도를 개선할 수 있다. 다만 이미지가 클수록 HTML/CSS 파일 크기가 커지니까, 큰 이미지는 별도 파일로 두는 게 낫다.
Base64 인코딩/디코딩은 개발에서 자주 마주치는 작업이다. 원리를 알아두면 JWT 디버깅, 이메일 문제 해결, 인라인 이미지 최적화에서 바로 써먹을 수 있다.