How We Built SaaS Calculators in Next.js (And Kept Them Shareable)

Context

팀이 계산기를 통해 비즈니스 의사결정을 지원하려 했으나, 기존 스프레드시트·PDF·블로그 포스트 형식으로는 팀 내 전파와 재사용이 어려웠다. 계산 결과를 URL로 공유하고, 수식의 투명성을 보장하면서도 SEO 최적화와 빠른 로딩을 동시에 충족해야 했다.

Technical Solution

• Next.js App Router의 Server Components 우선 구조: 페이지 레벨에서 searchParams를 수집한 후 자식 컴포넌트로 전달해 useSearchParams()를 페이지에서 제거하고 hydration 경계를 명확히 함
• 전용 어댑터 훅 useCalculatorStateFromParams 도입: 모든 계산기가 동일한 훅을 사용하도록 하여 쿼리 파싱·직렬화 로직을 단일화하고 각 계산기에서 URL 동기화 중복 코드 제거
• 순수 도메인 모듈 분리: 수학 계산 로직을 React 컴포넌트 트리 외부에 배치하여 감사 가능성 및 재사용성 확보
• 설정 기반 메타데이터 생성: 타입화된 CalculatorConfig로부터 SEO 메타데이터와 페이지 콘텐츠를 자동 생성
• 페이지 섹션의 템플릿 + 슬롯 패턴: 헤더·수식 블록·입력 컨트롤·결과 카드·임팩트 차트·공유 섹션·관련 계산기·FAQ를 표준 레이아웃으로 구성해 새로운 계산기 추가 시 속도 향상
• URL 쿼리 파라미터를 진실의 원천으로 사용: 모든 계산 결과가 URL에서 재현 가능하도록 설계해 Slack·Notion 등에서 직접 공유 가능
• Recharts를 사용한 임팩트 차트: 3·6·12개월 기간별 변화를 시각화하여 일회성 결과에서 의사결정용 시뮬레이션으로 전환
• 반응형 차트 컨테이너: overflow-x-auto와 최소 너비를 설정해 소형 스크린에서도 차트 가독성 유지

Key Takeaway

계산기를 임시 위젯이 아닌 제1급 제품 표면으로 취급하고, 서버 우선 구성·URL 기반 상태·순수 도메인 수학이라는 제약 조건을 설정하면 유지보수성·예측 가능성·공유 가능성을 동시에 달성할 수 있다.