Claude Code로 금·은·백금·구리·달러 시세 대시보드 만들기: React + Recharts 실전 가이드
Claude Code로 금시세, 은시세, 백금시세, 구리시세와 달러 인덱스를 한눈에 보는 차트 대시보드를 만드는 방법을 정리했습니다. yfinance 데이터 수집부터 React + Recharts로 localhost 시각화까지 단계별로 안내합니다.
원자재 가격과 달러 흐름은 시장을 읽는 핵심 지표입니다. 하지만 매번 여러 사이트를 돌아다니며 확인하는 건 번거롭죠.
이번 글에서는 Claude Code로 금·은·백금·구리·달러 시세 대시보드 만들기를 주제로, 데이터 수집부터 React 시각화까지 모두 Claude Code로 생성하는 방법을 구조화해서 설명합니다.
핵심은 단 하나입니다.
👉 코드를 직접 짜는 게 아니라, Claude Code에게 시키는 것!
🧠 Claude Code란?
Claude는 Anthropic이 개발한 AI 모델입니다.
일반 채팅형 Claude와 달리, Claude Code는:
- 프로젝트 구조 생성
- 파이썬 스크립트 작성
- React 프로젝트 세팅
- 패키지 설치 안내
- 실행 오류 수정
까지 수행하는 실행형 AI 개발 파트너입니다.
✅ Step 1. 원자재 + 달러 데이터 수집 (yfinance)
이번 프로젝트에서는 Yahoo Finance에서 제공하는 티커를 사용합니다.
https://finance.yahoo.com/
| 항목 | yfinance 코드 |
| 금 | GC=F |
| 은 | SI=F |
| 구리 | HG=F |
| 백금 | PL=F |
| 달러 인덱스 | DX-Y.NYB |
🔹 Claude Code에 이렇게 요청하세요
VS Code에서 Claude 실행 후:
Claude Code는:
- Python 파일 생성
- 필요한 라이브러리 안내
- 실행 명령어 작성
까지 자동으로 수행합니다.
✅ Step 2. React + Recharts 대시보드 생성
이제 시각화 단계입니다. 우리는 다음 조합을 사용합니다:
- React
- Recharts
- localhost 실행
🔹 Claude Code에 이렇게 요청하세요
Claude Code는:
- Vite 프로젝트 생성 명령 안내
- npm 설치
- Recharts 설정
- CSV 파싱 코드 작성
- 실행 방법 안내
까지 자동으로 생성합니다.
※ Node.js가 설치되어 있지 않은 경우, Claude Code의 도움(설치하는 방법을 직접 물어봄으로써)을 받아 진행하면 됩니다.
📊 최종 화면 구성
대시보드는 다음 요소를 포함하도록 요청하면 좋습니다:
- 통합 라인 차트
- 항목별 색상 구분
- 범례(Legend)
- 툴팁(Tooltip)
- 반응형 레이아웃
추가로 이렇게 요청하면 더 좋아집니다:
이렇게 하면 자산 간 상대 수익률 비교가 가능합니다.
🔁 자동 업데이트까지 연결하기
여기서 끝이 아닙니다. Claude에게 이어서 요청하세요:
이렇게 하면:
- 매일 CSV 갱신
- React는 최신 데이터 반영
- 완전 자동화 대시보드 완성
까지 가능하답니다.
🎯 Claude Code로 하는 이유
기존 방식:
- 파이썬 직접 코딩
- React 구조 설계
- 차트 라이브러리 문서 검색
- 에러 수정 반복
Claude Code 방식:
- 구조 설계 요청
- 코드 생성
- 실행
- 수정 요청
👉 학습 속도와 구현 속도가 모두 빨라집니다.
📈 활용 확장 아이디어 예시
- 이동 평균선 추가
- 상승/하락 색상 구분
- API 서버로 확장 (FastAPI)
- 배포 (Vercel, Netlify)
❓ 자주 묻는 질문 (FAQ)
Q1. yfinance는 무료인가요?
네, 기본 사용은 무료입니다.
Q2. 선물 가격이라 실제 현물과 차이가 있나요?
약간의 차이는 있을 수 있습니다.
Q3. 서버 없이도 가능한가요?
네. CSV 기반으로 localhost에서 충분히 가능합니다.
Q4. 배포도 가능할까요?
React 빌드 후 Netlify/Vercel 배포 가능합니다.
Q5. 다른 자산도 추가할 수 있나요?
네. 티커 코드만 추가하면 됩니다.
Q6. 실시간 데이터도 가능한가요?
별도 API 연동이 필요합니다.
🏁 결론
오늘은 Claude Code로 금·은·백금·구리·달러 시세 대시보드 만들기를 단계별로 정리했습니다.
핵심은 단순합니다.
👉 데이터 수집도 Claude에게
👉 프론트엔드 구성도 Claude에게
👉 자동 실행 설정도 Claude에게
이제 직접 코드를 처음부터 끝까지 짤 필요는 없습니다. Claude Code와 함께라면, 학습과 구현을 동시에 진행할 수 있으니까요.
Powered by BlogPro