nathanaelhub/make-reel

make-reel은(는) 무엇을 하나요?

당신은 편집자, 애니메이터이자 내레이터입니다. 사용자가 한 줄을 입력하면(예: "비행기 음식이 왜 이렇게 밋밋한지에 대한 릴 만들어줘"), 당신은 이미 확인한 MP4를 반환합니다.

모든 작업은 리포지토리 루트에서 npm 스크립트로 실행됩니다. 아래 모든 경로는 리포지토리 루트 기준입니다.

0 · 설정 (세션 첫 번째)

npm run doctor를 실행합니다. ✗ 표시가 있으면 npm run doctor -- --fix를 실행하고 다시 확인합니다.

• 사용 가능한 음성 공급자가 없으면 사용자에게 한 번 알립니다: ELEVENLABS_API_KEY(최고, 정확한 단어 타이밍) 또는 OPENAI_API_KEY를 .env에 추가하거나 Piper를 설치할 때까지 릴은 무음 초안으로 제공됩니다. macOS에서는 내장 say 음성이 무료로 작동합니다. 그런 다음 계속 진행합니다. 무음 초안도 여전히 유용합니다.
• .env의 내용을 출력하거나 커밋하지 마십시오.

1 · 먼저 취향 파악 (참조가 있을 때)

참조 없이 만든 릴은 평범해집니다. 사용자가 참조 링크나 파일을 제공하거나, 브랜드를 언급하거나, "이거처럼"이라고 말하면:

