모션 그래픽이란?
motion-graphics는 Claude Code 및 스킬을 읽을 수 있는 다른 에이전트를 위한, 모션 디자인에 특화된 기술 모음 저장소입니다. 현재 처음 제공되는 스킬인 motion-broll은 소스 비디오와 트랜스크립트로 모션 그래픽 B-roll을 제작합니다.
이 스킬은 영상을 분석하고, 단어가 발화되는 시점을 추정하며, 적합한 그래픽을 제안하고, 내레이션에 맞춰 타이밍이 조정된 클립을 렌더링합니다. 각 클립은 서로 단절된 장면을 전환하는 대신 하나의 형태가 계속 변형되는 방식을 사용합니다. 예를 들어 알약 모양이 카드, 터미널 또는 차트로 변형될 수 있습니다. 커서가 시각적 변화를 이끕니다.
주요 기능
- 트랜스크립트 기반 타이밍: 트랜스크립트의 단어에 맞춰 그래픽을 정렬합니다.
- 영상 분석: 해상도, 프레임 속도, 레이아웃, 화면 속 화면 구간, 화자 박스 크기의 변화를 분석합니다.
- 검토 가능한 계획: 클립 계획을 준비한 뒤 그래픽 제작 전에 사용자의 승인을 기다립니다.
- 두 가지 출력 스타일: 전체 화면 컷어웨이는 MP4 파일로 렌더링하고, 화자 옆의 빈 공간에 배치하도록 설계된 패널은 투명한 ProRes 4444 MOV 파일로 렌더링합니다.
- 연속 애니메이션: 시각적 컷 없이 요소가 상태 간에 변형됩니다.
- 모션 블러: 클립을 소스 비디오의 프레임 속도로 렌더링하며, 더 부드러운 움직임을 위해 서브프레임 샘플링을 사용합니다.
- 검토 지원 파일: 출력물에 미리보기, 비교 페이지, 클립 뷰어 및 타이밍 문서가 포함됩니다.
- 데이터 절제: 수치나 결과를 임의로 만들어내지 않습니다. 실제 값이 제공될 때까지 상대적인 막대 크기와 스켈레톤 텍스트를 사용합니다.
요구 사항
스킬을 설치하기 전에 시스템에 다음 소프트웨어가 설치되어 있는지 확인하세요.
- Node.js 18 이상
- Python 3
- ProRes 인코더가 포함된 ffmpeg
README에 따르면 필요한 ProRes 인코더는 Homebrew의 ffmpeg 빌드에 기본으로 포함되어 있습니다. 또한 스킬을 처음 실행하면 로컬 motion/ 폴더에 Playwright와 Chromium이 설치됩니다.
motion-broll 설치
옵션 1: npx로 설치
저장소의 스킬 설치 프로그램을 실행하세요.
npx skills add Barty-Bart/motion-graphics메시지가 표시되면 motion-broll을 선택하세요. 이 방법은 저장소의 스킬을 Claude Code 또는 스킬을 읽을 수 있는 호환 에이전트에 설치합니다.
옵션 2: 스킬 수동 복사
대신 skills/motion-broll 디렉터리를 프로젝트의 Claude 스킬 폴더로 복사할 수 있습니다.
.claude/skills/여러 프로젝트에서 스킬을 사용할 수 있도록 하려면 사용자 수준의 스킬 폴더에 복사하세요.
~/.claude/skills/입력 파일 준비
주요 입력 파일은 두 가지입니다.
- 비디오: 모션 그래픽을 적용할 소스 영상입니다.
- 트랜스크립트: 편집기, Descript 또는 YouTube에서 내보낸 SRT 파일을 문서화된 워크플로에서 지원합니다.
트랜스크립트는 스킬에 발화 내용을 제공하고, 비디오는 프레임 속도, 크기, 화자 주변의 사용 가능한 공간과 같은 기술적·구성적 정보를 제공합니다.
모션 그래픽 B-roll 생성
1단계: 스킬 시작
호환되는 에이전트에서 다음을 실행하세요.
/motion-broll질문에 답하고 스킬이 비디오와 트랜스크립트를 사용할 수 있도록 경로를 지정하세요.
2단계: 영상 분석
스킬은 비디오의 해상도, 프레임 속도 및 레이아웃을 분석합니다. 또한 화면 속 화면 구간이 있는지, 화자 박스의 크기가 변하는지도 확인합니다. 이 분석을 통해 투명한 패널을 배치할 위치와 전체 화면 그래픽이 더 적합한 시점을 결정할 수 있습니다.
3단계: 추정 타이밍 검토
motion-broll은 트랜스크립트에서 단어별 타이밍을 추정합니다. 이 타이밍을 사용하면 그래픽 전환과 시각적 강조를 특정 단어나 구문에 맞출 수 있습니다.
4단계: 클립 계획 승인
렌더링 전에 스킬이 표 형식으로 계획을 보여줍니다. 각 후보 구간에 대해 다음 세 가지 처리 방식 중 하나를 선택합니다.
- 전체 화면 컷어웨이
- 빈 공간에 배치하는 투명 패널
- 모션 그래픽 없음
계획에는 각 선택의 이유도 설명되어 있습니다. 제안된 배치가 편집 의도에 맞는지 꼼꼼히 검토한 후 승인하세요.
5단계: 클립 제작 및 검증
승인 후 스킬이 각 클립을 제작하고 중요한 단어가 나오는 시점의 스틸 프레임을 확인합니다. 그런 다음 해당 시점에 제대로 맞지 않는 요소를 수정할 수 있습니다.
6단계: 렌더링 및 검토
스킬은 모션 블러를 적용해 비디오의 프레임 속도로 클립을 렌더링합니다. 그런 다음 편집된 비디오의 미리보기와 결과를 확인할 수 있는 브라우저 기반 페이지를 생성합니다.
생성된 파일 이해하기
출력물은 검토와 최종 편집을 모두 지원하도록 구성됩니다.
- 타임라인 이름이 포함된 클립: 파일 이름은
04-master-prompt_0m32s40.mp4처럼 클립이 들어갈 위치를 나타냅니다. - MP4 컷어웨이: 전체 화면 모션 그래픽은 MP4 파일로 제공됩니다.
- 투명 MOV 패널: 오버레이 패널은 투명도가 적용된 ProRes 4444 MOV 파일로 렌더링됩니다.
- 미리보기 렌더: 클립이 삽입된 소스 동영상 버전을 통해 타이밍과 배치를 평가할 수 있습니다.
compare.html: 이 페이지는 원본 버전과 향상된 버전을 동기화합니다. 나란히 보기, 세로로 쌓아 보기, 와이프 비교를 지원합니다.viewer.html: 이 페이지에서는 생성된 클립을 한 번에 하나씩 확인할 수 있습니다.TIMING.md: 이 문서에는 각 클립의 시작 지점, 종료 지점, 포함된 대사 줄이 기록되어 있습니다.
생성된 미리보기는 검토용입니다. 최종 편집본을 만들 때는 개별 클립을 직접 사용하는 동영상 편집기로 가져오세요.
작업 흐름 예시
실제 편집 작업은 다음 단계로 진행할 수 있습니다:
- 소스 동영상과 SRT 대본을 내보냅니다.
/motion-broll을 실행하고 두 파일을 모두 제공합니다.- 제안된 컷어웨이, 투명 패널, 의도적으로 장식을 배제한 구간을 검토합니다.
- 계획을 승인하고 skill이 클립을 렌더링하도록 합니다.
compare.html을 열어 원본 버전과 향상된 버전을 함께 평가합니다.viewer.html을 사용해 개별 애니메이션을 확인합니다.TIMING.md에서 정확한 배치 정보를 확인합니다.- 최종 편집을 위해 MP4와 투명 ProRes 4444 MOV 파일을 편집기로 가져옵니다.
렌더링 시스템 작동 방식
모든 애니메이션 프레임은 시간의 순수 함수로 계산됩니다. 엔진은 폐쇄형 스프링 계단 응답을 사용하며, 목표값이 반복해서 변경되는 속성은 변경마다 하나의 스프링을 더한 합으로 표현됩니다.
이 시스템은 CSS 트랜지션이나 타이머에 의존하지 않으므로 모든 프레임을 독립적으로 렌더링할 수 있습니다. 따라서 결정론적 프레임 캡처와 오프라인 동영상 렌더링에 유용합니다.
각 클립은 skills/motion-broll/engine/motion.js의 공유 엔진을 기반으로 만든 작은 HTML 파일입니다. Headless Chromium은 180도 셔터 범위에서 출력 프레임마다 4개의 하위 프레임을 캡처합니다. 그런 다음 ffmpeg가 이 샘플들을 혼합해 모션 블러를 만듭니다.
고급 팁
렌더링에 시간을 쓰기 전에 계획을 확인하세요
승인 단계는 중요한 편집 검토 지점입니다. 전체 화면 컷어웨이는 영상을 교체하는 것이 적절한 순간에만 사용하고, 투명 패널은 프레임 안의 실제로 비어 있는 영역을 차지하도록 계획되었는지 확인하세요.
편집기에서 올바른 출력을 사용하세요
영상 교체가 필요한 경우 MP4 컷어웨이를 주 영상 트랙에 배치하세요. ProRes 4444 MOV 패널은 소스 동영상 위에 합성해 투명도가 아래 장면을 그대로 보여 주도록 합니다.
실제 데이터와 자리표시자를 분리하세요
정확한 수치가 제공되지 않았다면 허위 값 대신 상대적 막대와 스켈레톤 텍스트가 사용됩니다. 완성된 그래픽에서 구체적인 결과를 전달해야 한다면 검증된 수치를 제공하세요.
타이밍과 애니메이션 세부 사항을 모두 검토하세요
전체적인 속도감은 compare.html에서, 클립 단위의 세부 사항은 viewer.html에서 확인하세요. 배치가 의심스러운 경우 TIMING.md 및 해당 대사 줄과 대조하세요.
포함된 작업 예제를 살펴보세요
skills/motion-broll/examples/opus-aoe2/ 디렉터리에는 저장소의 데모에 사용된 6개의 클립이 들어 있습니다. 완성된 클립의 구조와 의도된 시각적 스타일을 이해하는 데 유용한 참고 자료입니다.
결론
motion-broll은 내레이션을 동기화된 모션 그래픽 B-roll로 전환하는 체계적인 방법을 제공합니다. 영상 분석, 대본 기반 계획, 연속적인 도형 애니메이션, 결정론적 렌더링, 실용적인 검토 도구를 결합합니다. 계획을 승인하고 미리보기를 확인한 후 타임라인 이름이 포함된 클립을 편집기로 가져와 최종 동영상을 만들 수 있습니다.
이 프로젝트는 MIT 라이선스로 배포됩니다. Geist 글꼴은 SIL Open Font License를 따르며, 아이콘 경로는 ISC 라이선스에 따라 Lucide에서 수정해 사용합니다.