🅰️ 32. 웹 폰트 최적화 전략 — 성능, 디자인, UX까지 생각한 글꼴 사용법

JM_Dev·2025년 5월 9일

foit font-display fout woff2 개발자기록 웹성능 웹폰트 프론트엔드

개발자가 되어가는 걸음

목록 보기

32/81

웹페이지를 구성하는 핵심 요소 중 하나가 폰트(글꼴)다.
하지만 대부분 무심코 Google Fonts를 링크하거나,
디자이너가 전달한 TTF 파일을 그대로 @font-face로 적용하고 끝내는 경우가 많다.

사실 웹폰트는 페이지 성능, 사용자 경험, SEO에까지 영향을 줄 수 있는 중요한 요소다.
이번 글에서는 폰트를 이쁘게 보이게 하는 방법이 아니라, 잘 보이고 빠르게 적용되는 전략을 정리해봤다.

✅ 웹폰트의 대표적인 문제점

1️⃣ FOIT (Flash of Invisible Text)

텍스트가 보이지 않다가 폰트 로딩이 완료된 후 한 번에 표시되는 현상
→ 사용자 입장에서 공백 상태가 보임

2️⃣ FOUT (Flash of Unstyled Text)

기본 폰트로 먼저 표시된 후, 폰트 로딩이 끝나면 폰트가 갑자기 바뀌는 현상

📦 웹 폰트 적용 방법 비교

방식	설명	장점	단점
`@import` from Google Fonts	CSS 파일에 임포트	간단함	느림, 차단 위험
`<link>` 태그 사용	HTML `<head>`에 링크	렌더링 차단 없음	속도 느림
`@font-face` 직접 호스팅	서버에 파일 두고 import	커스터마이징 가능	직접 관리 필요

⚙️ 실전 적용 예시

@font-face {
  font-family: 'Pretendard';
  src: url('/fonts/pretendard.woff2') format('woff2');
  font-display: swap;
}

woff2는 가장 가볍고 최신 브라우저 지원률이 좋음
font-display: swap은 FOUT을 허용하고 FOIT를 방지
→ 기본 폰트로 먼저 보이고, 나중에 웹폰트 적용됨

💡 font-display 옵션 정리

값	설명
`auto`	브라우저 기본 (대개 FOIT 발생 가능)
`block`	3초 기다렸다가 폰트 로딩 (FOIT 발생 가능)
`swap`	기본 폰트로 먼저 보여주고, 나중에 교체 (FOUT 발생)
`fallback`	100ms 이내 폰트 안오면 기본 폰트 유지
`optional`	유저 네트워크 상황에 따라 로딩 자체를 생략할 수도 있음

🔥 최적화를 위한 전략 정리

✅ 1. `woff2`만 사용

TTF, OTF는 너무 큼
브라우저 대부분 woff2 지원 (IE 제외하면 OK)

✅ 2. 사용 범위 줄이기 (subset 생성)

한글, 숫자, 영문만 필요한 경우 → 필요한 문자만 포함한 폰트 파일 생성
fonttools, glyphhanger, subset-font 등 툴 사용

✅ 3. preload 적용

<link
  rel="preload"
  href="/fonts/pretendard.woff2"
  as="font"
  type="font/woff2"
  crossorigin="anonymous"
/>

→ 초기 렌더링 전에 폰트 먼저 로딩

📝 내가 느낀 점

디자인 시스템을 만들면서 웹폰트 설정을 처음부터 구성했는데,
그때 font-display 하나 때문에 첫 페이지 렌더링이 몇 초 지연되는 걸 보고 충격이었다.
지금은 font-display: swap + preload + woff2를 기본 구성으로 쓰고 있고,
성능 측정 도구(Lighthouse) 점수도 20점 이상 상승한 경험이 있다.

🔡 “이쁘게 보이는 것보다, 빨리 보이는 게 UX다.”

JM_Dev

개발자로 취업을 준비 중 이며, 열심히 공부 중 입니다!

이전 포스트

♿ 31. 웹 접근성 제대로 이해하기 — 실무에서 쓸 수 있는 Web Accessibility 가이드

다음 포스트

🅰️ 32. 웹 폰트 최적화 전략 — 성능, 디자인, UX까지 생각한 글꼴 사용법

개발자가 되어가는 걸음

✅ 웹폰트의 대표적인 문제점

1️⃣ FOIT (Flash of Invisible Text)

2️⃣ FOUT (Flash of Unstyled Text)

📦 웹 폰트 적용 방법 비교

⚙️ 실전 적용 예시

💡 font-display 옵션 정리

🔥 최적화를 위한 전략 정리

✅ 1. `woff2`만 사용

✅ 2. 사용 범위 줄이기 (subset 생성)

✅ 3. preload 적용

📝 내가 느낀 점

♿ 31. 웹 접근성 제대로 이해하기 — 실무에서 쓸 수 있는 Web Accessibility 가이드

📱 33. React Native 완전 입문 — Expo vs CLI, 어떻게 시작해야 할까?

0개의 댓글

🅰️ 32. 웹 폰트 최적화 전략 — 성능, 디자인, UX까지 생각한 글꼴 사용법

개발자가 되어가는 걸음

✅ 웹폰트의 대표적인 문제점

1️⃣ FOIT (Flash of Invisible Text)

2️⃣ FOUT (Flash of Unstyled Text)

📦 웹 폰트 적용 방법 비교

⚙️ 실전 적용 예시

💡 font-display 옵션 정리

🔥 최적화를 위한 전략 정리

✅ 1. woff2만 사용

✅ 2. 사용 범위 줄이기 (subset 생성)

✅ 3. preload 적용

📝 내가 느낀 점

♿ 31. 웹 접근성 제대로 이해하기 — 실무에서 쓸 수 있는 Web Accessibility 가이드

📱 33. React Native 완전 입문 — Expo vs CLI, 어떻게 시작해야 할까?

0개의 댓글

✅ 1. `woff2`만 사용