피드로 돌아가기
Dev.toFrontend
원문 읽기
Next.js SSG 기반 73종 계산기 구축 및 Search Indexing 최적화 분석
I built 73 free construction calculators with Next.js — and learned the hard way that Google won't index a new site just because it exists
AI 요약
Context
기존 건설 계산기 서비스들의 과도한 광고와 팝업으로 인한 사용자 경험 저하 및 레이아웃 시프트 문제 해결 필요. 빠른 초기 렌더링과 저사양 네트워크 환경에서도 동작하는 고성능 계산 도구 제공을 목표로 설계.
Technical Solution
- Next.js 16 App Router 및 SSG 채택을 통한 클라이언트 라운드트립 제거 및 HTML 사전 렌더링 구현
- Bundle size 최소화를 위한 Vanilla CSS 사용 및 Tailwind CSS 배제로 First Paint 속도 최적화
- 100% Client-side Math 로직 설계를 통한 서버 통신 비용 제거 및 사용자 입력 데이터 보안 강화
- 계산기 정의를 plain data objects(slug, inputs, calc function)로 추상화하여 설정 추가만으로 신규 페이지 확장 가능 구조 설계
- next/og Edge Runtime 기반의 Dynamic OG 이미지 생성으로 공유 시 시각적 정보 전달력 향상
- Visual Room Sketcher 구현을 통한 입력 데이터 자동 전파 및 중복 입력 제거 UX 설계
실천 포인트
- 신규 도메인의 Indexing 속도 향상을 위해 On-page SEO 외에 외부 Backlink 및 트래픽 유입 신호 확보 필수 - Google Search Console의 'Crawled – currently not indexed' 상태는 기술적 오류가 아닌 콘텐츠 가치 판단 결과임을 인지 - 대량의 유사 페이지 구조 설계 시, Route 기반 개발보다 Data-driven Config 기반의 페이지 생성 방식 검토 - 고성능 웹앱 구축 시 과도한 프레임워크 의존성을 낮추고 Vanilla CSS 등 기본 기술을 통한 Bundle 최적화 수행