웹페이지의 시각적 요소 중 폰트는 사용자 경험과 페이지 속도에 중요한 영향을 미칩니다. 특히 사용자 맞춤형 웹 폰트를 사용할 경우, 폰트 로딩이 느려지면 콘텐츠가 제대로 표시되지 않거나 플래시 현상이 발생해 사용자 경험이 떨어질 수 있습니다. 이번 포스팅에서는 font-display 속성을 사용해 폰트 로딩을 최적화하는 방법과 다양한 전략을 통해 빠르고 일관된 폰트 렌더링을 구현하는 방법을 소개하겠습니다.
1. 폰트 로딩이 중요한 이유
폰트는 웹페이지의 텍스트 가독성을 크게 좌우합니다. 하지만 웹 폰트는 사용자 디바이스에 내장된 시스템 폰트와 다르게 네트워크를 통해 로드되므로 로딩이 느리면 페이지가 완전히 표시되지 않거나 잠시 동안 기본 폰트로 보여질 수 있습니다. 따라서 웹 폰트를 최적화하면 페이지 로딩 시간을 줄이고 사용자 경험을 개선할 수 있습니다.
2. font-display 속성 이해하기
font-display 속성은 CSS에서 웹 폰트의 로딩과 렌더링 방식을 제어하는 데 사용됩니다. 이 속성을 설정하면 폰트가 로드될 때 페이지에서 텍스트가 어떻게 보여질지 정의할 수 있습니다. 주요 옵션은 다음과 같습니다:
- auto: 기본값으로, 브라우저가 적절하게 폰트를 로딩하고 표시합니다.
- block: 웹 폰트를 로딩하는 동안 텍스트를 숨긴 후, 로드되면 폰트를 표시합니다. 텍스트는 약 3초간 숨겨지며 이후 기본 폰트로 대체됩니다.
- swap: 웹 폰트 로딩 전에는 시스템 폰트를 표시하고, 로드가 완료되면 웹 폰트로 대체합니다.
- fallback: 약 100ms 동안 웹 폰트를 기다린 후, 로드되지 않으면 기본 폰트로 대체합니다.
- optional: 네트워크 상태에 따라 폰트 로드를 결정하며, 폰트가 로드되지 않을 가능성도 있습니다.
3. font-display 옵션 사용 예시
가장 일반적으로 사용되는 옵션인 swap 속성을 사용하면 텍스트가 바로 표시되므로 사용자 경험이 크게 개선됩니다. 예를 들어:
@font-face {
font-family: 'CustomFont';
src: url('CustomFont.woff2') format('woff2');
font-display: swap;
}
이렇게 설정하면, 폰트가 로드되기 전에 시스템 기본 폰트가 표시되고, 폰트가 로드되면 웹 폰트로 자연스럽게 교체됩니다.
4. font-display 속성 활용 전략
1) 빠른 콘텐츠 표시를 위한 swap
swap은 콘텐츠를 빠르게 표시하고 폰트를 로드하면서 교체하는 방식으로, 로딩이 느린 환경에서도 유용합니다. 초기 텍스트가 표시되므로 사용자 경험이 개선되며, 폰트가 로드된 후에는 자연스럽게 변경되어 인식이 어렵습니다.
2) fallback으로 대체 폰트 사용
fallback은 100ms 정도 로딩을 기다린 후, 폰트가 로드되지 않으면 시스템 폰트를 표시합니다. 인터넷 연결이 불안정하거나 네트워크 속도가 느린 사용자에게 적합하며, 폰트 로딩에 소요되는 시간을 최소화할 수 있습니다.
3) 사용자 환경에 따른 optional 활용
optional은 네트워크 상태에 따라 폰트 로드를 제어하는 방식입니다. 네트워크 상태가 양호할 때만 웹 폰트를 로드하고, 그렇지 않으면 시스템 폰트를 유지합니다. 모바일 데이터 사용을 최적화하는 데 유용합니다.
5. 최적화된 폰트 포맷 선택
웹 폰트 포맷도 성능에 큰 영향을 미칩니다. WOFF2는 압축률이 높고 성능이 뛰어나 최신 브라우저에서 주로 사용됩니다. 가능한 경우, WOFF2 형식을 먼저 로드하도록 설정하여 폰트 파일의 크기를 줄이고 로딩 속도를 높일 수 있습니다.
@font-face {
font-family: 'CustomFont';
src: url('CustomFont.woff2') format('woff2'),
url('CustomFont.woff') format('woff');
font-display: swap;
}
이렇게 설정하면 지원되는 포맷이 없는 브라우저에서 대체 폰트를 자동으로 사용하여 호환성을 유지할 수 있습니다.
6. 프리로딩으로 폰트 로딩 최적화
<link rel="preload">를 활용하면 중요한 폰트를 빠르게 로드할 수 있습니다. 헤더에 프리로드를 설정하면 웹페이지 초기 로딩 단계에서 필요한 폰트를 먼저 로드하여 전체 페이지가 더 빠르게 렌더링됩니다.
<link rel="preload" href="fonts/CustomFont.woff2" as="font" type="font/woff2" crossorigin="anonymous">
프리로딩은 주요 헤더 폰트나 대형 텍스트 블록에 사용되는 폰트에 적합하며, 사용자에게 최적화된 첫 화면을 빠르게 제공합니다.
7. 불필요한 폰트 로드 방지
페이지에서 사용하지 않는 폰트는 로드하지 않도록 관리하는 것이 중요합니다. 모든 페이지에서 공통적으로 사용되지 않는 폰트는 로딩을 피하고, 필요한 경우에만 로드하도록 설정합니다. 이를 위해 필요한 폰트를 개별적으로 설정하거나 조건부로 로드하는 방법을 고려할 수 있습니다.
8. 최종 고려사항
- 폰트 로딩 우선순위: 필수 요소에 필요한 폰트부터 로드하여 로딩 시간을 줄입니다.
- 폰트 서브셋 사용: 페이지에서 자주 사용하지 않는 문자나 기호가 포함된 대형 폰트 파일을 로드하는 것은 성능 저하를 유발할 수 있습니다. 필요한 문자를 서브셋으로 줄여 가볍게 로드합니다.
font-display 속성은 웹 폰트의 로딩 전략을 제어하여 사용자 경험을 크게 개선할 수 있는 중요한 도구입니다. 최적화된 포맷과 프리로딩 기술을 활용해 폰트 로딩 시간을 줄이고, 빠르고 일관된 폰트 표시로 웹사이트 성능을 향상시킬 수 있습니다. 적절한 폰트 로딩 전략을 통해 사용자와 검색 엔진 모두에게 좋은 경험을 제공하는 웹사이트를 구현해 보세요.
