smasikurr/RemotionMaster

cinetic

당신은 웹 페이지를 애니메이션화하는 것이 아니라 단편 영화를 감독하고 있습니다. 그림, 사본 및 사운드는 하나의 타임라인 파일에 의해 구동되는 하나의 시스템이며, 렌더링되고 측정되고 비판적으로 검토될 때까지 완료된 것이 아닙니다.

• 엔진. Remotion 4.0.529 (React, 프레임 기반)이 기본값입니다. HyperFrames 0.8.79 (HTML + 일시 중지된 GSAP 타임라인)이 대안입니다. 제작 기술은 엔진에 독립적이며; §7에는 엔진별로 다른 규칙이 나열되어 있습니다.
• 숫자. 여기 있는 모든 숫자는 실제 출시된 작업에서 입증된 기본값입니다. 명시된 이유가 있을 때 변경할 수 있는 시작점입니다. 자연의 법칙이 아닙니다.
• 브랜드. 사용자가 브랜드(색상, 폰트, 로고, 영상, 톤)를 제공하면 브랜드가 우선합니다. 미적 기본값은 사용자가 직접 만들어야 하는 부분을 다룹니다.
• 경로. scripts/render.sh와 같은 경로는 스킬 루트 및 필름 프로젝트 내부에서도 작동합니다. scripts/new-film.sh가 모든 스크립트를 프로젝트에 복사하기 때문입니다. 내부 헬퍼인 brand-svg.ts (brand-kit.sh가 호출) 및 hf-preflight.cjs (hf-finish.sh가 실행)를 제외한 모든 스크립트는 --help를 출력합니다.
• 작업 예제. references/worked-example.md는 33초 런칭 필름(Tessel, 1920×1080, 60fps)을 통해 각 규칙이 어떻게 사용되는지(실수 포함) 설명합니다. 첫 번째 필름을 제작하기 전에 한 번 읽어보세요.

기준

목표는 사람들이 두 번 시청하는 필름입니다. 즉, 제품이 소유한 하나의 아이디어를 그림으로 전달하며, 모든 프레임이 선택된 듯 보이고 빈 공간을 채우기 위한 것이 아닙니다.

• 완성도보다 내용. 이 제품이 하는 구체적이고 영리한 부분, 더 단순한 제품이 할 수 없는 부분을 보여주세요. 일반적인 주장에 완벽한 모션을 입힌 것보다, 시청자가 "오, 똑똑하네"라고 생각하게 만드는 거친 필름이 여전히 승리합니다.
• 고유한 스타일. 모든 브랜드는 '엄격한 금지 사항' 내에서 브랜드 이름, 제품 및 개성에서 파생된 시각적 언어를 얻습니다. 절제는 장식이 없음을 의미하며, 모든 것에 하나의 미니멀한 하우스 스타일을 적용하는 것을 의미하지 않습니다.
• 초고도 청결 및 부드러움. 깨끗하고 현대적인 프레임, 창의적인 아이디어와 안무. 모든 움직임은 60fps에서 이징 처리되고, 무게감 있으며 부드럽습니다. 떨림, 튐, 아이디어를 대체하는 효과가 없습니다.
• 시각적, 내레이션 없음. 소리를 끄고도 아이디어가 읽혀야 하며; 단어는 그림이 이미 말한 것을 확인시켜 줍니다.
• 무게와 정지. 모션은 질량을 가지며, 비트에 도착한 후 멈춥니다. 그래야 빠른 순간이 제대로 전달됩니다.
• 그림을 더 좋게 만드는 사운드: 모든 히트는 볼 수 있는 무언가에 의해 발생합니다.
• 장식보다 절제. 의심스러우면 제거하세요.
• 인상이 아닌 증거. 아래 프로세스는 편집기나 Studio에서 이 중 어떤 것도 판단할 수 없기 때문에 존재합니다. 실제 렌더링을 보고 측정한 후에야 알 수 있습니다.

엄격한 금지 사항

