brunch

매거진 디자이너가 알아야 할 기술

라이킷 65 댓글

You can make anything
by writing

C.S.Lewis

계정을 잊어버리셨나요?

by 이세호 Dec 31. 2017

한글 웹폰트, 예쁘지만 무겁다?

한글 웹폰트 적용를 위한 기초지식

(181111 그날그날디자인(링크)에 본글이 소개되었습니다!)

(190417 From Designer(링크)의 김선희 디자이너의 발표자료(링크)에 참고자료로 수록되었습니다)

디자이너는 웹사이트를 다채로운 폰트로 꾸미고 싶어한다. 멋진 영문 사이트들은 전용서체를 다양하게 쓰면서도 성능에서도 큰 문제가 없는데, 한글사이트는 웹폰트를 사용했을때 무거워진다고들 한다. 그래서 디자이너의 웹폰트 적용 제안은 늘 개발자에게는 받아들이기 힘든 제안이다.

한글폰트는 왜 용량이 큰지, 웹폰트의 종류는 어떤 것이 있는지, 글리프를 얼마나 줄여야 하는지 등을 알아본다. 한글 웹폰트 적용을 위한 기초지식들이다.

1) 11,172 vs 94

2) 완성형의 함정

3) eot.woff.woff2

4) 크롬 기준 다운로드되는 웹폰트의 용량은?

5) 적용과 더 넓은 이해를 위한 '더 읽어보기'

11,172 vs 94

글리프수의 차이가 용량의 차이

한글 폰트는 글리프(글자하나)의 숫자가 2,350자 ~ 11,172자 정도이다.

영문 폰트는 글리프의 숫자가 94자이다.

포함되는 글리프의 숫자가 이렇게나 차이가 나기 때문에 영문폰트와 한글폰트는 엄청난 용량 차이가 발생한다. 폰트 하나만 바꿔도 대부분의 사이트는 높은 미적 개선을 이룰 수 있지만 그 대가로 성능이 느려진다면 곤란한 일이다. 그리고 심미성과 성능이 반비례할때에 사용자 경험은 엉망이 된다.

완성형의 함정

'2,350'이라는 숫자가 중요한 것은 아니다

대개 한글의 11,172자를 흔히 2,350자로 줄이곤 한다.(조합형)

완성형이라 불리는 2,350자는 매우 오래전에 정해진 표준으로 문제가 많다는 의견도 있다. 그러나 예외적으로 사용되는 글리프들에 대해 많은 언급이 되고 있어서 이 부분은 개별 글리프를 담아서 해결하면 될 일이다. 2,350자라는 숫자가 중요한 것이 아니라 우리가 담고자 하는 글리프를 줄인다는데 의미가 있다. 완성형 2,350자는 우리가 11,172자라는 한글의 전체 글리프로부터 그 숫자를 줄여나가는 최소한의 가이드라인이라고 생각하면 된다. 글 말미에 2,574자를 사용한 스포카의 사례가 링크되어 있으니 참고하자.

eot/woff/woff2

브라우저 호환은 제각각, woff2가 가장 경제적

웹폰트는 ttf, eot, woff, woff2를 사용할 수 있다. 우리가 이렇게 4개의 다른 확장자를 지닌 파일을 웹폰트로 사용하는 이유는 브라우저들이 모두 폰트파일 지원범위가 다른 까닭이다. 세계적으로 널리 이용되는 Chrome과 Firefox의 경우에는 가장 경량화한 폰트파일인 woff2를 지원한다.

용량은 ttf > eot > woff > woff2 으로, ttf가 가장크고, woff2가 가장 작다.

ttf, eot, woff, woff2의 모음은 매우 널리 활용되는 방식으로, 이 모음은 구글폰트에서도 확인가능하다. 구글폰트(https://fonts.google.com)는 라이센스가 자유로운 글꼴들을 모아서 이용가능하도록 제공하고 있는데, 특히 한글 서체에 대해서는 구글폰트 얼리억세스 (https://fonts.google.com/earlyaccess) 에서 본고딕, 제주한라산, 제주고딕, 제주명조, 한나체, kopub바탕, 나눔고딕, 나눔고딕코딩, 나눔명조, 나눔붓글씨, 나눔펜글씨를 지원하고 있다. (총 11개이며 계속 늘어날 예정이다)

구글 폰트 얼리억세스에서 css파일을 열어보면, 굵기가 나누어져 있고, 굵기 하나에 해당하는 폰트파일이 ttf, eot, woff, woff2까지 모두 들어있는 모습을 볼 수 있다. 브라우저에서 지원하는 폰트파일 하나를 선택적으로 다운받는 것이기 때문에 실제 부하는 그다지 크지 않을 것이다. ttf파일에 비해 woff2는 용량이 매우 낮기에 매우 경제적으로 웹폰트를 사용할 수 있다.

웹폰트 적용시 다운로드되는 용량은?

웹폰트는 앞서 말한 브라우저의 호환 여부에 따라 불러오는 폰트 확장자가 달라진다. 우리가 흔히 사용하는. 크롬/파이어폭스/사파리는 모두 woff2를 지원하고 있다. 윈도우 내장 브라우저 기준으로는 IE9은 eot를 지원하며, IE10은 IE11은 woff, 엣지브라우저는 woff2를 지원한다. 그러므로 IE유저가 많은 웹사이트를 운영하고 있다면 woff나 eot의 용량도 감안해야겠지만 크롬 유저가 대다수를 차지하는 경우에는 woff2의 용량을 우선적으로 생각하면 된다.

우리가 크롬 유저이고, 접속하는 사이트가 ttf/eot/woff/woff2 웹폰트 모음으로 설정되어 있을때 우리는 woff2파일을 이용하게 된다. 나눔바른고딕의 웹폰트로 변환하고 나면 폰트의 각 용량은 ttf > eot > woff > woff2 순의 크기를 가지며 크롬유저라면 woff2를 다운받게 된다. 보통. woff2는 ttf대비 20~30%정도의 용량으로 줄어든다.