다국어 폰트 적용 실험

Written on December 20, 2016

블로그에 알파벳/한글/일본어문자를 섞어서 사용하다보니 몇몇 폰트 문제가 보였다.

우선 몇몇 한자의 경우 한자 표기가 들쑥날쑥했다. 가령 이런 식이다.

irregular-hanmun-fonts

잘 보면 西方教会(서방교회)의 한자 중에서 서방과 교회의 폰트가 다름을 알 수 있다. 교회 부분이 전반적으로 더 크다. 서방과 교회가 서로 다른 폰트가 적용되어 글자 형태가 틀어지는 것이다. 마음이 아프다.

이러한 현상이 벌어지는 이유는, 教会라는 한자가 자주 쓰이는 한자가 아니라서 특정 폰트에 포함되어 있지 않기 때문이다. 어떤 폰트인지는 몰라도(아마 이 경우에는 Arial) 西方이라는 한자는 지원하지만 教会라는 한자는 지원하지 않는 것이다.

한자의 부분적 지원에 따른 폰트 불균형은 웹에서는 굉장히 자주 볼수있는 일이다. 심지어 정말 잘 쓰지않는 한자어는 일본 출판물에서조차 형태가 깨진걸 본 적이 있었다. 한문대계라던가 하는 한문 고전 책을 보다보면 가끔 보인다. 예시로 든 教会라는 한자는 한국과 중국에서는 잘 쓰이지 않지만 일본에서는 매우 자주 사용되는 한자이다. 教는 敎(가르칠 교)의 일본한자 형태로, 의미는 동등하지만 형태가 조금 다르다. 会는 會(만날 회)의 일본 한자 버젼이다. 이런 문제는 일본-한국 한자 뿐만 아니라, 중국어 번체와 간체, 한국한자, 일본한자, (아마도 대만한자)간에 빈번히 일어난다. 어떤 폰트는 중국어 간체를 지원하지만 번체 일부를 지원하지 않는다던가.. 정말 극혐이라고 할 수 있다.

그러면 모든 글자를 포괄하는 폰트를 쓰면 되지 않나고 하는데, 일단 본인이 원하는 폰트가 모든걸 지원해주지 않을 가능성이 다분하고, 폰트가 많은 글자를 포함하면 할수록 무거워지기 때문에 웹 환경에서는 치명적이다. 가령 보통 영어 웹 폰트의 경우 몇십kb에 지나지 않으나, 일본어나 한국어 폰트는 쉽게 1mb가 넘어가는 것을 볼 수 있다.

로컬 문서 작업에서는 원하는 폰트를 맘껏 다운받아 쓰면 그만이다. 하지만 웹에서는 폰트의 용량뿐만 아니라 각 브라우저(익플, 엣지, 크롬, 사파리 등등), 각 운영체제(맥, 윈도우, 안드로이드, iOS 등등)의 지원 여부까지 고려하지 않으면 안된다. 웹에 접근하는 사람들의 환경 은 동일하지 않고, 이는 웹개발자의 숙명이자 저주 같은 것이다.

그럼 어떻게 해야 웹 환경에서 일관성있는 폰트를 뽑아낼 수 있을까? 내 경우는 알파벳, 한글, 일본어문자를 일관성있게, 퍼포먼스적인 손해 없이 화면에 뿌리고 싶었다.

일단 내가 맥+크롬 조합을 쓰다보니 맥 환경에 최적화 하되, 윈도우나 여타 브라우저에서도 퍼포먼스를 좀 손해보는 감이 있어도 절망적이지 않을 정도의 폰트를 뽑아내기로 마음먹었다.

맥은 디자인 감성 충만하게 여러 기본 폰트를 보유하고 있으며, 내 감각에는 상당히 미려한 폰트가 많다. 따라서 웹 폰트를 따로 다운 받는 것 보다, 맥의 기본폰트를 최대한 이용하는 걸로 마음먹었다.

내 지킬 블로그는 scss를 이용하므로 변수를 쓸 수 있다. 요런 식으로.

$appleSDGothicNeo: "Apple SD Gothic Neo", "애플 SD 산돌고딕 Neo", Apple SD Gothic Neo, Arial, sans-serif;

...

body {
  ...
  font: 18px/1.4 $helvetica; // 요걸 지우고
  font: 18px/1.4 $appleSDGothicNeo; // 이걸로 바꿈
  ...
}

일단 맥 한글 기본 폰트인 애플 산돌고딕 네오를 적용해 보았다.(산돌 고딕 네오를 저렇게 여러개를 연달아 적어놓은 건, 운영체제 환경에 따라 특정 로컬 서체를 부르는 명칭이 다를 수 있다는 말을 들은적이 있기 때문이다. 전에 회사다닐 때 다른 훌륭하신 분들의 블로그를 참조해 최대한 안전하게 저렇게 해놓았던 걸 가져와서 썼다.) 하지만 한자 문제는 변함이 없었다.. 역시 일본어 폰트를 따로 적용해야 하는 것인가.

