Base64와 URL 인코딩이란 - 원리, 차이, 한글 처리, data URI

인코딩 가이드

Base64와 URL 인코딩,
왜 필요하고 어떻게 다른가

둘 다 특수문자나 바이너리를 안전한 문자로 바꾸는 방법입니다. 원리와 차이, 한글 처리 방식을 정리했습니다.

Base64 / URL 인코더 바로 사용하기

API를 다루거나 웹 개발을 하다 보면 SGVsbG8= 같은 Base64 문자열이나 %ED%95%9C%EA%B8%80 같은 URL 인코딩을 자주 만납니다. 둘 다 "그냥 두면 깨지는 데이터"를 안전한 문자로 바꾸는 방법인데, 쓰이는 곳과 방식이 다릅니다.

Base64란

Base64는 바이너리 데이터(이미지, 파일, 또는 어떤 바이트든)를 영문 대소문자, 숫자, +, / 이렇게 64가지 문자만으로 표현하는 방법입니다.

이메일 본문, JSON, HTTP 헤더처럼 텍스트만 담을 수 있는 곳에 바이너리를 넣어야 할 때 사용합니다. 원리는 이렇습니다.

1. 3바이트 묶기	원본을 3바이트(24비트)씩 끊습니다.
2. 6비트로 재분할	24비트를 6비트씩 4조각으로 나눕니다.
3. 문자로 치환	각 6비트(0에서 63)를 Base64 문자표의 글자로 바꿉니다.
4. 패딩	3바이트로 안 떨어지면 남는 자리를 =로 채웁니다.

입력Hello

Base64SGVsbG8=

3바이트가 4문자가 되므로 Base64 결과는 원본보다 약 33% 길어집니다. 그래서 큰 파일을 Base64로 넣으면 용량이 늘어납니다.

한글은 UTF-8로 먼저 바뀝니다

Base64는 바이트를 다루는 방식이라 "글자"를 바로 넣을 수 없습니다. 한글은 먼저 UTF-8 바이트로 변환된 뒤 Base64로 인코딩됩니다. 한글 한 글자는 UTF-8에서 3바이트입니다.

입력한글

Base647ZWc6riA

도구는 이 과정을 자동으로 처리하므로 한글, 이모지를 그대로 넣어도 정확히 변환되고 되돌려집니다.

URL-safe Base64

기본 Base64에는 +, /, =가 들어갑니다. 그런데 이 문자들은 URL에서 특별한 뜻이 있어서, Base64 값을 URL 파라미터나 파일 이름에 그대로 넣으면 문제가 생깁니다.

기본 Base64	URL-safe
+	-
/	_
= (뒤쪽 패딩)	생략

JWT 토큰이 대표적으로 URL-safe Base64를 씁니다. 도구에서 URL-safe 옵션을 켜면 이 규칙으로 인코딩하고, 디코딩할 때는 두 형식을 모두 알아서 인식합니다.

URL 인코딩이란

URL에는 쓸 수 있는 문자가 정해져 있습니다. 공백, 한글, &, ? 같은 문자를 주소에 넣으려면 % 뒤에 그 문자의 바이트를 16진수로 적습니다. 이것을 퍼센트 인코딩이라고 합니다.

공백	%20
&	%26
=	%3D
한글 "글"	%EA%B8%80 (UTF-8 3바이트)

컴포넌트 인코딩과 전체 URL 인코딩

방식	인코딩 대상	쓰는 곳
컴포넌트	: / ? = & 포함 거의 모든 특수문자	파라미터 값 하나를 만들 때
전체 URL	구조 문자(:// / ? = &)는 제외, 나머지만	완성된 주소를 통째로 정리할 때

?q= 뒤에 검색어를 넣을 때 전체 URL 방식으로 인코딩하면 검색어 안의 &나 =가 그대로 남아 파라미터가 잘못 나뉩니다. 값 부분은 반드시 컴포넌트 방식으로 인코딩하세요.

data URI로 파일 넣기

파일을 Base64로 바꾸고 앞에 형식 정보를 붙이면 data:image/png;base64,iVBOR... 같은 문자열이 됩니다. 이것을 data URI라고 하며, 이미지 파일 없이 HTML이나 CSS 안에 그림을 직접 넣을 수 있습니다.

장점	파일 요청이 줄어 작은 아이콘을 빠르게 표시할 수 있습니다.
단점	용량이 33% 늘고, 브라우저 캐시를 활용하기 어렵습니다. 큰 이미지에는 부적합합니다.

주의: Base64는 암호화가 아닙니다

Base64는 누구나 즉시 원래 값으로 되돌릴 수 있습니다. 비밀번호, 토큰, 개인정보를 Base64로 "숨겼다"고 생각하면 안 됩니다. 보안이 필요하면 별도의 암호화를 써야 합니다.

자주 묻는 질문

Base64 끝의 = 는 무엇인가요?

패딩입니다. 원본 바이트 수가 3의 배수가 아닐 때 남는 자리를 채우는 표시입니다. = 한 개는 원본 마지막 묶음이 2바이트, = 두 개는 1바이트였다는 뜻입니다.

공백은 %20인가요 +인가요?

퍼센트 인코딩에서는 %20입니다. +는 예전 폼 전송(application/x-www-form-urlencoded) 방식에서 공백을 나타내던 표기로, 문맥에 따라 다릅니다. 이 도구는 표준인 %20으로 인코딩합니다.

디코딩했더니 글자가 깨집니다.

원본이 UTF-8이 아닌 다른 인코딩(EUC-KR 등)이었을 가능성이 있습니다. 또는 Base64 문자열이 중간에 잘렸거나 다른 값이 섞였는지 확인하세요.

입력한 파일이 서버로 올라가나요?

올라가지 않습니다. 파일은 브라우저 안에서만 읽혀 Base64로 변환되며 어디로도 전송되지 않습니다.

숫자 읽기 변환기 만나이 계산기 디데이 계산기 적금 계산기

아래 도구에서 텍스트나 파일을 넣으면 Base64, URL 인코딩 결과가 즉시 나옵니다. 방향을 바꿔 디코딩도 할 수 있고, URL-safe 옵션과 data URI 접두사 제거도 지원합니다.

Base64 / URL 인코더 바로 사용하기

Base64는 암호화가 아닙니다. 민감한 정보를 감추는 용도로 쓰지 마세요.