- 웹폰트는 모든 디바이스에서 일관된 디자인을 제공하고 브랜드 아이덴티티를 강화하지만, 파일 용량과 렌더링 방식에 따라 성능 저하를 유발할 수 있습니다. 🌐
- 브라우저는 CSSOM과 DOM을 결합하여 렌더 트리를 생성한 후 폰트 파일을 요청하며,
font-display 속성에 따라 FOUT(깜빡임) 또는 FOIT(지연) 현상이 발생합니다. 🔄
- 웹폰트 최적화는 사용자 경험 개선, 검색 엔진 최적화(SEO), 네트워크 사용량 절감을 위해 필수적이며, 실제 사용자 피드백을 통해 필요성이 강조됩니다. 📈
- 폰트 파일 용량을 줄이는 경량화 방법으로는 사용 글자만 포함하는 Subset 폰트 생성, 필요한 Subset만 요청하는 Dynamic Subset, 그리고 웹 최적화 포맷(WOFF/WOFF2) 변환이 있습니다. ✂️
- Dynamic Subset은 불필요한 폰트 다운로드를 최소화하지만, 텍스트가 많은 페이지에서는 과도한 네트워크 요청을 유발할 수 있습니다. 🚀
- 폰트 로딩 우선순위를 지정하는 방법으로 Preload(즉시 다운로드)와 Fetch Priority(상대적 우선순위 힌트)가 있으며, Preload는 다른 중요 리소스의 로딩을 지연시킬 수 있어 신중해야 합니다. 🚦
- PICKEAT은 특정 폰트(꾸불림체)의 FOUT 현상 개선을 위해 빌드 시점에 사용 텍스트를 추출하여 초소형 Subset 폰트를 생성하고 이를 Preload하는 전략을 적용했습니다. 🛠️
- 이 전략으로 첫 화면의 FOUT 현상을 제거하고 폰트 파일 용량 및 요청 시간을 크게 줄였으며, 사용자 피드백을 반영한 개선이라는 점에서 의미를 찾았습니다. ✅
- 최적화는 단순히 지표 개선을 넘어 서비스의 특성과 사용자 피드백을 종합적으로 고려하여 가장 적합한 방법을 찾아나가는 것이 중요합니다. 💖
데브허브 | DEVHUB | [10분 테코톡] 수이의 웹폰트 최적화