→ 도구 바로 사용하기

왜 만들었나

복리가 강력하다는 건 누구나 압니다. 그런데 막상 “7%로 20년 굴리면 얼마가 되는데?”라는 질문을 받으면 바로 대답하기가 어렵습니다. 대략 계산은 해봤지만, 숫자가 이렇게까지 커지는지는 실제로 그래프를 보기 전까지 체감이 안 됐습니다.

특히 원금 vs 수익이 분리된 그래프를 보고 싶었습니다. 수익이 원금을 넘어서는 시점이 어디인지, 그걸 시각적으로 보면 복리의 힘이 진짜로 느껴지거든요.

뭘 하는 도구인가 + 사용법

초기 투자금·월 적립액·수익률·기간을 입력하면, 최종 자산과 원금/수익 분해 그래프가 나옵니다.

특히 72의 법칙을 함께 표시합니다. 연 수익률로 원금이 2배 되는 기간을 72를 수익률로 나눠서 바로 계산해 드립니다. 연 7%라면 약 10.3년.

3단계 사용법:

  1. 초기 금액·월 적립액 입력
  2. 수익률·기간 슬라이더 조정
  3. 그래프에서 수익(노란 영역)이 원금(주황 영역)을 넘어서는 시점 확인

제작 과정

Chart.js의 fill: 0 옵션을 활용해 두 번째 데이터셋(총자산 라인)이 첫 번째 데이터셋(원금 라인) 위를 채우도록 만들었습니다. 이렇게 하면 아래 영역(원금)과 위 영역(수익)이 색상으로 자연스럽게 분리됩니다.

월 복리 계산식은 w = w × (1 + 월이율) + 월적립액을 12번 반복하는 방식으로 구현했습니다. 연 복리 공식보다 실제 적립식 투자에 더 가깝습니다.

URL params로 현재 입력값을 URL에 인코딩해서, 공유 버튼을 누르면 내 설정 그대로 링크가 복사됩니다.

빌드 로그

  • 스택: Astro 5 정적 페이지 + 인라인 JS + Chart.js 4 CDN
  • 월 복리 계산: w × (1 + r/12) + mo 12회 반복, 연도별 스냅샷
  • 스택 영역 차트: fill: 0 으로 원금/수익 영역 분리 표시
  • 72의 법칙: 수익률 슬라이더 변경 시 실시간 업데이트
  • URL params 공유: ?init=1000&mo=100&rate=7&yr=20 형식
  • localStorage: 입력값 자동 저장·복원
  • 총 개발 시간: 약 2~3시간

한계 & 다음

  • 세금 미반영 (배당소득세·양도세 → 실질 수익률 하락)
  • 물가상승률 미반영 (실질 구매력 감소)
  • 연봉 인상·적립액 증가 시나리오 없음

v2 아이디어: 실질 수익률 모드(물가상승 차감), 두 시나리오 비교 기능.

#89fire #파이어족 #경제적자유 #재테크 #무료도구 #바이브코딩 #복리계산기 #스노우볼 #적립식투자 #복리마법