URL 인코딩이란? 한글 주소 깨짐 원인과 해결법

카카오톡에 네이버 블로그 링크를 보냈는데 한글 부분이 %EA%B2%80%EC%83%89처럼 알 수 없는 문자열로 바뀌어 있다. 링크를 클릭하면 제대로 열리긴 하지만, 보는 사람 입장에서는 이게 어디로 가는 주소인지 알 수가 없다.

URL 인코딩이 필요한 이유

URL(웹 주소)에는 사용할 수 있는 문자가 정해져 있다. 영문 알파벳, 숫자, 그리고 일부 특수문자(-, _, ., ~)만 허용된다. 한글, 공백, 특수문자 같은 나머지 문자는 그대로 넣을 수 없기 때문에 퍼센트 인코딩으로 변환해야 한다.

인코딩

"한글"이라는 텍스트를 URL에 넣으려면 각 바이트를 %XX 형태로 바꾼다. "한" → %ED%95%9C, "글" → %EA%B8%80

디코딩

인코딩된 %ED%95%9C%EA%B8%80을 다시 "한글"로 복원하는 과정이다.

브라우저 주소창에 한글을 직접 입력하면 보기에는 한글로 표시되지만, 실제 HTTP 요청에서는 인코딩된 형태로 전송된다.

encodeURI와 encodeURIComponent의 차이

개발자라면 이 두 가지를 혼동해서 버그를 만든 경험이 있을 것이다.

예를 들어 검색어에 "서울&인천"을 넣어야 한다면, encodeURI는 &를 그대로 두기 때문에 파라미터 구분자로 해석된다. encodeURIComponent를 써야 &가 %26으로 변환되면서 하나의 값으로 전달된다.

실무에서 만나는 인코딩 문제

카카오톡·슬랙에서 링크 깨짐

한글이 포함된 URL을 메신저에 붙여넣으면 인코딩된 문자열이 노출된다. 링크 자체는 동작하지만 가독성이 떨어진다. 이건 메신저가 URL을 파싱하면서 인코딩 상태 그대로 표시하기 때문이다.

API 호출 시 파라미터 오류

쿼리스트링에 한글이나 특수문자가 들어가면 서버가 값을 제대로 인식하지 못하는 경우가 있다. 이때 encodeURIComponent로 값을 감싸주면 해결된다.

이메일·문서에 URL 삽입

보고서에 URL을 넣어야 하는데 %ED%95%9C이 잔뜩 섞인 주소가 보기 좋지 않다. 디코딩해서 원문을 확인한 뒤 단축 URL로 변환하면 깔끔하다.

TIP URL 인코딩 변환기에 텍스트를 붙여넣으면 인코딩과 디코딩을 실시간으로 전환할 수 있다. encodeURIComponent 옵션 체크 여부에 따라 결과가 달라지니 용도에 맞게 선택하면 된다.

URL 인코딩은 원리를 이해하면 단순하지만, 실무에서 빠뜨리면 링크 깨짐이나 API 오류로 이어진다. 한글이 포함된 URL을 다룰 때는 한 번 더 확인하는 습관이 시간을 아껴준다.