sourceframe은(는) 무엇을 하나요?
비디오를 시스템을 구축하듯이 제작하는 방법: 요구사항 먼저, 진실에 대한 원장, 레이아웃 계약, 작은 검증된 단계, 의견보다 측정. 결과물은 하나의 메커니즘을 하나의 초점 요소를 따라 설명하는 짧은 무음 우선 동영상(15~90초)입니다. 이름이 규칙입니다: 모든 프레임은 소스로 추적 가능합니다.
이 스킬은 실제 빌드(D램이 존재하기 전에 coreboot가 C 코드를 실행하는 방법에 대한 77초 설명 동영상, 4,096개 셀 캐시 그리드, 3D 플래시 칩 및 DRAM 트레이닝 포함)에서 추출되었으며, 두 번째 무관한 주제(examples/merkle-proof, 모든 해시가 빌드에 의해 계산되는 Merkle 포함 증명)에서 재입증되었습니다. 아래 경로는 이 스킬의 폴더를 기준으로 합니다.
사용 시기와 사용하지 말아야 할 시기
다음과 같은 경우에 사용하세요: 작동 원리 동영상, 프로토콜 또는 알고리즘 워크스루, 시스템 아키텍처 투어, "무슨 일이 일어나는가" 시퀀스, 사후 분석 재생. 상태가 변하는 메커니즘(비트가 뒤집히고, 포인터가 이동하고, 해시가 전파됨)이 있는 주제에 탁월합니다.
다음과 같은 경우에는 사용하지 마세요: 인물 중심 또는 영상 편집, 제품 광고, 순수 모션 브랜딩, 내용이 메커니즘이 아닌 의견인 모든 것. 이러한 경우 일반 모션 스킬을 사용하세요. 사용자가 정적 캐러셀만 원하는 경우 캐러셀 스킬을 사용하세요.
일곱 가지 원칙
- 픽셀보다 원장. 첫 장면 이전에
FACTS.md(주장, 증거, 상태)를 작성하세요. 상태V는 이 세션에서 소스로부터 읽음,C는 빌드가 계산함,S는 개략적이며 화면에 레이블 표시됨,H는 기억(재확인 필요),N은 소스 필요(출고 차단). 숫자, 기호, 경로, 버전을 절대 지어내지 마세요.C를 선호하세요: 빌드가 비디오에 표시되는 내용을 계산하도록 하세요. - 하나의 초점 요소. 프레임당 하나의 요소가 눈의 앵커 역할을 합니다: 단일 "초점" 색상을 가지며, 항상 현재 단계이고, 두 번째 요소와 경쟁하지 않습니다. 다른 모든 것은 구조적으로 더 조용합니다.
- 색상은 의미입니다. 팔레트 역할(
data,focus,ok,bad,ink)은 의미론적이며 전체 비디오에 대해 고정됩니다. 절대 보기 좋다고 색조를 선택하지 마세요. - 결정론. 프레임은 프레임 번호의 순수 함수입니다. 벽시계 시간,
Math.random, CSS 전환,useFrame이 없습니다. 의사 난수는 시드된hash(n)을 사용합니다. 이것이 병렬 렌더링, 스틸 및 이후 사운드 동기화를 가능하게 합니다. - 그림은 도구입니다. 애니메이션은 상태 변화를 보여주기 위해 존재합니다. 모든 움직임은 "이것이 무엇을 보여주는가?"라는 질문에 답합니다. 금지: 모든 블록에 동일한 페이드 업, 바운스 또는 탄력 이징, 루프 장식, 자기 자신을 위한 광택.
- 먼저 측정하고, 그 다음에 봐야 합니다. 숫자는 싸고 정확하며, 의견은 비쌉니다. 타입체크, 원장 린트, 컨테이너 프로브, 가능한 곳에서 픽셀 측정, 그런 다음 라운드당 하나의 콘택트 시트를 봅니다.
- 중지 규칙. 장면 세트당 최대 3번의 검토 라운드, 라운드당 최대 3개의 수정 사항. 남은 것과 중지한 이유를 말하세요. 정직함이 광택보다 낫습니다: 검증되지 않은 것을 레이블로 표시하세요.
열 가지 단계
각 단계는 결과물과 게이트가 있습니다. 시간을 절약하기 위해 게이트를 건너뛰지 마세요: 비용이 많이 드는 실수는 모두 상류에 있습니다.
| # | 단계 | 결과물 | 게이트 |
|---|---|---|---|
| 0 | 인테이크 | 한 줄 적합성 확인, 플랫폼, 지속 시간, 무음 우선 또는 사운드 포함 | 작업을 차단하는 것만 질문(한 가지 질문), 그렇지 않으면 결정하고 진술 |
| 1 | 브리프 | BRIEF.md 섹션 1~3 | 핵심 내용이 한 문장에 들어맞음; 초점 요소를 한 구절로 이름 지정 가능 |
| 2 | 증거 | 모든 계획된 주장에 대해 FACTS.md 작성; C 행에 대한 계산 스크립트 | tools/ledger_lint.py 통과; N 행 없음 |
| 3 | 방향 | 킬 리스트, 아이디어 문장, 시그니처 순간, theme.ts 토큰 | 경쟁자 테스트 통과 (references/02-direction.md 참조) |
| 4 | 스토리보드 | 표: 장면, 초, 움직이는 것, 캡션, 원장 행; timeline.json | 캡션 예산 충족; 총 길이 정당화됨 |
| 5 | 기초 | 스캐폴딩된 프로젝트, 폰트, 테마, 셸, 카메라, 미리보기 열림 | 하나의 스틸 렌더링; WebGL 작동 (함정 참조: 경로 길이) |
| 6 | 빌드 | 장면, 가장 어렵고 가장 중심적인 것부터 | 장면당: 스틸, 하나의 콘택트 시트, 최대 3개의 수정 사항 |
| 7 | 에셋 | 3D 및 아이콘 에셋, 라이선스 소스가 필요하지 않은 한 절차적 | 사용된 모든 로고 또는 마크가 변경되지 않고 출처 표시됨 |
| 8 | 검증 | 전체 렌더링, 인코딩, 프로브, 프레임 시트, 원장 린트 | 모든 자동 검사 통과; 시트 검토됨; 결함 목록화됨 |
| 9 | 전달 | mp4, 커버 프레임, 캡션 텍스트, 대체 텍스트, 크레딧, "검증되지 않음" 목록 | 사용자가 무엇이 진실인지 묻지 않고 게시 가능 |
단계 0: 인테이크
만들 내용을 한 줄로 진술하세요: 다음과 같이 읽습니다: <매체>, <독자> 대상, <초점 요소>, <지속 시간>. 답변이 구축 대상을 변경하는 경우에만 질문하세요(플랫폼 및 종횡비; 사운드가 이후에 추가될지; 권위 있는 소스가 무엇인지). 소셜 피드의 기본 캔버스는 1080 x 1350(4:5), 30fps입니다. 16:9, 1:1, 9:16의 경우 references/08-adapting.md를 참조하세요.
단계 1: 브리프
templates/starter/BRIEF.md를 복사하세요. 의도(매체, 독자, 핵심 내용, 초점 요소, 무드)를 작성하세요. 핵심 내용은 시청자가 반복할 수 있는 한 문장이어야 합니다. 초점 요소를 한 구절로 지정할 수 없다면 아직 동영상이 없는 것입니다: 결정하고 그렇게 말하거나 한 가지 질문을 하세요.
단계 2: 증거 (대부분의 동영상이 건너뛰는 부분)
- 기본 소스(스펙, RFC, 소스 트리, 데이터시트, man 페이지, 측정된 출력)를 식별하세요. 인용할 정확한 줄을 읽으세요.
file:line또는 URL과 섹션을 기록하세요. - 모든 숫자에 대해 다음을 질문하세요: 빌드가 이를 계산할 수 있습니까? 그렇다면, 이를 계산하고, 두 번째 방법으로 상호 확인하고, 불일치 시 중단하고, 장면이 가져오는 생성된 모듈을 작성하는 스크립트를 작성하세요(
examples/merkle-proof/scripts/compute.mjs가 모델입니다: RFC 재귀 대 반복 빌드가 동의하거나 아무것도 작성되지 않음). - 소싱할 수 없는 것은 레이블이 지정된 개략도(
S, 화면에 "schematic"이라는 단어가 표시됨)가 되거나 삭제됩니다. 드래프트에는[NEEDS SOURCE]가 표시되는 것이 허용되지만, 렌더링에는 절대 표시되지 않습니다. - 예시 데이터는 정직할 때 합법적입니다: 발명된 예시 항목은 일반 예시 텍스트로 표시되고
S로 기록됩니다. python tools/ledger_lint.py를 경보 장치로 실행하세요: 장면 문자열의 모든 숫자는 원장에 나타나야 합니다.
전체 형식 및 예시: references/01-brief-and-ledger.md.
단계 3: 방향
아이디어 문장을 작성하세요: "이 비디오에서, [주제에 속하는 것]은 [장치]가 됩니다." 경쟁자 테스트를 실행하세요: 주제에 대한 일반 비디오가 같은 문장을 사용할 수 있다면, 그것은 아이디어가 아니라 카테고리 아이디어입니다. 하나의 시그니처 순간(유일하게 강한 움직임)과 킬 리스트(가장 명백한 세 가지 시각화, 이제 금지됨: 일반적으로 화살표가 있는 직사각형 스택, 스크린샷, 그라데이션 위의 중앙 개체)를 선택하세요. 다이얼을 설정하세요: 변동성, 모션 강도, 밀도, 각각 1에서 10까지, 주제에서 결정(엔지니어를 위한 보안 설명은 조용하고 밀도가 높으며; 출시 티저는 그렇지 않음). 세부 사항 및 안무 규칙은 references/02-direction.md에 있습니다.
단계 4: 스토리보드 및 타이밍
하나의 표: 장면, 초, 움직이는 것, 캡션, 원장 행. 실제로 유지된 예산:
- 캡션은 최대 2줄, 14단어, 1080 캔버스에서 최소 48px (휴대폰은 캔버스를 약 0.36배로 보여주므로 48px는 약 17pt); 레이블은 최소 26px;
- 캡션은 최소
단어 / 2.6 + 0.8초 동안 유지되며, 문장 중간에 절대 교체되지 않음; - 장면당 하나의 아이디어; 12초보다 긴 장면은 자체 캡션이 있는 내부 비트(단계)가 필요함;
- 전체 작품은 한 번에 하나의 아이디어를 전달함: 제거해도 원장 행이 손실되지 않는 장면은 모두 삭제.
장면 순서와 길이는 timeline.json에만 작성하세요. Remotion, 검증 스크립트 및 cuelab 사운드 파이프라인이 모두 이 하나의 파일을 읽습니다.
단계 5: 기초
node scripts/scaffold.mjs <target-dir> --install
그런 다음: src/theme.ts(팔레트, 캔버스) 편집, public/fonts에 폰트 추가, src/ui/Chrome.tsx에서 BRAND 설정, timeline.json 편집. 프로젝트 경로를 짧게 유지하세요(함정 참조: Windows에서 ANGLE는 짧은 경로가 필요함). 더 많은 코드를 작성하기 전에 3D 장면의 스틸 하나를 렌더링하세요: 지금 WebGL이 실패하면 나중에도 실패합니다.
단계 6: 장면별 구축
순서: 시그니처 장면 먼저(어려운 3D 또는 그리드), 그 다음에 이에 의존하는 장면, 그 다음 연결 장면. 장면당:
- Shell, 토큰 및 애니메이션 헬퍼를 사용하여 레이아웃 계약(
references/03-layout-contract.md)에 대해 장면을 작성합니다; bash tools/shots.sh <Scene> out/<scene> <frames...>: 각 비트의 시작, 중간 동작 및 정지 시점에서 프레임을 선택하여 하나의 콘택트 시트를 생성합니다;- 시트를 한 번 읽고 답하세요: 가장 먼저/두 번째/세 번째로 보이는 것? 초점 요소는 의도된 위치에 있는가? 일반적인 것? 무엇을 잘라낼 것인가? 최대 세 가지를 수정하고, 변경된 프레임만 다시 촬영하세요;
- 장면이 안정되면 다음으로 넘어가십시오. 장면 6이 구축되지 않은 상태에서 장면 2를 다듬지 마십시오.
작업을 수행하는 애니메이션 패턴(마스킹된 선 공개, 엇갈린 행, 해시 스크램블, 비트 플립, 3D에 투영된 레이블, 인스턴스화된 그리드)은 references/04-remotion-patterns.md에 있습니다. 3D 레시피는 references/05-three-assets.md에 있습니다.
단계 7: 에셋
절차적 에셋을 선호하세요: 결정론적이고, 작고, 테마 적용이 가능하며 라이선스 위험이 없습니다. 호일 박스, 돌출된 로고, 인스턴스화된 셀 그리드 및 포인트 필드는 대부분의 설명 동영상을 다룹니다. 유기적이거나 브랜드화된 개체가 필수적이고 서비스의 라이선스와 비용이 사용자에게 수용 가능한 경우에만 AI 생성 메시를 사용하세요. 에셋이 생성되었음을 절대 숨기지 마십시오. 실제 로고 및 마크: 프로젝트 자체 파일을 변경하지 않고 사용하고(단색 마크의 색상 변경은 일반적으로 괜찮지만, 다시 그리는 것은 안 됨), 라이선스를 확인하고, 화면이나 캡션에 출처를 표시하세요.
단계 8: 검증
자동, 다음 순서(저렴한 것부터 비싼 것까지):
npx tsc --noEmit # 타입
python tools/ledger_lint.py # 숫자 대 원장
bash tools/shots.sh Main out/m <frames> # 콘택트 시트, 한 번 보기
npm run render && npm run encode # 원시 렌더링, 그 다음 제한된 범위 yuv420p h264
# encode.sh는 tools/probe.py를 실행하여 종료됨
tools/probe.py는 코덱, yuv420p(yuvj420p 아님), 크기, fps, 지속 시간을 timeline.json과 비교하여 확인하고, 제한된 범위, 검은 프레임 없음, fast-start atom을 확인합니다. 그런 다음 최종 mp4의 시트(ffmpeg로 추출된 4초마다 프레임)와 전체 크기의 한 프레임에서 텍스트 선명도를 확인합니다. 디자인 비평가(예: creator-critic 스킬)를 사용할 수 있는 경우 스틸 폴더에서 실행하세요: 차단 항목은 차단 항목으로, 주요 항목은 질문으로 처리하세요. 전체 체크리스트: references/06-verification.md.
단계 9: 전달
전달: out/video.mp4, 커버 프레임(제목과 초점 요소가 모두 읽히는 휴식 프레임), 캡션 초안(평범하고, 과장 없음, 소스 이름 명시), 대체 텍스트(비디오가 보여주는 것에 대한 한 문장), 크레딧(에셋, 로고, 라이선스), 그리고 "검증되지 않음" 목록(원장 상태가 H 또는 S인 모든 것, 빌드가 증명할 수 없는 모든 것, 육안으로 검토할 수 없었던 모든 것). 스스로 아무것도 게시하지 마십시오.
옵션 간 선택 (의사 결정 테이블)
| 질문 | 선택 | 이유 |
|---|---|---|
| 요소에 대한 2D 또는 3D | 깊이나 물리적 형태가 핵심인 경우에만 3D(칩, 스택, 수백만 개 항목 필드); 그렇지 않으면 2D | 3D는 렌더링 시간과 가독성을 희생시킵니다. 설명이 필요한 곳에 사용하세요 |
| 카메라 | 직교, manual = true, 장면별 고정 | 직교는 레이블을 투영 가능하게 하고 측정을 정확하게 유지합니다 |
| 3D의 레이블 | project()로 투영된 HTML 또는 SVG | 텍스트가 선명하고 스타일이 유지됩니다 |
| 많은 반복 셀 | InstancedMesh(수천 개) 또는 Points(백만 개) | 드로우 콜 |
| 폰트 | 최대 두 패밀리, OFL 또는 라이선스 있음, public/fonts에 번들 | 결정론, 렌더링 시 네트워크 없음 |
| 슬래브 또는 채움의 텍스트 | 밝은 채움에 어두운 텍스트, 밝은 곳에 절대 흰색 사용 금지 | 대비 |
| 사운드 | 그림이 고정된 후 timeline.json에서 디자인 | cuelab 스킬 참조 |
이 방법이 존재하는 이유 (실패 모드)
아름답지만 잘못된 비디오(원장 없음); 정확하지만 읽을 수 없는 비디오(레이아웃 계약 없음); 일반적인 비디오(아이디어 문장, 킬 리스트 없음); 스튜디오에서는 괜찮아 보이지만 렌더링에서 깨지는 비디오(비결정론); 100%에서는 괜찮아 보이지만 휴대폰에서는 흐릿한 비디오(타입 바닥, 썸네일 테스트); 점수를 매길 수 없는 비디오(단일 타임라인 없음); 주장을 아무도 확인할 수 없는 비디오(전달 정직성 없음). 처음 두 비디오를 구축하는 동안 발견된 구체적인 버그(증상, 원인, 수정 사항 포함)는 references/07-pitfalls.md에 있습니다. 마법처럼 보이는 것을 디버깅하기 전에 읽으세요.
이 스킬의 파일
| 경로 | 내용 |
|---|---|
references/01-brief-and-ledger.md | 브리프 템플릿, 원장 형식, 사실 계산 및 상호 확인 방법 |
references/02-direction.md | 아이디어 문장, 킬 리스트, 다이얼, 안무 규칙, 모션 토큰 |
references/03-layout-contract.md | 캔버스, 안전 영역, 타입 바닥 및 휴대폰 축척 산술 |
references/04-remotion-patterns.md | 코드가 포함된 테스트된 애니메이션 패턴 |
references/05-three-assets.md | Remotion의 three.js: 카메라, 호일 셰이더, 가장자리, 인스턴싱, 포인트, 돌출, 레이블 투영 |
references/06-verification.md | 전체 검증 사다리, 콘택트 시트 프로토콜, 인코딩 및 프로브 |
references/07-pitfalls.md | 발생한 모든 실제 버그와 수정 사항 |
references/08-adapting.md | 기타 종횡비, 테마, 언어, 3D 없는 변형, 사운드 핸드오프 |
templates/starter/ | 작동하는 Remotion 프로젝트: 테마, 헬퍼, UI 크롬, three.js 키트, 도구, BRIEF 및 FACTS 템플릿 |
scripts/scaffold.mjs | 스타터를 새 프로젝트로 복사하고 설치 |
../../examples/merkle-proof/ | 계산된 사실, 원장, 렌더링 및 프로브가 포함된 완전한 36초 예제 |
반드시 전달해야 하는 라이선스 참고 사항
Remotion은 MIT가 아닙니다. 개인 및 최대 3명 팀에게는 무료입니다. 그 이상의 회사는 유료 라이선스가 필요합니다(Remotion CLI가 알림을 출력함, remotion.pro/license 참조). 프로젝트가 상업적일 수 있을 때 초기에 사용자에게 한 번 알리세요. three.js, React 및 번들 폰트(SIL OFL)는 허용적 라이선스입니다.