카카오톡으로 링크를 보냈는데 상대방이 열면 404 에러가 뜬다. URL에 한글이 포함되어 있으면 이런 일이 종종 생긴다. 메신저가 주소를 잘못 잘라내거나, 인코딩이 깨지면서 엉뚱한 페이지로 연결되기 때문이다.
URL 인코딩이란
웹 주소(URL)에는 영문 알파벳, 숫자, 일부 특수문자만 허용된다. 한글, 공백, &, = 같은 문자는 그대로 넣을 수 없어서, 퍼센트 기호(%)와 16진수 코드 조합으로 변환해야 한다. 이 과정이 URL 인코딩이고, 반대로 코드를 원래 문자로 되돌리는 게 디코딩이다.
"서울"이라는 단어를 UTF-8로 인코딩하면 %EC%84%9C%EC%9A%B8이 된다. 한글 한 글자가 3바이트를 차지하기 때문에 퍼센트 코드 3개로 표현된다. 브라우저 주소창에는 한글로 보이지만, 실제 서버로 전달되는 건 이 인코딩된 형태다.
한글 URL이 깨지는 원인
한글이 포함된 링크를 복사할 때, 환경에 따라 인코딩된 상태 또는 원본 한글 그대로 복사된다. 이 두 가지가 섞이거나 잘못 처리되면 문제가 생긴다.
- 링크 잘림: 메신저나 이메일에서 긴 URL이 중간에 잘리면, 퍼센트 코드가 불완전해져서 서버가 해석하지 못한다
- 이중 인코딩: 이미 인코딩된 주소를 프로그램이 한 번 더 인코딩하면
%25EC...처럼 % 자체가 인코딩되어 전혀 다른 주소가 된다 - 문자셋 불일치: 서버는 UTF-8을 기대하는데 클라이언트가 EUC-KR로 보내면 한글이 깨진다. 오래된 웹사이트에서 자주 발생하는 문제다
encodeURI와 encodeURIComponent 차이
JavaScript로 개발할 때 URL 인코딩 함수를 선택하는 기준은 하나다. 전체 주소를 인코딩할 것인지, 쿼리 파라미터 값만 인코딩할 것인지에 따라 갈린다.
- encodeURI
- URL 구조를 유지하면서 인코딩한다.
://,/,?,=,&같은 구조 문자는 그대로 둔다. 전체 URL을 안전하게 전달할 때 쓴다. - encodeURIComponent
- 구조 문자를 포함해 모든 특수문자를 인코딩한다. 쿼리 파라미터 값에 URL이나
&가 포함될 때 사용한다. 파라미터 구분자와 충돌하는 걸 방지해 준다.
주의 전체 URL에 encodeURIComponent를 쓰면 ://까지 인코딩되어 주소가 망가진다. 반대로 쿼리 값에 encodeURI를 쓰면 특수문자가 남아서 파라미터 파싱 오류가 날 수 있다.
브라우저에서 바로 변환하기
코드를 직접 작성할 줄 몰라도 괜찮다. 한글이 포함된 URL을 URL 인코딩 변환기에 붙여넣으면 인코딩 결과가 즉시 나온다. %EC%84%9C... 같은 코드를 디코딩 탭에 넣으면 원래 한글로 복원할 수도 있다.
- encodeURI, encodeURIComponent 방식 선택 가능
- 입력하는 즉시 실시간 변환
- 입력 데이터가 서버로 전송되지 않아 민감한 URL도 안전하게 처리
링크를 보냈는데 상대방한테 404가 뜬다면, 주소에 한글이 제대로 인코딩되어 있는지부터 확인해 보자. 대부분은 인코딩 한 번이면 해결되는 문제다.