Skip to content

DEMO_README.md

Latest commit

 

History

History
183 lines (125 loc) · 5.36 KB

DEMO_README.md

File metadata and controls

183 lines (125 loc) · 5.36 KB

vibeDeploy Demo Mode - 영상 촬영 가이드

이 문서는 demo/full-flow 데모 흐름을 설명하며, 현재 PR을 통해 main 반영을 진행 중입니다.

1. 사전 준비

필요한 것

항목 설명
Node.js v20 이상 (터미널에서 node -v로 확인)
브라우저 Chrome 또는 Edge 권장
인터넷 불필요 (백엔드 없이 프론트엔드만 동작)

최초 1회 설치

터미널을 열고 아래 명령어를 순서대로 입력하세요.

# 1. 프로젝트 폴더로 이동
cd vibeDeploy-issues2

# 2. 데모 브랜치로 전환
git checkout demo/full-flow

# 3. 웹 폴더로 이동 후 패키지 설치
cd web
npm install

2. 데모 실행

# web 폴더 안에서 실행
npm run dev

터미널에 아래와 같이 표시되면 준비 완료:

▲ Next.js 16.1.7 (Turbopack)
- Local:  http://localhost:3000
✓ Ready in 500ms

데모 페이지 열기

브라우저에서 아래 주소를 입력하세요:

http://localhost:3000/demo

중요: /demo 경로입니다. localhost:3000만 입력하면 일반 홈페이지가 열립니다.

3. 데모 흐름 (총 약 40초, 자동 진행)

페이지를 열면 터치 없이 자동으로 아래 흐름이 진행됩니다.

Stage 1: 홈페이지 (5초)

화면 설명
vibeDeploy 로고 + 소개 메인 홈페이지가 표시됩니다
6명의 AI Council 에이전트 카드 Architect, Scout, Guardian 등
우측 상단 "Zero-Prompt" 버튼 파란색으로 깜빡이며 다음 화면을 예고

→ 5초 후 자동으로 다음 화면으로 전환

Stage 2: Zero-Prompt 시작 화면 (약 3초)

화면 설명
"Zero-Prompt Mode" 타이틀 자율 탐색 모드 진입
Target Apps: 5 목표 앱 수가 자동 입력됨
"Start Autonomous Agent" 버튼 자동으로 눌리며 "Starting..." 표시

→ 자동으로 에이전트가 시작되며 대시보드로 전환

Stage 3: 칸반 대시보드 (약 32초, 자동 진행)

5개의 앱 아이디어가 칸반 보드를 자동으로 통과합니다.

칸반 5컬럼

탐색 중 → GO 대기 → 빌드 중 → 배포됨
                              ↘ NO-GO / 패스

등장하는 앱 5개

순서 앱 이름 Vibe Score 최종 결과
1 QueueBite (레스토랑 대기열) 78.5 배포됨
2 SpendSense AI (지출 추적) 81.2 배포됨
3 PawPulse (반려동물 건강) 75.8 배포됨
4 StudyMate Lite (AI 플래시카드) 75.0 배포됨
5 CryptoFomo (가격 예측) 42.0 NO-GO (탈락)

진행 타임라인

 0초   첫 번째 카드 "QueueBite"가 탐색 중 컬럼에 등장
 5초   두 번째 카드 등장, 첫 번째 카드가 GO 대기로 이동 (점수 표시)
10초   GO 대기 카드가 자동으로 빌드 중으로 이동
16초   첫 번째 앱 배포 완료 (View App 버튼 생성)
18초   CryptoFomo가 42.0점으로 NO-GO 판정
32초   모든 카드 처리 완료 → "Session complete" 표시

화면 구성 요소

위치 요소 설명
상단 헤더 세션 ID, 상태(exploring → completed)
상단 카드 4개 StatusBar 탐색 중/GO 대기/빌드 중/배포됨 각 카운트
중앙 칸반 보드 5컬럼, 카드가 실시간으로 이동
하단 Action Feed 실시간 로그 (타임스탬프 포함)

4. 카드 클릭 (선택적 인터랙션)

데모는 자동 진행되지만, 원하면 카드를 클릭하여 상세 정보를 볼 수 있습니다.

카드 상태 클릭 시 동작
GO 대기 카드 모달 열림 → "GO! Build" 또는 "Pass" 버튼 표시
배포됨 카드 모달 열림 → "Open App" 링크 표시
기타 카드 모달 열림 → Vibe Score 표시

자동 진행 중에도 카드 클릭이 가능합니다. 영상에서 인터랙션을 보여주고 싶을 때 사용하세요.

5. 촬영 팁

권장 브라우저 설정

  • 화면 크기: 1920x1080 (Full HD) 이상
  • 다크 모드: 자동 적용됨 (별도 설정 불필요)
  • 확대/축소: 100% (Cmd+0 또는 Ctrl+0으로 초기화)
  • 북마크바: 숨기기 권장 (Cmd+Shift+B)
  • 탭: 데모 페이지 탭 하나만 열기

재촬영

페이지를 새로고침(F5 또는 Cmd+R)하면 처음부터 다시 시작됩니다.

서버 종료

촬영이 끝나면 터미널에서 Ctrl+C를 눌러 서버를 종료합니다.

6. 문제 해결

증상 해결
localhost:3000 접속 안 됨 터미널에서 npm run dev 실행 중인지 확인
화면이 빈 페이지 주소가 localhost:3000/demo인지 확인 (/demo 필수)
"Module not found" 에러 cd web && npm install 재실행
포트 3000 사용 중 npm run dev -- --port 3001로 다른 포트 사용

7. 파일 구조 (참고용)

web/src/
├── app/demo/page.tsx              ← 데모 페이지 (3 Stage 자동 진행)
├── hooks/use-demo-zero-prompt.ts  ← 데모용 상태 관리 (목업 데이터)
└── lib/demo-data.ts               ← 5개 앱 카드 + 타임라인 이벤트 정의

기존 코드는 일절 수정되지 않았습니다. 데모 파일 3개만 추가되었습니다.