Communitygithub.com

모션 편집

Remotion 엔진을 사용하여 82개 전문 편집본의 프레임 단위 분석을 바탕으로 고급 모션 그래픽 영상, 설명 영상, 숏폼 편집(Reels/Shorts/TikTok/YouTube)을 원하는 종횡비의 MP4로 제작합니다.

모션 편집란 무엇인가요?

이 스킬은 프레임 단위로 측정된 규칙과 수치, 12가지 스타일 패밀리, 그리고 Remotion 엔진을 결합하여 프리미엄 모션 그래픽 비디오를 제작합니다. 사용자의 영상 클립 없이 독립 실행형 모션 그래픽(타이포그래피, UI 목업, 차트, 입자 효과 등)을 만들거나, 사용자가 제공한 푸티지를 기반으로 편집(컷 편집, 확대, 캡션 추가, 전환 효과 적용)하는 두 가지 모드를 지원합니다. 9:16, 16:9, 1:1 등 모든 종횡비를 지원하며, 모든 유형의 영상(설명 영상, 광고, 제품 데모, 음악 편집 등)을 제작할 수 있습니다. 스크립트 작성부터 최종 MP4 렌더링까지 전체 워크플로우를 자동화하며, Claude Code, Cursor, Codex와 같은 AI 에이전트 플랫폼에서 사용할 수 있습니다.

지원 대상~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/highontrading/motion-edits-skill/tree/HEAD

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

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

문서

모션 편집은(는) 무엇을 하나요?

이 스킬은 완성된 프리미엄 모션 비디오를 제작합니다. 다음 네 가지 요소를 기반으로 작동합니다.

  • 참조 편집본 82개의 프레임 단위 분석을 통해 측정된 규칙 및 수치 (references/)
  • 선택 및 혼합 가능한 12가지 스타일 패밀리 (references/styles/)
  • JSON VideoSpec을 렌더링하는 Remotion 엔진 (remotion/): 절당 한 장면, 측정된 이징, 모멘텀 컷, 단어 동기화 텍스트, 절차적 텍스처 및 필름 마감 처리
  • 음성 해설, 비트, 영상 분석, 컷아웃, 매트, 렌더링 및 QA를 위한 도구 (tools/)

하나의 비디오 안에서 혼합하여 사용할 수 있는 두 가지 모드:

  • 독립 실행형 모션 그래픽: 푸티지 불필요. 텍스트, 컷아웃, UI 목업, 차트, 카운터, 입자 및 텍스처가 비디오를 구성합니다.
  • 푸티지 편집: 사용자의 클립이 기본이 됩니다. 타이트닝, 펀치 인, 캡션, 키워드 슬램 및 B-롤 카드 추가, 피사체 뒤에 텍스트 배치, 그레이딩, 전환 효과 추가 등이 가능합니다.

모든 종횡비: 사양에서 width/height를 설정하세요(기본값 9:16 1080×1920; 16:9, 1:1, 4:5 등 모두 작동).

먼저 읽어야 할 것

  1. references/playbook.md: 규칙. 매번 읽을 것.
  2. references/engine-spec.md: 모든 사양 필드, 레이어, 전환, 렌더 명령. 사양을 작성하기 전에 반드시 읽을 것.
  3. references/styles/README.md: 스타일 패밀리를 선택한 다음 해당 패밀리의 파일을 읽을 것(해당 예제 사양이 좋은 시작점임).

