웹폰트 최적화로 CDN 비용 90% 절감!

Safari 브라우저에서 preload 힌트 사용 시 CORS 설정으로 인해 Vary 헤더의 Origin 값이 다르게 설정되어 캐싱이 제대로 이루어지지 않았다. 따라서, CloudFront 캐시 정책에서 Origin을 제거하거나 Vary 헤더를 삭제하여 문제를 해결했다.

과도한 폰트 호출 문제를 해결하기 위해 Vary 헤더 설정을 변경하고, KS X 1001 기반의 서브셋 폰트를 생성하여 폰트 용량을 대폭 줄였다. Woff2 기준, 기존 0.76MB에서 0.16MB로, 약 80% 감소를 달성했다.

프로덕션 환경에서 캐싱 관련 문제는 Vary 헤더와 같은 응답 헤더를 면밀히 검토하여 진단해야 한다. 브라우저 개발자 도구를 활용하여 캐싱 동작을 확인하고, CloudFront와 같은 CDN 설정을 통해 캐시 정책을 튜닝하여 문제를 해결해야 한다.