🔗 GitHub Repository:MING-beta/fire-calculator 구경하기
👉 실제 서비스 써보기:FIRE Tribe 계산기 접속하기
단순한 복리 계산기에서 차트 비교 기능까지 붙이며 제법 그럴싸한 시뮬레이터를 만들었습니다. 하지만 실제 우리의 재무 상태는 ‘현재 자산 1억, 연 수익률 8%’처럼 하나의 숫자로 퉁칠 수 없습니다. 주식, 예적금, 부동산(실거주 등)으로 자산이 쪼개져 있고, 살다 보면 결혼, 주택 구입, 자녀 학자금 같은 거대한 ‘목돈’이 오가는 이벤트가 반드시 발생하죠.
이번 6단계에서는 계산기를 진짜 ‘전문가용’으로 끌어올리기 위해 ‘상세 자산 포트폴리오 가중평균’ 기능과 ‘생애 이벤트(Life Events) 동적 리스트’ 기능을 바이브 코딩으로 어떻게 덧붙였는지 파헤쳐 봅니다.
1. 내 자산은 하나가 아니야: 포트폴리오 가중평균 수익률 산출
먼저 사용자가 하나의 총자산 금액을 입력할지, 아니면 주식/채권/부동산으로 나누어 입력할지 선택할 수 있도록 UI 토글 스위치(#use-asset-alloc-toggle)[cite: 2]를 추가하기로 기획했습니다.
💬 나의 피드백 프롬프트
“현재 자산 입력란 옆에 ‘자산군별 상세 설정’ 토글 스위치를 만들어 줘.
이 스위치를 켜면 주식/펀드, 예적금/채권, 실물/부동산 각각의 금액과 기대 수익률을 입력할 수 있는 폼(
#detailed-asset-input)이 열려야 해.그리고 입력된 금액 비중에 따라 ‘가중 평균 수익률’을 계산해서 메인 시뮬레이션의 수익률로 덮어씌워 줘. (참고로 부동산은 수익 미발생으로 가정해 줘.)”
이 요청을 받은 AI는 script.js 내부에 computeDetailedAsset이라는 전용 함수를 뚝딱 만들어 냈습니다.
// script.js 에서 발췌: 포트폴리오 가중평균 계산 로직
const computeDetailedAsset = (isPlanB = false) => {
// ... (DOM 요소 가져오기 생략) ...
const totalA = stockA + bondA + realA; // 총자산 합계
let avgR = 0;[cite: 3]
if (totalA > 0) {
// 주식과 채권의 비중에 따른 가중 평균 수익률 계산 (부동산은 수익률 0%로 간주)
avgR = ((stockA * stockR) + (bondA * bondR)) / totalA;[cite: 3]
}
if (totalDispEl) totalDispEl.textContent = formatCurrency(totalA).replace('만', '');[cite: 3]
if (returnDispEl) returnDispEl.textContent = avgR.toFixed(1);[cite: 3]
return { totalAmount: totalA, avgReturnRate: avgR };[cite: 3]
};이 함수 덕분에 사용자가 상세 자산을 입력할 때마다 실시간으로 가중 평균 수익률이 계산되어 차트와 예상 은퇴 나이에 즉각 반영됩니다.
2. 인생의 변수 통제하기: 생애 이벤트(Life Events) 동적 리스트
파이어족 계산기에서 가장 구현하기 까다로운 부분이 바로 ‘특정 시점의 현금 흐름(Event)’입니다. 45살에 주택 대출을 갚느라 1억 원이 빠져나가거나, 50살에 상속으로 5천만 원이 들어오는 상황을 시뮬레이션 중간에 난입시켜야 합니다.
이를 위해 AI에게 ‘동적 배열 관리’와 ‘DOM 렌더링’ Vibe를 전달했습니다.
💬 나의 피드백 프롬프트
“‘이벤트 추가’ 버튼(
#add-life-event-btn)을 누르면 내용, 발생 나이, 지출/수입 여부, 금액을 입력하고 저장할 수 있게 해줘.저장된 데이터는
lifeEvents라는 배열 상태(State)로 관리하고, 리스트 형태로 화면(#life-events-list)에 렌더링되도록renderLifeEvents()함수를 만들어 줘. 삭제 버튼을 누르면 배열에서 빠져야 해.마지막으로 핵심 엔진인
computeScenario루프를 돌 때, 이벤트 나이와 현재 루프의 나이가 일치하면 자산에 더하거나 빼는 로직을 추가해 줘.”
AI는 Vanilla JS만으로 훌륭한 상태 관리(State Management)를 구현해 냈습니다. lifeEvents.push({ age, desc, type, amount })로 배열에 데이터를 넣고, 삭제 버튼 클릭 시 lifeEvents.splice(idx, 1)로 요소를 제거한 뒤[cite: 3] 화면을 다시 그리는 로직을 완성했습니다[cite: 3].
가장 짜릿한 부분은 시뮬레이터 루프에 이벤트를 반영한 코드입니다.
// script.js 에서 발췌: 시뮬레이션 루프 중 이벤트 발생 처리
if (lifeEvents && lifeEvents.length > 0) {[cite: 3]
lifeEvents.forEach(ev => {[cite: 3]
let eventMonth = Math.round((ev.age - age) * 12); // 이벤트가 발생하는 개월 수 환산[cite: 3]
if (months === eventMonth) { // 현재 시뮬레이션 루프 달과 일치하면[cite: 3]
let signedAmount = ev.type === 1 ? ev.amount : -ev.amount; // 수입(+) 또는 지출(-)[cite: 3]
currentBalance += signedAmount; // 자산에 즉시 반영![cite: 3]
}
});
}이제 사용자는 “45살 자녀 대학 등록금 지출”, “55살 연금 수령액 일시불 수령” 등 인생의 굵직한 변수들을 마음대로 타임라인에 던져놓고 결과를 확인할 수 있게 되었습니다[cite: 2, 3].
💡 6단계 회고: 상태 관리 라이브러리 없이 순수 JS로 끝내다
React나 Vue 같은 프레임워크를 썼다면 동적 리스트 렌더링이 더 익숙했겠지만, 단일 HTML/JS 구조에서도 바이브 코딩을 통해 데이터 상태(Array)와 UI 렌더링을 매끄럽게 동기화할 수 있었습니다. 로직의 복잡도가 올라갈수록 AI에게 “데이터(상태)는 이렇게 관리하고, 화면은 이런 조건일 때 다시 그려줘”라고 명확히 역할을 분리해서 지시하는 것이 핵심이었습니다.
🚀 다음 단계 예고
이제 계산기는 완벽에 가까워졌습니다! 하지만 차트만 덜렁 있으면 뭔가 허전합니다. “1억 돌파!”, “5억 돌파!”처럼 내가 달성할 목표 지점들을 시각적으로 콕콕 짚어주면 얼마나 좋을까요?
다음 [7단계]에서는 차트 데이터를 기반으로 ‘나의 은퇴 타임라인 & 마일스톤(Milestone)’을 동적으로 생성해 주는 기능을 어떻게 추가했는지 다루어 보겠습니다!