대출 계산기 만들었어요 — 원리금/원금/만기 상환 한눈에 비교

대출 알아보다가 은행 계산기들이 다 따로 놀고, 상환 방식별로 이자가 얼마나 차이 나는지 한 화면에서 보기가 어렵더라고요. 그래서 "그냥 내가 만들자" 하고 주말에 붙잡고 만든 대출 계산기입니다.

원금·연이자율·기간만 넣으면 월 상환 스케줄이랑 총 이자가 쫙 나와요. 슬라이더로 슥슥 움직이면서 "기간 5년 줄이면 이자 얼마 빠지지?" 같은 걸 실시간으로 확인할 수 있게 했어요.

주요 기능

• 상환 방식 3종 비교: 원리금균등 / 원금균등 / 만기일시를 토글 한 번으로 나란히 비교해요. 같은 조건에서 총 이자가 제일 적은 방식을 자동으로 하이라이트해주니까, 어떤 방식이 나한테 유리한지 바로 보여요.
• 중도상환 시뮬레이션: "3년 차에 5천만 원 더 갚으면?" 같은 가정을 넣으면 기간 단축할지 월 납입금 줄일지 골라서, 절감되는 이자랑 수수료까지 전후 비교로 보여줍니다.
• 차트로 한눈에: 원금 vs 이자 비중 도넛 차트, 월별 납입금 구성 스택 바 차트로 "내가 내는 돈 중 이자가 얼마나 되나"가 그림으로 들어와요.
• PDF 저장: 입력 조건 + 요약 + 차트 + 스케줄이 A4 한 장에 깔끔하게 들어가게 print용 CSS를 따로 짰어요. 상담 갈 때 뽑아 가기 좋아요.
• 천 단위 콤마 입력, 한글 금액 표기(억/만), 입력값 localStorage 저장 같은 자잘한 UX도 신경 썼습니다.

기술 이야기

Vite + React + TypeScript로 만들었어요. 계산 로직이 핵심이라 가볍고 빠른 SPA가 맞다고 봤고, Vite는 시작이 워낙 빨라서 슬라이더 만지작거리며 디버깅하기 편했어요.

제일 고민했던 건 차트였는데요, 도넛/스택 바 정도 그리자고 차트 라이브러리를 통째로 끌어오는 게 영 아까웠어요. 그래서 순수 SVG로 직접 그렸습니다. 번들도 가볍고, print용 PDF 레이아웃에서 색이나 크기를 내 맘대로 조정하기도 오히려 편하더라고요. 스타일은 Tailwind CSS v4로 다크 테마 반응형으로 잡았습니다.

참고용 계산기지만, 대출 알아볼 때 머릿속으로만 굴리던 숫자를 눈으로 확인할 수 있게 된 게 스스로 제일 만족스러워요. 직접 한번 두드려보세요!