Claude Now Does Video (FOR FREE) Thanks To JavaScript

🖼️ 인포그래픽

🖼️ 4컷 인포그래픽

💡 한 줄 결론

Claude는 JavaScript로 프레임을 만들고 영상으로 합쳐 별도 영상 생성 도구 없이 동영상을 제작할 수 있지만, 모델 사용량 비용은 발생한다.

📌 핵심 요점

1. 제작 원리는 시간에 따라 화면을 그리는 JavaScript 함수를 작성하는 것이다. 예시에서는 초당 60개 프레임을 만들고 FFmpeg로 합쳐 MP4를 출력한다.
2. Playwright의 헤드리스 브라우저로 프레임을 확인하고, 문제를 수정한 뒤 다시 렌더링하는 검수 루프를 구성할 수 있다. 발표자는 Claude가 영상을 직접 시청하는 대신 프레임을 살펴본다고 설명한다.
3. 전체 영상을 만들기 전에 스토리보드와 대표 장면을 확인하면 방향이 어긋난 결과물을 반복 생성하는 시간을 줄일 수 있다. 발표자의 비교에서는 낮은 노력 수준도 괜찮은 결과를 냈으며, 높은 설정만큼 프롬프트의 구체성이 중요했다.
4. 프롬프트에는 길이, 영상 유형, 화면 비율, JavaScript 사용, 오디오 구성, MP4 출력과 검수 절차를 명시한다. 내레이션을 먼저 제공하고 화면을 음성에 맞추는 방식도 가능하다.
5. 이미지·영상 레퍼런스로 스타일과 구도를 지정하고, 요구사항 수집부터 스토리보드·코딩·검수까지 스킬로 묶어 반복할 수 있다. 소개된 스킬은 개발 중이며, ‘무료’라는 표현에는 모델 사용량과 선택적 유료 음성 도구 비용이 포함되지 않는다.

🧩 배경과 문제 정의

이 영상은 Claude와 JavaScript를 이용해 설명 영상, 제품 데모와 모션 그래픽을 만드는 방법을 소개한다. 발표자는 Remotion이나 After Effects 없이도 구현할 수 있다고 주장하며, 그 원리를 시간에 따라 정지 프레임을 생성하고 이를 영상으로 합치는 과정으로 설명한다.

문제는 한 번의 요청으로 전체 영상을 제작하면 결과를 확인하기까지 오래 걸리고, 원하는 방향과 다를 때 재생성을 반복하게 된다는 점이다. 영상은 이를 줄이기 위한 네 단계로 프롬프트 작성, 검수 루프, 레퍼런스 활용, 스킬화를 제시한다. ‘무료’는 별도 이미지·영상 생성 도구를 쓰지 않는다는 취지이며, 마지막에는 모델 사용량 비용이 발생한다고 덧붙인다.

🕒 시간순 섹션별 상세정리

1. JavaScript로 프레임을 만들고 영상으로 합치는 원리

• 설명 영상·제품 데모·모션 그래픽을 Claude와 JavaScript로 만드는 방법을 예고한다. 별도 AI 영상 생성기를 사용하는 방식이 아니라는 점을 강조한다. [00:24]
• Claude가 시간 t를 입력받아 한 장의 화면을 반환하는 함수를 작성하고, 예시에서는 초당 60개 화면을 순서대로 재생한다. 헤드리스 브라우저가 프레임을 그리고 FFmpeg가 합치며, Claude는 프레임을 확인해 함수를 수정한다고 보여준다. [01:44]
• 브라우저에서 프레임을 검수한 뒤 FFmpeg로 영상을 완성하는 과정을 다시 보여준다. 시연 영상의 음성은 ElevenLabs로 만들었으며, 대본에 그래픽을 맞추는 방식도 보여준다. [03:05]

2. 네 단계의 학습 구성과 노력 수준 비교

