HTML → 비디오: 여러 변형, 최적 선택, 최종 조합
Claude는 HTML/CSS 디자인에서 가장 강력합니다. 따라서 비디오는 다음과 같이 제작합니다: HTML로 애니메이션을 작성하고, 이를 비디오로 렌더링한 후 결과를 눈으로 확인(프레임)하고, 변형을 비교하여 개선합니다.
요구 사항
node+playwright(Chromium 포함),ffmpeg. 확인:bash scripts/check-env.sh.
빠른 시작
cp references/template-scenes.html work/<이름>/v1.html # 씬 엔진 템플릿
node scripts/render.mjs work/<이름>/v1.html --preset vertical-preview --duration 20 --out work/<이름>/v1.mp4
references/engine.js— 씬 엔진: 배경, 강조 표시가 있는 자막 (*단어*), 진행도, 전환, easing (E.pop,E.type,E.set).references/parts.js— 세부 요소: 마스코트P.bot, 아이콘P.icon, macOS 창P.win, 채팅 버블.references/design-notes.md— 비디오를 '생생하게' 만드는 요소 (스토리, 훅, 리듬, 자막). 변형을 작성하기 전에 읽으세요.- 완성된 비디오 예시:
examples/(claude-ad— 16:9;chatgpt-ad— 9:16, 25초;duolingo-ad— 9:16, 40초, 60fps, 스토리와 데모 포함;claude-self-ad— 9:16, 39초, 60fps, 메타 트위스트가 있는 Claude 자체 광고). - 파일 크기: 40초 / 60fps 비디오 ≈ 10MB; 더 작은 제한이 필요하면
--fps 30또는ffmpeg -i in.mp4 -crf 24 out.mp4로 재인코딩.
주요 품질 원칙
-
보여주고, 말하지 마라. 비디오의 모든 주장은 증명하는 씬이어야 하며, 단순한 텍스트가 아니어야 합니다.
주장 보여줄 내용 '코드를 작성한다' 프롬프트가 입력되고 코드가 한 줄씩 나타남 '명확하게 설명한다' 실제 오류 ( she drink), 강조 및 '+s' 규칙, 설명하는 올빼미'실제로 가르친다' 손가락이 단어를 탭하고, 문장이 완성되며, 초록색 '정답입니다!' 패널 표시 '346일 연속 기록' 카운터 1→346 (불꽃 효과), 달력이 물결처럼 채워짐, 알림, 축하 메시지와 컨페티 '게임' 리그 테이블에서 주인공의 줄이 1위로 올라가고, +XP 표시 -
상황을 설명하라. 각 씬에는 두 개의 텍스트 레이어가 있습니다: 상단의 작은 제목-레이블 (
<div class="kick">: '수업', '리그')과 하단의 강조 표시된 키워드가 있는 자막 (cap: '실수를 *명확하게* 분석'). 한 단어 슬로건보다 완전한 문장이 더 좋습니다. -
부드러움. 최종 비디오는 60fps로 렌더링됩니다. 모든 것이 연속적으로 움직여야 합니다: 스프링 등장 (
E.spring,E.pop), 느린 카메라 줌 (cam: [1, 1.05]), 마스코트 흔들림, 깜빡임 (P.blink), 잔물결이 있는 손가락 터치 (P.touch), 카운터 (E.count),circle/wipe/left전환. 약 0.5초 이상 정적인 프레임을 남겨두지 마세요. -
스토리: 훅 (고통/유머) → 데모 → '최고의 특징' → 클라이맥스 (보상/결과) → 행동 촉구. 광고는 30~45초.
-
세 가지 변형은 세 가지 다른 아이디어여야 하지, 세 가지 색상 조합이 아니어야 합니다 (예: '연속 기록 카운터', '실시간 수업', '마스코트와의 대화'). 그런 다음 모든 변형의 최고 씬을 모아 최종 비디오를 만듭니다.
프로세스
1. 브리핑
다음을 확인 (또는 합리적인 기본값 선택)합니다: 주제/텍스트, 대상 청중, 길이 (광고 20~30초, 스토리 최대 60초), 형식 (기본값: Reels/Shorts/TikTok용 세로 1080×1920; 1920×1080 및 1080×1080은 요청 시), fps (30), 스타일, 색상/글꼴. 짧은 스토리보드를 작성합니다: 훅 → 문제 → 해결책 → 데모 → 행동 촉구. 브랜드 광고의 경우 공식 로고를 사용하지 말고 자체 마스코트를 그리세요.
2. 세 가지 이상의 서로 다른 변형
작업 폴더 work/<이름>/을 만들고 그 안에 v1.html, v2.html, v3.html (더 많아도 됨)을 만듭니다. 변형은 사소한 것이 아니라 개념적으로 달라야 합니다. 예: (a) 마스코트 스토리, (b) 카드가 있는 제품 데모, (c) 큰 타이포그래피가 있는 빠른 컷. 레이아웃, 팔레트, 리듬이 달라야 합니다. 각 파일은 독립적인 HTML이어야 합니다 (외부 로딩 없음, 글꼴은 시스템 또는 내장). 애니메이션 규칙은 references/animation-contract.md에, 시작 템플릿은 references/template.html에 있습니다.
3. 각 변형 렌더링
변형은 미리보기 해상도 (빠르게), 최종 버전은 전체 해상도로 렌더링합니다:
node scripts/render.mjs work/<이름>/v1.html --out work/<이름>/v1.mp4 --preset vertical-preview --duration 21
node scripts/render.mjs work/<이름>/final.html --out work/<이름>/final.mp4 --preset vertical --fps 60 --duration 40 [--audio music.mp3]
렌더링은 결정적이며 병렬로 실행됩니다 (코어 수만큼): 각 프레임에 수동으로 시간이 설정되며, 끊김이나 누락이 없습니다. --from 5 --to 9는 특정 구간만 렌더링합니다. 비디오 없이 단일 프레임: node scripts/frame.mjs v1.html 3.5,7 work/<이름>/frames --width 540 --height 960.
4. 분석 — 반드시 확인할 것
bash scripts/contact-sheet.sh work/<이름>/v1.mp4 work/<이름>/v1-sheet.png 12
*-sheet.png와 개별 프레임을 Read를 통해 엽니다 (이미지는 시각적으로 읽힙니다). references/rubric.md (8개 기준 각 5점 만점)에 따라 평가합니다: 가독성, 계층, 리듬, 부드러움, 균형, 통일성, 브리프 준수. 각 변형에 대해 기준별 점수, 가장 잘된 점, 가장 약한 점을 기록합니다. 코드가 아닌 프레임에서 보이는 것으로만 평가합니다. 명확하지 않은 부분이 있으면 더 촘촘하게 또는 특정 시점의 프레임을 만듭니다: bash scripts/contact-sheet.sh <mp4> <png> 12 <start_s> <end_s>.
5. 리더 선택 및 합성
- 총점이 가장 높은 변형을 선택합니다.
- '차용' 목록을 만듭니다: 다른 변형에서 가져올 구체적인 좋은 결정 (예: 'v2의 타이포그래피', 'v3의 등장 애니메이션', 'v1의 팔레트').
- 리더를 기반으로
final.html을 만들고 이러한 수정을 적용합니다. 리더의 약점을 수정합니다.
6. 최종 버전 반복 및 확인
final.mp4를 렌더링하고, 다시 contact sheet를 만들고 리더와 비교합니다. 최종 버전이 루브릭에서 리더보다 낫지 않으면 수정하고 반복합니다 (최대 3회). 그런 다음 사용자에게 결과를 보여줍니다: final.mp4 경로, 변형 평가 요약 표, 각 부분이 어디서 차용되었는지 목록.
7. 사운드 (선택 사항)
ffmpeg -i final.mp4 -i music.mp3 -shortest -c:v copy -c:a aac final-audio.mp4
규칙
- 브랜드의 공식 마스코트와 로고를 복사하지 마세요: 자체 캐릭터를 그리고 브랜드 이름은 텍스트로만 표시하세요.
- 4단계를 건너뛰지 마세요: 결정은 추측이 아닌 실제 본 프레임을 기반으로 이루어집니다.
- 모든 산출물은
work/디렉토리에 넣고 (.gitignore에 포함됨), 저장소에는 스킬과 예시만 커밋합니다. - Chromium/ffmpeg를 사용할 수 없으면 결과를 흉내내지 말고 그대로 말하세요.