FOIT / FOUT

웹 글꼴에서 깜빡임 문제가 발생하면 안됩니다.

---

 

 

What ?

FOIT / FOUT

웹사이트에서 폰트 로딩 문제로 발생하는 시각적 깜빡임 현상으로, UX에 영향을 줍니다.

 

---

 

FOIT

페이지는 폰트가 로드되기 전에는 텍스트를 숨기고, 폰트 로드가 완료된 후에 텍스트가 표시되어야 합니다.

폰트 로딩이 지연되면 웹 폰트가 로드될 때까지 사용자는 빈 페이지를 보게 되고 갑자기 텍스트가 나타나 UX에 부정적입니다.

이처럼 FOIT는 웹 폰트가 로드될 때까지 텍스트가 아예 보이지 않는 현상입니다.

 

 

FOUT

먼저 기본 폰트를 보여주고, 폰트 로드 후 웹 폰트로 변환 시 텍스트에 깜빡임이 발생해 사용자에게 불안정함을 제공합니다. 

이처럼 FOUT는 웹 폰트가 로드되기 전까지 브라우저의 기본 폰트로 표시하다 로드 후 텍스트 스타일이 변경되는 현상입니다.

 

---

 

 

FOIT  ||  FOUT  비교

구분	FOIT	FOUT
문제현상	텍스트가 로드 완료전까지 보이지 않음	기본 폰트가 먼저 보이고 스타일이 바뀜
원인	폰트가 로드될 때까지 텍스트를 숨김	기본 폰트로 표시 후 폰트 로드 후 웹 폰트로 교체
영향	사용자에게 빈 화면을 보여줌	텍스트 깜빡임이 발생함

 

---

 

💡 Solution

• font-display: swap 사용: 기본 폰트를 먼저 보여주고, 폰트가 로드되면 대체. ( FOUT )
  
  
• Next.js의  next/font* 처럼 서버 사이드 폰트 로딩 활용.
  
  

---