스타일을 직접 만들 때, 다음 중 어떤 것도 절대 나타나지 않아야 합니다. 이는 생성된 작업물의 가장 확실한 지표이며, 이 스킬은 생성된 것처럼 보이지 않는 필름을 만들기 위해 존재합니다. lint-film.mjs는 토큰과 스타일에서 이를 확인하고, 비평가들은 프레임을 확인합니다.

• 단어:

  • 헤드라인 위의 눈썹 또는 킥커 레이블;
  • 쌓인 태그라인 및 "Introducing…";
  • 한 번에 내보내는 전체 문장: 사본은 짧은 조각으로, 하나씩, 그 사이에 그림과 함께 도착합니다(§4, "텍스트 흐름");
  • 텍스트 벽 및 임시 채우기 텍스트: 장식용 모노 캡션, 가짜 메트릭, 아무도 필요로 하지 않는 레이블, 로렘 입숨.

  화면의 모든 단어는 그 자리를 얻을 자격이 있습니다.

• 서체: 세리프 서체, 이탤릭체 또는 기울임체 스타일(가짜 기울임을 만드는 왜곡 포함). 깔끔하고 현대적인 산세리프체 하나와, 제품에 필요하다면 코드나 숫자용 모노체 하나를 사용하세요.

• 색상:

  • 주황색, 호박색, 베이지색, 크림색, 황갈색 또는 모래색(강조, 종이 또는 글로우로 사용);
  • 네온: 매우 밝고 채도 높은 강조, 글로우, 블룸 및 후광;
  • 보라색, 바이올렛 또는 남색, 보라색에서 파란색 또는 여러 색조 그라데이션;
  • 유리 모피즘.

• 장식:

  • 이모지 및 스톡 아이콘;
  • "AI"를 나타내는 반짝임, 입자, 종이 조각, 렌즈 플레어 및 코드 레인;
  • 착지하지 않는 모든 것에 대한 바운시 오버슈트, 그리고 사본에 대한 오버슈트 또는 글자별 트릭(영웅 단어 하나만 글자별로 움직일 수 있음).

남은 것은 충분합니다: 잉크와 종이(밝거나 어두움, 중성 또는 차가움), 금지된 색상군 외부의 의미를 가진 하나의 강조색(빨강, 초록, 청록, 파랑, 노랑), 하나의 산세리프체, 그리고 초고도로 깨끗하고 부드럽고, 이징 처리되고, 무게감 있고, 모션 블러가 적용되며 지터가 없는 모션입니다. 창의성은 아이디어, 장치 및 안무에 들어가야지 효과에 들어가지 않습니다.

사용자가 이러한 항목 중 하나를 포함하는 브랜드(그들의 세리프 워드마크, 그들의 주황색)를 제공하면 브랜드가 우선합니다. 이는 기본값이 아니라 그들의 정체성이기 때문입니다. 비평가들이 플래그를 지정하지 않도록 BRIEF.md에 기록하고, 린트가 허용하도록 설정하는 줄에 // cinetic:brand-supplied <내용> 표시를 하세요.

1. 형식 및 기본값

먼저 행을 선택하세요. 길이, 밀도 및 전달할 파일 목록을 설정합니다. 각 형식의 레시피는 references/formats.md에 있습니다. 숫자는 차분한 템포, 즉 기본값입니다. 활기찬 느낌(티저, 드롭, 하이프 컷)을 요청하는 브리프는 선명한 프로필(§5)을 선택하며, 이는 더 빠르고 약간 더 많은 텍스트(조각당 최대 5단어, 동시 표시 최대 10단어)를 허용하지만 여전히 한 번에 문장을 내보내지 않습니다.

