React 웹 폰트 최적화하기(1)

React 웹 폰트 최적화

 

다양한 브라우저, 다양한 환경, 많은 사용자가 동일하고 일관된 폰트를 볼 수 있도록 웹 폰트를 적용할 수 있다. 이러한 웹 폰트를 사용하면 다양한 환경에서 사용자들이 동일한 사용자 경험을 가질 수 있다는 좋은 장점이 있지만 잘못 사용하게 되면 사용자 경험을 해칠 수 있기 때문에 최적화하는 과정이 필요하고 그러한 방법을 알아보려 한다.

 

웹 폰트의 종류

---

web font 종류

 

브라우저에서 사용되는 웹 폰트의 종류는 다양하게 있다. 또한 브라우저 별로 지원되는 폰트의 종류도 여러가지가 있으므로 사용자 경험을 고려하여 사용하여야 한다.

 

TTF/OTF

TrueTypeFont는 Mac OS, Windows 운영체제에서 가장 일반적으로 사용되는 폰트 형식이지만 레거시 한 기술로 점차 다른 폰트 형식으로 교체되어 가고 있다.

 

OpenTypeFont는 TTF를 기반으로 제작되었으며, 오늘날의 최신 윈도우는 TTF에서 OTF로 대체되어가는 중이다. 

 

WOFF/WOFF2

Web Open Font Format은 현재 W3C 권장 폰트 형식으로 TTF/OTF를 압축해서 사용하는 방식이다. TTF/OTF에 비해 상대적으로 용량이 가볍다는 특징이 있고, 메타데이터를 포함하기 있기 때문에 특정 문제를 일부 해결할 수 있다. 

 

Web Open Font Format2.0 은 1.0보다 더 나은 압축을 제공하는 폰트 형식이다. 대부분의 브라우저에서 지원되고 있다.

 

EOT

Embedded Open Type은 IE 전용 폰트로 사용되었으나 IE의 서비스 종료로 거의 사용되지 않고 있는 폰트이다.

 

 

웹 폰트 용량 비교

---

같은 웹 폰트 용량 비교

 

같은 웹 폰트의 다른 형식들의 용량 비교이다. 용량을 살펴보면 WOFF2, WOFF가 확실히 용량이 작은 걸 확인할 수 있다. 실제 적용하고 개발자도구 네트워크 탭에서 살펴봐도 Size나 Time 측에서도 훨씬 빠른 것을 확인할 수 있다. 그럼 용량이 가장 작은 WOFF2만을 사용해야 하는 것이냐고 할 수 있지만 사용자들의 환경과 브라우저에서 지원하는 폰트 형식이 다르기 때문에 대부분을 지원할 수 있어야 한다.

 

웹 폰트를 최적화하는 이유

---

웹 폰트의 용량을 비교해서 살펴보았다. 그렇다면 왜 웹 폰트를 최적화해야하는 것인가를 살펴보면 웹 폰트가 동작하는 방식에 대해 알 필요가 있다. 브라우저의 동작방식은 아래의 이미지로 이해할 수 있다.

 

브라우저 동작 방식

 

1. 브라우저가 HTML을 요청하고 받아 DOM을 구성

2. 브라우저가 CSS를 요청하고 받아 CSSOM을 구성

3. 렌더 트리를 형성, 레이아웃을 그리고 페인트

이러한 과정을 거치는데 위의 이미지의 T₂ 단계를 보면 폰트를 요청하고 응답받는 과정이 있다. 이때 브라우저는 폰트의 응답을 기다리지 않고 렌더링을 진행하는데 이 과정에서 사용자 경험을 해치는 상황이 발생한다. 이것이 FOIT(Flash Of Invisible Text), FOUT(Flash Of Unstyled Text)이다.

 

FOIT(Flash Of Invisible Text)

FOIT는 웹 페이지가 렌더링 되는 과정에서 웹 폰트가 보이지 않아 사용자가 폰트를 볼 수 없는 현상을 말한다. 웹 폰트가 보이지 않기 때문에 사용자 경험을 해칠 수 있고 개발 측에서 전달하려는 내용이 의도와는 다르게 사용자에게 전달될 수 있다는 문제가 발생한다.

 

FOUT(Flash Of Unstyled Text)

FOUT는 글자가 보이지만 기본 폰트로 적용되어 보이는 현상을 말한다. FOIT 현상의 대안이긴 하지만 적용한 폰트로 보이지 않고 추후에 적용된 웹 폰트로 변경되더라도 기본 폰트에서 웹 폰트로 변경되는 과정에서 사용자 경험을 해치는 문제가 발생할 수 있다.

FOIT, FOUT 현상 출처: https://www.malthemilthers.com/font-loading-strategy-acceptable-flash-of-invisible-text/

 

오늘날의 브라우저는 폰트가 완전히 다운로드되어 적용될 때까지 텍스트가 보이지 않도록 숨긴다. 즉 FOIT 와 같은 현상이 발생하는 것이다. 그러나 이미지나 영상과 같은 콘텐츠보다 텍스트가 중요한 페이지를 사용자가 본다고 가정한다면 FOIT 현상보다는 텍스트 내용을 볼 수 있는 FOUT 현상이 일어나는 것이 더 합리적이라고 볼 수 있다. 이러한 현상을 조절할 수 있도록 CSS에는 font-display 라는 속성이 존재한다.

 

React 웹 폰트 최적화하기(2)