공유한 링크를 카카오톡에서 열었더니 주소창에 %ED%95%9C%EA%B8%80 같은 문자가 잔뜩 붙어 있었다. 링크가 깨진 건 아니고, 브라우저가 한글을 URL에서 쓸 수 있는 형태로 변환한 것이다. 이게 URL 인코딩이다.
URL 인코딩이 필요한 이유
URL에는 영문, 숫자, 일부 기호만 사용할 수 있다. 한글, 공백, 특수문자(&, =, ? 등)가 포함되면 서버가 주소를 제대로 해석하지 못할 수 있다. 그래서 이런 문자를 % 뒤에 16진수 코드를 붙인 형태로 바꾸는데, 이것이 퍼센트 인코딩(Percent Encoding)이다.
인코딩 예시
| 원본 | 인코딩 결과 | 설명 |
|---|---|---|
| 안녕 | %EC%95%88%EB%85%95 | 한글 UTF-8 인코딩 |
| 공백 있는 텍스트 | %EA%B3%B5%EB%B0%B1+%EC%9E%88%EB%8A%94 | 공백은 +로 변환 |
| key=value&a=b | key%3Dvalue%26a%3Db | =과 &도 인코딩 대상 |
encodeURI vs encodeURIComponent
JavaScript에서 URL 인코딩 함수가 두 개인 이유가 있다.
- encodeURI
- URL 전체 구조를 유지한다.
://,/,?,&같은 구분자는 그대로 둔다. 전체 URL을 인코딩할 때 쓴다. - encodeURIComponent
- 구분자까지 전부 인코딩한다. 쿼리 파라미터의 값 부분처럼, URL의 일부만 인코딩할 때 쓴다.
잘못 선택하면 https://까지 인코딩되거나, 반대로 파라미터 안의 &가 구분자로 해석되는 문제가 생긴다.
TIP API에 한글 검색어를 쿼리로 보낼 때는 encodeURIComponent를 쓰는 게 맞다. 전체 URL을 인코딩해야 하는 상황은 거의 없다.
인코딩된 URL을 원래 텍스트로 되돌리고 싶거나, 한글을 안전하게 변환해야 할 때 URL 인코딩 변환기에 붙여넣으면 바로 결과가 나온다. encodeURI와 encodeURIComponent 두 가지 모드를 선택할 수 있고, 인코딩과 디코딩을 버튼 하나로 전환할 수 있다.
주소창에 퍼센트 기호가 보인다고 링크가 잘못된 건 아니다. 인코딩이 뭔지 알면 당황할 일이 없어진다.