1. npm run ref -- <taste> <links or files> (이름, 또는 비공개 브랜드 폴더의 절대 경로). 다운로드, 측정 및 접촉 시트를 작성합니다.
2. Read 도구로 모든 refs/*.sheet.jpg를 열어 확인합니다. 그런 다음 taste/<taste>/taste.md의 Notes 섹션을 작성합니다: 페이싱, 캡션과 유형, 색상, 모션, 사운드, 해야 할 것, 하지 말아야 할 것. 구체적으로 작성하고("흰색 압축 대문자, 한 번에 두 단어, 하단 1/3"), 일반적인 표현("현대적, 깔끔한")은 피합니다.
3. script.json에 "taste": "<taste>"를 설정합니다.

이 브랜드에 대한 취향이 이미 존재하면, 작성 전에 taste.md를 읽고 시트를 확인합니다. 사용자가 정돈된 룩을 원하고 취향이 없으면, 제작 전에 좋아하는 릴 3~5개를 한 번 요청합니다.

영감을 받되, 절대 복사하지 마십시오: 참조의 영상, 음악, 문구, 로고 또는 정확한 레이아웃을 재사용하지 마십시오.

2 · 릴 계획

짧은 케밥-케이스 슬러그를 선택한 후 npm run new -- <slug> "<Title>"을 실행합니다. 이렇게 하면 reels/<slug>/에 script.json, reel.html, assets/가 생성됩니다.

.claude/skills/make-reel/guides/script.md를 읽고 reels/<slug>/script.json을 작성합니다:

• 610개 장면, 총 3055초. 장면당 하나의 아이디어, 장면당 8~20개의 구어 단어.
• 장면 1은 후크이며 2초 이내에 시작됩니다.
• 각 장면에는 id, say(정확한 나레이션) 및 visual(시청자가 보는 것, 각 시각적 비트가 해당하는 단어)이 있습니다.
• 주제가 사실적인 경우, 사실을 정확히 알아냅니다. 확실하지 않은 것은 확인하고(가능하면 검색) 출처를 킥커나 화면에 표시합니다. "최대 30%"와 같은 완충된 숫자를 선호합니다.

3 · 음성

npm run voice -- <slug>

이것은 voice.mp3와 timeline.json(장면 시작/종료 + 모든 단어의 타임스탬프)을 만듭니다. 인쇄된 테이블을 읽으십시오: 애니메이션의 기준이 되는 타이밍입니다. 클립은 장면별로 캐시되므로 나중에 편집해도 변경된 장면만 다시 음성화됩니다.

4 · 애니메이션

.claude/skills/make-reel/guides/scenes.md(전체 키트 참조)와 .claude/skills/make-reel/guides/style.md(룩)을 읽습니다. 그런 다음 reels/<slug>/reel.html을 작성합니다: 스크립트 장면당 하나의 <section class="scene" data-scene="<id>">, 동일한 id, 동일한 순서.

가장 중요한 규칙:

• 단어에 모션 동기화. data-at="@word"를 사용하여 말할 때 동작이 이루어지도록 합니다. 모든 장면은 0에서의 입장뿐만 아니라 핵심 단어에 비트가 있어야 합니다.
• 항상 움직이는 무언가가 있어야 합니다. 약 2초 이상 변화가 없는 구간이 없어야 합니다. 단어 동기화 비트, data-loop, 카운터, SVG 선 그리기를 사용합니다.
• 레이아웃: 텍스트는 x 721008 내부. 헤드라인은 y≈230에서 시작. 주요 시각 요소는 y≈4501180 사이. 캡션은 y≈1240~1440에 위치합니다. 해당 대역에 콘텐츠를 두지 말거나, 장면에 data-captions="top" / "off"를 설정합니다. y 1700 아래에는 중요한 것이 없습니다(앱 UI가 가림).
• 위치는 절대적입니다(class="abs" + 인라인 left/top). CSS 애니메이션이나 전환을 사용하지 마십시오. 모든 모션은 데이터 속성 또는 Reel.on() 훅에서 비롯되며, 모두 스프링(spring, spring-snappy, spring-bouncy, spring:k,c,m)에서 실행됩니다. 그렇지 않으면 검사가 실패합니다.
• 색상 그라데이션이 있는 중앙 정렬 대문자 텍스트 금지(검사 실패).
• 시각 자료: 이모지, 인라인 SVG, CSS 도형, 키트의 카드/전화/창/스탬프/칩, reels/<slug>/assets/의 이미지. 실제 사람 이미지를 다운로드하거나 소유하지 않은 로고/캐릭터를 사용하지 마십시오.

5 · 자신의 작업 확인 (항상 렌더링 전에)

npm run check -- <slug>

1. 모든 ✗ 오류를 수정합니다. 이유가 없는 한 ⚠ 경고도 수정합니다.
2. Read 도구로 나열된 모든 접촉 시트 PNG를 열고 실제로 확인합니다. Lint는 미적 감각을 판단할 수 없습니다. 겹치거나 비좁은 요소, 읽기 어려운 텍스트, 비어 있거나 지루한 장면, 나레이션과 일치하지 않는 시각 자료, 콘텐츠를 가리는 캡션, 장면 간 불일치 스타일을 찾습니다.
3. 릴에 취향이 있으면 검사 시 참조 시트가 출력됩니다. 릴의 시트와 함께 보고 세 가지 가장 큰 차이점(페이싱, 유형, 색상, 모션)을 지적합니다. 중요한 것을 수정하거나, 수정하지 않는 이유를 설명합니다.
4. 편집하고, 검사를 다시 실행하고, 다시 확인합니다. 깨끗해질 때까지 반복합니다. 보통 1~3회.

6 · 렌더링

npm run render -- <slug>. 출력: out/<slug>.mp4. 빠른 반해상도 미리보기는 --draft를 사용하고, 특정 구간만 렌더링하려면 --from 10 --to 18을 사용합니다.

렌더링 후, MP4에서 전환점과 단어 동기화 지점에서 3~4프레임을 추출하여(ffmpeg -ss <t> -i out/<slug>.mp4 -frames:v 1 f.jpg) 확인합니다. 그래야 MP4가 검사에서 보여준 것과 일치하는지 알 수 있습니다.

인계: MP4 경로, 길이, 사용된 음성, 그리고 여전히 개선할 점 한 줄. 사용자가 자신의 기계에 있으면, 브라우저에서 오디오와 함께 시청할 수 있도록 npm run preview -- <slug>를 언급합니다.

7 · 피드백 루프

.claude/skills/make-reel/guides/feedback.md를 읽습니다. 사용자는 "어색하다", "후크가 약하다", "장면 4가 지루하다", "스탬프를 더 크게"와 같이 말합니다. 각 노트를 가장 작은 변경에 매핑합니다:

• 문구, 페이싱, 장면이 너무 길거나 짧음 → script.json 편집 후 npm run voice(변경된 장면만 다시 음성화). 단어 타임스탬프는 변경되지만 @word 참조는 자동으로 따라옵니다.
• 룩, 레이아웃, 모션, 비트 타이밍 → reel.html만 편집. 다시 음성화할 필요 없음.
• 그런 다음 검사 → 시트 확인 → 렌더링. 변경한 내용을 한두 줄로 말합니다.