블로그 글 링크를 카카오톡으로 보냈는데, 주소에 한글이 들어간 부분이 %EC%9A%94%EB%A6%AC 같은 문자열로 바뀌어 있다. 주소가 깨진 게 아니라 URL 인코딩이 된 것이다. 왜 이런 일이 생기는지 알아두면 당황하지 않는다.
URL 인코딩이 필요한 이유
URL은 원래 영문 알파벳, 숫자, 일부 특수문자만 허용한다. 한글이나 공백, &, = 같은 문자가 들어가면 브라우저가 제대로 처리하지 못할 수 있다. 그래서 이런 문자를 %XX 형태의 안전한 표기로 바꾸는 것이 URL 인코딩이다.
| 원본 | 인코딩 결과 | 설명 |
|---|---|---|
| 안녕 | %EC%95%88%EB%85%95 | 한글 (UTF-8 기준) |
| 공백 | %20 또는 + | 띄어쓰기 |
| & | %26 | 파라미터 구분자 |
| = | %3D | 값 할당 기호 |
encodeURI와 encodeURIComponent 차이
개발 중에 URL 인코딩을 할 때 두 가지 함수를 혼동하는 경우가 많다.
- encodeURI
- URL 전체를 인코딩할 때 사용한다. :, /, ?, # 같은 URL 구조 문자는 변환하지 않는다. 전체 주소를 그대로 넘길 때 적합하다.
- encodeURIComponent
- URL의 일부(파라미터 값 등)를 인코딩할 때 사용한다. :, /, ? 등도 모두 변환한다. 검색어나 사용자 입력값을 파라미터에 넣을 때 써야 한다.
주의 전체 URL에 encodeURIComponent를 쓰면 슬래시(/)까지 인코딩돼서 주소가 깨진다. 반대로 파라미터 값에 encodeURI를 쓰면 특수문자가 제대로 처리되지 않는다.
인코딩된 URL 되돌리기
%EC%... 형태의 URL을 원래 한글로 확인해야 할 때가 있다. 로그 분석, 리퍼러 확인, API 응답 파싱 같은 상황이다. URL 인코딩 변환기에 인코딩된 문자열을 붙여넣고 디코딩 모드로 전환하면 원래 텍스트가 바로 나온다. 빠른 예제 버튼도 있어서 한글 URL, 공백, 특수문자 등 자주 쓰는 패턴을 클릭 한 번으로 테스트할 수 있다.
URL 인코딩은 웹 개발뿐 아니라 마케팅 링크 추적, UTM 파라미터 설정에서도 자주 쓰이니 원리를 알아두면 도움이 된다.