개발자를 위한 URL 인코딩과 디코딩 설명
URL에 공백을 입력하거나, 키릴 문자 단어를 입력하거나, 주소 자체가 아닌 데이터에 속하는 앰퍼샌드를 입력하면 문제가 생깁니다. 웹은 소수의 예측 가능한 ASCII 문자에 대해서만 안전한 전송을 보장합니다. 그 외의 모든 것은 라우터, 서버, 브라우저가 모두 동의하는 형식으로 래핑되어야 합니다. 그 형식이 바로 퍼센트 인코딩, 일반적으로 URL 인코딩이라고 불리며, 이 페이지에서는 브라우저 내에서 직접 텍스트를 양방향으로 변환할 수 있습니다.
퍼센트 인코딩이란 무엇인가
규칙은 기계적이고 따르기 쉽습니다. 글자 그대로 사용할 수 없는 모든 문자는 % 기호와 그 문자의 바이트 값을 나타내는 두 자리 16진수로 교체됩니다. 공백은 %20이 됩니다. 더하기 기호는 %2B가 됩니다. 번호 기호는 %23이 됩니다. UTF-8 하에서 대부분의 비ASCII 텍스트처럼 한 문자가 여러 바이트에 매핑되면, 여러 트리플렛이 연속으로 생성됩니다. 유로 기호는 %E2%82%AC가 됩니다. 디코딩은 그 과정을 역으로 수행하여 각 트리플렛을 원래 바이트로 읽어냅니다.
이 규칙은 URI 사양(RFC 3986)에 정의되어 있으며 의도적으로 단순합니다. 단순함이 핵심입니다. 지구상의 모든 올바른 HTTP 클라이언트와 서버가 동일한 규칙을 구현하므로, 한 곳에서 올바르게 인코딩된 링크는 다른 어디서나 손상되지 않고 도착합니다.
왜 필요한가
URL에는 서로 매우 다른 역할을 하는 두 종류의 문자가 있습니다. /, ?, #, &, =, : 같은 예약 문자는 구조적입니다. 이 문자들은 파서에게 경로가 끝나고 쿼리 문자열이 시작되는 위치, 또는 한 매개변수가 끝나고 다음 매개변수가 시작되는 위치를 알려줍니다. 실제 데이터에 그런 기호가 포함된 경우 파서가 구두점으로 오해하지 않도록 인코딩해야 합니다. A&B/2024 같은 주문 참조를 쿼리 문자열에 그대로 넣으면 두 개의 매개변수와 경로 세그먼트로 잘못 읽힐 것입니다.
그 다음에는 안전하지 않거나 비ASCII 문자가 있습니다. 공백, 따옴표, 꺾쇠 괄호, 악센트 문자, 이모지, 일반 ASCII 범위를 벗어나는 모든 것. 이 문자들은 URL에 글자 그대로 사용할 이유가 없습니다. 전송 중에 손상되거나 정의된 표현이 없기 때문입니다. 이를 인코딩하면 링크가 운에 맡기는 대신 깔끔하고 예측 가능하게 유지됩니다.
실제 작업에서 어디서 나타나는가
쿼리 문자열이 가장 일반적인 경우입니다. ?key=...에 추가하는 모든 값은 사용자 입력이 구조를 깨지 않도록 인코딩되어야 합니다. application/x-www-form-urlencoded로 전송되는 HTML 폼 제출에도 동일하게 적용되며, 이 경우 브라우저가 필드 값을 자동으로 인코딩합니다(역사적 관례에 따라 공백을 %20 대신 +로 변환합니다). 비라틴 제목을 가진 페이지를 가리키는 링크를 만들 때, API 요청을 수동으로 구성할 때, 리디렉션 대상을 매개변수로 전달할 때, 주소 표시줄에서는 멀쩡해 보이는 요청이 서버에 손상된 채로 도착하는 이유를 디버깅할 때도 만나게 됩니다.
encodeURI와 encodeURIComponent 비교
JavaScript에는 두 가지 인코더가 있으며, 잘못된 것을 선택하는 것은 흔한 버그입니다. 차이는 범위에 있습니다. encodeURIComponent는 쿼리 값처럼 단일 데이터 조각을 위한 것입니다. 예약 문자 /, ?, :, @, &, =, +, #를 포함하여 거의 모든 것을 인코딩합니다. 데이터에 그 기호들이 일반 텍스트로 포함될 수 있을 때 원하는 것이 바로 그것입니다.
encodeURI는 계속 작동시키려는 전체 주소를 위한 것입니다. 구조적 문자는 그대로 두어, URL을 유지하는 슬래시, 콜론, 물음표가 살아남습니다. 전체 URL이 있고 공백이나 비ASCII 문자만 정리하려 할 때 사용하세요. 더 큰 URL에 값을 삽입할 때는 언제나 encodeURIComponent를 사용하세요. 간단한 규칙: 전체 링크는 encodeURI로, 삽입하는 부분은 encodeURIComponent로 인코딩하세요.
모든 것이 사용자 기기에서만 처리됩니다
이 도구는 브라우저에서만 실행됩니다. 붙여넣은 텍스트는 표준 루틴으로 로컬에서 인코딩 또는 디코딩되며 서버로 전송되지 않으므로, 토큰, 서명된 매개변수, 또는 외부로 내보내고 싶지 않은 모든 것에 안전하게 사용할 수 있습니다. 다른 텍스트 변환 작업을 한다면 Base64 변환기가 바로 옆에 있으며, 더 많은 일상적인 도우미를 위해 전체 개발자 도구 세트를 살펴볼 수 있습니다.
자주 묻는 질문
URL에서 %20은 무엇을 의미하나요?
인코딩된 공백입니다. 공백 문자는 URL에 글자 그대로 허용되지 않으므로, 퍼센트 기호와 공백의 바이트 값인 16진수 20으로 교체됩니다.
%20 대신 더하기 기호가 보이는 이유는 무엇인가요?
application/x-www-form-urlencoded 유형의 HTML 폼 데이터는 역사적 관례에 따라 공백을 더하기 기호로 인코딩합니다. 일반 경로나 쿼리에서는 공백이 %20으로 인코딩됩니다. 두 방식 모두 적절한 맥락에서 공백으로 디코딩됩니다.
encodeURI 대신 encodeURIComponent를 언제 사용해야 하나요?
쿼리 매개변수처럼 URL에 삽입하는 단일 값에는 encodeURIComponent를 사용하세요. 예약 문자도 인코딩하기 때문입니다. URL을 유지하는 슬래시, 콜론, 물음표를 보존하면서 전체 주소를 정리하려 할 때는 encodeURI를 사용하세요.
URL 인코딩이 데이터의 의미를 바꾸나요?
아니요. 인코딩은 완전히 되돌릴 수 있습니다. 결과를 디코딩하면 양 끝에서 동일한 문자 집합을 사용하는 한, 원본 텍스트가 정확히 바이트 단위로 복원됩니다.
악센트 문자나 이모지 같은 비ASCII 문자는 어떻게 처리되나요?
먼저 UTF-8 바이트로 변환된 다음, 각 바이트가 자체적인 퍼센트 트리플렛이 됩니다. 따라서 단일 악센트 문자나 이모지가 인코딩된 출력에서 여러 트리플렛으로 확장될 수 있습니다.
이 도구를 사용할 때 텍스트가 서버로 전송되나요?
아니요. 인코딩과 디코딩은 브라우저 내에서만 이루어집니다. 붙여넣은 내용은 업로드되지 않으므로, 비공개 또는 민감한 문자열에 안전하게 사용할 수 있습니다.