URL 인코더/디코더

URL이 안전하게 담을 수 있는 문자는 제한적입니다. 예약되지 않은 영문자와 숫자, 몇몇 기호를 벗어나는 문자는 모두 퍼센트 인코딩(% 기호 뒤에 바이트 값을 16진수로 붙이는 형식)으로 다시 써야 합니다. 이 도구는 일반 텍스트를 그 인코딩 형식으로 변환하고, 반대 방향으로도 동작해 %20이나 %26 같은 문자열을 원래 문자로 되돌립니다.

실제로 마주치는 상황을 세 가지 인코딩 방식으로 다룹니다. 표준 인코딩은 JavaScript의 encodeURI에 대응하며 URL 전체를 대상으로 하기 때문에 :, /, ?, # 같은 구조 문자는 그대로 남습니다. 컴포넌트 인코딩은 encodeURIComponent에 대응하며 이런 구조 문자까지 이스케이프하므로, 파라미터 값처럼 단독으로 쓰이는 부분에 적합합니다. 폼 인코딩은 브라우저가 폼을 전송할 때 쓰는 application/x-www-form-urlencoded 규칙을 따릅니다.

값을 쿼리 문자열 안에 넣을 때는 컴포넌트 인코딩을 선택합니다. 검색어, 이메일 주소, 또는 그 자체에 ?, &, =를 포함하는 리다이렉트 대상 등이 그렇습니다. 인코딩해 두면 이 기호들이 URL 구조로 해석되어 링크가 깨지는 것을 막을 수 있습니다. 표준 인코딩은 공백이나 악센트가 붙은 글자가 섞여 들어간 완전한 주소를 정리하되, 슬래시와 물음표는 의미를 그대로 지켜야 할 때 어울립니다. 폼 인코딩은 POST 요청의 본문이나 직접 조립한 폼 데이터에 대응하며, 이때 공백은 %20이 아니라 +로 쓰입니다. 디코딩도 그만큼 자주 씁니다. 로그나 애널리틱스 리포트, 리다이렉트 사슬에서 가져온 인코딩된 링크를 붙여 넣어 실제로 어디를 가리키는지 읽어 낼 때입니다.

hello world & café라는 텍스트로 살펴보겠습니다. 컴포넌트 인코딩에서는 공백이 %20이 되고, 앰퍼샌드는 %26이 되며, café는 é가 UTF-8에서 2바이트로 저장되기 때문에 caf%C3%A9가 됩니다. 폼 인코딩에서는 같은 공백이 +로 쓰여 hello+world가 됩니다. 실시간 통계는 몇 글자가 바뀌었는지, 문자열의 어느 정도가 인코딩되었는지 보여 주므로 이미 한 번 인코딩된 텍스트를 가려내는 빠른 방법이 됩니다.

예약 문자(: / ? # [ ] @ ! $ & ' ( ) * + , ; =)는 URL 안에서 의미를 가지므로, 표준 모드는 이를 일부러 그대로 두고 컴포넌트 모드는 이스케이프합니다. 모드를 잘못 고르는 것이 쿼리 파라미터가 깨지는 흔한 원인입니다. 인코딩은 UTF-8 바이트를 기준으로 정의되기 때문에 ASCII가 아닌 문자는 여러 개의 %XX 묶음으로 펼쳐집니다. URL을 두 번 인코딩하지 않도록 주의하세요. 이미 이스케이프의 일부인 %가 단독으로 %25로 바뀌면 링크는 더 이상 해석되지 않습니다. 헷갈릴 때는 먼저 디코딩해서 텍스트가 원본 상태인지 이미 이스케이프된 상태인지 확인하세요.