Astro와 Claude Code 조합으로 85페이지 웹사이트를 30페이지로 재구축해 검색 노출 10배, Lighthouse 점수 95 이상 달성한 사례

Context

Typedream 기반 85페이지 웹사이트가 속도 저하, 디자인 불일치, 유지보수 어려움等问题으로 운영 불가능 상태였다. 복제된 페이지들이 존재하고 드래그앤드롭 에디터에서 소규모 변경조차 번거로웠다.

Technical Solution

• Typedream → Astro 5 서버 모드로 마이그레이션하여 정적 HTML 우선 아키텍처 적용
• React를 인터랙티브 컴포넌트 전용(모바일 메뉴, 연락처 폼)으로 제한하여 JavaScript 번들 최소화
• Tailwind CSS 기반 커스텀 디자인 시스템(색상, 섀도우, 타이포그래피, 스페이싱) 사전 정의
• Supabase로 연락처 폼 제출 기능 구현
• Plus Jakarta Sans를 로컬 로딩하여 Google Fonts 의존성 제거(GDPR 준수)

Impact

• Lighthouse 점수가 평균 40~60에서 일관적 95+로 개선
• 검색 노출 10배 증가, 세션 시간 2배 증가, 이탈률 감소
• 페이지 수 85개에서 30개로 축소

Key Takeaway

AI 코드 생성 도구는 좋은 판단과 나쁜 판단을 동시에 증폭한다. 견고한 디자인 시스템과 명확한 프로젝트 구조가 선행되어야 Claude Code가 생산적인 파트너로 기능한다.