테스트릴: 클로드 코드를 활용한 프로그래매틱 데모 비디오 생성

Testreel의 기능

Testreel은 JSON, YAML 또는 Playwright 형식으로 사용자 상호작용(클릭, 입력, 스크롤, 확대/축소 등)을 설명한 다음 시각 효과가 포함된 세련된 데모 비디오를 생성하는 npm 패키지입니다.

주요 기능

• 상호작용 설명에서 webm, mp4 또는 gif 비디오 생성
• 커서 오버레이, 클릭 리플, 그라데이션 배경 추가
• 상호작용 정의에 JSON, YAML 또는 Playwright 사용
• 모의 데이터와 샘플 데이터를 사용한 비디오 생성을 위해 Playwright와 통합
• MIT 라이선스
• Playwright + FFMPEG 기반 구축

주요 사용 사례

소스는 두 가지 주요 가치 제안을 확인합니다:

• 오타나 잘못된 클릭으로 인해 데모를 수동으로 다시 녹화할 필요 없음 - 설정을 업데이트하고 재생성하기만 하면 됨
• LLM 에이전트(예: Claude Code)가 커서 오버레이와 맞춤형 데스크톱 배경이 포함된 웹 앱용 데모 비디오를 생성할 수 있도록 함

실제 구현

소스에 따르면, 사용자는 Claude Code에게 Testreel을 사용하여 특정 UI 흐름의 데모 비디오를 생성하도록 요청할 수 있습니다(예: "현실적인 데이터 사용", "이 이미지 사용"). 작성자는 이를 비교적 간단하게 구현할 수 있었다고 밝혔습니다.

이 도구는 ScreenStudio 또는 Cap의 프로그래밍 방식 버전으로 포지셔닝되어, Playwright가 종단 간 테스트를 처리하는 방식과 유사하게 자동화된 데모 생성을 가능하게 합니다.

저장소 정보

패키지는 다음에서 이용 가능합니다: https://github.com/greentfrapp/testreel

작성자는 Claude Code로 이를 생성했으며 자신의 사용 경험을 바탕으로 계속 업데이트할 것이라고 언급했습니다.