motion-design: 워크샵 (Remotion, 테마, 사운드, 음악)
모든 것은 로컬에서 결정론적으로 동작합니다. 동일한 코드 = 동일한 MP4. AI로 생성된 이미지나 비디오는 없습니다.
스택
| 구성 요소 | 도구 | 위치 |
|---|---|---|
| 애니메이션 | Remotion 4.0.529 (React / TSX), 버전은 package.json에 고정됨 | src/; npx remotion add <package>로 추가 모듈 설치 |
| 테마 | 색상, 폰트, 크기, 여백 | src/illustration/theme.ts (src/illustration/scenes/kit.tsx의 C 및 F 상수에서 읽음), 폰트는 public/fonts/ |
| Remotion 모듈 | 전환, 효과, gsap, three, 노이즈, 패스, 도형, 모션 블러, 라이트 릭, 스타버스트, 러프 표기, 캡션, 레이아웃 유틸리티, lottie | package.json |
| 그래픽 컴포지션 | BrandedVideo(전체 화면 장면), LowerThirdTrack(하단 1/3, 섹션 제목), Screencast(사이트 데모), Scene(장면 카탈로그), ControleTexte(텍스트 확인), FondAnime(루핑 애니메이션 배경, 그레인은 scripts/make-grain.py로 생성) | src/illustration/, Compositions.tsx에서 선언, src/Root.tsx에서 연결 |
| 공유 큐 | 초 단위의 주요 시간, 애니메이션과 사운드 모두에서 읽음 | src/<project>/cues.json |
| 음악 | numpy 신디사이저(scripts/synth.py: FM 일렉트릭 피아노, 패드, 베이스, 퍼커션, 비닐 크래클, 리버브)로 작성된 Python 스코어 | music/<project>.py, 모델: music/example_pad.py |
| 음향 효과 | 합성된 팔레트: 사운드 작업 전에 reference/sound-palette.md를 읽으세요. 신디사이저 레시피 scripts/make-sfx.py -> public/sfx/*.wav + palette.json; 제스처 어휘 scripts/son.py (계획은 제스처 이름을 지정하며, 파일을 직접 지정하지 않음; 리스트는 기본적으로 항목당 하나의 배치 카드, son.LISTES; son.releve: 비디오 사운드의 번호 목록, 번호로 검토); scripts/palette-import.py (실제 녹음 팔레트, 동일한 파일 이름, 기본값으로 대체); scripts/sfx.py (몇 가지 추가 사운드: 셔터, 포커스 틱, 우슉) | scripts/ |
| 믹스 | 음악 + 음향 효과 + 음성, 음성 아래에 음악 덕킹, EBU R128 목표 음량, -1.5 dBTP 트루 피크 리미터(오버샘플링 리미터, 초과 시에만 적용) | scripts/mix.py |
| 확인 | 옥타브별 톤 밸런스, 음량 | scripts/ltas.py, mix.py |
라이선스. Remotion은 개인 및 직원 3인 이하의 회사에 무료입니다. 그 이상의 대규모 회사는 회사 라이선스가 필요합니다(remotion.pro). 키트를 더 큰 회사에서 상업적으로 사용하기 전에 LICENSE.md를 읽으세요. Inter 및 Source Serif 4 폰트는 OFL 라이선스(public/fonts/OFL-*.txt)입니다. 사운드와 예제 음악은 여기서 합성되었으며, 제3자 권리가 없습니다. 다른 곳에서 찾은 음악: 라이선스를 확인하세요(수익화 채널에서는 CC-BY-NC 사용 불가).
설정 및 node_modules 라인의 역할
플러그인은 다음 명령으로 한 번 설치됩니다:
bash "${CLAUDE_PLUGIN_ROOT}/install.sh" --data "${CLAUDE_PLUGIN_DATA}"
(Claude Code가 이 파일을 읽을 때 두 변수를 실제 경로로 대체합니다.) 데이터 폴더를 사용하는 이유: 플러그인 폴더는 플러그인이 업데이트될 때마다 교체되며, node_modules는 약 1GB입니다. 따라서 npm ci는 플러그인의 데이터 폴더(${CLAUDE_PLUGIN_DATA})에서 한 번 실행되며, 이 폴더는 업데이트 후에도 유지되고 skills/motion-design/node_modules는 이 폴더에 대한 심볼릭 링크입니다. 플러그인 업데이트 후 node_modules가 없으면(새 플러그인 폴더에 링크가 없음), 위 명령을 다시 실행하세요. 누락된 작업만 수행하고 즉시 다시 링크를 생성합니다.
수동 설치(네 개의 skills/ 폴더를 ~/.claude/skills/에 복사): 키트 루트에서 bash install.sh 실행; node_modules는 npm ci로 설치된 일반 폴더가 됩니다. Python 측: python3 -m pip install numpy scipy soundfile pillow, 그리고 brew install ffmpeg. 전체 체인에 대한 세부 사항 및 확인: 키트의 INSTALL.md.
이 스킬의 모든 명령은 워크샵 폴더(skills/motion-design)에서 실행하세요.
전체 모션 디자인 비디오 파이프라인
- 구성: 지속 시간, 형식(기본값 1920x1080, 30fps; 세로 릴은 1080x1920; 정사각형은 1080x1080), 용도, 플랫폼 제약 조건을 결정합니다.
src/<project>/cues.json작성: 주요 시간이 그림과 사운드를 모두 제어합니다. - 애니메이션:
src/<project>/에 각 결과물당 하나의 컴포지션을 만들고,src/Root.tsx에 선언하며, props는 zod로 타입을 지정합니다. 모든 것은useCurrentFrame()에서 파생됩니다. 자유로운 CSS 애니메이션 사용 금지,Math.random()사용 금지(random(seed)또는noise2D사용). 테마 색상과 폰트만 사용합니다. - 렌더링 없이 그림 확인:
npx remotion still src/index.ts <Id> out.png --frame=N으로 주요 프레임을 확인하고, MP4의 연락처 시트(ffmpegtile)를 생성합니다. 휴대폰 크기로 판단: 390px 너비로 축소된 이미지도 읽을 수 있어야 합니다. - 내레이션(필요한 경우): 사용자가 녹음(48kHz WAV),
--voice-at으로 배치합니다. 키트는 음성을 복제하지 않습니다. - 음악 및 음향 효과:
python3 music/<project>.py <duration> music.wav; 사운드는son.py를 통해 그림과 동일한 시점에 배치(계획에서son.releve(...)를 호출하여 청취할 번호 목록 작성);python3 scripts/ltas.py music.wav로 확인(완만한 경사에 대해 약 6dB 이상의 구멍 없음). - 믹스:
python3 scripts/mix.py --music ... --sfx ... [--voice ... --voice-at s] --lufs -16 --out public/audio/<project>_mix.wav(릴은 -14, YouTube는 -16;--sfx-voix-ref -22는 실제 음성에 맞게 음향 효과 크기 조정). - 렌더링:
npx remotion render src/index.ts <Id> out.mp4 --props='{"audio":"audio/<project>_mix.wav"}' --codec=h264 --crf=16 --audio-bitrate=320k. - 배포: 기존 결과물을 덮어쓰지 않음(접미사
-v2), 미리보기 포함.
Premiere에 배치할 렌더링(그래픽)
- 장면, 전체 화면 그래픽 또는 하단 1/3에 로고가 없음: 불필요하게 이미지를 로드합니다.
- 29.97fps 시퀀스를 위한 파일은 클립 전체를 덮어야 합니다: n개의 시퀀스 프레임은 n x 1.001 / 30초 동안 지속됩니다.
src/illustration/의 컴포지션은tailFrames를 허용합니다.TenirFin컴포넌트(src/illustration/tenir-fin.tsx)는 지속 시간 동안 애니메이션을 재생한 후 마지막 프레임을 유지합니다. 종료 애니메이션은 움직이지 않습니다.overlays스킬의scripts/render-segments.py가tailFrames를 계산합니다. - 그래픽 컴포지션은
overlays스킬의scripts/render-segments.py,scripts/screencast-render.py및scripts/montage-tella.py에 의해 렌더링됩니다(작업 폴더 = 이 워크샵, PNG 프레임, 4코어).remotion still확인 외에는 수동으로 렌더링하지 마십시오.staticFile을 통해 호출되는 미디어는public/scenes/<video>/에 저장됩니다.
나만의 것으로 만들기(테마 변경)
키트는 중립적인 테마를 기본으로 제공합니다: 파란색 강조 #2F5BEA, Inter 및 Source Serif 4, 하나의 테마 파일 src/illustration/theme.ts. 자신의 브랜드를 사용하려면:
- 색상:
src/illustration/theme.ts(color: base, contrast, inkSoft, muted, surface, line, accent, accentDark, accentWash, darkBg, paperWarm); 장면은C를 통해 읽습니다. 강조색과 밝은 색조는 일부 위치에 여전히 하드코딩되어 있습니다:grep -rn "#6B8CFF\|rgba(47,91,234\|rgba(214,224,252" src/(preuves.tsx,Screencast.tsx,compositions/FondAnime.tsx의PALETTES변형에서 하이라이트), 새 강조색과 일치하도록 변경합니다. 하나의 강조색, 신호로 사용되며 채움색으로 사용되지 않습니다. - 폰트:
.woff2파일을public/fonts/에 넣은 다음, 로딩 목록(src/illustration/scenes/kit.tsx,compositions/BrandedVideo.tsx,compositions/LowerThirdTrack.tsx,compositions/Screencast.tsx)과theme.ts(font.display,font.sans)에서 파일 이름과 패밀리 이름을 변경합니다. 폰트에 숫자와 악센트가 있는지 확인하세요("latin-ext" 서브셋만으로는 숫자나 기본 글자가 없으며 모든 것이 Georgia로 폴백됩니다). 숫자가 없는 패밀리 이름(CSS에서 따옴표로 묶음). - 애니메이션 곡선:
scenes/kit.tsx의easeStd와scripts/make-sfx.py의EASING이 함께 동작합니다(사운드가 그림의 곡선을 따릅니다). - 확인:
npx tsc --noEmit, 각 컴포지션(인용문, 하단 1/3, 섹션 카드, 숫자...)에 대해remotion still실행, 그 다음 다음render-segments.py실행 시--force사용(캐시는 이미src/illustration/의 코드를 따릅니다).
장면 또는 사운드 추가
- 장면:
src/illustration/scenes/opaque.tsx(전체 화면) 또는alpha.tsx(오버레이)의 컴포넌트,data계약을 주석으로 위에 작성,scenes/Scene.tsx레지스트리에 한 줄 추가,overlaysSKILL.md의 카탈로그에 한 줄 추가. 모든 순간은cues에서 가져옵니다. 확인: 여러 프레임에서remotion still, 클립의 프레임에 합성된 오버레이. - 사운드:
reference/sound-palette.md, "사운드 추가 또는 조정".
동기화된 폴더 주의사항
워크샵이 동기화된 폴더(Dropbox, iCloud, Drive 등)에 있는 경우, 다른 기기가 파일의 이전 버전을 보내고 좋은 파일을 "conflicted copy"로 이름을 바꿀 수 있습니다. 증상: Could not find composition with ID .... 대응: find . -name '*conflicted copy*' -not -path './node_modules/*', 비교, 최신 버전 유지. webpack 캐시(node_modules/.cache)도 충돌할 수 있습니다: 삭제하면 Remotion이 다시 빌드합니다. 더 나은 방법: node_modules를 동기화 대상에서 제외하세요.