URL Encoder

URL 인코더 / 디코더

임의의 텍스트를 percent-encoding된 URL 안전 문자열로 인코딩하거나, 인코딩된 URL을 일반 텍스트로 다시 디코딩합니다. 실시간 미리보기, UTF-8 안전, 그리고 모든 처리가 브라우저 안에서 이루어집니다.

컴포넌트(encodeURIComponent)는 unreserved 문자가 아닌 모든 것을 이스케이프합니다 — 쿼리스트링 값, 경로 세그먼트, 단일 필드에 가장 안전합니다. URI(encodeURI)는 URL 구조 문자(:/?#=&)를 보존하므로 전체 URL에 사용합니다. 폼(application/x-www-form-urlencoded)은 컴포넌트 인코딩에 더해 공백을 '+' 로 바꾸는 방식이며, HTML 폼이 사용하는 형식입니다.

RFC 3986은 인코딩이 필요 없는 "unreserved" 문자 집합을 정의합니다: A-Z a-z 0-9 - _. ~. 그 외의 문자는 모두 percent-encoding됩니다. encodeURIComponent는 추가로 :/?#&= 도 인코딩하지만, encodeURI는 이를 그대로 둡니다. 이 차이는 쿼리 값을 인코딩할 때와 URL 전체를 인코딩할 때 매우 중요합니다.

일반 텍스트

0 자

인코딩된 출력

0 자

왜 iKit URL Encoder인가요

빠르고 정확하며 브라우저에서만 동작합니다 — 개발자, 카피라이터, URL 디버깅이 필요한 모든 분을 위해 만들어졌습니다.

세 가지 인코딩 모드

인코딩 대상에 맞춰 컴포넌트, 전체 URI, 폼 모드 중에서 선택할 수 있습니다 — 쿼리스트링 값, URL 전체, 또는 HTML 폼 페이로드까지 모두 처리합니다.

설계 단계부터 보장하는 프라이버시

모든 인코딩과 디코딩은 네이티브 JavaScript를 사용해 브라우저 안에서 수행됩니다. 입력한 텍스트와 URL은 절대 기기를 벗어나지 않습니다.

실시간 미리보기

키 입력마다 결과가 즉시 갱신됩니다 — "인코딩" 버튼을 누를 필요도, 서버 왕복도 없습니다.

UTF-8 안전

이모지, CJK 문자, 강세가 있는 라틴 문자, 키릴 문자가 encodeURIComponent를 통해 정확하게 왕복 변환됩니다.

폼 스타일 + 처리

디코딩 시 '+' 를 공백으로 취급하도록 선택할 수 있습니다 — application/x-www-form-urlencoded 환경에서 HTML 폼이 사용하는 관례입니다.

파일 일괄 처리

txt,.csv,.json 파일을 드롭하면 한 번에 인코딩 또는 디코딩됩니다. 결과는 깔끔한.txt 파일로 다운로드됩니다.

URL 인코딩의 실제 동작 원리

세 가지 네이티브 브라우저 API와 세 가지 모드, 모두 지금 보고 계신 페이지 안에서 실행됩니다.

  1. 1

    에디터에 입력합니다

    키 입력마다 입력 문자열이 작은 JavaScript 함수로 전달됩니다. 디바운스도, API 호출도, fetch도 없습니다 — 함수는 브라우저 탭 안에서 동기적으로 실행됩니다.

  2. 2

    모드를 선택합니다

    컴포넌트는 encodeURIComponent를 호출하여 A-Z a-z 0-9 - _. ~ 이외의 모든 문자를 이스케이프합니다. URI는 encodeURI를 호출하여 :/?#=&를 보존하므로 전체 URL이 유효하게 유지됩니다. 폼은 encodeURIComponent를 사용한 뒤 application/x-www-form-urlencoded 규칙에 따라 공백을 +로 치환합니다.

  3. 3

    UTF-8은 자동으로 처리됩니다

    encodeURIComponent와 encodeURI 모두 내부적으로 문자열을 UTF-8 바이트로 변환한 뒤, 안전하지 않은 각 바이트를 percent-encoding합니다. 그래서 한자 中은 %E4%B8%AD로 인코딩됩니다 — RFC 3986이 요구하는 그대로입니다.

  4. 4

    결과가 실시간으로 표시됩니다

    결과는 읽기 전용 출력 영역의 값으로 설정됩니다. 복사 버튼을 누르면 navigator.clipboard.writeText를 통해 클립보드로 복사되고, 다운로드 버튼을 누르면 Blob URL을 통해 .txt로 저장됩니다 — 모두 브라우저 안에서만 일어납니다.

대표적인 사용 사례

올바른 인코딩 모드 선택이 버그를 막아 주는 실제 상황들입니다.

쿼리스트링 값 만들기

?q=...에 들어가는 사용자 입력은 반드시 컴포넌트 모드로 인코딩해야 합니다. URI 모드는 =와 &를 그대로 두기 때문에 값에 이런 문자가 포함되면 URL이 깨집니다.

긴 URL을 채팅으로 공유하기

일부 채팅 앱과 PDF는 공백이나 비-ASCII 문자가 포함된 링크를 손상시킵니다. URL을 URI 모드로 변환하면 어디서나 안전하게 복사·붙여넣기를 할 수 있습니다.

400을 반환하는 백엔드 디버깅

API가 요청을 거부하면 해당 URL을 디코딩 모드에 붙여넣어 서버가 실제로 어떤 값을 받았는지 확인합니다. 이중 인코딩된 값(예: % 자체가 %25로 인코딩된 경우)이 즉시 드러납니다.

폼 데이터 왕복 확인

application/x-www-form-urlencoded 형식의 POST 본문을 디버깅할 때는 "+ 를 공백으로" 옵션을 켠 채 디코딩하세요. 이는 브라우저가 사용하는 관례이며, 이를 잊는 것이 "왜 사용자명에 더하기 기호가 표시되지" 류 버그의 1순위 원인입니다.

왜 로컬 인코딩이 중요한가요

인코딩 대상이 되는 URL에는 실제 고객 이메일, ID, 세션 토큰 등이 포함되는 경우가 많습니다 — 낯선 서버 도구에 붙여넣고 싶지 않은 바로 그런 데이터입니다. iKit URL Encoder는 이미 브라우저에 로드된 JavaScript로 실행되므로 입력은 절대 탭을 벗어나지 않습니다.

  • 인코딩이나 디코딩 중 fetch, XHR, beacon 호출이 전혀 없습니다.
  • 페이지가 한 번 로드되면 오프라인에서도 동작합니다.
  • 로그도, 요청 제한도, 회원가입도, 일일 사용량 제한도 없습니다.

관련 가이드

iKit 블로그의 심층 튜토리얼과 도구 비교.

자주 묻는 질문

컴포넌트, URI, 폼 모드의 차이점은 무엇인가요?

컴포넌트(encodeURIComponent)는 unreserved 문자가 아닌 모든 것을 이스케이프합니다 — 쿼리스트링 값, 경로 세그먼트, 단일 필드에 가장 안전합니다. URI(encodeURI)는 URL 구조 문자(:/?#=&)를 보존하므로 전체 URL에 사용합니다. 폼(application/x-www-form-urlencoded)은 컴포넌트 인코딩에 더해 공백을 '+' 로 바꾸는 방식이며, HTML 폼이 사용하는 형식입니다.

왜 일부 문자는 인코딩되지 않나요?

RFC 3986은 인코딩이 필요 없는 "unreserved" 문자 집합을 정의합니다: A-Z a-z 0-9 - _. ~. 그 외의 문자는 모두 percent-encoding됩니다. encodeURIComponent는 추가로 :/?#&= 도 인코딩하지만, encodeURI는 이를 그대로 둡니다. 이 차이는 쿼리 값을 인코딩할 때와 URL 전체를 인코딩할 때 매우 중요합니다.

디코딩한 텍스트가 이상하게 보이는 이유는 무엇인가요?

흔한 원인은 세 가지입니다: (1) 원본이 폼 인코딩된 경우 '+' 를 공백으로 처리해야 합니다 — 해당 옵션을 켜세요. (2) 이중 인코딩 — 입력이 두 번 인코딩된 상태이므로 다시 디코딩하세요. (3) 잘못된 percent 시퀀스 — 두 자리 16진수가 따라오지 않는 % 가 있는 경우입니다. 정확한 바이트 위치는 오류 메시지에서 확인할 수 있습니다.

인코딩 결과가 JavaScript의 encodeURIComponent와 정확히 동일한가요?

컴포넌트 모드에서는 그렇습니다 — encodeURIComponent를 직접 호출합니다. 폼 모드에서는 RFC 3986 + WHATWG에 따른 표준 폼 인코딩 보정이 추가됩니다(! ' * 가 %21 %27 %28 %29 %2A 로 변환). URI 모드는 encodeURI를 호출하며, 대부분의 언어가 'URL을 percent-encoding한다'고 말할 때 의미하는 동작입니다.

내 URL이 어딘가로 업로드되나요?

아니요. 도구 전체가 이 페이지 안의 JavaScript로 동작합니다 — 인코딩과 디코딩은 모두 브라우저에서 이루어집니다. DevTools → Network 탭을 열어 직접 확인할 수 있으며, 인코딩이나 디코딩 작업 중에는 어떤 요청도 전송되지 않습니다.