URL 인코더/디코더
URL 인코딩 완벽 가이드
1. URL 인코딩이란?
URL 인코딩(퍼센트 인코딩)은 URL에서 안전하지 않은 문자를 %와 16진수 코드로 변환하는 과정입니다. URL은 ASCII 문자만 허용하므로 한글, 특수문자, 공백 등은 인코딩이 필요합니다. 예를 들어 공백은 %20, @는 %40, 한글 "안녕"은 %EC%95%88%EB%85%95으로 변환됩니다. RFC 3986 표준에 정의되어 있으며, A-Z, a-z, 0-9, -, _, ., ~ 외의 문자는 인코딩해야 합니다. 쿼리 파라미터, 경로, 해시 등 URL의 각 부분마다 인코딩 규칙이 다릅니다.
2. 특수문자 인코딩 필요성
URL에서 특수문자는 특별한 의미를 가지므로 값으로 사용하려면 인코딩이 필수입니다. 예를 들어 &는 파라미터 구분자이므로 값에 &를 포함하려면 %26으로 인코딩해야 합니다. =는 키-값 구분자, ?는 쿼리 시작, #은 프래그먼트 시작을 의미합니다. 공백도 +나 %20으로 인코딩합니다. 한글이나 특수문자를 인코딩하지 않으면 서버에서 올바르게 파싱하지 못하거나 404 오류가 발생합니다. 특히 검색어, 사용자 입력값을 URL에 포함할 때는 반드시 인코딩하세요.
3. 쿼리 파라미터 인코딩
쿼리 파라미터는 URL에서 가장 자주 인코딩이 필요한 부분입니다. 예: https://example.com/search?q=검색어&category=IT. 여기서 "검색어"와 "IT"는 모두 인코딩해야 합니다. JavaScript의 encodeURIComponent()를 사용하면 =, &, ? 등도 인코딩되어 쿼리 파라미터 값으로 안전하게 전달됩니다. encodeURI()는 URL 전체를 인코딩할 때 사용하지만 =, &, ?는 인코딩하지 않아 쿼리 값에는 부적합합니다. 항상 키와 값을 개별적으로 encodeURIComponent()로 인코딩하세요.
4. encodeURI vs encodeURIComponent
JavaScript에는 두 가지 URL 인코딩 함수가 있습니다. encodeURI()는 URL 전체를 인코딩하며 :, /, ?, &, = 같은 URL 구조 문자는 인코딩하지 않습니다. 완전한 URL을 인코딩할 때 사용합니다. encodeURIComponent()는 URL의 부분(파라미터 값 등)을 인코딩하며 구조 문자도 모두 인코딩합니다. 쿼리 파라미터, 경로 세그먼트 같은 개별 컴포넌트에 사용합니다. 대부분의 경우 encodeURIComponent()를 사용하는 것이 안전합니다. decodeURI()와 decodeURIComponent()로 각각 디코딩할 수 있습니다.
5. 국제 도메인 이름(IDN)
한글이나 다른 언어로 된 도메인 이름(예: 한국.com)은 Punycode로 변환됩니다. Punycode는 유니코드 도메인을 ASCII로 표현하는 방법으로, xn-- 접두사를 사용합니다. 예: "한국.com"은 "xn--3e0b707e.com"으로 변환됩니다. 브라우저는 자동으로 이 변환을 수행하지만, 코드에서 직접 처리할 때는 Punycode 라이브러리가 필요합니다. URL의 경로나 쿼리는 일반 퍼센트 인코딩을 사용하지만, 도메인은 Punycode를 사용한다는 점에 주의하세요.
6. URL 인코딩 모범 사례
URL 인코딩 시 주의사항이 있습니다. 사용자 입력은 항상 인코딩하여 XSS 공격을 방지하세요. 이미 인코딩된 URL을 중복 인코딩하지 않도록 주의하세요(이중 인코딩 문제). URL을 구성할 때는 각 부분을 개별적으로 인코딩한 후 결합하세요. fetch(), axios 같은 HTTP 클라이언트는 자동으로 인코딩하는 경우가 많으니 중복을 피하세요. 서버에서는 자동 디코딩을 지원하므로 대부분 명시적 디코딩이 불필요합니다. URL을 로깅하거나 디버깅할 때는 디코딩된 형태를 확인하는 것이 읽기 쉽습니다.