Base64·URL 인코더/디코더

인코딩 변환 규칙

Base64 인코딩: btoa(UTF-8 바이트열) / URL 인코딩: encodeURIComponent(문자열) — 각각 역함수로 디코딩

인코딩에서 자주 틀리는 지점

• Base64는 RFC 4648이 정한 64개 문자(A-Z, a-z, 0-9, +, /)와 채움 문자(=)만으로 이진 데이터를 표현합니다. 3바이트를 4문자로 바꾸므로 크기가 약 33% 커지고, 길이가 4의 배수가 되도록 끝에 =가 0~2개 붙습니다.
• Base64에는 변형이 있습니다 — URL이나 파일명에 쓸 때는 +와 /가 각각 예약 문자와 경로 구분자로 해석되는 문제 때문에 -와 _로 바꾼 URL-safe Base64(base64url)를 씁니다. JWT 토큰이 대표적인 사용처입니다.
• Base64는 한글 등 유니코드 문자도 안전하게 다루도록 UTF-8로 먼저 변환한 뒤 인코딩하므로, 일반 btoa()보다 넓은 범위의 텍스트를 지원합니다.
• URL 인코딩(RFC 3986 퍼센트 인코딩)은 공백을 %20으로, 한글·특수문자를 %EC%95%88 같은 UTF-8 바이트 단위 표기로 변환해 URL 쿼리 문자열에 안전하게 포함할 수 있게 합니다.
• encodeURIComponent와 encodeURI는 다릅니다 — 전자는 ?, &, = 같은 URL 구조 문자까지 전부 인코딩하므로 쿼리 값 하나를 넣을 때 쓰고, 후자는 URL 전체를 다듬을 때 씁니다. 값에 encodeURI를 쓰면 &가 살아남아 파라미터가 쪼개지는 사고가 납니다.
• 이미지·파일 업로드 기능은 파일을 data:image/...;base64,... 형태의 data URI(RFC 2397)로 변환하며, 이 문자열을 그대로 <img src>나 CSS에 사용할 수 있습니다.

이런 때 유용해요

• API 요청 헤더에 사용할 아이디:비밀번호 조합을 Base64로 인코딩해 Authorization: Basic 헤더 값을 직접 만들 때 활용합니다.
• 검색어에 한글이나 & 같은 특수문자가 포함된 URL을 만들 때, URL 인코딩으로 변환해 링크가 깨지지 않도록 처리합니다.

자주 묻는 질문

Base64로 인코딩하면 파일 크기가 어떻게 변하나요?

Base64는 3바이트를 4개의 문자로 표현하는 방식이라 원본 대비 약 33% 정도 크기가 커집니다. 대용량 파일 전송보다는 작은 이미지나 텍스트를 URL·JSON에 포함할 때 적합합니다.

Base64 인코딩은 암호화인가요?

아닙니다. Base64는 데이터를 텍스트로 표현만 바꾸는 인코딩이며 누구나 즉시 디코딩할 수 있어, 비밀번호나 민감정보를 보호하는 용도로는 사용하면 안 됩니다.

URL 인코딩과 Base64 인코딩은 언제 다르게 써야 하나요?

URL 쿼리 파라미터에 텍스트를 넣을 때는 URL 인코딩을, 이진 데이터(이미지·파일)를 텍스트로 표현해야 할 때는 Base64를 사용합니다.

다른 곳에서 디코딩한 한글이 깨져 보이는 이유는 무엇인가요?

Base64 자체에는 문자 인코딩 정보가 없기 때문입니다. UTF-8로 인코딩한 문자열을 받은 쪽이 EUC-KR이나 Latin-1로 해석하면 한글이 깨집니다.

자바스크립트의 atob()만 쓰면 UTF-8 복원 단계가 빠져 같은 문제가 나는데, 이 도구는 인코딩·디코딩 양쪽에서 UTF-8 변환까지 처리하므로 여기서 만든 문자열은 UTF-8 기준으로 안전합니다.

참고 자료

• RFC 4648 - The Base16, Base32, and Base64 Data Encodings (base64url 변형 포함)
• RFC 3986 - URI 표준 (퍼센트 인코딩 규칙)
• MDN - Base64 인코딩 및 디코딩 (유니코드 처리 방법 포함)

이용 시 유의사항

입력한 내용은 브라우저 안에서만 처리되며 서버로 전송되지 않습니다. Base64는 암호화가 아니라 인코딩입니다 — 누구나 되돌릴 수 있으므로 비밀번호나 토큰을 감추는 용도로 쓰지 마세요.