# InsuRo 폰트 로딩 최적화 — 글자 간격 깨짐 해결 ## 작업 레벨: Lv.1 ## 프로젝트 - InsuRo: `/home/jay/projects/InsuRo` ## 문제 간헐적으로 페이지 텍스트의 글자 간격이 비정상적으로 넓어짐 ("가 족 전 폴 지 식" 처럼). 새로고침하면 정상 복원. 웹폰트 로딩 타이밍 문제(FOUT). ## 수정 사항 ### 1. 폰트 프리로드 추가 `index.html`의 ``에 주요 폰트 프리로드: ```html ``` 또는 사용 중인 커스텀 폰트 파일을 직접 프리로드. ### 2. font-display 설정 변경 현재 `font-display: swap` (시스템 폰트로 먼저 보여주고 교체) → `font-display: optional` (폰트가 바로 로드되면 사용, 아니면 시스템 폰트 유지 — 레이아웃 시프트 방지) 또는 `font-display: fallback` (100ms 대기 후 시스템 폰트, 3초 내 로드되면 교체) ### 3. CSS 확인 `src/index.css` 또는 `tailwind.config.ts`에서 `font-family` 설정 확인: - `letter-spacing`, `word-spacing` 관련 글로벌 설정이 있는지 - `tracking-wider`, `tracking-widest` 같은 Tailwind 클래스가 의도치 않게 적용되는 곳 ### 4. Cloudflare _headers에 폰트 캐시 최적화 `public/_headers` (이미 존재): ``` /*.woff2 Cache-Control: public, max-age=31536000, immutable ``` ## affected_files - `index.html` (수정 — 폰트 프리로드) - `src/index.css` (확인/수정 — font-display) - `public/_headers` (확인 — 폰트 캐시) ## 검증 시나리오 1. 페이지 첫 로드 시 글자 간격이 정상 표시 (FOUT 없음) 2. 하드 리프레시(Ctrl+Shift+R)에서도 정상 3. 느린 네트워크(3G 시뮬레이션)에서도 글자 깨짐 없음 4. npm run build 성공