괜찮은 제품 데모(product demo)를 만드는 데 얼마나 많은 노력이 들어가는지 잘 아실 겁니다. 저는 그 작업의 대부분을 대신 해주는 Claude Code 플러그인을 만들었습니다.

Claude Code 내부에서 실행되기 때문에, 이 플러그인은 이미 당신의 프로젝트를 알고 있습니다. 주요 기능들을 식별하고, 앱을 실행하며, 단 하나의 명령어로 영상을 제작할 수 있습니다:

/product-film

출력물은 단일 HTML 파일이며, 그 파일 자체가 영상입니다. Chrome에서 열면 각 컷(cut)마다 하나의 카드가 있는 시작 화면이 나타납니다. 저는 보통 전체 데모 버전과 Product Hunt용 짧은 루프(loop) 버전을 요청하곤 합니다. 각 카드에는 고유한 ▶ Watch 및 ● Record 버튼이 있으며, 녹화하는 컷에 적용할 테마 음악 선택기(theme-music picker)도 있습니다.

Record를 누르면 영상이 처음부터 끝까지 스스로를 캡처한 뒤, 다운로드 폴더에 MP4 파일을 생성합니다. Firefox는 WebM으로 내보냅니다. 화면 녹화기(screen recorder), OBS, 편집기(editor) 또는 타임라인(timeline)이 전혀 필요하지 않습니다.

몇 가지 트랙이 포함되어 있으며, 본인의 오디오를 업로드할 수도 있습니다. 한 친구는 음악일 필요조차 없다는 사실을 발견했습니다. 그는 나레이션을 녹음하여 MP3를 업로드한 뒤 그것을 대신 사용했습니다.

기본 명령만으로도 충분하지만, 동일한 메시지 내에서 영상의 방향을 지시할 수도 있습니다. 어떤 흐름(flow)을 보여줄지, 무엇을 제외할지, 어떤 화면에 더 많은 시간을 할애할지 등을 말이죠. 여전히 Claude Code와의 대화 방식이기 때문에, 첫 번째 컷이 반드시 최종본일 필요는 없습니다. "가격 책정 장면은 빼고, 교착 상태(deadlock) 장면을 더 길게 유지해줘"라고 말하면 새로운 버전을 생성해 줍니다. 여러분은 결과가 마음에 들 때만 Record를 누르면 됩니다.

결과물을 보고 싶다면, ThreadMine 랜딩 페이지의 데모는 전적으로 이 플러그인으로 제작되었습니다. 짧은 루프가 페이지에서 재생되며, 이를 클릭하면 음악이 포함된 전체 버전이 열립니다.

AI 비디오 생성기(AI video generators)와 비교했을 때 가장 큰 장점은, product-film이 사용자의 애플리케이션이 어떻게 생겼는지 추측할 필요가 없다는 점입니다. 그러한 도구들은 매끄러운 영상을 만들 수는 있지만, 실제 화면의 일관된 시퀀스를 재현하도록 만드는 것은 별개의 문제입니다. 약간 허구적인 UI 버전을 받아들이거나, 스크린샷을 계속 입력하고 세부 사항이 어긋날 때마다 수정하는 데 많은 시간을 소비해야 합니다.

직접 앱을 클릭하며 녹화하는 방법도 작동하지만, 결과물은 대개 여전히 편집이 필요합니다. 편집자를 고용하는 것은 비용이 들고 시간이 걸립니다. Claude Code는 이미 프로젝트를 이해하고 있으므로, 그러한 설정 과정의 대부분을 건너뛸 수 있습니다.

또한 애플리케이션이나 캡처된 화면을 별도의 비디오 서비스에 업로드하지도 않습니다. 이 플러그인은 사용자의 로컬 머신에서 실행되는 실제 앱을 기반으로 작동합니다.

저의 경우, 앱은 스레드 덤프 분석기(thread-dump analyzer)인 ThreadMine입니다. 데모는 덤프가 실제로 분석되는 모습을 보여줍니다: 건강 점수 F, 100점 만점에 30점이며, DeadLockThread1이 DeadLockThread2를 기다리고, DeadLockThread2가 다시 DeadLockThread1을 기다리는 실제 데드락(deadlock) 상황이 나타납니다.

제가 30을 선택한 것은 극적으로 보이기 위해서가 아닙니다. 그것은 엔진이 반환한 실제 숫자입니다. 동일한 덤프를 라이브 도구에 붙여넣으면 똑같이 F 30을 얻게 됩니다. 영상은 제품이 실제로 생성하지 않은 결과를 보여줄 수 없습니다.

단 한 프레임을 만들기 전에, 플러그인은 Playwright를 사용하여 실제 애플리케이션을 실행하고, 실제 흐름을 클릭하며, 실제 화면과 값을 캡처합니다. 그것이 신뢰할 수 있는 원천(source of truth)입니다. 그 후 영상은 그 위에 맞춰 안무(choreographed)됩니다: 버튼으로 부드럽게 이동하는 커서, 각 동작 후에 나타나는 자막, 그리고 주의를 끌어야 할 부분에 대한 느린 푸시인(push-in) 효과 등이 포함됩니다.

모든 시각 요소는 t의 순수 함수(pure function)입니다. 이는 영상이 어느 지점으로든 탐색(seek)할 수 있고, 박자에 맞춰 스스로를 검증할 수 있으며, 정확히 시작과 끝이 맞아야 하는 지점에서 시작하고 끝나는 테이크(take)를 기록할 수 있음을 의미합니다.

이 프로젝트는 오픈 소스이며 MIT 라이선스를 따릅니다. 설치에는 두 개의 명령어가 필요합니다:

/plugin marketplace add alliah-tech/product-film
/plugin install product-film@product-film-marketplace

한 가지 실용적인 팁을 드리자면, /plugin을 열고 Marketplaces로 이동하여 자동 업데이트(auto-update)를 활성화하세요. Claude Code는 서드파티 마켓플레이스(third-party marketplaces)에 대해 기본적으로 이 기능을 켜두지 않으며, 저는 여전히 업데이트를 출시하고 있습니다.

또한, 사용 가능한 가장 성능이 뛰어난 모델로 실행하고 노력 수준(effort)을 높게(high) 설정하는 것을 권장합니다. 어려운 부분은 코드를 작성하는 것이 아닙니다. 중간에 코드를 "개선"하기로 결정하지 않으면서 실제 인터페이스를 그대로 재현하는 것이 핵심입니다. 성능이 낮은 모델들은 때때로 창의력을 발휘하여 UI의 일부를 예쁘게 꾸미려 하는데, 이는 결과물이 AI 슬롭(AI slop)이 되지 않게 유지해 주는 단 하나의 규칙을 깨뜨립니다.

저는 Felipe입니다. 예제에서 사용된 분석 도구인 ThreadMine과 플러그인인 product-film을 만들었습니다. 댓글로 질문해 주시면 기꺼이 답변해 드리겠습니다.