GitHub Spec Kit을 VS Code에서 실행할 수 있도록 설치합니다.

https://github.com/github/spec-kit

  1. 설치: uv tool install specify-cli --from git+https://github.com/github/spec-kit.git
  2. 초기화: specify init <PROJECT_NAME>
  3. 체크: specify check
    VS Code의 경우, .github/prompt  폴더에 다음 파일들이 설치가 된다.


  4. Copilot Chat에서 연결 되었는지 확인
  5. 실행 순서 예시
    /speckit.constitution
/speckit.specify
(필요시) /speckit.clarify
/speckit.plan
/speckit.checklist    ← 요구/품질 기준 점검
/speckit.tasks
/speckit.analyze     ← 아티팩트 일관성 분석
/speckit.implement

    1. 원칙 정의
      1. /speckit.constitution 
      2. 원칙 예시
        # 프로젝트 원칙을 만들어줘.
- 코드 품질: 간결하고 읽기 쉬운 코드로 주석은 함수 단위로 간결하게 기록
- 테스트: 외부 API 막히지 않도록 잦은 반복 요청 자제하고 최대 1번 동작 가능 여부 테스트
- 테스트 환경: 최종 Azure 클라우드 서비스에 배포하는 것을 고려
- 사용자 경험: 직관적이고 빠른 인터페이스
- 성능: 불필요한 라이브러리 사용 금지, 최소한의 의존성으로 구현
      3. 다른 예시
        **7 Core Principles:**
1. **API-First Design** - RESTful endpoints with schema validation
2. **Serverless-Native Architecture** - Cost-optimized Azure services
3. **Test-Driven Development** - 70%+ coverage requirement (NON-NEGOTIABLE)
4. **Real-time Data Efficiency** - API rate limit management and caching strategy
5. **Azure-Native Deployment** - Bicep IaC mandatory
6. **Security & Authentication** - JWT with bcrypt, secrets management
7. **Observability & Monitoring** - Structured logging and metrics

**Technology Constraints:**
- Locked-in stack versions (Python 3.11, Vue 3, FastAPI, etc.)
- Mandatory tools (pytest, Pinia, ECharts, Bicep)

**Development Standards:**
- Code style guides for Python, Vue, and Bicep
- Environment variable requirements
- Cosmos DB schema specifications

**Governance:**
- Semantic versioning for constitution updates (1.0.0 initial)
- PR compliance checklist
- Emergency exception process for production hotfixes
    2.  명세화
      1. /speckit.specify 
        # 나의 관심 주식을 모아 주는 주식 앱을 만들어줘.

1. 사용자별로 개인화된 정보를 저장해야함 (관심종목, 포트폴리오)

2. 관심종목(워치리스트)
	•	WHAT: 심볼 검색→워치리스트 추가/삭제. 리스트내 티커이동가능, 간단 지표 표시.
	•	WHY: 자주 보는 종목을 빠르게 모아봄
	•	성공 기준: 워치리스트 추가 후 3초 이내 카드에 현재가/변동률 표시.

3. 시세 보기
	•	WHAT: 종목 상세에서 현재가/일 변동률/거래량/장상태(장중/마감) 표시. 준실시간임=일 단위로 표시
	•	WHY: 과도한 갱신 없이 핵심 정보만 명확히. 상세 시세의 경우 일단위의 Sparkline 캔틀 차트로 표시
	•	성공 기준: 95%의 조회가 1초 내 결과 노출(체감 기준).

4. 포트폴리오/보유종목
	•	WHAT: 로그인 사용자별 포트폴리오 장기투자, 단투, 정찰병으로 구분하고 종목(symbol, 수량, 평균단가)을 CRUD. 총평가·손익·수익률 집계. 한국 주식과 미국 주식을 분리 합산하고 수익률 히트맵트리 활용 Apache ESchart
	•	WHY: 보유 현황과 손익을 한 화면에서 빠르게 파악.
	•	성공 기준: 새 포트폴리오 생성~종목 1개 추가하거나 삭제하는데 2분 이내.

