URL 인코더·디코더
URL에 안전하게 넣을 수 있도록 문자열을 퍼센트 인코딩하거나 원래대로 디코딩합니다.
| 문자 | 유니코드 | 퍼센트 인코딩 | UTF-8 |
|---|
URL 인코더·디코더란?
URL에 한글이나 특수문자를 넣으면 깨지는 경험, 있으신가요? 웹 주소는 표준에 따라 알파벳, 숫자, 일부 특수문자만 안전하게 사용할 수 있습니다. 그래서 한글, 공백, &, ? 같은 문자들은 `%EC%99%80` 같은 '퍼센트 인코딩' 형태로 변환해야 합니다. 이 도구는 문자열을 URL에 사용 가능한 형태로 안전하게 인코딩하고, 알아보기 힘든 퍼센트 인코딩된 URL을 다시 사람이 읽을 수 있는 문자로 디코딩합니다. 입력하는 즉시 결과가 실시간으로 변환되며, 쿼리 스트링 값에 적합한 `encodeURIComponent`와 URL 전체 구조를 유지하는 `encodeURI` 방식을 선택할 수 있습니다. 입력한 한글이나 특수문자가 어떤 코드로 바뀌는지 표로 직접 확인할 수도 있습니다. 모든 변환 과정은 사용자 브라우저 안에서만 처리되므로, 민감한 정보가 포함된 URL도 서버 전송 걱정 없이 안전하게 다룰 수 있습니다.
사용 방법
- 왼쪽 입력창에 인코딩하거나 디코딩할 문자열 또는 URL 전체를 붙여넣습니다.
- 입력과 동시에 오른쪽 결과창에 변환된 내용이 실시간으로 나타납니다.
- 필요에 따라 상단의 `→ 인코딩` / `← 디코딩` 버튼으로 변환 방향을, `encodeURIComponent` / `encodeURI` 버튼으로 인코딩 방식을 변경할 수 있습니다.
- 입력창 하단에 나타나는 '한글·특수문자 인코딩 확인' 표에서 각 문자가 어떻게 변환되었는지 상세 내역을 확인할 수 있습니다.
- 화면 우측의 `공백 ↔ +`, `RFC 3986 엄격`, `여러 줄 각각 변환` 등 추가 옵션을 필요에 맞게 선택합니다.
- 오른쪽 결과창의 `복사` 버튼을 눌러 변환 결과를 사용하거나, `⇅ 결과를 입력으로` 버튼을 눌러 연속 작업을 할 수 있습니다.
URL 인코더·디코더 사용 가이드
실제 작업에서 이 도구를 어떻게 쓰는지, 무엇을 조심해야 하는지 정리했습니다.
encodeURI 냐 encodeURIComponent 냐 — 하나만 기억하면 됩니다
가장 많이 헷갈리는 지점이고, 판단 기준은 단순합니다. 지금 다루는 문자열이 "주소 전체"인지 "주소에 끼워 넣을 조각"인지만 보세요. 조각이면 encodeURIComponent, 완성된 주소 전체면 encodeURI 입니다.
차이는 URL 구조 문자를 살려 두느냐입니다. encodeURI 는 : / ? & = # 를 URL 문법의 일부로 보고 그대로 두지만, encodeURIComponent 는 값의 일부일 수 있다고 보고 전부 %XX 로 바꿉니다. 세그먼트를 바꾸면 상단 안내 문구가 각 방식이 무엇을 바꾸는지 알려 줍니다.
| 상황 | 쓸 것 | 이유 |
|---|---|---|
| 쿼리 값 하나 (q=무선 드릴) | encodeURIComponent | 값 안의 & 가 파라미터 구분자로 오해받으면 안 됨 |
| 경로 조각 하나 (/상품/무선 드릴) | encodeURIComponent | 값 안의 / 가 경로 구분자가 되면 안 됨 |
| 리다이렉트할 URL을 파라미터로 전달 | encodeURIComponent | ?next=https%3A%2F%2F… 처럼 통째로 감싸야 함 |
| 한글이 섞인 완성된 주소를 그대로 요청 | encodeURI | :// ? & 를 살려야 주소로 동작함 |
| 이미 만들어진 URL의 한글만 정리 | encodeURI | 구조는 그대로, 한글·공백만 변환 |
이중 인코딩 — %25가 보이면 이미 늦은 것
이미 인코딩된 문자열을 한 번 더 인코딩하면 % 자체가 %25 로 바뀝니다. %EA%B0%80 가 %25EA%25B0%2580 이 되는 식이죠. 화면에 %EA%B0%80 라는 글자가 그대로 찍히거나, 링크를 눌렀는데 404가 납니다.
이 도구는 이 상황을 잡아 줍니다. 인코딩 모드에서 입력에 %XX 패턴이 보이면 "이미 인코딩된 %XX 가 보입니다"라고 경고하고, 디코딩 모드에서 %25XX 가 보이면 "이중 인코딩으로 보입니다"라고 알려 줍니다. 후자라면 "결과를 입력으로" 버튼을 눌러 한 번 더 디코딩하면 원본이 나옵니다.
- 어디서 생기나 — 프런트에서 encodeURIComponent 로 만든 값을 서버에서 또 인코딩해 다른 API로 넘기는 경우, 프록시를 거치며 한 번 더 인코딩되는 경우가 대표적입니다.
- 규칙 — 인코딩은 값이 URL에 실리는 마지막 순간에 딱 한 번. 중간 계층은 원본 문자열로 넘기세요.
+ 는 공백인가 아닌가
경우에 따라 다릅니다. 이것이 "공백 ↔ +" 체크박스가 존재하는 이유입니다. URL 표준(RFC 3986)에서 공백은 %20 이지만, HTML 폼이 전송할 때 쓰는 application/x-www-form-urlencoded 규칙에서는 공백을 + 로 적습니다. 그 결과 같은 검색어가 어디서는 q=무선%20드릴, 어디서는 q=무선+드릴 로 나타납니다.
- 값 안에 진짜 + 기호가 들어가야 할 때(전화번호 +82, 수식 1+1)는 반드시 %2B 로 인코딩해야 합니다. 그냥 + 로 두면 받는 쪽이 공백으로 되돌립니다.
- 체크박스를 켜고 디코딩하면 + 를 공백으로 바꿔 읽습니다. 폼에서 온 값을 풀 때 쓰세요.
- 체크박스를 켜고 인코딩하면 %20 을 + 로 바꿉니다. 폼 전송 형식을 흉내 내야 할 때만 켜세요.
한글 URL — 네이버·카카오 링크에서 벌어지는 일
네이버 블로그나 카페 주소를 복사하면 주소창에서는 한글로 보이는데 붙여넣으면 %EA%B0%80… 같은 문자열이 나오는 경험, 흔합니다. 브라우저가 보기 좋으라고 디코딩해서 보여 줄 뿐 실제 주소는 인코딩된 상태이기 때문입니다. 한글 한 글자는 UTF-8에서 3바이트라 %XX 세 개, 즉 9자로 늘어납니다. "가"는 %EA%B0%80 입니다.
이 도구의 하단 표가 이 대응을 그대로 보여 줍니다. 문자·유니코드 코드포인트·퍼센트 인코딩·UTF-8 바이트가 한 줄로 나오므로 인코딩 결과가 맞는지 눈으로 확인할 수 있습니다.
- 주소 길이 — 한글 제목을 URL에 넣으면 길이가 3배로 붙습니다. 공유 링크나 일부 게이트웨이의 URL 길이 제한(대략 2,000자 안팎)에 생각보다 쉽게 닿습니다.
- 옛 시스템에서 온 값이 안 풀린다 — EUC-KR로 인코딩된 %B0%A1 같은 값은 UTF-8 기준인 이 도구에서 디코딩 오류가 납니다. 한 글자가 %XX 두 개면 EUC-KR을 의심하세요.
- 도메인 부분의 한글(한글.한국)은 퍼센트 인코딩이 아니라 퓨니코드(xn--…)라는 다른 방식을 씁니다. 이 도구는 경로·쿼리용이라 도메인 변환은 하지 않습니다.
RFC 3986 엄격 옵션은 언제 필요한가
자바스크립트의 encodeURIComponent 는 ! ' ( ) * 다섯 문자를 인코딩하지 않고 남깁니다. 대부분의 웹 서버는 문제없이 받지만, 엄격하게 RFC 3986 을 따르는 쪽과 값을 맞춰야 할 때 이 차이가 사고가 됩니다.
대표적인 것이 API 요청 서명입니다. 일부 클라우드·오픈 API는 파라미터를 인코딩한 문자열로 서명을 계산하는데, 서버가 이 다섯 문자를 %21%27 처럼 인코딩한 값으로 계산하면 서명이 달라져 인증에 실패합니다. 원인을 찾기 매우 어려운 부류의 버그입니다.
자주 묻는 질문
encodeURI와 encodeURIComponent의 차이가 무엇인가요?
encodeURI는 URL 전체 구조를 유지하기 위해 ':', '/', '?', '&', '=' 같은 문자는 인코딩하지 않습니다. 반면 encodeURIComponent는 이런 문자까지 모두 인코딩하여 URL의 일부, 특히 쿼리스트링의 값(value)으로 사용하기에 적합합니다. 이 도구는 기본적으로 encodeURIComponent 방식을 사용하며, 필요시 버튼을 눌러 전환할 수 있습니다.
URL에 개인정보가 포함될 수 있는데, 서버로 전송되나요?
아니요, 모든 인코딩 및 디코딩 과정은 사용자의 웹 브라우저 안에서만 이루어집니다. 입력하신 내용은 툴즈25시 서버를 포함한 어떤 외부 서버로도 전송되지 않으므로, 외부에 노출될 염려 없이 안심하고 사용하셔도 됩니다.
공백(스페이스)이 + 기호로 바뀌는데 괜찮은가요?
오래된 HTML 명세(application/x-www-form-urlencoded)에서는 공백을 '+'로 인코딩하기도 합니다. 최신 URL 표준(RFC 3986)은 공백을 %20으로 인코딩합니다. 이 도구는 두 경우 모두 처리할 수 있도록 `공백 ↔ +` 체크박스 옵션을 제공합니다. 이 옵션을 켜면 공백이 '+'로 인코딩되고, '+'가 공백으로 디코딩됩니다.
이미 인코딩된 URL을 넣으니 이상하게 바뀝니다.
이미 인코딩된 문자열('%'가 포함된)을 다시 인코딩하면 '%' 기호 자체가 '%25'로 바뀌는 '이중 인코딩'이 발생할 수 있습니다. 이 도구는 입력창에 인코딩된 문자가 감지되면 경고 메시지를 표시해 실수를 방지합니다. 변환 방향을 `← 디코딩`으로 설정하고 시도해 보세요.