지연 시간 없이 웹폰트 서빙하기 - Feat. Safari & Edge functions

뱅크샐러드는 Pretendard 폰트를 전역 CSS에 적용하여 모든 서비스에서 사용 중이나, 폰트 로드 지연으로 인한 깜빡임(flicker) 현상을 해결하기 위해 최적화를 진행했다. woff2 포맷을 우선 로드하고 미사용 Glyph를 제거하는 Subset 기법을 적용해 원본 대비 70% 이상의 용량을 절감했다.

Critical Request Depth(CRD) 문제와 Safari 이슈

일반적으로 preload link를 사용해 CSS와 폰트를 병렬 다운로드하면 CRD 문제를 해결할 수 있다. 그러나 Safari는 W3C Recommendation을 의도적으로 따르지 않아 교차 도메인 폰트 요청 시 CORS를 적용하지 않으며, 이로 인해 preload한 요청을 재사용하지 않고 동일 폰트를 2회 다운로드하는 문제가 발생했다.

CloudFront Function을 통한 해결

이 문제를 해결하기 위해 **CloudFront Function(CFF)**을 도입하여 요청 헤더를 조작했다. CFF는 폰트 경로 요청 시 Origin 헤더가 없으면 Host 값을 기반으로 삽입하여 CORS 요청으로 변환한다. 또한 응답 단계에서는 Vary 헤더에서 'Origin'을 필터링하여 Safari가 캐시를 정상적으로 재사용하도록 개선했다. 이를 통해 Safari에서도 폰트 로드 지연 없이 최적화된 네트워크 워터폴을 구현했다.