개발자
🔗 URL 인코더/디코더
URL 인코드/디코드 + URL 분해와 쿼리 파라미터 표 편집. UTM·추적 파라미터 일괄 정리.
⚠️ 본 도구의 인코드·디코드·파싱은 모두 브라우저에서 실행되며 입력 URL·데이터는 외부로 전송되지 않습니다. 추적 파라미터 정리 결과는 일반적인 광고 추적 제거이며, 일부 합법적 기능(다국어 분기·캠페인 식별)도 함께 제거될 수 있으니 검토 후 사용하세요. OAuth state·CSRF 토큰 등 보안 관련 파라미터를 무단 수정·공유하지 마세요. 입력 100KB 제한. 분야별 안전 안내는 면책조항 참고.
자동 감지: 🔒 인코드
결과 81자 · 25개 인코드됨
| 글자 | 코드포인트 | UTF-8 bytes | URL 인코딩 |
|---|---|---|---|
| 안 | U+C548 | 0xEC 0x95 0x88 | %EC%95%88 |
| 녕 | U+B155 | 0xEB 0x85 0x95 | %EB%85%95 |
| 하 | U+D558 | 0xED 0x95 0x98 | %ED%95%98 |
| 세 | U+C138 | 0xEC 0x84 0xB8 | %EC%84%B8 |
| 요 | U+C694 | 0xEC 0x9A 0x94 | %EC%9A%94 |
| 한 | U+D55C | 0xED 0x95 0x9C | %ED%95%9C |
| 국 | U+AD6D | 0xEA 0xB5 0xAD | %EA%B5%AD |
🛠️ 어떻게 사용하나요?
- 탭 1 인코드/디코드 — 자동 감지(%XX 있으면 디코드) + encodeURIComponent/encodeURI 선택 + 반복 디코드 + 한글 UTF-8 bytes 분해 표
- 탭 2 URL 분해·편집 — URL 자동 분해 (scheme/host/path/query/fragment 7개) + 쿼리 파라미터 표 편집기 + URL 즉시 재구성
- 탭 3 추적 정리 — 7 그룹 50+ 파라미터 자동 감지 (UTM·fbclid·네이버·카카오·쿠팡·Bing·기타) + 그룹별 또는 개별 체크박스 제거
- 탭 4 가이드 — encodeURIComponent vs encodeURI 비교 + RFC 3986 + UTF-8 인코딩 + 흔한 실수 + 추적 사전
💡 입력·옵션은 모두 자동 저장됩니다. 200ms 디바운스로 입력 변화 시 즉시 재계산.
🔧 encodeURIComponent vs encodeURI 비교
가장 흔한 혼동입니다. 쿼리 값엔 encodeURIComponent, 전체 URL엔 encodeURI가 원칙입니다.
| 함수 | 인코드 안 하는 문자 | 사용처 |
|---|---|---|
encodeURIComponent | A-Z a-z 0-9 - _ . ! ~ * ' ( ) | 쿼리 값·경로 세그먼트 (권장) |
encodeURI | + : / ? # [ ] @ ! $ & ' ( ) * + , ; = | 전체 URL 인코딩 |
escape | 영숫자 + @*+-./_ | ❌ 사용 금지 (Unicode 부정확, deprecated) |
💡 쉽게 기억하는 법: 의심스러우면 encodeURIComponent. 더 안전한 쪽을 선택.
🇰🇷 한글·이모지 UTF-8 인코딩 원리
ASCII 외 문자는 UTF-8 멀티바이트로 변환된 후 각 바이트가 %XX로 인코딩됩니다.
| 글자 | 코드포인트 | UTF-8 bytes | URL 인코딩 |
|---|---|---|---|
| 한 | U+D55C | 3 (ED 95 9C) | %ED%95%9C |
| 국 | U+AD6D | 3 (EA B5 AD) | %EA%B5%AD |
| 안 | U+C548 | 3 (EC 95 88) | %EC%95%88 |
| 녕 | U+B155 | 3 (EB 85 95) | %EB%85%95 |
| 😀 | U+1F600 | 4 (F0 9F 98 80) | %F0%9F%98%80 |
| 韓 | U+97D3 | 3 (E9 9F 93) | %E9%9F%93 |
💡 한국어 1글자 = 보통 3 bytes (BMP), 이모지 1글자 = 보통 4 bytes (Supplementary Plane). 따라서 "한국" 2글자도 URL에서는 12자(%XX 6번) 차지합니다. 이는 URL 길이 제한(브라우저 약 2,000자, 서버 약 8,000자)에서 한글이 빨리 차오르는 이유.
🚨 흔한 실수 5가지
- 이중 인코딩 — 이미 인코딩된 값을 또 인코딩 →
%2520(원래 공백 =%20). 본 도구의 반복 디코드 옵션으로 풀기 가능 - encodeURIComponent vs encodeURI 잘못 사용 — 쿼리 값에 encodeURI 쓰면
=·&가 그대로 남아 파싱 깨짐 - 옛날 escape() 사용 — Unicode 부정확, deprecated. 절대 쓰지 마세요
- % 단독 입력 —
%다음에 16진수 2자리 필수 (%XX). 단독 % → 디코드 오류 - + 기호 혼동 — application/x-www-form-urlencoded 폼 인코딩에서만
+가 공백, RFC 3986 표준은%20. 혼합 사용 시 디코드 결과 다름
📊 추적 파라미터 — 어디서 왔고 왜 정리해야 하나
광고 클릭·검색 결과·SNS 공유 시 URL에 자동으로 붙는 파라미터들입니다. 실제 콘텐츠와 무관하며, 광고 플랫폼이 클릭 출처·전환을 추적하는 용도예요.
🌐 Google (UTM)
utm_source/medium/campaign — Google Analytics 캠페인 추적
🌐 Google Ads
gclid·gbraid·wbraid — 광고 클릭 ID
📘 Facebook·Meta
fbclid·_fbp·_fbc — 페북 광고·픽셀 추적
🇰🇷 네이버
n_media·n_query·n_keyword — 네이버 검색·검색광고
💬 카카오
kakao_share_id·kakao_chat_id — 카톡 공유 추적
🛍️ 쿠팡
_xts_·src·addtag — 쿠팡 파트너스·검색 광고
🟦 Microsoft Bing
msclkid·mc_eid — Bing 광고·MailChimp
📊 기타
twclid·li_fat_id·yclid·igshid — Twitter·LinkedIn·Yandex·Instagram
왜 정리해야 하나? ① 깔끔한 URL 공유 (블로그·메모) ② 개인 추적 거부 ③ 캐시 효율 ↑ ④ 분석 도구가 같은 페이지를 다른 페이지로 인식하는 문제 방지
주의: 일부 사이트는 추적 파라미터로 다국어·캠페인 분기를 수행하므로, 제거 후 동작 검토 필요.
자주 묻는 질문 (FAQ)
Q1. encodeURIComponent와 encodeURI 차이?
encodeURIComponent는 거의 모든 특수문자를 인코드합니다 (:·/·?·#·@·&·= 포함).
encodeURI는 URL 구조 문자(스킴·구분자)를 보존합니다.
실용 룰:
• 쿼리 값·경로 세그먼트 → encodeURIComponent (안전)
• 전체 URL 한 번에 → encodeURI
예: encodeURIComponent("a&b") = a%26b (쿼리 값으로 안전), encodeURI("a&b") = a&b (그대로 — 쿼리 키와 충돌 위험). 의심스러우면 항상 encodeURIComponent.
Q2. escape()는 왜 쓰면 안 되나요?
1990년대 옛 함수로 deprecated 됐습니다 (ECMAScript 표준에서 Annex B로 분류 — 호환성용만).
문제점:
• Unicode 부정확: BMP 외 문자(이모지) 처리 못함
• %uXXXX 형식: 표준 URL %XX 인코딩이 아닌 자바스크립트 전용 형식 → 서버에서 디코드 실패
• 한글 깨짐: ISO-8859-1 가정 → UTF-8 한글 처리 불가
반드시 encodeURIComponent 또는 encodeURI 사용. 본 도구는 escape()를 지원하지 않습니다.
Q3. 한글 1글자가 왜 %XX %XX %XX (3개)인가요?
UTF-8 인코딩 때문입니다. URL은 ASCII 문자만 직접 사용 가능하므로, 비-ASCII 문자는 UTF-8 바이트로 변환됩니다.
• 한글 (BMP, U+AC00 ~ U+D7A3): UTF-8에서 3 bytes → URL %XX %XX %XX
• 이모지 (Supplementary Plane, U+1F000+): UTF-8에서 4 bytes → URL %XX %XX %XX %XX
• 한자: BMP 내 한자는 3 bytes
예: 한(U+D55C) → UTF-8 0xED 0x95 0x9C → URL %ED%95%9C. 본 도구의 한글 분석 박스에서 글자별 변환 과정을 시각화합니다.
Q4. + 기호는 공백인가요? %20인가요?
둘 다 공백이지만 사용 컨텍스트가 다릅니다.
• RFC 3986 (표준 URL): 공백 = %20. +는 그냥 + 문자
• application/x-www-form-urlencoded (HTML 폼): 공백 = +. %20도 공백으로 디코드
실제 동작:
• encodeURIComponent(" ") = %20 (RFC 3986)
• new URLSearchParams({a: ' '}).toString() = a=+ (form 변형)
• 디코드 시 양쪽 모두 공백으로 인식
혼용 주의: 같은 URL에 %20과 + 섞이면 문제. 한 가지로 통일 권장. 본 도구는 %20 (encodeURIComponent) 출력.
Q5. 이중 인코딩(%2520)이 발생하는 이유?
이미 인코딩된 값을 또 인코딩했기 때문입니다.
1단계: 공백 → %20 (정상)
2단계: %20의 % → %25 → 결과 %2520!
발생 시나리오:
• 백엔드에서 디코드된 값을 받아 다시 인코드하면서 변환
• 프론트엔드에서 이미 인코딩된 URL을 또 encodeURIComponent 호출
• OAuth redirect_uri 등에서 중첩 escape
해결: 본 도구의 탭 1 디코드 + 반복 디코드 옵션으로 한 번에 풀기 (최대 5회). 코드에서는 인코드/디코드 횟수를 명확히 추적해야 합니다.
Q6. UTM 파라미터 제거해도 되나요?
네, 일반적으로 안전합니다. UTM은 Google Analytics 추적용이며 페이지 콘텐츠에 영향을 주지 않습니다.
• utm_source, utm_medium, utm_campaign 등은 분석 데이터일 뿐
• 제거해도 페이지는 정상 작동
• 깔끔한 URL 공유에 유리 (블로그·SNS·문서)
예외 주의:
• 일부 사이트가 UTM으로 다국어·캠페인 페이지 분기 (드물지만 가능)
• 광고주 입장에서는 추적 데이터가 사라지므로 본인 광고 클릭은 유지 권장
• OAuth state·CSRF 토큰처럼 보안 토큰은 절대 제거 X (본 도구는 추적이 아닌 키는 손대지 않음)
Q7. 네이버 n_media 같은 파라미터는?
네이버 검색·쇼핑·검색광고 추적 파라미터입니다.
• n_media: 광고 매체 (예: cpc=검색광고)
• n_query: 검색어
• n_keyword: 키워드 ID
• n_rank: 검색 결과 순위
• n_ad_group·n_ad: 광고 그룹·광고 ID
• n_campaign_type: 캠페인 유형
UTM과 동일하게 제거해도 페이지 작동에 영향 없음. 깔끔한 공유 URL을 만들 때 유용합니다. 본 도구의 네이버 그룹에서 일괄 제거 가능.
Q8. URL 길이 제한은 얼마인가요?
공식 표준에는 길이 제한이 없지만, 실용적 제한이 존재합니다:
• 브라우저: Chrome/Firefox/Safari 대부분 ~32,000자 처리, 일부 구형 IE는 2,083자
• 웹 서버: Nginx 기본 8,192자, Apache 8,190자, IIS 16,384자
• 안전권장: 2,000자 이하 (모든 환경 호환)
• SEO: 짧을수록 좋음 (~75자 권장)
한글 주의: 한글 1글자가 URL에서 9자(%ED%95%9C)를 차지하므로, 짧은 한국어 텍스트도 URL에서는 빨리 길어집니다. 긴 데이터는 POST body나 JSON 토큰으로 전달 권장.
Q9. OAuth state·redirect_uri 디코드?
OAuth 콜백 URL 디버깅에 본 도구가 매우 유용합니다.
• state: CSRF 방지 토큰 (랜덤 문자열, 디코드해서 검증)
• redirect_uri: 콜백 URL (이중 인코딩 자주 발생)
• code: 인증 코드 (단발성, 1회 사용)
• access_token: 액세스 토큰 (보안 민감!)
⚠️ 보안 주의:
1. access_token·refresh_token·session_id 디코드는 OK, 공유·수정은 절대 X (계정 탈취 위험)
2. state 토큰을 임의로 수정하면 CSRF 검증 실패 → 인증 오류
3. 공용 PC에서 사용 후 브라우저 캐시·localStorage 정리 (본 도구의 입력은 localStorage에 저장됨)
본 도구는 모든 처리가 클라이언트 측이라 외부 전송 없음.
Q10. 본 도구는 입력 데이터를 서버에 보내나요?
아니요. 모든 처리가 브라우저(클라이언트)에서 수행됩니다.
• 인코드/디코드: Native Web API (encodeURIComponent·decodeURIComponent·URL·URLSearchParams)
• 한글 분석: TextEncoder 브라우저 내장
• 외부 라이브러리·서버 호출 0개
• Network 탭 확인: 변환 시 어떤 fetch/XHR도 발생하지 않음
• 다운로드: Blob URL로 브라우저 내 처리
• 입력은 localStorage에 저장(편의), 외부 전송 없음
다만: 공용 PC·공유 기기에서 OAuth 토큰·세션 ID·access_token 등을 다룬 경우 사용 후 정리하세요. DevTools → Application → Local Storage에서 youtil_url_encode_v1 키 삭제 가능.