블로그 글 URL에 한글을 넣었더니 %EC%95%88%EB%85%95 이런 식으로 변환됐다. 뭔가 깨진 것 같은데 이게 정상인 건가?
URL에 한글이 직접 못 들어가는 이유
URL은 ASCII 문자만 허용된다. 한글, 특수문자, 공백 같은 건 퍼센트 인코딩으로 변환해야 한다. 안녕이 %EC%95%88%EB%85%95이 되는 게 정상이다.
URL 인코딩은 한글을 UTF-8 바이트로 바꾸고, 각 바이트를 %XX 형태로 표현하는 거다. 브라우저가 자동으로 처리하지만, 직접 해야 할 때도 있다.
인코딩이 필요한 상황
API 파라미터에 한글 검색어를 넣을 때. query=한글이 아니라 query=%ED%95%9C%EA%B8%80로 보내야 서버가 제대로 받는다.
URL 변환으로 한글을 인코딩하면:
- 한글 → %ED%95%9C%EA%B8%80
- 공백 → %20 (또는 +)
- & → %26
- = → %3D
디코딩은 반대로
%EC%95%88%EB%85%95을 다시 안녕으로 바꾸는 게 URL 디코딩이다. 로그 분석하거나 인코딩된 URL 파라미터를 사람이 읽을 수 있게 바꿀 때 필요하다.
URL 디코더에 인코딩된 문자열 붙여넣으면 원래 한글이 나온다.
encodeURI vs encodeURIComponent
자바스크립트에는 두 가지 인코딩 함수가 있다. URI 인코더에서도 모드를 선택할 수 있다.
- encodeURI: 전체 URL 인코딩 (/, ?, & 같은 건 그대로)
- encodeURIComponent: 파라미터 값만 인코딩 (모든 특수문자 변환)
파라미터 값에 &가 포함되어 있으면 encodeURIComponent를 써야 제대로 분리된다.
실시간 변환
한글 URL 인코딩 도구에 텍스트 입력하면 실시간으로 결과가 나온다. 입력창이랑 출력창이 분리되어 있어서 바로 비교할 수 있다.
퍼센트 인코딩 결과의 길이랑 변화율도 표시된다. 한글 3글자가 인코딩되면 27글자로 늘어나는 식.
입출력 교환
인코딩한 결과를 다시 디코딩하고 싶으면 스왑 버튼 누르면 된다. 입력이랑 출력이 바뀌면서 반대 방향으로 변환할 수 있다.
국제화 문자 처리
한글뿐 아니라 일본어, 중국어, 이모지 같은 것도 다 URL 특수문자 변환이 된다. UTF-8 기반이라서 모든 유니코드 문자를 처리할 수 있다.
정리
URL에 한글이나 특수문자 넣어야 할 때 URL 인코딩 쓰면 된다. API 호출, 링크 생성, 파라미터 전달할 때 유용하다. 깨진 것처럼 보이는 %XX 문자열은 정상이니까 걱정 안 해도 된다.