폰트 최적화
폰트 최적화 방법에 대해 정리한 페이지입니다.
Tags
React, Font
개요
폰트 최적화 방법에 대해 정리한 페이지입니다.
폰트 최적화 (Font Optimization)
중요성
웹 성능에서 폰트는 이미지 다음으로 큰 리소스로, 웹 페이지 로딩 속도에 큰 영향을 미칩니다. 또한 폰트를 다운로드하면서 기본 폰트가 웹 폰트로 바뀌면서 CLS(Cumulative Layout Shift)가 증가하는 등의 문제가 발생합니다. 따라서 폰트 최적화는 로딩 속도, 레이아웃 이동, 사용자 경험 등 여러 측면에서 중요합니다.
FOUT vs FOIT
FOUT (Flash of Unstyled Text)
FOUT(Flash of Unstyled Text)는 폰트 로딩 중 발생하는 시각적 현상으로, 폰트의 다운로드 여부와 상관없이 먼저 텍스트를 보여준 후 폰트가 다운로드되면 그때 폰트를 적용하는 방식입니다. 이 방식의 특징은 다음과 같습니다.
장점
사용자가 즉시 내용을 읽을 수 있습니다.
단점
폰트 교체 시
레이아웃 이동(CLS)이 발생할 수 있습니다.
FOIT (Flash of Invisible Text)
FOIT(Flash of Invisible Text)는 폰트 로딩 중 발생하는 시각적 현상으로, 폰트가 완전히 다운로드되기 전까지 텍스트 자체를 숨기는 방식입니다. 이 방식의 특징은 다음과 같습니다.
장점
웹 폰트 적용 시 처음부터 정확한 디자인을 유지하기 때문에 레이아웃 이동이 없습니다.
단점
텍스트가 보이지 않아 사용자에게 페이지가 느리게 느껴집니다.
font-display
CSS에서 @font-face의 font-display 속성을 활용하면 폰트가 적용되는 시점을 제어할 수 있습니다. 현대 웹 개발에서는 FOUT 방식인 font-display: swap이 권장됩니다. font-display 속성에서 설정할 수 있는 값들을 정리하면 다음과 같습니다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
@font-face {
/* auto: 브라우저 기본 동작 */
font-display: auto;
/* block: FOIT (timeout = 3s) */
font-display: block;
/* swap: FOUT */
font-display: swap;
/* fallback: FOIT (timeout = 0.1s) */
font-display: fallback;
/* optional: FOIT (timeout = 0.1s) */
font-display: optional;
}
| font-display | 설명 |
|---|---|
| auto | 브라우저 기본 동작 / 초깃값으로 브라우저의 정책에 따라 로딩 전략을 결정합니다. |
| block | FOIT (timeout = 3s) / 폰트가 다운로드되기를 기다리다가 3초가 지나도 폰트가 다운로드되지 않으면 기본 폰트로 텍스트를 보여줍니다. 이후 폰트가 다운로드되면 해당 폰트로 교체합니다. |
| swap | FOUT / 폰트가 다운로드되기 전까지 기본 폰트로 텍스트를 보여주다가 폰트가 다운로드되면 해당 폰트로 교체합니다. |
| fallback | FOIT (timeout = 0.1s) / 폰트가 다운로드되기를 기다리다가 0.1초가 지나도 폰트가 다운로드되지 않으면 기본 폰트로 텍스트를 보여줍니다. 이후 3초가 지나도 폰트가 다운로드되지 않으면 기본 폰트로 유지합니다. 3초가 지난 후 다운로드를 완료한 경우 폰트를 적용하지 않고 캐시해 둡니다. |
| optional | FOIT (timeout = 0.1s) / 폰트가 다운로드되기를 기다리다가 0.1초가 지나도 폰트가 다운로드되지 않으면 기본 폰트로 텍스트를 보여줍니다. 이후 사용자의 네트워크 상태에 따라 기본 폰트로 유지할지, 아니면 다운로드한 폰트를 적용할지 브라우저가 결정합니다. |
TTF/OTF vs WOFF vs WOFF2
웹 브라우저에서 사용하는 폰트 포맷들의 특징을 표로 정리하면 다음과 같습니다.
| TTF/OTF | WOFF | WOFF2 | |
|---|---|---|---|
| 의미 | TrueType Font / OpenType Font | Web Open Font Format | Web Open Font Format 2 |
| 특징 | 대부분의 운영체제와 브라우저에서 지원합니다. | OTF/TTF보다 더 높은 압축률을 제공합니다. | WOFF보다 더 높은 압축률을 제공합니다. |
| IE 지원 | 지원 | 지원 | 미지원 |
| 현대 브라우저 | 지원 | 지원 | 지원 |
| 파일 확장자 | .ttf / .otf | .woff | .woff2 |
위의 사진을 보면 알 수 있듯이, WOFF2 포맷은 다른 폰트 포맷과 대비에 용량이 훨씬 작습니다. 따라서 WOFF2를 우선으로 적용하고 만약 브라우저가 WOFF2를 지원하지 않는 경우 WOFF를, WOFF도 지원하지 않으면 TTF 또는 OTF를 적용하도록 구현하는 것이 최선입니다.
1
2
3
4
5
6
7
@font-face {
font-family: "Pretendard";
src: url("@/shared/assets/fonts/Pretendard-Regular.woff2") format("woff2"), url("@/shared/assets/fonts/Pretendard-Regular.woff")
format("woff"),
url("@/shared/assets/fonts/Pretendard-Regular.ttf") format("truetype");
font-display: swap;
}
Info.
다음 링크에서 폰트 포맷을 변환할 수 있습니다.
Online @font-face generator — Transfonter
서브셋 폰트 (Subset Font)
서브셋 폰트(Subset Font)는 원본 폰트 파일에서 실제로 사용하는 글자만 남기고 나머지를 제거한 폰트를 의미합니다. 서브셋 폰트를 사용하면 원본 폰트 파일을 사용하는 것보다 파일 크기가 감소하기 때문에 웹 페이지 로딩 속도를 개선할 수 있으며 대역폭을 절감할 수 있습니다.
예를 들어 다음과 같이 파일 용량이 766 KB인 Pretendard-Regular.woff2 파일이 있는 경우,
이 폰트 파일을 서브셋팅(Subsetting)하여 서브셋 폰트를 생성하면 파일 크기를 크게 줄일 수 있습니다. 서브셋 폰트를 만드는 방법은 여러 가지가 있지만, 이 글에서는 Transfonter 서비스를 이용하여 생성하겠습니다.
Online @font-face generator — Transfonter
변환하고자 하는 원본 폰트 파일을 선택한 후, Characters에 폰트를 적용할 문자(Ex. “서브셋 폰트”)를 넣은 후 Convert 버튼을 누르면 서브셋 폰트를 생성할 수 있습니다.
실제로 서브셋 폰트를 사용하였을 때 파일 용량이 크게 줄어든 것을 확인할 수 있습니다.
