1. 숫자의 한계, 그리고 그래프의 도입
1편에서 시뮬레이터의 뼈대와 기본값 시나리오를 세팅한 후 테스트를 해보았습니다. 사용자는 매달 SPY(미국 주식), TLT(미국 장기채), CASH(현금) 중 하나를 선택하며 자산을 불려 나갑니다. 결과 화면에서 최종 수익률을 숫자로 띄워주는 것만으로도 의미는 있었지만, 무언가 부족했습니다.
‘듀얼 모멘텀’의 진정한 가치는 단순히 돈을 많이 버는 것이 아니라, 시장이 반토막 날 때 내 계좌가 깎이는 것을 방어하는 MDD(Maximum Drawdown) 방어력에 있습니다. 이 생존력을 가장 뼈저리게 느끼게 하려면, 내가 듀얼 모멘텀으로 투자한 자산의 궤적과 SPY에 그대로 존버(가만히 방치)했을 때의 궤적을 실시간 꺾은선 그래프로 보여주어야 했습니다.
2. Chart.js 캔버스 렌더링 로직
웹에서 차트를 그리기 위해 가장 가볍고 직관적인 오픈소스 라이브러리인 Chart.js를 도입했습니다. HTML 상단에 <script src="https://cdn.jsdelivr.net/npm/chart.js"></script> 한 줄만 추가하면 브라우저 내에서 훌륭한 렌더링이 가능합니다.
// Chart.js 초기화 및 데이터 세팅 함수
function initChart() {
const ctx = document.getElementById('historyChart').getContext('2d');
chartInstance = new Chart(ctx, {
type: 'line',
data: {
labels: chartLabels, // 1개월, 2개월... 누적되는 X축 시간
datasets: [
{
label: '나의 자산 (모멘텀)',
data: chartMyData, // 유저가 선택한 모멘텀 수익
borderColor: '#FFA500', // 솔리드 오렌지 강조
backgroundColor: 'rgba(255, 165, 0, 0.1)',
borderWidth: 3,
fill: true,
tension: 0.3
},
{
label: 'SPY 존버 (비교용)',
data: chartSpyData, // 가만히 있었을 때의 추락하는 수익
borderColor: '#8B95A1', // 회색 점선으로 처리
borderDash: [5, 5],
fill: false,
tension: 0.3
}
]
},
options: {
responsive: true,
maintainAspectRatio: false,
scales: { y: { display: false } } // 숫자를 숨겨 선의 흐름에만 집중
}
});
}
[코드 리뷰: 대비의 극대화] 여기서 핵심은 디자인적 대비입니다. 사용자가 능동적으로 선택한 ‘나의 자산’ 궤적은 굵직한 솔리드 오렌지색 면적으로 칠해 전진하는 느낌을 주고, 대조군인 ‘SPY 존버’ 궤적은 회색 점선(borderDash)으로 처리하여 백그라운드로 밀어냈습니다. Y축의 복잡한 금액 숫자도 과감히 숨겨(display: false), 오직 두 선의 교차와 이격이라는 본질에만 집중하게 만들었습니다.
3. 매월 선택 시 차트 동적 업데이트
사용자가 12개월 동안 매월 말일에 자산을 스위칭할 때마다, 자바스크립트는 내부적으로 계산을 마친 뒤 차트 인스턴스에 데이터를 밀어 넣고(push) 화면을 갱신(update())합니다.
function invest(assetType) {
const currentData = marketData[currentMonth];
// 1. 유저의 선택 자산 수익률 반영
myBalance = myBalance * (1 + (currentData[assetType] / 100));
// 2. SPY 비교군 수익률 반영
spyHoldBalance = spyHoldBalance * (1 + (currentData.spy / 100));
// 3. 차트 배열에 데이터 추가 및 즉각 렌더링
currentMonth++;
chartLabels.push(`${currentMonth}M`);
chartMyData.push(Math.floor(myBalance));
chartSpyData.push(Math.floor(spyHoldBalance));
chartInstance.update(); // 그래프 갱신
}
이 코드가 작동하는 순간, 폭락장인 4~6개월 차에 진입했을 때 회색 점선(SPY)은 끝없이 아래로 고꾸라집니다. 하지만 직전 1개월의 모멘텀 지표를 보고 기계적으로 TLT나 CASH를 선택한 사용자의 오렌지색 선은 하락을 멈추고 평온하게 횡보하거나 오히려 상승하는 짜릿한 시각적 경험을 제공합니다.
이것이 바로 숫자로 백 번 설명하는 것보다 차트 한 번을 보여주는 것이 더 강력한 이유입니다.