들어가며: 웹 폰트 최적화가 필요한 이유

웹 개발에서 폰트는 브랜딩과 사용자 경험에 중요한 역할을 한다. 하지만 최적화되지 않은 웹 폰트는 성능 저하와 사용자 경험 악화를 초래할 수 있다. 특히 웹 바이탈 측정 요소 중 하나인 Cumulative Layout Shift (CLS)와 관련된 문제는 매우 중요하다.

Cumulative Layout Shift (CLS) 이해하기

CLS란?

CLS는 Google의 Core Web Vitals 중 하나로, 페이지 로딩 중 발생하는 예기치 않은 레이아웃 변화를 측정하는 지표다.

CLS가 중요한 이유

1. 사용자 경험
   • 갑작스러운 레이아웃 변화는 사용자의 불편을 초래
   • 잘못된 클릭이나 터치를 유발할 수 있음
2. SEO 영향
   • Google은 CLS를 검색 순위 요소로 고려
   • 낮은 CLS 점수는 더 낮은 검색 순위로 이어질 수 있음

폰트 로딩이 CLS에 미치는 영향

일반적인 폰트 로딩 과정

1. 초기 렌더링: 시스템 폰트 사용
2. 웹 폰트 다운로드
3. 폰트 교체
4. 레이아웃 변화 발생

/* 전통적인 방식의 웹 폰트 적용 */
@font-face {
  font-family: 'CustomFont';
  src: url('/fonts/CustomFont.woff2') format('woff2');
}

body {
  font-family: 'CustomFont', system-ui, sans-serif;
}

발생하는 문제점

1. FOUT (Flash of Unstyled Text)
   • 시스템 폰트가 웹 폰트로 교체될 때 발생하는 깜빡임
2. FOIT (Flash of Invisible Text)
   • 폰트 로딩 중 텍스트가 보이지 않는 현상
3. 레이아웃 변화
   • 폰트 교체 시 텍스트 크기와 간격 변화로 인한 레이아웃 이동

Next.js의 폰트 최적화 솔루션