속도를 위해서 테마를 자주 바꾸다보니 폰트 적용 문제에 대해서 다시 한번 뒤돌아보게 되었습니다.

그동안 속도를 중시해서 사용자 PC에 설치된 시스템폰트를 적용토록 설계하였으나 이는 브라우저마다 다른 모습으로 보여지고 생각만큼 마음에 들지 않았습니다. 그래서 속도와 디자인을 모두 고려한 방법을 고민했습니다.

폰트 적용에 대한 전반적인 내용은 이전 정리했던 포스팅을 조금업데이트 했습니다.

[Tips]나눔고딕을 가장 효율적으로 적용하는 방법

1. 어떤 폰트를 적용할 것인가?

오랬동안 나눔계열의 폰트를 사용했는데요. 이번에는 2014년 발표이후 많이 적용되는 본고딕을 적용해 보기로 했습니다.

나눔고딕체

나눔고딕체는 2008년 한글날을 맞아 발표된 폰트로 거의 10년이 되어가네요. 상용이 아닌 누구나 쓸 수 있도록 배포되어 초기에 상당히 많은 인기르 끌었습니다. 이후에는 다은 다양한 폰트들이 출시되면서 주춤한 상태이긴 합니다.

나눔바른고딕체

나룸바른고딕은 2013년 한글날을 맞아 발표한 모바일 가독성을 강화한 폰트죠. 상당히 미려한 폰트로 나눔고딕의 아쉬웠던 부분을 어느 정도 커버했다는 평가를 받았고 오늘날에도 여전히 인기있는 폰트입니다.

본고딕(노토산스CJK)

본고딕은 2014년 7월 16일 발표되었는데요. 구글과 어도비가 아시아에서 표준으로 삼을만한 폰트를 만들기위해 한국어, 일본어,중국어 폰트를 3년에 걸쳐 만들었습니다.

아래는 어도비에서 설명하고 있는 본고딕체에 대한 설명입니다.

본고딕(Source Han Sans) 소개: 오픈 소스 한중일 통합 서체

글꼴이름에 대해서는 조금 혼선이 있는데요. 어도비에서는 본고딕(Source Han Sans)이라고 부르고 구글에서는 노토산스CJK라고 부릅니다. 여차하면 서로 다른 폰트라고 이애할 수도 있지만 사실은 같은 폰트를 서로 달리 부르고 있답니다.

본고딕(Source Han Sans)은 하나의 서체로 한국어, 일본어, 중국어 번체 및 간체를 모두 지원하고 있습니다. 이 서체에는 총 65,535개의 글리프(OpenType 포맷으로 지원되는 최대 글리프 수)가 포함되어 있다고 합니다.

한국어 폰트 제작에는 한글 서체 제작으로 유명한 산돌커뮤니케이션이 참여해서 만들었습니다. 네이버에서 발표한 나눔 바른 글꼴은 4가지 굵기를 제공하는데 반해서 본고딕은 7가지 두께를 지원해서 보다 다양한 폰트를 사용할 수 있습니다.

본고딕체 경량화 버젼

사실 본고딕체는 용량이 아주 큽니다. 우선 한국어, 일본어, 중국어 간체와 번체를 지원하므로 용량이 어마어마하죠. 한국어는 전체 116MB에 이르고 글꼴 종류하나당 약 16MB에 이르러 웹폰트로 사용하기는 너무 무겁습니다.

그래서 이를 경량화하는 작업이 필요합니다. 원래 폰트안에는 11,172 글자가 포함되어 있는데 이중 가장 많이 사용하는 완성형 2350개와 알파벳, 숫자., 기호만 포함한 크기를 확 줄인 경량화 버젼을 만듭니다.

인터넷을 검색하면 이런 경량화버젼을 만들어 제공하는 곳이 있습니다.

UYEONG님의 경량화 버젼, NotoSans-subset

베누시안,님 경량화 버젼, 본고딕(Noto Sans) 웹폰트 사용하기

스포카 한 산스

본고딕체를 개량한 스포카 한 산스라는 폰트가 있습니다. 2015년 한글날 공개한 커스텀 글골로 기존 본고딕이 영문폰트에 어울리게 제작되었던 특수문자들을 한국어와 일본어에도 어울리게 변형해 전체 글의 세밀함과 가독성을 높였다고 합니다.

