웹사이트의 시각적 디자인은 사용자 경험(UX)에 큰 영향을 미칩니다. 특히 웹폰트의 사용은 개성을 표현하고 브랜딩을 강화할 수 있는 중요한 요소입니다. 하지만 잘못된 폰트 로딩 전략은 로딩 속도 저하, 콘텐츠 가시성 문제, 사용자 이탈 등의 부작용을 초래할 수 있습니다. 이번 글에서는 font-display 속성과 폴백 폰트 설정법을 중심으로 웹폰트 로딩 속도를 최적화하는 방법을 소개합니다.
1. 웹폰트 로딩 문제와 해결의 중요성
1.1 일반적인 웹폰트 로딩 문제
- FOIT(Flash of Invisible Text): 폰트를 로드하는 동안 텍스트가 보이지 않는 문제.
- FOUT(Flash of Unstyled Text): 기본 폴백 폰트로 먼저 텍스트가 렌더링되고, 나중에 웹폰트로 교체되는 문제.
- 로딩 지연으로 인해 사용자 경험과 SEO 점수 모두에 부정적인 영향을 미칠 수 있습니다.
1.2 최적화의 필요성
폰트 로딩 최적화는 빠른 콘텐츠 렌더링과 매끄러운 사용자 경험을 보장하며, 구글이 중요시하는 페이지 경험 지표(Core Web Vitals) 향상에도 기여합니다.
2. font-display 속성을 활용한 로딩 전략
font-display는 CSS에서 폰트의 로딩 및 렌더링 동작을 제어할 수 있는 속성입니다. 이 속성을 사용하면 FOIT 또는 FOUT 문제를 최소화할 수 있습니다.
2.1 font-display 속성의 옵션
- auto (기본값)
- 브라우저가 폰트 로딩을 자동으로 처리합니다.
- 사용자가 제어할 수 없으므로 최적화 효과가 제한적입니다.
- block
- 폰트 로드가 완료될 때까지 텍스트가 보이지 않습니다(FOIT).
- 대기 시간이 길 경우 UX에 부정적 영향을 줄 수 있습니다.
- swap
- 폴백 폰트로 텍스트를 즉시 렌더링한 후, 웹폰트 로드가 완료되면 교체합니다(FOUT).
- 가장 추천되는 옵션입니다.
- fallback
- 일정 시간 동안 웹폰트를 기다리다가 로드되지 않으면 폴백 폰트를 계속 사용합니다.
- 웹폰트 로드 실패 시 안전한 대안입니다.
- optional
- 네트워크 속도나 환경에 따라 웹폰트를 로드할지 결정합니다.
- 저속 네트워크 환경에서 유용합니다.
2.2 font-display 적용 예제
@font-face {
font-family: 'CustomFont';
src: url('customfont.woff2') format('woff2');
font-display: swap;
}
2.3 font-display: swap의 장점
- 텍스트가 즉시 렌더링되어 콘텐츠 접근성이 향상됩니다.
- 사용자 경험을 저하시키지 않고 웹폰트를 효과적으로 제공할 수 있습니다.
3. 폴백 폰트 설정으로 로딩 경험 개선
3.1 폴백 폰트란?
웹폰트 로드 전에 임시로 표시할 기본 시스템 폰트를 말합니다. 적절한 폴백 폰트를 설정하면 FOIT 문제를 완화할 수 있습니다.
3.2 폴백 폰트 설정 예제
body {
font-family: 'CustomFont', Arial, sans-serif;
}
- ‘CustomFont’가 로드되기 전에 Arial 폰트가 표시됩니다.
- sans-serif는 최후의 폰트 대안입니다.
3.3 폴백 폰트 선택 팁
- 스타일 일관성 유지 폴백 폰트는 웹폰트와 비슷한 글꼴 두께와 높이를 가져야 합니다.
- 플랫폼별 최적화
- Windows: Arial, Tahoma
- macOS: Helvetica
- Android/iOS: Roboto, System Default
- 시스템 폰트 스택 활용 사용자의 운영 체제에 최적화된 폰트를 자동으로 선택합니다. css 코드 복사 font-family: -apple-system, BlinkMacSystemFont, ‘Segoe UI’, Roboto, ‘Helvetica Neue’, Arial, sans-serif;
4. 로딩 성능 최적화 기술
4.1 WOFF2 사용
최신 웹폰트 포맷인 WOFF2는 압축률이 높아 파일 크기가 작습니다.
@font-face {
font-family: 'CustomFont';
src: url('customfont.woff2') format('woff2');
font-display: swap;
}
4.2 서브셋 제작
전체 폰트 파일 대신 필요한 글자만 포함된 서브셋 폰트를 사용하면 파일 크기를 줄일 수 있습니다.
4.3 Preload 사용
<link> 태그를 활용해 폰트 파일을 로드 우선순위에 포함시킵니다.
<link rel="preload" href="customfont.woff2" as="font" type="font/woff2" crossorigin="anonymous">
4.4 Lazy Loading
폰트를 사용자가 필요로 할 때만 로드하여 초기 로딩 시간을 단축합니다.
5. 사용자 경험(UX)과 SEO 동시 개선
- 빠른 렌더링으로 이탈률 감소
- 텍스트를 빠르게 표시함으로써 사용자의 사이트 체류 시간을 늘릴 수 있습니다.
- 모바일 최적화
- 저속 네트워크 환경에서도 웹폰트 로드 실패를 대비한 폴백 폰트 설정은 필수입니다.
- SEO 최적화
- 빠른 로딩 시간은 구글 페이지 속도 점수에 긍정적인 영향을 미칩니다.
폰트 로딩 전략은 사용자 경험과 SEO를 모두 고려한 중요한 웹 디자인 요소입니다. font-display: swap을 활용하여 FOIT 문제를 방지하고, 적절한 폴백 폰트를 설정하면 성능을 개선할 수 있습니다. 또한, 최신 기술과 최적화 도구를 활용해 로딩 속도를 지속적으로 개선하면 더 나은 사용자 경험을 제공할 수 있습니다. 지금 바로 폰트 로딩 전략을 점검해 사이트 품질을 한 단계 업그레이드하세요.
