URL 인코더/디코더

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

실제로 마주치는 상황은 두 가지 인코딩 방식으로 다룹니다. 표준 인코딩은 JavaScript의 encodeURIComponent를 사용하며, 영문자, 숫자, - _ . ! ~ * ' ( )를 뺀 모든 문자를 이스케이프합니다. :, /, ?, #, & 같은 구조 문자도 포함되므로 파라미터 값처럼 단독으로 쓰이는 부분에 알맞습니다. 폼 인코딩은 브라우저가 폼을 전송할 때 쓰는 application/x-www-form-urlencoded 규칙을 따르며, 공백을 %20 대신 +로 씁니다.

값을 쿼리 문자열 안에 넣을 때는 표준 인코딩을 선택합니다. 검색어, 이메일 주소, 또는 그 자체에 ?, &, =를 포함하는 리다이렉트 대상 등이 그렇습니다. 인코딩해 두면 이 기호들이 URL 구조로 해석되어 링크가 깨지는 것을 막을 수 있습니다. 구조 문자를 모두 이스케이프하므로 주소는 부분별로 따로 인코딩하세요. 완성된 URL을 통째로 인코딩하면 슬래시와 물음표까지 이스케이프되는데, 그 URL이 다른 URL 안의 값일 때만 맞는 방법입니다. 폼 인코딩은 POST 요청의 본문이나 직접 조립한 폼 데이터에 대응하며, 이때 공백은 %20이 아니라 +로 쓰입니다. 디코딩도 그만큼 자주 씁니다. 로그나 애널리틱스 리포트, 리다이렉트 사슬에서 가져온 인코딩된 링크를 붙여 넣어 실제로 어디를 가리키는지 읽어 낼 때입니다.

hello world & café라는 텍스트로 살펴보겠습니다. 표준 인코딩에서는 공백이 %20이 되고, 앰퍼샌드는 %26이 되며, café는 é가 UTF-8에서 2바이트로 저장되기 때문에 caf%C3%A9가 됩니다. 폼 인코딩에서는 같은 공백이 +로 쓰여 hello+world가 됩니다. 요약 한 줄은 몇 글자가 바뀌었고 그것이 전체의 몇 퍼센트인지 알려 줍니다.

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