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

카카오톡으로 링크를 보냈더니 한글이 %ED%95%9C%EA%B8%80로 바뀌어 있다. 깨진 건 아닐까 싶지만, 클릭하면 정상적으로 열린다. 이게 URL 인코딩이다. 왜 이렇게 되는지 알면 개발 중 URL 관련 문제를 훨씬 빠르게 해결할 수 있다.

URL에 한글을 쓰면 안 되는 이유

URL 표준(RFC 3986)에서 허용하는 문자는 영문 알파벳, 숫자, 그리고 일부 특수문자(- _ . ~)뿐이다. 한글, 공백, 대부분의 특수문자는 URL에 직접 들어갈 수 없다.

그래서 허용되지 않는 문자를 퍼센트 인코딩이라는 방식으로 변환한다. 각 바이트를 %XX 형태로 바꾸는 것이다.

변환 예시

encodeURI와 encodeURIComponent의 차이

개발할 때 자주 헷갈리는 부분이다. JavaScript에서 두 함수의 동작이 다르다.

encodeURI()

URL 전체를 인코딩한다. :, /, ?, & 같은 URL 구조 문자는 그대로 둔다. 전체 URL을 인코딩할 때 쓴다.

encodeURIComponent()

모든 특수문자를 인코딩한다. URL 구조 문자도 변환해버린다. 쿼리 파라미터의 값 부분에만 적용해야 한다.

// 잘못된 사용
encodeURIComponent("https://example.com/검색?q=테스트")
// → https%3A%2F%2Fexample.com%2F... (URL 자체가 깨짐)

// 올바른 사용
"https://example.com/검색?q=" + encodeURIComponent("테스트")
// → https://example.com/검색?q=%ED%85%8C%EC%8A%A4%ED%8A%B8

디코딩이 필요한 상황

인코딩된 URL을 받았는데 원래 내용이 뭔지 확인해야 할 때가 있다.

• 이메일로 받은 링크에 한글이 퍼센트 인코딩되어 있을 때
• 서버 로그에서 요청 URL을 분석할 때
• API 응답에 인코딩된 URL이 포함되어 있을 때
• 리다이렉트 URL 파라미터를 확인할 때

URL 인코딩 변환 도구에 인코딩된 문자열을 넣고 디코딩 탭을 선택하면 원래 텍스트가 나온다. 반대로 한글 URL을 인코딩하는 것도 같은 화면에서 가능하다.

TIP 크롬 주소창에서는 한글 URL이 그대로 보이지만, 복사하면 인코딩된 형태로 클립보드에 들어간다. 메신저에 붙여넣었을 때 길게 보이는 건 이 때문이다. 내용이 깨진 게 아니라 인코딩된 것이니 걱정하지 않아도 된다.

URL 인코딩은 웹의 기본 규칙이다. 한글 URL이 이상하게 보일 때 당황하지 않으려면 이 원리 하나만 알아두면 된다.