한글이 들어간 블로그 글 주소를 카카오톡으로 보냈더니 %ED%95%9C%EA%B8%80 같은 문자열로 바뀌어 있다. 링크 자체는 정상적으로 작동하지만, 보기에 지저분하고 무슨 페이지인지 알 수 없다. 이게 URL 인코딩이다.
URL 인코딩이 필요한 이유
URL에는 영문 알파벳, 숫자, 일부 특수문자만 사용할 수 있다. 한글이나 공백, 특수기호가 포함되면 브라우저가 이를 퍼센트 기호(%)와 16진수 코드로 변환한다. "안녕"이라는 한글 2글자는 UTF-8 기준 6바이트이므로 %EC%95%88%EB%85%95으로 변환된다.
인코딩 vs 디코딩
- 인코딩(Encoding)
- 한글이나 특수문자를 퍼센트 코드로 바꾸는 것. 서버에 데이터를 보낼 때 필요하다.
- 디코딩(Decoding)
- 퍼센트 코드를 다시 원래 문자로 복원하는 것. 인코딩된 URL을 사람이 읽을 수 있게 바꿀 때 쓴다.
실제로 언제 쓰게 되나
- API 개발 — 쿼리 파라미터에 한글을 넣으면 인코딩 없이는 서버가 값을 제대로 받지 못한다
- 리다이렉트 URL 처리 —
redirect_url=https://example.com/경로에서 한글 경로를 인코딩해야 정상 동작한다 - SNS 공유 — 한글 URL이 깨져 보일 때 원본 주소를 확인하려면 디코딩이 필요하다
- 디버깅 — 서버 로그에 인코딩된 URL이 찍혀 있을 때 내용을 확인하려면 디코딩한다
이런 상황에서 URL 인코딩 변환 도구에 텍스트를 넣으면 인코딩/디코딩이 바로 된다. encodeURIComponent 옵션을 켜면 슬래시(/)나 앰퍼샌드(&) 같은 예약 문자까지 전부 인코딩해준다.
참고 JavaScript에서encodeURI()와encodeURIComponent()는 다르다. 전자는 URL 전체 구조를 유지하면서 인코딩하고, 후자는 쿼리 파라미터 값처럼 부분 문자열을 인코딩할 때 쓴다. 용도에 따라 구분해야 의도하지 않은 이중 인코딩을 피할 수 있다.
URL 인코딩은 원리를 알면 단순하다. 한글이나 특수문자가 퍼센트 코드로 바뀌는 것뿐이다. 필요할 때 변환 도구로 바로 확인하면 디버깅 시간이 줄어든다.