블로그 글의 URL에 한글 제목이 들어가면 주소창에서는 잘 보인다. 그런데 그 URL을 카카오톡이나 이메일에 붙여넣으면 %ED%95%9C%EA%B8%80 같은 알 수 없는 문자열로 바뀐다. 링크가 깨진 게 아니라, 이게 URL 인코딩이다.
URL 인코딩이 필요한 이유
URL에는 영문 알파벳, 숫자, 일부 특수문자(-, _, ., ~)만 직접 쓸 수 있다. 한글, 공백, &, = 같은 문자는 웹 서버가 다른 의미로 해석할 수 있기 때문에 퍼센트 인코딩(%XX 형식)으로 변환해서 전달한다.
- 공백
- %20 또는 +로 변환. "hello world" → "hello%20world"
- 한글
- UTF-8 기준으로 한 글자당 3바이트, 즉 %XX%XX%XX 형태. "안" → "%EC%95%88"
- 특수문자 (&, =, ?)
- URL 구조에서 쿼리 파라미터 구분자로 쓰이기 때문에 인코딩 필수. "&" → "%26"
디코딩은 언제 필요한가
인코딩된 URL을 사람이 읽을 수 있는 형태로 되돌리는 게 디코딩이다. 아래 상황에서 자주 필요하다.
- 로그 파일에 기록된 인코딩된 URL을 해석할 때
- API 응답에서 인코딩된 파라미터 값을 확인할 때
- 이메일이나 문서에 붙여넣은 인코딩된 링크의 원문을 볼 때
- 검색 엔진 분석 도구에서 키워드가 인코딩된 상태로 나올 때
직접 변환하는 방법
자바스크립트에서는 encodeURIComponent()와 decodeURIComponent() 함수를 쓴다. 하지만 코드를 열지 않고 빠르게 확인하고 싶을 때는 URL 인코딩 변환 도구에 텍스트를 붙여넣으면 인코딩·디코딩 결과가 실시간으로 나온다. 입출력 크기(바이트)도 표시되니까 인코딩 후 URL 길이가 얼마나 늘어나는지도 바로 알 수 있다.
TIP encodeURI()와 encodeURIComponent()는 다르다. encodeURI()는 URL 전체를 대상으로 하고 :, /, ? 같은 구조 문자를 건드리지 않는다. encodeURIComponent()는 모든 특수문자를 인코딩한다. 쿼리 파라미터 값을 넣을 때는 후자를 써야 안전하다.
한글 URL 깨짐 해결
한글 URL이 깨져 보이는 대부분의 경우, 실제로 링크가 깨진 건 아니다. 인코딩된 상태 그대로 브라우저에 붙여넣으면 정상 접속된다. 문제가 되는 건 EUC-KR 인코딩으로 처리된 구형 사이트에서 UTF-8 기준으로 디코딩할 때다. 이 경우 인코딩 방식을 맞춰줘야 글자가 제대로 보인다.
인코딩된 URL은 보기 불편할 뿐이지 기능상 문제는 없다. 다만 SNS에 공유할 때 URL이 지저분해 보이는 게 신경 쓰인다면, 단축 URL 서비스를 함께 활용하는 방법도 있다.