HyperFrames CLI
모든 것은 프로젝트 지침에서 로컬 래퍼를 지정하지 않는 한 npx hyperframes를 통해 실행됩니다. 로컬 래퍼가 있다면 정확히 따라야 합니다. Node.js >= 22 및 FFmpeg가 필요합니다.
워크플로우
- 스캐폴딩 —
npx hyperframes init my-video(또는 URL에서capture) - 작성 — HTML 컴포지션 작성 (
../core참조) - 린트 —
npx hyperframes lint - 검증 —
npx hyperframes validate(런타임 오류 + 대비) - 시각적 검사 —
npx hyperframes inspect - 미리보기 —
npx hyperframes preview는 Studio를 엽니다. 사용자가 직접 편집할 수 있는 타임라인 편집기입니다(단순 시청이 아님). 여기서 검토한 후 렌더링을 요청하세요. - 렌더링 — 변형 선택:
- 반복:
npx hyperframes render --quality draft - 전달:
npx hyperframes render --quality high --output out.mp4 - CI / 크로스 호스트 재현:
npx hyperframes render --docker --strict --output out.mp4 - 클라우드 (장시간/대용량):
npx hyperframes lambda render ./my-project --width 1920 --height 1080 --wait(아래 Lambda 참조)
- 반복:
미리보기 전에 lint, validate, inspect를 실행하세요. lint는 누락된 data-composition-id, 중복 트랙, 등록되지 않은 타임라인을 잡아냅니다. validate는 헤드리스 Chrome에서 컴포지션을 로드하고 런타임 콘솔 오류와 WCAG 대비 문제를 보고합니다. inspect는 타임라인을 탐색하며 버블/컨테이너 밖으로 또는 캔버스 밖으로 넘치는 텍스트를 보고하고, *.motion.json 사이드카가 있는 경우 동일한 탐색된 타임라인을 기준으로 모션 인텐트(탐색 중 진입, 스태거 순서, 프레임 내 위치, 라이브니스)를 검증합니다.
모션 관련 작업이 많은 경우 스냅샷 기반 반복과 *.motion.json 사이드카를 선호하세요. 규율과 모션 검증 사양은 references/lint-validate-inspect.md를 참조하세요.
에이전트 규칙
모든 명령에 적용되는 공통 규칙:
--json은render,preview,play를 제외한 모든 명령에서 사용 가능합니다. 지원되는 명령의 모든 에이전트/CI 호출에 사용하세요. 출력에는_meta봉투(CLI 버전, 최신 버전, 업데이트 조언)가 포함됩니다.render는 상태를 stdout + 종료 코드로만 보고합니다. 아래 사후 렌더링 확인으로 성공을 검증하세요.preview/play는 서버이므로 JSON이 없습니다.doctor --json은 환경이 깨져 있어도 항상 0으로 종료됩니다. 페이로드의ok필드를 게이트로 사용하세요:npx hyperframes doctor --json | jq -e '.ok' > /dev/null. 이렇게 하면 CLI 릴리스 변경으로부터 파이프라인을 보호합니다.- 비-TTY 모드는 자동 감지됩니다.
stdout이 TTY가 아닌 경우(CI, 에이전트, 파이프 출력) CLI는 자동으로 비대화형 모드로 전환됩니다.init는--example을 요구합니다. TTY에서도 이 모드를 강제하려면--non-interactive를 전달하세요. - CI 게이팅(render):
--strict는 린트 오류 실패,--strict-all은 경고도 실패,--strict-variables는 선언되지 않은--variables키를 실패 처리합니다. --json경로는 수정됩니다.$HOME은 리터럴$HOME이 되므로 출력을 버그 리포트 및 에이전트 컨텍스트에 안전하게 붙여넣을 수 있습니다.- 렌더링은 사용자 승인 필요. 검사 통과 후 자동 렌더링하지 마세요.
preview에서 멈추고, 사용자에게 비디오가 Studio에서 편집 가능하다고 알린 후 승인을 받은 후에만 렌더링하세요. - 렌더 후 검증.
render가 종료 코드 0을 반환한 후, 성공 보고 전에 출력 파일이 존재하고 합당한 크기인지 확인하세요:[ -s "$OUTPUT" ] || echo "render produced no output". CLI는 성공 시◇ <path>를 출력합니다. 긴 렌더링의 경우ffprobe -i "$OUTPUT" -show_format -v error로 재생 시간도 검증하세요.
라우팅
| 원하는 작업 | 읽을 문서 |
|---|---|
프로젝트 스캐폴딩 (init, capture, skills) | references/init-and-scaffold.md |
올바름 확인 (lint, validate, inspect, snapshot) | references/lint-validate-inspect.md |
미리보기 또는 렌더링 (preview, play, render, publish) | references/preview-render.md |
환경 진단 (doctor, browser) | references/doctor-browser.md |
AWS Lambda 클라우드 렌더링 (lambda deploy / sites / render / progress / destroy / policies) | references/lambda.md |
기타 모든 것 (info, upgrade, compositions, docs, benchmark, telemetry, 자산 전처리) | references/upgrade-info-misc.md |
섹션 핸드오프
- Tailwind 프로젝트 (
init --tailwind) → 클래스나 테마 토큰을 편집하기 전에../core/references/tailwind.md를 참조하세요. - 레지스트리 블록/컴포넌트 (
hyperframes add,hyperframes catalog) → 설치 경로, 서브-컴포지션 연결 및 스니펫 병합은../registry를 참조하세요. - 파라미터화된 렌더 (
--variables) →<html>에서data-composition-variables로 선언합니다. 전체 스키마는../core/references/variables-and-media.md를 참조하세요.
Lambda (클라우드 렌더링)
hyperframes lambda는 분산 렌더링을 AWS Lambda에 배포하고 노트북이나 CI에서 렌더를 실행합니다. 종단 간 세 가지 명령어입니다:
npx hyperframes lambda deploy # SAM 스택 프로비저닝 (Lambda + Step Functions + S3)
npx hyperframes lambda render ./my-project --width 1920 --height 1080 --wait
npx hyperframes lambda destroy # 제거 (S3 버킷은 유지됨)
렌더링이 단일 호스트에 너무 길거나 큰 경우(여러 분 비디오, 4K, 대규모 병렬 배치) Lambda를 사용하고 AWS 자격 증명이 구성되어 있어야 합니다. 개발 루프 반복은 로컬 render를 고수하세요.
전제 조건, 6개의 모든 하위 명령어(deploy, sites create, render, progress, destroy, policies), IAM 정책 검증, 상태 파일, 비용/정리 규칙은 references/lambda.md를 참조하세요.
최소 완료 게이트
정적 게이트
npx hyperframes lint
npx hyperframes validate
레이아웃 관련 작업에는 inspect를 추가하고, CI에서는 린트 오류 실패를 위해 render --strict를 추가하세요.
시각적 스모크 테스트 — 프로젝트가 서브-컴포지션을 사용하는 경우 필수
lint / validate / inspect는 각 컴포지션을 개별적으로 평가합니다. 이들은 절대 index.html을 로드하고 data-composition-src를 통해 서브-컴포지션을 마운트하지 않으므로, 교차 파일 마운트 실패를 잡을 수 없습니다(../core/references/sub-compositions.md의 "일반적인 함정" 참조). 이를 잡는 유일한 게이트는 실제로 index.html을 로드하고 타임라인을 탐색하는 것입니다.
hyperframes snapshot을 사용하세요 — render와 동일한 방식으로 프로젝트를 로드하므로(따라서 동일한 마운트 경로를 실행함) 요청한 타임스탬프만 캡처하므로 전체 렌더링 대신 몇 초면 됩니다:
# 각 서브-컴포지션의 중간 지점에서 한 프레임 캡처.
# 중간 지점 = index.html의 각 호스트 슬롯에 대한 data-start + data-duration/2
npx hyperframes snapshot --at <t1>,<t2>,<t3>,...
# 또는 장면별 타겟팅이 필요하지 않다면 균등 간격 샘플:
npx hyperframes snapshot --frames 9
출력은 snapshots/frame-NN-at-Xs.png에 저장됩니다. 각 프레임을 장면 계획과 비교하여 육안 검사하세요.
프레임당 위험 신호(각각 정적 게이트가 놓치는 특정 실패 모드와 매핑됨):
| 보이는 상황 | 근본 원인 |
|---|---|
| 텍스트가 왼쪽 상단에 아주 작고 스타일 없이 나타남 | <style> 블록이 <template> 외부 <head>에 남아 있음 (함정 1) — 라이브 DOM에 CSS 도달 안 함 |
| SVG/아이콘 요소가 캔버스 크기로 확대됨 | 위와 동일 — 너비/높이 제약이 적용되지 않음 |
| 장면의 주요 요소가 완전히 누락되고 배경+워터마크만 보임 | 호스트 id ≠ 템플릿 id (함정 2) — 타임라인이 실행되지 않아 초기 상태의 프레임 캡처 |
스냅샷 명령이 Sub-composition timelines not registered after 45000ms 로그 출력 | 함정 2 — 직접 확인 |
snapshots/는 육안 검사 후 삭제할 수 있습니다. 사용자에게 보여줄 최종 렌더는 npx hyperframes render로 별도 과정입니다.