블로그 글 링크를 카카오톡으로 공유했는데, 한글 부분이 %EC%9D%B4%EB%9F%B0 같은 문자열로 바뀌어 있다. URL 인코딩 때문이다. 깨진 게 아니라 정상적인 변환이지만, 사람 눈에는 읽을 수 없는 상태가 된다.
URL 인코딩이 필요한 이유
URL은 ASCII 문자만 허용한다. 한글, 공백, 특수문자(&, =, ? 등)는 URL에 그대로 넣을 수 없기 때문에, 퍼센트(%) 뒤에 16진수 코드를 붙이는 방식으로 변환한다. 이걸 퍼센트 인코딩이라고도 부른다.
예시 "한글" → %ED%95%9C%EA%B8%80 (UTF-8 기준)
공백 → %20 또는 +
& → %26
인코딩 vs 디코딩
| 동작 | 하는 일 | 용도 |
|---|---|---|
| 인코딩 | 한글·특수문자 → %XX 형태 | URL에 한글 파라미터를 넣을 때 |
| 디코딩 | %XX → 원래 한글·특수문자 | 인코딩된 URL을 읽을 수 있게 복원할 때 |
개발할 때 주의할 점
- 이중 인코딩 주의: 이미 인코딩된 문자열을 다시 인코딩하면 %25ED... 같이 꼬인다
- encodeURI vs encodeURIComponent: 전자는 URL 전체용, 후자는 파라미터 값 하나용이다. 쿼리 파라미터에는 encodeURIComponent를 써야 한다
- 서버 디코딩 설정: 서버가 UTF-8로 디코딩하지 않으면 한글이 깨질 수 있다
빠르게 변환하는 법
API 테스트 중에 파라미터를 인코딩해야 하거나, 로그에 찍힌 인코딩된 URL을 읽어야 할 때 URL 인코딩 변환 도구에 붙여넣으면 바로 결과가 나온다. 인코딩/디코딩 모드를 전환할 수 있고, encodeURIComponent 옵션도 있어서 JavaScript에서 쓸 결과와 동일한 값을 확인할 수 있다.
한글 URL이 깨져 보이는 건 오류가 아니다. 다만 공유할 때 보기 안 좋으니까, 단축 URL을 쓰거나 영문 슬러그를 사용하는 것도 방법이다.