최근 인터넷에서 당야한 표현들이 많이 등장했는데요. 이를 반영해서 기존 완성형 2350에 추가 224자를 더해 2574자를 반영했다고 합니다.

그러다보니 다른 경량화 버젼과는 용량 차이가 큽니다.
위에서 소개한 베누시안님의 본고딕체 레귤라 WOFF 경량화 버젼은 183K인데 반해서 스포카 한 산스는 455K로 차이가 큽니다.

스포카 한 산스(spoqa-han-sans) 소개

스포카 한 산스 웹폰트로 사용하기

다국어 환경에 맞게 타이포그래피 세팅하기 – 다국어 반응형 타이포그래피

스포카 한 산스가 여러 장점이 크지만 용량이 배이상 차이가 나기 때문에 개인으로서는 본고딕체 경량화 버젼을 사용할 수 밖에 없습니다. 그러나 상업 용도거나 커뮤니티 사이트에 적용한다면 스포카 한 산스가 제격이라고 보여집니다.

2. 본고딕체 최적화 적용

굳이 최적화 적용이란 단어를 사용한 이유는 속도를 고려해서 최적화 방안을 찾아보고자 하였기 때문입니다. 따라서 아래와 같은 원칙을 세웠습니다.

• 폰트로 나눔바른고딕체나 본고딕체나 적용에는 차이가 없다고 생각
• 애플 사용자들을 배려하기 위해 애플 SD 산돌고딕 Neo를 사용토록 함
• 따라서 사용자 PC에 나눔바른고딕이나 본고딕 또는 애플 SD 산돌고딕 Neo가 설치되어 있는지 확인해 있다면 이를 사용(local 명령 사용)
• PC에 원하는 시스템폰트가 없다면 본고딕 웹폰트를 다운로드 적용

이러한 원칙에 따라 아래와 같이 CSS코드를 구성해 style.css 앞부분에 적용했습니다. 본고딕중에서 본문에 어울리는 폰트는 Regular와 demilight인데 demilight가 조금 더 유려해 보여서 이를 선택했습니다.

2.1. 사용자 PC의 시스템 폰트 활용

local() 명령어를 사용해 사용자의 PC에 필요 글꼴이 설치되어 있는지 확인합니다.
즉 사용자 PC에 애플 사용자라면 애플 SD 산돌고딕 Neo, 위도우즈 사용자라면 나눔바른고딕이나 본고딕 regular 또는 demilight가 깔려 있으면 이를 사용토록 합니다. 본고딕 regular를 넣은 이유는 용량등의 이유로 본고딕 regular만 설치하는 경우에도 시스템 글골을 사용토록 한 것입니다.

그런데 local() 명령을 사용해서 사용자 PC의 시스템 폰트를 확인하는데 local()명령에는 아래와 같은 문제가 있다고 합니다.

Inside of Web Fonts

• 로컬 서체를 로딩조차 못하는 웹 브라우저들이 존재한다. (예를들어 IE6-8은 src 속성을 지원 안함)
• 웹 브라우저 별로 참조하는 로컬 서체의 이름이 다르다.
• 운영체제별로 참조하는 로컬 서체의 이름이 다르다.
• 운영체제에 탑재된 웹 브라우저별로 참조하는 로컬 서체의 이름이 다르다.

이러한 문제점을 고려해 최대한 호환성을 높일 수 있도록 최대한 많은 이름을 포함토록 하였습니다.

• 나눔 바른 고딕은 나눔바른고딕, NanumBarunGothic, 나눔바른고딕OTF, NanumBarunGothicOTF을 적어야 합니다. NanumBarunGothicOTF와 나눔바른고딕OTF는 맥용 safari, Firefox, Chrome에서 필요 합니다.
• 애플 SD 산돌고딕 Neo는 ‘애플 SD 산돌고딕 Neo’, ‘Apple SD Gothic Neo’를 모두 적어야 모든 브라우저에서 적용 가능합니다.
• 참고로 맑은고딕은 ‘맑은 고딕’, ‘Malgun Gothic’을 적어야 합니다. 나눔고딕은 나눔고딕, NanumGothic 두가지를 적어주면 됩니다.

 src: local(나눔바른고딕), local(NanumBarunGothic), local(나눔바른고딕OTF),local(NanumBarunGothicOTF), local(애플 SD 산돌고딕 Neo'), local('Apple SD Gothic Neo'), local(''Noto Sans KR'),local('Noto+Sans');

