🔗 GitHub Repository:MING-beta/fire-calculator 구경하기
👉 실제 서비스 써보기:FIRE Tribe 계산기 접속하기
은퇴까지의 여정은 깁니다. 최종 목표 금액이 20억이라고 했을 때, 그 숫자만 바라보고 10년, 20년을 버티는 것은 심리적으로 매우 지치는 일입니다. 파이어족들에게는 1억, 5억, 10억 단위로 끊어지는 ‘마일스톤(중간 목표)’이 강력한 동기부여가 됩니다.
이번 7단계에서는 기껏 힘들게 연산해 둔 ‘차트 데이터’를 재활용하여, 내가 몇 살에 얼마를 돌파하게 되는지 콕콕 짚어주는 ‘은퇴 타임라인’ 기능을 바이브 코딩으로 어떻게 추가했는지 다루어 보겠습니다.
1. 데이터를 낭비하지 마라: Vibe 세팅
앞선 단계에서 computeScenario 함수를 통해 1년 단위의 자산 변화 데이터를 배열(Array) 형태로 예쁘게 뽑아내서 Chart.js에 전달했습니다. 이 배열 안에는 이미 ‘몇 살에 얼마를 모으는지’에 대한 정답이 다 들어있습니다.
AI에게 이 데이터를 재활용하라는 뉘앙스의 프롬프트를 던졌습니다.
💬 나의 피드백 프롬프트
“차트 밑에 ‘⏱️ 나의 은퇴 타임라인’ 섹션(
#milestone-container)을 만들어 줘.메인 계산이 끝난 뒤에 생성된 자산 데이터 배열을 쭉 훑어보면서, 자산이 1억, 5억, 10억을 돌파하는 시점(나이와 몇 년 뒤인지)을 찾아서 리스트 형태로 화면에 뿌려줘.
마지막에는 ‘파이어 달성! 목표 자산 도달’ 마일스톤도 꼭 포함해 주고, 아이콘(🌱, 🔥, 💎, 👑)을 넣어서 예쁘게 디자인해 줘.”
2. AI가 설계한 마일스톤 탐색기 (findMilestone)
AI는 script.js의 calculateFIRE 함수 후반부에 차트 데이터를 가공하는 깔끔한 로직을 추가해 주었습니다. 핵심은 findMilestone이라는 내부 탐색 함수입니다.
// script.js 에서 발췌: 마일스톤 탐색 및 렌더링 로직
const mData = planA.chartData; // 차트용으로 미리 계산된 자산 배열
const mTemp = [];[cite: 3]
const tAsset = planA.targetAsset;[cite: 3]
// 특정 금액(amount)을 돌파하는 최초의 연도를 찾는 함수
const findMilestone = (amount, title, icon, isTarget = false) => {[cite: 3]
if (currentSavingsTenK >= amount && !isTarget) return null; // 이미 달성한 금액은 패스
// 차트 배열을 순회하며 목표 금액을 넘어서는 순간을 캐치!
for (let i = 0; i < mData.length; i++) {[cite: 3]
if (mData[i] >= amount) {[cite: 3]
return { year: i, age: currentAge + i, title, icon, amount: mData[i], isTarget };[cite: 3]
}
}
return null;[cite: 3]
};
// 1만 단위(만원)이므로 10000 = 1억원
const m1 = findMilestone(10000, "1억원 돌파!", "🌱");[cite: 3]
const m5 = findMilestone(50000, "5억원 돌파!", "🔥");[cite: 3]
const m10 = findMilestone(100000, "10억원 돌파!", "💎");[cite: 3]
const mTarget = findMilestone(tAsset, "마일스톤: 파이어 달성! 목표 자산 도달", "👑", true);[cite: 3][코드 리뷰 💡]
- 스마트한 스킵 로직: 현재 보유 자산(
currentSavingsTenK)이 이미 1억을 넘었다면 1억 마일스톤은null을 반환하여 렌더링을 생략합니다. - 배열 순회 탐색: 시뮬레이션 결과로 튀어나온
mData(연도별 자산)를 앞에서부터 훑으면서 기준 금액(10000,50000등)을 넘어서는 첫 인덱스(연도)를 정확히 잡아냅니다. - UI 렌더링 최적화: Plan B 비교 모드를 켰을 때는 차트가 너무 복잡해지는 것을 막기 위해
milestoneContainer.style.display = 'none'처리하여 숨겨주는 디테일까지 스스로 챙겼습니다[cite: 3].
3. DOM 렌더링과 엣지 케이스 처리
타임라인을 화면에 그릴 때, 목표 자산이 1억 1천만 원인데 “1억 돌파”와 “목표 자산 도달”이 연달아 뜨면 모양새가 이상해집니다. AI는 이 부분도 놓치지 않았습니다.
// 목표 자산 마일스톤과 너무 가까운(2억원 이내 격차) 중간 마일스톤은 솎아내는 필터링 로직
if (mTarget) {
const filtered = mTemp.filter(m => Math.abs(m.amount - tAsset) > 20000);[cite: 3]
filtered.push(mTarget);[cite: 3]
mTemp.length = 0;[cite: 3]
mTemp.push(...filtered);[cite: 3]
}
mTemp.sort((a, b) => a.year - b.year); // 발생 연도순 정렬[cite: 3]
// HTML 주입
mTemp.forEach(m => {
const diffYear = m.year === 0 ? "올해" : `앞으로 ${m.year}년 뒤`;[cite: 3]
const itemHtml = `
<div class="milestone-item ${m.isTarget ? 'milestone-target' : ''}">
<div class="milestone-icon">${m.icon}</div>
<div class="milestone-text">
<span class="milestone-title">${m.title}</span>
<span class="milestone-desc">${m.age}세 (${diffYear})</span>
</div>
</div>`;[cite: 3]
milestoneList.insertAdjacentHTML('beforeend', itemHtml);[cite: 3]
});결과적으로 유저는 “앞으로 3년 뒤 1억 돌파, 15년 뒤 파이어 달성”과 같은 텍스트 위주의 친절한 피드백을 차트와 함께 볼 수 있게 되었습니다[cite: 3].
💡 7단계 회고: 이미 있는 데이터를 비틀어 새로운 가치 창출하기
마일스톤을 구하기 위해 복리 공식을 역으로 풀어내는 어려운 수학을 쓸 필요가 없었습니다. 프로그래밍의 본질은 결국 ‘데이터의 가공’입니다. 바이브 코딩 시 “A라는 결과를 도출할 때 만들어진 B라는 데이터를, C라는 UI에 맞게 재활용해서 그려줘”라는 식의 프롬프팅이 얼마나 효율적인지 깨닫는 순간이었습니다.
🚀 다음 단계 예고
이제 계산 기능과 시각화는 완벽합니다. 그런데 기능이 너무 많아지다 보니, 화면을 캡처해서 친구에게 자랑하거나 나만의 시나리오 설정을 저장해 두고 싶어질 것입니다.
다음 [8단계]에서는 애플리케이션의 완성도를 극대화하는 ‘Speed Dial 플로팅 메뉴, PDF 캡처 내보내기, 그리고 나만의 프로필 저장 기능’을 어떻게 빠르고 우아하게 구현했는지 알아보겠습니다!