데모 스크립트 스킬

라이브 제품을 탐색하고 사용자와 공동 작성하여 구조화된 데모 비디오 스크립트를 만듭니다.

왜 필요한가

좋은 데모 비디오에는 좋은 스크립트가 필요합니다. 나쁜 데모는 두서없이 설명하고, 중요한 부분을 건너뛰거나, 너무 빠르게 진행됩니다. 이 스킬은 /record-demo가 자동으로 실행할 수 있는 정확하고 검토 가능한 스크립트를 생성합니다.

워크플로

1단계: 브리핑

사용자로부터 맥락을 수집합니다:

필수:

데모할 제품/기능
대상 URL (스테이징/프로덕션)
청중은 누구인가? (잠재 고객, 기존 사용자, 개발자, 내부 팀)

선택 사항 (제공되지 않은 경우 질문):

보여줄 특정 플로우 (예: "단계와 예상 결과가 있는 테스트 케이스 만들기")
톤 (전문적, 캐주얼, 기술적, 마케팅)
목표 지속 시간 (30초, 1분, 3분, 5분)
강조할 핵심 포인트
피하거나 건너뛸 사항

지정되지 않은 경우 기본 가정:

청중: 제품을 평가 중인 잠재 고객
톤: 전문적이지만 친근하게
지속 시간: 1-2분
해상도: 1920x1080

2단계: 제품 탐색

Playwright 브라우저 도구를 사용하여 실제 제품 UI를 탐색하세요.

이것은 매우 중요합니다. UI가 어떻게 생겼는지 추측하지 마세요. 실제로 탐색하세요:

브라우저에서 대상 URL을 엽니다.
각 관련 페이지/화면의 스크린샷을 찍습니다.
실제 버튼 레이블, 메뉴 항목, 폼 필드를 기록합니다.
탐색 흐름을 이해합니다.
실제 선택자로 UI 요소를 식별합니다.

예시 탐색 흐름:
  → 앱 URL로 이동
  → 대시보드 스크린샷
  → 대상 기능을 클릭하여 살펴보기
  → 각 상태 변경 시 스크린샷
  → 모든 대화형 요소의 정확한 선택자 기록
  → 로딩 상태, 애니메이션, 모달 확인

왜 먼저 탐색할까요?

실제 선택자 이름 (기록 중 실패할 추측된 이름이 아닌)
화면에 표시된 내용과 일치하는 정확한 나레이션
자연스러운 흐름 발견 (사용자가 언급하는 것을 잊은 단계가 있을 수 있음)
잠재적 문제 발견 (인증 장벽, 느린 로드, 빈 상태)

인증:

앱에 로그인이 필요한 경우 사용자에게 자격 증명 또는 사전 인증된 세션을 요청합니다.
또는 테스트 데이터가 있는 스테이징 환경을 사용합니다.
참고: 기록 단계를 위해 쿠키/세션을 저장합니다.

3단계: 스크립트 초안 작성

metadata와 scenes 배열을 포함하는 JSON 형식의 구조화된 스크립트를 생성합니다.

전체 JSON 스키마, 액션 참조 및 하이라이트 스타일에 대해서는 references/script-format.md를 참조하세요.

4단계: 검토 및 반복

스크립트를 읽기 쉬운 형식(원시 JSON이 아닌)으로 사용자에게 제시합니다. 다음과 같이 포맷하세요:

🎬 데모 스크립트: "첫 번째 테스트 케이스 만들기"
지속 시간: ~90초 | 청중: 잠재 고객

━━━ 장면 1: 오프닝 — 대시보드 개요 ━━━
  → /dashboard로 이동
  🎙️ "OneTest에 오신 것을 환영합니다. 첫 번째 테스트 케이스를 만들어 보겠습니다."
  ⏸️ 2초 일시 정지

━━━ 장면 2: 테스트 케이스로 이동 ━━━
  → 클릭: 사이드바 "Test Cases"
  🎙️ "사이드바에서 테스트 케이스 섹션을 엽니다."
  ✨ 하이라이트: 사이드바 항목 (펄스)
  ⏸️ 1.5초 일시 정지

