바이브 코딩으로 차트 분석 사이트 만들어보기

주식 차트를 분석하는 웹앱을 만들고 싶어, 추천하는 기술 스텍과 방법을 담은 prd를 만들고 웹앱 개발 시작해줘

주식 차트 분석 프로그램 (Stock Chart Analyzer) PRD & 구현 계획서
본 문서는 국내(KOSPI/KOSDAQ) 및 해외(S&P500/NASDAQ) 주식 차트 분석 프로그램의 제품 요구 사항(PRD)과 최신 기술 스택 추천, 단계별 구현 전략을 담고 있습니다.

1. 프로젝트 개요 & 목표 (Product Overview)
목적: 사용자가 국내외 주식 차트를 실시간/주기별로 조회하고, 보조지표(이동평균선, RSI, MACD, 볼린저밴드 등) 및 차트 패턴(지지/저항선, 골든크로스 등)을 자동 분석받으며, AI를 활용해 차트 리포트 및 트레이딩 인사이트를 얻을 수 있는 프리미엄 주식 분석 웹 애플리케이션 구축.
주요 타겟:
기술적 분석을 쉽고 빠르게 수행하고 싶은 개인 투자자
다양한 보조지표와 신호를 통합해서 확인하고 싶은 트레이더
AI 차트 해설 및 종목 요약 정보를 필요로 하는 사용자
2. 추천 기술 스택 (Recommended Tech Stack)
영역	추천 스택	선정 이유
Frontend	Next.js 14+ (React, TypeScript)	SSR/SSG 지원, 빠른 초기로딩, SEO 최적화, API 라우트 일체화
Styling & UI	Tailwind CSS + Lucide Icons + Dark Theme	금융/주식 앱 특화 다크 모드, 수려한 글래스모피즘 UI, 반응형 레이아웃
Chart Engine	Lightweight Charts (TradingView)	금융 시장 표준 캔들스틱 차트 라이브러리 (최상의 성능, 확대/축소, 줌/팬, 터치 지원)
Backend & Analytics	Python (FastAPI)	주식 데이터 수집(yfinance, FinanceDataReader, pykrx), 기술적 분석(pandas-ta, ta) 및 기술지표 연산에 최적화
AI Insights	OpenAI GPT-4o / Claude API	차트 데이터 및 이미지 캡처/지표 값을 종합하여 AI 기술 분석 리포트 자동 생성
Database (선택)	SQLite / PostgreSQL (Prisma ORM)	관심 종목(Watchlist), 사용자 분석 노트, 알림 설정 저장
3. 핵심 기능 요구사항 (Core Features)
3.1. 차트 시각화 & 인터랙션 (Chart Visualization)
캔들스틱 & 거래량 차트: 일봉, 주봉, 월봉, 분봉 선택 가능.
보조지표 (Technical Indicators):
이동평균선 (SMA/EMA 5, 20, 60, 120일)
볼린저 밴드 (Bollinger Bands)
RSI (상대강도지수, 과매수/과매도 레벨 표시)
MACD (이동평균 수렴·확산 및 히스토그램)
Stochastic Oscillator
오버레이 & 주석 도구: 차트 내 지지/저항선 자동 산출 및 표시, 매수/매도 시그널 마커.
3.2. 자동 패턴 & 신호 탐지 (Pattern & Signal Detection)
골든크로스 / 데드크로스 탐지: 5일-20일, 20일-60일 이동평균선 교차 신호 표시.
지지선/저항선(Support & Resistance) 자동 계산 (피봇 포인트 및 피보나치 되돌림 지원).
RSI 다이버전스 / 과매수(70 이상) · 과매도(30 이하) 자동 알림 마크.
3.3. AI 차트 분석가 (AI Chart Analyst)
선택된 종목의 차트 데이터(OHLCV + 지표 데이터)를 AI 모델에 전달하여 종합 분석 리포트 생성.
추세 진단 (상승/하강/박스권)
매수/매도 주의 구간 제시
리스크 요인 및 변동성 평가
3.4. 관심종목 & 다중 차트 레이아웃 (Watchlist & Grid View)
사용자의 관심 종목 목록 (KOSPI, KOSDAQ, NASDAQ 주요 종목 등).
종목 검색 기능 (자동완성, 한국어/영문 종목명 및 티커 지원).
2~4개 종목 차트 분할 비교 뷰.
4. 서비스 아키텍처 (Architecture Diagram)
종목 검색 / 차트 요청
Lightweight Charts 렌더링
주식 OHLCV 데이터 수집
기술적 지표 계산
차트 인사이트 리포트 요약
JSON 응답 데이터
Client Browser - Next.js / React
Python FastAPI Backend
TradingView Canvas Chart
Yahoo Finance / FinanceDataReader API
pandas-ta / ta Library
AI Model OpenAI/Claude/Gemini
5. 단계별 개발 로드맵 (Development Roadmap)
Phase 1: MVP 구축 (기본 차트 및 데이터 연동)
Python FastAPI 백엔드 구축 및 yfinance / FinanceDataReader 데이터 수집 API 구현.
Next.js 기반 다크모드 대시보드 UI 레이아웃 설계.
Lightweight Charts 캔들스틱 + 거래량(Volume) 차트 연동.
종목 검색 기능 및 주요 지표(SMA 5/20/60/120) 구현.
Phase 2: 기술적 보조지표 & 신호 엔진 추가
RSI, MACD, 볼린저밴드 연산 및 하단 서브 차트 렌더링.
지지/저항선 산출 및 차트 위 라인 드로잉.
골든크로스, RSI 과매수/과매도 매매 신호 마커 차트 표기.
Phase 3: AI 차트 해석 & 리포트 자동 생성
현재 차트 지표 상태를 프롬프트화하여 AI 인사이트 제공 기능 개발.
AI 요약 카드 UI 구현 (추세 예측, 기술적 진단, 유의사항).
User Review Required
IMPORTANT

