모션 그래픽을 위한 클로드: 비디오로 캡처 가능한 애니메이션 HTML 비주얼을 생성하는 프롬프트 패턴

r/ClaudeAI의 한 Reddit 사용자가 클로드를 사용해 모션 그래픽과 애니메이션 차트를 직접 생성하고 있습니다. 다른 도구를 위한 프롬프트가 아니라, 클로드가 시각 자료를 HTML 위젯으로 만든 다음 Playwright + ffmpeg으로 MP4로 캡처하는 방식입니다. 이 사용자는 일관되게 작동하는 프롬프트 패턴을 공유합니다: 브레이킹 포인트가 있는 이야기를 설명하라는 것입니다.

효과적인 방법

핵심은 사용자가 무언가를 '부수게' 하는 것입니다. 좋은 결과를 낸 예시들:

• 위험으로 가득 차는 다섯 개의 잔을 보여줘. 마지막 잔이 넘쳐서 산산조각난다.
• 클릭할 때마다 늘어나는 고무줄을 보여줘, 결국 끊어질 때까지.

사용자는 클로드에게 사용자가 무언가를 부수게 하라고 지시하는 것이 결과물을 실제로 흥미롭게 만든다고 보고합니다.

찾고 있는 것

이 사용자는 커뮤니티에 다음과 같은 프롬프트를 요청하고 있습니다:

• 실제로 움직이는 애니메이션 차트나 데이터 시각화
• 사용자가 무언가를 제어하는 인터랙티브 설명 자료
• 클로드의 출력물에서 성공적으로 비디오로 캡처된 모든 것
• 다섯 번째 시도가 아닌 첫 번째 시도에서 일관되게 좋은 시각 자료를 생성하는 프롬프트 구조

원본 게시물에는 커뮤니티의 추가적인 구체적인 프롬프트는 포함되지 않았습니다. 해당 게시물은 아직 답변을 수집 중입니다.

실용적인 요점

클로드로 애니메이션 HTML 위젯을 만들고 나중에 비디오로 캡처하려면, 긴장과 해소의 호를 가진 내러티브를 중심으로 프롬프트를 구성하세요. 브레이킹 포인트는 시각적 변화(넘침, 끊어짐, 산산조각)를 유발하여 애니메이션을 매력적으로 만듭니다. Playwright로 스크린샷/녹화, ffmpeg로 MP4 인코딩을 결합하세요.