URL 인코딩 디코딩
URL 인코딩은 주소에 못 쓰는 글자를 %와 16진수 두 자리로 바꿉니다. "한글"은 %ED%95%9C%EA%B8%80, 공백은 %20가 되고, 디코딩하면 다시 한글로 돌아옵니다.
사용 방법
- 인코딩 또는 디코딩을 고르고 입력 칸에 글자를 입력하거나 붙여 넣습니다.
- 검색어처럼 값 하나만 바꿀 때는 컴포넌트, 주소 전체를 바꾸면서 : / ? & = # 같은 기호를 그대로 둘 때는 URL 전체를 고르세요.
- HTML 폼처럼 공백을 +로 쓰는 텍스트라면 + 옵션에 체크합니다. 결과는 입력하는 대로 바뀝니다.
- 입력이 URL이나 쿼리스트링이면 결과 아래 표에 파라미터마다 디코딩된 키와 값이 나옵니다. 복사로 결과를 복사하고, 입력으로 보내기를 누르면 결과를 반대 방향으로 한 번 더 바꿀 수 있습니다.
계산 방법
퍼센트 인코딩은 못 쓰는 글자를 UTF-8 바이트로 바꾸고, 바이트마다 %와 16진수 두 자리로 적습니다. "가"는 EA B0 80 세 바이트라 %EA%B0%80이 됩니다. 한글은 한 글자에 3바이트, 이모지는 4바이트입니다.
컴포넌트 모드는 encodeURIComponent를 씁니다. 영문, 숫자와 - _ . ! ~ * ' ( )만 남기고 / ? & = : #까지 모두 바꿉니다. URL 안에 들어갈 값 하나에 씁니다. URL 전체 모드는 encodeURI를 써서 주소 구조를 이루는 ; , / ? : @ & = + $ #를 그대로 두므로 주소 전체용입니다.
디코딩은 이 과정을 거꾸로 합니다. % 뒤에 16진수 두 자리가 없거나 바이트가 올바른 UTF-8이 아니면 브라우저가 디코딩을 거부하고 오류를 보여 줍니다. 쿼리 표에서는 그 부분을 입력한 그대로 빨간색으로 표시해서, 값 하나가 깨져도 나머지는 볼 수 있습니다.
+가 공백을 뜻하는 곳은 폼 데이터(application/x-www-form-urlencoded)와 대부분의 쿼리스트링뿐이고, 경로 안의 +는 그냥 더하기 기호입니다. 쿼리 표는 항상 +를 공백으로 읽고, 위쪽 디코더는 옵션에 체크했을 때만 그렇게 읽습니다.
자주 쓰는 문자 인코딩표
| 문자 | 인코딩 결과 | 참고 |
|---|---|---|
| 공백 | %20 (또는 +) | +는 쿼리스트링에서만 |
| & | %26 | 파라미터 구분자라 값 안에서는 인코딩 |
| = | %3D | 키와 값을 나눔 |
| ? | %3F | 쿼리스트링 시작 |
| # | %23 | 프래그먼트 시작 |
| / | %2F | 경로 구분자 |
| % | %25 | 이스케이프 문자 자체 |
| + | %2B | 더하기 기호 자체는 인코딩해야 함 |
자주 묻는 질문
encodeURI와 encodeURIComponent는 뭐가 다른가요?
encodeURIComponent는 URL을 나누는 기호(/ ? & = : #)까지 바꾸므로 값 하나에 써도 안전합니다. encodeURI는 이 기호를 남겨서 주소 구조를 깨지 않고 전체를 인코딩합니다.
공백이 왜 %20이 되기도 하고 +가 되기도 하나요?
%20이 공백의 표준 인코딩이라 어디서나 통합니다. +는 예전 폼 방식의 공백 표기로 쿼리스트링 안에서만 맞습니다. + 옵션에 체크하면 인코딩할 때 %20 대신 +를 씁니다.
디코딩하면 잘못된 형식이라는 오류가 나요.
% 하나만 있거나, % 뒤에 16진수가 아닌 글자가 오거나, %EA처럼 UTF-8로 완성되지 않은 바이트가 들어 있는 경우입니다. 깨진 부분을 고치거나 지우세요. 쿼리 표에는 나머지 파라미터가 그대로 나옵니다.
한글이나 이모지도 되나요?
됩니다. 먼저 UTF-8로 바꾸기 때문에 한글, 이모지 모두 인코딩했다가 디코딩하면 원래대로 돌아옵니다. %EC%95%88처럼 알아볼 수 없게 된 한글 주소를 읽을 때도 쓸 수 있습니다.
입력한 URL이 서버로 가나요?
아니요. 전부 브라우저 안에서 처리합니다. 토큰이나 개인정보가 담긴 링크도 기기 밖으로 나가지 않습니다.