One-page map

폰트 최적화는 네 지점을 동시에 맞춰야 효과가 난다

소스만 바꿔도, subset만 줄여도 부족하다. 파일 범위와 표시 정책, 적용 위치가 서로 맞아야 한다.

1. 소스 선택

  • 공개 폰트는 `next/font/google`
  • 브랜드·사내 폰트는 `next/font/local`

2. 파일 범위

  • 사용하는 weight와 style만 지정
  • 언어 subset을 줄여 전송량을 낮춤
이 두 가지가 다운로드 비용을 줄인다.

3. 표시 정책

  • `display`로 FOIT/FOUT 균형 선택
  • 첫 화면 폰트만 preload 유지

4. 적용 위치

  • 루트 레이아웃은 기본 본문 폰트
  • 특수 영역은 CSS variable로 분리
이 두 가지가 표시 안정성과 유지보수성을 만든다.