ENCODERDECODERCONVERSION

URL 인코더/디코더

URL 매개변수와 쿼리 스트링을 안전하게 인코딩하거나 디코딩합니다.

INPUT

0 chars

OUTPUT

0 chars

도구 설명 및 사용 방법

웹 URL 주소에 한국어, 띄어쓰기 또는 특수기호가 인가되었을 때 생기는 오류를 배제할 수 있도록 백분율 인코딩 문자열(Percent Encoding)로 변환하거나 본래 주소로 복원합니다. RFC 3986에 기반한 안전한 URL 구성에 필수적입니다.

사용 단계

작업 목적에 따라 상단에서 "인코딩(Encode)" 혹은 "디코딩(Decode)" 동작 모드를 택합니다.

입력창에 분석할 주소 URL 또는 파라미터가 담긴 스트링을 복사해 넣습니다.

공백은 %20, 특수문자는 주소 규격에 부합되게 안전 가공된 결과 텍스트가 노출됩니다.

완성된 URL 문자열을 클립보드에 담아 브라우저 접속이나 API 요청 주소로 사용합니다.

작동 원리 및 상세 설명

URL 인코더/디코더는 RFC 3986(Uniform Resource Identifier: Generic Syntax)에 정의된 Percent-Encoding 규칙을 따릅니다. URL은 특정 문자만 허용되며, 공백, 한글, < > " ' & 등은 예약 문자(reserved) 또는 비ASCII이므로 % 뒤에 두 자리 16진수로 표현해야 합니다. 브라우저의 encodeURIComponent() 함수는 유니코드 문자열을 UTF-8 바이트로 변환한 뒤 각 바이트를 %XX로 매핑합니다. 반대로 디코딩은 %XX 시퀀스를 바이트로 복원하고 UTF-8 디코딩을 수행합니다. 본 도구는 이 과정을 실시간으로 양방향 제공하며, 사용자가 직접 URL을 조립하거나 서버 로그에서 인코딩된 값을 해석할 때 유용합니다. 중요한 점은 모든 변환이 100% 클라이언트 사이드(브라우저 메모리)에서 즉시 일어나며, 입력한 주소나 파라미터가 외부로 전송되지 않는다는 것입니다. 따라서 OAuth state 값, 리다이렉트 URI, 공유 링크, 디버깅용 쿼리 등을 안전하게 가공할 수 있습니다.

자주 묻는 질문 (FAQ)

URL 인코딩 결과가 암호화된 것인가요?

아닙니다. Percent-Encoding은 단순한 변환(encoding)입니다. %XX 형태로 문자를 표현할 뿐이며, 누구나 쉽게 디코딩하여 원본을 복원할 수 있습니다. 민감한 정보(토큰, 개인정보)는 쿼리스트링에 직접 넣지 말고 POST body나 Authorization 헤더를 사용하세요.

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

encodeURI()는 전체 URL에서 : / ? & = 등의 구분자를 보존합니다. encodeURIComponent()는 파라미터 값 하나를 인코딩할 때 사용하며, & = ? 등도 인코딩합니다. 본 도구의 인코딩 모드는 주로 encodeURIComponent()에 가까운 동작을 하며, 전체 URL을 안전하게 처리합니다.

한글 URL이 제대로 인코딩/디코딩 되나요?

네. 브라우저 환경에서는 encodeURIComponent + decodeURIComponent가 UTF-8 기반으로 동작하므로 한글, 일본어, 이모지 등 유니코드 문자가 %E... 형태로 안전하게 변환되고 복원됩니다. 실제 라우팅이나 공유 시 브라우저가 자동으로 처리하는 것과 동일합니다.

코드 사용 예시

안전한 쿼리스트링 생성 후 fetch에서 사용 (JavaScript)

javascript

// 사용자가 입력한 검색어와 필터를 안전하게 URL에 붙이는 예시
const base = 'https://api.example.com/search';
const params = new URLSearchParams({
  q: '한글 검색어 + 특수문자!',
  category: 'frontend & design',
  page: '2'
});
const safeUrl = `${base}?${params.toString()}`;
// safeUrl = https://api.example.com/search?q=%ED%95%9C%EA%B8%80+%EA%B2%80%EC%83%89%EC%96%B4+%2B+%ED%8A%B9%EC%88%98%EB%AC%B8%EC%9E%90!&category=frontend+%26+design&page=2

fetch(safeUrl)
  .then(res => res.json())
  .then(data => console.log(data));

URLSearchParams 또는 인코딩 결과를 사용해 API 호출 주소를 안전하게 구성하는 실제 개발 패턴입니다.