왜 만들었나
45살까지 절반쯤 경제적 자유라는 목표를 꽤 오래 머릿속에 품고 있었습니다. 그런데 생각해보니 그게 구체적으로 얼마를 모아야 하는지, 지금 페이스로 가면 몇 살에 닿는지를 제대로 계산해 본 적이 없었습니다.
막연하게 “열심히 하면 되겠지”였는데, 사실 그 막연함이 제일 문제였습니다. 목표가 숫자로 안 보이면 행동도 흐릿해집니다.
그래서 첫 도구는 이걸로 정했습니다. 89fire의 가장 상징적인 질문 — “지금 이대로면 몇 살에 도착하나?” 를 바로 답해주는 계산기입니다.
뭘 하는 도구인가 + 사용법
현재 나이·순자산·월 저축액·기대수익률을 입력하면, 복리로 굴렸을 때 목표 자산에 도달하는 나이를 계산해 줍니다. 숫자를 바꿀 때마다 실시간으로 바뀝니다.
목표 설정은 두 가지 방식입니다.
- 월 생활비 기준: 목표 생활비를 입력하면 4% 룰(25배)로 필요 자산을 자동 계산합니다. 월 300만원이면 9억원.
- 목표 자산 직접 입력: “10억 모으기” 같이 직접 넣는 방식입니다.
반자유 모드를 켜면 생활비 절반만 충당하는 1단계 파이어로 목표가 줄어듭니다. 완전한 조기은퇴가 아니라 “이건 안 해도 된다”는 선택지를 먼저 만드는 게 현실적이라고 생각해서 넣었습니다.
3단계 사용법:
- 나이·순자산·월 저축액 입력
- 수익률 슬라이더 조정 (기본값 7% = 글로벌 인덱스 역사 평균)
- 결과 확인 → 슬라이더 바꿔가며 “저축 100만원 더 늘리면 몇 년 앞당겨지나” 시뮬레이션
제작 과정
계산 로직 자체는 단순합니다. 매년 자산 × (1 + 수익률) + 연 저축액을 반복하다가 목표 자산을 넘는 나이를 찾으면 됩니다. 세금·물가상승 반영은 v2 숙제로 남겼습니다.
까다로웠던 건 차트였습니다. Chart.js를 정적 사이트에 CDN으로 붙이면서, 파이어 시점 수직선과 45세 기준선을 커스텀 플러그인으로 그려야 했습니다. afterDraw 훅에서 getDatasetMeta(0).data[i].x로 캔버스 픽셀 좌표를 뽑아서 선을 그렸습니다.
localStorage 저장도 붙였습니다. 페이지를 다시 열어도 마지막에 입력한 값이 남아 있습니다. 자기 숫자를 매번 다시 입력하는 건 귀찮으니까요.
빌드 로그
- 스택: Astro 5 정적 페이지 + 인라인 JS + Chart.js 4 CDN
- 계산 로직: 연도별 복리 루프, 목표 초과 나이 탐지
- 차트:
afterDraw커스텀 플러그인으로 45세·FIRE 수직선 추가 - localStorage: 입력값 자동 저장·복원
- 한국 금액 포맷: 만원 → 억원 → 조원 자동 변환 (
fmtKR) - 반자유 모드: 생활비 50% → 목표 자산 50% 감소
- 4% 룰 힌트: 월 생활비 변경 시 필요 자산 실시간 안내
- 총 개발 시간: 약 반나절
한계 & 다음
v1에서 빠진 것들입니다.
- 세금 미반영 — 배당소득세·양도세는 실제로 수익률을 갉아먹습니다
- 물가상승률 미반영 — 30년 후 300만원의 실질 구매력은 지금과 다릅니다
- 소득 변화 없음 — 연봉 인상이나 사업소득 증가 시나리오가 없습니다
- 시나리오 비교 없음 — “저축 200 vs 300” 두 시나리오를 같은 화면에서 보는 기능
v2 아이디어: 물가상승률 입력칸 추가, 낙관/기본/비관 3시나리오 동시 표시, 연봉 인상 가정 입력.
#89fire #파이어족 #경제적자유 #재테크 #무료도구 #바이브코딩 #파이어계산기 #조기은퇴 #FIRE #파이어시뮬레이터