Claude Code와 Playwright를 활용한 제품 데모 영상 자동화 파이프라인 구축

섹션별 상세

Claude Code를 활용해 앱 페이지를 분석하고 스크립트, 음성 해설, UI 주석 요소를 포함한 단일 파일을 생성하여 자동화의 기반을 마련한다.

ElevenLabs나 Gemini TTS로 타임스탬프가 포함된 음성을 생성하고, Playwright의 recordVideo 기능을 사용하여 음성 길이에 맞춰 화면 녹화와 UI 주석을 정밀하게 동기화한다.

ffmpeg를 사용하여 생성된 영상과 음성, 배경음악, 브랜딩 카드를 합성하고 1080p 영상을 최종 출력하는 후반 작업을 자동화한다.

SPA 환경에서의 인증 토큰 유지 문제 해결을 위해 localStorage 사용, networkidle 대신 domcontentloaded 활용 등 실무적인 기술적 제약 사항을 해결했다.

플레이라이트(Playwright): — 웹 브라우저 자동화 테스트 및 스크래핑을 위한 오픈소스 프레임워크. 브라우저 제어, 사용자 상호작용 시뮬레이션, 영상 녹화 기능을 제공하여 웹 앱의 자동화된 워크플로 구현에 사용된다.
텍스트 음성 변환(TTS): — 텍스트 데이터를 인공지능 모델을 통해 자연스러운 음성으로 변환하는 기술. 영상 제작 파이프라인에서 스크립트를 오디오로 생성하고 타임스탬프를 추출하여 영상과 동기화하는 데 필수적이다.
에프에프엠펙(FFmpeg): — 영상, 오디오, 기타 멀티미디어 파일과 스트림을 기록, 변환, 스트리밍하는 오픈소스 소프트웨어 프로젝트. 영상 합성, 오디오 정규화, 배경음악 삽입 등 자동화된 영상 후반 작업의 핵심 도구이다.
단일 페이지 애플리케이션(SPA): — 단일 HTML 페이지를 로드하고 사용자와 상호작용할 때 필요한 부분만 동적으로 갱신하는 웹 애플리케이션 구조. 자동화 테스트 시 페이지 로딩 이벤트 처리와 인증 토큰 관리에 주의가 필요하다.

Claude Code추천

스크립트 작성 및 Playwright 드라이버 생성

Playwright추천

웹 브라우저 자동화 및 화면 녹화

ElevenLabs추천

음성 해설 생성

ffmpeg추천

영상 합성 및 후반 작업