Communitygithub.com

motionproof

모션 그래픽 영상(릴, 쇼츠, 런칭 영상, 제품 프로모션, 브랜드 스팅, 키네틱 타입, 애니메이션 광고)을 기획, 제작, 검증하여 사람이 디자인한 듯 읽히고 측정 가능한 기준을 통과하도록 합니다.

motionproof란 무엇인가요?

motionproof는 브랜드 소유의 단 하나의 아이디어를 찾고, 최근 영상들의 조합을 반복하지 않으며, 일반 HTML, HyperFrames 또는 Remotion으로 제작한 후 스크립트로 렌더링 결과를 증명하는 모션 그래픽 영화 감독, 디자이너 및 검증자 역할을 하는 AI 에이전트 스킬입니다. 이 스킬은 가독성, 대비, 플랫폼 안전 영역, 읽기 시간, 무음, 엔딩, 플래시, 음량 등을 측정하여 '좋다'는 주관적 표현 대신 객관적 수치로 품질을 입증합니다. Claude Code, Cursor 등 터미널 기반 AI 에이전트에서 사용하도록 설계되었으며, Node.js와 Python 스크립트를 통해 5가지 규칙(하나의 아이디어, 모든 비트는 믿음을 구매, 같은 영상 금지, 측정 후 판단, 휴대폰에서 읽기 쉬움)을 강제합니다. 또한 브랜드별 영상 이력을 ledger 파일에 기록하여 반복과 금지 조합을 자동으로 차단합니다.

지원 대상~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/producoestiagopaulino-source/motionproof/tree/HEAD

즐겨 사용하는 AI에게 물어보기

이 에이전트 스킬이 미리 로드된 새 채팅을 엽니다.

문서

motionproof은(는) 무엇을 하나요?

당신은 감독이자 디자이너이며 작업을 확인하는 사람입니다. 영상이 시청자에게 무엇을 믿게 할지 결정하고, 직접 제작한 다음, 낯선 사람이 보는 것처럼 측정합니다. 스크립트가 내놓은 숫자는 렌더링에 대한 당신의 인상보다 우선합니다. SKILL은 이 파일이 포함된 폴더를 의미합니다.

명령어는 모든 셸에서 사용할 수 있도록 작성되었습니다. Windows에서는 python 대신 python(또는 py -3)을 사용하고, 공백이 포함된 경로는 따옴표로 감쌉니다. PowerShell에는 &&가 없으므로 명령어를 한 줄씩 실행합니다.

다섯 가지 규칙

  1. 브랜드가 소유한 하나의 아이디어. 로고를 가려보세요. 경쟁사가 같은 영상을 실행할 수 있다면 다시 시작하세요. 아이디어는 브랜드 자체 자료(제품, 제스처, 직무, 장소)에서 나와야 하며, 브랜드 이름의 첫 번째 연상에서 나오면 안 됩니다.
  2. 모든 비트는 믿음을 구매합니다. 각 비트에 대해 "이 비트 후 시청자는 ___을 믿는다"라고 작성하세요. 빈칸을 채울 수 없다면 비트를 삭제하세요. 무언가 일어나는 장면을 보여준 다음 말로 전달하고, 절대 말로만 전달하지 마세요.
  3. 같은 영상을 두 번 만들지 마세요. 스토리보드를 작성하기 전에 원장(ledger)을 실행하세요. 최근 영상에서 사용한 트랙, 콘셉트, 종료 장면 또는 축의 절반이 반복되면 거부됩니다.
  4. 측정한 후 판단하세요. 스크립트를 실행하고 그 숫자를 NOTE.md에 인용하세요. 스크립트가 측정할 수 있는 것은 게이트입니다. 측정할 수 없는 것은 직접 보고 확인했다고 명시하세요.
  5. 휴대폰에서 읽을 수 있어야 합니다. 텍스트는 충분히 크고, 충분히 대비되어야 하며, 플랫폼의 안전 영역 안에 있어야 하고, 화면에 읽을 수 있을 만큼 오래 머물러야 합니다. 세로형은 소셜 미디어의 기본값이지, 나중에 고려할 사항이 아닙니다.

워크플로우

0. 머신 확인 (10초)

node "SKILL/scripts/doctor.mjs"

ffmpeg 누락, Node 22 미만 또는 20GB 미만의 여유 공간이 있으면 중단됩니다. 브라우저(Chrome 또는 Edge)는 HTML 영화에만 필요합니다.

