카카오톡에 링크를 보냈더니 한글 부분이 %ED%95%9C%EA%B8%80로 바뀌어 있다. 깨진 게 아니라 인코딩된 것이다. URL에는 한글을 직접 넣을 수 없어서 브라우저가 자동으로 변환한 결과다.
URL 인코딩이 필요한 이유
URL은 원래 ASCII 문자(영문, 숫자, 일부 특수문자)만 허용하는 규격이다. 한글, 공백, 특수문자처럼 ASCII에 포함되지 않는 문자는 퍼센트 인코딩(%XX 형식)으로 변환해야 한다.
- 한글 인코딩
- "한글"을 UTF-8로 인코딩하면 %ED%95%9C%EA%B8%80이 된다. 한글 한 글자당 3바이트, %XX 3개로 표현된다.
- 공백 인코딩
- URL에서 공백은 %20으로 변환된다. 검색어에 띄어쓰기가 있으면 주소에 %20이 들어가는 이유다.
- 특수문자 인코딩
- &, =, ? 같은 문자는 URL에서 특별한 의미를 가진다. 이런 문자를 데이터로 보내려면 %26, %3D, %3F로 인코딩해야 한다.
인코딩과 디코딩 차이
| 방향 | 입력 | 출력 | 용도 |
|---|---|---|---|
| 인코딩 | 안녕하세요 | %EC%95%88%EB%85%95... | URL에 한글 포함시킬 때 |
| 디코딩 | %EC%95%88%EB%85%95... | 안녕하세요 | 인코딩된 주소를 읽을 때 |
실무에서 URL 인코딩이 필요한 경우
- API 호출 — 쿼리 파라미터에 한글이나 특수문자가 포함되면 인코딩해야 서버가 제대로 인식한다
- 리다이렉트 URL — 로그인 후 원래 페이지로 돌아가는 URL을 파라미터로 넘길 때, URL 안에 URL이 들어가므로 이중 인코딩이 필요하다
- 이메일/메신저 공유 — 한글이 포함된 링크를 보낼 때 자동 인코딩되어 상대방에게 깨져 보일 수 있다
- 크롤링/스크래핑 — 수집한 URL에 인코딩된 한글이 섞여 있으면 디코딩해서 원래 텍스트를 추출해야 한다
개발 중에 인코딩/디코딩이 필요하면 URL 인코딩 변환 도구에 텍스트를 붙여넣으면 된다. encodeURIComponent 옵션을 켜면 슬래시나 콜론까지 전부 인코딩되고, 끄면 URL 구조 문자는 그대로 유지된다. 입출력 크기도 같이 표시되어서 인코딩 후 문자열 길이가 얼마나 늘어나는지 확인하기 좋다.
TIP JavaScript에서는encodeURIComponent()와decodeURIComponent()를 쓰면 되지만, 빠르게 확인만 하고 싶을 때는 웹 도구가 더 편하다. 특히 이중 인코딩 여부를 눈으로 확인할 때 유용하다.
%ED%95%9C%EA%B8%80이 "한글"이라는 걸 알면 더 이상 깨진 링크처럼 보이지 않는다.