URL 인코딩

관련 추천

사용 사례

• API 매개변수 디버깅: encodeURIComponent와 encodeURI 출력 차이를 비교하여 인터페이스 서명 불일치 문제 해결
• 로그 디코딩: 로그의 URL 인코딩 내용을 일괄 디코딩하여 가독성 있는 텍스트로 복원
• URL 구성: Query Only 모드로 키 이름은 유지하고 값만 인코딩하여 수동 조합으로 인한 형식 오류 방지
• 프론트엔드 개발: 인코딩 하이라이트로 어떤 문자가 이스케이프되는지 이해하기 쉬워 페이지 이동 및 리디렉션 디버깅에 도움
• 데이터 마이그레이션: 레거시 시스템에서 내보낸 URL 인코딩 데이터를 일괄 처리하여 새 형식으로 변환

주요 기능

• 네 가지 인코딩 모드: encodeURIComponent / encodeURI / full / RFC 3986 원클릭 전환, 각 규칙의 출력 차이를 실시간으로 비교
• 인코딩 하이라이트: 이스케이프된 %XX 문자를 실시간으로 하이라이트 표시, 호박색 마크로 인코딩 결과를 한눈에 파악
• 배치 모드: 여러 줄 일괄 인코딩/디코딩 지원, 각 줄을 독립적으로 처리. 로그나 일괄 데이터 처리에 적합
• Query Only 모드: URL 매개변수 값 부분(등호 뒤 내용)만 인코딩하고 키 이름, 기호, 경로 구조는 그대로 유지
• 실시간 디바운스: 300ms 자동 인코딩/디코딩, 버튼 클릭 필요 없이 입력하면 즉시 결과 표시
• 문자 수 카운트: 입력 문자 수를 실시간으로 표시, API 매개변수 길이 제한 확인에 편리

이용 방법

1. 인코딩/디코딩할 URL 또는 텍스트를 입력하거나 붙여넣기
2. 인코딩 방향(인코딩/디코딩)과 인코딩 모드(Component / URI / full / RFC 3986) 선택
3. 여러 줄 데이터를 처리하려면 배치 모드를 활성화하고, 매개변수 값만 인코딩하려면 Query Only를 활성화
4. 하이라이트된 결과를 확인하고 인코딩된 문자열을 복사하여 API 요청이나 URL 구성에 사용

자주 묻는 질문

URL 인코딩이란 무엇인가요?

术语表

퍼센트 인코딩(Percent-encoding)

URL 인코딩의 정식 명칭. % 뒤에 두 자리 16진수로 문자를 표현하는 인코딩 방식입니다. 예를 들어 공백은 %20, 중국어 '中'은 %E4%B8%AD으로 인코딩됩니다.Wikipedia - 퍼센트 인코딩

encodeURIComponent

JavaScript 내장 함수. A-Z a-z 0-9 - _ . ! ~ * ' ( ) 외의 모든 문자를 인코딩합니다. URL 쿼리 매개변수의 개별 값을 인코딩할 때 가장 많이 사용됩니다.

encodeURI

