Next.js 14로 금융 계산 엔진 개발: 즉시 계산 아키텍처

Source: Dev.to

왜 새로운 계산 엔진이 필요했나요? 👋

재무 교육은 복잡한 세법과 끊임없이 변하는 비율 사이에서 길을 잃기 쉽습니다. Hemen Hesap은 터키의 최신 세금, 급여 및 재무 계산을 모두에게 접근 가능하고 이해하기 쉽게 만들기 위해 시작한 프로젝트입니다.

1. 기술 스택 및 아키텍처 🏗️

1.1. Core Stack

• Next.js 14 (App Router) – 프로젝트의 골격. SSR (Server‑Side Rendering)과 SSG (Static Site Generation) 기능 덕분에 SEO 친화적이면서도 번개 같은 속도의 페이지를 만들 수 있었습니다.

1.2. UI/UX

• Lucide React – 가벼운 아이콘 세트.
• Atomic Design – InputGroup, SelectGroup, ResultCard와 같이 재사용 가능하고 격리된 컴포넌트.

1.3. 폴더 구조

src/

2. 계산 알고리즘 및 비즈니스 규칙

이 프로젝트의 핵심은 src/lib/engines 아래에 있습니다. 각 계산 도구(KDV, 급여, MTV)는 자체 격리 엔진을 가지고 있습니다.

2.1. JavaScript와 수학적 정확성

JavaScript에서는 0.1 + 0.2 !== 0.3 문제가 존재합니다. 재무 거래에서는 센트 단위 오차가 허용되지 않으므로, 특별한 스마트 라운딩 (smartRound) 메커니즘을 개발했습니다.

// Basitleştirilmiş örnek
export function smartRound(value, precision = 2) {
  const factor = Math.pow(10, precision);
  return Math.round((value + Number.EPSILON) * factor) / factor;
}

2.2. 계산 엔진

• KDV 계산 – 포함/제외 변환.
• 소득세 – 2025년 누적 과세표준 추적.
• 급여 계산 – 총액/순액 순환 및 SGK 상한선 제어.
• 퇴직금 – 상한 급여 및 가산 급여 분석.

이 모든 엔진은 데이터베이스 대신 정적 JSON 파일(data/)에서 데이터를 가져와 성능을 높였습니다. 세율이 바뀔 때는 JSON 파일만 업데이트하면 됩니다.

3. SEO 전략: 구글은 우리를 어떻게 보는가?

재무 도구 분야는 경쟁이 치열합니다. 기술 SEO로 차별화를 이루었습니다.

{
  "@context": "https://schema.org",
  "@type": "WebSite",
  "url": "https://hemenhesap.com",
  "potentialAction": {
    "@type": "SearchAction",
    "target": "https://hemenhesap.com/search?q={search_term_string}",
    "query-input": "required name=search_term_string"
  }
}

3.1. 기술적 세부 사항

• 동적 메타데이터 – 각 계산 페이지마다 고유 title과 description.
• Sitemap – sitemap.ts를 통해 매 빌드 시 자동으로 업데이트되는 지도.
• 내부 링크 – 계산기와 블로그 글 사이의 의미 있는 연결.

4. 테스트 및 품질 보증 (QA)

• Vitest – Jest보다 빠르기 때문에 선택했습니다.

5. 성능

• 정적 캐싱 (SSG) – 계산 페이지의 골격이 빌드 시점에 생성됩니다.

6. 결론 및 로드맵

Hemen Hesap은 최신 웹 기술을 재무 도구에 어떻게 통합할 수 있는지를 보여주는 살아있는 사례가 되었습니다.

향후 계획

• 📄 계산 결과를 PDF로 다운로드 기능.
• 🌍 다중 언어 지원 (환율 변환기용).
• 🔌 Public API (다른 개발자들이 사용할 수 있도록).

이 기술 여정에서 얻은 경험을 계속 공유하겠습니다. 프로젝트를 살펴보고 싶다면:

코드와 함께, 오류 없는 계산을! 👨‍💻