simon-presenter

simon-presenter

앱을 실제로 띄우고 Playwright headed 브라우저로 조작하면서, 유저스토리 기반 시나리오를 인터랙티브하게 시연하는 라이브 데모 스킬.

핵심 가치:

• "보는 것이 믿는 것이다." — 스크린샷이나 설명이 아닌, 실제 동작하는 앱을 보여준다.
• "사용자 관점으로 설득한다." — 기술 구현이 아닌 유저 가치 중심으로 시연한다.
• "페이스를 사용자가 제어한다." — 시나리오 전환은 항상 사용자 신호를 기다린다.

Session Isolation Protocol

런타임 산출물을 홈 디렉토리에 세션별로 격리 저장한다. 모든 .claude/presenter/ 경로를 {SESSION_DIR}/presenter/로 해석한다. .claude/company/, .claude/pm/ 참조 시에도 해당 세션의 {SESSION_DIR} 기준으로 읽는다.

Phase 1에서 SESSION_DIR 결정:

PROJECT_SLUG=$(git rev-parse --show-toplevel | tr '/' '-')
SESSION_ID="presenter-$(date +%Y%m%d-%H%M%S)"
SESSION_DIR="${HOME}/.claude/projects/${PROJECT_SLUG}/sessions/${SESSION_ID}"
mkdir -p "${SESSION_DIR}/presenter"

---

Phase 1: 스펙 발견 및 프로젝트 심층 분석

시연 스크립트의 정확도는 이 Phase의 깊이에 달려 있다. 프로젝트를 피상적으로 훑으면 Playwright가 존재하지 않는 셀렉터를 클릭하거나, 잘못된 URL로 이동하거나, 필수 환경 변수 없이 서버를 띄우다 실패한다. 시연 실패의 대부분은 준비 부족에서 온다.

Reference Loading: Phase 1 진입 시 discovery-guide.md 읽기

1.1 모드 감지

simon-company/simon-pm 산출물 유무에 따라 CONNECTED / STANDALONE 모드를 결정한다.

1.2 스펙 파일 탐색

.claude/company/spec.md → .claude/pm/spec.md → .claude/pm/prd.md → 루트 스펙 파일 순으로 탐색한다.

1.3 스펙 분석

유저스토리, 수용 기준(AC), 핵심 기능, 기술 스택을 스펙에서 추출한다.

1.4 프로젝트 심층 탐색

라우트, UI 셀렉터, 인증, API, DB, 환경 변수, 기동 방법을 병렬로 탐색한다.

1.5 분석 결과 정리

탐색 결과를 .claude/presenter/discovery.md에 정리한다. 템플릿은 discovery-guide.md 참조.

1.6 유저스토리별 코드 플로우 추적

각 유저스토리의 사용자 동작 → 코드 실행 경로를 끝까지 추적하여 시연용 사전 데이터와 모킹 대상을 식별한다.

---

Phase 2: 시연 계획 생성

2.1 시나리오 설계 원칙

시나리오는 영업/홍보 관점에서 설계한다. 기술 검증이 아니라 가치 전달이 목적이다.

시나리오 순서 전략:

1. 임팩트 퍼스트: 가장 인상적인 기능을 앞에 배치 (첫인상이 중요)
2. 스토리 아크: 자연스러운 사용자 여정 흐름 (가입 → 핵심기능 → 결과 확인)
3. 클라이맥스 배치: 가장 기술적으로 인상적인 기능(실시간, AI 등)은 후반에

2.2 시나리오 문서 형식

각 시나리오를 다음 형식으로 작성한다:

## 시나리오 N: [제목]

**관련 유저스토리**: US-XXX
**시연 목적**: 이 시나리오로 보여주고 싶은 핵심 가치
**사전 조건**: 이 시나리오 시작 전 필요한 상태
**예상 소요**: ~N분

### 동작 순서
1. [URL]로 이동
2. [요소]에 [값] 입력
3. [버튼] 클릭
4. → 기대 결과: [화면에 보이는 것]

### 나레이션 포인트
- 이 기능이 사용자에게 주는 가치
- 기존 방식 대비 개선점
- 기술적 하이라이트 (필요시)