URL 인코딩 디코딩이란, 한글 URL 깨짐 원인과 해결법

카카오톡으로 보낸 링크 주소가 %ED%95%9C%EA%B8%80 같은 알 수 없는 문자로 바뀌어 있다. 깨진 게 아니다. URL에서 한글을 표현하는 방식인 퍼센트 인코딩(URL 인코딩)이 적용된 것이다.

URL 인코딩이 왜 필요한가

URL은 원래 영문, 숫자, 일부 특수문자만 허용하도록 설계됐다. 한글, 일본어, 공백, &, = 같은 문자가 URL에 포함되면 서버가 주소를 잘못 해석할 수 있다. 그래서 이런 문자를 %XX 형태의 코드로 바꿔서 전달하는 것이 URL 인코딩이다.

예시
원본: https://example.com/검색?q=서울 맛집
인코딩 후: https://example.com/%EA%B2%80%EC%83%89?q=%EC%84%9C%EC%9A%B8%20%EB%A7%9B%EC%A7%91

한글 URL이 깨지는 상황

• 메신저로 URL 공유 시 : 한글 부분이 퍼센트 인코딩으로 변환되어 보기 어려워진다
• API 파라미터 전달 시 : 한글 검색어를 쿼리스트링에 그대로 넣으면 400 에러가 날 수 있다
• 이메일에 URL 삽입 시 : 일부 이메일 클라이언트가 한글 URL을 자동 인코딩하면서 링크가 끊어진다
• 서버 간 데이터 전송 : 인코딩 방식(UTF-8, EUC-KR)이 서로 다르면 글자가 깨진다

인코딩과 디코딩 하는 법

개발자라면 JavaScript의 encodeURIComponent() 함수를 쓰겠지만, 빠르게 한두 개만 변환하고 싶을 때는 URL 인코딩 변환기에 텍스트를 붙여넣는 게 더 빠르다. 인코딩과 디코딩을 토글로 전환할 수 있고, 변환 결과를 바로 복사할 수 있다.

개발 시 주의할 점

1. 이중 인코딩 방지 : 이미 인코딩된 문자열을 한 번 더 인코딩하면 %25가 생기면서 원래 값으로 복원이 안 된다
2. encodeURI vs encodeURIComponent : encodeURI는 URL 전체를 처리하되 :, /, ? 같은 구분자는 건드리지 않는다. encodeURIComponent는 파라미터 값만 인코딩할 때 쓰고, 구분자까지 변환한다
3. 서버측 인코딩 통일 : 프론트엔드와 백엔드의 인코딩 방식(UTF-8)을 통일해야 한글이 깨지지 않는다

TIP 디코딩이 필요한 대표적인 상황은 서버 로그 분석이다. 접속 로그에 찍힌 URL의 한글 부분이 전부 퍼센트 코드로 되어 있으면 디코딩해서 읽어야 한다.

URL에 한글이 섞이면 언젠가 깨지는 순간이 온다. 원리를 알아두면 당황하지 않고 바로 대응할 수 있다.