한글 검색어나 상품명을 그대로 URL에 넣을 수는 없다 — 한글 자모는 물론 공백, &, ? 같은 기호도 URL에서 안전한 문자 집합에 속하지 않기 때문에 percent-encoding으로 변환해야 한다.
한글 한 글자가 왜 9자리 코드가 되는가
한글 음절은 UTF-8에서 대부분 3바이트로 인코딩되고, 각 바이트가 %XX 형태로 표기된다 — "가"라는 글자 하나가 %EA%B0%80, 즉 9글자로 늘어난다. "서울"처럼 두 글자짜리 짧은 단어도 인코딩하면 18자를 넘어가며, 카카오톡으로 링크를 공유할 때 실제 내용보다 훨씬 길어 보이는 이유가 바로 여기에 있다.
encodeURIComponent와 encodeURI의 차이
encodeURIComponent는 &, ?, =, /를 포함한 구조적 의미를 가진 거의 모든 문자를 인코딩하므로, 검색창 값처럼 ?q=에 들어갈 단일 파라미터 값에 적합하다. encodeURI는 이런 구조 문자를 그대로 두기 때문에 이미 조립된 URL 전체를 인코딩할 때 쓴다.
흔한 실수
쿼리 문자열 전체를 encodeURIComponent로 한 번에 인코딩하면, 파라미터를 구분하는 &와 =도 %26과 %3D로 바뀌어버려 서버는 여러 개의 파라미터 대신 읽을 수 없는 파라미터 하나만 받게 된다. 값은 각각 따로 인코딩해야 한다.
언제 필요한가
- 한글 검색어나 상품명을 쿼리 파라미터에 넣을 때.
- 동적인 값(검색어, ID)이 포함된 링크를 만들 때.
- 디버깅: URL을 디코딩해서 실제로 어떤 데이터가 담겨 있는지 확인할 때.
엣지 케이스: 이중 인코딩
이미 인코딩된 문자열을 실수로 한 번 더 인코딩하면 % 자체가 %25로 바뀌어 결과가 이중 인코딩된 읽을 수 없는 문자열이 된다(%EA%B0%80이 %25EA%25B0%2580이 된다). 프레임워크가 이미 URL을 자동으로 인코딩하는데 개발자가 같은 값에 encodeURIComponent를 수동으로 한 번 더 호출할 때 흔히 발생한다.