역슬래시(backslash) 문자가 왜 통화 표기 문자(한글인 경우 "\")로 보일까요?
다음과 같은 웹 페이지를,
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<div>
back-slash: \
</div>
</body>
</html>
영문 OS에서 Region 설정을 Korea로 설정한 운영체제 내에서 Edge, Chrome, IE 11을 이용해 방문해 보면 각각 다음의 결과를 얻을 수 있습니다.
그러니까, 역슬래시(backslash) 문자가 "\(Won: 원)"로 보이는 것은 응용 프로그램 마음입니다. ^^; 그렇다면, 응용 프로그램들이 어떻게 했길래 저런 결과를 보여주는 걸까요?
사실, 화면에 '문자'를 보여주는 것은 폰트에 좌우됩니다. 즉, 예상으로는 크롬 vs IE/Edge 간에 화면 렌더링 용 기본 폰트가 다름을 짐작할 수 있습니다. 한번 확인해 볼까요? ^^
크롬과 IE/Edge에 포함된 '개발자 도구'는 최종 렌더링 된 요소의 속성 값을 알려주는 "Computed" 탭이 있으니, 이를 통해 확인해 보면 됩니다. 다음은 IE/Edge의 경우를 보여주는데 기본 폰트가 "Times New Roman"이고,
크롬은 "Malgun Gothic"으로 되어 있습니다.
그럼, 차근히 원인 분석을 해볼까요? ^^ 먼저 IE/Edge를 살펴보겠습니다.
가령, 다음과 같은 내용을 포함한 웹 페이지를 내려보내면,
<span>한글 \</span>
IE/Edge는 여전히 백슬래시를 "\" 문자가 아닌 '
\' 문자로 보여줍니다. 심지어 위의 span 요소에 대해 Computed Style을 확인하면 폰트가 "Times New Roman"으로 되어 있습니다. 아니??? 한글이 포함된 요소를 "Times New Roman" 폰트로 렌더링 하는데 왜 잘 나오는 걸까요?
이에 대해서는 제어판의 "Internet Options"를 열어 "Fonts" 항목을 보면 됩니다.
위의 설정에 보면 "Korean" 스크립트에 대해 "Webpage font"의 경우 "Gulim"으로 출력하라고 되어 있습니다. 따라서 IE/Edge는 "Times New Roman" 폰트에 포함되지 않은 "한글"이라는 글자는 "Gulim" 폰트로 출력하지만, 역슬래시 문자('
\')의 경우 기본적으로 "Times New Roman" 폰트에 있기 때문에 "Gulim" 폰트를 사용하지 않는 것입니다.
그럼, 자연스럽게 Chrome에서 백슬래시를 "\"로 보여주는 이유를 알 수 있습니다. 크롬의 경우 기본 폰트가 "맑은 고딕(Malgun Gothic)"이고 그 안에 백슬래시가 "\"로 정의되어 있기 때문에 그대로 보여주는 것입니다. (만약 순수 영문만 설치된 운영체제에서 크롬으로 본다면 역시 '
\' 문자로 나올 것입니다.)
그렇다면, "Times New Roman"에는 역슬래시 문자가 '
\'로 정의되어 있는 반면 "맑은 고딕(Malgun Gothic)" 폰트에는 '\' 문자라는 것임을 확인해 보면 되는데, 이를 위해 "Character Map" 프로그램을 이용할 수 있습니다.
[그림 1: Times New Roman 폰트인 경우]
[그림 2: 맑은 고딕(Malgun Gothic) 폰트인 경우]
자, 이제 아셨죠? ^^
그렇다면 하나의 웹 페이지에서 백슬래시를 어떻게 보여야 할지 웹 브라우저에 관계없이 자유롭게 제어할 수 있습니다. 이런 식으로!
웹 페이지:
<span style="font-Family: Times New Roman">\</span>
출력: \
웹 페이지:
<span style="font-Family: Gulim">\</span>
출력: \
참고로, 위의 규칙은 모든 프로그램에 적용됩니다. 만약 여러분들이 사용하는 프로그램에서 역슬래시를 '\'로 보여주고 있다면 프로그램에서 선택된 폰트에 그렇게 정의되어 있는 것입니다. 따라서, 해당 응용 프로그램의 설정 창에서 폰트를 "Consolas"와 같은 식으로 바꿔주면 정상적으로 '
\' 문자로 볼 수 있습니다.
[이 글에 대해서 여러분들과 의견을 공유하고 싶습니다. 틀리거나 미흡한 부분 또는 의문 사항이 있으시면 언제든 댓글 남겨주십시오.]