URL 인코더 · 디코더 (URL Encoder & Decoder)

URL 인코딩(퍼센트 인코딩)이란 무엇인가요?

// Encode a query parameter value
const param = encodeURIComponent('hello world & goodbye');
console.log(param); // → 'hello%20world%20%26%20goodbye'

// Encode a full URL (preserves structure)
const url = encodeURI('https://example.com/path name?q=hello world');
console.log(url); // → 'https://example.com/path%20name?q=hello%20world'

// Decode a percent-encoded string
const decoded = decodeURIComponent('hello%20world%20%26%20goodbye');
console.log(decoded); // → 'hello world & goodbye'

// Build a URL with encoded parameters
const base = 'https://api.example.com/search';
const query = `?q=${encodeURIComponent('你好')}&lang=zh`;
console.log(base + query); // → 'https://api.example.com/search?q=%E4%BD%A0%E5%A5%BD&lang=zh'

주요 기능

예시

https%3A%2F%2Fexample.com%2Fsearch%3Fq%3Dhello%20world%26lang%3Den

https://example.com/search?q=hello world&lang=en

https://example.com/search?q=你好世界

https://example.com/search?q=%E4%BD%A0%E5%A5%BD%E4%B8%96%E7%95%8C

https://example.com/api?name=홍길동&role=admin&lang=ko&sort=date desc

https://example.com/api?name=%ED%99%8D%EA%B8%B8%EB%8F%99&role=admin&lang=ko&sort=date%20desc

https://user:pass@example.com:8080/path/to/page?key=value&arr[]=1#section-2

https://user:pass@example.com:8080/path/to/page?key=value&arr%5B%5D=1#section-2

https://auth.example.com/authorize?redirect_uri=https://myapp.com/callback?code=abc&state=xyz

https://auth.example.com/authorize?redirect_uri=https%3A%2F%2Fmyapp.com%2Fcallback%3Fcode%3Dabc%26state%3Dxyz

사용 방법

1. 1

   URL 또는 인코딩된 문자열 입력

   디코딩된 영역에 URL을 붙여넣어 인코딩하거나, 인코딩된 영역에 퍼센트 인코딩 문자열을 붙여넣어 디코딩하십시오. 용도에 따라 encodeURI 또는 encodeURIComponent 모드를 선택하십시오.

2. 2

   결과와 파싱된 구조 확인

   입력과 동시에 반대편 영역이 즉시 갱신됩니다. URL 파서는 URL을 프로토콜, 호스트, 포트, 경로, 쿼리 파라미터, 조각으로 나누며 모두 편집 가능합니다.

3. 3

   복사 또는 재구성

   복사를 눌러 인코딩되거나 디코딩된 결과를 복사합니다. 개별 URL 구성 요소를 편집한 뒤 재구성을 누르면 수정된 부분으로 새 URL을 만들 수 있습니다.

흔한 오류

https://example.com/path%2520with%2520spaces

https://example.com/path%20with%20spaces

https://example.com/my+file+name.pdf

https://example.com/my%20file%20name.pdf

encodeURI('key=value&more')  → 'key=value&more' (& not encoded!)

encodeURIComponent('key=value&more')  → 'key%3Dvalue%26more'

Decoding %82%B1%82%F1 as UTF-8 (this is Shift-JIS for こん)

Using UTF-8: %E3%81%93%E3%82%93 correctly decodes to こん

encodeURIComponent('../images/photo.jpg')  → '..%2Fimages%2Fphoto.jpg'

Encode each segment: '../images/' + encodeURIComponent('my photo.jpg')

일반적인 활용 사례

깨진 URL 디버깅

서버 로그, 오류 메시지, 브라우저 개발자 도구의 퍼센트 인코딩된 URL을 디코딩해 원래 사람이 읽을 수 있는 텍스트로 확인합니다.

API 개발

REST API 호출의 쿼리 파라미터 값을 인코딩하여 &, =, 공백 같은 특수 문자가 요청 URL을 깨뜨리지 않도록 합니다.

