나만의 생애 자산 시뮬레이터 개선해서 만들어보기!

소개

안녕하세요. 저는 이번 22기 에이전틱AI투자 스터디에 참여하고있는 찰스림 입니다.
21기에 이어 22기까지 열심히 따라가고있는데, 이번 스터디에는 사이드로 부업을 해보고 싶어 투자의 투 도 모르고 시작했는데, 여기 어마어마합니다. 실제 스터디 참여하시는 분들보다 2배는 청강생이 많으신데, 꽤 쏠쏠하실 것 같습니다.

시도하고자 했던 것과 그 이유를 알려주세요.

시도하고자 했던 것: 22기 에이전틱AI투자의 멍멍님의 생애 자산 시뮬레이터 사이트(fi-lifecycle.netlify.app)를 벤치마킹하여, 나만의 프리미엄 개인용 재정 시뮬레이터 웹사이트를 제작하고자 했습니다. 구글 안티그래비티로요.
개발 목표 및 이유:
- 기존 정적이고 밋밋한 은퇴 계산기와 달리, "시뮬레이션 재생 버튼을 누르면 나의 연도별 자산 변화가 살아 움직이듯이 실시간으로 그려지는 차트 애니메이션"을 구현하고 싶었습니다.
- 단순히 라이브러리를 가져다 쓰는 것을 넘어 유리 모피즘(Glassmorphism) 스타일의 미려한 대시보드 UI를 디자인하고, 나의 라이프사이클 단계(자산 축적 ➔ Coast FI ➔ FI 달성 ➔ 은퇴 풍요)에 맞춰 HUD 로드맵에 불이 켜지는 세련된 인터랙션 기능을 담고자 시도했습니다.

진행 방법

어떤 도구를 사용했고, 어떻게 활용하셨나요?

1. 사용한 도구

AI 어시스턴트: Google DeepMind의 Antigravity 코딩 어시스턴트 (Gemini 모델 탑재)
프론트엔드 기술 스택: HTML5 + Vanilla CSS + JavaScript (별도의 React나 무거운 차트 라이브러리 없이 가볍고 빠른 반응형 동작을 위해 순수 코드로 빌드)

2. 활용 및 진행 과정

1단계 (벤치마킹 설계): 벤치마킹 URL 정보를 AI에 전달하여 기본 설계 레이아웃을 잡고 프리미엄 다크 테마 디자인 시스템을 정립했습니다.
2단계 (커스텀 SVG 애니메이션 차트 개발): JavaScript를 통해 연도별 자산 복리 계산기 엔진을 만들고, 재생(Play) 속도에 맞춰 SVG 곡선 패스(d="M... L...")를 동적으로 늘려 그리는 실시간 애니메이션을 결합했습니다.
3단계 (인터랙티브 디테일 개선): 글자 잘림, 스크롤 튐, 렌더링 붕괴 등 실제 구동 단계에서 발견된 미세 버그를 AI와 페어 프로그래밍하며 수정했습니다.

3. 사용한 핵심 프롬프트 (전문)

최초 요청 프롬프트: "https://fi-lifecycle.netlify.app/ 위의 사이트를 참고해서 제 개인 사이트를 만들어보고싶어요. 벤치마킹해주세요. 그리고 추가사항으로 시뮬레이션 그래픽을 만들어서 재생을 하면 그래프가 움직이게 만들어보세요."

UI 개선 요청 프롬프트 (시행착오 수정 시 사용): "1. 화면의 첫 문구에서 줄바꿈이 일어났는데 개선해주세요. 2. 단위가 만원인데 아래 표시들에서는 원화로만 되어있어서 헷갈립니다. 만원으로 일치시키는게 맞아보여요. 3. 시뮬레이션 재생 시 화면이 그래프에 머무르지 않고, 아래 표에서 갱신되는 나이에 매칭이 되어서 그래프를 볼 수 없습니다. 개선해주세요."

4. 활용 캡처 화면 팁

5. 핵심 해결 코드 블록 (SVG 필터 붕괴 방지 & 테이블 단독 스크롤 구현)

