웹폰트 최적화로 CDN 비용 90% 절감!
by DD
2년 전
조회수 4
CloudFront 폰트 호출량 증가로 연간 7억원 비용 발생 문제를 인지
Safari 브라우저의 Vary 헤더 문제로 인한 폰트 캐싱 실패 원인 분석
Vary 헤더 설정 변경 및 서브셋 폰트 적용으로 CDN 비용 90% 절감
Safari 캐싱 문제의 기술적 배경
Safari 브라우저에서 preload 힌트 사용 시 CORS 설정으로 인해 Vary 헤더의 Origin 값이 다르게 설정되어 캐싱이 제대로 이루어지지 않았다. 따라서, CloudFront 캐시 정책에서 Origin을 제거하거나 Vary 헤더를 삭제하여 문제를 해결했다.
CDN 비용 절감을 위한 폰트 최적화 전략
과도한 폰트 호출 문제를 해결하기 위해 Vary 헤더 설정을 변경하고, KS X 1001 기반의 서브셋 폰트를 생성하여 폰트 용량을 대폭 줄였다. Woff2 기준, 기존 0.76MB에서 0.16MB로, 약 80% 감소를 달성했다.
실전 적용 가이드: 캐싱 문제 진단 및 해결
프로덕션 환경에서 캐싱 관련 문제는 Vary 헤더와 같은 응답 헤더를 면밀히 검토하여 진단해야 한다. 브라우저 개발자 도구를 활용하여 캐싱 동작을 확인하고, CloudFront와 같은 CDN 설정을 통해 캐시 정책을 튜닝하여 문제를 해결해야 한다.