형식	길이	fps	그리드 (BPM)	스토리 비트	단어: 총계 · 새 조각당 · 동시 표시	사운드	전달 파일
런칭 필름 / 티저	20–45 초	60	100 (선명 120)	30초당 6–8 (선명 8–10)	15–25, 최대 30 · ≤ 4 · ≤ 8 (대체 모드에서 ≤ 5)	전체 악보 + SFX	16:9 마스터, 9:16 및 1:1 재배치, 포스터, (발명된 경우) 브랜드 키트
제품 / 기능 비디오, 업데이트 필름	8–30 초	60	100	8–10초당 1개 기능	≤ 12 · ≤ 4 · ≤ 8	UI SFX; 차분: −18 LUFS에서만 효과 (브리프가 그루브를 원할 때만 가벼운 배경음)	마스터, 포스터
기능 루프	4–15 초, 전체 마디	60 (GIF 25)	임의; 전체 마디	3–5	≤ 6, 음소거 상태에서 읽음 · ≤ 4 · ≤ 4	선택 사항	MP4, WebM, GIF, 끊김 없는 연결
로고 스팅	3–8 초	60	100–120	2–4	이름 + ≤ 3 · ≤ 3 · 이름 + 3	하나의 조정된 히트 + 테일	MP4, ProRes 4444 알파 (유지 및 클리어), 포스터, (발명된 경우) 브랜드 키트
UI 워크스루	20–90 초	60	90–100	2–4마디당 1개 챕터	캡션당 ≤ 5 · ≤ 4 · 하나의 캡션	배경음 + UI SFX	마스터, SRT 캡션

UI, 텍스트 또는 카메라가 움직일 때는 항상 60fps를 사용하세요. 30fps에서는 느린 드리프트가 눈에 띄게 단계적으로 보이고 빠른 움직임은 스트로보 효과를 내며, 24fps는 UI에 절대 적합하지 않습니다. GIF는 유일한 예외입니다. 60fps 마스터에서 25fps(또는 50fps)로 내보내세요. GIF 프레임 지연은 1/100초 단위이기 때문에 30fps는 11% 빠르게 재생됩니다.

2. 다섯 가지 법칙

1. 하나의 아이디어, 이 제품에 특화된. 필름을 한 문장으로 말할 수 있어야 하며, 증거는 이 제품이 평범하거나 더 단순한 버전으로는 할 수 없는 일을 보여줍니다. 절제는 장식과 사본에 적용되며, 제품의 지능에는 절대 적용되지 않습니다. 기능이 똑똑하다면 필름은 똑똑한 부분을 보여줍니다. 이유: 시청자는 한 가지를 가지고 떠나며, 경쟁사나 더 단순한 기능에도 똑같이 적용될 수 있는 필름은 그들이 가져갈 것을 주지 않습니다.
2. 하나의 스토리 장치. 하나의 객체, 모양 또는 색상이 모든 장면을 통과하며 컷에서 절대 사라지지 않습니다. 런칭 필름에서는 이상적으로 마지막에 마크로 해소됩니다. 기능 루프나 제품 비디오에서는 제품이 작용하는 단위(카드, 행, 파일)입니다. 이 제품이 소유한 객체를 찾으세요. 맨 점, 선 또는 블록은 게으른 기본값이며, 이 스킬 자체 예제의 스타일이기도 합니다. 이유: 필름을 연속적으로 만들고, 소리를 끄고도 읽을 수 있게 하며, 소유된 객체는 필름을 틀림없이 이 브랜드의 것으로 만듭니다.
3. 하나의 의미를 가진 하나의 강조색. 강조색은 "지금", "새로운" 또는 "당신의 것"과 같은 한 가지를 의미하는 단일 토큰입니다. 드물게 사용하고(약 ≤ 8% 픽셀), 최대 한 번 프레임을 가득 채우도록 하세요. 이유: 의미 있는 색상은 단어 없이 읽히며, 모든 곳에 사용된 색상은 아무 의미도 없습니다.
4. 하나의 하우스 모션 시스템. 몇 가지 명명된 곡선과 스프링을 각각 명시된 이유와 함께 사용하고, 모든 프레임 번호는 timeline.ts에서 가져오세요. 이유: 일관된 모션 은 브랜드 모션이며, 임시방편 이징은 생성된 것으로 읽힙니다.
5. 측정을 통한 검증. 렌더링된 픽셀과 디코딩된 오디오가 스크립트와 한 번의 비판을 통과해야만 필름이 완료됩니다. 이유: Studio 재생은 인코딩된 파일에 나타날 팝, 유령 프레임, 싱크 미끄러짐 및 색상 변화를 숨깁니다.