━━━ 장면 3: 새 테스트 케이스 생성 ━━━
  → 클릭: "Create" 버튼
  🎙️ "Create를 클릭하여 새 테스트 케이스를 시작합니다."
  ✨ 하이라이트: Create 버튼 (글로우)
  ⏸️ 2초 일시 정지

  → 제목 입력: "유효한 자격 증명으로 로그인"
  🎙️ "설명적인 제목을 입력하세요."
  ⏸️ 1초 일시 정지

  → 설명 입력: "사용자가 로그인할 수 있는지 확인..."
  🎙️ "이 테스트 케이스가 확인하는 내용에 대한 명확한 설명을 추가하세요."
  ⏸️ 1.5초 일시 정지

━━━ 장면 4: 클로징 ━━━
  → 2초 대기 (마지막 화면 유지)
  🎙️ "이상입니다. 첫 번째 테스트 케이스가 준비되었습니다."
  ⏸️ 1.5초 일시 정지

총 예상 시간: ~90초

사용자와 반복:

"장면을 추가하거나 제거할까요?"
"페이싱을 더 빠르게 또는 느리게 할까요?"
"변경할 나레이션 텍스트가 있나요?"
"순서를 변경할까요?"

5단계: 저장 및 핸드오프

승인되면:

스크립트 JSON을 workspace/<date>/demo-script-<name>.json에 저장합니다.
읽기 가능한 버전을 workspace/<date>/demo-script-<name>.md에 저장합니다.
사용자에게 알립니다: "스크립트 준비 완료! 기록하려면 /record-demo를 실행하거나 지금 바로 기록을 시작할 수 있습니다."

스크립트 액션 참조

10가지 지원 액션: navigate, click, type, select, scroll, hover, wait, screenshot, drag, keyboard.

5가지 하이라이트 스타일: pulse, glow, arrow, dim-others, zoom (CSS/JS로 주입).

필드 및 예제가 포함된 전체 참조는 references/script-format.md를 참조하세요.

나레이션 가이드라인

좋은 나레이션:

짧은 문장 (15단어 미만)
현재 시제, 능동태 ("Create 버튼을 클릭합니다"가 아닌 "Create 클릭")
무슨 일이 일어나고 있는지와 이유를 설명 ("팀이 무엇을 테스트해야 하는지 알 수 있도록 설명을 추가하세요.")
명백한 것은 나레이션하지 않음 ("지금 커서를...으로 이동하고 있습니다" — 안 됨)
일시 정지를 나레이션 길이에 맞춤 (긴 나레이션 = 긴 일시 정지)

페이싱 규칙:

첫 번째 장면: 더 긴 일시 정지 (시청자 적응)
중간 장면: 적당한 일시 정지
마지막 장면: 마지막 상태에서 2-3초 유지
입력 후: 시청자가 읽을 수 있도록 짧은 일시 정지
페이지 이동 후: 로드 대기 + 시청자가 훑어볼 수 있도록 1초 추가

청중별 톤:

잠재 고객: 이점에 초점, 단순하게 유지, 전문 용어 피하기
개발자: 기술 용어 사용 가능, 설정 보여주기, API 언급
내부: 더 캐주얼하게, 팀 관행 참조

훌륭한 데모를 위한 팁

데이터부터 준비하세요 — 빈 앱에서 데모하지 마세요. 테스트 데이터가 있는지 확인하세요.
해피 패스를 보여주세요 — 에지 케이스는 문서에 남기고 데모에는 포함하지 마세요.
비디오당 하나의 기능 — 90초 집중 비디오가 10분 둘러보기보다 낫습니다.
결과로 끝내세요 — 메뉴가 아닌 생성/완료된 결과를 보여주세요.
실제처럼 이름을 지으세요 — "테스트 1"보다 "유효한 자격 증명으로 로그인".
UI를 정리하세요 — 불필요한 탭을 닫고, 개발자 도구를 숨기고, 깨끗한 브라우저 프로필을 사용하세요.

데모 스크립트