JavaScript 내장 함수. URL 구조 문자(: / ? # [ ] @ ! $ & ' ( ) * + , ; =)를 보존하고 정말 인코딩이 필요한 문자만 인코딩합니다. 전체 URL을 인코딩할 때 사용합니다.

RFC 3986

URI 일반 구문에 관한 최신 IETF 표준(2005년). URL 인코딩 규칙을 정의하고 있으며 물결표 ~를 비예약 문자(인코딩 불필요)로 분류합니다. 구 RFC 2396과 RFC 1738을 대체합니다.RFC 3986

예약 문자(Reserved Characters)

URL에서 특별한 의미를 가지는 문자(: / ? # [ ] @ ! $ & ' ( ) * + , ; = 등). 이러한 문자는 데이터로 사용할 때는 인코딩해야 하지만 구조적 위치에서는 인코딩해서는 안 됩니다.

비예약 문자(Unreserved Characters)

URL의 어떤 위치에서도 인코딩 없이 사용할 수 있는 안전한 문자. A-Z, a-z, 0-9, -, _, ., ~(RFC 3986 기준)가 포함됩니다.

쿼리 문자열(Query String)

URL의 ? 뒤 부분으로 key=value 쌍으로 구성되며 &로 구분됩니다. 예를 들어 ?name=장삼&age=20에서 name=장삼과 age=20이 두 개의 매개변수입니다.

URLSearchParams

최신 브라우저가 제공하는 API. URL 쿼리 문자열을 쉽게 구성하고 파싱할 수 있으며 인코딩과 디코딩을 자동으로 처리합니다. 수동으로 문자열을 조합하는 것보다 안전하고 신뢰할 수 있습니다.

application/x-www-form-urlencoded

HTML 폼의 기본 제출 형식. 공백이 %20이 아닌 +로 인코딩되는 점이 encodeURIComponent와 다릅니다. 서버 사이드 프레임워크는 보통 두 형식을 모두 자동으로 처리합니다.

UTF-8 인코딩

웹 표준 문자 인코딩. URL 인코딩에서는 비ASCII 문자(중국어, 이모지 등)를 먼저 UTF-8 바이트 시퀀스로 변환한 다음 각 바이트를 %XX 형식으로 인코딩합니다.

네 가지 인코딩 모드 문자 이스케이프 비교

자주 사용되는 URL 예약 문자 퀵 레퍼런스

Code Examples

// encodeURIComponent: 개별 매개변수 값 인코딩 (가장 일반적)
const param = encodeURIComponent('장삼&리스');
console.log(param); // %E5%BC%A0%E4%B8%89%26%E6%9D%8E%E5%9B%9B

// encodeURI: 전체 URL 인코딩 (:/?#&= 등 구조 문자 보존)
const url = encodeURI('https://example.com/search?q=안녕하세요 세계');
console.log(url);

// 디코딩
const decoded = decodeURIComponent(param);
console.log(decoded); // 장삼&리스

// RFC 3986 호환 (~ 인코딩 안 함)
function rfc3986Encode(str) {
  return encodeURIComponent(str).replace(/[!'()*]/g, c => '%' + c.charCodeAt(0).toString(16).toUpperCase());
}

// URLSearchParams API (현대적인 방식, 자동 인코딩 처리)
const params = new URLSearchParams({ name: '장삼', city: '북경' });
console.log(params.toString());
// name=%E5%BC%A0%E4%B8%89&city=%E5%8C%97%E4%BA%AC

from urllib.parse import quote, unquote, urlencode, quote_plus

# quote: encodeURIComponent와 유사
encoded = quote('장삼&리스')
print(encoded)  # %E5%BC%A0%E4%B8%89%26%E6%9D%8E%E5%9B%9B

# RFC 3986 모드 (~ 인코딩 안 함, 기본값)
print(quote('hello~world'))  # hello~world

# quote_plus: 공백을 +로 인코딩 (폼 형식)
print(quote_plus('hello world'))  # hello+world

# 디코딩
print(unquote(encoded))  # 장삼&리스

# urlencode: 쿼리 문자열 구성
params = urlencode({'name': '장삼', 'city': '북경'})
print(params)
# name=%E5%BC%A0%E4%B8%89&city=%E5%8C%97%E4%BA%AC

import java.net.URLEncoder;
import java.net.URLDecoder;
import java.net.URI;
import java.nio.charset.StandardCharsets;

public class URLEncodeExample {
    public static void main(String[] args) throws Exception {
        // URL 인코딩 (URLEncoder는 폼 형식, 공백은 +가 됨)
        String encoded = URLEncoder.encode("장삼&리스", "UTF-8");
        System.out.println(encoded);
        // %E5%BC%A0%E4%B8%89%26%E6%9D%8E%E5%9B%9B

        // 디코딩
        String decoded = URLDecoder.decode(encoded, "UTF-8");
        System.out.println(decoded); // 장삼&리스

        // 전체 URL 구성 (URI 클래스가 자동으로 인코딩 처리)
        URI uri = new URI("https", "example.com", "/search", "q=안녕하세요", null);
        System.out.println(uri.toASCIIString());
    }
}

Authoritative References

• ReferenceRFC 3986 - Uniform Resource Identifier (URI): Generic Syntax
• ReferenceRFC 1738 - Uniform Resource Locators (URL)
• ReferenceMDN Web Docs - encodeURIComponent()
• ReferenceMDN Web Docs - encodeURI()
• ReferenceWikipedia - 퍼센트 인코딩