사용 방법
- 인코딩이나 디코딩을 고르고 왼쪽에 문자열을 넣습니다. 결과는 바로 오른쪽에 나옵니다.
- 검색어처럼 값 하나를 주소에 넣을 때는 ‘값 하나’, 이미 완성된 주소 전체의 한글만 바꿀 때는 ‘주소 전체’를 고릅니다.
- HTML 폼에서 넘어온 값처럼 공백이 +로 된 문자열은 ‘공백 ↔ +’를 켭니다.
- 아래 ‘주소 분해’에 긴 주소를 붙여 넣으면 쿼리 파라미터를 하나씩 읽고 고칠 수 있습니다.
계산 기준과 공식
주소에는 영문, 숫자와 일부 기호만 그대로 쓸 수 있습니다. 나머지 글자는 UTF-8 바이트로 바꾼 뒤 바이트마다 %XX(16진수)로 적습니다. 한글 한 글자는 3바이트라 %ED%95%9C처럼 9글자가 됩니다.
| 방식 | 그대로 두는 글자 | 쓰는 곳 |
|---|---|---|
| encodeURIComponent | A–Z a–z 0–9 - _ . ! ~ * ' ( ) | 쿼리 값, 경로 한 조각 |
| encodeURI | 위 글자 + ; , / ? : @ & = + $ # | 이미 완성된 주소 전체 |
예시
검색어를 쿼리 값으로 넣기
‘서울 맛집 & 카페’를 값 하나로 인코딩하면
%EC%84%9C%EC%9A%B8%20%EB%A7%9B%EC%A7%91%20%26%20%EC%B9%B4%ED%8E%98입니다.&가%26으로 바뀌어야 다음 파라미터와 섞이지 않습니다.주소 전체를 인코딩할 때
같은 검색어가 든 주소를 ‘주소 전체’로 바꾸면
https://example.com/search?q=%EC%84%9C%EC%9A%B8%20%EB%A7%9B%EC%A7%91%20&%20%EC%B9%B4%ED%8E%98가 됩니다. 한글과 공백은 바뀌지만&는 그대로라서, 서버는 ‘ 카페’를 별도 파라미터로 읽습니다. 값에 기호가 있으면 값만 따로 인코딩해야 합니다.
결과를 읽는 법
디코딩에서 올바른 UTF-8이 아니다라는 오류가 나면 주소가 중간에 잘렸거나, 오래된 사이트처럼 EUC-KR로 인코딩된 주소입니다. EUC-KR 주소는 한글 한 글자가 %C7%D1처럼 2바이트입니다.
주소 분해 표의 ‘정규화된 주소’는 브라우저가 실제로 요청하는 형태입니다. 한글 경로나 공백이 자동으로 인코딩된 모습을 확인할 수 있습니다.
자주 묻는 질문
encodeURI와 encodeURIComponent는 언제 쓰나요?
쿼리 값 하나, 경로 한 조각처럼 주소의 '부분'을 만들 때는 encodeURIComponent를 씁니다. ? & = / 까지 인코딩해서 값이 구조를 깨지 않습니다. 이미 완성된 주소에서 한글만 바꿀 때는 encodeURI를 씁니다.
공백이 %20일 때와 +일 때 차이는 뭔가요?
둘 다 공백입니다. %20은 주소 표준(RFC 3986) 방식이고, +는 HTML 폼 전송(application/x-www-form-urlencoded) 방식입니다. 쿼리 값에서는 대부분의 서버가 둘 다 받지만, 경로에서는 +가 그대로 + 글자로 읽힙니다.
카카오톡에 붙인 주소가 %EC... 로 길게 바뀌었어요.
한글 주소를 복사하면 브라우저가 인코딩된 형태로 복사하기 때문입니다. 디코딩에 붙여 넣으면 원래 한글로 보입니다. 두 형태는 같은 주소입니다.
두 번 인코딩된 주소는 어떻게 고치나요?
%2520처럼 %25가 보이면 두 번 인코딩된 것입니다(%25는 % 기호). 디코딩한 결과를 '바꾸기'로 다시 입력에 넣고 한 번 더 디코딩하면 됩니다.
결과가 이상하거나 있었으면 하는 기능이 있나요? 오류 제보 · 의견 보내기