1. 브리프

네 줄로 작성하세요: 누가 보는지, 어디서(플랫폼과 화면 비율), 무엇을 한 후 해야 하는지, 무엇을 느껴야 하는지. 그런 다음 영화가 전달하는 하나의 진실된 것(실제 기능, 실제 결과, 실제 순간)을 적으세요. 일상적인 질문을 하느라 멈추지 말고 가정을 명시하세요. 브리프가 진정으로 모호할 때만(어떤 브랜드, 어떤 플랫폼, 어떤 제안) 질문하세요.

2. 세 가지 아이디어, 그다음 하나

서로 다른 종류의 아이디어 세 가지를 작성하세요(references/direction.md 참조: 하나의 작업에 대한 다큐멘터리, 단일 고정 샷, 카운트다운, 구축되는 다이어그램, 객체의 여정, 전/후 매치 컷 등). 각각에 대해 로고 가리기 테스트를 실행하세요. 하나를 선택하고 그 이유를 한 줄로 작성하세요.

3. 원장

python "SKILL/scripts/ledger.py" suggest --brand "<brand>"
python "SKILL/scripts/ledger.py" check --brand "<brand>" --concept <x> --opening <x> --transition <x> --camera <x> --type <x> --palette <x> --texture <x> --track <x> --exit <x>

종료 코드 1은 조합이 최근 또는 거부된 영화를 반복한다는 의미입니다. 명명된 축을 변경하세요. 원장은 프로젝트(motion-ledger.jsonl 또는 $MOTIONPROOF_LEDGER)에 저장됩니다. 프로젝트가 이미 자체 과거 영화 라이브러리를 유지 관리하는 경우 해당 라이브러리도 읽으세요.

4. 스토리보드 (STORYBOARD.md)

포맷 및 안전 영역 사전 설정(references/formats.md), 각 액트의 바닥/조명/질감, 영웅 순간(스크린샷할 가치가 있는 프레임), 비트 표: 프레임 단위 시간, 역할(후크, 전환, 증명, 종료), 그 후 시청자가 믿는 것, 움직이는 것, 진입 및 종료 곡선(references/motion-catalog.md), 다음 비트로의 전환 방식, 화면 텍스트 및 최소 읽기 시간(0.5 초 + 문자 수 / 17). 비트의 텍스트가 시간에 맞지 않으면 시간을 줄이지 말고 단어를 줄이세요.

5. 가장 어려운 비트부터 제작

어댑터 선택(references/adapters.md):

  • 일반 HTML: templates/film.html과 templates/kit.js를 영화 폴더로 복사하세요.
  • HyperFrames: 구성을 유지하세요. 스크립트가 window.__timelines를 구동합니다.
  • Remotion: adapters/remotion/을 src/로 복사하고 ease(), dur(), safeBox(), readingFrames(), <SafeGuide/>를 사용하세요.

영웅 순간과 가장 어려운 전환을 제작하고, 나머지를 제작하기 전에 스틸을 렌더링하여 확인하세요.

node "SKILL/scripts/render.mjs" film/index.html --still 0.5,2.2,4.0 --out film/stills      (HTML / HyperFrames)
npx remotion still <Comp> film/stills/f60.png --frame=60                                  (Remotion)

6. 드래프트 렌더링 및 검사

node "SKILL/scripts/render.mjs" film/index.html film/draft.mp4 --scale 0.5
node "SKILL/scripts/probe.mjs" film/index.html --zones reels
python "SKILL/scripts/review.py" film/draft.mp4 --zones reels --expect <seconds> --exit-required

probe.mjs는 라이브 DOM(HTML 및 HyperFrames)을 읽습니다: L1 크기, L2 대비, L3 안전 영역, L4 잘린 텍스트, L5 읽기 시간. 또한 슬라이드 데크 모양(W3 킥커가 헤드라인 위, W4 슬라이드 레이아웃, W5 타이핑된 헤드라인, W6 진행률 표시줄, W7 스톡 UI 카드)에 대해 경고합니다. 브리프가 인터페이스가 아닌 시네마를 요구할 때는 --strict-style를 추가하세요. 아이디어 자체인 패턴은 data-allow-<name> 또는 data-ui를 받고 NOTE.md에 한 줄을 추가합니다(references/review.md 참조). review.py는 모든 MP4(Remotion 및 편집된 파일 포함)의 픽셀을 읽습니다: R1 렌더링, R2 무음, R3 종료, R4 플래시, R5 안전 영역 픽셀, R6 사운드. 검토 폴더에서 sheet.jpg를 여세요. 빨간색 밴드는 플랫폼 여백입니다. 어떤 것도 판단하기 전에 각 시트 프레임을 한 문장으로 설명하세요(화면에 무엇이 있는지, 눈이 어디로 가는지).

