웹페이지 폰트 설정?

웹에서 폰트를 예쁘게 보이는 게 너무 어렵다. 어떻게 하는 것이 좋을지 이리저리 짱구를 굴려 보았다. 그치만 결론: 답 없다.

끈닷넷에서는 한글도 쓰고, 한자도 가끔 나오고, 일본어도 가끔 나온다. 이렇다 보니 모든 글자가 일관되게, 예쁘게 보이게 하는 것이 너무 힘들다. 이전 글 블로그 만들다.에서도 이야기했지만 최대한 간단하게, 페이지 로딩에 부담스럽지 않게 하는 것이 기본적인 목표다. 그런데 최근에 일본어가 쬐끔 섞인 글을 쓰면서 문제가 드러났다.

문제: 여러 언어가 섞인 페이지

大満足。

지금 위 세 글자가 아름답게 보이는가? (만약 그렇다면 다행이다.) 윈도우+엣지 브라우저에서 大자와 足자는 맑은 고딕으로 보이는데 満자는 SimSun 폰트로 보인다. 아마도 이유는 이렇다.

  1. <html lang="ko"> 때문에 기본적으로 한글 폰트(맑은 고딕)에서 글자를 찾고,
  2. 大자와 足자는 맑은 고딕에 있는 한자지만,
  3. 満자(일본식 한자)는 없기 때문에 다른 폰트(SimSun)에서 찾아서 렌더링을 한 것.

꼭 끈닷넷만의 문제가 아니다.

페이스북에서도,

페이스북

구글에서도,

구글

트위터에서도,

트위터

이쁘게 안 보인다. 어떻게 하면 될까?

방법1. 시스템 폰트 사용

sookiwi.com이 다국어 폰트 적용 실험에서도 시도한 바가 있지만 OS 별로 기본 제공되는 시스템 폰트를 사용하도록 설정을 해서 여러 언어가 섞여 있어도 이쁘게 보이도록 시도할 수 있다. (그리고 이를 '삽질'이라고 표현했다. 의미심장.)

다만, 이것이 완전한 해결책인지는 잘 모르겠다. 브라우저는 글자를 보고 언어(폰트)를 결정하는데 한국어, 일본어, 중국어처럼 공통된 글자(한자)를 사용하기라도 하면 쉽게 위와 같은 일이 벌어지기 때문이다. 페이스북, 구글, 트위터 같은 큰 사이트들도 모두 시스템 폰트를 쓰도록 어느 정도 설정하고는 있지만 위에서처럼 완벽하게 동작하는 건 아닌 것이다.

다국어를 지원하는 폰트(Noto Sans 같은)가 모든 시스템에 기본 내장되어 있으면, 그리고 그것이 마음에 들면, 그것을 사용하도록 설정할 수 있겠지만! 세상은 그렇지가 않다.

방법2. 웹폰트 사용

웹페이지를 열 때 다국어를 지원하는 폰트를 다운 받도록 할 수 있지만, 문제는 폰트 크기다. 한국어나 일본어나 크기가 몇 MB 단위이다. 한자 때문에. 특히 끈닷넷처럼 유저도 없고 글도 별로 없고 그림도 별로 없는 (내세울 건 속도 뿐인) 사이트에서는 웹폰트 사용은 왠지 부담스럽다. 글 크기는 고작 몇 KB인데 폰트를 위해서 몇 MB씩 쓰고 싶지는 않은 것이다. 브라우저마다 캐쉬라는 좋은 기능이 있긴 하지만 이게 언제 날아갈지 알 수 없다.

방법3. lang 속성 사용

HTML에서 lang 속성을 잘 사용하여 구간마다 언어를 지정하면 나름 브라우저의 폰트 선택을 조종할 수 있다. 근데 이러면 내가 글을 쓰기가 참 귀찮아진다. 귀찮은 건 싫다.

방법4. 폰트 설치

글 쓰는 내가 매 번 귀찮은 건 싫으니까 읽는 사람을 딱 한 번 귀찮게 하는 방법이 있다. 다국어를 지원하는 폰트를 직접 시스템에 설치하도록 하는 것이다.

아마 나 말고는 아무도 안 하겠지만, 괜찮다. 어차피 내 일기장이니까. 사실 나만 잘 보이면 그만인 것이다.

'이 사이트는 Noto Sans CJK KR을 설치하면 예쁘게 보입니다.'

너무 구시대적인 느낌이 나서 약간 슬프다. 그래도 해상도나 브라우저 얘기는 안 했잖아?

결론: 답 없다.

앞서 이야기했지만 나는 답을 모르겠다. 크기를 줄인 웹폰트를 사용한다거나 하는 방법도 있는 것 같은데 나에겐 그냥 너무 복잡한 것이다. 진짜 웹에서 어떤 서비스를 한다고 생각하면 좀 고민이 많이 될 것 같다.

2018-01-16 씀.