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

문제 상황

• 대용량 한글 웹폰트 다운로드 중 대체 폰트 노출로 인한 화면 깜빡임
• CSS 확인 이후 폰트 요청이 발생하는 Critical Request Depth와 초기 로드 지연

해결 방법

• 미사용 글리프 제거와 사용자 입력 글리프 추가를 통한 Pretendard 서브셋 폰트 제작, 원본 대비 70% 이상 용량 절감
• preload 링크로 CSS와 WOFF2 폰트 병렬 다운로드
• Safari 캐시 재사용 문제 대응을 위한 CloudFront Function 기반 요청·응답 헤더 조작

원인 분석

• Vary: Origin 캐시 키와 CORS·non-CORS 요청 차이로 인한 Safari의 중복 폰트 다운로드
• Safari의 교차 도메인 @font-face 요청 CORS 미적용으로 인한 preload 캐시 불일치

성능/운영 포인트

• 폰트 요청에 Origin 헤더 추가 및 응답의 Vary 헤더에서 Origin 제거
• Terraform IaC를 통한 CloudFront Function 리소스 관리
• 폰트·상단 이미지에는 preload, 자주 사용할 CDN 도메인에는 preconnect 활용