[2024.05.02] 웹 폰트 최적화(가볍게 정리만)
팀 프로젝트 + 팀 프로젝트에 적용할 개인 공부 + 스터디 모집 마감 일정을 한 번에 처리하려니 진짜 하루가 부족했다..! 내 시간 어디로 사라진 거지?
※ 웹 폰트 적용하기
매번 구글 폰트나 다른 cdn을 사용해서 웹폰트를 다운로드하는 형태로 웹 폰트를 사용했는데, 이번 프로젝트에서는 local에서 서버로 웹 폰트를 올리는 @font-face를 사용해 웹폰트 최적화를 사용하였다. 한 번 최적화에 대해 고민하게 되니, 더욱더 많은 자료를 찾아보게 되었고 가장 도움이 되었던 건 'FE.CONF 2018' 컨퍼런스에서 발표된 웹폰트 최적화 발표 자료였다. 오늘은 자세히 포스팅할 시간이 없어 해당 내용 정리한 것만 기재해 두고, 프로젝트 마감 후 제대로 올려봐야겠다.
아래 내용은 'FE CONF 2018 웹폰트 사용과 최적화' 세션을 듣고 정리한 내용입니다.
I . 용량 줄이기
1. 용량을 줄이기 위한 여러 방법들
1.1 woff2 포맷
1-2. subset 폰트(한글 전체 11722자 -> 2350자, ks x 1001 한국 산업 규격에 맞춰 추출함)
1-3. unicode-range 속성
2. FOIT & FOUT
2.1 FOIT
- 모던 브라우저(크롬, 사파리, 파이어폭스)에서 사용
- 웹폰트가 다운로드될 때까지 텍스트를 렌더링 하지 않다가, 로딩이 된 이후에 텍스트를 보여줌
- 웹폰트가 로딩이 되지 않을 때, 해당 텍스트 "rendering block"(화면에 나타나지 않게 막음)
- 기다리는 제한시간 3s가 있다. 3초 지나면 fallback 시키고, 웹폰트 다운로드가 이루어지면 해당 웹폰트로 swap시킴.
2.2 FOUT
- 웹폰트가 다운로드될 때까지 fallback 폰트를 보여주고, 로드가 되면 웹 폰트로 swap 하는 방식
- 웹폰트와 관계없이 텍스트는 항상 보임
- 글꼴의 자간, 높이에 따라 '레이아웃'이 변경될 수 있으며, 이 때문에 레이아웃이 틀어져서 이상해 보일 수 있다.
=> UX관점으로는 차라리 폰트가 보이는 FOUT가 나음(안 보이면 어떤 문제가 초래될지 모르기에)
II. 텍스트가 항상 보이게
1. FontLoader 라이브러리
- FontFaceObserver, Google Webfont Loader, npm/webfonts-loader 등 다양함
※ FontFaceObserver 소개: 용량이 적어 가볍고, 빠르게 동작하는 장점
- 웹 폰트 파일의 로딩상태를 추적함. 그에 따라 맞춰서 사용하는 형태
→ 의도적 FOUT 만들기: 웹 폰트 없는 상태를 정의하고, 웹 폰트 적용 된 CSS도 만들어 둠. JS에서 웹 폰트를 추적하는 객체를 만들고, 웹 폰트 로드가 끝났을 때, 폰트를 적용하려는 객체에 className을 설정해서 css가 적용되도록 하는 방식.
2. css의 font-display 속성을 이용해 텍스트가 항상 보이게
- font-display 속성: auto/block/swap/fallback/optional 속성을 가짐
- auto: 브라우저별 기본값
- block: FOIT과 동일하게 동작
- swap: FOUT와 동일하게 동작
- fallback: 아주 짧은 시간(100ms) 동안 rendering block(안 보이게)을 하고, fallback(대체 폰트)을 렌더링함. swap기간(2초) 내 웹폰트 로드 완료 시 웹폰트를 렌더링 하고, 그렇지 않으면 계속 fallback 폰트로 유지함.
장점: 웹폰트의 다운로드는 일어나기 때문에 캐싱은 되어있는 상태, 사용자가 새로고침 등의 방법으로 페이지 리렌더링이 일어나면 웹폰트로 수정되어 보임
- optional: 아주 짧은 시간(100ms) 동안 block 후, 대체 폰트 렌더링. 그 짧은 시간 속에 네트워크 상태를 파악하여, 네트워크가 충분히 빠르면 웹폰트를 다운로드하여 렌더링 하고, 그렇지 못하면 웹폰트를 다운은 받아놓은 상태에서 대체 폰트를 사용함.
장점: 읽는 도중 번쩍이며 폰트가 바뀌지 않으니, 사용성 측면에서 좋음
=> 때문에 항상 텍스트가 보이게 하려면: swap, fallback, optional 중 하나를 사용하면 된다(fallback, optional의 경우 0.1s동안 block 되지만 사실상 무시해도 될 정도의 시간)
III. 폰트 간 차이 줄이기
- 폰트마다 스타일(자간, 높이 등)이 다름
- 'Font style matcher': 웹폰트와 fallback 폰트의 스타일 차이를 최대한 줄일 수 있게 함.
- 이걸 이용해서 로드 전 css에 fallback 폰트 스타일을 넣고, 로드 후 css에 웹폰트 스타일을 넣으면 글자가 깨지는 것을 방지할 수 있음.
IV. 먼저 다운로드하기: preload 옵션
- <link>에 preload 옵션을 줘 다른 리소스보다 빨리 받아 올 수 있음
=> preload를 쓰면서 as/crossorigin 속성을 사용하지 않으면 두 번 css를 다운로드하음으로 꼭 쓰기. 단, preload가 많아지면 첫 번째 painting까지 시간이 오래 걸리기에 신중하게 사용하기.
※ 출처
FE.CONF 2018 웹폰트 최적화 발표영상: https://www.youtube.com/watch?v=4YCBBoSg2fk
네이버 기술 블로그: https://d2.naver.com/helloworld/4969726
https://wit.nts-corp.com/2017/02/13/4258