"폰트 하나 때문에 속도가?" 웹 폰트 최적화 전략 (FOIT vs FOUT)

"웹사이트가 떴는데 글자만 늦게 보인 적 있나요?"
사용자 경험을 결정짓는 찰나의 순간, 웹 폰트 로딩 기법을 통해 깔끔하고 빠른 페이지를 만드는 법을 알아봅니다.

1. FOIT와 FOUT 이해하기

브라우저가 폰트를 내려받기 전까지 글자를 어떻게 처리할지에 대한 두 가지 방식입니다.

• FOIT (Flash of Invisible Text): 폰트가 다 받아질 때까지 글자를 보여주지 않습니다. 깔끔하지만 로딩이 길면 빈 화면만 보게 됩니다.
• FOUT (Flash of Unstyled Text): 기본 폰트로 먼저 보여주고, 다운로드가 완료되면 웹 폰트로 교체합니다. 내용은 바로 보이지만 글꼴이 바뀌면서 '깜빡임'이 느껴집니다.

2. 성능을 높이는 폰트 최적화 기법

• WOFF2 포맷 사용: 가장 압축률이 좋은 차세대 포맷입니다. TTF보다 용량이 훨씬 작습니다.
• font-display: swap: CSS 설정 하나로 FOUT 방식을 강제하여 로딩 중에도 글자가 보이게 합니다.
• Preload 설정: <link rel="preload">를 써서 브라우저가 HTML을 읽자마자 폰트부터 미리 받게 합니다.
• Subset Font: 쓰지 않는 글자(고어 등)를 제거하고 자주 쓰는 글자만 모아 용량을 줄인 폰트를 사용합니다.

💡 실무 노트

폰트 최적화는 단순히 속도만의 문제가 아니라 LCP(Largest Contentful Paint) 점수와 직결됩니다.

팁: 폰트가 교체될 때 화면 레이아웃이 미세하게 흔들리는 '레이아웃 시프트(CLS)'가 짜증을 유발할 수 있습니다. 이를 방지하려면 웹 폰트와 최대한 비슷한 크기의 기본 폰트(Fallack Font)를 설정하고, size-adjust 같은 최신 CSS 속성을 사용해 두 폰트의 크기를 맞추는 것이 실무 개발자의 디테일입니다.

"사용자는 당신의 아름다운 폰트를 보기 위해 3초를 기다려주지 않습니다."