URL 인코딩(퍼센트 인코딩이라고도 함)은 URL에서 특수 문자를 %XX 형식으로 나타내는 메커니즘으로, 여기서 XX는 16진수 값입니다. 이 인코딩은 웹 개발, API 통합 및 데이터 전송에 필수적입니다. URL 또는 쿼리 매개변수에 공백, 앰퍼샌드(&), 물음표(?) 또는 비ASCII 문자와 같은 특수 문자를 포함해야 할 때, 적절한 인코딩은 URL 구조를 깨뜨리지 않고 데이터를 안전하게 전송할 수 있도록 보장합니다. 이 도구는 두 가지 인코딩 모드를 지원합니다: 전체 URL 인코딩(encodeURI)은 :, /, ?, &, =와 같은 URL 구조 문자를 보존하면서 다른 특수 문자를 인코딩합니다—전체 URL을 인코딩하는 데 이상적입니다. 구성 요소 인코딩(encodeURIComponent)은 URL 구조 문자를 포함한 모든 특수 문자를 인코딩합니다—쿼리 매개변수 값, 양식 데이터 및 API 요청 페이로드에 완벽합니다. 모든 처리는 서버로 데이터를 전송하지 않고 브라우저의 클라이언트 측에서 수행됩니다.
How to Use
상단의 라디오 버튼을 사용하여 인코딩 또는 디코딩 모드를 선택합니다. 인코딩의 경우: 텍스트 또는 URL을 입력 영역에 붙여넣으면 출력이 자동으로 인코딩된 결과로 업데이트됩니다. 공백 인코딩 스타일을 선택하세요: %20(표준, RFC 3986 준수) 또는 +(쿼리 문자열 및 양식 데이터에서 일반적). '전체 URL 인코딩'을 토글하여 전체 URL 인코딩(:, /, ?, &, = 보존)과 구성 요소 인코딩(모두 인코딩) 사이를 전환합니다. 디코딩의 경우: 인코딩된 URL 텍스트를 붙여넣으면 %20 및 + 공백 표현을 모두 처리하여 자동으로 읽을 수 있는 형식으로 디코딩됩니다. 복사 버튼을 사용하여 한 번의 클릭으로 출력을 복사하거나 결과를 텍스트 파일로 다운로드합니다.
Common Use Cases & Examples
**쿼리 매개변수**: 'smart watch'를 URL 쿼리 문자열용으로 'smart%20watch' 또는 'smart+watch'로 인코딩합니다. **API 요청**: 'https://api.example.com/search?q=전자제품%20%26%20가젯&가격=%3E100'과 같이 올바르게 인코딩된 매개변수로 API URL을 구축합니다. **OAuth 및 서명**: 많은 OAuth 플로우 및 API 서명 알고리즘은 URL 인코딩된 매개변수가 필요합니다. **양식 데이터**: application/x-www-form-urlencoded 콘텐츠 유형에 대한 양식 제출을 인코딩합니다. **딥 링크**: 매개변수가 있는 모바일 앱용 인코딩된 딥 링크를 생성합니다. **디버깅**: API 응답 또는 브라우저 URL 표시줄을 디코딩하여 실제 매개변수 값을 확인합니다. **특수 문자**: URL에서 &, =, ?, #, /, @, :, <, >, \", ', %, + 및 공백과 같은 문자를 처리합니다.
Limitations & Important Notes
이 도구는 UTF-8 인코딩(현대 웹 표준)을 사용합니다. UTF-8이 아닌 인코딩은 지원되지 않습니다. 이 도구는 표준 URL 인코딩을 처리합니다. 다른 인코딩 체계(base64 또는 HTML 엔티티 등)의 경우 해당 도구를 사용하세요. 매우 긴 URL(>100KB)은 이전 브라우저에서 성능 문제를 일으킬 수 있습니다. 디코딩 모드에서 잘못된 형식의 퍼센트 시퀀스(%ZZ 또는 불완전한 시퀀스 등)는 오류 메시지를 트리거합니다. '전체 URL 인코딩' 옵션은 http:// 또는 https://로 시작하는 전체 URL에만 사용해야 합니다—쿼리 매개변수 값만 있는 경우 구성 요소 인코딩을 사용하세요. URL 인코딩은 텍스트 크기를 증가시킨다는 것을 기억하세요: 각 특수 문자는 3개의 문자(%XX)가 되므로 'hello world'(11자)는 'hello%20world'(13자)가 됩니다.
// JavaScript URL Encoding Examples
// Encode full URL (preserves protocol, slashes, etc.)
const fullUrl = 'https://example.com/search?q=hello world';
const encodedUrl = encodeURI(fullUrl);
console.log(encodedUrl);
// https://example.com/search?q=hello%20world
// Encode URL component (encodes all special chars)
const queryParam = 'hello world & special chars';
const encodedParam = encodeURIComponent(queryParam);
console.log(encodedParam);
// hello%20world%20%26%20special%20chars
// Build URL with encoded parameters
const baseUrl = 'https://api.example.com/search';
const params = {
q: 'smart watch',
category: 'electronics & gadgets',
price: '>100'
};
const queryString = Object.entries(params)
.map(([key, value]) =>
`${encodeURIComponent(key)}=${encodeURIComponent(value)}`)
.join('&');
const fullApiUrl = `${baseUrl}?${queryString}`;
console.log(fullApiUrl);
// https://api.example.com/search?q=smart%20watch&category=electronics%20%26%20gadgets&price=%3E100
// Decode URL
const encoded = 'https%3A%2F%2Fexample.com%2Fsearch%3Fq%3Dhello+world';
const decoded = decodeURIComponent(encoded.replace(/\+/g, ' '));
console.log(decoded);
// https://example.com/search?q=hello world
// Handle encoding errors
try {
const malformed = '%E0%A4%A'; // Incomplete UTF-8 sequence
const result = decodeURIComponent(malformed);
} catch (error) {
console.error('Invalid URL encoding:', error.message);
}