[Tools] 웹브라우저 주소 복사 시 한글 깨질 때

2022년 04월 17일

Address, Browser, Decoding, Encoding, Tool, Web, Web Standard

한국 사람이면 누구나 한 번쯤 경험해보았을 텐데, 블로그 포스팅을 한글 제목으로 하고, 주소를 복사해서 친구에게 보내주려고 하면 한글이 온통 이상한 방식으로 나온다.

예를 들어, 본 블로그 주소인 “xeppetto.github.io/소프트웨어/Tools/20220417-웹브라우저-주소-복사-시-한글-깨질때”를 웹브라우저 주소창에서 복사한 후 Social Media나 메신저에 붙여넣기 하려 하면 아래와 같이 이런 식으로 표시된다.

웹주소 한글 깨짐

먼저 이런 현상이 발생하는 이유는 웹브라우저 주소창의 인코딩이 UTF-8일 수 없어서 그렇다. 본문에서 복사한 한글은 전송해도 정상적으로 보이지만, 웹브라우저의 주소창에서 복사한 한글들은 마치 깨진 거처럼 표시된다. 사실 이건 깨진 게 아니라, ASCII라고 하는 문자셋 값이다. 웹페이지의 본문에서는 UTF-8을 허용하지만, 웹브라우저의 주소창에서는 오로지 ASCII만 허용하기 때문에 나타나는 현상이다.

근본적인 이유는 웹이 처음 만들어지고 웹표준이 생성될 때 인터넷의 주소는 ASCII character set으로만 전송하도록 규약을 정해졌기 때문이다.

필자보다 훨씬 똑똑한 사람들이 모여서 만드는 규약이니 이유가 있겠지 싶어서… 필자는 사실 이유에 큰 관심이 없지만, 혹시 여기에 관심이 있는 분이 계신다면 그분의 시간을 줄여드리기 위해 제공하는 Reference 자료는 아래와 같다. 혹시 이 외에도 좋은 참고자료를 알고 계신다면 알려주시기를 바란다.

• W3C 표준 : An Introduction to Multilingual Web Addresses

웹브라우저에서 주소 복사할 때 강제로 UTF-8으로 변환해 주면 좋을 텐데, 그런 기능을 지원하지 않는 이유는 무엇일까 하는 생각이 들지만… 궁금한 게 많으면 배고프고, 배고프면 먹게 되고, 먹으면 살찌게 되므로… 필자의 건강과 안녕을 위해 그만 궁금해 하는게 좋겠다. 언젠가 웹브라우저의 주소창에서 ASCII만 사용되는 이슈도 고쳐지거나 변경되기를 바란다.

자, 아래는 “깨진” 웹 주소를 정상적인 형태로 되돌려 주는 변환 도구이다. 한글 주소를 복사하여 붙여넣은 후 변환 버튼을 클릭하면 정상적인 형태의 한글로 변환해 준다. 본 블로그 포스팅의 주소를 복사하여 테스트해보자.

The URL Decoder/Encoder is licensed under a Creative Commons Attribution-ShareAlike 2.0 License.

위 form에서 사용한 코드의 원본은 아래와 같다. 아래 코드에서 버튼의 Localization을 적용하고, form의 전체 영역에 style을 조금 변경하여 적용한 결과가 위에서 본 form이다.

저작권 고지, Announcement for Copyright : 아래 코드는 https://meyerweb.com/eric/tools/dencoder/에서 가져왔으며, 해당 페이지에 고지된 위 도구/코드의 저작권 고지는 Creative Commons Attribution-ShareAlike 2.0 License입니다..

<script type="text/javascript">
  function encode() {
    var obj = document.getElementById('dencoder');
    var unencoded = obj.value;
    obj.value = encodeURIComponent(unencoded).replace(/'/g,"%27").replace(/"/g,"%22");	
  }
  function decode() {
    var obj = document.getElementById('dencoder');
    var encoded = obj.value;
    obj.value = decodeURIComponent(encoded.replace(/\+/g,  " "));
  }
</script>

<form onsubmit="return false;">
  <textarea cols="100" rows="20" id="dencoder"></textarea>
  <div>
    <input type="button" onclick="decode()" value="Decode">
    <input type="button" onclick="encode()" value="Encode">
  </div>
</form>

위 코드를 복사해서 본인 컴퓨터 하드디스크 어딘가에 모셔놓아도 되고, 혹은 크롬 브라우저를 사용한다면, 크롬 스토어에 아래와 같은 Decoder들이 올라와 있으니 사용해 보면 어떨까?

• https://chrome.google.com/webstore/detail/decode-urls/ammnkklofnncmpmenbffefpmdnocnmlp

필자는 필자의 몸뚱이처럼 점점 비대해지며 느려져만 가는 크롬에 뭔가를 더 이상 설치하고 싶지 않아서 그냥 필자의 블로그에 올려놓고 사용하기로 결정했다.

References

• https://www.w3.org/International/articles/idn-and-iri/
• https://meyerweb.com/eric/tools/dencoder/
• https://www.w3schools.com/tags/ref_urlencode.asp
• https://ko.wikipedia.org/wiki/ASCII

소프트웨어Tools

References