2.2. 본고딕 웹폰트 적용

• 먼저 IE계열은 EOT 파일을 내려 받도록 설정합니다. IE9+은 WOFF도 지원합니다. WOFF가 EOT에 비해서 가독성은 더 좋다고 합니다. 그런데 용량이 더 크네요. 184K와 152K로 큰 차이는 나지 않지만 아직 속도가 중요하다면 아래처럼 코드를 적용합니다.

  src: url('https://happist.com/Font/notokr-demilight.eot');
  

• 그런데 IE 6~8은 EOT 파일만 지원하고 포맷명을 해석하지 못한다고합니다. 그래서 파일명뒤에 물을표(?)를 추가하면 물음표 이후 구문을 모두 쿼리문으로 인식해 무시하므로 NanumGothic.eot? 파일을 다운한다고 하네요. 그래서 아래와 같은 코드가 추가됩니다.

  src: url('https://happist.com/Font/notokr-demilight.eot?#iefix') format('embedded-opentype'),
  

• 만약 IE9+이상은 용량이 조금 크지만 가독성이 좋은 WOFF를 다운받도록 한다면 아래 코드로 대신 합니다. 여기서는 url(‘https://happist.com/Font/notokr-demilight.eot?#iefix‘) format(‘embedded-opentype’), 대신 local(“☺”)로 바꾸어 주는 것이죠.

  src: local(☺),
  

• WOFF 포맷을 30% 더 압축해 용량을 줄인 WOFF2를 지원하는 브라우저는 WOFF2를 내려 받도록 합니다. Chrome, Fire Fox, Opera, Edge가 지원합니다. Edge는 초기에는 지원하지 않았지만 2016년 5월을 전후로 지원토록 업데이트 되었습니다.

      url('https://happist.com/Font/notokr-demilight.woff2') format('woff2'),
  

• 최근 브라우저들은 WOFF 포맷을 지원합니다. 원래 TTF가 많이 사용되었으나 TTF형식은 쉽게 복제 가능해 이를 대체코자 WOFF가 만들어졌습니다. TTF의 압축된 버젼으로 보다 빠르게 로딩됩니다. WOFF를 지원하는 IE9+, Chrome, Safari, Opera 등인데요. Chrome, Fire Fox, Opera, Edge는 더 용량이 작은 WOFF2를 내려받으므로 이 WOFF는 Safari에서 다운로드 됩니다.

      url('https://happist.com/Font/notokr-demilight.woff') format('woff'),
  

• ttf가 가장 용량도 큰데요. 위의 로직대로라면 ttf가 필요없을 듯 하지만 위에서 자용하지 않을 경우 ttf를 다운받도록 합니다.

      url('https://happist.com/Font/notokr-demilight.ttf') format('truetype');

• WOFF나 TTF 포맷을 지원하지 않은 구 모바일 브라우져(Safari 4.3 이하, Android 4.3 이하, Opera Mobile 10 이하 등)를 위해서 CSS2에서 폰트로 활용 가능한 SVG(Scalable Vector Graphics)를 적용합니다. 사람마다 다르겠지만 이런 구형 모바일 브라우져는 사용자가 많지 않으므로 고려하지 않는 경우도 많습니다. 저는 적용하지 않기로 했습니다.

      url(https://happist.com/Font/notokr-demilight.svg') format('svg');

2.3. font-family 정의

font-family에서 사용할 수 있는 폰트를 정의해 줍니다.

    font-family: '애플 SD 산돌고딕 Neo', 'Apple SD Gothic Neo', 나눔바른고딕, NanumBarunGothic, 나눔바른고딕OTF, NanumBarunGothicOTF, 'Noto Sans KR', 'Noto+Sans',  'notokr-demilight',  '맑은 고딕', 'Malgun Gothic', 'Helvetica Neue', Helvetica, Dotum, '돋움', sans-serif !important;

이를 해석해 보면 나눔바른고딕체와 애플 SD 산돌고딕 Neo체와 본고딕체를 시스템에서 찾아보고 없으면 본고딕 데미라이트체(notokr-demilight)를 내려받기 시작합니다.
내려받기전엔 뒤에 나오는 맑은고딕 등 폰트로 우선 보여주고 웹폰트가 전부 다운로드되면 브라우저는 본고딕 데미라이트체(notokr-demilight)로 다시 렌더링해서 보여주게 됩니다. 물론 이 과정에서 폰트가 반짝하고 바뀌는 글꼴 깜박이 현상인 FOUT(flash of unstyled text)이 나타나긴 합니다.

2.4. 최종 폰트 적용 코드

위의 내용을 반영하여 아래와 같이 적용 코드를 정리할 수 있습니다.

IE9+도 전부 EOT 파일을 다운 받는 코드입니다.

 @charset “utf-8″
 @font-face {
 font-family: 'notokr-demilight';
 font-style: normal;
 font-weight: normal;
 src: local('나눔바른고딕'), local('NanumBarunGothic'), local('나눔바른고딕OTF'),local('NanumBarunGothicOTF'), local('애플 SD 산돌고딕 Neo'), local('Apple SD Gothic Neo'), local('Noto Sans KR'),local('Noto+Sans'); 
 src: url('https://happist.com/Font/notokr-demilight.eot'); 
 src: url('https://happist.com/Font/notokr-demilight.eot?#iefix') format('embedded-opentype'),
      url('https://happist.com/Font/notokr-demilight.woff2') format('woff2'), 
      url('https://happist.com/Font/notokr-demilight.woff') format('woff'), 
      url('https://happist.com/Font/notokr-demilight.ttf') format('truetype'),
      url('https://happist.com/Font/notokr-demilight.svg') format('svg');
 }
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video 
 {
    font-family: 나눔바른고딕, NanumBarunGothic, 나눔바른고딕OTF, NanumBarunGothicOTF, '애플 SD 산돌고딕 Neo', 'Apple SD Gothic Neo', 'Noto Sans KR', 'Noto+Sans',  'notokr-demilight',  '맑은 고딕', 'Malgun Gothic', 'Helvetica Neue', Helvetica, Dotum, '돋움', sans-serif !important;
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  vertical-align: baseline;
 }

아래은 IE9+은 가독성이 좋은 WOFF 파일을 다운받도록하는 코드입니다. 그 대신 용량은 조금 늘어납니다.

 @charset “utf-8″
 @font-face {
 font-family: 'notokr-demilight';
 font-style: normal;
 font-weight: normal;
 src: local('나눔바른고딕'), local('NanumBarunGothic'), local('나눔바른고딕OTF'),local('NanumBarunGothicOTF'), local('애플 SD 산돌고딕 Neo'), local('Apple SD Gothic Neo'), local('Noto Sans KR'),local('Noto+Sans'); 
 src: url('https://happist.com/Font/notokr-demilight.eot'); 
 src: local(☺),
      url('https://happist.com/Font/notokr-demilight.woff2') format('woff2'), 
      url('https://happist.com/Font/notokr-demilight.woff') format('woff'), 
      url('https://happist.com/Font/notokr-demilight.ttf') format('truetype'),
      url('https://happist.com/Font/notokr-demilight.svg') format('svg');
 }
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video 
 {
    font-family: 나눔바른고딕, NanumBarunGothic, 나눔바른고딕OTF, NanumBarunGothicOTF, '애플 SD 산돌고딕 Neo', 'Apple SD Gothic Neo', 'Noto Sans KR', 'Noto+Sans',  'notokr-demilight',  '맑은 고딕', 'Malgun Gothic', 'Helvetica Neue', Helvetica, Dotum, '돋움', sans-serif !important;
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  vertical-align: baseline;
 }

3. 마치며

웹폰트 적용과 관련해 아래에서 많은 도움을 얻었습니다. 좋은 글을 공유해 주셔서 감사드립니다.

현화 Hyunhwa, Inside of Web Fonts

안형우, 웹 폰트를 로컬 스토리지에 저장하는 기법 – 캐시 안정성 증가, 글꼴 깜빡임 현상 제거

김원준, 웹폰트 사용하기 (웹폰트 101)

코드쓰는사람, 한국어와 웹 폰트에 관한 6.1가지 사실

베누시안,님 경량화 버젼, 본고딕(Noto Sans) 웹폰트 사용하기