motion은(는) 무엇을 하나요?
코드로 작성된 모션 그래픽: 모든 색상, 시간, 여백은 브랜드 파일에서 가져오며, 사용자가 2~3개의 스틸 컷을 먼저 확인하기 전에는 어떤 것도 렌더링되지 않습니다. 아래 규칙은 실제 수정 사항에서 비롯되었으며, 각 규칙은 그 존재 이유를 설명합니다.
용도
| 조각 | 설명 |
|---|---|
| 애니메이션 브롤 | 음성 구간을 전체 화면의 장면 또는 그래픽으로 덮음 |
| 알파 | 비디오 위 또는 사람 뒤에 올라가는 투명 그래픽 |
| 팝업 | 등장하여 1초 이상 읽힌 후 사라지는 데이터 |
| 자막 | 상자 없이, 강조 표시된 단어 하나 또는 키워드만 있는 운동 자막 |
| 채팅 시뮬레이션 | 메신저 앱의 대화를 신뢰할 수 있고 읽기 쉽게 표현 |
| 화면 | 4:3 카드 형태의 웹사이트 또는 데스크톱 앱 (제목 포함) |
| 커버 | 릴의 0번째 프레임 |
레이아웃을 시작하기 전에 다음 두 가지 중 어떤 방식인지 결정하세요:
- 데이터 또는 제품 내부를 보여줌 (패널, 메트릭, 받은 편지함): 평평하고 조밀한 인터페이스, 모든 항목이 동시에 읽힘, 카드 내부에 실제 사진 및 비디오, 카메라는 거의 정지 상태 (스케일 1.00 → 1.02). 상태는 제자리에서 변경: 행은 이미 존재하고 레이블만 변경됨. 프레임은 빽빽하게 채움.
- 장면을 이야기함: 영상이 주도. 큰 샷, 실제로 움직이는 카메라, 적은 장식, 단 하나의 문장.
다이어그램은 조각이 아닙니다: 아이디어를 화살표 지도로 그릴 수 있다면, 제품이 그 자체로 그렇게 동작하도록 보여주세요.
준비
- Remotion 프로젝트 (
npx create-video@latest), Node 및 ffmpeg. src/marca/에 브랜드 코드:tokens.ts(색상, 유형, 반경, 여백),movimiento.ts(시간 및 곡선) 및 모든 것을 스케일링하여 제공하는useMarca(). 구성 방법 및 예시: referencias/tokens.md.- 조각당 하나의 진입점 (
src/piezas/<pieza>.tsx,registerRoot및Composition포함): 번들이 작게 유지되며 하나의 조각이 다른 조각을 깨뜨리지 않습니다. - 시퀀스에서 달리 명시하지 않는 한 캔버스 1080×1920, 30fps: 시작하기 전에 시퀀스의 크기와 fps를 읽으십시오.
작업 흐름
- 브리핑. 시퀀스 내 정확한 구간 (진입 → 종료), 해당 구간에서 음성이 말하는 내용, 허용된 데이터 및 출처, 사용 가능한 자료 및 원하지 않는 것. 빠진 것이 있으면 질문하세요.
- 음성. 타임라인에 있는 그대로 음성을 단어별로 전사하고, 원시 파일이 아닙니다 (referencias/subtitulos.md 참조). 실제 촬영의 음성은 종종 대본과 다릅니다.
- 지속 시간. 구간의 지속 시간, 주석에 타임코드가 있는 상수에 1프레임의 여유를 더합니다:
export const DURACION = 157; // 00:00:51:22 → 00:00:56:29. - 디자인. 보이는 것은 음성이 말하는 내용을 문장 단위로 보여줍니다. 애니메이션과 사운드가 공유되는 순간 (각 메시지 진입, 각 비트)은 컴포지션과 이펙트 스크립트가 읽는 상수에 저장됩니다.
- 스케치.
remotion still을 사용한 2~3개의 키 프레임, 안전 영역 가이드가 그려짐. 보여주고 승인을 기다리십시오. - 배경 또는 알파로 렌더링 (아래 참조).
- 사운드. 모든 애니메이션은 사운드 효과와 함께 제공됨: 순간을
sonido스킬에 전달. - 검수 및 전달 (이 페이지 하단 참조).
지켜야 할 규칙
- 컴포지션 내에 수동으로 입력된 색상이나 측정값 없음: 모든 것은 토큰에서 가져옴. 이유: 색조를 변경하는 것은 하나의 파일을 수정하는 것과 같으며, 아무도 각 조각에서 새로운 회색을 발명하지 않습니다.
- 프레임당 하나의 강조 요소만, 브랜드의 악센트 색상 사용: 제목의 단어 또는 버튼, 둘 다는 안 됨. 이유: 두 가지가 동시에 강조되면 아무것도 읽히지 않습니다. (시뮬레이션된 인터페이스의 고유 색상은 해당되지 않습니다.)
- 튕기는 애니메이션 없음. 진입 및 종료는 토큰의 시간과 곡선을 따름;
spring()사용 금지. 이유:spring()은 목표를 넘었다가 돌아오며, 이는 장난감처럼 보입니다. - 시간은 초 단위, 절대 프레임 단위로 사용하지 않음. 이유: 프레임 단위 지연을 사용하면 30fps에서 60fps로 변경 시 속도가 두 배가 됩니다.
- 안전 영역, 여유 공간 포함 (숫자 표). 읽을 내용은 측면에서 ~100px, 천장에서 ~290px 떨어짐: 54와 224는 넘지 말아야 할 선이며, 디자인의 기준점이 아닙니다. 이유: 앱 인터페이스가 가장자리를 가리며, 경계에 붙으면 '모든 것이 너무 극단적으로 보입니다'.
- 컴포지션의 중심은 x 540. 앱 버튼을 피하기 위해 디자인을 이동하지 않음: 해당 높이에 떨어지는 것은 대칭으로 좁아집니다. 이유: 이동된 컴포지션은 위에 있는 아이콘보다 더 눈에 띕니다.
- 각 객체는 프레임 내에 완전히 포함되어야 함. 가장자리에서 잘리지 않음; 장면의 주인공이 아닌 것은 페이드 아웃되어 치움. 이유: 잘린 전화기나 카드는 오류로 읽힙니다.
- 브롤에서는 무언가 일어나야 함: 카메라가 움직이고, 주제가 아닌 음성의 문장인 구체적인 동작이 발생함. 이유: '아무 일도 일어나지 않는다'는 가장 흔한 거절 사유입니다. 예외는 실제 클라이언트 제품: 재생만 하고, 재창조하거나 움직임을 발명하지 않습니다.
- 최대 4초마다 새로운 요소 등장, 동일한 움직임이 연속으로 두 번 나오지 않음. 이유: 두 번의 연속 확대는 컷을 지웁니다.
- 끝에 정지 상태 없음: 마지막 구간에서 매우 느린 푸시. 이유: 정지된 프레임은 렌더링 오류로 읽힙니다.
- 올라가는 숫자는 그래프; 나타나는 숫자는 레이블. 알파에서 각 숫자는 고유한 애니메이션 객체 (카운터, 측정기, 막대, 작용하는 아이콘)와 함께 제공되며 텍스트는 함께 제공됨. 이유: 비디오 위의 일반 텍스트는 자막으로 읽힙니다.
- 원샷, 깊이 및 디테일. 개별 진입 대신 장면을 가로지르는 카메라, 다른 깊이의 객체, 각 요소의 이름, 시간 및 상태. 이유: 흰 공간이 많은 다이어그램이었던 조각은 '너무 단순하다'는 이유로 거부되었습니다.
- 상자 없는 자막, 문장당 하나의 단어 강조; 브롤 위나 그래픽이 이미 같은 내용을 말하는 곳에는 절대 배치하지 않음 (referencias/subtitulos.md 참조).
- 읽기 쉬운 시뮬레이션된 채팅: 전화기가 중앙에, 앱 전체가 균등하게 확대됨, 한 번에 하나의 메시지와 읽을 시간; 강조하기 위해 나머지는 흐리게 처리하고, 어두운 베일을 사용하지 않음 (referencias/alfas-y-chats.md 참조).
- 실제 화면이 있는 경우 그것이 우선: 텍스트나 헤더 위에 아무것도 배치하지 않음; 팝업은 빈 영역에 배치.
- 검은 테두리나 딱딱한 가장자리 없음: 카메라가 영상 위를 움직이는 경우 최소 스케일 1.04 (측면 이동 시 1.18); 부드러운 단계의 그라데이션과 둥근 모서리. 이유: 검은색을 보여주는 줌 아웃이나 계단식 그라데이션은 액자처럼 읽힙니다.
- 데이터를 발명하거나 조각을 반복하지 않음. 숫자, 이름 및 캡처는 사용자로부터 제공됨; 시뮬레이션은 실제 고객 데이터를 표시하지 않음. 각 조각은 고유한 그래픽을 가져옴: 다른 조각의 그래픽을 반복하면 눈에 띕니다.
- 애니메이션은 음성에 맞춰 조정됨, 절대 반대로 하지 않음: 그래픽을 맞추기 위해 음성에 일시 중지를 삽입하지 않음.
- 수정 사항은 전체를 렌더링하지 않음: 변경된 구간만, 이어붙이고 새 이름으로 (referencias/3d-y-trampas.md 참조). 이유: 이미 배치된 버전을 덮어쓰지 않으며, 3초 수정에 한 시간의 렌더링을 낭비하지 않습니다.
수치
| 항목 | 값 (1080×1920 캔버스 기준) |
|---|---|
| 측면 여백 | 각 측면 54px (읽는 내용은 ~100px) |
| 천장 여백 | y 224 위에는 읽을 내용 없음 (읽는 내용은 ~290px부터) |
| 읽기 영역 | y 420 ~ y 1495 |
| 버튼 열 | x 897부터, y 1228 아래로; 이 높이에서 읽는 내용은 x 183~897 내에 위치 |
| 크고 넓은 숫자 | y 1228 위에 완전히 포함 |
| 세부 샷의 전화기 | 최대 프레임 너비의 0.8 |
| 광각 샷의 집합체 | 최대 1080 − 2 × 54 너비 |
| 팝업 | 1초 이상 화면에 표시되고 사라짐 (계속 남으면 8초 후에 6개가 되어 아무것도 읽히지 않음) |
| 리듬 | 4초 이내마다 새로운 요소 |
| 영상 위 카메라 최소 스케일 | 1.04 (측면 이동 시 1.18) |
| 데이터 조각의 채움 | 유용한 상자의 약 75%, 50% 미만은 스케치로 읽힘 |
| 장면 조각의 채움 | 40–60% |
| 커버 크롭 | 4:5 피드: y 285–1635 · 3:4 프로필: y 240–1680 |
채움은 배경이 아닌 것으로 채워진 유용한 상자의 비율입니다. 스틸 컷에서 측정하며 눈대중으로 하지 않습니다.
렌더링
# 스케치: 단일 프레임
npx remotion still src/piezas/mi-pieza.tsx MiPieza out/boceto_f45.png --frame=45
# 배경 있음 (불투명: 아래 레이어를 가림)
npx remotion render src/piezas/mi-pieza.tsx MiPieza out/mi-pieza_FONDO.mov \
--codec=prores --prores-profile=4444 --pixel-format=yuv444p10le
# 알파 있음 (투명: 아래 비디오가 보임)
npx remotion render src/piezas/mi-pieza.tsx MiPieza-Alfa out/mi-pieza_ALFA.mov \
--codec=prores --prores-profile=4444 --pixel-format=yuva444p10le --image-format=png
# 모든 3D 조각 (CSS 또는 three.js), 스틸 및 렌더에서: --gl=angle
- 배경과 알파는 동일한 컴포지션에
transparenteprop이 있으며, 알파 버전은 캔버스를 칠하지 않고 ID가-Alfa로 끝납니다. --prores-profile=4444만으로는 알파가 생성되지 않습니다. 확인:ffprobe -v error -select_streams v:0 -show_entries stream=pix_fmt -of csv=p=0 out/mi-pieza_ALFA.mov가yuva로 시작해야 합니다.- 알파에서는 캔버스가 없습니다. 각 텍스트는 고유한 표면이 필요하며, 그렇지 않으면 어두운 영상 위에서 사라집니다.
- 디스크 공간이 부족한 경우: 알파가 있는 ProRes 4444는 1080에서 분당 약 1.35GB를 차지합니다. MOV 내에서 PNG로 변환 (
ffmpeg -i x.mov -c:v png -pix_fmt rgba y.mov)하면 무손실이며 알파가 유지되고 약 7.5배 가벼워집니다. - 텍스트가 흐릿하게 나오는 원근감 있는 인터페이스:
--scale=2로 렌더링하고 lanczos로 1080으로 다운스케일. - 여러 스틸 컷의 경우, 단일 번들을 만들고 완료 후 삭제하는 스크립트 사용 (referencias/3d-y-trampas.md 참조).
0번째 프레임의 커버
- 커버는 내보낸 릴의 첫 번째 프레임입니다:
<Sequence durationInFrames={1}>에 커버를, 전체 릴은<Sequence from={1}>에 배치. 플랫폼은 비디오 프레임 중에서 커버를 선택하므로 별도 파일이 필요하지 않습니다. 선택기가 0번째 프레임을 선택하지 못하면 두 프레임을 제공하세요. - 캐릭터를 중앙에: x축 540, 중심은 y 900–960 근처, 4:5와 3:4 내에 완전히 포함되며 제목도 함께 포함. 이유: 프로필 그리드와 피드가 커버를 자르며, 썸네일에서 클릭이 결정됩니다.
- 모서리에 큰 장식 없음. 전달하기 전에 크롭 시뮬레이션 버전(4:5 외부 베일, 3:4 라인 및 중앙 축)을 추출하여 확인하세요.
- JPG에서 ffmpeg로 커버를 붙이는 경우 색상 범위에 주의 (referencias/3d-y-trampas.md 참조).
'리퀴드 글래스' 스타일 (선택 사항)
밝은 배경 위의 iOS 스타일 유리 효과 (카드 및 버튼용). 굴절시킬 대상, 장면 전체에 하나의 광원, 그리고 그 안에 살아있는 요소가 있을 때만 작동합니다. 그렇지 않으면 '팸플릿처럼 보입니다'. 규칙 및 수치는 referencias/cristal.md를 참조하세요. 이 문서는 영상에서 번아웃된 텍스트를 덮는 방법도 설명합니다. 어떤 스타일도 영원하지 않습니다: 각 조각은 이전 조각에 없던 새로운 무언가를 가져옵니다.
가장 비용이 많이 드는 함정
- 동영상 정지: 0번째 프레임 이후에 들어오는
<OffthreadVideo>는 `<Sequence from={entrada} layout=