웹 폰트 최적화 (Feat. cdn.jsdelivr.net 에러 사태 - 20240502)

20240502

운영 서버 에서 woff2 웹 폰트 가 Error 가 나서 사이트의 폰트적용이 안되는 이슈가 나타났다

- 다른 압축 형식인 대체 폰트도 설정안해놔서 폰트 적용 안됨 (브라우저에 폰트가 캐싱이 되어 있어서 유저들은 몰랐을 수도..)

 

 

 

로컬에서 다운 받은 파일을 불러와서 해결 

 

해당 이슈 몇시간 후인 GeekNews 에 올라왔다.. 다들 원인 파악 못하고 있었던 듯..

https://news.hada.io/topic?id=14613

인증서 문제로 인한 cdn.jsdelivr.net 접속 불능 사태 | GeekNews

 

 

 

---

 

 

웹 폰트?

---

웹 페이지에서 사용디는 폰트를 온라인상에서 다운로드하여 쓸 수 있는 기술이다.

 

 

 

 

 

 

 

 

웹 폰트가 동작하는 방식

---

웹 폰트는 사용자 로컬 기기에 저장되어 있는 폰트 파일을 사용하는 것이 아닌, 온라인상에서 폰트 파일을 다운로드해서 사용하게 되는 것이다. 

즉, 웹 폰트를 사용하는 페이지에 접근 할 때 웹 서버 이외에 또 다른 서버로 웹 폰트를 요청하는 것인데, 이때 브라우저가 렌더링 하는 과정을 알아보자.

 

 

출처; https://web.dev/articles/optimize-webfont-loading?hl=ko

 

중요한 T2 단계부터 보면,

T2 단계 에서 응답받은 css 파일을 확인하여 렌더링에 필요한 폰트 파일을 요청한다. 그리고 브라우저는 렌더링이 가능해졌을 때 이를 진행하는데 이때 폰트를 아직 사용할 수 없는 경우 글자 픽셀은 렌더링 되지 않을 수 있다. 만약 대체 폰트가 설정되어 있다면 대체 폰트로 렌더링되고 기존 폰트가 준비되었을 경우 폰트를 변경하여 렌더링한다.

 

1. 브라우저가 HTML 을 요청, 응답 받은 HTML로  DOM 구성

2. 브라우저는 필요한 CSS 를 확인하여 요청, 응답 받은 CSS 로 CSSOM 구성

3. 브라우저는 렌더링에 필요한 폰트 요청

4. 브라우저는 폰트 요청의 응답을 기다리지 않고 렌더링 진행 [폰트 준비x -> 대체 폰트 렌더링 or 렌더링 x]

5. 브라우저는 폰트가 준비되면 비어있는 텍스트를  채우거나 대체 폰트를 기존 폰트로 다시 렌더링

 

 

 

 

 

 

 

 

 

 

 

 

웹 폰트 최적화 필요성

---

웹 폰트를 사용할 때 사용자 경험 측면에서 고려할 만한 2가지 상황이 있다.

FOIT(Flash Of Invisible Text) 와 FOUT(Flash Of Unstyled Text) 이다.

이 두가지 현상은 사용자 경험을 저하시키고, 개발자가 의도하지 않은 동작을 한다.

 

1️⃣ FOIT(Flash Of Invisible Text)

FOIT 는 웹 페이지가 렌더링 되었을 때, 필요한 폰트가 아직 준비 되지 않아 사용자에게 일시적으로 글자가 보이지 않는 현상이다.

이 같은 현상은 사용자가 페이지 내에 작성된 글을 읽을 수 없어 사용자 경험을 저하시키게 된다.

 

2️⃣ FOUT(Flash Of Unstyled Text)

FOUT 는 글자는 보이지만, 기본 시스템 폰트로 표시되는 현상이다.

이는 아예 글자가 보이지 않는 FOIT 의 문제점을 해결하고자, 글자라도 보이게 하는 대안적인 현상이다.

해당 현상은 글자가 잘 보이긴 하지만 설정된 폰트와 기본 시스템 폰트 모양이나 간격 등의 차이가 있다. 따라서 의도한 디자인으로 보이지 않거나, 기본 시스템 폰트에서 설정된 폰트로 다시 렌더링될 때 글자들이 꿈틀거리는 현상으로 사용자 경험을 저하시킨다.

 

 

 

 

 

 

 

 

 

 

 

 

개선된 폰트 형식으로 최적화 하기

---

웹 폰트 사용하는 것은 결국 추가적인 파일을 다운로드하는 것인데 이 다운로드 시간을 단축시키는 방법은 무엇일까?

다운로드할 대상 파일의 크기를 줄이면 되지 않을까? 이러한 형식들이 아래의 웹 폰트 형식이 있다.

 

 

1️⃣ WOFF (Web Open Font Format)

woff 는 모질라 파운데이션(Mozila Foundation) 과 오페라 소프트웨어(Opera Sftwar), 타입키트(TypeKit), 마이크로소프트(Microsoft) 가 협력해서 개발한 웹 폰트 형식이다.

이는 기존의 폰트 형식인 TTF, OTF 와 동일하게 동작하지만, 압축을 통해 더 작은 파일 크기를 가진다. 

2012년에 W3C(World Wide Web Consortium) 에 권장사항으로 등록되어 현재는 거의 모든 브라우저에서 이 형식을 지원한다.

 

 

사용방법

css 에서 font-face 로 폰트를 정의해서 사용하면 된다.

src에 format("WOFF") 로 어떤 형식을 사용할 것인지 명시

 

 

2️⃣ WOFF2 (Web Open Font Format2)

woff2 는 woff를 개선한 버전

동일하게 웹 폰트를 압축하고 최적화하기 위한 웹 폰트 형식이지만, WOFF2는 Brotli 압축 알고리즘을 사용하여 폰트 데이터를 압축한다. 이를 통해 WOFF 대비 약 30% ~ 50% 정도 더 작은 파일 크기를 가질 수 있다. 이는 WOFF 보다 우수한 성능을 가졌지만, WOFF 보다 비교적 낮은 호환성을 가지고 있어 WOFF 를 폴백(fallback) 폰트로 같이 사용하곤 한다.

 

 

사용방법

src 로 폰트 파일을 부러올 때 format("WOFF2")  명시

다만 WOFF2를 지원하지 않는 브라우저가 있을 수 있어, 폴백 폰트로 WOFF 형식을 같이 사용하곤 한다.

위와 같이 작성하면, WOFF2를 지원하지 않는 브라우저라도 자동으로 WOFF 폰트를 사용해 렌더링을 진행한다.