본문으로 바로가기

URL 인코더 · 디코더베타

URL과 쿼리 문자열을 인코딩·디코딩합니다. encodeURIComponent와 encodeURI 차이를 예시로 확인하고, 전체 URL의 구조도 분석할 수 있습니다.

방향
0자 · 0줄
인코딩 방식
encodeURIComponent는 /, ?, &, # 같은 URL 구분자까지 전부 이스케이프해서 쿼리 파라미터 값 하나를 인코딩할 때 씁니다. encodeURI는 이 구분자들은 그대로 두고 나머지만 이스케이프해서 완전한 URL 자체를 다룰 때 씁니다. 예: "a b/c?d" → component는 "a%20b%2Fc%3Fd", full은 "a%20b/c?d".

0자 · 0줄

URL 구조 분석

URL 구조 분석

전체 URL을 입력하면 프로토콜·호스트·경로·쿼리 파라미터로 나눠 보여줍니다.

https://example.com/path?query=1&lang=ko

사용 방법

인코딩 탭에서 텍스트나 URL 조각을 입력하면 결과가 표시됩니다. 디코딩 탭에서는 %EC%95%88%EB%85%95 같은 인코딩된 문자열을 붙여넣으면 원래 문자로 바뀝니다. 따로 버튼을 누를 필요가 없고, 입력을 고치는 동안에도 결과가 계속 갱신되며, 복사 버튼으로 가져갈 수 있습니다.

encodeURIComponent와 encodeURI, 무엇이 다른가요

두 함수 모두 URL에 안전하지 않은 문자를 % 뒤에 16진수 코드를 붙이는 방식(퍼센트 인코딩)으로 바꾸지만, 이스케이프하는 범위가 다릅니다.

  • encodeURIComponent (값 하나): /, ?, &, #, :, @ 등 URL 구분자로 쓰이는 문자까지 모두 이스케이프합니다. 쿼리 파라미터 하나의 값처럼, URL의 “한 조각”을 만들 때 씁니다. 예를 들어 검색어 a/b&c를 쿼리 값으로 넣으려면 a%2Fb%26c로 인코딩해야 &가 다음 파라미터의 시작으로 오인되지 않습니다.
  • encodeURI (전체 URL): 이미 /, ?, &, # 등으로 구조가 잡혀 있는 완전한 URL을 다룰 때 씁니다. 이 구분자들은 그대로 두고, 공백이나 비ASCII 문자 같은 나머지만 이스케이프합니다. 완전한 URL에 encodeURIComponent를 쓰면 ://의 /나 ?까지 인코딩되어 버려 URL이 깨집니다.

예를 들어 a b/c?d를 두 방식으로 인코딩하면 결과가 다릅니다: component는 a%20b%2Fc%3Fd, full은 a%20b/c?d. 어느 것을 쓸지는 “지금 만들려는 것이 URL의 한 조각인가, 완전한 URL인가”로 정하면 됩니다.

+ 를 공백으로 (application/x-www-form-urlencoded)

HTML <form>이 GET이나 POST로 보내는 값은 application/x-www-form-urlencoded 방식을 쓰는데, 이 방식은 공백을 %20이 아니라 +로 인코딩하는 관례가 있습니다. “+ 를 공백으로” 옵션을 켜면 인코딩할 때 %20 대신 +를 쓰고, 디코딩할 때는 +를 공백으로 해석합니다. 폼 제출 데이터나 application/x-www-form-urlencoded 요청 본문을 다룰 때만 켜고, 일반적인 URL 경로나 파일 이름을 다룰 때는 꺼 두세요. 옵션을 꺼 두면 +는 문자 그대로 취급됩니다.

URL 구조 분석

완전한 URL(https:// 등 프로토콜 포함)을 분석 칸에 붙여넣으면 프로토콜, 호스트, 경로, 해시, 그리고 쿼리 파라미터를 표로 나눠 보여줍니다. 쿼리 값은 자동으로 퍼센트 디코딩되므로, ?q=hello%20world처럼 인코딩된 쿼리 문자열도 사람이 읽기 쉬운 값으로 확인할 수 있습니다. 같은 키가 여러 번 나오면(?tag=a&tag=b) 각각 별도의 줄로 보여줍니다.

자주 나는 오류

퍼센트 인코딩은 % 뒤에 16진수 두 자리가 와야 합니다(%20처럼). 단독 %, 16진수가 아닌 문자(%zz), 또는 멀티바이트 문자의 %XX 조합이 깨진 경우 디코딩할 수 없다는 오류가 표시됩니다. 인코딩할 때 쓴 방식(component/full)과 다른 방식으로 디코딩해도 뜻이 달라질 수 있으니 같은 방식을 선택하세요.

개인정보

입력한 내용은 이 브라우저 안에서만 처리되며 서버로 전송되지 않습니다. 페이지를 닫으면 모든 내용이 사라집니다.

참고 자료

자주 묻는 질문

encodeURIComponent와 encodeURI는 언제 다르게 써야 하나요?

encodeURIComponent는 /, ?, &, # 같은 URL 구분자까지 전부 이스케이프하므로, 쿼리 파라미터 값처럼 URL의 한 조각을 만들 때 씁니다. encodeURI는 이 구분자들은 그대로 두고 나머지만 이스케이프하므로, 이미 구조를 갖춘 완전한 URL 전체를 다룰 때 씁니다. 쿼리 파라미터 값에 encodeURI를 쓰면 값 안의 &나 =가 구분자로 오인될 수 있으니 주의하세요.

디코딩할 때 '퍼센트 인코딩이 올바르지 않습니다' 오류는 왜 나오나요?

퍼센트 인코딩은 %XX(X는 16진수 두 자리) 형식이어야 합니다. 단독으로 있는 %, 16진수가 아닌 문자가 뒤따르는 %, 또는 멀티바이트 문자의 %XX%XX 조합이 깨져 있으면 브라우저가 원래 문자로 복원할 수 없어 이 오류가 납니다.

'+ 를 공백으로' 옵션은 언제 켜야 하나요?

HTML 폼이 GET이나 POST로 값을 보낼 때(application/x-www-form-urlencoded)는 공백을 %20이 아니라 +로 인코딩하는 관례가 있습니다. 폼에서 나온 쿼리 문자열이나 요청 본문을 다룰 때 이 옵션을 켜면 +를 공백으로 올바르게 해석합니다. 일반적인 URL 경로에서는 꺼 두세요.

URL 구조 분석은 어떤 값을 보여주나요?

https://로 시작하는 완전한 URL을 넣으면 프로토콜, 호스트(도메인과 포트), 경로, 해시(#뒤), 그리고 쿼리 파라미터를 키·값 표로 보여줍니다. 값은 자동으로 퍼센트 디코딩되므로 인코딩된 쿼리 문자열도 읽을 수 있습니다.