소개
시도하고자 했던 것과 그 이유:
과제로 제시된 fi-lifecycle.netlify.app 을 참고하여 생애주기동안의 필요한 노후자금과
현재 보유중인 자산과 미래의 투자현금흐름을 계산하여 나만의 재무 설계 모델을 시뮬레이션 하기
진행 방법:
먼저 클로드코워크에게 fi-lifecycle.netlify.app 주소를 주고 이를 토대로
재무생애주기 앱을 개발하기 위한 PRD 파일을 작성하도록 요청함.
Tip: 클로드에 사용한 프롬프트 전문
[fi-lifecycle.netlify.app](http://fi-lifecycle.netlify.app/)의 기능을 파악해서 나의 생애주기 재무설계를 할수 있는 앱을 개발하려고 해.
"생애주기 재무설계 시뮬레이터"의 PRD를 앱개발이 가능한 .md 파일로 만들어줘
Tip:
총 1,234줄, 43KB 규모의 완전한 PRD 파일입니다.
파일 구성 요약 (14개 섹션)
제품 개요 — 한 줄 정의, 타겟 사용자, 핵심 문제
핵심 요구사항 — MoSCoW 분류, 비기능 요구사항 표
기술 스택 및 프로젝트 구조 — package.json 의존성, 폴더 트리, 환경변수
TypeScript 타입 정의 — UserProfile, Assets, PensionInfo, CalcResults, Insight 전체 인터페이스
재무 계산 로직 — calcNPS, calcFVMonthly, calcPVNeeded, calcTaxCredit, runCalculation 완전 구현 코드
Zustand 스토어 — persist 미들웨어, 기본값, 액션 전체 코드
화면별 컴포넌트 명세 — 5개 탭 입력 필드 테이블, KPI 카드 공식, Chart.js 설정
Claude AI 연동 — API 호출 코드, 시스템 프롬프트, 폴백 인사이트 로직
Word 보고서 내보내기 — docxExport.ts 구조, 7챕터 구성 표
라우팅 구조 — App.tsx 코드
스타일 가이드 — Tailwind 설정, 공통 컴포넌트 props 인터페이스
Claude Code 개발 지시 프롬프트 — Phase 1~9 복붙 가능한 프롬프트 9개
테스트 명세 — Vitest 테스트 코드, 커버리지 목표 표
배포 체크리스트 — DoD 체크리스트, netlify.toml 설정
Claude Code 새 세션에서 이 파일을 첨부하고 "이 PRD대로 개발해줘"라고 하면 Phase 순서대로 바로 진행할 수 있습니다.Tip: PRD 파일은 아래와 같이 작성됨.
검정색 배경의 컴퓨터 화면 스크린샷
<결과화면>
녹색 배경의 녹색 화면 스크린샷
결과와 배운 점
HTML로 구현된 생애주기 재무설계 시뮬레이션 도구를 개발하여
가정을 바꾸어 가면서 시뮬레이션 해보았음.
배운 점과 나만의 꿀팁을 알려주세요.
상당히 유용한 툴이고 국민연금, 개인연금은 물론이고 세무적인 사항을 고려하여
IRP 계좌와 절세방안에 재한 대안을 제시해주었음.
과정 중에 어떤 시행착오를 겪었나요?
클로드 코워크를 이용해서 개발을 진행하면서 권한 허용이 안되어
프로그램 실행이 잘 안되는 문제가 발행하였고, 파일의 작성과 수정이 가능하도록
관리자 권한을 부여하는 과정에서 시행착오를 겪었음.
도움이 필요한 부분이 있나요?
주식과 채권, 금 등 다양한 자산을 고려한 설계를 추가할 필요가 있음.
국내 자산과 해외 자산에 대한 투자와 분산에 대한 고려도 필요함.
향후 다른종류의 자산에 배분을 하고 각 자산의 목표 수익률에 따라 향후 현금흐름 시뮬레이션이 가능하도록 하면 자산의 배분에 대한 다양한 시뮬레이션이 가능할 것으로 생각됩니다.
앞으로의 계획이 있다면 들려주세요.
(내용 입력)
도움 받은 글 (옵션)
참고한 지피터스 글이나 외부 사례를 알려주세요.
(내용 입력)
