웹폰트는 현대 웹 디자인의 중요한 요소로 자리 잡았지만, 잘못된 로딩 전략은 페이지 로딩 속도와 사용자 경험에 악영향을 미칠 수 있습니다. 특히 웹폰트 로딩 중 화면의 텍스트가 보이지 않거나 레이아웃이 갑자기 바뀌는 문제는 사용자에게 부정적인 인상을 줄 수 있습니다. 이를 해결하기 위해 font-display 속성과 비동기 로딩 전략을 활용하면 성능과 사용자 경험을 모두 개선할 수 있습니다.
1. 웹폰트 로딩의 문제점 이해하기
웹폰트를 사용할 때 겪을 수 있는 주요 문제는 다음과 같습니다:
- FOIT (Flash of Invisible Text): 텍스트가 보이지 않는 상태로 대기하다가 웹폰트가 로드된 후 렌더링됩니다.
- FOUT (Flash of Unstyled Text): 기본 시스템 폰트로 텍스트가 먼저 렌더링되었다가 나중에 웹폰트로 바뀌는 현상입니다.
- 로딩 속도 저하: 대용량의 웹폰트 파일을 동기적으로 로드하면 페이지 로딩 시간이 길어질 수 있습니다.
2. font-display 속성을 활용한 최적화
font-display 속성은 웹폰트 로딩 과정에서 텍스트가 화면에 표시되는 방식을 제어합니다. 이 속성을 적절히 설정하면 FOIT와 FOUT 문제를 완화하고 사용자 경험을 개선할 수 있습니다.
font-display 속성 값
auto: 브라우저의 기본 동작을 따릅니다. (대부분 FOIT를 유발)block: 짧은 시간 동안 텍스트를 숨긴 상태로 대기하다가, 웹폰트가 로드되면 표시합니다.swap: 텍스트를 즉시 기본 폰트로 렌더링한 후 웹폰트가 로드되면 교체합니다.fallback: 일정 시간 동안 웹폰트 로딩을 기다리다가 실패하면 기본 폰트를 계속 사용합니다.optional: 네트워크 상태가 좋지 않을 경우 웹폰트를 아예 로드하지 않고 기본 폰트를 사용합니다.
사용 예시
웹폰트를 선언할 때 @font-face 규칙에 font-display 속성을 추가합니다:
@font-face {
font-family: 'CustomFont';
src: url('customfont.woff2') format('woff2');
font-display: swap;
}
위 예제는 FOIT 문제를 방지하고, 기본 폰트로 텍스트를 먼저 표시한 후 웹폰트가 로드되면 자연스럽게 교체하는 방식을 구현합니다.
3. 비동기 로딩 전략 적용하기
1) rel="preload"를 활용한 미리 로드
<link> 태그에 rel="preload"를 사용하면 브라우저가 웹폰트를 미리 다운로드하도록 요청할 수 있습니다.
<link rel="preload" href="customfont.woff2" as="font" type="font/woff2" crossorigin="anonymous">
장점:
- 웹폰트 다운로드를 HTML 파싱 초기에 시작하여 로딩 시간을 단축합니다.
- 텍스트 렌더링이 더 빨라집니다.
2) 동적 로딩을 통한 최적화
JavaScript를 사용하여 웹폰트를 비동기로 로드하면 렌더링 차단 문제를 피할 수 있습니다.
const font = new FontFace('CustomFont', 'url(customfont.woff2)');
font.load().then(function(loadedFont) {
document.fonts.add(loadedFont);
document.body.style.fontFamily = 'CustomFont, sans-serif';
});
이 방식은 폰트 로드가 완료된 후 텍스트 스타일을 변경하므로 렌더링 차단 없이 웹폰트를 사용할 수 있습니다.
3) Google Fonts의 display 파라미터 활용
Google Fonts를 사용할 경우 URL에 display=swap을 추가하여 FOIT 문제를 해결할 수 있습니다.
<link href="<https://fonts.googleapis.com/css2?family=Roboto&display=swap>" rel="stylesheet">
4. 웹폰트 로딩 성능 최적화 전략
1) 포맷 최적화
최신 포맷인 WOFF2를 사용하면 파일 크기를 줄이고 로딩 속도를 개선할 수 있습니다.
- WOFF2 > WOFF > TTF 순으로 성능이 좋습니다.
- 여러 포맷을 제공하여 브라우저 호환성을 확보합니다.
@font-face {
font-family: 'CustomFont';
src: url('customfont.woff2') format('woff2'),
url('customfont.woff') format('woff');
font-display: swap;
}
2) 서브셋 생성
웹폰트 파일에서 사용하지 않는 글리프(문자)를 제거하여 크기를 줄이는 방법입니다. 예를 들어, 특정 언어에 필요한 글리프만 포함된 폰트 파일을 만들면 성능을 크게 향상시킬 수 있습니다.
3) HTTP/2와 CDN 활용
웹폰트를 CDN에서 제공하고 HTTP/2 프로토콜을 사용하면 다중 파일을 동시에 로드하여 로딩 속도를 더욱 높일 수 있습니다.
5. 사용자 경험을 개선하는 디자인 사례
- FOIT를 방지하며 웹폰트 적용
- 기본 시스템 폰트를 사용해 텍스트를 먼저 렌더링하고, 웹폰트가 로드되면 부드럽게 대체합니다.
- 브랜드 아이덴티티 강화
- 주요 텍스트에만 웹폰트를 사용하고, 부차적인 텍스트에는 기본 폰트를 사용하여 성능과 일관성을 동시에 확보합니다.
- 반응형 디자인에 맞춘 로딩
- 모바일과 데스크톱에서 다른 폰트 파일을 로드하여 필요한 리소스만 로드하도록 설정합니다.
웹폰트는 웹사이트의 미적 완성도를 높이는 강력한 도구이지만, 잘못된 로딩 방식은 사용자 경험과 퍼포먼스에 부정적인 영향을 미칠 수 있습니다. font-display 속성을 활용해 FOIT와 FOUT 문제를 해결하고, 비동기 로딩 전략으로 로딩 속도를 최적화하면 성능과 사용자 경험을 동시에 개선할 수 있습니다. 이러한 최적화는 특히 모바일 환경에서 더욱 중요한데, 빠르고 부드러운 경험을 제공하여 사용자의 만족도를 높일 수 있습니다.
웹폰트 최적화는 단순히 기술적 문제를 해결하는 것을 넘어, 콘텐츠를 더 효과적으로 전달하고 사용자와의 신뢰를 구축하는 중요한 요소입니다. 지금 바로 웹폰트 로딩 전략을 최적화하여 성능과 디자인을 한 단계 끌어올려 보세요!