javascript
/* 1. 재생 중에 전체 화면이 흔들리지 않고 표 컨테이너 내부만 단독 스크롤 되도록 유도하는 로직 */
const container = reportTableBody.closest('.table-container');
if (container) {
  const rowTop = activeRow.offsetTop;
  const containerHeight = container.clientHeight;
  const rowHeight = activeRow.clientHeight;
  
  // 전체 윈도우 스크롤바에 영향을 주지 않고 내부 영역만 중앙으로 부드럽게 스크롤
  container.scrollTo({
    top: rowTop - (containerHeight / 2) + (rowHeight / 2),
    behavior: 'smooth'
  });
}

html
<!-- 2. 애니메이션 초기 단계(데이터가 1개일 때)에 그래프가 투명해져 사라지는 버그를 막기 위한 SVG 필터 수정 -->

<filter id="glow" filterUnits="userSpaceOnUse" x="0" y="0" width="800" height="400">

<feGaussianBlur stdDeviation="4" result="blur" />

<feMerge>

<feMergeNode in="blur"/>

<feMergeNode in="SourceGraphic"/>

</feMerge>

</filter>

결과와 배운 점

배운 점과 나만의 꿀팁을 알려주세요.

배운 점: 코딩 라이브러리를 쓰지 않고 순수 HTML/JS만으로도 SVG 패스를 한 땀 한 땀 조작해 아주 미려하고 부드러운 애니메이션 효과를 만들어 낼 수 있음을 배웠습니다. AI 코딩 비서와 소통할 때 단순 기능 개발을 넘어 미세한 사용성과 시각적 문제점들을 계속 집어주며 보완해나가는 과정이 매우 강력하다는 것을 깨달았습니다.
나만의 꿀팁:
- 텍스트의 강제 줄바꿈을 막기 위해 단순히 CSS를 조절하는 것보다 white-space: nowrap;과 반응형 폰트인 font-size: clamp(...)를 혼합해서 사용하면 해상도 유연성과 무중단 한 줄 출력을 동시에 챙길 수 있습니다.

과정 중에 어떤 시행착오를 겪었나요?

SVG 필터 붕괴(Collapse) 현상: 차트 선에 은은한 네온 발광 효과를 주기 위해 SVG 필터(glow)를 입혔는데, 재생 초기 프레임에 선이 화면에서 아예 사라지는 현상이 발생했습니다. 원인은 SVG 필터의 연산 영역 기본값인 objectBoundingBox가 플랫한 직선이나 점 하나일 때 높이가 0이 되어 필터 전체가 깨지기 때문이었습니다. 이를 절대 좌표 영역 기준인 filterUnits="userSpaceOnUse"로 변경하여 안전하게 해결했습니다.
스크롤 강제 이동 현상: 재생 흐름에 맞춰 표의 행을 강조하기 위해 scrollIntoView()를 썼더니 브라우저 전체 화면이 덜컥거리며 내려앉는 문제가 생겨, 스크롤 박스 내부의 상대 스크롤 계산 방식(scrollTo)으로 교체 해결했습니다.

도움이 필요한 부분이 있나요?

현재는 실질 이자율(수익률 - 물가상승률)을 가정한 단리/복리 계산이지만, 향후 역사적 주식시장 데이터를 기반으로 몬테카를로 시뮬레이션(Monte Carlo Simulation)이나 역사적 백테스트 데이터를 연동하는 정교한 연산 로직을 추가하고 싶습니다. 혹시 관련 공식을 자바스크립트 경량 코드로 결합해보신 분들의 노하우가 있다면 공유 부탁드립니다!

앞으로의 계획이 있다면 들려주세요.

시뮬레이터 소스를 활용하여 나만의 자산 설계 시나리오를 만들 수 있었던 것 처럼, 자산관리 및 투자에 관한 나만의 대시보드 및 웹사이트를 갖고싶습니다.

녹음 2026-05-26 034028.mp4

4.47MB

제 자산 현황은 그리 넉넉치 않는 상태이고, 금융자산이라고 해서 할 수 있는게 예금 조금과 보증금이 전부인지라, 앞으로의 자산형성에 많은 공부와 성공적인 투자가 필요한 상황입니다. 본 시뮬레이션에는 위기대응에 대한 시나리오도 있었는데 그걸 적용하면,, 어휴 끔찍합니다. 그 전에 우샹항을 위해 달리겠습니다.

📣 23기 마지막 세일 시작! 7/13일까지만 진행해요