모바일 웹 브라우저에서 유니코드 문자가 표시되지 않는 경우
얼마 전에 쓴 유니코드 관련 글을,
C++ - 문자열의 대소문자를 변환하는 transform + std::tolower/toupper 방식의 문제점
; https://www.sysnet.pe.kr/2/0/13797
우연히 모바일 웹 브라우저로 봤는데, Chrome이든 Edge든 유니코드 문자가 모두 깨져 나왔습니다. 예를 들어 아래의 문자는,
𐲀 (U+10C80 코드 - OLD HUNGARIAN CAPITAL LETTER)
PC용 웹 브라우저에서는 잘 보이지만, 모바일 브라우저에서는 이상한 글자로 보일 것입니다. (현재 이 게시물에서는 아래의 내용에 따라 잘 보이도록 조치를 취했습니다. ^^)
이걸 보이게 하려면, 일단 HTML 문서 자체는 UTF-8 인코딩을 따르고 있으니 그건 문제가 아니고, 바로
폰트가 있어야 합니다. ^^
자, 그럼 위의 문서라면 "OLD HUNGARIAN" 문자를 보여줄 수 있는 폰트를 구해야 하고,
그 방법은 이전에 설명한 방법을 따르면 됩니다.
사실 여기에는 2가지 방법이 있는데요, 클라이언트가 폰트를 설치하든지, 서버 측에서 그 폰트를 구할 경로를 알려주는 것입니다. 다행히 "OLD HUNGARIAN" 문자를 보여줄 수 있는 폰트는
공개 폰트 라이선스(SIL OPEN FONT LICENSE)로 제공하고 있으므로,
Noto Sans Old Hungarian
; https://fonts.google.com/noto/specimen/Noto+Sans+Old+Hungarian
위의 문서에 나온 방법에 따라 HTML 페이지에 다음과 같이 폰트 파일을 구할 경로를 첨부할 수 있고,
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+Old+Hungarian&display=swap" rel="stylesheet">
저 웹 페이지를 방문한 클라이언트 측 웹 브라우저는 (시스템에 해당 폰트가 설치돼 있지 않다면) 런타임에 폰트를 다운로드해 사용할 수 있습니다.
일단, 이렇게 폰트가 마련됐으면 이후에는 웹 문서에 해당 폰트를 사용하도록 font-family 속성을 지정하면 됩니다.
<style>
body {
font-family: "Noto Sans Old Hungarian", sans-serif;
}
</style>
그럼, 문서에 포함된 OLD HUNGARIAN 문자를,
<body>
'𐲀' 문자
𐲀
</body>
모바일 환경에서도 정상적으로 볼 수 있게 됩니다.
방법은 알았지만, 사실 이게 현실적으로 지원이 쉽지 않습니다. 정적 HTML 페이지인 경우라면 유니코드가 사용된 유형에 따라 필요한 폰트를 <link />로 직접 기입하면 그만인데요, 동적 페이지라면 살짝 상황이 달라집니다.
가령, 게시판에 올라오는 글 중에는 특정 폰트가 설치되었을 때만 보이는 유니코드 텍스트를 가지는 경우일 텐데요, 해당 게시물을 분석해 그에 맞는 폰트를 추가하도록 <link /> 태그를 추가하는 것이 녹록치 않습니다. 그렇다고, 대부분의 게시물에서 쓰지도 않을 유니코드 글자들을 위해 모든 폰트를 미리 <link />로 추가해 두는 것도 바람직하지 않습니다.
어쨌든, 제 경우에는 어차피 개인적으로 만든 블로그 게시판이어서 임의로 맞춰주었는데요, 그래서 아래의 게시물이 이제는 모바일 브라우저에서도
𐲀 글자가 깨지지 않고 잘 보이게 만들었습니다. ^^
C++ - 문자열의 대소문자를 변환하는 transform + std::tolower/toupper 방식의 문제점
; https://www.sysnet.pe.kr/2/0/13797
[이 글에 대해서 여러분들과 의견을 공유하고 싶습니다. 틀리거나 미흡한 부분 또는 의문 사항이 있으시면 언제든 댓글 남겨주십시오.]