사용자 의견 반영 요청:

백엔드 및 데이터 수집 방식: Python FastAPI + yfinance/FinanceDataReader 조합으로 시작하는 것에 동의하시나요?
프론트엔드 차트 라이브러리: TradingView의 Lightweight Charts를 활용한 웹 앱 구성으로 진행할까요?
대상 종목 범위: 한국 주식(KOSPI/KOSDAQ)과 미국 주식(NASDAQ/S&P500) 모두 지원하도록 개발할까요?
Open Questions
NOTE

AI 분석 기능에 사용하고자 하는 특정 AI API Key(OpenAI GPT-4o, Claude, 또는 Gemini)가 있으신가요? (초기에는 시뮬레이션 mock 데이터 및 선택적 API 연동으로 구성 가능합니다)
Proposed Changes
백엔드 (Python / FastAPI Service)
[NEW] 
main.py
FastAPI 애플리케이션 및 종목 데이터/지표 계산 라우트 구현
[NEW] 
stock_service.py
yfinance / FinanceDataReader 연동 OHLCV 수집 및 pandas-ta 기술지표 연산
[NEW] 
requirements.txt
필수 패키지 목록 (fastapi, uvicorn, yfinance, FinanceDataReader, pandas, pandas-ta 등)
프론트엔드 (Next.js / React Frontend)
[NEW] 
package.json
Next.js, Lightweight Charts, Lucide Icons, Tailwind CSS 설정
[NEW] 
page.tsx
대시보드 메인 화면, 종목 검색 헤더, 관심 종목 사이드바, 차트 및 AI 리포트 영역
[NEW] 
StockChart.tsx
TradingView Lightweight Charts 캔들스틱 + 거래량 + 보조지표 렌더링 컴포넌트
Verification Plan
Automated Tests
Python backend API 테스트 (pytest 또는 curl로 /api/stock/{ticker} OHLCV 및 지표 JSON 데이터 응답 검증)
프론트엔드 빌드 테스트 (npm run build)
Manual Verification
웹 브라우저에서 종목 검색(예: 삼성전자 005930.KS, Apple AAPL, Tesla TSLA) 후 차트 및 이동평균선, RSI, MACD가 정확하게 렌더링되는지 확인.
타임프레임 변경(일봉/주봉/월봉) 및 보조지표 온/오프 인터랙션 동작 검증.