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)
13917정성태4/30/202526VS.NET IDE: 199. Directory.Build.props에 정의한 속성에 대해 Condition 제약으로 값을 변경하는 방법
13916정성태4/23/2025423디버깅 기술: 221. WinDbg 분석 사례 - ASP.NET HttpCookieCollection을 다중 스레드에서 사용할 경우 무한 루프 현상 - 두 번째 이야기
13915정성태4/13/20251635닷넷: 2331. C# - 실행 시에 메서드 가로채기 (.NET 9)파일 다운로드1
13914정성태4/11/20251963디버깅 기술: 220. windbg 분석 사례 - x86 ASP.NET 웹 응용 프로그램의 CPU 100% 현상 (4)
13913정성태4/10/20251186오류 유형: 950. Process Explorer - 64비트 윈도우에서 32비트 프로세스의 덤프를 뜰 때 "Error writing dump file: Access is denied." 오류
13912정성태4/9/2025848닷넷: 2330. C# - 실행 시에 메서드 가로채기 (.NET 5 ~ .NET 8)파일 다운로드1
13911정성태4/8/20251075오류 유형: 949. WinDbg - .NET Core/5+ 응용 프로그램 디버깅 시 sos 확장을 자동으로 로드하지 못하는 문제
13910정성태4/8/20251239디버깅 기술: 219. WinDbg - 명령어 내에서 환경 변수 사용법
13909정성태4/7/20251710닷넷: 2329. C# - 실행 시에 메서드 가로채기 (.NET Framework 4.8)파일 다운로드1
13908정성태4/2/20252105닷넷: 2328. C# - MailKit: SMTP, POP3, IMAP 지원 라이브러리
13907정성태3/29/20251889VS.NET IDE: 198. (OneDrive, Dropbox 등의 공유 디렉터리에 있는) C# 프로젝트의 출력 경로 변경하기
13906정성태3/27/20252130닷넷: 2327. C# - 초기화되지 않은 메모리에 접근하는 버그?파일 다운로드1
13905정성태3/26/20252167Windows: 281. C++ - Windows / Critical Section의 안정화를 위해 도입된 "Keyed Event"파일 다운로드1
13904정성태3/25/20251868디버깅 기술: 218. Windbg로 살펴보는 Win32 Critical Section파일 다운로드1
13903정성태3/24/20251506VS.NET IDE: 197. (OneDrive, Dropbox 등의 공유 디렉터리에 있는) C++ 프로젝트의 출력 경로 변경하기
13902정성태3/24/20251715개발 환경 구성: 742. Oracle - 테스트용 hr 계정 및 데이터 생성파일 다운로드1
13901정성태3/9/20252093Windows: 280. Hyper-V의 3가지 Thread Scheduler (Classic, Core, Root)
13900정성태3/8/20252330스크립트: 72. 파이썬 - SQLAlchemy + oracledb 연동
13899정성태3/7/20251789스크립트: 71. 파이썬 - asyncio의 ContextVar 전달
13898정성태3/5/20252108오류 유형: 948. Visual Studio - Proxy Authentication Required: dotnetfeed.blob.core.windows.net
13897정성태3/5/20252336닷넷: 2326. C# - PowerShell과 연동하는 방법 (두 번째 이야기)파일 다운로드1
13896정성태3/5/20252161Windows: 279. Hyper-V Manager - VM 목록의 CPU Usage 항목이 항상 0%로 나오는 문제
13895정성태3/4/20252203Linux: 117. eBPF / bpf2go - Map에 추가된 요소의 개수를 확인하는 방법
13894정성태2/28/20252230Linux: 116. eBPF / bpf2go - BTF Style Maps 정의 구문과 데이터 정렬 문제
13893정성태2/27/20252179Linux: 115. eBPF (bpf2go) - ARRAY / HASH map 기본 사용법
[1]  2  3  4  5  6  7  8  9  10  11  12  13  14  15  ...