URL 인코딩이란? 웹 개발자를 위한 완전 가이드

URL 인코딩이 필요한 이유

웹 주소(URL)에는 사용할 수 있는 문자에 제한이 있습니다. URL은 ASCII 문자 집합만 지원하며, 그 중에서도 일부 특수문자는 URL에서 특별한 의미를 가집니다. 예를 들어 ?는 쿼리 문자열 시작, &는 파라미터 구분, #은 앵커 링크를 나타냅니다.

한글이나 중국어 같은 비 ASCII 문자, 또는 URL에서 특별한 의미를 가지는 문자를 URL에 포함하려면 반드시 인코딩 과정을 거쳐야 합니다.

URL 인코딩 방식 (퍼센트 인코딩)

URL 인코딩은 "퍼센트 인코딩(Percent-encoding)"이라고도 합니다. 인코딩 과정은 다음과 같습니다:

1. 인코딩할 문자를 UTF-8 바이트로 변환합니다.
2. 각 바이트 앞에 % 기호를 붙이고 16진수로 표기합니다.

예시:

• 공백(Space) → %20
• "안" → %EC%95%88 (UTF-8에서 3바이트)
• ! → %21
• @ → %40

인코딩이 필요한 문자 vs 안전한 문자

예약 문자 (반드시 인코딩)

: / ? # [ ] @ ! $ & ' ( ) * + , ; = 등은 URL 문법에서 특별한 역할을 하므로, 데이터로 사용할 때는 반드시 인코딩해야 합니다.

안전한 문자 (인코딩 불필요)

영문 대소문자(A-Z, a-z), 숫자(0-9), 하이픈(-), 밑줄(_), 점(.), 물결(~)은 인코딩 없이 URL에 그대로 사용할 수 있습니다.

실제 활용 사례

검색 URL

구글에서 "나이 계산기"를 검색하면 URL이 이렇게 됩니다:
https://www.google.com/search?q=%EB%82%98%EC%9D%B4+%EA%B3%84%EC%82%B0%EA%B8%B0

API 파라미터

API에 한글 파라미터를 전송할 때 URL 인코딩을 해야 서버가 정확히 받을 수 있습니다.

폼 데이터 전송

HTML 폼의 GET 방식 전송 시 브라우저가 자동으로 URL 인코딩을 처리합니다.

Tooly URL 인코딩/디코딩 도구 사용 방법

인코딩: URL Encoder 도구에 원본 텍스트를 입력하면 즉시 인코딩된 URL이 생성됩니다.

디코딩: URL Decoder 도구에 인코딩된 URL을 붙여넣으면 원본 텍스트로 변환됩니다.

encodeURI vs encodeURIComponent 차이

JavaScript에서 URL 인코딩을 할 때 두 가지 함수를 구분해서 사용해야 합니다:

• encodeURI(): URL 전체를 인코딩할 때 사용. :, /, ?, # 같은 URL 구조 문자는 인코딩하지 않습니다.
• encodeURIComponent(): URL의 일부(파라미터 값 등)를 인코딩할 때 사용. 모든 특수문자를 인코딩합니다.

마치며

URL 인코딩은 웹 개발의 기초이자 일상적으로 마주치는 개념입니다. Tooly의 URL 인코딩/디코딩 도구로 필요할 때 빠르게 변환해 보세요.