3. 작업 흐름

모든 단계는 파일을 쓰고, 모든 게이트는 실제로 실행하는 검사입니다. 인라인으로 작업하세요. 하위 에이전트는 비판 전용입니다(§8). 프레임을 병렬로 빌드하는 것은 절약되는 시간보다 더 많은 시간이 소요되기 때문입니다.

단계 0: 수집 → BRIEF.md

• 브리프에 이미 제품, 메시지 및 길이가 명시되어 있으면 다른 모든 것을 추론하고 가정을 기록하세요.
• 그렇지 않으면 최대 3개의 질문을 하세요: 제품을 한 줄로, 형식 및 길이, 필름이 상영될 곳. 나머지는 §1에서 가져오세요.
• 엔진을 선택하세요: 기본적으로 Remotion; 사용자가 이미 HyperFrames 프로젝트를 가지고 있거나, HTML/GSAP을 원하거나, 변수로 구동되는 --batch 렌더링이 필요한 경우 HyperFrames.
• 엄격한 금지 사항(위)을 BRIEF.md에 복사하고 브랜드가 제공하는 예외 사항을 추가하세요. 비평가들은 나중에 이 파일을 그대로 보고 받으므로 QA 계약서 역할을 합니다.
• 템포를 선택하세요: 브리프가 활기를 요구하지 않으면 차분함(기본값); 사양 줄에 기록하세요. 선명함은 명시적인 옵트인입니다(§5).
• 프로젝트를 스캐폴딩하세요: bash <skill>/scripts/new-film.sh films/<이름> --fps 60 --size 1920x1080 [--engine hyperframes]. 시작 템포(Remotion 100 BPM, HyperFrames 120)와 차분한 템포를 유지합니다. 선명한 필름의 경우 --pace crisp를 추가하고(120 BPM 및 선명한 템포), 다른 템포는 --bpm N을 사용하세요. npm install을 실행하는 대신 기존 설치를 재사용하려면 --link-modules <dir>/node_modules를 전달하세요(Windows에서는 정션).
• 게이트: BRIEF.md에 사양 줄이 있습니다. 예: 1920x1080@60, 30s, 100BPM, pace: calm, audio: earshot kit (calm), no music.

단계 1: 콘셉트 → TREATMENT.md

지금 references/concept-and-story.md를 읽으세요.

• 스타일이 아닌 구체적인 내용에서 시작하세요. 다음을 기록하세요:
  • 이름이 의미하거나 연상시키는 것 (종종 마크와 장치를 제공함);
  • 기능의 명확하지 않은 동작, "평범한 버전과 달리, 그것은…" 문장 완성;
  • 제품 자체의 객체 (행, 카드, 판독값 및 상태).
• 각각 다른 렌즈를 통해 3개의 콘셉트를 작성하세요:
  • (a) 제품의 고유한 동사 또는 은유를 문자 그대로 만든 것;
  • (b) 시청자의 고통을 시각화한 것;
  • (c) 형식적인 장치: 릴레이 객체, 북엔드, 하나의 끊기지 않는 카메라 움직임, 또는 제품이 되는 컨테이너.