OAuth 흐름 설정

OAuth 인증 URL의 redirect_uri 등 URL 파라미터를 적절히 인코딩하여 인증 실패를 예방합니다.

국제화 URL

한국어, 중국어, 일본어, 아랍어 등 비 ASCII 문자가 포함된 URL을 국제화된 웹 애플리케이션용으로 인코딩·디코딩합니다.

마케팅 링크 분석

이메일 캠페인과 광고 플랫폼의 추적 URL을 디코딩하여 포함된 UTM 파라미터와 리다이렉트 체인을 파악합니다.

URL 구조 검사

복잡한 URL을 프로토콜, 호스트, 포트, 경로, 쿼리 파라미터, 조각 구성 요소로 파싱하여 분석하고 수정합니다.

기술 세부사항

RFC 3986의 reserved와 unreserved 문자

RFC 3986은 절대로 인코딩할 필요가 없는 unreserved 문자(A-Z, a-z, 0-9, -, ., _, ~)와 URI 구분자 역할을 하는 reserved 문자(:, /, ?, #, [, ], @, !, $, &, ', (, ), *, +, ,, ;, =)를 정의합니다. reserved 문자는 데이터로 사용될 때는 퍼센트 인코딩되어야 합니다.

UTF-8 바이트 인코딩 흐름

비 ASCII 문자는 먼저 유니코드 코드 포인트로 변환된 뒤 UTF-8 바이트(코드 포인트 범위에 따라 1-4바이트)로 인코딩되고, 마지막으로 각 바이트가 %XX로 퍼센트 인코딩됩니다. 예: é(U+00E9) → UTF-8 바이트 C3 A9 → %C3%A9. 이모지 🎉(U+1F389) → UTF-8 바이트 F0 9F 8E 89 → %F0%9F%8E%89.

URL과 URI 용어

URI(Uniform Resource Identifier)는 임의의 식별자 문자열을 가리키는 일반 용어입니다. URL(Uniform Resource Locator)은 https://처럼 접근 방법도 함께 명시하는 URI입니다. RFC 3986의 인코딩 규칙은 모든 URI에 적용됩니다. JavaScript API는 URI 용어(encodeURI, decodeURI)를 따르며 일상에서는 URL 용어가 더 흔합니다.

모범 사례

용도에 맞는 모드 사용

개별 쿼리 파라미터 키와 값에는 encodeURIComponent()를 사용하십시오. encodeURI()는 전체 URL이 있고 구조를 깨뜨리지 않으면서 안전하지 않은 문자만 인코딩하고 싶을 때만 사용하십시오. &, =를 비롯한 reserved 문자가 포함될 수 있는 파라미터 값에는 encodeURI()를 절대 사용하지 마십시오.

이중 인코딩 피하기

문자열을 인코딩하기 전에 이미 인코딩되었는지 확인하십시오. 기존 % 시퀀스가 있는지 살펴보십시오. 이미 인코딩된 문자열을 또 인코딩하면 %20이 %2520이 되고 %3D가 %253D가 됩니다. 확신이 없다면 먼저 디코딩한 뒤 한 번만 인코딩하십시오.

서버 측 디코딩

대부분의 웹 프레임워크는 애플리케이션 코드가 값을 받기 전에 URL 파라미터를 자동으로 디코딩합니다. 프레임워크가 이미 디코딩한 파라미터를 수동으로 또 디코딩하지 마십시오. 원본 값에 퍼센트 시퀀스가 들어 있으면 문제가 생길 수 있습니다.

OAuth와 API 서명을 위한 값 인코딩

OAuth 1.0 서명 기반 문자열과 많은 API 서명 알고리즘은 엄격한 RFC 3986 퍼센트 인코딩을 요구합니다. encodeURIComponent()를 사용한 뒤 해당 함수가 인코딩하지 않는 문자(!, ', (, ), *)를 명세가 요구하면 직접 퍼센트 인코딩 등가물로 치환하십시오.

자주 묻는 질문