JSON 기반 데이터-로직 분리로 1,200개 이상의 계산기 페이지 정적 최적화

Context

수천 개의 계산기 페이지를 개별 템플릿으로 관리할 때 발생하는 유지보수 비용 증가와 코드 중복 문제 발생. 레이아웃 수정 시 모든 파일을 수동으로 변경해야 하는 운영 효율성 저하 및 규모 확장성 한계 직면.

Technical Solution

• Content Collection 도입을 통한 데이터-프레젠테이션 계층 분리로 JSON 파일 하나로 페이지 구성 정보 정의
• Dynamic Routes([...slug].astro)를 적용하여 단일 템플릿으로 수천 개의 개별 경로를 자동 생성하는 구조 설계
• JSON의 제약을 극복하기 위해 계산 로직을 별도의 TypeScript 모듈로 분리하고 import.meta.glob으로 매핑하여 Type-safe한 연산 수행
• 빌드 타임에 Markdown-to-HTML 변환 함수를 직접 구현하여 복잡한 파이프라인 없이 SEO 최적화 콘텐츠 렌더링
• 정적 HTML 생성 후 계산기 위젯만 Hydration 하는 부분적 Client-side Rendering 전략으로 초기 로딩 속도 극대화
• 단일 JSON 소스로 Schema.org의 다양한 구조화 데이터(JSON-LD)를 자동 생성하여 검색 엔진 최적화 효율 증대