Softonic

URI 컴포넌트 인코더

단계 1 / 2
다음

name=John & Jane 같은 값을 인코딩 없이 URL에 넣어 본 적이 있다면 그 고통을 아실 겁니다: &가 새 파라미터로 읽혀 서버가 엉뚱한 값을 받습니다. 이 도구는 RFC 3986에 따라 임의의 문자열을 URI 컴포넌트로 안전하게 쓸 수 있도록 퍼센트 인코딩하여 모든 예약 문자를 %HH 쌍으로 바꿉니다(공백 포함). 프래그먼트, 쿼리 값, 리디렉트 대상을 붙여넣으면 어떤 URL에든 안전하게 연결할 수 있는 결과를 돌려받습니다.

URI 컴포넌트를 인코딩하는 방법

  1. 1

    값 붙여넣기

    쿼리 파라미터 값 하나, 경로 세그먼트 또는 프래그먼트 문자열을 넣으세요.

  2. 2

    인코딩 또는 디코딩 선택

    방향을 전환해 퍼센트 이스케이프를 원래 문자로 되돌리세요.

  3. 3

    실행

    도구가 각 문자를 UTF-8로 인코딩한 뒤 예약 바이트를 각각 %HH로 대체합니다.

  4. 4

    결과 복사

    출력을 URL 템플릿이나 API 클라이언트에 바로 넣으세요.

무엇이 이스케이프되나

이 인코더는 RFC 3986을 따릅니다. 비예약 집합 A-Z a-z 0-9 - _ . ~만 그대로 둡니다. 그 외 모든 것은 퍼센트 인코딩된 UTF-8이 되며, 공백과 JavaScript의 encodeURIComponent가 남겨 둘 하위 구분자 ! * ' ( )도 포함됩니다.

문자 인코딩 결과
공백 %20
! %21
# %23
& %26
' %27
( %28
) %29
* %2A
+ %2B
/ %2F
= %3D
? %3F
é %C3%A9

컴포넌트 vs 전체 URI

이 인코더는 encodeURI보다 엄격합니다. encodeURI는 : / ? # [ ] @ ! $ & ' ( ) * + , ; =가 URL에서 구조적이기 때문에 그대로 둡니다. 쿼리 문자열에 연결할 값에는 엄격한 형식이 필요하며, 이 도구가 바로 그것을 만듭니다: ! ' ( ) *까지 이스케이프하여 encodeURIComponent보다 한 걸음 더 나아갑니다.

const url = `/search?q=${encodeURIComponent(userInput)}`;

흔한 함정

  • 이중 인코딩: 이미 인코딩된 것을 다시 인코딩하면 %20 대신 %2520이 됩니다. 출처가 불확실하면 항상 먼저 디코딩하세요.
  • 양식의 더하기 기호: HTML 양식 제출은 공백을 %20이 아니라 +로 인코딩합니다. RFC 3986을 엄격히 따르는 디코더(이 도구 포함)는 +를 다시 공백으로 바꾸지 않습니다. 그런 경우에는 양식을 인식하는 디코더를 사용하세요.
  • 경로 구분자: 여기서 /를 인코딩하면 %2F가 됩니다. 실제 경로 구조를 유지하려면 세그먼트를 먼저 결합한 뒤 각각 인코딩하세요.

자주 묻는 질문

RFC 3986 퍼센트 인코딩, 즉 엄격한 형식입니다. :, /, ?, #와 나머지 예약 문자(그리고 !, ', (, ), *)를 이스케이프합니다. 컴포넌트가 내부에 URL 구조를 담아서는 안 되기 때문입니다. 그래서 JavaScript의 encodeURIComponent보다 엄격하고 encodeURI보다 훨씬 엄격합니다.

%20이 RFC 3986 방식입니다. 공백을 +로 쓰는 것은 application/x-www-form-urlencoded 본문 인코딩의 유산입니다. URL의 쿼리 문자열에서는 %20이 항상 안전하며, +는 양식 POST로 생성된 경우에만 서버에서 기대됩니다.

각 문자를 먼저 UTF-8로 인코딩한 뒤 모든 바이트를 이스케이프합니다. 日 같은 문자는 %E6%97%A5(3바이트)가 됩니다.

아니요. 값은 결과를 만들기 위해 서버에서 퍼센트 인코딩되며 저장하거나 기록하지 않습니다. 붙여넣은 내용은 응답이 전송된 후 아무것도 남지 않습니다.

관련 도구

FPS 카운터

requestAnimationFrame으로 브라우저 FPS를 측정하세요. 스무딩, 최소/최대 프레임레이트, 경고 임계값, 선택형 그래프를 제공합니다. 업로드나 API 없이 로컬에서 실행됩니다.

ASCII 표 참조

NUL, LF, DEL 같은 제어 문자를 포함해 모든 문자에 대한 10진수, 16진수, 8진수, 2진수, HTML 숫자 문자 참조를 담은 0부터 127까지의 전체 ASCII 표.

색상 혼합기

두 HEX 색상을 2-20개의 균등한 색상 견본으로 섞습니다. 양 끝 색상을 포함해 각 중간 색상을 대문자 HEX 코드로 확인하세요.

ASCII 이진수 변환기

ASCII 문자열을 이진수 표현으로 변환하세요. 각 문자는 8비트가 되고 공백으로 구분되어 프로토콜 추적이나 과제에 바로 붙여넣기 좋습니다.

색상 틴트 생성기

기준 색의 밝은 틴트를 생성합니다. 디자인 시스템 토큰, 배경, 호버 상태를 위한 3-20단계 스케일.

보색 찾기

어떤 입력에 대해서도 보색을 찾습니다. HSL 반대 색, 분할 보색 쌍, 그리고 접근성 있는 조합 제안을 반환합니다.

이 도구는 다른 언어로도 제공됩니다