웹폰트는 즉시 도착하지 않습니다. 그 사이에 브라우저는 두 가지 중 하나를 해야 합니다 — 글자를 안 보여 주거나, 다른 폰트로 먼저 보여 주거나. 어느 쪽도 공짜가 아닙니다. 안 보여 주면 독자가 빈 화면을 보고, 먼저 보여 주면 폰트가 도착하는 순간 글자가 바뀝니다.
font-display는 이 선택을 CSS에 적어 두는 속성입니다.
두 구간으로 이해합니다
폰트를 기다리는 시간은 두 구간으로 나뉩니다.
차단 구간(block period) — 이 동안 브라우저는 글자를 그리지 않습니다. 자리는 차지하되 보이지 않는 상태입니다. 폰트가 이 구간 안에 도착하면 처음부터 원하는 폰트로 그려지므로 화면이 한 번도 바뀌지 않습니다.
교체 구간(swap period) — 차단 구간이 끝나면 브라우저는 폴백 폰트로 일단 그립니다. 그리고 이 구간 안에 웹폰트가 도착하면 그때 교체합니다. 교체되는 순간 글자 폭이 달라지므로 레이아웃이 움직입니다.
다섯 값이 정하는 것
다섯 값은 결국 이 두 구간의 길이를 다르게 잡은 조합입니다.
swap은 글자가 비어 있는 시간을 없애는 선택입니다. 대신 폰트가 도착할 때 반드시 한 번 바뀝니다. block은 반대로 바뀌지 않는 대신 초기에 글자가 보이지 않습니다. optional은 가장 보수적입니다 — 아주 짧은 차단 구간 안에 도착하지 못하면 이번 화면에서는 웹폰트를 아예 쓰지 않습니다. 다만 파일은 캐시에 받아 두므로 다음 방문부터는 처음부터 웹폰트로 그려집니다.
한글에서 이 선택이 더 중요한 이유
앞 회차에서 본 대로 한글 폰트는 조각이 여럿이고 각각이 라틴 폰트보다 큽니다. 그래서 도착 시차가 길고, 조각마다 따로 도착합니다. 이 두 가지가 각 값의 단점을 증폭시킵니다.
block을 쓰면 본문이 비어 있는 시간이 라틴 사이트보다 길게 느껴집니다. 반대로 swap을 쓰면 조각이 하나씩 도착할 때마다 글자가 여러 번 바뀔 수 있습니다 — 제목이 먼저 바뀌고 본문이 나중에 바뀌는 식입니다.
그리고 이 교체는 단순히 모양만 바꾸지 않습니다. 폴백 폰트와 웹폰트의 글자 폭이 다르면 줄바꿈 위치가 달라지고, 문단의 줄 수가 바뀌면 그 아래 요소가 전부 밀립니다. 사용자가 막 누르려던 버튼이 손가락 아래에서 이동하는 상황이 여기서 나옵니다.
무엇을 고르나
실무적인 권장은 이렇습니다.
본문에는 swap을 쓰되, 다음 회차에서 다룰 폴백 메트릭 보정을 함께 적용합니다. 폴백 폰트의 글자 폭과 높이를 웹폰트에 맞춰 두면 교체가 일어나도 레이아웃이 움직이지 않습니다 — swap의 유일한 단점이 사라지는 셈입니다.
브랜드 폰트를 반드시 보여 줘야 하는 큰 제목이라면 그 조각만 preload로 앞당깁니다. 도착이 빨라지면 차단 구간 안에 들어와 교체 자체가 일어나지 않습니다.
레이아웃 이동을 절대 허용할 수 없는 화면 — 결제 · 신청처럼 오조작 비용이 큰 화면 — 에서는 optional도 합리적입니다. 첫 방문에서 브랜드 폰트를 못 보는 대가로 이동이 0이 됩니다.
첫 화면 렌더링과 레이아웃 이동을 함께 다루는 글은 성능 최적화 아카이브에 있고, 이런 항목을 실제 사이트에서 어떤 순서로 측정하고 고치는지는 작업 과정에 절차 그대로 공개돼 있습니다.
다음 회차
지금까지 두 번 예고한 폴백 메트릭 보정이 다음 회차입니다. CSS 몇 줄로 폰트 교체 시의 레이아웃 이동을 없애는 방법이고, 이 연재에서 가장 효과가 분명한 기법입니다.