URL 인코딩이란?
URL 인코딩은 퍼센트 인코딩이라고도 한다. URL 안에서 특별한 뜻을 갖거나 아예 들어갈 수 없는 문자를 % 뒤에 그 바이트의 16진수 값을 붙인 형태로 바꾸는 것이다. 공백은 %20, 슬래시는 %2F 가 되고, ASCII 가 아닌 글자는 먼저 UTF-8 바이트로 바꾼 뒤 바이트마다 이스케이프한다.
규칙이 하나가 아니라는 점이 버그의 근원이다. 주소 전체를 값 하나처럼 이스케이프하면 주소가 부서지고, 값 하나를 주소 전체처럼 이스케이프하면 & 와 = 가 살아남아 파라미터가 조용히 둘로 갈라진다. 이 도구는 세 규칙을 모드로 갈라 두어, 그 텍스트가 갈 자리에 맞는 것을 고르게 한다.
A percent-encoding mechanism is used to represent a data octet in a component when that octet\u2019s corresponding character is outside the allowed set or is being used as a delimiter of, or within, the component.
기능
- 세 규칙을 섞지 않는다
- 값 인코딩은 예약 문자를 모두 이스케이프한다 — 쿼리 값이나 경로 조각 하나에 쓴다. 주소 전체 인코딩은 구조를 이루는 : / ? # [ ] @ & = + $ , 를 그대로 둔다. 폼 인코딩은 application/x-www-form-urlencoded 를 따라 공백을 %20 이 아니라 + 로 쓴다.
- 두 가지 공백 표기를 모두 받는 디코딩
- 이스케이프를 풀기 전에 + 를 공백으로 되돌린다. 폼 전송이나 쿼리스트링에서 복사해 온 값이 어느 쪽이든 제대로 풀린다.
- UTF-8 을 전제로
- ASCII 가 아닌 글자는 UTF-8 바이트로 인코딩한다. 브라우저와 서버가 기대하는 방식이라 한글·악센트·이모지가 모두 왕복해서 돌아온다.
- 실패를 감추지 않는다
- 잘렸거나 형식이 깨진 이스케이프 시퀀스는 절반쯤 풀린 문자열이 아니라 오류로 알린다.
사용법
- 1
무엇을 인코딩하는지 정한다
URL 안에 들어갈 값 하나인가, 주소 전체인가. 여기서 모드가 정해진다.
- 2
맞는 모드를 고른다
쿼리 파라미터나 경로 조각 하나면 값 인코딩, 주소 전체면 주소 전체 인코딩, HTML 폼 본문이면 폼 인코딩.
- 3
텍스트를 붙여넣는다
입력하는 동안 결과가 따라 바뀐다.
- 4
되돌릴 때는 디코딩으로
디코딩으로 바꾸면 퍼센트 인코딩된 텍스트가 읽히는 글자로 돌아온다.
자주 묻는 질문
encodeURI 와 encodeURIComponent 는 뭐가 다른가?
encodeURIComponent 는 / ? & = # 을 포함해 예약 문자를 모두 이스케이프하므로 URL 안에 들어갈 값 하나에 맞다. encodeURI 는 그 문자들이 URL 의 구조를 이루기 때문에 건드리지 않으므로 주소 전체를 이스케이프할 때 맞다. 쿼리 값에 encodeURI 를 쓰는 것이 앰퍼샌드가 든 파라미터가 깨지는 가장 흔한 원인이다.
공백이 어떤 때는 %20, 어떤 때는 + 인 이유는?
%20 은 공백의 퍼센트 인코딩이고 URL 어디에서나 유효하다. + 는 HTML 폼이 전송에 쓰는 application/x-www-form-urlencoded 형식에서 온 관행으로, 여기서는 + 가 공백을 뜻하고 진짜 더하기는 %2B 로 써야 한다. 이 차이를 무시하는 디코더는 폼으로 보낸 공백을 더하기 기호로 되돌려 놓는다.
URL 에 한글을 넣을 때 인코딩해야 하나?
전송할 때는 그렇다. 글자를 UTF-8 바이트로 바꾸고 바이트마다 퍼센트 이스케이프한다. 브라우저 주소창은 디코딩된 형태를 보여 주기 때문에 주소가 한글로 보여도 실제로 오가는 요청은 전부 이스케이프되어 있다.
같은 문자열을 두 번 인코딩해도 되나?
안 된다. 두 번 인코딩하면 % 가 %25 로 바뀌어 %20 이 %2520 이 되고, 값에 이스케이프 시퀀스가 글자 그대로 남은 채 도착한다. 이미 인코딩된 것 같으면 먼저 디코딩해 확인한 뒤에 다시 인코딩한다.
입력이 어디론가 전송되나?
아니다. 인코딩과 디코딩 모두 사용자의 기기에서 자바스크립트로 처리되고, 입력을 받는 백엔드가 없다.
이 도구가 따르는 규격
- RFC 3986 — URI 일반 문법 — 예약 문자와 퍼센트 인코딩을 정의한다. 주소 전체와 값 하나의 규칙이 왜 달라야 하는지가 여기 있다.
- WHATWG URL 표준 — application/x-www-form-urlencoded — 공백이 + 가 되고 진짜 더하기가 %2B 가 되는 폼 인코딩 규칙을 정의한다.
- MDN — encodeURIComponent() — 각 함수가 정확히 어떤 문자를 이스케이프하는지 나열한다.