웹 폰트 최적화하기

회사 프로젝트를 하면서 웹 폰트가 바뀌는 부분이 사용자에게 노출이 되어서

수정해야지 마음만 먹다가 이번주에 시간이 될 것 같아 드디어 수정을 했습니다.

수정을 하면서 웹 폰트 최적화에 대해 알게 된점을 블로그에 공유하면 더 좋을 것 같아 글을 써봅니다.

 

본격적인 설명에 앞서

1. 웹 폰트란 ??

요즘 핫한 chatGPT 한번 물어봤습니다 ㅋㅋ

웹폰트는 웹 사이트에서 사용되는 폰트를 서버에서 다운로드 받아 사용하는 기술입니다. 이를 통해 사용자가 해당 폰트를 설치하지 않아도 웹 사이트에서 폰트를 일관되게 보여줄 수 있습니다.

웹폰트를 사용하면 사용자가 해당 폰트를 설치하지 않아도 웹 사이트에서 폰트를 일관되게 보여줄 수 있습니다. 이는 사용자가 더 나은 사용자 경험을 느끼도록 도와주며, 웹 디자인에서도 중요한 역할을 합니다.

Google Fonts는 머신러닝에 기반을 둔 최적화 기술을 사용하여, 한글 폰트를 동적으로 분할 다운로드합니다. 이를 통해 웹상의 방대한 한국어 문서를 분석하고, 사용되는 글자의 패턴을 발견하여 폰트를 최적화합니다.[1]

웹폰트를 사용하기 위해서는 CSS를 이용하여 웹폰트를 선언하고, 폰트 파일을 서버에 업로드해야 합니다. 이를 통해 웹 사이트에서 해당 폰트를 사용할 수 있습니다. 폰트를 사용하는 방법과 관련하여는 wit블로그에서 기본적인 사용법부터 fouc 해결까지 웹폰트의 모든 것을 다루고 있습니다.[2]

웹폰트를 적용하면서 알게 된 것과 팁을 공유하고 있는 블로그도 있습니다. 이를 통해 폰트를 적용할 때 유의할 점 등을 참고할 수 있습니다.[3]

 

저는 웹 폰트에 대해서만 물어봤는데 더욱 자세하게 알려주니 좋으면서 무섭기도 하네요ㅋㅋㅋ

 

2. FOIT, FOUT 

우리가 사이트에 진입 시 글자가 늦게 뜨거나 폰트가 나중에 적용되는 현상을 말한다.

• FOIT(Flash of invisible Text) : 브라우저가 폰트를 다운로드하기 전까지 글자가 보이지 않는 현상
• FOUT(Flash of Unstyled Text) : 브라우저가 폰트를 다운로드하기 전까지 폰트가 적용되지 않는 현상
  • 저의 문제상황은 FOUT였습니다.

FOIT와 FOUT가 일어나는 이유를 알기 위해선, 브라우저 동작을 알아야합니다.

• 아래 그림은 웹 폰트를 다운로드해 웹 페이지를 렌더링하는 과정입니다.

 

T2에서 CSSOM(CSS Object Model)를 생성하는 과정 중에 외부 웹 폰트 링크로 정의된 부분을 만나 해당 폰트 파일을 다운을 시작합니다. 이다음에 T3단계에서 다운로드가 완료되지 않으면 브라우저에 글자가 제대로 렌더링이 되지 않을 수도 있습니다.

그래서 이때 제대로 렌더링이 되지 않아서 발생하는게 FOIT와 FOUT입니다.

그래서 해결을 위해서는 최대한  빨리 폰트를 가져올 수 있어야 합니다.

 

해결책 1) 웹폰트 확장자로 해결

 웹폰트에도 확장자가 있다는 걸 알고계셨나요 ??

부끄럽지만 저도 이번에 찾아보면서 알게되었습니다ㅠㅠ

대표적으로 4가지 종류가 있습니다.

• EOT: IE 8이하일 경우
• TTF : 구형 안드로이드 버전(4.4)에서 필요
• WOFF : 대부분 모던 브라우저에서 지원
• WOFF2: WOFF보다 압축률이 30% 정도 더 좋습니다.

출처 : https://wit.nts-corp.com/2017/02/13/4258

다행이도 이제 익스플로어은 지원이 끝나서 EOT의 경우는 사용을 안할 것 같네요ㅋㅋ 

저는 그래서 압축률이 제일 좋은 woff2와 대부분의 브라우저에서 동작하는 woff만 남겼습니다.

 

해결책 2) 서브셋 폰트

서브셋 폰트라 폰트파일에서 불필요한 글자를 제거한 폰트 파일이다.

영문의 경우 알파벳이 얼마 없어 용량이 크지 않지만 한글의 경우 자음과 모음을 조합하면 만개가 넘어서 큰 용량을 차지한다.

 

출처 https://www.google.com/url?sa=i&url=https%3A%2F%2Fwww.euler.kr%2Ftrl%2F2019%2F06%2F29%2Ffont-subsetting%2F&psig=AOvVaw2UlZvE5VzS-6s9DktUYU7R&ust=1678115122733000&source=images&cd=vfe&ved=0CBAQjRxqFwoTCPiHtpGIxf0CFQAAAAAdAAAAABAD

서브셋을 할 수 있는 사이트와 라이브러리를 같이 첨부 드립니다.

 

사이트

サブセットフォントメーカー

파이썬 라이브러리

 

GitHub - fonttools/fonttools: A library to manipulate font files from Python.

 

해결책 3) font-display 활용

3번째 해결책은 최종적인 해결책은 아니지만 그래도 임시방편으로 해결하기 좋다는 생각이 들어 공유 드립니다.

그리고 이번에 제가 폰트 최적화에 대해 공부하면서 알게된 사실이기도 합니다.

 

종류 

• auto : 브라우저 기본동작에 의해 결정됩니다.
• block : 폰트가 로드될 때까지 폰트를 사용하려는 요소를 숨깁니다.
• swap : 폰트가 로드되기전에 폰트를 사용하려는 요소는  보이는 대체 폰트로 렌더링 됩니다.
• fallback : swap과 비슷하나 100ms동안 텍스트가 보이지 않고, 장점이 있다면 다운로드된 폰트가 캐시에 저장되기 때문에 추후에 사용자가 재방문시 웹폰트가 바로 적용됩니다.
• optional : 100ms동안 텍스트가 보이지 않고 그 후 다운로드 된 폰트로 전환한다. 그리고 웹폰트를 다운로드는 하지만 브라우저가 네트워크 상태를 파악해 적용 여부를 결정합니다.

사실 오늘 나열한 방법이외에도 폰트를 최적화하는 방법은 더 있습니다.

하지만 제가 찾으면서 적용한 사례만 나열하다보니 다소 내용이 부족한 점은 양해 부탁드립니다.

그리고 너무 많은 정보가 있어 정리하는데 꽤 시간이 걸릴 것 같아서 계속 생각만하다 글을 못 남길 것 같아서 최대한 간결하게 작성했습니다.

 

다음에는 또 어떤 글을 쓰게 될 지 모르겠지만, 꼭 다시 쓰러 오겠습니다.

 

참고 사이트 

https://d2.naver.com/helloworld/4969726

https://blog.banksalad.com/tech/font-preload-on-safari/

https://whales.tistory.com/66