카카오톡에 링크를 보냈는데 한글 부분이 통째로 깨져 있다. 주소창에는 멀쩡하게 보이던 게 복사만 하면 %EA%B0%80%EB%82%98%EB%8B%A4 같은 문자열로 바뀐다. 링크를 받은 상대방은 의심스러운 URL이라며 클릭을 꺼린다.
왜 한글 주소가 깨져 보일까
URL은 원래 영문 알파벳, 숫자, 일부 특수문자만 허용하는 규격이다. 한글, 일본어, 중국어 같은 비ASCII 문자가 포함되면 브라우저가 자동으로 퍼센트 인코딩(Percent-Encoding)을 적용한다. 한글 한 글자가 UTF-8에서 3바이트를 차지하니까, "가"는 %EA%B0%80으로 바뀌는 식이다.
참고 브라우저 주소창에서는 한글이 그대로 보여도, 내부적으로는 인코딩된 상태로 전송된다. 주소창의 한글은 사용자 편의를 위한 표시일 뿐이다.
인코딩과 디코딩의 차이
- 인코딩 (Encoding)
- 한글, 공백, 특수문자를 %XX 형태로 변환한다. 서버에 데이터를 보내거나 URL을 안전하게 만들 때 필요하다.
- 디코딩 (Decoding)
- %XX 형태를 원래 문자로 복원한다. 깨져 보이는 링크를 사람이 읽을 수 있게 되돌릴 때 쓴다.
실제 변환 예시
| 원본 | 인코딩 결과 |
|---|---|
| 서울 맛집 | %EC%84%9C%EC%9A%B8%20%EB%A7%9B%EC%A7%91 |
| name=홍길동 | name%3D%ED%99%8D%EA%B8%B8%EB%8F%99 |
| 검색어=커피&page=2 | %EA%B2%80%EC%83%89%EC%96%B4%3D%EC%BB%A4%ED%94%BC%26page%3D2 |
어떤 상황에서 인코딩이 필요한가
- API 요청 파라미터: 쿼리스트링에 한글이 포함되면 서버가 인식하지 못하는 경우가 있다
- 파일명에 한글이 포함된 다운로드 링크: 브라우저마다 처리 방식이 달라 깨지기 쉽다
- 이메일, 문서에 URL 삽입: 일부 메일 클라이언트가 공백이나 한글에서 링크를 끊어버린다
- 리다이렉트 URL 안에 또 다른 URL이 들어갈 때: 이중 인코딩이 필요한 경우도 있다
encodeURI와 encodeURIComponent 차이
개발자라면 이 두 가지를 혼동해서 버그가 생긴 경험이 있을 것이다.
| encodeURI | encodeURIComponent | |
|---|---|---|
| 용도 | 전체 URL을 인코딩 | 파라미터 값만 인코딩 |
| : / ? & = | 변환 안 함 | 변환함 |
| 한글 | 변환함 | 변환함 |
| 공백 | %20 | %20 |
전체 URL을 넘길 때는 encodeURI, 파라미터 값 하나만 넘길 때는 encodeURIComponent를 써야 한다. URL 인코딩 변환기에서 두 방식을 체크박스 하나로 전환할 수 있으니, 코드에 적용하기 전에 결과를 미리 확인해보면 실수를 줄일 수 있다.
자주 묻는 질문
인코딩된 URL을 그대로 주소창에 넣어도 작동하나요?
작동한다. 브라우저가 인코딩된 URL을 자동으로 해석한다. %EC%84%9C%EC%9A%B8이 포함된 주소를 넣으면 "서울"로 인식해서 정상 접속된다.
이중 인코딩이 뭔가요?
이미 인코딩된 문자열을 한 번 더 인코딩하는 것이다. %25가 보이면 이중 인코딩이 된 상태다. 리다이렉트 URL 파라미터에 URL을 넣을 때 자주 발생하고, 서버에서 한 번만 디코딩하면 원래 의도한 URL이 나오지 않아 404 에러가 나기도 한다.
공백은 %20인가요, +인가요?
URL 경로에서는 %20이 표준이고, HTML 폼 데이터(application/x-www-form-urlencoded)에서는 +가 쓰인다. 구글 검색 URL에서 검색어 사이에 +가 보이는 이유가 이것이다.
링크 하나 보내면서 깨진 URL 때문에 신경 쓸 필요는 없다. 복사한 주소가 알아볼 수 없는 문자열이라면, 디코딩 한 번이면 원래 주소가 바로 나온다.