URL 인코딩이란
웹 주소에는 영문자, 숫자, 그리고 -, ., _, ~ 같은 몇몇 기호만 쓸 수 있습니다. 다른 문자에는 특별한 역할이 있습니다. ?는 쿼리 문자열의 시작, &는 매개변수 구분, =는 이름과 값의 연결, #은 프래그먼트의 시작을 뜻합니다. 공백과 한글처럼 영어가 아닌 문자는 아예 쓸 수 없습니다.
URL 인코딩, 다른 말로 퍼센트 인코딩이 이 문제를 해결합니다. 안전하지 않은 문자를 UTF-8 바이트로 바꾸고, 각 바이트를 %와 16진수 두 자리로 씁니다. 공백은 %20, &는 %26, é는 %C3%A9가 됩니다. 한글 URL 인코딩도 같은 원리이며, 한글 한 글자는 UTF-8로 3바이트이므로 한은 %ED%95%9C처럼 이스케이프 세 개가 됩니다.
URL 인코더 사용 방법
인코딩. 일반 텍스트에 텍스트를 입력하거나 붙여넣으면 인코딩된 결과가 URL 인코딩에 나타납니다. 복사를 눌러 가져가세요.
디코딩. 인코딩된 텍스트를 URL 인코딩에 붙여넣으면 읽을 수 있는 텍스트가 왼쪽에 나타납니다.
입력란 아래의 인코딩할 대상 메뉴에서 방식을 고릅니다.
- 값 또는 URL 일부 (encodeURIComponent): 대부분의 경우 이것이 맞습니다. 영문자, 숫자,
- _ . ~를 뺀 모든 문자를 인코딩합니다. 검색어, 매개변수 값, 경로 조각에 쓰세요. - 전체 URL, : / ? & = 유지 (encodeURI): 주소의 구조는 그대로 두고 공백, 한글 같은 비영어 문자 등만 인코딩합니다.
- 폼 데이터, 공백을 +로 (x-www-form-urlencoded): 브라우저가 HTML 폼을 제출할 때 보내는 방식과 같습니다. 공백은
+가 되고, 디코딩할 때는+가 다시 공백으로 바뀝니다.
지우기를 누르면 두 입력란이 모두 비워집니다.
작동 원리
텍스트는 먼저 UTF-8 바이트로 바뀝니다. 허용되지 않는 바이트는 %와 그 바이트의 16진수 값으로 바뀝니다. é는 UTF-8로 2바이트라서 %C3%A9처럼 이스케이프 두 개가 되고, 한글 음절은 3바이트라서 세 개, 이모지는 4바이트라서 네 개가 됩니다.
이 도구는 값 모드에서 브라우저 기본 함수보다 한 단계 더 나아가 RFC 3986에 따라 ! ' ( ) *도 인코딩합니다. 이 문자들은 기술적으로는 허용되지만 일부 서버와 이메일 프로그램에서 문제를 일으킨 적이 있습니다.
디코딩은 반대로 진행됩니다. 연속된 %XX 시퀀스를 바이트로 모은 뒤 UTF-8로 읽습니다.
예시
| 입력 | 값 (Component) | 전체 URL | 폼 데이터 |
|---|---|---|---|
hello world |
hello%20world |
hello%20world |
hello+world |
Tom & Jerry |
Tom%20%26%20Jerry |
Tom%20&%20Jerry |
Tom+%26+Jerry |
a+b=c |
a%2Bb%3Dc |
a+b=c |
a%2Bb%3Dc |
50% off |
50%25%20off |
50%25%20off |
50%25+off |
café |
caf%C3%A9 |
caf%C3%A9 |
caf%C3%A9 |
it's (ok)*! |
it%27s%20%28ok%29%2A%21 |
it's%20(ok)*! |
it%27s+%28ok%29%2A%21 |
한글 |
%ED%95%9C%EA%B8%80 |
%ED%95%9C%EA%B8%80 |
%ED%95%9C%EA%B8%80 |
안녕하세요 세계 |
%EC%95%88%EB%85%95%ED%95%98%EC%84%B8%EC%9A%94%20%EC%84%B8%EA%B3%84 |
%EC%95%88%EB%85%95%ED%95%98%EC%84%B8%EC%9A%94%20%EC%84%B8%EA%B3%84 |
%EC%95%88%EB%85%95%ED%95%98%EC%84%B8%EC%9A%94+%EC%84%B8%EA%B3%84 |
완성된 주소를 넣어 보면 차이가 가장 잘 보입니다. https://example.com/a b?q=1&r=é를 전체 URL 모드로 인코딩하면 https://example.com/a%20b?q=1&r=%C3%A9가 되어 여전히 링크로 작동합니다. 같은 텍스트를 값 모드로 인코딩하면 https%3A%2F%2Fexample.com%2Fa%20b%3Fq%3D1%26r%3D%C3%A9가 되는데, 이는 리디렉션 대상처럼 주소 전체가 다시 어떤 매개변수의 값일 때만 맞는 결과입니다.
한글 주소도 마찬가지입니다. https://example.com/검색?q=대소문자 변환을 전체 URL 모드로 인코딩하면 https://example.com/%EA%B2%80%EC%83%89?q=%EB%8C%80%EC%86%8C%EB%AC%B8%EC%9E%90%20%EB%B3%80%ED%99%98이 됩니다. 브라우저 주소창에서 복사한 한글 링크가 이렇게 길게 바뀌는 것도 같은 이유이며, 이 도구에 붙여넣어 디코딩하면 다시 읽을 수 있는 한글로 돌아옵니다.
팁과 한계
- 링크 전체가 아니라 값을 인코딩하세요. 링크를 먼저 만든 다음 끼워 넣는 부분만 인코딩합니다.
- 이중 인코딩을 조심하세요.
%2520이 보인다면 텍스트가 두 번 인코딩된 것입니다. 한 번 디코딩하세요. - +가 항상 공백은 아닙니다. 폼 데이터에서만 공백을 뜻합니다. 경로에서
+는 그냥 더하기 기호입니다. 디코딩하기 전에 맞는 모드를 고르세요. - 인코딩은 숨기기가 아닙니다. 인코딩된 텍스트는 누구나 읽을 수 있습니다. 링크에 비밀번호를 넣지 마세요.
- 이스케이프의 대소문자는 상관없습니다.
%c3%a9와%C3%A9는 같은 뜻입니다. 대문자로 쓰는 것이 일반적입니다.
다른 방법으로 인코딩하기
JavaScript. encodeURIComponent('Tom & Jerry')는 Tom%20%26%20Jerry를 돌려줍니다. 되돌리려면 decodeURIComponent를 쓰세요. 이 함수는 %zz 같은 깨진 시퀀스에서 오류를 던지지만, 이 도구는 그런 부분을 그대로 둡니다.
Python. urllib.parse.quote('Tom & Jerry', safe='')는 Tom%20%26%20Jerry를, urllib.parse.quote_plus는 Tom+%26+Jerry를 돌려줍니다.
Excel. =ENCODEURL(A1)은 A1 셀의 텍스트를 퍼센트 인코딩합니다(Windows용 Excel 2013 이상).
명령줄. curl --data-urlencode "q=Tom & Jerry"는 폼 값을 보내면서 인코딩합니다.
관련 도구
캠페인 링크를 만든다면 UTM 생성기가 모든 태그를 알아서 인코딩해 줍니다. 제목을 깔끔한 경로로 바꾸려면 슬러그 생성기를 쓰세요. URL 안에 바이너리 데이터를 넣어야 한다면 URL-safe 옵션을 켠 Base64 인코딩이 더 알맞은 경우가 많습니다.