모션으로 영화 만들기
**모션(motion)**은 나레이션 및 설명형 비디오를 위한 '룩(look)'을 문서화한 것입니다. 즉, 영상이 어떻게 보이는지(배경, 색상, 타이포그래피)와 어떻게 움직이는지(등장, 변화, 퇴장 방식)를 정의합니다. 스토리, 대본, 장면 또는 타이밍은 포함하지 않습니다. 여러분이 스토리를 가져오면, 모션이 영상의 외형과 움직임을 결정합니다. 형식은 SPEC.md (motion/0.5)입니다. 모션은 고유 ID, 제작자의 GitHub 이름 및 슬러그(slug)로 식별됩니다: @iamsuosi/lab-notebook. motionhub에서 모든 ID에는 두 가지가 모두 있습니다.
모션은 디렉터리입니다:
| 파일 | 가져올 내용 |
|---|---|
motion.json | 범위(scope)와 슬러그(함께 ID를 구성), 버전, 이름, 한 줄 설명, 저자 및 라이선스; lang은 MOTION.md의 언어; fit은 용도 |
MOTION.md | 말로 설명된 룩. 항상 다섯 개의 섹션으로 구성: Essence, Colour, Type, Motion, Avoid. 형식 정의: https://github.com/motionhub-dev/motions/blob/main/SPEC.md#5-motionmd |
tokens.json | W3C 디자인 토큰 형식의 정확한 값: color, font, 그리고 종종 duration과 cubicBezier |
poster.jpg | 이 모션으로 만든 영화의 한 프레임 |
CREDITS.md | 필요한 모든 폰트와 에셋, 라이선스 및 출처 |
react/ | 모든 React 엔진용 모션 컴포넌트(섹션 5): parts/, assets/에서 임포트하는 파일, previews/의 각 컴포넌트 미리보기 이미지 |
<tool>/ | 다른 도구용 기성품. 사용하지 않는 도구의 디렉터리는 무시하십시오. |
모션은 하나의 파일일 수도 있습니다: 프론트 매터(front matter)에 spec, name, tokens(짧은 형식: floor: "#E8D5B7")를 포함하는 MOTION.md입니다. 이는 tokens.json과 동일한 내용을 말하며, 컴포넌트, 포스터 또는 크레딧이 없습니다.
1. 모션 선택
- 지정된 모션이 있는 경우 (이름, ID 또는
motionhub.dev/m/<id>링크): 그것을 사용하십시오. - 프로젝트에 모션이 있는 경우: 프로젝트 루트의
MOTION.md또는motion/MOTION.md를 사용하고 섹션 3으로 이동하십시오. 프로젝트는 여러 모션을motions/에 보유할 수 있습니다:motions/@<scope>/<slug>/의 motionhub 복사본과motions/<name>/의 자체 모션. 각 장면에 계획된 모션을 사용하십시오. 계획에 명시되지 않은 경우 어떤 모션을 사용할지 물어보십시오. 프로젝트에는frame.md또는design.md와 같은 다른 디자인 파일도 있을 수 있습니다. 모션은 영상의 외형과 움직임을 결정합니다. 모션이 다루지 않는 부분은 다른 파일을 따르되, 일치하지 않는 부분이 있으면 사용자에게 알리십시오. - 그 외의 경우 검색:
npx @motionhub/cli search <단어>(단어 없이 실행하면 전체 목록 표시), 또는 인덱스https://motionhub.dev/api/motions.json을 읽으십시오. 각 행에는slug(ID),name,line,fit,catalogs,tags,lang,poster,package가 있으며, 경로는https://motionhub.dev를 기준으로 합니다. 영상의 형태에서 시작하십시오:catalogs는 모션이 속한 카탈로그(explainers,data,stories,tutorials,breakdowns,footage는 사용자가 가져온 비디오 위에 그리는 용도이므로 사용자가 해당 영상을 가지고 있을 때만 제안)를 나타냅니다.https://motionhub.dev/api/catalogs.json에서 전체 목록을 확인할 수 있습니다. 그런 다음 주제와 매체를fit과 대조하십시오.fit.for은 용도를,fit.not은 잘 처리하지 못하는 것을 나타냅니다. 영상의 주제에 맞게 만들어진 모션이 많은 것을 포괄하는 모션보다 더 좋은 선택입니다. 포스터와 함께 두세 개를 제안하고 사용자가 선택하도록 하십시오. 사용자가 요청한 경우에만 직접 선택하십시오.
2. 모션 가져오기
전체 모션을 프로젝트에 복사하여 영상이 제작된 버전을 유지하십시오:
npx @motionhub/cli get <id> # ./motions/<id>/에 복사, 인덱스의 SHA-256과 대조, motions.lock.json에 기록
npx @motionhub/cli get # 프로젝트에 motions.lock.json이 있고 모션이 누락된 경우, 기록된 모든 모션 가져오기
영화는 여러 모션으로 제작될 수 있습니다 (각 부분 또는 각 유형의 장면에 대해 하나씩). 각각을 가져와 ./motions/에 나란히 배치하십시오. ./motions/@<scope>/의 복사본은 절대 변경하지 마십시오. 모션을 수정하려면 ./motions/<name>/으로 복사하여 변경하십시오.
Node 없이: https://motionhub.dev/m/<id>/<version>.tgz를 다운로드하고, 행의 package.sha256과 대조한 후 압축을 푸십시오. 셸 없이: https://motionhub.dev/m/<id>/MOTION.md, tokens.json, motion.json, CREDITS.md를 하나씩 가져오십시오.
3. 전체 읽기
그리기 전에 MOTION.md 전체를 읽고, 그 옆에 있는 tokens.json 또는 프론트 매터의 tokens도 읽으십시오. 작업 언어와 일치하는 MOTION.<lang>.md가 있다면 읽을 수 있습니다. 이는 MOTION.md에 없는 내용을 말하지 않습니다.
4. 영상 만들기
- 값은 정확합니다. 모든 색상, 서체, 지속 시간 및 이징은 모션의 토큰에서 이름별로, 엔진의 용어로 가져옵니다. 폰트 토큰은 스택입니다: 순서대로 서체를 사용하십시오. 색상을 눈으로 근사하지 마십시오.
- Essence가 모든 프레임을 결정합니다. 각 프레임은 Essence가 명명한 특성을 가져야 하며, 모션이 아니라고 말하는 방향으로 흘러서는 안 됩니다.
- Colour와 Type은 역할이지 팔레트가 아닙니다. 각 토큰을 해당 섹션에서 지정한 용도로만 사용하십시오. 아무것도 색칠하지 말아야 한다고 명시된 것은 색칠하지 않은 상태로 유지하십시오.
- Motion은 타이밍입니다. 사물이 지정된 방식으로, 나레이션 또는 음악에 맞춰 등장, 변화 및 퇴장합니다. 움직이지 말아야 할 것은 정지 상태를 유지합니다.
- Avoid는 구속력이 있습니다. 완료하기 전에 Avoid의 모든 항목에 대해 영상을 확인하십시오.
- 숫자를 임의로 만들지 마십시오. 영상의 모든 그림, 날짜 및 수치는 사용자의 스토리 또는 사용자가 제공한 출처에서 가져와야 합니다. 누락된 것이 있으면 보이는 자리 표시자를 남기고 사용자에게 알리십시오.
- 스토리는 여러분의 것입니다. 각 장면을 이 영상이 전달하려는 내용에 맞게 배치하십시오. 포스터나 샘플의 주제, 단어 또는 레이아웃을 복사하지 마십시오.
- 컴포넌트는 지름길입니다. 모션에
react/또는 사용 중인 도구의 디렉터리가 있으면 해당 조각(섹션 5)을 사용하십시오. 그래도 MOTION.md의 텍스트와 토큰이 우선합니다.
5. 엔진 작업
모션에 react/가 있는 경우, 다시 룩을 그리는 대신 해당 컴포넌트를 사용하십시오. 이 컴포넌트는 @motionhub/runtime만 임포트하는 React 컴포넌트이며, 바인딩이 엔진에서 시간과 토큰을 제공합니다:
| 엔진 | 바인딩 | 방법 |
|---|---|---|
| Remotion | npm i @motionhub/remotion | 컴포지션을 <MotionProvider tokens={tokens}>로 감싸고 (import tokens from '../motions/<id>/tokens.json'), <MotionFonts />를 추가하고, ../motions/<id>/react/parts/<file>.tsx에서 컴포넌트를 임포트합니다. 여러 모션의 경우 각 장면을 @motionhub/runtime의 <MotionScope tokens>로 감쌉니다 |
| HyperFrames | npm i @motionhub/hyperframes, 이후 npx motionhub-hyperframes --out assets/motion ( ./motions/의 모든 모션) | assets/motion/motion.css와 motion.js를 로드합니다. Motion.mount(el, (t) => [...])는 GSAP 타임라인에서 Motion.components를 그립니다. 여러 모션의 경우 각각 Motions[<id>]입니다 |
먼저 바인딩의 README를 읽으십시오. 각 컴포넌트의 meta는 용도(purpose, line, fits)와 각 매개변수의 의미를 설명하며, react/previews/<file>.jpg는 해당 컴포넌트의 미리보기를 보여줍니다. 컴포넌트 코드는 사용할 때만 읽으십시오. progress 유형의 매개변수는 0에서 1까지 실행됩니다. 엔진에서 해당 단어가 호출하는 대로 애니메이션을 적용하십시오. 3D로 그리는 컴포넌트는 three를 임포트하므로 직접 설치해야 합니다. Caption(@motionhub/runtime에서 제공)은 모션의 캡션 스킨으로 음성 라인을 그립니다. 각 장면을 스토리에 맞게 배치하십시오. 컴포넌트는 룩일 뿐, 영화 자체가 아닙니다.
그 외의 경우 또는 컴포넌트가 그리지 않는 부분: 토큰은 DTCG 값이며, npx @motionhub/cli tokens --out tokens.json은 하나의 파일로 된 모션에서 바인딩 또는 테마용 토큰을 추출합니다. 각 토큰을 엔진의 형식으로 한 번, 한 곳(테마 모듈)에서 변환하고 이름별로 사용하십시오:
- Colour:
$value.hex. - Font:
$value는 스택입니다. CSSfont-family는 각 이름을 따옴표로 묶고 마지막에 일반(generic) 이름을 사용합니다. - Duration:
$value는{value, unit}이며s또는ms단위입니다. 프레임을 세는 엔진은 초에 프레임 레이트를 곱하고 반올림합니다. - Easing (
cubicBezier):$value는[x1, y1, x2, y2]이며, CSScubic-bezier(x1, y1, x2, y2)와 동일한 곡선입니다. 지원하지 않는 엔진은 샘플링합니다.
| 엔진 | 테마 | 타이밍 |
|---|---|---|
| Remotion | @motionhub/remotion의 useMotion(); 또는 색상 및 폰트 스택을 내보내는 theme.ts. 첫 번째 프레임 전에 @remotion/google-fonts 또는 @remotion/fonts로 서체 로드 | const {fps} = useVideoConfig(); 지속 시간은 Math.round(초 * fps) 프레임; interpolate(frame, [start, start + frames], [0, 1], {easing: Easing.bezier(x1, y1, x2, y2), extrapolateLeft: 'clamp', extrapolateRight: 'clamp'}). 모션의 곡선과 함께 interpolate를 사용하고, 모션이 요청하지 않은 오버슈트가 있는 spring()은 피하십시오 |
| HTML and CSS | :root의 사용자 정의 속성 (--color-ink: #1B2A47) | 지속 시간과 cubic-bezier(...)를 사용한 transition 또는 animation; Web Animations API도 동일한 easing 문자열 사용 |
| GSAP | 동일한 사용자 정의 속성 | 초 단위 duration; CustomEase.create('arrive', 'M0,0 C x1,y1 x2,y2 1,1')을 통한 곡선 |
모션에 엔진용 디렉터리(remotion/)도 있는 경우, 해당 조각이 컴포넌트에 추가됩니다. 먼저 해당 README를 읽으십시오.
6. 글꼴 및 크레딧
CREDITS.md에 명명된 서체를 해당 출처에서 라이선스에 따라 설치하십시오. 사용할 수 없는 경우, 동일한 역할에서 가장 가까운 오픈 서체를 사용하고 사용자에게 알리십시오.CREDITS.md에 명명된 에셋은 해당 라이선스에 따라 사용되며, 요청된 크레딧을 표시합니다.license.text는 모션의 단어, 토큰 및 그림을 다룹니다.CC-BY-4.0및CC-BY-SA-4.0은 크레딧을 요구합니다. 영상 설명 또는 엔딩 크레딧에 다음과 같은 줄을 넣으십시오: 룩: SuoSi의 Ink Scroll, motionhub.dev/m/@iamsuosi/ink-scroll, CC BY 4.0.license.code는 도구 디렉터리의 코드를 다룹니다.
7. 모션 변경 및 나만의 룩 공유
하나의 영화를 위해 모션을 자유롭게 수정하되, 자체 복사본(./motions/<name>/)에서 수정하십시오. 변경된 복사본은 더 이상 해당 버전이 아닙니다. 동일한 ID와 버전으로 게시하지 마십시오.
사용자가 만든 룩을 게시하려면 (사용자가 요청한 경우에만):
npx @motionhub/cli init <slug> --github <their GitHub login>은./motions/<slug>/에 모든 필수 파일을 작성하여 모션@<their login>/<slug>로 만듭니다. GitHub 로그인을 물어보십시오. gh에 로그인한 경우--github는 생략 가능합니다.- 프로젝트(영화 아님)에서 룩을 가져옵니다: 색상과 서체를
tokens.json에 (프로젝트가 사용하는 지속 시간 및 곡선과 함께);MOTION.md는 다섯 섹션으로, 이 룩으로 만든 모든 영화가 공유하는 것을 설명하고 이 영화의 스토리에 대해서는 언급하지 않습니다;CREDITS.md는 모든 서체와 에셋을 라이선스와 함께 명명합니다;motion.json의fit은 정직하게 작성합니다. 서로 관련 없는 세 가지 주제를 다루는 경우에만general, 그렇지 않으면 제작된 주제와 함께topic, 사용자의 자체 영상 위에 그리는 경우overlay를 사용합니다. poster.jpg: 영화의 한 프레임, 너비 960~3840픽셀, 최대 500KB의 JPEG (Remotion:npx remotion still <composition> poster.jpg --frame=<n> --image-format=jpeg).- 선택적으로 재사용 가능한 컴포넌트를
react/parts/에 CONTRIBUTING.md에 설명된 대로 작성합니다:react와@motionhub/runtime만 임포트하고(Remotion의 경우 Remotion 대신useTime()및useVideoConfig()사용), 변경되는 부분을 props로 받고, 이 영화의 스토리는 포함하지 않는 React 컴포넌트입니다. - 사용자의 동의를 얻은 후,
npx @motionhub/cli share motions/<slug> --wait는 풀 리퀘스트가 실행할 검사를 실행하고 motionhub.dev에 업로드합니다. git, gh 또는 GitHub 토큰이 필요하지 않습니다. 사용자에게 링크와 인쇄된 코드를 정확히 전달하십시오. 사용자가 링크를 열고 GitHub로 로그인한 후 모션을 확인하고 코드를 입력하고 DCO를 인증하면 motionhub이 사용자 이름으로 풀 리퀘스트를 엽니다. 그러면 명령어가 풀 리퀘스트 주소를 출력하므로, 사용자에게 그 주소도 전달하십시오. 코드를 직접 입력하거나 사용자를 대신하여 제출하지 마십시오. 사용자가 gh와 함께 자신의 포크를 사용하려면npx @motionhub/cli share motions/<slug> --pr을 사용할 수 있습니다.
하나의 파일로 된 모션도 1단계부터 동일한 방식으로 게시됩니다. 그런 다음 npx @motionhub/cli tokens --out motions/<slug>/tokens.json이 값을 쓰고, name과 lang은 motion.json에 들어가며, 본문은 프론트 매터 없이 motions/<slug>/MOTION.md에 들어갑니다. motion.json의 나머지, CREDITS.md 및 poster.jpg는 아래와 같이 작성합니다.
사용자가 게시한 모션의 새 버전을 게시하려면 (사용자가 "이 프로젝트에서 @/의 새 버전을 게시해 줘"라고 요청한 경우에만):
- 모션을 준비합니다:
./motions/<name>/의 자체 복사본, 또는npx @motionhub/cli get @<scope>/<slug>후./motions/@<scope>/<slug>/를./motions/<slug>/로 복사하여 변경합니다. - 사용자가 원하는 변경을 프로젝트에서 수행하되,
MOTION.md가 룩이라고 설명하는 내용을 유지합니다. 새로운 룩은 새로운 모션입니다. motion.json의version을 게시된 버전보다 높입니다: 수정은 패치(patch), 추가(컴포넌트나 섹션)는 마이너(minor), 이미 제작된 영화가 호환되지 않는 변경은 메이저(major)입니다. 게시된 버전은 절대 변경되지 않습니다.- 위와 같이
npx @motionhub/cli share <dir> --wait를 실행합니다. 사용자가 링크를 열고 제출합니다. 해당 모션에 대한 풀 리퀘스트가 이미 열려 있으면 새 버전이 추가됩니다. 모션 작성자만 변경할 수 있으며, 다른 작성자의 공유는 자체 풀 리퀘스트를 엽니다.--wait는 최대 30분간 기다립니다.
풀 리퀘스트의 리뷰 노트 후 모션을 변경하려면, 노트를 읽고(https://api.github.com/repos/motionhub-dev/motions/issues/<n>/comments 및 .../pulls/<n>/comments, 토큰 불필요) 요청된 변경을 수행한 후 동일한 방식으로 다시 공유하십시오.
다른 사람의 모션을 기반으로 구축하려면, 자신의 범위(scope)로 게시하고, motion.json의 basedOn에 해당 모션을 명명하고([{"id": "@iamsuosi/lab-notebook", "version": "1.0.2"}]), CREDITS.md에서 가져와 변경한 내용을 설명하십시오. 원본 모션은 해당 작성자만 변경할 수 있습니다.
8. 전달 전 확인
모션에 포스터가 있는 경우, 영화의 한 프레임을 poster.jpg 옆에 놓아 비교하십시오: 동일한 배경, 동일한 역할의 동일한 색상, 동일한 서체. 그런 다음 Essence와 Avoid를 다시 한 번 영화와 대조하여 확인하고, 일치하지 않는 부분을 수정하십시오.