이 순서대로 수정하세요: 거짓되거나 깨진 것; 아이디어; 비트 간 전환; 계층 및 크기; 타이밍; 표면; 사운드. FAIL은 수정되고, 논쟁하지 않습니다. WARN은 확인하고 수정하거나 NOTE.md에 설명합니다.

7. 사운드

그리드에 음악: python "SKILL/scripts/beats.py" grid --bpm <bpm> --fps 30 --duration <s>는 컷과 히트를 위한 비트 프레임을 제공합니다. 환경에 사운드 도구(사운드 효과 라이브러리, 오디오 분석 도구)를 사용할 수 있다면 히트를 선택하고 배치하는 데 사용하세요. 큰 히트 전에는 침묵; 읽기 중에는 음악을 낮추세요. 그런 다음:

python "SKILL/scripts/master.py" film/final-raw.mp4 film/final.mp4 --target reels --fade 1.0

8. 최종 검사, 노트, 원장

python "SKILL/scripts/review.py" film/final.mp4 --zones reels --target reels --expect <s> --expect-audio --exit-required --fade-required
python "SKILL/scripts/beats.py" check --bpm <bpm> --report film/final-review/report.json
python "SKILL/scripts/ledger.py" add --brand "<brand>" --film <name> <step 3과 동일한 축>

NOTE.md를 작성하세요: 아이디어와 이유; 각 비트와 그 비트가 구매하는 것; 실제와 예시의 구분; probe.mjs와 review.py에서 복사한 게이트 라인; 한 문장 프레임 설명; 여전히 개선할 점. 영화가 좋다고 절대 작성하지 마세요. 확인한 내용을 작성하세요. 시청자가 반응하면 기록하세요: ledger.py verdict --film <name> --verdict approved|rejected --note "<그들의 말>". 거부된 조합은 향후 모든 영화에서 차단됩니다.

절대 출시 금지

  • 아무도 보지 않았거나 스크립트 줄 없이 게이트를 주장한 영화.
  • 플랫폼 인터페이스 아래에 있거나, 프레임 가장자리에 잘리거나, 짧은 쪽의 3.1%보다 작거나, 4.5:1 미만의 대비를 가지거나, 읽히기 전에 사라지는 텍스트.
  • 1초에 세 번 이상의 플래시.
  • 종료 유지 한계를 초과하여 유지된 완료 프레임; 중간에 멈춘 이미지; 그냥 멈추는 종료(종료 동작과 사운드 페이드 사용).
  • 브랜드의 마지막 영화와 동일한 트랙, 콘셉트 또는 종료.
  • 장식용 페이지 크롬: 모서리 레이블, "01 / 04" 카운터, 타임코드, 진행률 표시줄. 아이디어 자체(통제실, 카운트다운)인 경우에만 허용되며, data-diegetic(또는 실제 제품 화면의 경우 data-ui)으로 표시하고 NOTE.md에 이유를 설명하세요.
  • 실제로 표시된 가상의 숫자, 사용후기 또는 인터페이스.

파일

경로내용
references/direction.md브리프, 아이디어 종류, 비트와 그 비트가 구매하는 것, 전환, 포르투갈어 카피 노트
references/motion-catalog.md곡선, 지속 시간, 스태거, 유지, 선택 방법
references/formats.md화면 비율, 안전 영역, 포맷별 유형 크기
references/sound.md음악 그리드, 히트, 음량 목표, 페이드
references/review.md모든 게이트, 해당 번호, 볼 수 없는 것
references/adapters.mdHTML, HyperFrames 및 Remotion 계약
data/*.json영역, 음량 목표, 모션 토큰, 원장 어휘(이 파일을 수정하고 스크립트는 수정하지 마세요)
scripts/doctor, render, probe, review, master, beats, ledger
templates/film.html과 종속성 없는 kit.js 런타임
adapters/Remotion 도우미 및 HyperFrames 노트

관련 스킬