의사 결정이 필요할 때 심층 분석:

  • script-structure.md: 장르 템플릿, 후크, 절 → 장면 → 소품 규칙, 실제 예제
  • motion-language.md: 이징, 프레임 레이트, 페이싱, 싱크 수치
  • transitions.md: 프레임 수와 각 전환 구성 방법을 포함한 63가지 전환
  • typography-color.md: 텍스트 클래스, 페어링, 크기, 안전 영역, 팔레트, 마감 정도
  • sound-design.md: 배경음, 덕킹, SFX 배치, 비트 싱크, 음악 중심 편집
  • footage-editing.md: 통합 모드, 펀치 인, 몽타주, 캡션, 두 가지 실제 푸티지 사양
  • engine-gaps.md: 엔진이 아직 할 수 없는 것과 해결 방법
  • breakdowns/vNN.md + breakdowns/_TAXONOMY.md: 샷별 증거. 태그로 관련 사례 검색 (grep -l "text-behind-subject" references/breakdowns/*.md).

완전한 실제 예제(스크립트 → 스크래치 VO → 사양)는 remotion/src/specs/examples/zeigarnik.json에 있습니다(스크립트: work/zeigarnik.script.txt).

워크플로우

0. 설정 (환경당 한 번)

cd remotion && npm install
pip install faster-whisper librosa opencv-python-headless "rembg[cpu]" piper-tts pillow numpy

ffmpeg가 필요합니다. librosa가 세그폴트로 충돌하는 경우 NUMBA_CACHE_DIR=/tmp/numba_cache를 설정하세요.

1. 브리핑

다음 정보를 얻거나, 지체하지 않고 합리적인 기본값을 선택하세요.

  • 주제 또는 메시지
  • 플랫폼 및 종횡비
  • 길이(숏츠: 20–45 초)
  • 음성: 사용자의 VO 파일, 음성으로 변환할 스크립트 또는 없음
  • 푸티지 또는 사진
  • 브랜드(팔레트, 폰트, 로고)
  • 톤
  • 버전 수

사용자가 주제만 제공한 경우 스크립트를 직접 작성하세요.

2. 스크립트 → 절 시트

script-structure.md를 사용하세요. 첫 문장에 후크(8–15단어, 처음 3단어 안에 충격) → 설정 → 전환 → 16–40% 지점의 명명된 원칙 → 증명 → 반론 도덕 → CTA(마지막 10–14%, ≥2.5 초). 이를 절로 나눕니다. 하나의 절 = 한 장면 ≈ 6단어 ≈ 2–2.8 초. 각 절마다 다음을 기록합니다.

  • 명사에 대한 문자 그대로의 소품 또는 그림
  • 텍스트가 되는 키워드: 1–3 단어
  • 장치: 배지, 카운터, UI, 차트, 두들, 교체, 입자
  • 이 컷의 방식

3. 음성 및 타이밍

  • 사용자 VO: python3 tools/transcribe.py vo.mp3 remotion/public/<프로젝트>/vo.words.json
  • VO 없음: python3 tools/tts.py script.txt remotion/public/<프로젝트>/vo.wav --speed 1.15 --words remotion/public/<프로젝트>/vo.words.json으로 오프라인 스크래치 음성을 제공합니다. 사용자에게 이것이 임시 음성임을 알리세요. 나중에 실제 VO로 교체할 수 있으며, 단어 참조는 다시 전사될 때 자동으로 다시 시간이 조정됩니다.
  • 음악 주도 또는 VO 없음: python3 tools/beats.py music.mp3 remotion/public/<프로젝트>/beats.json 실행 후, 사양에 "beats"를 설정하고 {beat|downbeat|onset: n} 참조와 snap을 사용하세요.
  • 장면 시작: 각 절의 첫 번째 단어에 {"word": "...", "offset": -0.06}을 설정하세요. 장면 단어 참조는 순서대로 해결되지만, 동일한 단어가 바로 앞에 나타나는 경우 다중 단어 참조("글쓰기 이유")를 사용하세요. 키워드는 sync 또는 at: {word}를 사용합니다.

4. 비주얼

하나의 스타일 패밀리(스타일 README)를 선택하세요. 그런 다음 다음을 확정합니다.

  • 팔레트: 장면마다 순환하는 필드 색상과 고정된 의미를 가진 1–2개의 악센트 색상
  • 타입 페어링: 굵은 디스플레이 목소리와 속삭이는 목소리
  • animFps: 콜라주/에디토리얼은 15, 거친 인쇄물은 12, UI/3D/시네마틱은 0
  • 마감: 그레인 + 비네트, 인쇄물 스타일에는 하프톤 추가
  • 하나의 시그니처 전환(반복) + 1–3가지 지원 유형

5. 에셋

  • 푸티지:
    • python3 tools/analyze_footage.py clips/*.mp4 --out work/footage.json --sheets work/sheets 실행 후 시트를 확인하세요.
    • tools/tighten.py는 데드 에어를 제거합니다.
    • tools/matte.py는 피사체 뒤에 텍스트를 배치하기 위한 피사체 매트를 생성합니다.
  • 사진: python3 tools/cutout.py photos/* --out remotion/public/<프로젝트>/cutouts --trim 실행 후 image로 cutout: true와 함께 사용하세요. 컷아웃보다 낮은 z에 텍스트를 배치하여 뒤에 숨깁니다.
  • 에셋 없음: 텍스트, 절차적 배경, UI 목업, 차트, 카운터, 도형, 입자 및 embed를 사용하세요. 문자 그대로의 객체가 필수적인 경우에만 remotion/src/custom/에 사용자 정의 컴포넌트를 작성하세요.
  • 사용자가 제공하거나 사용 권한이 있는 로고, 초상, 음악 및 SFX만 사용하세요. 기술을 배우되, 크리에이터의 브랜딩, 캐릭터, 엔드 카드 또는 스크립트를 복사하지 마세요.

6. 사양 작성

work/<프로젝트>.spec.json을 {"spec": {...}} 형식으로 작성하세요. 선택한 패밀리의 예제에서 시작합니다. 에셋은 remotion/public/<프로젝트>/ 아래에 둡니다. 작성하는 동안 플레이북 체크리스트를 적용하세요.

7. 미리보기, 렌더링, 검토, 수정

  1. 먼저 스틸 샷:
    cd remotion && npx remotion still src/index.ts MotionVideo /tmp/f.jpg --frame=N --props=../work/<프로젝트>.spec.json --scale=0.4
    
    장면당 하나씩(장면 중간 프레임) 생성하여 타일로 보고 오버플로우, 대비, 복잡성 및 빈 프레임을 확인하고 수정하세요.
  2. 렌더링:
    python3 tools/render.py work/<프로젝트>.spec.json out/<프로젝트>.mp4
    
    절반 해상도 미리보기를 위해 --draft를 추가하세요. ffmpeg에서 그레인 및 하프톤 마감을 적용하여 훨씬 빠릅니다.
  3. 검토:
    python3 tools/review_render.py out/<프로젝트>.mp4 out/review/
    
    콘택트 시트와 컷 스트립을 읽으세요. 컷이 절 시작에 위치하는지, 0.5초 미만 동안 읽을 수 없는 부분이 없는지, 1.5초 이상 데드 스트레치가 없는지, 그리고 아무것도 깨지지 않았는지(빈 레이어, 검은색 간격, 가장자리 노출) 확인하세요.
  4. 수정하고 다시 렌더링하세요. MP4와 함께 짧은 샷 목록과 사용자가 교체해야 할 사항(스크래치 VO, 임시 에셋, 음악)을 전달하세요.

8. 버전 및 시리즈

  • 변형: 스크립트를 유지하고 스타일 패밀리, 팔레트, 타입 페어링, 시그니처 전환, 텍스처 및 후크 장치를 변경하세요. 각각 렌더링합니다.
  • 채널 시리즈: 키트(팔레트, 타입 페어링, 마감, 오버레이 배지, CTA 카드, 2–3개의 시그니처 전환)를 고정하세요. remotion/src/specs/kits/<채널>.json에 저장하고 모든 에피소드를 이 키트로 시작하세요(kits/README.md 참조).

확실하지 않을 때의 기본값

  • 포맷: 1080×1920, 30 fps.
  • 스타일: 설명 영상은 halftone-poster-collage, 비즈니스/기술은 native-ui-explainer, 도구는 dark-product-promo.
  • 모션: animFps 15, settle 1.10(기본값), 장면당 1.2–2.8 초.
  • 타입: 키워드는 크기 18–30의 impact/bebas, serif-italic 또는 script 속삭임 단어, 깊은 악센트의 stitched 배지.
  • 컷: 시그니처는 zoom, 펀치용 일반 cut, 공개용 flash 또는 invert, CTA 진입용 circle.
  • 마감 및 오디오: grain 0.07, vignette 0.35. musicVolume 0.3의 배경음악, duckTo 0.12.

관련 스킬