·1분 읽기
Base64 변환 실전 활용법 — 이미지 인코딩부터 API 인증까지
Base64 인코딩/디코딩의 실전 활용법을 정리했어요. 이미지 임베딩, API 인증, 데이터 전송 등 개발자가 꼭 알아야 할 사례들이에요.
🔤
Base64 인코더/디코더 바로 사용하기
텍스트를 Base64로 인코딩하거나 디코딩하세요
→
Base64란? 왜 쓸까?
Base64는 바이너리 데이터를 텍스트(ASCII)로 변환하는 인코딩 방식이에요. 이메일, URL, JSON처럼 텍스트만 허용하는 곳에서 이미지나 파일 데이터를 전달할 때 쓰여요.
원리는 간단해요. 3바이트(24비트)를 6비트씩 4개로 나누고, 각각을 A-Z, a-z, 0-9, +, / 총 64개 문자로 변환하는 거예요.
단점은 원본보다 약 33% 크기가 커진다는 거예요. 그래서 대용량 파일에는 적합하지 않아요.
실전 활용 1: 이미지 임베딩
CSS나 HTML에 작은 이미지를 직접 넣을 때 Base64를 써요:
background-image: url(data:image/png;base64,iVBORw0KGgo...);
HTTP 요청을 줄여서 작은 아이콘이나 로고 로딩 속도를 개선할 수 있어요. 단, 1~2KB 이하의 작은 이미지에만 추천해요.
큰 이미지는 [이미지 압축 도구](/blog/image-compression-guide-web)로 최적화하는 게 나아요.
실전 활용 2: API 인증
HTTP Basic Authentication은 username:password를 Base64로 인코딩해서 헤더에 넣어요:
Authorization: Basic dXNlcjpwYXNz
이건 암호화가 아니라 인코딩이에요! 누구나 디코딩할 수 있으니 반드시 HTTPS와 함께 사용해야 해요.
JWT 토큰의 페이로드도 Base64url로 인코딩되어 있어요. 디코딩하면 토큰에 담긴 사용자 정보를 확인할 수 있어요.
Toolkio Base64 변환기 사용법
Toolkio의 Base64 변환기는 텍스트와 파일 모두 지원해요.
텍스트 변환:
1. 인코딩할 텍스트 입력
2. Encode 또는 Decode 선택
3. 결과 복사
파일 변환:
1. 파일 드래그 앤 드롭
2. Base64 문자열 생성
3. data URI 형식으로 복사 가능
[URL 인코딩 가이드](/blog/url-encoding-decoding-guide)와 함께 알아두면 웹 개발이 편해져요.