공들여 고른 글꼴이 사이트에 막상 올라가면 첫인상을 망치는 경우가 많습니다. 페이지가 열릴 때 글자가 기본 글꼴로 잠깐 떴다가 한 박자 늦게 원하던 글꼴로 깜빡 바뀌거나, 아예 몇 초 동안 글자가 보이지 않다가 뒤늦게 나타나기도 합니다. 손님은 그 짧은 순간에 '느린 사이트'라는 인상을 받습니다. 원인은 대부분 하나, 바로 무거운 한글 웹폰트입니다.
왜 한글 웹폰트는 유독 무거운가
영문 글꼴은 알파벳과 숫자, 기호를 합쳐 글자 모양(글리프)이 수백 개면 충분합니다. 반면 한글은 자음과 모음의 조합으로 1만 1천 자가 넘는 글리프를 담아야 합니다. 그래서 같은 디자인이라도 한글 글꼴 파일은 영문의 수십 배인 2~5MB에 이르는 경우가 흔합니다. 이 큰 파일을 다 내려받아야 글자가 제 모습을 갖추다 보니, 인터넷이 느린 환경이나 모바일에서는 글자가 늦게 뜨거나 깜빡이는 현상이 두드러집니다.
원칙 1. 글자부터 먼저 보여준다 — font-display: swap
웹폰트를 불러올 때 글자를 끝까지 숨기지 말고, 일단 시스템 기본 글꼴로 내용을 먼저 보여준 뒤 웹폰트가 준비되면 자연스럽게 교체하도록 설정합니다. CSS의 @font-face에 font-display: swap 한 줄을 넣으면 됩니다. 글자가 아예 안 보이는 답답한 공백 대신, 손님은 곧바로 글을 읽기 시작할 수 있습니다. 첫 화면이 비어 보이는 시간을 없애는 가장 간단한 처방입니다.
원칙 2. 꼭 필요한 굵기만 싣는다
한 글꼴에는 가는체부터 굵은체까지 여러 굵기가 들어 있고, 굵기 하나하나가 별도의 파일입니다. 욕심내어 다섯 굵기를 모두 불러오면 용량도 다섯 배가 됩니다. 실제 디자인에서 쓰는 굵기는 보통 본문용 보통체와 제목용 굵은체 두 가지면 충분합니다. 쓰지 않는 굵기는 과감히 빼는 것만으로 내려받을 용량이 절반 이하로 줄어듭니다.
원칙 3. 쓰는 글자만 남긴다 — 서브셋
1만 자가 넘는 한글 중 한 사이트에서 실제로 쓰이는 글자는 일부에 불과합니다. 자주 쓰는 2,350자 안팎만 추려낸 서브셋(subset) 폰트를 쓰면 파일이 훨씬 가벼워집니다. 더 나아가 최신 한글 웹폰트는 글자를 여러 조각으로 나눠두고 화면에 실제로 나온 글자가 든 조각만 골라 내려받는 방식(유니코드 분할)을 지원합니다. 구글 폰트의 한글 글꼴이 빠른 이유가 바로 이것입니다.
원칙 4. 먼저, 가볍게 부른다 — preload와 woff2
같은 글꼴이라도 형식에 따라 용량이 다릅니다. 요즘 브라우저는 가장 압축률이 좋은 woff2 형식을 모두 지원하므로, 오래된 형식 대신 woff2를 쓰면 별다른 손해 없이 파일이 더 작아집니다. 여기에 첫 화면의 제목처럼 꼭 필요한 글꼴은 <link rel="preload">로 미리 내려받게 지정하면, 브라우저가 다른 작업에 밀리지 않고 글꼴을 우선 챙겨 옵니다. 깜빡임이 시작되는 시점 자체를 앞당기는 셈입니다.
원칙 5. 시스템 폰트라는 든든한 차선책
모든 페이지에 화려한 웹폰트가 필요한 것은 아닙니다. 본문 같은 긴 글은 손님의 기기에 이미 깔려 있는 시스템 글꼴(애플 기기의 애플 산돌고딕, 윈도우의 맑은 고딕 등)로 두면, 내려받을 파일이 0이라 가장 빠르고 깜빡임도 없습니다. 브랜드 색을 살려야 하는 제목과 로고에만 웹폰트를 쓰고 본문은 시스템 글꼴에 맡기는 절충안은, 속도와 분위기를 모두 챙기는 현실적인 방법입니다.
속도는 디자인의 일부입니다
좋은 글꼴을 고르는 일과 그 글꼴을 빠르게 보여주는 일은 별개의 과제입니다. 아무리 예쁜 글꼴도 늦게 뜨고 깜빡이면 손님의 첫인상에는 '느림'만 남습니다. 굵기를 줄이고, 서브셋과 woff2로 가볍게 만들고, swap과 preload로 똑똑하게 불러오는 다섯 가지만 챙겨도 체감 속도는 눈에 띄게 달라집니다. CYAN은 작은 회사 웹사이트를 만들 때 글꼴 선택뿐 아니라 이런 로딩 방식까지 함께 설계해, 보기 좋으면서도 빠르게 열리는 첫 화면을 맞춰 드립니다.