개발자도구 Performance 분석 결과 CLS 0.17로 레이아웃 이동이 큼. JSDelivr
Maplestory.css의 font-display: swap이 폰트 도착 시 텍스트 너비를 swap
시켜서 카드 애니메이션 중에 레이아웃 튀어 버벅임 발생.
- JSDelivr CSS 링크 제거하고 @font-face를 index.html에 직접 선언하며
font-display: optional 로 변경
- woff2만 참조 (fallback 포맷 제거)
- cdn.jsdelivr.net preconnect 추가해 첫 방문 시에도 빠르게 시도
첫 방문 시: fallback(Noto Sans KR)으로 즉시 렌더, Maplestory가 100ms
내 도착하지 못하면 그대로 유지. 이후 캐시된 재방문부터는 정상 적용.
레이아웃 이동 0, 애니메이션 부드럽게 진행.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
- 라이트 모드 새로고침 시 FOUC 방지 (index.html 블로킹 스크립트)
- 헤더 배경 제거 + backdrop-blur만 유지 → 배경과 동시 전환
- 전환 시간 300ms → 500ms로 일관되게 느리게
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
- 관리자 페이지 카드형 메뉴 구조로 개편 (DB 연동 준비)
- 메이플스토리 폰트, 단풍잎 favicon 적용
- 헤더 디자인 개선 (백드롭 블러, 단풍잎 로고)
- 홈 페이지를 메뉴 동적 로드 형태로 변경
- 보스 계산기 페이지 제거 (DB 기반으로 재구축 예정)
- 이미지/메뉴 관리 페이지 라우트 추가 (placeholder)
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
