anim-skill · 종단간 애니메이션 생성
하나의 주제를 입력하면 하나의 영상이 나옵니다. 모든 화면은 코드로 프레임별로 그려집니다(Remotion + React). 어떤素材 라이브러리, 생성형 비디오 모델, 외부 이미지에도 의존하지 않습니다.
스타일은 플러그인, 음성은 플러그인, 프로세스는 고정입니다. 새 스타일을 추가해도 프로세스가 바뀌지 않고, 음성 엔진을 교체해도 프로세스가 바뀌지 않습니다.
언제 사용하나
- "X에 대한 설명 애니메이션을 만들어 줘"
- "이 문서/교안을 영상으로 만들어 줘"
- "이 영상에 해설을 넣어 줘"
- "X 스타일로 다시 만들어 줘"
- "이 영상에 깜빡임이나 빈 장면이 있는지 확인해 줘"
사용하지 말아야 할 때: 실제 촬영素材가 필요할 때, 사람이 말하는 장면이 필요할 때, 3D 렌더링이 필요할 때(Blender 사용).
입력: 두 가지 모드, 먼저 판단
| 모드 | 트리거 조건 | 추가로 하는 작업 |
|---|---|---|
| A · 주제 기반 | 사용자가 주제어나 한 문장만 제공 | 먼저 조사(사실, 숫자, 일반적인 오해)를 수행한 후 디자인에 들어감 |
| B · 문서 기반 | 사용자가 이미 주제 문서(교안, 백서, PPT 원고)를 제공 | 먼저 세분화 및 수정(데이터 보충, 용어 통일, 시각화할 수 없는 문장 표시)을 수행한 후 디자인에 들어감 |
판단 후 먼저 한 번 되풀이한 다음 작업을 시작합니다: 나는 A/B 모드, N초 길이, 어떤 스타일, 누구를 대상으로 할 것인지 설명합니다. 이 네 가지 중 두 가지 이상이 불명확하면 질문하고, 추측하지 마세요.
여섯 단계(순서를 바꿀 수 없음)
0 PREFLIGHT → 1 내용 → 2 스토리보드 → 3 빌드 → 4 음성 → 5 검수 및 전달
↑ ↓
└── 재작업 ←──────┘
0 · PREFLIGHT(일회성, 2분)
node <skill>/scripts/preflight.mjs
node / npm / ffmpeg / 브라우저 확인; 로컬에서 사용 가능한 음성 엔진 출력. 하나라도 누락되면 먼저 명확히 알려주세요. 렌더링할 때가 되어서야 발견하지 않도록.
1 · 내용(A 조사 / B 세분화)
산출물 research.md: 한 문장 요지, 3–6개의 뒷받침 사실, 숫자와 출처, 반드시 피해야 할 오해, 청중이 알고 있는 것과 모르는 것.
- A 모드: 검증 위주. 모든 숫자는 출처가 있어야 하며, 찾을 수 없으면 "확인 필요"로 표시하고 절대 지어내지 마세요.
- B 모드: 원문을 기준으로 하되 보충만 하고 수정하지 않음. 원문에서 시각화할 수 없는 문장은 표시(애니메이션은 동작, 비교, 변화만 그릴 수 있음).
2 · 스토리보드
산출물 plan.md(형식은 references/storyboard.md 참조): 각 장면 한 줄——프레임 범위, 화면, 동작 원어, 자막.
엄격한 판단 기준(만족하지 않으면 다시 작성):
- 각 장면 하나의 주인공, 콘텐츠 영역 높이 ≥1/3(그래픽 ≥170px, 큰 글자 ≥96px이면서 전체 줄 ≥300px)
- 주인공은 첫 번째 또는 두 번째 비트에 등장
- 크기는 세 가지뿐: 주인공 ≥170 / 조연 60–110 / 설명 22–30
- 전체 영상에 ≥1개의 "하이라이트 순간"(요지 문장, 주인공 등장, 마무리 payoff 중 하나), 장식으로 채우지 마세요.
3 · 빌드
node <skill>/scripts/scaffold.mjs <프로젝트 디렉토리> --title "제목" --style <스타일 id>
스타일 브리프(styles/index.json)에 따라 src/scenes/*.tsx를 작성하고 <Series>로 장면을 연결합니다.
철칙(위반하면 렌더링이 망가지거나 영상이 깨집니다):
- 모든 것은
useCurrentFrame()에서 유도합니다.Math.random(),Date.now(),setState카운터 금지. 무작위성은 결정적이어야 함:hash(seed) = fract(sin(seed*127.1+311.7)*43758.5453). - 모든
interpolate()에는{extrapolateLeft:'clamp', extrapolateRight:'clamp'}가 있어야 합니다. 하나라도 없으면 프레임 범위 밖에서 값이 튑니다. - CSS
transition/animation/@keyframes금지. 효과는interpolate와spring만 사용. - 외부素材나 무거운 의존성(three.js / GSAP / 이미지)을 가져오지 마세요. 화면이 필요하면 SVG와 CSS 그라데이션으로 그리세요.
- SVG 블러 프리미티브는 같은 프레임에 ≤12개,
filter: blur()요소는 ≤15개. 그렇지 않으면 렌더링이 10배 느려집니다.
4 · 음성(선택 사항)
node <skill>/scripts/srt.mjs <프로젝트 디렉토리> # 스토리보드에서 SRT 생성
python <skill>/scripts/narrate.py <video> --provider edge|volc --voice <id>
- 음성 없이도 전달 가능(교실에서 선생님이 설명하는 경우).
- 음성이 있을 경우 먼저 SRT를 생성한 다음 합성, 타임라인은 렌더링 프레임 번호에서 가져오고 추정하지 않음.
- 엔진은 플러그인이며,
references/voice.md참조.
5 · 검수 및 전달
python <skill>/scripts/qc.py <video> # 빈 장면 / 주요 객체 크기
python <skill>/scripts/qc_flicker.py <video> # 깜빡임 / 하드 컷 위치
두 가지 하드 기준(references/qc.md 참조):
- 빈 장면: 콘텐츠 영역에서 가장 큰 객체 <110px가 >45프레임 지속 → 결함; <80px → 차단
- 깜빡임: 밝기가 국소 중간값에서 6 이상 편차(0/1 점프) → 결함
전달 목록: <slug>.mp4, <slug>.srt, plan.md, research.md, src/(편집 가능한 프로젝트),
README.md(수정 및 재렌더링 방법).
스타일 플러그인
styles/index.json에 15가지 내장, 각각은 실행 가능한 브리프(배경색, 먹색, 칠색, 선 두께, 떨림, 발광, 텍스처, 폰트, 분위기, 그림자 가독성, 적합한 대상).
호출 방식: --style neon / --style paper / --style crayon …
새 스타일 추가: index.json에 항목 하나 추가 + styles/에 브리프 파일 하나 배치,
프로세스, 스크립트, 템플릿을 수정할 필요 없음. 확장 규약은 references/styles.md 참조.
스타일 선택 경험: 먼저 "그림자 가독성"으로 필터링(뒷줄에서도 잘 보이는지), 그다음 "분위기"로 필터링. 종이 공예/크레용은 유아용, 네온/미니멀리즘은 프로젝터 상태가 나쁜 교실에 적합.
음성 플러그인
내장된 두 가지 제공자:
| 제공자 | 비용 | 필요 사항 | 비고 |
|---|---|---|---|
edge | 무료 | 없음 | Microsoft Azure Neural Voice, 다소 방송 스타일 |
volc | 문자당 0.0003위안 | APPID + API Key | Doubao 음성, 사람 목소리에 가까움; 새 계정에 무료 할당량 있음 |
새 엔진 추가: synthesize(text, voice) -> mp3 bytes를 구현하여
scripts/tts/<provider>.py에 등록하면 narrate.py는 수정할 필요 없음. references/voice.md 참조.
전달 전 자가 점검(항목별 체크)
-
remotion render종료 코드 0,ffprobe프레임 수 = 설계 프레임 수 -
qc.py에 차단 항목 없음;qc_flicker.py에서 장 전환 외에 스파이크 없음 - 모든
interpolate에 clamp가 있음(grep -c "interpolate("=grep -c "extrapolateLeft") -
Math.random/Date.now/ CSS animation 없음 - 자막과 화면이 일치함(3개 비트 프레임을 무작위로 확인)
- 한글 폰트가 로컬에 설치되어 있음(그렇지 않으면 렌더링 시 네모 상자가 나타남)
한 페이지 요약
node scripts/preflight.mjs
node scripts/scaffold.mjs ./videos/my-film --title "제목" --style paper --seconds 20
cd videos/my-film && npm install
node <skill>/scripts/render.mjs . main out/my-film.mp4
node <skill>/scripts/srt.mjs .
python <skill>/scripts/narrate.py out/my-film.mp4 --provider volc --voice zh_female_cancan_uranus_bigtts
python <skill>/scripts/qc.py out/my-film-volc.mp4
자세한 내용은 references/에 있습니다: pipeline.md(각 단계 상세), storyboard.md(스토리보드 템플릿),
styles.md(스타일 목록 및 확장), voice.md(음성 및 확장), qc.md(검수 기준),
render-env.md(환경 함정: Windows 샌드박스, TEMP, 브라우저 경로, ffmpeg 매개변수).