요약
폰트 크기를 줄임으로써 로딩 성능을 개선해봅니다. 수이의 테코톡 영상도 있으니 많관부~

목차

• ⛳️ 로딩 성능 개선 - Part 1. 요청 크기 줄이기
  • 1-3. 웹 폰트 파일 용량 줄이기
    • ✅ 폰트 파일 용량 줄이기
      • ✔️ WOFF 2.0 형식 폰트 사용
      • ✔️ 서브셋(Subset) 폰트 사용
    • ✅ 텍스트가 항상 보이게 하기

⛳️ 로딩 성능 개선 - Part 1. 요청 크기 줄이기

1-3. 웹 폰트 파일 용량 줄이기

이 주제에 대해서는 수이가 발표한 테코톡 영상을 참고하면 더욱 쉽게 이해할 수 있다.
수이영상

웹 폰트 최적화를 위해 시도해볼 만한 주요 방법들을 정리했다.

✅ 폰트 파일 용량 줄이기

웹 폰트는 네트워크를 통해 다운로드하는 리소스이다. 따라서 파일 용량이 크면 폰트가 화면에 적용되기까지 시간이 오래 걸린다.
파일 용량을 줄일 수 있는 효과적인 방법은 다음과 같다.

✔️ WOFF 2.0 형식 폰트 사용

눈누나 배민 폰트를 다운받아 보면 TTF나 OTF 파일 형식을 볼 수 있다.
우리가 이렇게 흔히 사용하는 TTF나 OTF는 원본 폰트 형식이며,
주로 디자이너나 PC 시스템 폰트용으로 쓰인다.

이를 웹용으로 압축한 포맷이 WOFF와 WOFF2이다.
이 중에서 WOFF2가 가장 최신 압축 포맷으로, WOFF보다 용량이 작다.

WOFF2형식은 IE(Internet Explorer)를 제외한 대부분의 최신 브라우저에서 지원된다.

✔️ 서브셋(Subset) 폰트 사용

서브셋 폰트는 폰트 파일에서 불필요한 글자를 제거하고, 사용할 글자만 남겨둔 폰트를 말한다.

예를들어, 아래 이미지의 노란색으로 표시된 글자처럼 실생활에서 거의 쓰이지 않는 글자들을 제거하는 방식이다.
자주 사용하는 글자만 포함하므로 폰트 용량을 획기적으로 줄일 수 있다.

🔝 목차로 돌아가기

✅ 텍스트가 항상 보이게 하기

브라우저는 웹 폰트가 다운로드되기 전까지 해당 텍스트의 렌더링을 차단한다.
아래 이미지처럼 “Not”이라는 글자가 보이지 않는 현상이 바로 이 때문이다.

이때 브라우저의 렌더링 방식은 크게 FOUT와 FOIN으로 나뉜다.

• FOUT (Flash of Unstyled Text)

  • 웹 폰트가 로딩되기 전, 우선 폴백 폰트(기본 폰트)로 텍스트를 보여주고, 로딩이 완료되면 웹 폰트로 ‘교체’하는 방식이다.
  • 

• FOIN (Flash of Invisible Text)

  • 웹 폰트가 로딩될 때까지 텍스트를 아예 보여주지 않다가(투명 처리), 로딩이 완료되면 텍스트를 보여주는 방식이다.
  • 

사용자가 콘텐츠를 바로 볼 수 있게 하려면, FOUT 방식처럼 일단 기본 폰트를 먼저 보여주는 것이 좋다.
CSS에서 font-display: swap; 속성을 적용하면,
브라우저가 FOIN 대신 FOUT 방식으로 폰트를 처리하도록 간단히 설정할 수 있다.

🔝 목차로 돌아가기

참고 자료
> Naver D2 - 웹 폰트 사용과 최적화의 최근 동향