앱 데모 비디오
핵심 아이디어
화려함은 앱 그 자체에 있습니다. 다크하고 시네마틱한 UI를 구축하여 실제 결과를 표시하고, 박동하며 알립니다. 그런 다음 해당 UI를 녹화하고, 편집 시 예약된 캡션 바, 확대 효과, 타이포그래피 타이틀 및 엔드 카드를 추가합니다.
콘텐츠가 아직 앱이 아닌 경우(파이프라인, 점수가 매겨진 데이터셋, 비용 모델, CLI) 먼저 작은 카메라에 적합한 프론트엔드로 구축합니다(FRONTEND_STYLE.md 및 theme.css 참조). 타이포그래피 슬라이드나 비디오 모델로 바로 넘어가지 마십시오.
비디오 생성 모델, 이미지 생성 모델, TTS를 사용하여 데모를 생성하지 마십시오. 타이틀 및 엔드 카드는 타이포그래피입니다. 기본 사운드는 무음입니다. 요청에 사운드가 명시되지 않는 한 스톡 음악이나 음성을 추가하지 마십시오.
세 가지 컷(오버레이 캡션 vs. 슬라이드 덱 vs. 라이브 세션의 예약된 바)에 대한 작업된 익명 예제는 REFERENCE_CASE.md에 있습니다.
자산
모든 경로는 이 스킬 폴더를 기준으로 합니다.
FRONTEND_STYLE.md— 디자인 토큰, 컴포넌트 패턴, 카피 보이스, 모션 사양, 사전 녹화 체크리스트theme.css— 바로 사용 가능한 CSS 변수, 오로라/유리/글로우, 키프레임tailwind-theme.css— Tailwind v4@theme스니펫./record_demo_template.py— 매개변수화된 Playwright 레코더./edit_demo.py/./edit_demo.sh— 타이틀, 캡션, 확대 효과, 엔드 카드, 인코딩example_timeline.json— 편집기가 읽는 비트 목록REFERENCE_CASE.md— 익명화된 작업 예제 및 세 가지 컷에서 얻은 교훈
시각적 스타일 (빠른 참조)
앱 내 테마 (FRONTEND_STYLE.md 및 theme.css에도 있음):
| 역할 | Hex |
|---|---|
| 페이지 잉크 | #05060A / #0A0C14 / #11131F / #1A1D2E |
| 본문 텍스트 | #E5E7F0 |
| 시안 (범위 내/실시간) | #22D3EE / #67E8F9 |
| 바이올렛 (무거운 또는 유료 엔진) | #A855F7 / #A78BFA |
| 푸크시아 (그라데이션 끝) | #F0ABFC |
| 에메랄드 (일치/완료/합계) | #10B981 |
| 로즈 (위협/하드 스톱) | #F43F5E |
| 앰버 (갭, 가정, 미승인) | #F59E0B |
| 골드 (성과 버스트) | #FBBF24 |
오로라 워시, 페이딩 48px 그리드, 유리 카드, 색상 코드 글로우. UI용 Inter, 시계 및 피드용 JetBrains Mono, 표준 숫자. 글꼴 로드; 테마에 이름을 지정하는 것만으로는 충분하지 않습니다(theme.css에 임포트 포함). 히어로는 약 48-60px에서 font-black tracking-tight이며, 한 단어는 #67E8F9 → #A78BFA → #F0ABFC 텍스트 그라데이션입니다. 킥커는 11-13px 대문자에 0.14-0.25em 간격입니다.
캡션 바 / 타이틀 카드 테마 (편집 레이어, 앱 아님):
| 역할 | Hex |
|---|---|
| 배경 | #08070C |
| 골드 규칙 / 킥커 | #E1A01D |
| 헤드라인 | #F3ECE3 |
| 서브텍스트 | #9A958C |
편집기의 헤드라인 유형은 굵은 이탤릭 그로테스크입니다. ./edit_demo.py는 ./fonts, 또는 APP_DEMO_FONT / APP_DEMO_FONT_ITALIC, 또는 시스템 DejaVu / Liberation 페이스를 사용합니다. Geist Italic 900이 있다면 좋은 대안입니다.
모션
공통 이징: cubic-bezier(0.16, 1, 0.3, 1). 카운터는 이전 값에서 틱합니다(기본 1.1초, KPI 타일 1.6초, 프로젝션 1.8초). 활성 단계는 확장 링(1.3초)과 함께 펄스(1.4초)합니다. 완료는 스프링 체크와 파티클 버스트입니다. 성과 토스트는 약 1.7초 유지됩니다. CTA 및 활성 단계는 반짝입니다(1.6초 루프).
들어오는 이벤트의 속도를 조절하여 각 패스가 읽을 수 있도록 합니다(단계 종료 후 약 1.5초). 서버 시간과 카운트는 실제 그대로 유지됩니다. 표시되는 것만 지연됩니다. 실행이 완료된 후 약 900ms 기다린 다음 스케일인 결과 히어로로 부드럽게 스크롤합니다.
카피 보이스
트레일러처럼 쓰고, 숫자로 증명하십시오.
- 히어로: 하나의 짧은 은유, 하나의 그래디언트 단어. 부제목은 시청자가 무엇을 볼 것인지, 그리고 비용과 신뢰도 판독값에 도달할 것이라고 말합니다.
- 라이브 CTA: 점화 동사. 재생 CTA: 재생 동사.
- 각 단계는 구체적인 제목과 2-3 단어의 Title Case 성과를 가지며, 완료 시 토스트되고 행에 별표 표시됩니다.
- 갭은 실패가 아닌 작업입니다. 위협에는 명명된 방패가 있습니다. 미승인 출력은 UI에 태그됩니다. 안전/읽기 전용 라인이 헤더에 유지됩니다.
- 비용은 정확하고(하위 센트 수치가 $0.00이 되지 않을 만큼 충분한 소수 자릿수), 측정됨과 추정치로 레이블이 지정됩니다. 가정은 타일에 이름이 지정됩니다.
- 전체 워크플로우 비용 또는 가치 비교와 그 주의 사항은 제품에 있으므로 카메라가 스크롤하여 볼 수 있습니다.
데모 UX
?replay=<id>(선택적?speed=)는 이전에 측정된 실행을 실제 타이밍으로 자동 시작하며, UI는 재생 중임을 표시합니다.?run=<id>(선택적?backend=)는 완료된 실행을 다시 열어 재청구 없이 대시보드를 다시 촬영할 수 있도록 합니다.- 라이브 경로: 실제 데이터 업로드 또는 연결 → 필요한 경우 유료 엔진 확인 → 점화 → 박동 타임라인 + 요청 피드 → 대시보드, 프로젝션, 비용 패널, 주의 사항.
워크플로우
- 카메라에 맞게 프론트엔드 스타일링. 아직 UI가 없으면 하나를 구축합니다.
theme.css(앱이 Tailwind v4를 사용하는 경우tailwind-theme.css)를 적용합니다.FRONTEND_STYLE.md의 체크리스트를 따릅니다. - 실제 데이터 고정. 라이브 실행 또는 신뢰할 수 있는 재생 픽스처를 사용합니다. 이후 모든 캡션은 화면에 나타나거나 실행 자체 메트릭에 있는 수치를 인용할 수 있어야 합니다.
- Playwright로 1920×900에서 녹화. 페이지 내 캡션 알약 없음 — UI를 가립니다. 2-4초 유지 및 느린 스크롤로 연속 테이크(랜딩 → 워크플로우 → 결과)를 스크립팅합니다.
./record_demo_template.py를 사용합니다. Playwright의 기본 프레임 속도(보통 25fps)를 유지합니다. ./edit_demo.sh로 편집. 캔버스는 1920×1080: 예약된 180px 바(#08070C/#E1A01D/#F3ECE3/#9A958C) 위에 1920×900 앱 창. 약 2초 타이틀 카드, 하드 컷(1초 크로스페이드 아님), 앱 창에만 ~0.4초 1.3배 확대 효과(바는 고정). 앱 내 비용 또는 가치 비교로 끝내고, ~3초 주의 사항 카드. 60-70초 목표. 기본적으로 무음(플레이어 호환성을 위한 조용한 AAC 트랙은 괜찮음).- 프레임 확인. 바가 UI를 가리지 않고, 확대 효과가 바를 자르지 않으며, 캡션된 모든 수치가 화면에 있거나 가정으로 표시되었는지 확인합니다.
- 프로세스 연습은 별도 덱에 속함. 아키텍처, 작동 방식, 요점 카드는 이 비디오에서 세션을 대체하지 않습니다.
캡션 보이스
- 킥커: 몇 개의 간격이 넓은 대문자 단어 (
LIVE SESSION,MISSION COMPLETE,THE CATCH). - 헤드라인: 하나 또는 두 개의 짧은 문장. 마침표, 줄임표 아님.
- 놀라운 측정된 사실을 먼저 제시: 수, 시간, 비용, 잡힌 것.
- 현재 화면에 있는 것을 가리킨 다음 요점을 추가합니다. 튜토리얼을 설명하지 마십시오.
- 앱 내 비용 패널로 컷할 때, 그것이 슬라이드가 아닌 앱 자체 패널이라고 말합니다.
실패 모드
| 실수 | 수정 |
|---|---|
| 페이지 내 HTML/CSS 캡션 오버레이 | 항상 앱 아래에 예약된 바 |
| 스크린샷 콜라주 또는 타이포그래피 "프로세스" 슬라이드를 본문으로 사용 | 세션 녹화; 프로세스 카드는 덱으로 이동 |
| 모든 비트 사이 크로스페이드 | 하드 컷; 확대 효과와 앱 자체를 위해 모션 예약 |
| 발명되거나 레이블 없이 반올림된 수치 | 실행의 숫자 복사; 가정 레이블 지정 |
| 확대 효과가 전체 1080p 프레임을 확대하여 바를 자름 | 1920×900 창만 확대 |
| 아키텍처 또는 작동 방식 그래픽으로 끝남 | 제품의 비용/가치 비교로 끝낸 후 주의 사항 |
| 비디오 모델로 "데모" 생성 | Playwright + ffmpeg만 사용 |
| "시네마틱하게" 만든다고 음성 해설 또는 음악 추가 | 기본은 무음; 화면과 캡션이 전달 |
| 평평한 UI, 숫자가 튀어나옴, 앱 내 비용 패널 없음 | 먼저 앱 스타일링 (FRONTEND_STYLE.md); 편집에서만 고치려 하지 마십시오. |
| 히어로 또는 CTA가 설정 페이지처럼 작성됨 | 은유 + 그래디언트 단어; 라이브에는 점화 동사, 재생에는 재생 동사 |
| CSS에서 글꼴을 지정했지만 로드하지 않음 | theme.css에서 Inter + JetBrains Mono 임포트 추가 |
| "앱이 없다"고 데이터셋 또는 CLI를 슬라이드로 녹화 | 먼저 화려함을 위해 작은 프론트엔드를 구축한 후 녹화 |
빠른 시작
ffmpeg 및 Python 3 필요.
python3 -m venv .venv && .venv/bin/pip install playwright pillow && .venv/bin/python -m playwright install chromium
# 1. 앱 스타일링 (theme.css / FRONTEND_STYLE.md)하여 카메라에서 성능을 발휘하도록 합니다.
# 2. 앱이 실행 중이고 레코더의 actions()가 채워진 후:
.venv/bin/python ./record_demo_template.py --out demo_raw.webm
./edit_demo.sh --input demo_raw.webm --timeline example_timeline.json --output demo.mp4
선택 사항: ./fonts 아래에 Geist(또는 다른 굵은 이탤릭 그로테스크)를 넣거나 APP_DEMO_FONT 및 APP_DEMO_FONT_ITALIC을 설정합니다.
목적
실제 세션에서 작동하는 앱의 극적인 데모, 프로모션 또는 런칭 비디오를 만듭니다. 카메라에 적합한 프론트엔드를 스타일링하고, Playwright로 녹화한 다음, ffmpeg로 예약된 캡션 바, 확대 효과, 타이포그래피 타이틀 및 엔드 카드를 합성합니다. 파이프라인, 데이터셋, 비용 모델 또는 CLI는 먼저 해당 프론트엔드로 구축됩니다.
입력
- 레코더 기본 URL(
--base,record_demo_template.py의 기본값http://127.0.0.1:8765)에서 실행 중인 앱 또는 녹화를 위해 구축된 작은 프론트엔드. - 실제 데이터 또는 이전에 측정된 실행의 신뢰할 수 있는 재생. 캡션된 수치는 화면 또는 실행 메트릭에서 가져오거나 가정으로 표시됩니다.
record_demo_template.py내부에 채워진actions().example_timeline.json모양의 타임라인 JSON.- ffmpeg, Python 3,
playwright,pillow../fonts의 선택적 이탤릭 그로테스크 또는APP_DEMO_FONT및APP_DEMO_FONT_ITALIC. theme.css, 앱이 Tailwind v4를 사용할 때tailwind-theme.css,FRONTEND_STYLE.md의 체크리스트.
출력
record_demo_template.py의 원본 테이크(.webm또는--transcode사용 시.mp4).edit_demo.sh의 편집된 파일: 1920×1080 H.264, 보통 60-70초, 무음 AAC. 1920×900 앱 창이 180px 캡션 바 위에 있으며, ~2초 타이틀 카드, 하드 컷, 앱 창에 ~0.4초 1.3배 확대 효과, ~3초 주의 사항 엔드 카드.
비목표
- 비디오 생성 모델, 이미지 생성 모델, TTS.
- 요청에 사운드가 명시되지 않는 한 스톡 음악 또는 음성.
- 페이지 내 캡션 오버레이, 스크린샷 콜라주, 크로스페이드된 프로세스 슬라이드를 본문으로 사용.
- 발명된 수치 또는 레이블이 없는 반올림된 수치.
- 세션 대신 아키텍처 또는 작동 방식 덱 사용.
점검 사항
FRONTEND_STYLE.md사전 녹화 체크리스트 통과, 로드된 Inter 및 JetBrains Mono와 읽기 가능한 1920×900 프레임 포함.- 예약된 바가 UI를 가리지 않음. 확대 효과는 1920×900 창만 이동하므로 바는 전체 너비를 유지하고 잘리지 않음.
- 각 캡션된 수치는 화면 또는 실행 메트릭에 있거나, 캡션과 엔드 카드 모두에서 가정 또는 프로젝션이라고 표시.
- 컷은 하드 컷, 길이는 약 60-70초, 편집기가 먹싱하는 조용한 AAC 외에는 트랙이 무음.
bash -n edit_demo.sh및python3 -m py_compile이edit_demo.py및record_demo_template.py모두에서 성공.
실패 모드 및 복구
위의 실패 모드 표를 사용하십시오. 복구:
| 보이는 상황 | 수행할 작업 |
|---|---|
| 캡션이 버튼 또는 차트를 가림 | 페이지 내 오버레이를 삭제합니다. 타임라인에 라인을 넣고 ./edit_demo.sh를 다시 실행합니다. |
| 본문이 스틸 사진, 콜라주 또는 크로스페이드임 | ./record_demo_template.py로 세션을 녹화하고 비트 사이를 하드 컷합니다. |
| 확대 효과가 바를 자름 | 비트에서 zoom을 유지합니다. edit_demo.py는 앱 창만 확대합니다. |
| 캡션 번호가 화면에 없음 | 대시보드 또는 실행 메트릭 숫자를 복사하거나 타일과 엔드 카드에 가정을 표시합니다. |
| 평평한 UI, 숫자가 튀어나옴, 비용 패널 없음 | theme.css 및 FRONTEND_STYLE.md에서 스타일을 다시 지정한 후 다시 녹화합니다. |
| 편집기가 글꼴을 찾지 못해 종료됨 | ./fonts 아래에 .ttf를 추가하거나 APP_DEMO_FONT 및 APP_DEMO_FONT_ITALIC을 설정한 후 ./edit_demo.sh를 다시 실행합니다. |
| 소스가 노트북, CLI 또는 스프레드시트임 | 실제 데이터를 중심으로 FRONTEND_STYLE.md의 작은 프론트엔드를 구축한 후 녹화합니다. |