블로그 글 주소를 카카오톡으로 공유했더니 한글 부분이 %ED%95%9C%EA%B5%AD 같은 이상한 문자로 바뀌어 있다. 링크는 정상 작동하는데 보기가 좋지 않다. 이게 URL 인코딩이다.
URL에 한글을 쓸 수 없는 이유
URL(웹 주소)은 원래 ASCII 문자(영문, 숫자, 일부 특수문자)만 허용한다. 1990년대에 만들어진 규격이라 한글, 일본어, 중국어 같은 문자는 포함되지 않았다. 그래서 한글이 URL에 들어가면 퍼센트 인코딩(percent-encoding)이라는 방식으로 변환된다.
- "한" →
%ED%95%9C(UTF-8 바이트를 16진수로 표현) - 공백 →
%20 - "&" →
%26
브라우저 주소창에서는 한글이 그대로 보이지만, 실제로 서버에 전달되는 URL은 인코딩된 형태다. 주소를 복사해서 다른 곳에 붙여넣으면 인코딩된 버전이 나오는 이유다.
encodeURI와 encodeURIComponent 차이
개발할 때 자주 헷갈리는 부분이다. 둘 다 URL 인코딩을 하지만 범위가 다르다.
| 함수 | 인코딩하지 않는 문자 | 용도 |
|---|---|---|
encodeURI | : / ? & = # @ 등 URL 구조 문자 보존 | 전체 URL을 인코딩할 때 |
encodeURIComponent | 영문, 숫자, - _ . ~만 보존 | 쿼리 파라미터 값만 인코딩할 때 |
예를 들어 https://example.com/검색?q=한글&page=1을 인코딩한다면:
encodeURI:https://example.com/%EA%B2%80%EC%83%89?q=%ED%95%9C%EA%B8%80&page=1(URL 구조 유지)encodeURIComponent:https%3A%2F%2Fexample.com%2F...(:, / 까지 전부 인코딩돼서 URL이 깨짐)
전체 URL은 encodeURI, 파라미터 값만 넣을 때는 encodeURIComponent를 써야 한다.
URL 인코딩/디코딩이 필요한 상황
- 한글 URL 공유
- 카카오톡, 슬랙 등에서 한글 URL이 깨져 보일 때 디코딩하면 원래 주소가 나온다.
- API 파라미터 전달
- 검색어에 특수문자(&, =, ?)가 포함되면 URL 구조와 충돌한다. 파라미터 값을 인코딩해서 보내야 서버가 정확히 해석한다.
- 리다이렉트 URL
- 로그인 후 돌아갈 URL을 파라미터로 넘길 때 전체 URL을 인코딩해야 한다.
변환이 필요할 때 URL 인코딩 변환기에 텍스트를 넣으면 인코딩/디코딩 결과가 바로 나온다. encodeURI와 encodeURIComponent 옵션을 선택할 수 있고, 변환 전후 크기 변화도 확인된다.
TIP 한글 도메인(예: 한국인터넷정보센터.kr)은 URL 인코딩이 아닌 퓨니코드(Punycode)로 변환된다. 둘은 다른 기술이니 혼동하지 말자.
인코딩된 URL이 깨져 보여도 당황할 필요 없다. 디코딩하면 원래 주소가 나오고, 링크 자체는 정상 작동한다.