• 프롬프트, 자체 검수 루프, 이미지·영상 레퍼런스, 스킬화라는 네 단계를 제시한 뒤, 자신의 Chase AI Plus 교육 상품을 홍보한다. [04:06]
• 스킬 없이 15초 모션 그래픽을 만드는 동일한 요청을 낮은·높은·최고 노력 설정으로 비교한다. 발표자가 밝힌 제작 시간은 각각 약 20분, 30분, 8시간이며, 최고 설정의 결과를 가장 좋게 평가한다. [04:50]
• 세 결과물을 보여준 뒤 낮은 설정도 충분히 괜찮다고 평가한다. 원하는 결과가 나오지 않는 이유를 노력 설정에서만 찾기보다 프롬프트를 살펴보라고 권한다. [05:57]

3. 스토리보드로 제작 방향을 먼저 확인하기

• 전체 영상 구현 전에 주요 장면을 대표하는 프레임을 요청해 이야기의 흐름과 디자인을 확인하라고 제안한다. 생성과 검수 루프가 길어질 수 있어 사전 조율이 필요하다는 설명이다. [06:41]
• 일곱 주요 장면으로 구성된 스토리보드 예시를 보여준다. 코딩 전에 장면을 수정하면 완성 영상을 기다린 뒤 재생성을 반복하는 시간을 줄일 수 있다고 강조한다. [07:17]

4. 프롬프트 조건과 검수 루프 구성하기

• 길이, 영상 유형, 화면 비율, JavaScript 사용과 사운드트랙을 요청에 포함한다. 내레이션 파일을 먼저 제공하면 화면을 오디오에 맞춰 제작할 수도 있다. [08:14]
• Playwright와 FFmpeg를 사용해 MP4로 출력하도록 지정하고, 완료 전에 콘택트 시트를 추출해 확인·수정·재렌더링을 반복하도록 요청한다. [09:03]
• 화면을 먼저 만들지, 오디오를 먼저 제공할지 결정해야 한다고 정리한다. 내레이션에는 ElevenLabs나 오픈소스 대안을 사용할 수 있으며, ElevenLabs의 가격과 품질에 대한 자신의 평가를 덧붙인다. [09:56]

5. 레퍼런스로 스타일과 구도를 전달하기

• 이미지를 실제 화면에 넣거나 미적 스타일을 참고하게 할 수 있다. 영상 레퍼런스의 구도를 활용하되 자신만의 내용을 넣는 방식도 제안한다. [10:17]
• 통화를 설명하는 기존 영상과 전기의 역사를 설명하는 JavaScript 재구성 영상을 비교한다. 내용은 달라도 비슷한 디자인 계열과 구도를 구현했다고 평가한다. [11:04]
• 영감 탐색 경로로 영상 사례를 모아둔 사이트와 Twitter의 제작자 프로필을 보여준다. 사이트는 유료 서비스지만 무료 버전에서도 일부 사례를 볼 수 있다고 보여준다. [11:41]

6. 반복 제작 절차를 스킬로 묶기

• 자신이 만든 Claude Code 스킬을 보여준다. 일곱 가지 기본 스타일을 제공하고, 이미지·영상 레퍼런스로 사용자 지정 스타일도 요청할 수 있다고 보여준다. [12:17]
• 스킬은 주제·형식·음성·반복 등장 캐릭터 등에 대한 질문에서 시작해 이야기 구성, 스토리보드, 코딩과 납품으로 진행한다. 그 과정에서 Playwright와 FFmpeg를 이용한 검수 루프를 자동으로 수행한다고 보여준다. [13:08]
• 플러그인 설치나 URL 전달로 사용할 수 있다고 안내한다. Playwright, FFmpeg, faster-whisper 등 의존성을 확인하고 선택적으로 음성 서비스 연결도 묻는다고 보여준다. [13:25]

7. 개발 상태와 비용 조건을 밝히며 마무리하기

• 스킬이 개발 중임을 밝히고, 사용자가 개선 사항을 만들면 PR로 제안해 달라고 요청한다. [13:37]
• 별도 AI 이미지·영상 생성 도구 없이 제작할 수 있지만 모델 사용량 비용은 지불한다고 정리한다. 좋은 프롬프트와 레퍼런스의 중요성을 다시 강조하고 교육 상품 안내와 함께 영상을 마친다. [14:08]

🧾 결론

