dolly: 제품 영상 및 모션 그래픽을 코드로 제작
이 영상은 Remotion 프로젝트입니다: React 컴포넌트를 프레임 단위로 렌더링합니다. 이 파일 옆에 있는 starter/ 폴더에는 두 개의 작동하는 영상이 있습니다: 실제 녹화본으로 만든 Termary 런칭 영상의 41초 버전 Video와 템플릿만으로 만든 25초 모션 그래픽 버전 Promo입니다. 두 영상 모두 8가지 스타일과 4가지 포맷으로 렌더링됩니다. 사용자의 요구에 맞게 변형하되, 작동 원리는 유지하십시오.
계획 → 영상 확보 (직접 녹화하거나 사용자 영상 스캔) → 장면 구성 → 프레임 검토 → 렌더링
동영상을 직접 볼 수 없으므로, 연락처 시트(contact sheet)를 렌더링하고 PNG를 읽어 검토합니다. 모든 변경 후에 이 작업을 수행하세요: 대부분의 잘못된 모션은 시트에서 확인할 수 있습니다.
작업에 필요한 것만 읽으십시오. 경로는 이 스킬 폴더를 기준으로 합니다:
| 상황 | 읽을 파일 |
|---|---|
| Mac에서 제품을 녹화할 때 (피관찰자가 직접 조작): 앱, 웹사이트, iOS 시뮬레이터 | references/record-mac.md |
| 사용자가 직접 녹화해야 할 때: Windows, 실제 휴대폰, 접근 불가능한 기기나 계정 | references/record-elsewhere.md |
| 사용자가 직접 녹화한 영상을 제공할 때 | references/your-footage.md |
| 녹화본으로 만든 장면: 3D 키트 및 카메라 움직임 | references/camera.md |
| 제품 런칭 영상이 아닌 경우: 이벤트, 채용, 체인지로그, 데이터 스토리 등 | references/agendas.md |
| 컴포넌트 선택: 템플릿, 텍스트, 그래픽, 그림, 배경, 전환 효과 | starter/src/library/CATALOG.md |
| 렌더링 오류 발생 또는 새 컴포넌트 작성 시 | references/gotchas.md |
1. 시작하기
<이 스킬 폴더>/new.sh my-video # Node 확인, 스타터 복사, 모든 항목 설치
cd my-video && npx remotion studio # 선택 사항: 사용자가 localhost:3000에서 스크러빙 가능
new.sh는 Node가 없으면 Homebrew로 설치하고, npm install을 실행하며 (사운드 효과도 생성), Remotion이 사용하는 헤드리스 Chrome을 다운로드하고, observee가 설치되어 있는지 알려줍니다. Windows에서는 winget install OpenJS.NodeJS.LTS 후 Git Bash에서 실행하세요. 기존 Remotion 4.0.320+ 프로젝트에는 src/kit.tsx, src/look.tsx, src/parts.tsx, src/sequence.tsx, src/backdrop.tsx 및 src/library/를 복사하세요.
| 파일 | 내용 |
|---|---|
src/brand.ts | 제품 정보: 이름, URL, 로고 (public/), 강조 및 경고 색상, 스타일, 자체 폰트 |
src/look.tsx | 8가지 스타일과 4가지 포맷, 그리고 모든 부분에서 읽는 useLook() |
src/Video.tsx, src/Promo.tsx | 영상: 순서대로 장면과 길이, 사운드 큐 |
src/scenes/ | 테이크 기반 장면. takes.ts는 테이크 내 위치를 정의 |
src/library/ | 컴포넌트 라이브러리 (항목별 폴더). CATALOG.md에 목록과 props가 있음 |
src/sequence.tsx, src/backdrop.tsx | Scenes는 장면을 전환으로 연결. Backdrop은 스타일의 페이지를 그림 |
src/parts.tsx | 쇼트 위에 표시되는 요소: Caption, Tap, Callout, Speed, Pop |
src/kit.tsx | 3D 키트 및 카메라 움직임 (references/camera.md) |
public/takes/ | 녹화본. 사용자 것으로 교체 |
scripts/ | take.sh 녹화, scan.mjs (npm run scan) 녹화본 읽기, sfx.mjs/music.mjs 사운드 제작, voice.mjs 나레이션, library.mjs 카탈로그 재구축, check.mjs (npm run check) 렌더링 측정, web.mjs (npm run web) 업로드용 복사본 생성 |
Remotion은 개인 및 3인 이하 회사에 무료입니다. 더 큰 회사는 회사 라이선스(remotion.pro)가 필요합니다. 해당되는 경우 사용자에게 한 번 알려주세요.
2. 계획하기
먼저 제품 웹사이트를 읽고, 사용자와 다음 사항을 확정하세요. 추론할 수 없는 내용만 질문하십시오:
-
영상이 재생될 환경: 포맷과 길이를 결정합니다. 필요한 모든 포맷으로 렌더링하되, 주요 포맷을 기준으로 디자인하고 나머지는 확인만 합니다.
포맷 컴포지션 크기 대상 길이 가로 Video1920×1080 YouTube, X, LinkedIn, 웹사이트, 발표 런칭 45–90초 세로 Vertical1080×1920 Reels, TikTok, YouTube Shorts, 스토리 15–35초 정사각형 Square1080×1080 X, LinkedIn, Instagram 피드 15–45초 세로형 Portrait1080×1350 Instagram 및 LinkedIn 피드 (4:5) 15–45초 피드는 음소거 상태로 재생됩니다: 단어가 스토리를 전달하며, 처음 2초는 자체적으로 시청자를 사로잡아야 합니다.
-
스타일. 모든 스타일로 한 프레임씩 렌더링하고 (
npm run styles, 다른 프레임이나 포맷은--props='{"frame":420,"format":"vertical"}'추가), 사용자에게 보여준 후brand.style을 설정합니다. 브랜드에 맞는 스타일을 제안하세요: 어두운 개발자 도구 → midnight 또는 terminal, 소비자 앱 → soft 또는 bold, 프리미엄/차분한 제품 → editorial 또는 swiss, 티저 → cinema, 창의적/수공예적 제품 → paper.스타일 모양새 editorial밝은 종이, 세리프 헤드라인과 이탤릭 강조구, 하드 컷. 차분하고 고급스러움: Termary 영상 midnight거의 검은색에 강조색이 빛나고, 좁은 산세리프, 포커스 인되는 단어, 줌 전환 bold페이지가 강조색, 큼직하고 두꺼운 서체, 블록에서 강조구가 도드라짐, 탄력 있는 팝, 슬라이드 swiss오프화이트, 컬럼 그리드의 검은 서체, 강조색은 절제되게, 사각형 카드, 하드 와이프 soft강조색의 파스텔 톤, 둥근 서체, 알약 모양의 강조구, 통통 튀는 팝, 원형 리빌 terminal모든 것이 모노, 커서가 타이핑하는 헤드라인, 스캔라인, 글리치 컷 cinema예고편: 거의 검은색, 크고 조용한 세리프, 필름 그레인, 검은색을 통한 느린 페이드 paper코드로 그리기: 부드러운 라벤더 페이지의 종이 카드, 가벼운 세리프와 굵은 강조구, 카드 뒤집기 -
시청자가 기억해야 할 한 문장, 이를 증명하는 제품의 실제 순간, 그리고 엔드 카드의 요청 (URL, 다운로드, 웨이트리스트).
-
영상의 출처. UI가 있는 제품은 실제 영상이 모크업보다 낫습니다: 직접 녹화하거나, 사용자가 녹화하거나, 사용자가 이미 보유한 영상을 사용합니다 (위 표 참조). 제품에 접근할 수 없거나, 티저나 설명 영상인 경우 라이브러리로 제작합니다.
그런 다음 장면을 순서대로 작성합니다: 고통 (훅, 로고는 안 됨), 제품 (비트에 맞춰 로고), 증명 (실제 순간, 기능, 지표, 전후 비교), 요청 (엔드 카드). 다른 목적의 영상은 중간 부분만 변경하여 형태를 유지합니다 (references/agendas.md). 한 번에 최대 7단어, 1초 + 단어당 0.3초 유지. Video.tsx 상단 주석에 브리프를 작성하세요.
3. 영상 확보
어떤 방식으로든, 영상을 사용 가능하게 만드는 요소는 동일합니다: 홀드(각 작업 전후 4–5초 유지: 쇼트는 여기서 잘라냄), 실제 제품(데모 모드의 가공된 결과물이나 개인 데이터는 절대 안 됨), 그리고 읽어낸 시간. npm run scan은 모든 녹화본을 읽습니다: 홀드, 변경사항, 사운드 및 프레임 시트를 제공하므로, 아무도 설명하지 않은 영상으로 계획을 세울 수 있습니다. 이 시간들이 쇼트가 재생되는 at 값입니다.
4. 장면 구성하기
장면은 프레임을 채우는 컴포넌트입니다. Video.tsx (또는 Promo.tsx)의 SCENES는 장면과 길이를 나열합니다. 스타일의 전환 효과가 장면을 연결하며, 장면 자체의 전환 효과를 지정할 수 있습니다 (transition: 'iris', 해당 장면으로 들어가는 전환). 전체 프레임이 움직이는 전환(슬라이드, 휩, 줌) 아래에는 후셔(whoosh) 사운드가 재생됩니다.
라이브러리 (src/library/)는 모든 기성품을 항목별 폴더에 보관합니다: 템플릿(전체 장면), 텍스트 효과, 그래픽, 그림, 음성 파트, 배경, 전환 효과. 구축 전에 src/library/CATALOG.md를 읽으십시오: 각 항목의 요약, 그대로 사용 가능한 사용법, props. 라이브러리에서 가져옵니다 (import {Stat, Statement} from './library'). 모든 항목은 useLook()을 통해 스타일을 읽고, start (장면 시작부터 시작 프레임) 및 가능한 경우 exit을 받습니다. npm run gallery는 각 항목의 샘플을 코드와 함께 렌더링합니다 (--props='{"only":"graphics","style":"bold","format":"vertical"}'로 범위 축소).
템플릿은 전체 장면이므로 SCENES에 직접 추가합니다:
{name: 'Features', seconds: 4.5, component: () => (
<Features title="Everything in" accent="one window." items={[{icon: Columns3, title: 'Split panes', text: '…'}]} />
)},
녹화본 기반 장면은 창, 패널 또는 휴대폰을 3D 공간에 띄우고 Caption 아래에 배치하며, 카메라가 그 위를 움직입니다: references/camera.md 참조.
라이브러리 활용 팁.
Metric,Stat,Quote는 실제 숫자와 실제 인용문만 사용하며, 허가를 받아야 합니다.- 그림은 브랜드 색상 쪽으로 색조가 변합니다: 수공예적이고 인간적인 느낌을 위해, 그리고
paper스타일에서 사용합니다. - 음성:
npm run voice -- script.txt name은 Mac 또는 Windows 내장 음성으로 스크립트를 읽어public/voice/name/및src/voice/name.ts에 저장합니다 (또는 녹음된 WAV 사용).Voiceover는 이를 재생하고,voiceTiming/voiceEnd는 장면 시간을 조정하며,Captions와Waveform은 이를 따릅니다. 피드는 음소거 상태이므로, 나레이션 영상에도 자막이 필요합니다. 내장 음성은 초안용입니다. 게시용 영상은 실제 사람이 녹음하거나 사용자가 권한을 보유한 음성을 사용하세요. - 카탈로그에서 WebGL 셰이더라고 설명하는 전환은 강조용으로만 사용하세요: 최종 렌더링의 모든 프레임을 해당 전환 주변에서 확인하십시오.
- 영상에서 창작한 것은 공유하십시오. 다른 영상에서 사용할 수 있는 레이아웃, 칩 또는 동작은 프로젝트 라이브러리에 항목(컴포넌트 폴더,
<name>.demo.tsx샘플,item.json)으로 추가하고 (npm run library), 사용자에게 dolly 자체 라이브러리에 추가할 것을 제안하세요.
하나의 프로젝트에 여러 브랜드 (클라이언트 변형 또는 제품별 영상): <LookProvider style="soft" brand={{name, url, logo, accent}}>로 내부 모든 요소에 설정하고, useBrand()로 브랜드를 읽습니다.
모든 포맷. 장면은 useLook()에서 프레임을 읽습니다: look.safe (플랫폼이 자체 버튼으로 덮는 영역: 텍스트는 내부에 유지), look.band (상단 캡션 밴드), look.aim (focusOn에 전달), look.size (헤드라인 크기), look.tall, byShape(look, {wide, tall, square})로 레이아웃 선택.
5. 감각
어떤 스타일에서든 고급스러워 보이게 만드는 요소:
- 제품 자체의 모양새. 강조색, 폰트 (
brand.fonts), 로고, 어울리는 스타일. - 모든 쇼트에 헤드라인, 상단 밴드에, 강조구는 스타일 방식으로 설정.
- 실제 요소, 가까이서 자르기. 전체 창, 단일 패널(떠 있는 카드), Mac 옆의 휴대폰. 장면은 종종 두세 개의 컷으로 구성되며, 컷에 따라 캡션이 변경됩니다. 푸시인이 들어가는 부분을 꽉 채워 자르세요.
- 입력 표시. 탭하는 곳에
Tap, 중요한 부분에Callout또는Spotlight, 템플릿 위에Cursor, 속도가 빨라진 영상에Speed칩. - 모든 전환에 사운드, 그 외에는 거의 없음. 스토리가 전환되는 매 순간, 읽을 수 있는 프레임에
public/sfx/ting.wav(바 라인 다음이 아님); 탭에click.wav; 전체 프레임이 움직이는 경우에만whoosh.wav(슬라이드, 휩, 줌, 플립 등 이동하는 전환 아래에서 재생, 최소 8초 간격), 영상당 약 2회. 효과는 10초당 약 5개로 제한하고, 다른 컷은 음악이 전달하도록 하세요: 사용자가 라이선스한 트랙 또는npm run music -- <초>. - 생성 디자인의 징후를 피하세요: 그라데이션 텍스트, 보라색-파란색 그라데이션, 어두운 배경에 시안, 모든 카드 동일, 모든 단어에 효과, 하나의 영상에 다섯 가지 전환. 아이디어당 한 가지 효과, 영상당 한 가지 전환 스타일 (강조용 하나 추가), 스타일 기본값 우선 사용.
모션의 규칙. 모든 쇼트를 규칙에 따라 확인하세요.
- 카메라를 움직이고, 오브젝트는 움직이지 마세요. 쇼트당 하나의 카메라 경로; 깊이가 시차를 제공합니다.
- 쇼트당 하나의 움직임, 이유가 있어야 함: 리빌, 팔로우, 또는 중요한 쪽으로 푸시.
- 읽기 쉽게 평면으로. 읽을 텍스트가 있는 동안은 카메라를 정면으로 향하고 천천히 움직입니다.
- 모든 것을 이징 처리하세요. 도착은
ease.out, 떠남은ease.in(더 빠르게), 홀드 사이는ease.inOut. 스타일이 탄력적이거나 로고인 경우에만 바운스. - 절대 멈추지 마세요. 모든 쇼트에 느린 드리프트를 주세요 (
useShot의 두 번째 인자). - 읽을 수 있을 만큼 충분히 유지한 후 컷하세요. 확실하지 않으면 더 오래 유지하고 다음 장면을 줄이세요.
- 비트에 맞춰 컷하고 (120 BPM에서 0.5초), 컷을 가로질러 모션 방향을 유지하세요: 장면은 다음 장면이 도착하는 방향으로 떠납니다.
- 절제. 제품이 주인공입니다: 10초당 최대 한 번의 과시적인 움직임 또는 효과.
톱 런칭 영상이 달성하는 수치 (프레임별 측정 기준): 그림은 0.1초 이내에 움직이고 첫 단어는 0.4초 이내에 읽힙니다. 제품은 진행 시간의 1/4 지점까지 화면에 등장합니다. 긴 쇼트 내에서도 약 0.7초마다 무언가 변경됩니다. 읽히는 텍스트는 프레임당 약 3픽셀 미만으로 움직입니다. 핵심 주장에 1–1.6초의 디자인된 홀드 한 번, 다른 정지 상태는 0.8초 미만. 가장 큰 순간은 전체 러닝 타임의 약 80% 지점, 그 후 약 2초의 차분한 엔드 카드.
references/gotchas.md에는 함정이 있습니다: 3D를 평평하게 만드는 것, 프레임별 렌더링을 깨뜨리는 것, 번들 ffmpeg의 한계.
6. 검토
npx remotion still Sheet out/sheet.png # 영상, 1프레임/초
npx remotion still Sheet out/focus.png --props='{"scene":"NeedsYou","every":6}' # 한 장면, 5프레임/초
npx remotion still Sheet out/v.png --props='{"format":"vertical","guides":true}' # 다른 포맷, 안전 영역 표시
npx remotion still Vertical out/f140.png --frame=140 # 한 프레임, 전체 크기
npm run styles && npm run formats # 모든 스타일/포맷의 한 프레임
모든 PNG를 읽으십시오. 다음 사항을 확인하세요:
- 처음 2초가 소리와 맥락 없이도 이해되는지;
- 읽을 수 있는 모든 것이 카메라 정면을 향하고 유지되는지 (여러 거의 동일한 셀이 연속으로 있는지);
- 텍스트가 모든 포맷에서 점선 안전 영역 안에 있고, 주제가 점선 사이에 있는지;
- 중요한 것이 프레임 가장자리, 더 가까운 레이어 뒤, 또는 캡션 아래에 잘리지 않는지;
- 빈 프레임이나 미러링된 프레임이 없는지 (카메라가 내부 또는 뒤에 있음);
- 인접 셀...
... (번역을 위해 잘림)