URL 인코딩(퍼센트 인코딩)이란?
URL에는 영문자, 숫자와 소수의 기호만 그대로 쓸 수 있습니다. 그 밖의 문자(한글, 공백, 이모지, 그리고 URL 구조에 쓰이는 기호가 "값"으로 들어갈 때)는 문자를 UTF-8 바이트로 바꾼 뒤 각 바이트를 %와 16진수 두 자리로 적어 표현합니다. 이것이 퍼센트 인코딩입니다. 한글 "안"은 UTF-8로 3바이트(EC 95 88)이므로 %EC%95%88이 됩니다. 주소창에 한글 검색어를 쳐도 브라우저가 내부에서 이 작업을 해서 서버에 보냅니다.
encodeURIComponent와 encodeURI는 무엇이 다른가
encodeURIComponent는 영문자·숫자와 - _ . ! ~ * ' ( ) 외에는 모두 인코딩합니다. / ? & = # : 같은 구조 문자도 바뀌므로 "검색어" 같은 값 하나를 URL에 끼워 넣을 때 적합합니다.encodeURI는 이미 완성된 주소를 통째로 다룰 때 쓰며 ; , / ? : @ & = + $ #는 그대로 두고 한글·공백만 바꿉니다. 값에 &나 =가 들어 있는데 encodeURI로 처리하면 파라미터 경계가 깨지므로, 값에는 반드시 encodeURIComponent를 써야 합니다. 이 도구의 기본값이 파라미터용인 이유입니다.
아래 표는 페이지를 만들 때 두 함수로 직접 계산한 결과입니다.
| 문자 | encodeURI | encodeURIComponent |
|---|---|---|
공백 ( ) | %20 | %20 |
슬래시 (/) | / (그대로) | %2F |
물음표 (?) | ? (그대로) | %3F |
앰퍼샌드 (&) | & (그대로) | %26 |
등호 (=) | = (그대로) | %3D |
샵(해시) (#) | # (그대로) | %23 |
더하기 (+) | + (그대로) | %2B |
퍼센트 (%) | %25 | %25 |
콜론 (:) | : (그대로) | %3A |
작은따옴표 (') | ' (그대로) | ' (그대로) |
느낌표 (!) | ! (그대로) | ! (그대로) |
물결표 (~) | ~ (그대로) | ~ (그대로) |
테스트 벡터와 바이트 수
| 입력 | UTF-8 바이트 | encodeURIComponent | encodeURI |
|---|---|---|---|
| 안녕하세요 | 15 | %EC%95%88%EB%85%95%ED%95%98%EC%84%B8%EC%9A%94 | %EC%95%88%EB%85%95%ED%95%98%EC%84%B8%EC%9A%94 |
| café | 5 | caf%C3%A9 | caf%C3%A9 |
| 😀 | 4 | %F0%9F%98%80 | %F0%9F%98%80 |
| a b | 3 | a%20b | a%20b |
| 100% | 4 | 100%25 | 100%25 |
| https://example.com/검색?q=a&b=c | 34 | https%3A%2F%2Fexample.com%2F%EA%B2%80%EC%83%89%3Fq%3Da%26b%3Dc | https://example.com/%EA%B2%80%EC%83%89?q=a&b=c |
한글 한 글자는 3바이트라 퍼센트 표기로는 9글자, 이모지는 4바이트라 12글자가 됩니다. 그래서 한글 검색어가 많이 들어간 URL은 눈에 띄게 길어집니다. 마지막 줄처럼 같은 주소라도 encodeURI는 구조(://, ?, &)를 살리고, encodeURIComponent는 전부 바꿔 버립니다. 주소 전체를 encodeURIComponent로 바꾸면 그대로는 열리지 않습니다. 다만 "리다이렉트 주소를 다른 URL의 파라미터 값으로 넘기는" 경우(?next=https%3A%2F%2F...)에는 이렇게 전부 바꾸는 것이 맞습니다.
공백: %20과 + 중 무엇인가
URL 경로와 일반적인 규칙에서 공백은 %20입니다. 반면 HTML 폼 전송(application/x-www-form-urlencoded)과 많은 검색 쿼리는 공백을 +로 씁니다. 그래서 a b는 a%20b로도, a+b로도 적힐 수 있습니다. 반대로 진짜 더하기 기호는 %2B로 적어야 하므로, 1+1=2 같은 값을 그대로 넘기면 서버가 1 1=2로 읽을 수 있습니다. 옵션 체크박스를 켜면 인코딩 때 공백을 +로, 디코딩 때 +를 공백으로 처리합니다. 브라우저의 decodeURIComponent는 기본적으로 +를 공백으로 바꾸지 않으므로(a+b → a+b), 폼 방식 데이터를 풀 때는 이 옵션이 필요합니다.
직접 해 보기: 예시 3가지
예시 1. 검색어 "안녕하세요"를 파라미터로 넣으려면 인코딩 범위를 기본값으로 두고 변환해 %EC%95%88%EB%85%95%ED%95%98%EC%84%B8%EC%9A%94를 얻습니다. 최종 주소는 https://example.com/search?q= 뒤에 이 값을 붙인 형태입니다.
예시 2. "100%"는 100%25가 됩니다. 단독 %도 인코딩 대상이어서 그대로 두면 디코딩 때 "형식이 잘못됨" 오류가 납니다. 반대로 100%를 그대로 디코딩에 넣으면 같은 이유로 오류 안내가 나옵니다.
예시 3. 이중 인코딩 확인. %2520을 한 번 디코딩하면 %20, 한 번 더 디코딩하면 공백이 나옵니다. 디코딩 결과에 다시 %XX가 보이면 이미 두 번 인코딩된 것이므로 결과를 입력란에 옮겨 한 번 더 디코딩해 보세요.
엣지 케이스와 한계
잘못된 퍼센트 시퀀스. % 뒤에 16진수 두 자리가 없거나(%E0%A4%A), 바이트 조합이 올바른 UTF-8이 아니면 디코딩이 URIError로 실패합니다. 도구는 이 경우 오류 안내를 띄우고 결과를 비웁니다. 서버 로그에서 가져온 문자열이 EUC-KR로 인코딩된 오래된 한글 URL(%BE%C8%B3%E7처럼 바이트가 한 글자에 2개)이면 UTF-8로 읽을 수 없어 이 오류가 납니다.
짝 없는 서로게이트. 깨진 이모지처럼 유니코드 서로게이트 한쪽만 남은 문자열은 encodeURIComponent가 실패합니다. 입력에서 해당 문자를 지우고 다시 시도하세요.
빈 입력. 빈 문자열은 빈 결과가 나오며 오류가 아닙니다.
큰 입력. 수십만 자 정도까지는 순식간에 처리되지만, 브라우저와 서버는 URL 길이에 상한을 두는 경우가 많으므로(대략 2,000자 안팎으로 보수적으로 잡는 것이 안전) 긴 데이터를 쿼리스트링으로 넘기는 설계 자체를 점검하세요.
URL 전체 분석 아님. 이 도구는 문자열 변환기이며, 주소를 프로토콜·호스트·경로로 나누거나 한글 도메인(퓨니코드)을 변환하지 않습니다.
보안·개인정보
이 페이지의 변환 스크립트는 브라우저 내장 함수(encodeURIComponent, encodeURI, decodeURIComponent)만 사용하며 입력을 서버로 보내는 요청을 하지 않고 저장도 하지 않습니다. 다만 URL에 들어간 값은 접속 기록, 프록시 로그, 브라우저 히스토리, 리퍼러에 남을 수 있으므로 비밀번호·토큰 같은 민감한 값을 쿼리스트링에 싣는 설계는 피해야 합니다. 인코딩한다고 숨겨지는 것이 아니며 누구나 디코딩할 수 있습니다. 또 출처를 모르는 인코딩 주소는 디코딩해서 실제 목적지 도메인을 확인한 뒤 열면 피싱 링크를 거르는 데 도움이 됩니다.
결과를 어디에 쓰나
API 호출 URL을 직접 만들 때 파라미터 값 인코딩, 로그에 찍힌 %EA... 문자열의 원문 확인, 광고·분석용 UTM 링크에 한글 캠페인명 넣기, 리다이렉트 URL을 다른 URL 안에 넣기에 쓰입니다. 인코딩 결과를 코드에 넣을 때는 사용하는 언어가 이미 인코딩 함수를 제공하는지 확인하고, 중복 인코딩이 되지 않게 한 번만 적용하세요.
자주 묻는 질문
URL 전체를 인코딩해야 하나요, 일부만 해야 하나요?
일반적으로는 URL 전체가 아니라 쿼리스트링의 파라미터 값(예: 검색어)만 인코딩합니다. https://example.com/?q=검색어에서 "검색어" 부분만 인코딩하면 됩니다. 이미 완성된 주소 안의 한글만 바꾸고 싶다면 "URL 전체" 범위를 선택하세요.
디코딩하면 오류가 나요.
대부분 퍼센트 뒤의 16진수가 모자라거나 잘렸거나, 바이트열이 UTF-8이 아닌 경우(EUC-KR 등)입니다. 값 끝이 잘리지 않았는지, % 자체를 쓰려던 것은 아닌지 확인하세요.
+와 %20 중 어느 것을 써야 하나요?
경로에서는 %20, 폼 방식 쿼리에서는 둘 다 통용됩니다. 확실히 안전한 쪽은 %20이고, 진짜 + 문자는 항상 %2B로 적어야 합니다.
영문과 숫자도 인코딩되나요?
영문자·숫자와 - _ . ! ~ * ' ( )는 encodeURIComponent에서도 그대로 남습니다. 위 표의 느낌표·물결표·작은따옴표가 그 예입니다.
입력한 내용이 서버로 전송되나요?
이 페이지의 변환 코드는 네트워크 요청 없이 브라우저 안에서만 실행됩니다. 다만 URL 자체에 민감한 값을 넣는 습관은 로그 노출 위험이 있으니 피하세요.
관련 도구
- Base64 인코더/디코더 - 바이트를 텍스트로 싣는 또 다른 방식
- 텍스트 바이트 계산기 - 한글·이모지 바이트 수 확인
- QR 코드 생성기 - 인코딩한 주소를 QR로 만들기
- JWT 디코더 - 토큰 구간 해석