위키피디아에서 "대한민국" 페이지 주소를 복사했더니 주소창에는 한글이 보이는데, 메신저에 붙여넣으면 %EB%8C%80%ED%95%9C%EB%AF%BC%EA%B5%AD으로 바뀌어 있다. 링크가 깨진 건 아닌데, 읽을 수가 없다.
왜 이렇게 변환되는가
URL에는 영문 알파벳, 숫자, 일부 특수문자(-, _, ., ~)만 사용할 수 있다. 한글, 공백, 기타 특수문자는 URL 표준에 맞지 않아서 "퍼센트 인코딩"이라는 방식으로 변환된다.
- 퍼센트 인코딩
- 문자의 UTF-8 바이트 값을 %XX 형태로 바꾸는 것이다. 한글 1글자는 UTF-8에서 3바이트이므로 %XX가 3개씩 붙는다.
변환 예시
| 원래 텍스트 | 인코딩 결과 |
|---|---|
| 안녕 | %EC%95%88%EB%85%95 |
| 공백 문자 | %EA%B3%B5%EB%B0%B1+%EB%AC%B8%EC%9E%90 또는 %20 |
| 서울&부산 | %EC%84%9C%EC%9A%B8%26%EB%B6%80%EC%82%B0 |
공백은 +로 바뀌기도 하고 %20으로 바뀌기도 한다. 어떤 방식인지는 인코딩 함수에 따라 다르다.
실무에서 URL 인코딩이 필요한 경우
- API 파라미터에 한글 포함: 검색어를 URL 파라미터로 보낼 때 (
?q=서울날씨→?q=%EC%84%9C%EC%9A%B8...) - 리다이렉트 URL 안에 URL 넣기: URL 안에 또 다른 URL이 있으면 &, =, / 같은 문자가 충돌한다
- 파일명에 특수문자: 다운로드 링크의 파일명에 공백이나 괄호가 있으면 인코딩 필요
- 이메일/메신저로 공유: 한글 링크를 보낼 때 깨져 보이는 문제 해결
인코딩과 디코딩 방법
자바스크립트에서
// 인코딩
encodeURIComponent("안녕하세요");
// 결과: "%EC%95%88%EB%85%95%ED%95%98%EC%84%B8%EC%9A%94"
// 디코딩
decodeURIComponent("%EC%95%88%EB%85%95");
// 결과: "안녕"TIPencodeURI와encodeURIComponent는 다르다.encodeURI는 전체 URL에 쓰고(/, ?, = 등은 그대로 둠),encodeURIComponent는 파라미터 값에 쓴다(모든 특수문자를 변환).
코드 없이 변환하기
개발 환경이 아니거나 빠르게 확인만 하고 싶을 때는 URL 인코딩 변환기에 텍스트를 붙여넣으면 된다. 인코딩/디코딩 탭을 전환하면서 양방향 변환이 가능하고, encodeURIComponent 옵션도 선택할 수 있다.
자주 묻는 질문
인코딩된 URL을 클릭하면 정상 작동하나요?
브라우저가 자동으로 디코딩해서 처리하기 때문에 정상 작동한다. 주소창에는 한글로 보여주지만 내부적으로는 인코딩된 상태로 요청을 보낸다.
한글 도메인도 인코딩이 필요한가요?
한글 도메인은 퍼센트 인코딩이 아니라 Punycode라는 별도 방식으로 변환된다. 예를 들어 "한글.kr"은 "xn--bj0bj06e.kr"로 바뀐다. URL 인코딩과는 다른 체계다.
공백은 +와 %20 중 뭘 써야 하나요?
HTML 폼 전송(application/x-www-form-urlencoded)에서는 +를 쓰고, 그 외 URL에서는 %20을 쓰는 게 표준이다. 실무에서는 둘 다 통용되는 경우가 많다.
URL에서 한글이 깨져 보이는 건 오류가 아니라 표준 변환 과정이다. 디코딩하면 원래 텍스트로 돌아오니까 당황할 필요 없다.