웹개발 기초 데이터 변환

URL 인코딩과 Base64 바이너리 변환의 동작 구조 및 활용 가이드

작성일: 2026. 07. 14 | 카테고리: 웹 개발 가이드

인터넷 통신을 제어할 때, 웹 브라우저와 웹 서버는 한글, 공백, 특수 기호 등을 온전히 주고받기 위해 무수히 데이터를 변환합니다. 이때 가장 보편적으로 쓰이는 양대 통신 가공 기술이 바로 'URL 인코딩(Percent Encoding)''Base64 변환(Base64 Encoding)'입니다.

두 기술은 텍스트를 기호화하여 전달한다는 점은 비슷해 보이지만, **목적과 구동 방식에 근본적인 차이**가 있습니다.

1. URL 인코딩 (퍼센트 인코딩)의 이해

인터넷 표준 규격상 주소창(URI)에는 오직 **ASCII 문자 집합의 일부 문자(영문자, 숫자 등)**만 안전하게 전송할 수 있습니다. 한글이나 특수 문자(공백, `&`, `?`, `=`, `+` 등)를 주소창에 그냥 실어 보내면, 네트워크 중계기나 브라우저에 의해 문자 인식이 비틀려 오류가 발생하거나 주소가 심각하게 깨집니다.

이를 방지하기 위해 안전하지 않은 문자를 **16진수 바이트 코드로 환산한 뒤 백분율 기호(%)를 붙여** 안전하게 치환하는 기술이 **'URL 인코딩'**입니다.

  • 한글 '웹'을 URL 인코딩하면 '%EC%9B%B9' 과 같은 16진수 스트링으로 가시화됩니다.
  • 공백(Space) 문자는 통신상 '%20' 또는 상황에 따라 '+' 기호로 표기됩니다.

2. Base64 변환 (64진법 암호화)의 이해

Base64는 한 단계 더 나아가 텍스트뿐만 아니라 바이너리 데이터(이미지, 실행 파일 등)를 영문 대/소문자, 숫자, 그리고 특수 문자 `+`, `/`로 구성된 **64개의 문자 집합으로만 표현하는 64진법 인코딩** 방식입니다.

이메일(MIME) 전송이나 소형 웹 이미지 리소스를 외부 파일 링크 없이 HTML/CSS 코드 내부에 인라인 데이터 배포할 때 주로 쓰입니다. 끝부분이 부족할 때 패딩(Padding) 문자인 '=' 기호로 마감하는 것이 독창적인 성질입니다.

3. 브라우저 자바스크립트에서의 한글 깨짐 예외 처방

브라우저 표준 자바스크립트에는 Base64 변환용 내장 함수인 **`btoa`**(Binary to ASCII)와 **`atob`**(ASCII to Binary)가 내장되어 있습니다.

그러나 이 함수들은 영문 아스키(ASCII) 문자 전용으로 설계되었기 때문에, **한글이나 유니코드 문자열을 입력하면 범위를 초과하는 예외 크래시(`DOMException: The string to be encoded contains characters outside of the Latin1 range.`)**를 뿜으며 자바스크립트 전체가 멈춰버립니다.

본 포털의 **'URL/Base64 변환기'**는 이 문제를 방지하기 위해 다음과 같은 우회 정밀 함수를 이식하여 한글과 아라비아 문자까지 완벽하게 호환 작동합니다:

  • UTF-8 호환 변환 공식: `btoa(encodeURIComponent(text))` 파이프라인 처리를 통해 안전한 유니코드 바이트 코드를 유도한 뒤 Base64로 컴파일합니다.