URL 인코딩 디코딩 — 퍼센트 인코딩 변환과 URL 분석

URL 인코딩으로 텍스트를 URL에 넣을 수 있게 바꾸고, URL 디코딩으로 %로 이스케이프된 문자열을 읽을 수 있는 텍스트로 되돌리고, URL을 구성 요소와 쿼리 매개변수로 나눠 확인하세요. 매개변수 하나, URL 전체, HTML 폼 데이터 중 인코딩 방식을 고를 수 있어요.

사용 방법

'인코딩' 또는 '디코딩'을 고르세요.
모드를 선택하세요. 매개변수 값 하나에는 '구성 요소', URL 구조를 유지하려면 '전체 URL', 공백이 +가 되는 HTML 폼 데이터에는 '폼 (공백을 +로)'을 쓰세요.
텍스트를 붙여넣으세요. 입력하는 대로 결과가 바로 바뀌어요.
입력한 내용이 URL이면 프로토콜, 호스트, 경로, 쿼리 매개변수가 아래에 표시돼요.

옵션 설명

구성 요소: 영문자, 숫자, - _ . ~를 제외한 모든 문자를 인코딩해요. 쿼리 매개변수 값이나 경로 구간 하나에 사용하세요. encodeURIComponent와 같으며, RFC 3986이 예약한 ! ' ( ) *도 추가로 인코딩해요.
전체 URL: URL 구조를 이루는 문자(: / ? # & =)는 그대로 두고 공백과 ASCII가 아닌 문자만 인코딩해요. JavaScript의 encodeURI와 같아요.
폼: HTML 폼이 사용하는 application/x-www-form-urlencoded 방식이에요. 공백은 %20 대신 +가 되고, 디코딩할 때는 +를 다시 공백으로 바꿔요.

예시

입력	구성 요소	전체 URL	폼
`a b&c`	`a%20b%26c`	`a%20b&c`	`a+b%26c`
`café`	`caf%C3%A9`	`caf%C3%A9`	`caf%C3%A9`
`https://x.com/?q=1 2`	`https%3A%2F%2Fx.com%2F%3Fq%3D1%202`	`https://x.com/?q=1%202`	`https%3A%2F%2Fx.com%2F%3Fq%3D1+2`

매개변수가 있는 URL 만들기

사용자 입력을 쿼리 문자열에 넣을 때는 값마다 따로 인코딩하세요.

const url = `https://example.com/search?q=${encodeURIComponent(query)}&page=2`;

마지막에 URL 전체를 인코딩하면 값 안의 &와 =가 인코딩되지 않아 매개변수가 깨져요.

자주 묻는 질문

%20과 +는 어떻게 다른가요?

둘 다 공백을 나타낼 수 있지만 쓰이는 곳이 달라요. %20은 URL 어디에서나 통하고, +는 폼 제출의 쿼리 문자열 안에서만 공백을 뜻해요. 경로에서 +는 그냥 더하기 기호예요.

텍스트가 두 번 인코딩됐어요(%2520). 왜 그런가요?

두 번 인코딩되어 %20의 %가 다시 %25로 바뀐 거예요. 두 번 디코딩하고, 코드에서는 값을 한 곳에서만 인코딩하도록 하세요.

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

URL에 넣는 매개변수 값마다 encodeURIComponent('구성 요소' 모드)를 쓰세요. encodeURI('전체 URL')는 공백이나 ASCII가 아닌 문자가 들어 있을 수 있는 완성된 URL에만 쓰세요.

퍼센트 인코딩이 잘못되었다는 오류는 무슨 뜻인가요?

% 뒤에 16진수 두 자리가 오지 않았거나, 바이트가 올바른 UTF-8을 이루지 않는다는 뜻이에요. 오류 메시지에 처음 잘못된 부분의 위치가 표시돼요.

한글이나 한자는 URL에서 어떻게 인코딩되나요?

각 문자를 UTF-8 바이트로 바꾼 뒤 바이트마다 %XX로 적어요. 예를 들어 中은 %E4%B8%AD, 한은 %ED%95%9C가 돼요.

개인정보 보호

이 도구는 전적으로 브라우저에서 실행돼요. 파일과 텍스트는 기기에서 처리되며 서버로 업로드되지 않아요.

URL 인코딩 · 디코딩