웹 폰트는 웹 사이트의 디자인과 사용자 경험에 있어 중요한 요소입니다. 하지만 웹 폰트가 로딩되는 동안 웹페이지가 느리게 표시되거나 렌더링 문제가 발생하기도 합니다.
FOIT & FOUT란?
FOIT (Flash of Invisible Text)는 브라우저가 웹 글꼴을 다운로드하기 전에 텍스트가 보이지 않는 현상입니다. 반면 FOUT (Flash of Unstyled Text)는 브라우저가 웹 글꼴을 다운로드하기 전에 텍스트가 대체 글꼴로 렌더링되는 현상을 말합니다. 이번 글에서는 웹 폰트 최적화에 중점을 두고, 웹페이지의 성능을 향상시킬 수 있고 사용자 경험을 개선하기 위해 이러한 현상을 최소화하는 방법 몇 가지를 소개하려 합니다.
📌1. Preload 사용
preload를 사용하면 브라우저가 페이지의 나머지 부분을 기다리지 않고 필요한 리소스를 우선적으로 다운로드합니다. 하지만 필요한 모든 폰트를 preload하는 것은 브라우저의 네트워크 대역폭을 모두 차지할 수 있으므로 조심해야 합니다. 대게 중요한 폰트(예: 본문 텍스트용)만 preload를 사용하는 것이 좋습니다. 다음과 같이 <link> 태그를 <head> 영역에 추가합니다.
<head>
<link rel="preload" href="/path/to/your/MyFont.woff2" as="font" type="font/woff2" crossorigin>
</head>📌2. 웹 폰트를 로컬에서 로드하는 방법
만약 웹 폰트를 다운로드 받아 본인의 로컬 프로젝트 폴더에 저장했다면 우선적으로 저장된 폰트를 로드 하여 사용할 수 있습니다. CSS 파일에 @font-face를 추가하여 브라우저가 원하는 폰트를 찾을 수 있도록 해야 합니다. 먼저 해당 폰트를 로컬에서 찾아본 다음, 폰트를 찾지 못하면 웹에서 다운로드하게 됩니다.
@font-face {
font-family: 'MyFont';
src: local('MyFont'), url('/path/to/your/MyFont.woff2') format('woff2'), url('/path/to/your/MyFont.woff') format('woff');
font-weight: 400;
font-style: normal;
}📌3. 서브셋 글꼴 사용
서브셋 글꼴은 다운로드 및 렌더링 시간을 줄이기 위해 원본 글꼴에서 일부 문자만 포함하는 글꼴입니다. 예를 들어, 한국어 웹 사이트의 경우 한국어 자모음 및 필요한 기호만 포함하는(다시 말해 갞,갦...등등 실생활에서 거의 사용하지 않는 글자를 제외합니다.) 서브셋 글꼴을 사용할 수 있습니다.
<head>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap&subset=latin" rel="stylesheet">
</head>📌4. font-display 속성 사용
font-display 속성은 폰트 로딩 시 브라우저의 동작을 제어하는 CSS 속성입니다. swap 값을 사용하면 폰트가 로딩되기 전까지 시스템 폰트를 사용하여 렌더링합니다.
@font-face {
font-family: 'MyFont';
src: url('/path/to/your/MyFont.woff2') format('woff2'), url('/path/to/your/MyFont.woff') format('woff');
font-weight: 400;
font-style: normal;
font-display: swap;
}📌END.
웹 폰트 로딩과 관련된 FOIT와 FOUT 현상은 사용자 경험에 영향을 줄 수 있습니다. 따라서 이러한 현상을 최소화하기 위한 다양한 방법을 적용하여 웹 사이트 사용자에게 더 나은 사용자 경험을 제공하는 것이 중요하다고 생각됩니다. font-display 속성을 사용하거나, 웹 폰트 preload, 로컬 폰트 사용, 웹 폰트 최적화, 비동기 웹 폰트 로드와 같은 방법을 적용하여 웹 폰트 로딩 시 FOIT와 FOUT 현상을 줄일 수 있습니다. 각 프로젝트와 페이지 상황에 맞게 이러한 전략들을 조합하여 성능과 사용자 경험을 최적화 하는게 중요한 포인트인것 같습니다.