5. 데이터 수집
	•	WHAT: 외부 주식 API(Alpha Vantage API)를 활용하여 데이터를 수집
	•	WHY: 외부 주식 API로 실시간 데이터 확보
	•	성공 기준: 외부 API 호출결과 출력 (429 too many request 에러 나면 안됨)


    3. 명확성
      1. /speckit.clarify 그냥 수행
        # 중간에 기간 선택하라고 한 경우,

선택할 수 있는 옵션을 탭으로 제공하고, 클릭하면 그 기간에 맞게 그려주길 원해. 아래는 예시
{ label: '5m', value: '5m_1d', interval: '5m', period: '5m' },    // 5분봉 1일
{ label: 'H', value: '1h_1mo', interval: '1h', period: '1h' },    // 1시간봉 1개월
{ label: 'D', value: '1d_3mo', interval: '1d', period: '1d' },    // 1일봉 3개월
{ label: 'W', value: '1wk_2y', interval: '1wk', period: '1wk' },  // 1주봉 2년
{ label: 'M', value: '1mo_5y', interval: '1mo', period: '1mo' }   // 1월봉 5년

yfinace.download에 따르면, Date Open High Low Close Adj Close Volume 이 순서대로 값이 들어와서 캔들차트를 그릴 수 있을거야.
    4. 계획
      1. /speckit.plan
        Follow instructions in speckit.plan.prompt.md.
• 개발: 인프라 IaC, 프론트엔드, 백엔드, DB(MySQL), 가상환경에서 각각 필요한 리소스 및 패키지 정의 및 실행
• 인프라: Azure 100% 활용
• 프론트엔드: Vue3 + Tabler(Dashboard) + ECharts(Chart) -> 정적 배포
• 백엔드: python3 + FastAPI -> Azure Container Apps 로 배포
• DB: Azure MySQL 8.0 (Standard_B2s), 테스트 환경은 가상 환경에 MySQL 8.0으로 배포하여 테스트
• 실시간 시세: https://github.com/ranaroussi/yfinance API 활용하여 백엔드 API에서 호출하며 DB에 저장
• 인증: 이메일 + 패스워드 기반의 user 테이블 활용
• 데이터 모델 설계: 포트폴리오 테이블, 보유종목 테이블, 즐겨찾기 테이블, 사용자 테이블, 뉴스 테이블 (yfinance 스키마 호환)
    5. Task 생성
      1. /speckit.task 요청하면 아래와 같이 스스로 만듬. 이건 상황에 따라 다름
        ✅ Phase 2 Implementation Tasks 생성 완료
생성된 작업 요약
총 19개 작업을 6개 카테고리로 구성했습니다:

Phase 2A: Infrastructure & Database (2 tasks)
INFRA-001: 로컬 개발 환경 설정 (2시간)
DB-001: 데이터베이스 스키마 구현 (4시간, Alembic 마이그레이션 6개)
Phase 2B: Backend API Development (5 tasks)
BACKEND-001: FastAPI 핵심 인프라 (6시간)
BACKEND-002: 인증 API (6시간, FR-001/FR-002)
BACKEND-003: 워치리스트 API (8시간, FR-003~FR-006)
BACKEND-004: 주식 데이터 API (12시간, FR-007~FR-010, yfinance 통합)
BACKEND-005: 포트폴리오 API (10시간, FR-013~FR-019)
Phase 2C: Frontend Development (5 tasks)
FRONTEND-001: Vue3 프로젝트 설정 & 라우팅 (4시간)
FRONTEND-002: 로그인/회원가입 페이지 (6시간)
FRONTEND-003: 워치리스트 페이지 (10시간, User Story 1)
FRONTEND-004: 주식 상세 페이지 (12시간, User Story 2, ECharts)
FRONTEND-005: 포트폴리오 페이지 (12시간, User Story 3)
Phase 2D: Testing & Quality Assurance (2 tasks)
TEST-001: 백엔드 통합 테스트 (8시간, Docker Compose)
TEST-002: 프론트엔드 E2E 테스트 (8시간, Cypress/Playwright)
Phase 2E: Deployment & DevOps (1 task)
DEPLOY-001: Azure 인프라 구축 (10시간, Bicep IaC + CI/CD)
Phase 2F: Documentation & Handoff (4 tasks)
DOC-001: API 문서화 & Postman 컬렉션 (4시간)
DOC-002: 배포 가이드 & 운영 런북 (4시간)
주요 특징
명확한 의존성 그래프: 작업 간 의존성을 명시하여 병렬 개발 가능
Constitution 준수: 모든 작업에 5가지 원칙 체크리스트 포함
성능 목표 명시: <200ms, <1s, <3s, <2min 타겟 포함
상세한 체크리스트: 각 작업마다 세부 단계 리스트
Acceptance Criteria: 완료 기준 명확히 정의
예상 소요 시간
총 예상 시간: 80-100시간
1명 개발자 기준: 2-3주
병렬 개발 가능: Backend + Frontend 동시 진행 시 1.5-2주


