URL 인코더·디코더

텍스트를 URL 인코딩(퍼센트 인코딩) 형식으로 변환하거나 디코딩합니다.

문자열을 encodeURIComponent로 퍼센트 인코딩하거나 decodeURIComponent로 디코딩합니다. 쿼리 값 하나를 안전하게 넣을 때 쓰는 도구입니다.

사용 순서

인코딩 카드의 문자열 칸에 값을 입력합니다. 결과는 바로 아래에 나옵니다.
Copy 버튼으로 인코딩된 문자열을 복사합니다.
디코딩 카드에 %로 된 문자열을 넣으면 원래 문자열이 나옵니다.
잘못된 % 시퀀스가 있으면 입력 칸 아래에 오류 문구가 표시되는지 확인합니다.

예시

Hello world :) 를 인코딩하면 Hello%20world%20%3A) 가 나옵니다. 반대로 Hello%20world%20%3A) 를 디코딩하면 Hello world :) 가 됩니다. 닫는 괄호 )는 인코딩되지 않습니다.

한계

문자열 하나를 값으로 인코딩하므로 / ? & = 까지 모두 인코딩합니다. 전체 URL을 통째로 넣으면 주소가 깨집니다. A-Z, a-z, 0-9와 - _ . ! ~ * ( ) 는 인코딩하지 않습니다. 잘못된 % 시퀀스가 있으면 디코딩 결과가 빈 값으로 나옵니다.

보안 주의

전체 URL을 인코딩하면 프로토콜과 경로 구분자가 모두 바뀌어 링크가 동작하지 않습니다. 쿼리 값을 하나씩 인코딩해서 주소를 조립하세요.

배경 지식

URL에서 허용되는 문자는 규격으로 정해져 있어서, 그 밖의 문자(공백, 한글, 기호)는 %와 두 자리 16진수로 바꿔야 합니다. 한글은 UTF-8에서 세 바이트이므로 한 글자가 %XX 세 개로 바뀝니다. 이 방식을 퍼센트 인코딩이라고 하며, 쿼리 문자열과 경로 조각 모두에서 같은 원리가 적용됩니다.

encodeURIComponent는 구분자 문자까지 모두 인코딩하므로 값 하나를 감쌀 때 적합합니다. 반면 encodeURI는 주소 구조를 살리려고 / ? # & = 등을 그대로 둡니다. 두 함수를 헷갈려 주소 전체에 encodeURIComponent를 쓰면 주소가 깨지는 일이 흔합니다. 값과 주소를 따로 인코딩해서 조합하는 습관이 이런 실수를 줄여 줍니다.

자주 묻는 질문

공백을 %20과 +로 인코딩하는 것은 어떻게 다른가요?

%20은 URL 경로와 쿼리에서 공백을 나타내는 표준 표현입니다. +는 HTML 폼 데이터(application/x-www-form-urlencoded)에서 공백을 뜻합니다. 이 도구는 %20을 만들므로, 폼 데이터를 받는 쪽에서 +를 공백으로 처리하는지 확인해야 합니다.

이미 인코딩된 문자열을 다시 인코딩하면 어떻게 되나요?

% 기호 자체가 %25로 바뀌어 원래 값이 복원되지 않습니다. 예를 들어 %20을 한 번 더 인코딩하면 %2520이 됩니다. 이중 인코딩이 의심되면 원문이 어디서 왔는지 먼저 확인하세요.

디코딩할 때 + 문자는 어떻게 되나요?

decodeURIComponent는 +를 공백으로 바꾸지 않고 그대로 둡니다. 그래서 폼에서 온 값에 있는 +는 공백이 아니라 + 기호로 결과에 남습니다. 폼 데이터를 해석할 때 이 차이 때문에 결과가 달라질 수 있습니다.