웹폰트, 예쁘지만 느려질 수 있다
커스텀 웹폰트는 브랜드 아이덴티티에 큰 도움을 주지만, 파일이 많거나 용량이 크면 텍스트가 보이기까지 시간이 걸려 사용자가 체감하는 로딩 속도를 떨어뜨립니다. 이 도구는 폰트 파일 개수, 총 용량, font-display 전략을 입력하면 예상 렌더링 지연 시간을 밀리초 단위로 추정해줍니다.
font-display 전략별 체감 지연 배율
| 전략 | 배율 |
|---|---|
| block | 1.0배 (텍스트 숨김, 체감 지연 최대) |
| auto | 0.7배 |
| fallback | 0.5배 |
| swap | 0.3배 (대체 폰트 먼저 표시) |
| optional | 0.15배 (체감 지연 최소) |
지연을 줄이는 실전 팁
폰트 파일 수를 줄이려면 사용하지 않는 문자셋을 제거한 서브셋 폰트나 variable font를 활용하세요. font-display: swap을 적용하면 대체 폰트로 먼저 텍스트를 보여줘 체감 로딩 속도를 크게 개선할 수 있습니다.
자주 묻는 질문
font-display 전략이 지연 시간에 왜 영향을 주나요?
block은 폰트가 로드될 때까지 텍스트를 숨겨 체감 지연이 크고, swap이나 optional은 대체 폰트를 먼저 보여줘 체감 지연이 줄어듭니다.
폰트 파일 수를 줄이면 얼마나 도움이 되나요?
파일마다 연결·요청 오버헤드가 있어 파일 수를 줄이면(예: 서브셋, variable font 활용) 지연이 크게 줄어듭니다.
이 값은 실제 로딩 속도와 똑같나요?
아닙니다. 네트워크 환경, 캐시 여부, 폰트 서버 위치에 따라 실제 값은 달라지므로 참고용 추정치로 활용하세요.