주의할 점: yfinance API는 Azure 환경에 들어가면 거의 429 too many request 에러가 발생한다. 유료 stock app을 써야할 수 있다. 그래서 유료 API로 코드 전환 하려다가 참음.


  • 레이블 없음

2 댓글

  1. 김현수

    참조 파일

    speckit.specify.mdspeckit.plan.mdspeckit.constitution.mdcopilot-instructions.md

  2. 김현수

    new version

    Constitution

    # 프로젝트 원칙
- 코드 품질: 간결하고 읽기 쉬운 코드, 함수 단위 주석
- 테스트: 외부 API 반복 요청 최소화, 1회 동작 확인
- 테스트 환경: Azure 클라우드 배포 고려, 작은 사이즈부터 확장 가능
- 사용자 경험: 직관적이고 빠른 인터페이스
- 성능: 불필요한 라이브러리 금지, 최소 의존성

# 7 Core Principles
- API-First Design – RESTful + 스키마 검증
- Serverless-Native Architecture – 비용 최적화 Azure 서비스
- Test-Driven Development – 커버리지 70% 이상 (필수)
- Real-time Data Efficiency – API Rate Limit 관리
- Azure-Native Deployment – Bicep IaC 필수
- Security & Authentication – JWT + bcrypt, 시크릿 관리
- Observability & Monitoring – 구조화된 로깅 및 메트릭

# 기술 제약
- Python 3.11, Vue 3, FastAPI 고정
- 필수 도구:  pytest, Pinia, Tabler, ECharts, Playwright, Bicep

# 개발 표준
- Python/Vue/Bicep 코드 스타일 가이드
- 환경 변수 규칙
- Cosmos DB 스키마 명세
- TDD 준수 (Red-Green-Refactor)

# 거버넌스
- Semantic Versioning (v1.0.0 시작)
- PR 체크리스트
- 프로덕션 핫픽스 예외 프로세스

    Specify

    # 나의 주식(MyStock) 앱
- 메뉴 구조: 로그인 → 대시보드(관심종목, 포트폴리오), 활성 메뉴 하이라이트
- UI 요소: 우측 상단 로그인 이메일 + 로그아웃, 다크 모드 토글

# 핵심 기능
## 사용자 정보 관리
- WHAT: 이메일, 패스워드 기반 회원가입/로그인
- WHY: MVP 모델, 패스워드 정책 느슨
- 성공 기준: 로그인 후 로그아웃 가능

## 관심종목(워치리스트)
- WHAT: 심볼 검색 → 추가/삭제, 메모 기능, 드래그로 순서 변경
- WHY: 자주 보는 종목 빠른 접근
- 성공 기준: 현재가/변동률 표시, 수정/삭제 가능

## 포트폴리오(보유종목)
- WHAT: 장기/단기/정찰병 서브메뉴, 종목별 상세 데이터 + 히트맵 시각화
- WHY: 손익 현황 한눈에 파악
- 성공 기준: 최대 10개 종목 관리, 등록/수정/삭제 가능

