외부 API에서 받은 JSON 응답 안에 알 수 없는 긴 문자열이 들어 있다. 영문 대소문자와 숫자, 슬래시, 플러스 기호로만 이루어져 있고 끝에 등호(=)가 하나 붙어 있다. 이게 Base64다.
Base64가 뭔가
Base64는 바이너리 데이터를 텍스트로 표현하는 인코딩 방식이다. 이미지, 파일, 바이트 배열처럼 텍스트가 아닌 데이터를 이메일, JSON, HTML 같은 텍스트 기반 포맷에 실어 보내야 할 때 쓴다.
64개의 문자(A-Z, a-z, 0-9, +, /)만 사용하기 때문에 어떤 시스템에서든 깨지지 않고 전달된다. 대신 원본보다 용량이 약 33% 증가한다는 단점이 있다.
어디에 쓰이나
| 사용처 | 활용 방식 |
|---|---|
| 이메일 첨부파일 | MIME 인코딩으로 바이너리 파일을 텍스트로 변환해 전송 |
| HTML/CSS 인라인 이미지 | data:image/png;base64,... 형태로 이미지를 코드에 직접 삽입 |
| API 인증 | HTTP Basic Auth에서 아이디:비밀번호를 Base64로 인코딩해 헤더에 포함 |
| JWT 토큰 | 헤더와 페이로드가 Base64URL로 인코딩되어 있음 |
| 데이터 저장 | 바이너리를 텍스트 DB 필드에 저장할 때 |
텍스트 Base64 변환
"Hello, 안녕하세요"를 Base64로 인코딩하면 SGVsbG8sIOyViOuFle2VmOyEuOyalA==가 된다. 역으로 이 문자열을 디코딩하면 원래 텍스트가 그대로 복원된다.
주의 Base64는 암호화가 아니다. 누구나 디코딩할 수 있으므로 비밀번호나 개인정보를 Base64로 '숨기는' 것은 보안에 전혀 도움이 되지 않는다.
이미지를 Data URL로 변환하기
작은 아이콘이나 로고를 HTML에 직접 넣고 싶을 때 Data URL이 유용하다. 이미지를 Base64로 변환하면 별도 파일 요청 없이 코드 안에 이미지가 들어간다.
<img src="data:image/png;base64,iVBORw0KGgo..." alt="로고">HTTP 요청 수가 줄어들어 소규모 이미지에서는 로딩 속도가 빨라진다. 다만 이미지가 크면 HTML 파일 자체가 무거워지니, 보통 10KB 이하 파일에만 쓰는 게 좋다. Base64 변환기의 이미지 탭에 파일을 끌어다 놓으면 Data URL이 바로 생성되고, 파일 크기와 문자 수까지 표시되니 기준 초과 여부를 판단하기 쉽다.
Base64 vs Base64URL
표준 Base64에는 +와 /가 포함되는데, 이 문자들은 URL에서 특별한 의미를 가진다. 그래서 URL에서 안전하게 쓸 수 있도록 +를 -로, /를 _로 바꾼 것이 Base64URL이다. JWT 토큰이 대표적인 Base64URL 사용 사례다.
자주 묻는 질문
Base64 인코딩하면 용량이 얼마나 늘어나나요?
원본 대비 약 33% 증가한다. 3바이트를 4개 문자로 표현하기 때문이다. 1MB 파일이면 약 1.33MB가 된다.
큰 이미지도 Base64로 변환해서 쓸 수 있나요?
기술적으로는 가능하지만, 실용적이지 않다. Base64로 인코딩하면 용량이 33% 늘어나고, HTML 파일이 무거워져 오히려 로딩이 느려진다. 아이콘, 작은 UI 요소 정도에만 쓰는 게 적절하다.
Base64와 암호화의 차이는 뭔가요?
Base64는 데이터 표현 방식일 뿐 보안 기능이 없다. 키 없이 누구나 원본으로 되돌릴 수 있다. 데이터를 보호하려면 AES, RSA 같은 암호화 알고리즘을 별도로 적용해야 한다.
Base64는 웹 개발에서 매일 마주치면서도 정확히 뭔지 설명하기 어려운 개념 중 하나다. 원리를 한 번 이해해두면 API 응답 해석부터 인라인 이미지 삽입까지, 필요한 순간에 바로 써먹을 수 있다.