네이버 블로그 글 주소를 카카오톡으로 보냈더니 한글 부분이 %ED%95%9C%EA%B8%80로 바뀌어 있다. 깨진 게 아니다. URL 인코딩이 된 것이다.
URL 인코딩이 필요한 이유
URL(웹 주소)에는 영문 알파벳, 숫자, 일부 특수문자만 쓸 수 있다. 한글, 공백, 특수문자는 그대로 넣으면 서버가 해석을 못 하거나 주소가 잘릴 수 있다. 그래서 안전하지 않은 문자를 %XX 형태의 퍼센트 인코딩으로 바꿔서 전송하는 것이다.
- "한" →
%ED%95%9C(UTF-8 기준 3바이트) - 공백 →
%20 - "&" →
%26
인코딩 vs 디코딩
- 인코딩 (Encoding)
- 사람이 읽을 수 있는 텍스트를 URL 안전 문자로 변환하는 과정이다. 링크를 API 파라미터에 넣거나, 검색 쿼리를 URL에 포함시킬 때 필요하다.
- 디코딩 (Decoding)
- 퍼센트 인코딩된 문자열을 원래 텍스트로 복원하는 과정이다. 로그 분석이나 디버깅 시 인코딩된 URL의 실제 내용을 확인할 때 쓴다.
encodeURI와 encodeURIComponent의 차이
JavaScript에서 URL을 인코딩하는 함수가 두 가지다. 차이를 모르면 이중 인코딩이나 링크 오류가 생긴다.
| 함수 | 인코딩 안 하는 문자 | 사용 상황 |
|---|---|---|
encodeURI | : / ? & = # 등 URL 구조 문자 | 전체 URL을 인코딩할 때 |
encodeURIComponent | 거의 없음 (알파벳, 숫자 정도) | 쿼리 파라미터 값만 인코딩할 때 |
예를 들어 검색어 "서울 맛집"을 쿼리로 보낼 때는 encodeURIComponent를 써야 공백과 한글이 모두 변환된다.
빠르게 변환하는 법
개발 중에 인코딩된 URL을 해석해야 하거나, 한글 파라미터를 인코딩해서 API에 넣어야 할 때 URL 인코딩 변환기를 쓰면 편하다. 입력창에 텍스트를 넣으면 실시간으로 변환 결과가 나오고, encodeURI와 encodeURIComponent 방식을 선택할 수 있다. 입출력 크기도 함께 표시되니 인코딩 후 URL 길이가 얼마나 늘어나는지도 바로 확인 가능하다.
URL에서 한글이 깨져 보여도 당황할 필요 없다. 인코딩된 것일 뿐, 디코딩하면 원래대로 돌아온다.