URL 인코딩/디코딩

URL의 특수 문자를 인코딩하거나 퍼센트 인코딩된 URL 문자열을 디코딩합니다. 웹 개발 및 API 작업에 필수적입니다.

사용 방법

  1. 입력 영역에 텍스트 또는 URL을 입력하거나 붙여넣습니다
  2. 「인코딩」으로 특수 문자를 퍼센트 인코딩하거나 「디코딩」으로 되돌립니다
  3. 결과를 복사하여 애플리케이션에서 사용합니다

자주 묻는 질문

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

    URL 인코딩(퍼센트 인코딩이라고도 함)은 특수 문자를 퍼센트 기호와 16진수 값으로 대체합니다. 예를 들어 공백은 %20이 됩니다.

  • 언제 URL 인코딩을 해야 하나요?

    URL 매개변수, 쿼리 문자열, 또는 HTTP로 전송될 폼 데이터에 특수 문자를 포함할 때 URL 인코딩을 합니다.

  • encodeURI와 encodeURIComponent의 차이는 무엇인가요?

    encodeURI는 전체 URI를 인코딩하며 :, /, ?와 같은 문자를 보존합니다. encodeURIComponent는 문자, 숫자, 일부 특수 문자를 제외한 모든 것을 인코딩하며 개별 매개변수 값 인코딩에 적합합니다.

  • 유니코드 문자를 처리할 수 있나요?

    네, 유니코드 문자는 먼저 UTF-8 바이트로 인코딩된 후 각 바이트가 퍼센트 인코딩됩니다.

URL 인코딩이란

URL(Uniform Resource Locator)은 웹 자원의 위치를 나타내는 주소입니다. URL에서 사용할 수 있는 문자는 엄격히 제한되어 있으며 이는 RFC 3986 표준에 정의되어 있습니다. URL에 안전하게 사용할 수 있는 **예약되지 않은 문자(unreserved characters)**는 알파벳 대소문자, 숫자, 그리고 -, _, ., ~ 네 가지 특수문자뿐입니다.

한글, 중국어, 일본어 등 비ASCII 문자나 공백, &, ?, = 같은 특수문자를 URL에 포함하려면 **퍼센트 인코딩(percent-encoding)**으로 변환해야 합니다.

퍼센트 인코딩의 동작 방식

퍼센트 인코딩은 인코딩이 필요한 문자를 %XX 형태로 변환합니다. 여기서 XX는 해당 문자의 UTF-8 바이트를 16진수로 표현한 값입니다.

예시:

  • 공백 → %20
  • 한글 "안" → UTF-8로 0xEC 0x95 0x88%EC%95%88
  • &%26
  • =%3D

한 가지 주의할 점은 공백을 +로 인코딩하는 방식도 있다는 것입니다. 이는 HTML 폼 데이터(application/x-www-form-urlencoded)에서 사용하는 방식으로, URL 표준의 %20과는 구분됩니다.

encodeURI vs encodeURIComponent

JavaScript에서 URL 인코딩을 위한 두 가지 내장 함수가 있으며, 사용 목적이 다릅니다.

encodeURI

완성된 전체 URL을 인코딩할 때 사용합니다. URL 구조에서 의미를 갖는 문자들(:, /, ?, #, &, = 등)은 인코딩하지 않고 보존합니다.

encodeURI("https://example.com/검색?q=안녕 세상")
// → "https://example.com/%EA%B2%80%EC%83%89?q=%EC%95%88%EB%85%95%20%EC%84%B8%EC%83%81"

encodeURIComponent

URL의 개별 파라미터 값을 인코딩할 때 사용합니다. ?, &, =, / 등 URL 구분자까지 모두 인코딩합니다.

encodeURIComponent("검색?q=안녕&lang=ko")
// → "%EA%B2%80%EC%83%89%3Fq%3D%EC%95%88%EB%85%95%26lang%3Dko"

쿼리 파라미터 값에는 항상 encodeURIComponent를 사용하는 것이 올바른 방법입니다.

개발 현장에서의 활용

  • API 호출: 검색어, 필터 값 등을 쿼리 파라미터로 전달할 때 인코딩이 필수입니다.
  • 리다이렉트 URL: OAuth 인증 등에서 콜백 URL을 파라미터로 넘길 때 인코딩해야 이중 파싱 문제를 방지합니다.
  • 파일명 포함 URL: 한글 파일명이나 공백이 포함된 경로를 URL로 만들 때 활용합니다.