• 핵심은 Claude가 시간의 함수로 표현되는 애니메이션 코드를 작성하고, 브라우저 렌더링과 영상 인코딩 도구가 이를 완성하는 제작 방식이다.
• 제작 효율을 높이는 출발점은 노력 수준을 무조건 높이는 것보다 스토리보드로 장면을 먼저 합의하고 필요한 조건을 구체적으로 전달하는 데 있다.
• 프레임 검수와 재렌더링을 절차에 포함하고, 반복 작업을 스킬로 정리하면 영상 제작 과정을 재사용하기 쉬워진다.
• 발표자의 ‘거의 무료’라는 평가는 별도 이미지·영상 생성 도구가 필요 없다는 의미로 이해해야 하며, 실제 제작에는 모델 사용량과 시간이 들어간다.

📈 투자·시사 포인트

• 영상 생성 도구를 추가로 구매하지 않고도 설명 영상·제품 데모·모션 그래픽을 만드는 경로가 제시된다. 제작 도구 선택 시 구독료뿐 아니라 모델 사용량과 렌더링 시간을 함께 비교필요가 있다.
• 발표자의 사례에서 15초 영상 제작 시간은 낮은 설정 약 20분, 높은 설정 약 30분, 최고 설정 약 8시간으로 벌어졌다. 품질 향상이 시간 증가를 정당화하는지는 작업 목적에 따라 판단해야 한다.
• 레퍼런스와 스토리보드를 통한 사전 조율은 긴 재생성 루프를 줄이는 수단이다. 반복 제작에서는 생성 성능뿐 아니라 기획·검수 절차가 비용과 납기에 영향을 줄 수 있다.
• 스킬은 제작 절차를 재사용하는 수단으로 소개되지만, 영상에는 관련 기업의 매출·수익성·시장 규모 자료가 없다. 특정 종목의 투자 판단으로 직접 연결할 근거는 부족하다.

⚠️ 불확실하거나 확인이 필요한 부분

• 제목의 ‘무료’와 실제 총비용은 구분해야 한다. 발표자는 마지막에 사용량 비용을 인정하며, 선택적으로 사용하는 음성 서비스도 유료 구독을 언급한다.
• 노력 수준별 품질과 소요 시간은 발표자의 시연 결과다. 반복 실험 횟수, 실행 환경, 사용량과 객관적인 품질 평가 기준이 제시되지 않아 일반적인 성능 비교로 확정하기 어렵다.
• 자막에 등장하는 모델명, 서비스명과 일부 기술 명칭에는 표기 혼선이 있다. 실제 사용하려는 모델과 레퍼런스 사이트의 정확한 명칭은 확인이 필요하다.
• 자막 기반 정리: 타임스탬프가 있는 자막을 기준으로 정리했으며, 고유명사·수치·인용은 원문 확인 필요 시 별도 검증한다.
• 영상 속 주장: 발표자의 해석·전망·비교는 확인된 외부 사실이 아니라 영상 속 주장으로 분리해 읽는다.
• 검증 필요: 수치, 기업 실적, 정책·시장 전망은 발행 전 최신 자료로 별도 검증이 필요하다.

✅ 액션 아이템

• 영상의 목적, 길이, 화면 비율, 스타일과 오디오 구성을 먼저 정리한다.
• 전체 구현 전에 스토리보드와 대표 장면을 요청하고, 구성과 디자인을 수정한다.
• JavaScript 사용, Playwright 렌더링, FFmpeg 기반 MP4 출력과 검수·재렌더링 절차를 프롬프트에 명시한다.
• 내레이션을 먼저 제공할지, 화면을 먼저 만들지 결정하고 필요한 이미지·영상 레퍼런스를 준비한다.

❓ 열린 질문

• 노력 수준을 높였을 때 얻는 품질 향상은 추가 제작 시간과 사용량 비용을 얼마나 정당화하는가?
• 영상 길이와 장면 복잡도가 커질수록 프레임 검수·재렌더링에 드는 시간은 어떻게 달라지는가?
• 스토리보드와 레퍼런스를 어느 정도 구체화해야 반복 수정 횟수를 안정적으로 줄일 수 있는가?