RSS DEV 커뮤니티
팔로우
Claude Code, Playwright, and FFmpeg로 제품 데모를 만든 방법
저자는 Claude Code, Playwright, FFmpeg를 사용하여 약 30분 만에 오픈 소스 프로젝트인 Agent OS에 대한 56초 분량의 제품 데모를 제작했습니다. 목표는 수동 녹화 및 복잡한 비디오 편집 소프트웨어를 피하면서 실제 제품의 명확하고 꾸밈없는 워크스루를 만드는 것이었습니다. Claude Code는 애플리케이션을 검사하고 내러티브에 대한 주요 제품 상태를 식별한 다음 Playwright를 사용하여 이러한 상태를 탐색하고 녹화했습니다. 데모는 실제 Pulseboard 빌드의 기존 실행 기록을 특징으로 하여 진정성을 보장했습니다. 하나의 긴 녹화 대신 안정성을 높이기 위해 각기 다른 브라우저 컨텍스트를 가진 여러 개의 짧은 클립이 녹화되었습니다. 그런 다음 FFmpeg를 사용하여 클립을 다듬고, 레이블을 추가하고, 오프닝 및 클로징 카드를 만들고, 모든 것을 하나의 최종 MP4로 연결했습니다. 이 워크플로는 정교한 그래픽보다 진정성과 재현성을 우선시하는 오픈 소스 데모 및 내부 워크스루에 이상적입니다. 저자는 브라우저 흐름은 코드이고, 제품 상태는 결정론적이며, 레이블/타이밍은 구성이므로 비디오를 쉽게 재생성할 수 있다고 언급합니다. Agent OS는 코딩 모델에 메모리, 실행 제어, 검증, 복구 및 전달을 추가하는 로컬 우선 AI 프로젝트 운영 체제로 설명됩니다. 이 데모는 사용자에게 시스템이 실제로 무엇을 하는지 빠르게 보여주는 역할을 합니다.