블로그 글 주소를 카카오톡으로 보냈더니 한글 부분이 %EA%B8%80 같은 문자열로 바뀌어 있다. 링크는 정상 작동하지만 보기가 지저분하다. 반대로 이런 코드를 받았을 때 원래 텍스트가 뭔지 알고 싶을 때도 있다.
URL 인코딩이 뭔가
URL(웹 주소)에는 영문 알파벳, 숫자, 일부 특수문자만 쓸 수 있다. 한글, 공백, 특수문자 등은 그대로 넣으면 오류가 날 수 있어서 퍼센트(%) 뒤에 16진수 코드로 변환하는 것이다. 이걸 퍼센트 인코딩(Percent Encoding)이라고도 부른다.
| 원본 | 인코딩 결과 | 설명 |
|---|---|---|
| 공백 | %20 | 가장 흔한 변환 |
| 서울 | %EC%84%9C%EC%9A%B8 | 한글은 글자당 3바이트(UTF-8) |
| & | %26 | 쿼리 파라미터 구분자와 충돌 방지 |
| = | %3D | 키=값 형식과 충돌 방지 |
encodeURI와 encodeURIComponent 차이
JavaScript에서 URL을 인코딩할 때 두 가지 함수가 있다. 용도가 다르다.
- encodeURI
- 전체 URL을 인코딩할 때 쓴다.
: / ? & =같은 URL 구조 문자는 그대로 둔다. 주소 전체를 넣을 때 적합하다. - encodeURIComponent
- 쿼리 파라미터 값 하나를 인코딩할 때 쓴다. 모든 특수문자를 인코딩한다. 검색어나 폼 데이터를 URL에 포함할 때 적합하다.
TIP API 요청에 한글 파라미터를 넣을 때 인코딩을 안 하면 서버에서 깨진 문자를 받게 된다. 의도한 값과 다른 결과가 나오는 원인의 상당수가 인코딩 누락이다.
인코딩·디코딩 바로 하는 법
URL 인코딩 변환 도구에서 인코딩 탭에 원본 텍스트를 넣으면 변환 결과가 나오고, 디코딩 탭에 인코딩된 문자열을 넣으면 원래 텍스트가 복원된다. encodeURI와 encodeURIComponent 옵션도 선택할 수 있어서 상황에 맞게 쓸 수 있다.
이런 경우에 필요하다
- API 요청 URL에 한글 검색어를 포함할 때
- 리다이렉트 URL 파라미터에 다른 URL을 넣을 때
- 이메일이나 메신저로 받은 깨진 URL을 복원할 때
- 크롤링/스크래핑 시 URL 파싱이 안 될 때
인코딩된 URL은 길어 보이지만 정상이다. 브라우저 주소창에서는 자동으로 디코딩해서 보여주기 때문에 평소에는 인식하지 못할 뿐이다.