• 소품이 다른 제품의 필름에 나타날 수 있는 콘셉트는 버리세요. 당신의 것이 아닙니다.
• 기법을 뽑으세요; 선택하지 마세요. python3 scripts/pick.py --format <launch|feature|loop|sting|walkthrough|vertical> --energy <calm|medium|high> --seconds <길이> --json out/qa/picks.json을 실행하되, 브리프가 활기를 요구하지 않으면 --energy calm을 사용하세요. 이는 차분할 때 필름 3.5초당 약 1개의 기법을 뽑고, 그렇지 않으면 2.5초당 약 1개를 뽑습니다(30초 런칭의 경우 9 또는 12, 짧은 조각의 경우 최소 4개). assets/library/techniques.json의 측정된 라이브러리에서, 형식에 필요한 순서대로, 입증된 움직임과 필름의 에너지에 가중치를 두고, 각 레시피를 기본 타이밍과 함께 출력합니다. 수동으로 선택하면 모든 필름에서 동일한 페이드 업, 푸시 인 및 엔드 카드로 수렴됩니다. 뽑기는 두 필름이 비슷해 보이는 것을 방지하는 방법입니다. 콘셉트가 담을 수 있는 픽을 빌드하고, 객체와 장치로 다시 이야기하세요. 스토리, 제품 진실 및 하나의 일관된 UI 언어가 먼저이며, 모든 움직임을 채우는 필름은 쇼릴로 읽힙니다. 콘셉트와 충돌하는 픽은 최대 두 번 다시 뽑거나(--category <cat> --exclude <id>), 또는 서면 이유와 함께 삭제하세요. 뽑기가 제공하지 않은 기법은 절대 추가하지 말고(--category로 하나를 뽑으세요), 브랜드가 금지된 스타일을 소유한 경우 --brand-supplied <look>를 전달하세요. 뽑힌 항목을 전체로 읽으려면 pick.py --show <id>를 사용하세요. references/technique-library.md에는 모든 항목이 나열되어 있습니다(전체를 읽지 말고 검색하세요). 측정된 페이싱, 이징 및 텍스트 타이밍 규범은 references/craft-rules.md에 있습니다.
• 선택한 콘셉트로 assets/TREATMENT.md를 채우세요:
  • 로그라인;
  • 아크: 후크(1초 안에 느껴지는 문제 내부) → 전환 → 증거(1–2가지 기능) → 약속 → 잠금;
  • 뽑힌 기법과 시드 라인, 각각 비트에 배치(템플릿의 §3b);
  • 장치 경로, 장면별;
  • 열이 bar | time | picture | copy (fragment, mode) | picture beat | sound인 비트 시트: 4단어 이상의 모든 생각은 조각 체인으로 작성되며, 각 조각은 전달하는 그림 비트와 함께;
  • 전체 사본 및 단어 수;
  • 마지막 프레임.
• 삭제 테스트를 실행하세요. 데모 비트를 제거해도 가치는 여전히 읽혀야 합니다. 가치 비트를 제거했는데 필름이 여전히 "작동"한다면 기능 투어였습니다.
• 특이성 테스트를 실행하세요. 필름이 더 단순한 제품(예: 항목화된 대신 균등 분할, 또는 순위가 매겨진 대신 일반 목록)에도 똑같이 적용될 수 있습니까? 그렇다면 증거가 제품을 과소평가한 것입니다. 어려운 부분을 보여주세요.
• 기능 단어 테스트를 실행하세요. 음소거 상태에서 시청할 때 낯선 사람이 브리프의 기능 단어("streak", "split")를 사용할 것입니까? 영리한 장치가 다른 것으로 읽히게 한다면 기능의 친숙한 형태를 유지하고 장치가 그것을 꾸미도록 하세요.
• 게이트:
  • 로그라인이 ≤ 15단어;
  • 특이성 테스트 통과, 답변이 기록됨;
  • 단어 수가 §1 예산 내에 있음;
  • 모든 조각이 1–4단어; 비트가 8단어 이상의 사본을 표시하지 않음(대체 모드에서 5); 4단어 이상의 모든 생각은 조각 사이에 30–90프레임의 그림 비트가 있는 체인이며, 하나의 블록으로 도착하지 않음(선명한 필름은 조각당 5단어, 화면에 10단어 허용);
  • 사본은 런타임의 최대 약 65%에 계획됨(선명한 경우 80%), 10초마다 최소 1.5초의 텍스트 없는 그림 구간 포함;
  • 장치가 모든 비트 행에 나타나고, 모든 뽑힌 기법이 비트에 배치되거나 삭제됨

…

[번역을 위해 잘림]