일본어 폰트를 적용하기 위해서 맥에 저장되어있는 폰트를 뒤져보았다. hiraganoSans 시리즈와 Osaka가 보인다. 별다른 이유 없이 히라기노를 택했다. 이제 좀 업그레이드해서 써보면

$baseFontStack: Arial, sans-serif;
$hiraginoSans: Hiragino Sans;
$appleSDGothicNeo: "Apple SD Gothic Neo", "애플 SD 산돌고딕 Neo", Apple SD Gothic Neo;

$myFontStack: $appleSDGothicNeo, $hiraginoSans, $baseFontStack;

...

body {
  ...
  font: 18px/1.4 $myFontStack;
  ...
}

이제 일본어 폰트가 적용됐겠지? 하고 화면을 리프래시 해봤는데 히라가나 폰트가 변하지 않는다. 으잉? 웹폰트는 fallback(앞에 적은 폰트가 없으면 뒤의 폰트를 적용. 없으면 하나씩 하나씩 뒤의 폰트로 내려가며 찾는다. 모던 브라우져는 lazy하게 작업하므로 다운로드를 요구하는 웹폰트를 뒤에 막 달아두어도 안심이다. 다만 익플 구버젼에서는 lazy하지 않다는 소문을 들은적이 있다.)이 돼서 산돌 다음에 히라기노를 달아놓으면 자동으로 돼야하는데.. 왜지?

서체 관리자를 켜서 산돌고딕을 봤는데, 아니나 다를까 히라가나가 포함되어 있다.

동해물과 백두산이 마르고
닳도록 하느님이 보우하사
天地玄黃宇宙洪荒日月盈仄
㉠⒝⑶❹あア※♥♪⅜‘”
ABcdEFgh 1234567890

말하자면 산돌고딕은 아주 광범위한 폰트로, 알파벳, 한자, 히라가나, 가타가나를 모두 커버하는 것이다.

문제점 첫번째는 산돌 고딕은 일본 문자의 대부분을 커버하나 몇몇 문자는 커버하지 못한다는 점이다. 이래서야 문자의 일관성이 떨어진다. 두번째 문제점은 산돌 고딕의 히라가나/가타가나 폰트가 그 자체로서의 심미성은 좀 부족하게 느껴진다는 것이었다. 산돌 고딕 한글 문자와의 일관성은 상당히 있으나, 히라가나 가타가나 문자는 그렇게 매력적이지는 않았다.

이 문제점을 해결하기 위해 히라가노를 산돌 고딕 앞으로 빼었다. 그러니까

$myFontStack: $hiraginoSans, $appleSDGothicNeo, $baseFontStack;

이렇게 말이다. 히라가노를 서체관리자에서 보면

あのイーハトーヴォの
すきとおった風、
夏でも底に冷たさをもつ青いそら、
うつくしい森で飾られたモーリオ市、
郊外のぎらぎらひかる草の波。
祇辻飴葛蛸鯖鰯噌庖箸
ABCDEFGHIJKLM
abcdefghijklm
1234567890

이므로 숫자, 알파벳, 한자, 히라가나, 가타가나를 커버함을 알 수 있다. 따라서 한글은 fallback을 적용받아 산돌 고딕이 적용되므로, 히라가노와 산돌고딕 모두를 한 화면에서 볼 수 있게 되었다!

이 쯤에서 새로운 문제가 떠오르고 만다. 원래 내 블로그는 helvetica를 기본 폰트로 했기에 알파벳은 helvetica로 표현되어 왔다. 그런데 폰트 스택을 저렇게 구성하니, 히라가노의 숫자와 알파벳이 전체적으로 적용되어 버린 것이다.

내가 의도했던 바는 히라가나/가타가나/한자에만 일본어 폰트가 적용되는 것이므로 수정의 필요가 있다. 역시 알파벳 폰트 심미성에서 감점이다. 그렇다면 어떻게?

다시금 fallback을 생각하지 않을 수 없다. 영어 폰트는 영어와 알파벳을 커버하므로 영어 폰트를 앞에 세우면 나머지는 순차적으로 뒤의 폰트가 적용된다.

$helvetica: Helvetica;
$helveticaNeue: "Helvetica Neue";

$myFontStack: $helvetica, $helveticaNeue, $hiraginoSans, $appleSDGothicNeo, $baseFontStack;

휴.. 이렇게 폰트를 세팅하고 보니, 엘 케피탄부터 맥의 기본 폰트가 샌프란시스코로 변경됐다는 정보가 기억이 났다. 기왕 이렇게 된거 한 번 샌프란시스코를 적용해보자고 뜬금없이 마음먹었다.

그런데 서체 관리자에는 샌프란시스코가 없었다. 당황스러웠지만 침착하게 구글에게 ‘how to set mac san francisco on web’이라고 물어보았더니, 구글님이 답을 주셨다.

