HyperFrames 진입점
HyperFrames는 HTML로 비디오를 렌더링합니다. 컴포지션은 DOM이 data-* 속성으로 타이밍을 선언하고, 애니메이션 런타임이 탐색 가능하며, 미디어 재생이 프레임워크에 의해 관리되는 HTML 파일입니다. 전체 제작 계약은 /hyperframes-core에 있으므로, 컴포지션 HTML을 작성하기 전에 이를 읽으십시오.
1. 프로젝트 상태에서 시작
첫 번째 일치하는 행을 적용하고, 더 낮은 상태 행은 평가하지 마십시오.
| 상태 | 조치 |
|---|---|
| 기존 Remotion 소스를 HyperFrames로 명시적으로 포팅 | references/routes/remotion-to-hyperframes.md를 읽은 후, 해당 워크플로우로 직접 라우팅합니다. 의도 레이어를 건너뜁니다. |
| 기존 HyperFrames 프로젝트에 대한 특정 작업: 검사, 진단, 검증, 미리보기, 렌더링, 게시 또는 일괄 렌더링 | 해당 작업만 수행합니다. 의도 및 워크플로우 라우팅을 건너뛰고, /hyperframes-cli 및 필요한 도메인 스킬을 로드합니다. |
| 기존 프로젝트에 대한 특정 편집 | 편집을 수행합니다. 의도 레이어를 실행하지 마십시오. |
BRIEF.md가 존재함 | workflow와 flow를 읽습니다. 해당 워크플로우를 실행합니다. flow: companion은 항상 /general-video에서 실행됩니다. 브리핑 질문을 하지 마십시오. |
브리핑은 없지만 hyperframes.json 또는 STORYBOARD.md가 존재함 | 프로젝트 파일과 기록된 기본 설정에서 재개합니다. 기존 아티팩트에서 소유 워크플로우를 유추합니다. 고유하게 결정할 수 없는 경우, 라우팅 전용 질문을 하나만 하고 의도 인터뷰를 실행하지 마십시오. |
| 새로 생성 | 의도 레이어(references/intent-interview.md)를 실행한 후, § 2의 테이블을 사용하여 한 번 라우팅합니다. |
새로운 요청이 주제나 입력을 식별하지 못하는 경우, 라우팅하기 전에 비디오가 무엇에 관한 것인지 물어보십시오. 질문하기 전에 기본 설정과 레시피를 확인하십시오(references/intent-interview.md, 1단계). figma.com 입력 또는 명명된 레시피는 인테이크를 변경할 뿐 라우팅을 변경하지 않습니다. 인터뷰의 "Adapt orthogonal inputs" 섹션이 둘 다 처리합니다.
프로젝트의 CLI를 최신 상태로 유지
스캐폴딩된 프로젝트는 package.json 스크립트에 hyperframes@<version>을 고정(pin)하여 렌더링이 재현 가능하도록 합니다. 핀은 자체적으로 절대 업데이트되지 않으며, 이전 CLI의 고정된 실행은 경고를 출력하지 않습니다. 스크립트에 핀이 있는 프로젝트를 재개할 때, 첫 번째 렌더링 영향 명령 전에 한 번 프로브하십시오:
npx hyperframes@latest upgrade --project . --check
프로브는 읽기 전용이며, 최신 릴리스에 대한 핀을 보고합니다. 명시적인 .를 유지하십시오. 이전 CLI 릴리스에서 --project만 있고 다른 플래그가 뒤따르면 해당 플래그를 디렉토리 값으로 사용합니다. 프로젝트가 뒤처졌다고 보고하거나(또는 CLI 출력에 이미 This project pins hyperframes@… (latest …)라는 stderr 알림이나 고정된 스크립트의 --json 결과에 _meta.updateAvailable: true가 표시되는 경우) npx hyperframes@latest upgrade --project .를 적용한 후 npx hyperframes check로 확인하십시오. 통과 확인은 프로젝트의 컴포지션이 새 버전에서 여전히 유효함을 확인할 뿐, 렌더링된 출력이 이전 핀과 프레임 동일하다는 것을 보장하지 않습니다. 따라서 성공적인 업그레이드는 절대 조용하지 않습니다. 실행 요약에 이전 버전과 새 버전을 명시하십시오. 아직 컴포지션이 없는 프로젝트는 확인이 필요 없습니다. 확인에 실패하면 package.json 변경을 되돌리고, 고정된 버전을 계속 사용하며, 프로젝트가 어떤 버전에 남아 있는지와 그 이유를 보고하십시오. 신호를 사용자에게 전달하지 말고 신호에 따라 조치하십시오. 확인되지 않은 핀을 업그레이드된 상태로 두지 마십시오.
2. 새 생성 라우팅
첫 번째 일치하는 행을 사용하십시오. 요청된 **산출물(deliverable)**과 일치시키고, 우연히 언급된 단어나 파일 유형과 일치시키지 마십시오.
| 우선순위 | 요청 | 워크플로우 |
|---|---|---|
| 1 | 기존 Remotion 소스를 명시적으로 포팅 | /remotion-to-hyperframes |
| 2 | 프레젠테이션, 피치 데크 또는 탐색 가능한 인터랙티브 데크 제작 | /slideshow |
| 3 | 변경 없이 기존 토킹헤드 영상에 일반 자막 또는 캡션 추가 | /embedded-captions |
| 4 | 변경 없이 기존 토킹헤드, 인터뷰 또는 팟캐스트 영상에 디자인된 그래픽 오버레이 추가 | /talking-head-recut |
| 5 | 내레이션 또는 웹사이트 캡처 없이 음악 트랙에서 비트 동기화 비디오 제작 | /music-to-video |
| 6 | 명시적으로 짧고, 내레이션이 없으며, 모션 중심의 단위(일반적으로 10초 미만) 생성 | /motion-graphics |
| 7 | PR 참조에서 GitHub 풀 리퀘스트 또는 코드 변경 설명 | /pr-to-video |
| 8 | URL 또는 사이트별 브리핑에서 웹사이트, 제품 사이트, 앱 또는 회사 마케팅 또는 쇼케이스 | /product-launch-video |
| 9 | 제품이나 사이트 캡처 없이 인공 시각 자료를 사용하여 주제, 기사 또는 노트 설명 | /faceless-explainer |
| 10 | 기타 모든 맞춤 비디오 또는 컴포지션 | /general-video |
라우팅을 확정하기 전에 references/routes/<workflow>.md를 읽으십시오. 각 경로에 대한 하나의 작은 파일로, 표준 입력/출력/트리거 계약(지연 설치된 워크플로우 스킬이 있기 전에 사용 가능)과 해당 경로의 인터뷰 항목을 포함합니다. 후보가 계약을 충족하지 못하면 강제로 일치시키지 말고 계속 라우팅하십시오. 일치하는 경로의 파일만 읽으십시오.
일반적인 모호성 해결
- 짧은 애니메이션 타이틀, 로고 스팅, 통계 히트, 차트 히트, 지도 히트 또는 독립형 로워 서드는 내레이션이 없고 모션이 메시지인 경우
/motion-graphics입니다. 정적 타이틀 카드, 내레이션이 있는 시퀀스, 더 긴 몽타주 또는 사용자 정의 루프는/general-video입니다. - 명시적으로 짧은 모션 그래픽은 URL, 트윗, 기사 또는 스크린샷을 소스 자료로 사용할 수 있습니다. "이 사이트로 비디오 만들어 줘"와 같은 일반적인 요청은
/product-launch-video입니다. - 캡션이 있는 기존 영상은
/embedded-captions로 라우팅되고, 디자인된 정보 카드가 있는 영상은/talking-head-recut로 라우팅됩니다. 영상의 타이밍 재조정, 재정렬, 색상 변경, 프레임 변경, 혼합은 사용자 정의 편집이므로/general-video로 폴스루됩니다. - 음악 파일은 비트 그리드가 작품을 주도하는 경우에만
/music-to-video를 선택합니다. 배경 음악으로 사용되는 음악은 주제 일치 경로를 재정의하지 않습니다. - "스토리보드를 원해요"는 검토 프로세스를 변경할 뿐 워크플로우는 변경하지 않습니다. 다른 라우팅 신호가 없으면
/general-video를 사용하십시오. 확인된 스케치 보드 자체가 요청된 산출물일 수 있습니다. 검토 루프가 해당 중지 지점을 정의합니다. - 전문화된 내러티브 워크플로우는 최대 약 3분까지 지원하며 30~90초에서 가장 강력합니다. 명확히 더 긴 작품은
/general-video로 라우팅하십시오. 길이는 명시적 포팅, 데크, 캡션, 오버레이 또는 음악 기반 산출물을 재정의하지 않습니다.
3. 한 번 라우팅한 후 종료
새로 생성하는 경우 의도 레이어(references/intent-interview.md)가 전체 대화(메모리, 트리아지, 피치 라운드, 필수 사항, 실행 형태, 핸드오프)를 실행하고 BRIEF.md를 작성하여 종료합니다. 브리핑은 워크플로우가 읽는 유일한 라우팅 아티팩트입니다. 이후 어떤 것도 이 스킬이나 인터뷰를 다시 열지 않습니다. 이후 모든 "경로가 요구한 것은 무엇인가?" 질문은 BRIEF.md에서 답하십시오.
4. 워크플로우 설치 및 진입
선택한 워크플로우를 읽기 전에 해당 워크플로우와 핵심 도메인 스킬을 설치하거나 새로 고치십시오:
npx hyperframes skills update <workflow-name>
/ 없이 기본 이름을 사용하십시오. 명령이 실패하면 오류를 표시하고, 메모리에서 워크플로우를 재구성하지 마십시오. 설치에 관한 다른 모든 사항(코어와 지연 분할, init이 새로 고치는 항목, 진단, CI 옵트아웃, CLI 없음 대체)은 references/skill-lifecycle.md에 있습니다.
5. 필요 시 도메인 스킬 로드
| 필요 | 스킬 |
|---|---|
| 컴포지션 구조, 타이밍 속성, 트랙, 변수, 결정론 | /hyperframes-core |
| 모션 규칙, 장면 청사진, 전환, 런타임 어댑터 | /hyperframes-animation |
Seek-safe GSAP, CSS, Anime.js, WAAPI, FLIP, 경로, 마스크, SVG, 3D 키프레임 또는 hyperframes keyframes 진단 | /hyperframes-keyframes |
| 디자인 사양, 컨셉, 팔레트, 타이포그래피, 내레이션, 비트 계획 | /hyperframes-creative |
| 이미지, 아이콘, 로고, 오디오, 캡션, 그레이딩, LUT, 재사용 가능한 미디어 | /media-use |
| 보이스오버 편집, 오디오 이펙트 체인 또는 트랙의 자동화 엔벨로프 | /hyperframes-audio |
| 초기화, 린트, 확인, 스냅샷, 비교, 일괄 렌더링, Studio, 렌더링, 게시 또는 진단 | /hyperframes-cli |
| 레지스트리 블록 및 컴포넌트 | /hyperframes-registry |
| 재구성된 모션으로서의 Figma 에셋, 토큰, 컴포넌트 또는 스토리보드 프레임 | /figma |
사진적 미디어의 모양이나 동작에 대한 광범위한 피드백도 사용자가 "색 보정" 또는 "효과"를 언급하지 않더라도 /media-use로 라우팅됩니다. 어둡고/평범하고/지루한 영상 수정, 클립 스타일링, 얼굴 가리기 또는 미디어 공개 개선. 처리를 편집하기 전에 ../media-use/references/media-treatments.md를 읽으십시오. 이 파일은 영상이 어떻게 처리되는지를 규정하며, 미디어를 사용할 수 있는지 여부는 절대 규정하지 않습니다. 기존의 표준 처리 프리미티브를 일반적인 LUT, CSS 필터/오버레이 또는 불투명도 트윈으로 대체하지 마십시오. 텍스트/레이아웃/모션 전용 편집은 해당 도메인에 유지하십시오.
중요한 사진적 미디어가 포함된 빌드 중에는 최종 품질 패스에 한 번의 근거 있는 미디어 폴리시 스캔을 포함하십시오. 적절한 미디어를 변경하지 않고 두는 것은 유효한 결과입니다.
도메인 스킬은 절대 종단 간 산출물의 소유권을 가지지 않습니다. 활성 워크플로우에 필요한 것만 로드하십시오.