실제로 사람들의 $200K+ 절약을 돕는 모기지 계산기를 내가 만든 방법 (Next.js + Real Math)

Source: Dev.to

문제: 실제로 유용한 계산을 하지 못하는 금융 계산기

• 기본적인 수학만 사용 (원금 × 이자율 × 기간).
• 전략 비교가 없음 (투자하면 어떻게 될까?).
• 이메일 장벽 뒤에 숨김 (먼저 데이터를 제공해야 함!).
• 수학에 대한 설명이 없음 (블랙박스 계산).
• 현금 흐름 효율성을 고려하지 않음 (Velocity Banking).

저는 복리 이자를 이해하는 개발자이지만, “HELOC을 사용해야 할까, 추가 상환을 해야 할까, 아니면 차액을 투자해야 할까?” 라는 질문에 답해주는 도구를 찾지 못했습니다.

그래서 직접 만들었습니다. 우연히 2,000명 이상의 사용자가 평균 $142,000의 예상 이자를 절감하도록 도운 제품이 되었습니다.

(면책 조항: 저는 이 도구의 제작자입니다. 제 문제를 해결하기 위해 만들었으며, 이제 로직을 공개합니다.)

대부분의 계산기가 틀리는 수학

대부분의 계산기는 자동차 대출에 맞는 단순 공식을 사용하지만, 상환 일정을 무시하기 때문에 주택담보대출에는 부적합합니다.

주택담보대출은 초기에 이자가 많이 발생합니다. 1년 차에 $100을 추가 상환하면 20년 차에 $100을 상환하는 것보다 훨씬 큰 절감 효과가 있습니다.

이를 처리하기 위해 저는 월별로 대출을 시뮬레이션하고 “일시 상환”이나 “HELOC 투입” 같은 이벤트에 반응하는 엔진을 만들었습니다.

기술 스택

프론트엔드

• Next.js 14 (App Router) + TypeScript
• Tailwind CSS + Shadcn UI

백엔드 / DB

• Supabase (PostgreSQL)

수학

• 커스텀 엔진 + decimal.js를 이용한 정밀 계산

실시간 반응성

// app/calculator/page.tsx (Simplified)
import { useState, useEffect } from 'react';

export default function Calculator() {
  useEffect(() => {
    // component logic here
  }, []);
  return (
    <>
      {/* UI elements */}
    </>
  );
}

엣지 함수 (Supabase)

// supabase/functions/analyze-scenario/index.ts
import { serve } from "https://deno.land/std@0.168.0/http/server.ts";

serve(async (req) => {
  // This runs on the Edge, close to the user
  // Log anonymous stats
  const result = { /* analysis result */ };
  return new Response(JSON.stringify(result), {
    headers: { "Content-Type": "application/json" },
  });
});

거의 나를 망치게 만든 버그들

버그 #1: 부동소수점 악몽

JavaScript의 기본 부동소수점 연산은 이자 계산에 미묘한 오류를 일으켰습니다.

해결책: 모든 수학을 Decimal.js로 마이그레이션합니다.

// ❌ BAD (Native JS)
const monthlyPayment = principal * rate / 12;

// ✅ GOOD (Decimal.js)
import Decimal from "decimal.js";

const monthlyPayment = new Decimal(principal)
  .mul(rate)
  .div(12);

결과 (2,000명 이상의 사용자 데이터)

데이터베이스를 간단히 조회하면 사용자가 어떤 전략을 선택했는지 알 수 있습니다:

SELECT 
  strategy,
  COUNT(*) AS users,
  AVG(savings) AS avg_savings
FROM user_choices
GROUP BY strategy;

사람들이 수학을 시각화해서 보면, “아무것도 하지 않음”을 선택하는 경우는 거의 없습니다.

배운 점

• 시각화가 판매를 만든다: 숫자 표만 보여줘서는 지루합니다. “자유 날짜”가 2055년에서 2032년으로 이동하는 차트를 보여주면 감정적으로 다가옵니다.
• 맥락이 중요하다: 계산기만으로는 충분하지 않았습니다. 사용자가 왜 수학이 작동하는지 이해할 수 있도록 Velocity Banking 전략 가이드와 연결해 지식 격차를 메웠습니다.

직접 사용해 보기

• 실시간 데모: Try the Mortgage Killer App here
• 전체 전략 문서: (link to documentation)

토론

댓글에 여러분의 생각을 알려 주세요! 👇