웹페이지 폰트 설정?

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

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

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

大満足。

지금 위 세 글자가 아름답게 보이는가? (만약 그렇다면 다행이다.) 윈도우+엣지 브라우저에서 大자와 足자는 맑은 고딕으로 보이는데 満자는 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 씀.