한 줄 요약: “AI 판단 vs Buy & Hold” 비교 그래프를 다 만들고 나니, 원래 원했던 건 방문자가 직접 시작 날짜·금액을 골라보는 것이었다는 걸 알아채고, 로그인·서버 없이 브라우저에서 바로 계산되는 “만약 계산기”로 다시 만들었다.
이런 분께 도움돼요: 다 만들고 나서 “어, 이게 아닌데” 싶은 순간을 겪어본 분, 계정·로그인 없이 방문자 인터랙션을 넣고 싶은 분, Astro 같은 정적 사이트에서 클라이언트 사이드 계산을 어떻게 넣는지 궁금한 분.
Before
2주차 목표(작동하는 매매 로직 + 대시보드)를 다 채운 뒤, 대시보드 그래프에 “AI가 실제로 판단한 포트폴리오” vs “그냥 처음부터 계속 들고만 있었다면(Buy & Hold)“을 겹쳐 보여주는 선을 하나 추가했다. 여기까지는 고정된 그래프였다 — 방문자가 뭘 고르거나 입력할 수는 없고, 그냥 보여지는 화면이었다.
어떻게 했나
”어, 이게 아니었네”를 알아챈 순간
그래프를 다 만들고 나서, 이런 설명을 받았다.
“방문자가 ‘시작 날짜 + 금액’만 골라보면, AI가 그동안 실제로 내린 판단 기록을 가지고 ‘그때 넣었으면 지금 얼마가 됐을지’를 계산해서 보여주는 거예요. 계정·로그인 없이, 지금 있는 데이터만으로 만들 수 있어요.”
이미 만든 고정 그래프와는 다른, 방문자가 직접 조작하는 인터랙티브 기능이었다. 여기서 중요했던 건 이미 만든 걸 버리지 않고 “이건 방금 만든 것과 다르다”고 먼저 짚은 다음, 범위를 다시 확인한 것이다. 범위가 넓었다(전체 포트폴리오에 나눠 넣기 vs 종목 하나에만 넣기) — 애매하면 짐작해서 밀어붙이지 않고, 선택지 두 개를 만들어 되물었다.
Q. 방문자가 금액을 넣으면, 그 돈이 어떻게 적용되어야 할까요?
- 종목 하나를 골라서 그 종목에만
- 10종목에 균등분배(포트폴리오 전체)
“종목 하나에만”으로 정해지고 나서야 구현을 시작했다.
막힘 — 가격 히스토리 자체가 없었다
만들려고 보니 지금까지 종목별 “그날 가격”이 아예 저장되고 있지 않았다. 매매 판단(매수/매도/보유)과 이유만 기록에 남기고, 그날 가격은 계산에만 쓰고 버리고 있었던 것. 과거로 거슬러 계산하는 건 불가능했고, 오늘부터 새로 가격을 기록에 남기기 시작하는 걸로 범위를 좁혔다.
// scripts/trade.js — 기록에 가격을 함께 남기도록 한 줄 추가
data.기록.push({
날짜: 오늘,
종목: symbol,
판단,
이유,
가격: quote.c, // ← 이 한 줄이 "만약 계산기"의 재료가 된다
});
계산기 구현 — 서버 없이, 브라우저에서
종목별로 “날짜·판단·가격”만 뽑은 걸 빌드 시점에 페이지에 JSON으로 심어두고, 방문자가 종목·시작일·금액을 고르면 그 이후 기록을 순서대로 재생해서 최종 가치를 계산한다.
// 매수/매도 판단을 현금·보유수량에 반영하는 규칙 (src/lib/trade-rule.js)
export function applyDecision(state, 판단, 가격) {
if (판단 === '매수' && state.보유수량 === 0) {
const 수량 = Math.floor(state.현금 / 가격);
if (수량 > 0) {
state.현금 -= 수량 * 가격;
state.보유수량 = 수량;
}
} else if (판단 === '매도' && state.보유수량 > 0) {
state.현금 += state.보유수량 * 가격;
state.보유수량 = 0;
}
}
이 함수를 종목의 기록 위에서 날짜순으로 돌리기만 하면 끝이다. 서버 호출 없이 로그인도 필요 없다 — 이미 페이지에 심어둔 데이터로 브라우저가 계산한다.
검증 — 실제 API를 안 쓰고도 로직 확인하기
data/trades.json에 테스트용 기록(8/5 AAPL $200에 매수 → 8/6 $220으로 평가)을 잠깐 추가해서 빌드해보니, “$1,000 → $1,100 (+10.0%)“로 정확히 계산됐다. 확인 끝나고 git checkout으로 테스트 데이터는 바로 되돌렸다 — 데이터가 git에 있어서 안전하게 되돌릴 수 있었다.
그다음 GitHub Actions를 수동으로 한 번 실행해(workflow_dispatch), 오늘 밤을 기다리지 않고 바로 10종목 가격이 실제로 기록되기 시작하는 걸 확인했고, 배포된 사이트를 직접 열어 계산기가 실제로 작동하는 것까지 확인했다.
After
- 대시보드에 방문자가 직접 조작하는 “만약 계산기” 섹션이 생겼다 — 종목·날짜·금액을 고르면 즉석에서 결과가 나온다.
- 오늘부터 10종목 전부 가격이 쌓이기 시작했다 (과거는 소급 불가, 오늘이 기준일).
- 나중에
/simplify로 점검해보니, 이 계산기의 매수/매도 재생 로직이scripts/trade.js의 진짜 매매 로직과 같은 규칙을 따로 타이핑하고 있던 걸 발견해서, 공용 규칙 파일(src/lib/trade-rule.js)로 뽑아 정리했다.
배운 점 / 재사용 자산
- 다 만든 뒤에도 “이게 맞나?”를 한 번 더 짚기 — 이미 만든 걸 버리는 게 아니라, “방금 만든 것과 다르다”를 먼저 인정하고 범위를 다시 물어보면 된다.
- 범위가 애매하면 선택지로 되묻기 — “어떻게 적용될까요?”를 열린 질문으로 던지지 않고, 구체적인 선택지 2~3개를 만들어 고르게 하면 훨씬 빨리 정해진다.
- 정적 사이트에서도 인터랙티브 기능이 가능하다 — 서버 없이, 빌드 시점에 필요한 데이터를 JSON으로 페이지에 심어두고 브라우저에서 계산하면 로그인·API 없이도 방문자 맞춤 기능을 만들 수 있다.
- 실제 API 키를 안 쓰고도 로직을 검증할 수 있다 — 데이터 파일에 가짜 기록을 잠깐 넣고 빌드해서 확인한 뒤
git checkout으로 되돌리면, 비용 없이 안전하게 테스트할 수 있다.