Nuxt SSR 기반 Client-side Compute 설계로 서버 비용 제로화 및 SEO 최적화 달성

Context

부동산 투자 분석의 복잡한 수식 처리 시 발생하는 스프레드시트의 데이터 오류와 입력 실수 해결 필요성 대두. 기존 SPA 구조의 Googlebot 인덱싱 한계로 인한 검색 엔진 노출 저하 문제 분석.

Technical Solution

• SEO 최적화를 위해 Nuxt 3 SSR을 도입하여 10-14개의 교육 섹션과 JSON-LD 구조화 데이터를 포함한 HTML 전체 렌더링 구현
• API 호출 및 Backend 서버 없이 Vue 3의 Reactive Computed Properties를 활용하여 브라우저 내 실시간 계산 로직 구축
• 3,000라인 이상의 개별 .vue 파일을 기반으로 하며, canonical template을 통해 30여 개의 계산기 레이아웃 일관성 유지
• 정량적 수치를 시각적 신호로 변환하는 Result Intelligence System(RIS)을 설계하여 5단계 색상 기반 벤치마크 피드백 제공
• jsPDF 라이브러리를 통합하여 클라이언트 사이드 내에서 즉각적인 PDF 리포트 생성 기능 구현

Impact

• Compute 비용 0원 달성
• 3,000자 이상의 Long-form 콘텐츠 배치를 통한 검색 엔진 랭킹 최적화
• 모바일 트래픽 비중 28% 대응을 위한 Responsive Design 적용

Key Takeaway

계산 집약적 기능의 경우 상태 변화가 빈번하므로 Serverless-Client-side Compute 구조를 통해 인프라 비용을 제거하고 사용자 경험(Latency)을 극대화하는 전략이 유효함.