## 데이터 수집
- WHAT: Alpha Vantage API 활용
- WHY: 실시간 시세 확보
- 성공 기준: API 호출 결과 출력, 429 에러 시 재요청 처리

    Plan

    # 개발
- 인프라 IaC
- 프론트엔드(Vue3)
- 백엔드(FastAPI)
- DB(CosmosDB)
- 테스트(pytest, Playwright)
- 배포(Actions)
- SRE(Log Analytics)

## 인프라: 100% Azure 활용

## 프론트엔드
- 프레임워크: Vue3
- 디자인: Tabler 오픈소스
- 차트: ECharts
- 배포: Azure Static Web App

## 백엔드
- Python 3.11 + FastAPI
- 배포: Azure Container Apps

## DB
- Azure CosmosDB NoSQL

## TDD 기반 개발
- pytest, Playwright

## 실시간 stock 시세
- Alpha Vantage API (Symbol별 시세 + 캔들 차트)

## 인증
- 이메일 + 패스워드, CosmosDB user 테이블

## 데이터 모델
- user, 관심종목, 포트폴리오(장기/단기/정찰병)

## 배포
- GitHub Actions 통한 배포
- IaC 기반 인프라 프로비저닝 (Database 스키마 구성 포함)
- frontend -> Azure Static Web App
- backend -> Azure Container Apps
- Log Analytics에 App Log 수집 (SRE 위해 필요)
- CORS 이슈 없도록 구성



    정재되기 전 버전

    # Constitution
## 프로젝트 원칙을 만들어줘.
- 코드 품질: 간결하고 읽기 쉬운 코드로 주석은 함수 단위로 간결하게 기록
- 테스트: 외부 API 막히지 않도록 잦은 반복 요청 자제하고 최대 1번 동작 가능 여부 테스트
- 테스트 환경: 최종 Azure 클라우드 서비스에 배포하는 것을 고려하며 최대한 작은 사이즈부터 시작하여 확장 가능해야함.
- 사용자 경험: 직관적이고 빠른 인터페이스
- 성능: 불필요한 라이브러리 사용 금지, 최소한의 의존성으로 구현

**7 Core Principles:**
1. **API-First Design** - RESTful endpoints with schema validation
2. **Serverless-Native Architecture** - Cost-optimized Azure services
3. **Test-Driven Development** - 70%+ coverage requirement (NON-NEGOTIABLE)
4. **Real-time Data Efficiency** - API rate limit management and caching strategy
5. **Azure-Native Deployment** - Bicep IaC mandatory
6. **Security & Authentication** - JWT with bcrypt, secrets management
7. **Observability & Monitoring** - Structured logging and metrics

**Technology Constraints:**
- Locked-in stack versions (Python 3.11, Vue 3, FastAPI, etc.)
- Mandatory tools (pytest, Pinia, ECharts, Bicep)

**Development Standards:**
- Code style guides for Python, Vue, and Bicep
- Environment variable requirements
- Cosmos DB schema specifications

**Governance:**
- Semantic versioning for constitution updates (1.0.0 initial)
- PR compliance checklist
- Emergency exception process for production hotfixes


# Specify 
## 나의 관심 주식을 모아 주는 주식 앱을 만들어줘.
메뉴는 로그인을 했을 때, 대시보드로 진입 가능하고, 대시보드 메뉴는 관심종목, 포트폴리오로 구성되어 있으며, 활성화된 메뉴는 하이라이트 필요함. 대시보드 우측 상단에는 로그인 이메일 주소를 보여주고 클릭시 로그아웃 기능이 들어감. 메뉴 우측편에는 Dark 모드를 설정할 수 있는 기능을 제공

1. 사용자별로 개인화된 정보를 저장해야 함. (관심종목, 포트폴리오)
- WHAT: 회원가입 및 로그인에 필요한 정보 (이메일주소, 패스워드)
- WHY: 패스워드는 MVP 모델이기 때문에 느슨하게 적용 가능
- 성공 기준: 로그인을 해야지만 아래 대시보드 로그아웃이 동작해야함.

