Microsoft MVP성태의 닷넷 이야기
글쓴 사람
정성태 (seongtaejeong at gmail.com)
홈페이지
첨부 파일
 

(시리즈 글이 12개 있습니다.)
.NET Framework: 326. 유니코드와 한글 - 유니코드와 닷넷을 이용한 한글 처리
; https://www.sysnet.pe.kr/2/0/1294

.NET Framework: 411. 유니코드의 "compatibility character"가 뭘까요?
; https://www.sysnet.pe.kr/2/0/1607

.NET Framework: 429. C# - 유니코드 한글 문자열을 ks_c_5601-1987로 변환하는 방법
; https://www.sysnet.pe.kr/2/0/1657

개발 환경 구성: 230. 유니코드의 Surrogate Pair, Supplementary Characters가 뭘까요?
; https://www.sysnet.pe.kr/2/0/1710

.NET Framework: 450. 영문 윈도우에서 C# 콘솔 프로그램의 유니코드 출력 방법
; https://www.sysnet.pe.kr/2/0/1712

.NET Framework: 794. C# - 같은 모양, 다른 값의 한글 자음을 비교하는 호환 분해
; https://www.sysnet.pe.kr/2/0/11710

개발 환경 구성: 407. 유니코드와 한글 - "Hangul Compatibility Jamo"
; https://www.sysnet.pe.kr/2/0/11724

Windows: 176. Raymond Chen이 한글날에 밝히는 윈도우의 한글 자모 분리 현상
; https://www.sysnet.pe.kr/2/0/12369

닷넷: 2307. C# - 윈도우에서 한글(및 유니코드)을 포함한 콘솔 프로그램을 컴파일 및 실행하는 방법
; https://www.sysnet.pe.kr/2/0/13794

개발 환경 구성: 731. 유니코드 - 출력 예시 및 폰트 찾기
; https://www.sysnet.pe.kr/2/0/13798

개발 환경 구성: 732. 모바일 웹 브라우저에서 유니코드 문자가 표시되지 않는 경우
; https://www.sysnet.pe.kr/2/0/13799

닷넷: 2310. .NET의 Rune 타입과 emoji 표현
; https://www.sysnet.pe.kr/2/0/13813




모바일 웹 브라우저에서 유니코드 문자가 표시되지 않는 경우

얼마 전에 쓴 유니코드 관련 글을,

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




[이 글에 대해서 여러분들과 의견을 공유하고 싶습니다. 틀리거나 미흡한 부분 또는 의문 사항이 있으시면 언제든 댓글 남겨주십시오.]







[최초 등록일: ]
[최종 수정일: 11/2/2024]

Creative Commons License
이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-변경금지 2.0 대한민국 라이센스에 따라 이용하실 수 있습니다.
by SeongTae Jeong, mailto:techsharer at outlook.com

비밀번호

댓글 작성자
 




1  2  [3]  4  5  6  7  8  9  10  11  12  13  14  15  ...
NoWriterDateCnt.TitleFile(s)
13832정성태11/27/20243069Windows: 274. Windows 7부터 도입한 conhost.exe
13831정성태11/27/20243019Linux: 111. eBPF - BPF_MAP_TYPE_PERF_EVENT_ARRAY, BPF_MAP_TYPE_RINGBUF에 대한 다양한 용어들
13830정성태11/25/20242937개발 환경 구성: 736. 파이썬 웹 앱을 Azure App Service에 배포하기
13829정성태11/25/20242861스크립트: 67. 파이썬 - Windows 버전에서 함께 설치되는 py.exe
13828정성태11/25/20242819개발 환경 구성: 735. Azure - 압축 파일을 이용한 web app 배포 시 디렉터리 구분이 안 되는 문제파일 다운로드1
13827정성태11/25/20243004Windows: 273. Windows 환경의 파일 압축 방법 (tar, Compress-Archive)
13826정성태11/21/20243223닷넷: 2313. C# - (비밀번호 등의) Console로부터 입력받을 때 문자열 출력 숨기기(echo 끄기)파일 다운로드1
13825정성태11/21/20243174Linux: 110. eBPF / bpf2go - BPF_RINGBUF_OUTPUT / BPF_MAP_TYPE_RINGBUF 사용법
13824정성태11/20/20243134Linux: 109. eBPF / bpf2go - BPF_PERF_OUTPUT / BPF_MAP_TYPE_PERF_EVENT_ARRAY 사용법
13823정성태11/20/20242890개발 환경 구성: 734. Ubuntu에 docker, kubernetes (k3s) 설치
13822정성태11/20/20242692개발 환경 구성: 733. Windbg - VirtualBox VM의 커널 디버거 연결 시 COM 포트가 없는 경우
13821정성태11/18/20242874Linux: 108. Linux와 Windows의 프로세스/스레드 ID 관리 방식
13820정성태11/18/20242888VS.NET IDE: 195. Visual C++ - C# 프로젝트처럼 CopyToOutputDirectory 항목을 추가하는 방법
13819정성태11/15/20242943Linux: 107. eBPF - libbpf CO-RE의 CONFIG_DEBUG_INFO_BTF 빌드 여부에 대한 의존성
13818정성태11/15/20243038Windows: 272. Windows 11 24H2 - sudo 추가
13817정성태11/14/20242885Linux: 106. eBPF / bpf2go - (BPF_MAP_TYPE_HASH) Map을 이용한 전역 변수 구현
13816정성태11/14/20243101닷넷: 2312. C#, C++ - Windows / Linux 환경의 Thread Name 설정파일 다운로드1
13815정성태11/13/20242998Linux: 105. eBPF - bpf2go에서 전역 변수 설정 방법
13814정성태11/13/20243073닷넷: 2311. C# - Windows / Linux 환경에서 Native Thread ID 가져오기파일 다운로드1
13813정성태11/12/20242861닷넷: 2310. .NET의 Rune 타입과 emoji 표현파일 다운로드1
13812정성태11/11/20242744오류 유형: 933. Active Directory - The forest functional level is not supported.
13811정성태11/11/20242597Linux: 104. Linux - COLUMNS 환경변수가 언제나 80으로 설정되는 환경
13810정성태11/10/20242936Linux: 103. eBPF (bpf2go) - Tracepoint를 이용한 트레이스 (BPF_PROG_TYPE_TRACEPOINT)
13809정성태11/10/20242827Windows: 271. 윈도우 서버 2025 마이그레이션
13808정성태11/9/20242747오류 유형: 932. Linux - 커널 업그레이드 후 "error: bad shim signature" 오류 발생
13807정성태11/9/20243181Linux: 102. Linux - 커널 이미지 파일 서명 (Ubuntu 환경)
1  2  [3]  4  5  6  7  8  9  10  11  12  13  14  15  ...