블로그 글 링크를 카카오톡으로 보냈더니 주소가 %EB%B8%94%EB%A1%9C%EA%B7%B8처럼 알 수 없는 문자로 바뀌어 있다. 링크는 정상 작동하는데, 보기에 지저분하고 어디로 가는 주소인지 알 수가 없다. 이건 URL 인코딩 때문이다.
URL 인코딩이란
URL에는 영문 알파벳, 숫자, 일부 특수문자만 직접 쓸 수 있다. 한글, 공백, &나 = 같은 문자는 URL 구조를 깨뜨릴 수 있어서, 퍼센트(%) 기호와 16진수 코드로 변환해서 전송한다. 이걸 퍼센트 인코딩(Percent Encoding)이라고 부른다.
- 인코딩 예시
- "블로그" →
%EB%B8%94%EB%A1%9C%EA%B7%B8 - "hello world" →
hello%20world(공백이 %20으로 변환) - 디코딩
- 인코딩된 문자열을 원래 텍스트로 되돌리는 과정. 위의 반대 방향이다.
한글 URL이 깨져 보이는 이유
한글은 UTF-8 기준으로 한 글자당 3바이트를 차지한다. "블"이라는 한 글자가 %EB%B8%94 세 덩어리로 바뀌니, 한글이 길어질수록 URL이 매우 길어지고 읽기 어려워진다.
크롬 주소창에서는 한글이 그대로 보이지만, 이건 브라우저가 디코딩해서 보여주는 것이다. 실제 전송되는 URL에는 인코딩된 형태가 들어간다. 카카오톡이나 이메일에서 링크를 붙여넣으면 인코딩된 원래 형태가 드러나는 것이다.
인코딩/디코딩 변환하기
인코딩된 URL을 사람이 읽을 수 있는 형태로 바꾸고 싶거나, 반대로 한글이 포함된 텍스트를 URL에 넣을 수 있는 형식으로 바꿔야 할 때 URL 인코딩 변환기를 쓰면 된다. 텍스트를 입력하는 즉시 변환 결과가 나온다.
| 상황 | 할 일 | 예시 |
|---|---|---|
| 한글 URL을 API에 넣어야 할 때 | 인코딩 | 검색어 → %EA%B2%80%EC%83%89%EC%96%B4 |
| 인코딩된 URL 내용을 확인하고 싶을 때 | 디코딩 | %EA%B2%80%EC%83%89%EC%96%B4 → 검색어 |
| UTM 파라미터에 한글을 넣어야 할 때 | 인코딩 | utm_campaign=봄세일 → utm_campaign=%EB%B4%84%EC%84%B8%EC%9D%BC |
참고 encodeURI와 encodeURIComponent의 차이가 있다. encodeURI는 URL 전체 구조(://?=&)는 유지하고 한글만 변환하고, encodeURIComponent는 모든 특수문자까지 변환한다. 쿼리 파라미터 값만 인코딩할 때는 후자를 쓴다.
개발자가 아니어도 쓰는 경우
- 마케터 — UTM 파라미터에 한글 캠페인명을 넣을 때
- 블로거 — 한글이 포함된 링크가 깨져 보일 때 원래 주소 확인
- 기획자 — API 문서에서 인코딩된 예시 URL을 해석할 때
URL 인코딩은 원리만 알면 어렵지 않다. 한글이 %로 시작하는 코드로 바뀐 것일 뿐이고, 디코딩하면 원래 텍스트가 그대로 돌아온다.