2. 관심종목(워치리스트) - 대시보드 메뉴 1
- WHAT: 심볼 검색→관심종목 추가/삭제. 리스트내 티커이동가능, 간단 지표 표시. (종목 추가시에는 종목에 대한 간단 메모 기능을 포함합니다.)
- WHY: 자주 보는 종목을 리스트로 빠르게 모아봄, 종목코드|현재가|전일대비|변동률|종목메모 로 컬럼 구분  
- 성공 기준: 관심종목 추가 후 현재가/변동률 표시. 종목은 드래그를 통해 리스트 내에서 위 아래로 우선 순위 변경이 가능해야함. 종목 수정 및 삭제 기능 동작 가능해야함.

3. 포트폴리오(보유종목) - 대시보드 메뉴 2
- WHAT: 로그인 사용자별 포트폴리오 장기투자, 단기투자, 정찰병(서브 메뉴)으로 제공, 각 서브메뉴는 종목(symbol)별로 다음의 데이터를 제공 (컬럼 구조: 종목코드|수량|평균단가|투자금|현재가|평가금액|손익|수익률), 종목코드|수량|평균단가를 제공, 등록된 종목은 리스트로 관리됨, 서브메뉴 하단의 리스트 상단 좌측에는 총투자금|현재가치|수익/손실|수익률을 달러 단위로 표시, 서브메뉴 하단의 리스트 상단 우측에는 전체 Symbol에 대하여 수익률을 Apache Echart 히트맵트리로 표현, 수익은 녹색, 손실은 붉은색으로 표현, 히트맵트리는 수익률에 따라 짙은 녹색 - 밝은 녹색 - 검정색 - 밝은 붉은색 - 어두운 붉은색 형태로 구분함
- WHY: 보유 현황과 손익을 한 화면에서 한 눈에 쉽고 빠르게 파악.
- 성공 기준: 사용자별 제공, 각 서브메뉴의 종목은 최대 10개까지 관리 가능, 종목 코드를 등록/수정/삭제 되어야 함.

4. 데이터 수집
- WHAT: 외부 주식 API(Alpha Vantage API)를 활용하여 데이터를 수집
- WHY: 외부 주식 API로 실시간 데이터 확보
- 성공 기준: 외부 API 호출결과 출력 (API는 429 too many request 에러가 발생할 수 있으므로 대기 후 재요청 가능하도록 구현)

# Plan
• 개발: 인프라 IaC, 프론트엔드, 백엔드, DB(Azure CosmosDB NoSQL), 가상환경에서 각각 필요한 리소스 및 패키지 정의 및 실행, 해당 서비스는 MVP 모델이지만 안정적인 서비스 제공이 필수입니다. 따라서 서버리스 서비스를 주로 활용합니다. SRE를 위해 로그 데이터를 Log Analytics에 저장합니다.
• 인프라: Azure 100% 활용
• 프론트엔드
- 프레임워크: Vue3
- 웹 디자인: Tabler 오픈소스 (선택 메인 메뉴 활성화, 다크모드, 기본 구조 활용)
- 차트: ECharts 오픈소스
- 배포: Azure Static Web App
• 백엔드
- python3.11 + FastAPI
- 배포: Azure Container Apps
• DB: Azure CosmosDB NoSQL
• 실시간 시세: Alpha Vantage API 활용
- Symbol별 실시간 시세 데이터: 종목코드|현재가|전일대비|변동률
- Symbol별 기간 데이터: 5분, 1시간, 1일, 1주, 1달 단위 캔들 차트 데이터
- Symbol별 실시간 시세 데이터 news 
• 인증: 이메일 + 패스워드 기반이며, CosmosDB user 테이블 활용
• 데이터 모델 설계: user 테이블, user 별 관심종목, user 별 포트폴리오 테이블(장기투자, 단기투자, 정찰병)