Browser - FOUT & FOIT
◆FOUT와 FOIT란?
웹폰트를 사용하는 사이트에 접속했을 때
- 처음에는 기본 폰트가 보였다가 잠시 후 웹폰트로 변경되거나
- 처음에는 아무 글자도 보이지 않다가 웹폰트가 로드된 후 한 번에 나타나는
현상을 경험한 적이 있을 것이다.
이러한 현상은 각각 FOUT와 FOIT라고 한다.
◆FOUT (Flash of Unstyled Text)
웹폰트가 로드되기 전에는 시스템 기본 폰트를 먼저 보여주고, 웹폰트가 다운로드되면 해당 폰트로 교체하는 방식이다.
동작 과정
페이지 로드
│
▼
기본 시스템 폰트 출력
│
▼
웹폰트 다운로드
│
▼
웹폰트로 교체
사용자가 보는 화면
처음에는 시스템 기본 폰트가 표시된다.
Hello World
(기본 시스템 폰트)
↓
웹폰트 다운로드가 완료되면
Hello World
(Noto Sans)
처럼 글꼴이 변경된다.
장점
- 텍스트를 바로 읽을 수 있다.
- 체감 로딩 속도가 빠르다.
- 사용자는 빈 화면을 보지 않는다.
단점
- 폰트가 갑자기 변경되는 것이 보인다.
- 글꼴 폭이 달라질 경우 레이아웃이 살짝 움직일 수 있다.
◆FOIT (Flash of Invisible Text)
웹폰트가 모두 다운로드될 때까지 텍스트를 숨겼다가, 다운로드가 완료되면 웹폰트와 함께 표시하는 방식이다.
동작 과정
페이지 로드
│
▼
텍스트 숨김
│
▼
웹폰트 다운로드
│
▼
웹폰트와 함께 출력
사용자가 보는 화면
처음에는
(텍스트가 보이지 않음)
↓
웹폰트 다운로드가 완료되면
Hello World
(Noto Sans)
이 표시된다.
장점
- 처음부터 원하는 웹폰트로 출력된다.
- 폰트가 바뀌는 현상이 발생하지 않는다.
- 디자인이 일관되게 유지된다.
단점
- 사용자는 잠시 동안 아무 글자도 볼 수 없다.
- 네트워크가 느리면 빈 화면이 길어질 수 있다.
- 사용자 경험(UX)이 떨어질 수 있다.
◆FOUT와 FOIT 비교
| 항목 | FOUT | FOIT |
|---|---|---|
| 처음 화면 | 기본 폰트 표시 | 텍스트 숨김 |
| 웹폰트 로드 후 | 웹폰트로 변경 | 웹폰트와 함께 표시 |
| 사용자는 바로 읽을 수 있는가? | ✅ 가능 | ❌ 불가능 |
| 폰트 변경이 보이는가? | ✅ 보임 | ❌ 보이지 않음 |
| 체감 로딩 속도 | 빠름 | 느림 |
◆CSS에서 어떻게 결정될까?
이 동작은 @font-face의 font-display 속성으로 제어할 수 있다.
@font-face {
font-family: "Noto Sans";
src: url("NotoSans-Regular.woff2") format("woff2");
font-display: swap;
}
대표적인 옵션은 다음과 같다.
| 값 | 동작 |
|---|---|
swap |
기본 폰트를 먼저 보여준 뒤 웹폰트로 교체 (FOUT) |
block |
웹폰트가 로드될 때까지 텍스트를 숨김 (FOIT) |
fallback |
짧은 시간만 기다린 뒤 기본 폰트 사용 |
optional |
네트워크가 느리면 웹폰트를 사용하지 않을 수도 있음 |
auto |
브라우저 기본 정책 사용 |
브라우저 정책(font-display)은 웹폰트를 언제 화면에 표시할지 결정하는 규칙이다.
시스템 폰트는 웹폰트를 사용할 수 없을 때 대신 화면에 표시되는 운영체제의 기본 폰트이다.
◆브라우저는 왜 FOUT를 많이 사용할까?
최근 Chrome, Edge, Firefox와 같은 브라우저에서는 사용자 경험(UX)을 위해 FOUT 방식을 선호하는 경우가 많다.
그 이유는 사용자가 텍스트를 즉시 읽을 수 있기 때문이다.
반면 FOIT는 웹폰트가 다운로드될 때까지 아무 글자도 보이지 않기 때문에 사용자 입장에서 답답하게 느껴질 수 있다.
◆정리
웹폰트를 사용할 때 나타나는 대표적인 현상은 두 가지이다.
FOUT (Flash of Unstyled Text)
기본 폰트
│
▼
웹폰트 다운로드
│
▼
웹폰트로 변경
- 텍스트를 즉시 읽을 수 있다.
- 폰트가 변경되는 모습이 보인다.
FOIT (Flash of Invisible Text)
텍스트 숨김
│
▼
웹폰트 다운로드
│
▼
웹폰트와 함께 표시
- 폰트 변경은 보이지 않는다.
- 다운로드가 끝날 때까지 텍스트를 볼 수 없다.
결국 두 방식의 차이는 “웹폰트가 준비되기 전 사용자에게 무엇을 보여줄 것인가?”에 있다.
- FOUT는 기본 폰트를 먼저 보여준다.
- FOIT는 아무것도 보여주지 않는다.
최근에는 사용자 경험을 고려하여 FOUT(font-display: swap) 방식이 가장 많이 사용되고 있다.
댓글남기기