URL 인코더 / 디코더

URL 인코더란?

URL 인코더(퍼센트 인코더, URI 인코더라고도 부릅니다)는 URL에서 예약되어 있거나 그대로 쓰면 안 되는 문자들을 % + 두 자리 16진수 형태로 바꿔주는 도구입니다. 쿼리스트링을 만들 때, 경로 세그먼트를 이스케이프할 때, 공백이나 한글·이모지가 들어간 URL을 공유할 때, 리다이렉트 디버깅할 때 자주 꺼내 쓰게 됩니다.

URL은 ASCII 문자 중에서도 일부만 사용할 수 있습니다. 그 범위를 벗어나는 공백, 악센트, 이모지, 그리고 데이터로 쓰일 때의 ?, #, &, = 같은 예약 문자들은 퍼센트 인코딩을 거쳐야 브라우저에서 서버까지 깨지지 않고 도착합니다.

자바스크립트에는 두 가지 인코딩 함수가 있습니다. encodeURI는 URL 구조(/, ?, #, &)를 그대로 두고, encodeURIComponent는 예약 문자를 모두 인코딩합니다. 쿼리스트링에 끼워 넣을 *값*에는 encodeURIComponent, *URL 전체*를 그대로 살려야 할 때는 encodeURI를 쓰면 됩니다.

URL 인코딩하면서 알게 되는 것들

• 퍼센트 인코딩은 한 바이트를 % + 16진수 두 자리로 바꾸는 방식입니다. 예를 들어 공백은 %20이 됩니다.
• 예약 문자(: / ? # & = +)는 URL 구조에서 의미를 갖습니다. 구분자가 아니라 데이터로 쓸 때는 반드시 인코딩해야 합니다.
• 한글, 이모지, 키릴 문자, CJK 같은 비ASCII 문자는 먼저 UTF-8 바이트로 변환된 뒤 각 바이트가 퍼센트 인코딩됩니다.

URL 인코딩/디코딩 단계별 사용법

1. 1

   방향 정하기

   원본 텍스트를 URL에 안전한 형태로 만들고 싶다면 Encode를, % 인코딩된 문자열을 원래 텍스트로 되돌리고 싶다면 Decode를 선택하세요.

2. 2

   인코딩 모드 고르기

   쿼리스트링 값에는 encodeURIComponent(예약 문자 전부 인코딩), URL 전체에는 encodeURI(구조 유지)를 선택합니다.

3. 3

   입력값 붙여넣기

   원본 텍스트나 인코딩된 URL을 붙여 넣습니다. 여러 줄을 한 번에 디코딩하는 것도 됩니다.

4. 4

   결과 복사

   인코딩되거나 디코딩된 값을 복사하세요. 변환은 브라우저 안에서 처리되므로, URL에 들어 있는 민감한 값도 외부로 나가지 않습니다.

자주 쓰이는 URL 인코딩 치트시트

실무에서 가장 자주 마주치는 문자들과 그 퍼센트 인코딩 형태입니다. 예약 문자의 의미는 RFC 3986을 따릅니다.

직접 따라 해볼 URL 인코딩 예제

흔히 저지르는 URL 인코딩 실수

• 쿼리스트링 값에 encodeURI를 쓰는 경우 — &, =이 그대로 살아남아서 파라미터 파싱이 깨집니다.
• 같은 URL을 두 번 인코딩하는 경우. %20이 %2520으로 보인다면 십중팔구 더블 인코딩 버그입니다.
• +가 application/x-www-form-urlencoded 본문에서는 공백을 뜻하지만, URL의 path나 query에서는 그냥 + 기호 그대로라는 점을 깜빡하는 경우.

URL 인코딩 자주 묻는 질문