$appleSystem: system, -apple-system, BlinkMacSystemFont; // -apple-system은 사파리에서 적용되고, BlinkMacSystemFont은 크롬에서 적용된다는걸 보니 웹킷 엔진 용으로 보인다. 일종의 css vender-prefix 같은 걸로 이해했다.

$myFontStack: $appleSystem, $helvetica, $helveticaNeue, $hiraginoSans, $appleSDGothicNeo, $baseFontStack;

짜잔! 이제 알파벳/숫자는 애플 시스템 폰트, 그러니까 샌프란시스코가 적용되고, 일본문자는 히라기노가, 한글은 산돌고딕이 적용된다!! 웹폰트가 없어서 빠른 속도 또한 보장된다.

이제 남은건 윈도우 환경 유저를 고려하는 일이다. 윈도우 유저는 당연한 이야기지만 저 것들을 다 적용받지 못한다. helvetica나 Arial, sans-serif 정도가 적용될 걸로 예상된다.

그건 너무 극혐이므로, 윈도우 유저에게는 귀찮은고로 웹폰트를 통째로 주기로 마음먹었다. 처음에는 나눔 고딕이나 나눔 바른 고딕을 고려했으나 결론적으로 noto sans 시리즈로 택했다. 나눔 바른 고딕은 공식적인 웹폰트 cdn이 없고, 개인이 웹폰트화 하여 운영하는 깃헙 cdn이 있다. 옛날에 회사에서 써봤을 때 깃헙을 cdn으로 하면 속도가 너무 느렸었다. 해결 방안은 내 서버에 폰트를 띄워놓는건데, 굳이 그렇게까지야.. 싶었다.

나눔 고딕은 구글 얼리억세스로 제공되고 있어 적용해보기 편했다. scss에서 산돌고딕의 뒤에 나눔 고딕을 끼워넣었다. 그런데 나눔고딕의 경우 문제가 된게, 특유의 둥근 형태(마치 굴림 같은 특징이 좀 있음)가 히라기노의 각진 일본문자와 어울리지 않았다. 물론 윈도우 환경에서 히라기노가 보이진 않겠지만, 그래도 맥과 비슷한 뷰를 원했기에 나눔 고딕도 포기했다.

그래서 남은 선택지가 noto sans 이었다. 노토 시리즈는 일단 여러 문자를 일관성있게 관리하기에, 내 블로그처럼 3가지 종류의 문자가 혼합된 경우에 적합해 보였다. 그래서 과감하게 noto sans, noto sans jp, noto sans kr 시리즈를 모두 적용했다. 노토 산은 구글 폰트, jp와 kr은 얼리억세스이다. noto san jp, noto san japanese가 있는데 형태적으론 거의 동일하나, noto sans 가 국제 문자 통일을 프로젝트로 진행되면서 japanese 가 jp로 다른 문자와 일관성있게 변했다고 한다는 이야기를 어디서 보았다. jp가 보다 최신같으니 이쪽을 택했다.

결국 코드는

// Font stacks
$appleSystem: system, -apple-system, BlinkMacSystemFont;
$helvetica: Helvetica;
$helveticaNeue: "Helvetica Neue";
$hiraginoSans: Hiragino Sans;
$appleSDGothicNeo: "Apple SD Gothic Neo", "애플 SD 산돌고딕 Neo", Apple SD Gothic Neo;

@import url(https://fonts.googleapis.com/css?family=Noto+Sans);
@import url(https://fonts.googleapis.com/earlyaccess/notosanskr.css);
@import url(https://fonts.googleapis.com/earlyaccess/notosansjp.css);
$notoSans: "Noto Sans";
$notoSansKR: "Noto Sans KR";
$notoSansJP: "Noto Sans JP";

$baseFontStack: Arial, sans-serif;

$myFontStack: $appleSystem, $helvetica, $helveticaNeue, $hiraginoSans, $appleSDGothicNeo, $notoSans, $notoSansJP, $notoSansKR, $baseFontStack;

이 되었다.

이게 지금(2016년 12월 20일) 현재 블로그 세팅이다.

해놓고 보니 뿌듯하기도 하고 한자가 일관성있게 찍혀서 좋다. 西方教会! 西方敎會! 정작 이 글을 작성하는 에디터인 atom은 한자 폰트를 이상하게 뿌리고 있지만. 오늘의 삽질은 여기서 일단 종료한다.

ps. 아무래도 3종류의 폰트가 섞이다보니 미묘한 일관성의 상실이 발생하는 것 같다. 히라기노의 크기가 산돌 고딕보다 조금 더 크고 굵은 것 같다. 이걸 조정할 수 없을까?

ps2. 시스템 폰트가 젤 앞에오다보니 특수문자는 모두 시스템 폰트를 따라간다. 이게 좋은지 나쁜지는 두고봐야.

ps3. 윈도우 환경에서는 되리라고 믿고 테스트해보진 않았다(…)

ps4. 사실 이 모든 문제는 내 취향에 맞게 폰트를 만들면 해결된다. 문제는 넘나 귀찮다는 것.