eva 제품 비디오
eva 앱(Linear/Notion 수준)의 고급 제품 비디오를 video/에 있는 기존 Remotion 프로젝트를 사용하여 제작합니다. 푸티지는 agent-browser로 캡처한 실제 앱 화면입니다.
잘못된 스킬인가요? 이 스킬은 여러 장면이 포함된 폴리시드 에디트(Remotion, 음악, 캡션)입니다. 단일 기능의 경우 더 가벼운 스킬인 eva-feature-screenshot(스크린샷 1개 + 트윗) 또는 eva-feature-demo(agent-browser 원본 녹화 1개 + 트윗)를 권장합니다. 세 스킬 모두 트윗 카피는 eva-tweet에서 제공합니다.
표준 프로젝트가 이미 존재합니다. 처음부터 다시 만들지 말고 재사용하세요.
- 프로젝트:
video/· 기본 컴포지션:EvaHero(video/src/EvaHero.tsx) - 렌더 출력:
video/out/eva-demo.mp4 video/src/components/의 재사용 가능 컴포넌트:Backdrop,AppWindow,EvaMark,HeroCaption(+Accent),Cursor,Spotlight,StatCounter,SnapIn,tokens.video/scripts/의 헬퍼 스크립트:stills.mjs,gen-music.mjs,check-audio.mjs.
새 비디오를 만들려면: 새로운 스토리에 맞게 스크린샷을 다시 캡처하고, EvaHero.tsx에서 장면 목록/캡션/지속 시간을 편집하고, 컷 시간에 맞춰 음악을 다시 생성하고, 렌더링한 후 QA를 수행합니다.
변경 불가 기본값 (어렵게 배운 교훈 — 이유 없이 변경하지 마세요)
각 항목은 처음에는 실수였습니다. 사용자가 재정의하지 않는 한 유지하세요.
-
1280×720, 30fps. 1080p가 아닙니다. eva UI는 밀도 높은 데스크톱 앱이며, 1080p에서는 휴대폰에서 "너무 확대됨/너무 큼"으로 보입니다. 720p는 Twitter/X에 최적화된 모바일 친화적인 해상도입니다.
-
프레임의 기본 레이아웃으로 캡처하고, 풀블리드로 표시하세요. 브라우저 뷰포트를 1280×720으로 설정한 후, 스크린샷을 1:1 풀블리드(전체 프레임을 채움)로 표시합니다. 가장 중요한 품질 요소:
- 2560×1440으로 캡처하여 720p로 축소하면 UI 텍스트 크기가 절반으로 줄어듦 → "축소되어 보임" 및 모바일에서 읽기 어려움.
- 특정 영역을 확대/자르면 UI의 어색한 조각만 보임.
- 1280 너비 레이아웃을 1:1로 표시 = 기본 요소 크기 = 읽기 쉬움 + "확대된 느낌" + 선명함.
줌은 절대 사용하지 마세요. 모든 스크린샷 장면에서
PanScene의from/to는{ scale: 1.0, fx: 0.5, fy: 0.5 }로 유지됩니다. 1.02~1.06의 "미묘한 확대"조차 사용자가 필요한 크롬(사이드바 레이블, 오른쪽 상단의 기본 버튼, 통계 바닥글)을 잘라냅니다. 또한 스크린샷 주위에<SnapIn from={0.97}>을 사용하세요. 기본값 1.06은 안쪽으로 튀어나와 모든 컷의 시작 프레임을 잘라냅니다. 움직임은 카메라 이동이 아닌 하드 컷과 캡션 스냅에서 발생합니다. -
실제 푸티지, 완료된 상태.
agent-browser로 실제 앱을 구동합니다. 이미 완료된 작업(병합된 태스크, diffs, PR)을 녹화하세요. 라이브 에이전트 실행을 기다리지 마세요(샌드박스는 중지되어 있음, 라이브 실행은 느리고 불안정함). 깨끗한 입력(예: 새 태스크 모달의 깔끔한 태스크 제목)을 준비하세요.references/capture-workflow.md참조.절대 제출하지 말고 — 입력만 하세요. 입력란을 채우고, 선택기를 열고, 캡처합니다. 컴포저에서 Enter 키를 누르지 말고, 보내기 화살표, 만들기, 저장, 실행 또는 시작을 누르지 마세요. 실제 세션이나 에이전트 실행을 시작하지 마세요. 데모 푸티지라도 예외 없습니다. 제출하면 사용자의 실제 작업 공간이 변경되고 실제 컴퓨팅 리소스가 소모됩니다. 준비된 상태만 샷에 필요합니다. Enter는 필드 자체에만 커밋되고 다른 동작이 없을 때만 허용됩니다(열린 선택기에서
@멘션 수락) — 그렇지 않으면 선택기 행을 클릭하세요. -
경쾌하고, 하드 컷이며, 비트 동기화. 총 약 20초. 비트에 맞춰 컷(긴 크로스페이드 대신
<Series>사용)하고, 캡션을 빠르게 스냅인하세요.SnapIn으로 장면을 팝업 — 제목/아웃트로 카드 위에는 그대로, 스크린샷 위에는from={0.97}(기본값 2 참조). 지루함 = 너무 김 + 느린 크로스페이드가 너무 많음. -
모든 컷에 동기화된 음악. 사용자의 고정된 선호 사항은 로파이, "클래식" 변형, 박수 없음 —
gen-lofi-variants.mjs로 생성하며, 각 컷을 웜코드 스웰로 표시합니다.--duration,--cuts,--only,--prefix옵션을 사용하므로 새 비디오는 스크립트 편집이 필요 없습니다:node scripts/gen-lofi-variants.mjs --duration=20.5 --cuts=2.5,5.5,8.5,11.5,14.5,17.5 \ --only=classic --prefix=platform # → public/audio/platform-music-lofi-classic.wav--cuts는 컴포지션의 장면 경계와 일치해야 합니다.gen-music.mjs는 오래된 박수 비트이므로 사용자가 요청한 경우에만 사용하세요.references/remotion-build.md→ 음악 참조. -
eva 테마에 맞춤. 거의 검정
#050606, 인디고 악센트#818cf8, 브랜드 마크 그라디언트 보라#8B3FB8→ 파랑#3B7DD8, 폰트 Inter + JetBrains Mono. 모두video/src/components/tokens.ts에 정의됨. 브랜드 색상을 임의로 만들지 마세요. -
정직하게 + 기밀 유지. 사용자 본인의 저장소(
vvedantb/eva)를 사용하고, 클라이언트 저장소(Evalucom/CarePulse)는 절대 사용하지 마세요. "Codebases" 홈 화면(클라이언트 저장소 목록)을 보여주지 말고, 캡처 전에 문서/태스크 목록에서 클라이언트 명명된 항목을 확인하세요. 목록이 더럽다면 깨끗한 데모 문서를 준비하세요. 화면에 표시된 이름이나 이메일에 대한 개인정보 보호 문제를 제기하지 마세요 — 설정 → 실험에는 모든[data-pii]요소를 흐리게 처리하는 블러-PID 토글이 있어 제품에서 처리됩니다. 오류 패널에 환경 변수 이름이나 프로젝트 ID가 노출되는 경우 플래그를 지정하세요. 캡션은 진실되게 설명하세요 — 화면에 표시되지 않는 기능을 암시하지 마세요. 사용 가능한 유일한 캡처가 중지된 샌드박스나 빈 상태인 경우, 캡션을 화면에 맞게 다시 작성하고 과장하지 마세요.
워크플로우
이 순서대로 작업하세요. 각 단계를 수행하기 전에 해당 단계의 참조 파일을 읽으세요.
-
스토리를 계획하세요. 기본 히어로 플로우(8개 장면, 약 20초): 제목 → 태스크 설명 → Eva가 코드 작성 → PR 검토 및 출시 → 보드 → 프로젝트 → 증명(카운트업 통계) → 아웃트로. 먼저 장면과 한 줄 캡션을 선택하세요.
-
푸티지 캡처 →
references/capture-workflow.md읽기. 앱 실행(pnpm dev), 에이전트 사용자로 로그인, 뷰포트 1280×720 설정, 각 화면을 스크린샷으로video/public/captures/에 저장. -
구성 / 편집 →
references/remotion-build.md읽기.EvaHero.tsx편집: 장면 목록, 지속 시간(비트의 배수), 캡션, 입력 장면의 커서 경로. 기존 컴포넌트 재사용. -
음악 적용 →
references/remotion-build.md→ 음악 읽기. 장면 경계와 일치하는--cuts로gen-lofi-variants.mjs실행(위 기본값 5), 컴포지션의<Audio>가 생성된 파일을 가리키도록 하고,MUSIC = true확인. -
렌더링 + QA. mp4를 직접 미리 볼 수 없으므로(시스템 ffmpeg 없음, 비디오를 볼 수 없음) 스틸 프레임으로 QA하세요. 장면당 하나씩, 장면 중간에서 캡처:
cd video node scripts/stills.mjs "40,110,200,290,380,470,560" EvaPlatform # 2번째 인수 = 컴포지션 ID컴포지션 ID 기본값은
EvaHero— 명시적으로 전달해야 잘못된 비디오를 QA하지 않습니다.video/out/의 PNG를 읽고 프레임의 모든 가장자리를 확인하세요: 오른쪽 상단의 기본 버튼이 온전한가, 사이드바 레이블이 온전한가, 캡션이 라이브 UI 텍스트와 겹치지 않는가? 그런 다음 렌더링 및 확인:npx remotion render EvaPlatform out/eva-platform.mp4 --codec=h264 --image-format=png node scripts/check-audio.mjs out/eva-platform.mp4 # 지속 시간, 1280×720, 오디오 트랙 존재--image-format=png는 UI 텍스트를 선명하게 유지합니다. 스틸에서 올바를 때까지 반복한 다음 렌더링합니다.
빠른 참조
| 필요 사항 | 명령어 (video/에서 실행) |
|---|---|
| 라이브 미리보기 / 스크럽 | npm run dev (Remotion Studio) |
| 화면 하나 캡처 | bash scripts/shot.sh /vvedantb/eva/web/sessions sessions-list 4000 |
| 컴포지션 렌더링 | npx remotion render <Id> out/<name>.mp4 --codec=h264 --image-format=png |
| 특정 프레임 QA | node scripts/stills.mjs "40,110,200" <CompositionId> |
| 음악 재생성 | node scripts/gen-lofi-variants.mjs --cuts=… --only=classic --prefix=<name> |
| 출력 파일 확인 | node scripts/check-audio.mjs out/<name>.mp4 |
기존 컴포지션
EvaHero (히어로 플로우) · SessionsDemo (클라우드 세션) · EvaPlatform (5개 화면을 한 곳에: 세션 → 문서 → 테스팅 아레나 → 칸반 태스크 → PR 리뷰) · QuickTasksDemo (레거시). 새 컴포지션은 video/src/Root.tsx에 1280×720 / 30fps로 등록하세요.
시간 낭비했던 주의 사항
- 로그인 URL은
/?agent=true(부울),/?agent가 아님 — 라우트는agent를 zod 부울로 검증하며/?agent는 "Expected boolean, received string" 오류를 발생시킴. 콜백이 "You're already signed in" 상태에서 "Signing in…"에 멈추면, 대상 페이지로 바로 이동하세요. - 개발자 오버레이가 스크린샷에 포함됨. react-scan은
#react-scan-root의 섀도우 루트에 FPS 툴바를 렌더링하고, agentation은[data-agentation-root]에 렌더링됨. 스타일시트만으로 react-scan을 죽일 수 없음 — 호스트가 인라인 스타일을 포함하므로 호스트에display:none !important인라인도 설정해야 함.scripts/shot.sh가 두 가지를 모두 수행하므로 수동 캡처 체인보다 사용하세요. agent-browser호출을timeout과 함께 하나의 Bash 명령어로 연결하고, 긴 작업은 백그라운드로 실행. 단순 open → wait → screenshot 체인은 도구 타임아웃을 유발함.snapshot -i의 참조는 개발자 툴바가 확장되는 즉시 무효화됨. 오버레이 숨기기 후, 클릭 전에 다시 스냅샷 찍기.- 모든
@remotion/*패키지를 동일한 정확한 버전으로 고정하지 않으면 번들러 오류 발생. - Claude가 음악을 청취할 수 없음. 비트는 요청한 대로 정확히 생성되지만(각 컷에 스웰), 사용자에게 듣고 라이선스 트랙으로 교체하라고 알리세요 —
MUSIC=false로 설정하여 무음 처리. - 오래된 세션 캡처의 샌드박스는 중지됨, 따라서 모든 세션 화면에 "시작하려면 샌드박스를 시작하세요"라고 표시됨. 실행 중인 샌드박스로 캡션하지 마세요.
captures/sessions/에는 실행 중인 샌드박스가 없습니다. - 캡션이 메시지를 전달합니다 — 대부분의 Twitter 재생은 음소거 상태이므로 모든 장면에 캡션이 필요합니다.
자세한 방법: references/capture-workflow.md (푸티지) 및 references/remotion-build.md (구성, 테마, 음악, 렌더링, QA).