비디오 편집
승인된 스크립트와 제공된 음성/토킹헤드 미디어 및 수집된 자산이 있고, 이를 완성된 세로형(9:16) 숏폼으로 만들어야 할 때 이 스킬을 사용하세요. 당신은 메인 편집자이지 클립을 단순히 이어붙이는 사람이 아닙니다. 기준은 크리에이터급 숏폼(Kallaway / Varun Mayya 스타일의 밀도)입니다: 모든 비트는 시청자의 주목을 받을 자격이 있습니다. 일반적인 AI 툴 출력물(균일한 1초 컷, 기본 폰트, 선형/떨리는 트랜스폼, 스톡 템플릿 느낌)은 실패이지 인도물이 아닙니다.
기본 비율은 9:16 (1080×1920) 입니다. 스타일 팩은 16:9와 1:1 동작도 정의하므로 동일한 룩을 다른 비율로 재사용할 수 있습니다 — 하지만 이 스킬의 페이싱과 훅 문법은 세로형 숏폼에 최적화되어 있습니다.
절대적인 워크플로우 (절대 건너뛰거나 순서를 바꾸지 마세요)
index.html을 처음부터 손으로 작성하면 라이브 리로드와 프로젝트 구조가 깨집니다. 항상:
- 프로젝트의
edit/폴더 안에서npx hyperframes init edit실행 — 스캐폴드 생성 (index.html,meta.json,hyperframes.json,CLAUDE.md,package.json). cd edit로 이동한 후 생성된 프로젝트 파일을 수정하여 실제 편집을 구축합니다.fonts/,assets/sfx/,compositions/아래에 서브 컴포지션을 추가합니다.npx hyperframes preview(장기 실행 — 백그라운드에서 실행) — 브라우저에서 라이브 리로드로 확인합니다. 브라우저 도구를 사용하여 검사하고 스크린샷을 찍습니다. 렌더링 전에 페이싱, 레이아웃, 텍스트 타이밍, 애니메이션 부드러움을 확인합니다.npx hyperframes lint/npm run check— 모든 오류를 수정하고; 경고를 검토합니다.npx hyperframes render— 최종 MP4.- 검증:
ffprobe(9:16 해상도, 지속 시간, 코덱) +ffmpeg프레임 스팟 체크(콘택트 시트 생성). 번들된 게이트 스크립트(아래)를 실행합니다.
hyperframes 문서(npx hyperframes docs)를 API/기능 참조용으로 사용하고, 이 스킬의 참조를 편집 표준으로 사용합니다. HyperFrames 도구가 없거나 손상된 경우, 제네릭 편집을 직접 작성하지 말고 중단하고 사용자에게 알리세요.
요구 사항
- HyperFrames —
npx hyperframes로 실행하는 렌더링 엔진. 이 스킬은 HyperFrames 위에 적용되는 편집 표준입니다; 대체하지 않습니다. - Node.js (
npx및 검증 스크립트용). - PATH에 ffmpeg / ffprobe — SFX 합성, 오디오 믹싱 및 렌더 검증용.
styles/<style>/FRAME.md아래의 스타일 팩 (이 스킬은vibe-life예제와_template시작점을 제공합니다 —styles/README.md참조).
입력
하나의 프로젝트 폴더에서 작업합니다. 권장 레이아웃(사용자 환경에 맞게 조정):
your-project/
├── script.md # 승인된 스크립트 (비트/타임스탬프, 자막, 에너지 큐 포함) — 뼈대
├── voiceover/ # 제공된 음성 / 토킹헤드 미디어 (A-롤)
├── avatar/ # 선택적 토킹헤드 미디어
├── assets/
│ ├── manifest.json # 수집된 B-롤 + 비트별 에셋 맵 + 권리 정보
│ └── ... # 수집된 미디어
└── edit/ # 출력 폴더 (`npx hyperframes init edit`로 생성)
스크립트, 음성/아바타 미디어, 에셋 매니페스트를 읽되 수정하지 마세요. 비디오에 사용할 스타일 팩(styles/<style>/FRAME.md)을 선택하세요.
출력
모든 것을 프로젝트의 edit/ 폴더 아래에 작성합니다:
- HyperFrames 프로젝트 (
index.html+compositions/+fonts/+assets/sfx/+assets/master_audio.*). - 최종 렌더링된 MP4 (9:16), 검증 완료.
edit-report.md— 전달 노트: 비트별 편집 결정, 사용된 에셋(매니페스트 참조), 사용된 SFX/음악, 프리뷰/렌더 검증 노트, 최종 검토를 위해 플래그한 모든 사항. 템플릿은references/edit-report-template.md(아래 첨부)에 있습니다.
편집 문법 (여기서 "전문적"이라는 의미)
아래 각 항목은 제안이 아닌 품질 게이트입니다.
하우스 비주얼 언어는 편집 룩입니다 — 아래 "editorial-look" 참조. 프레임은 디자인된 페이지이지, 텍스트가 얹힌 비디오가 아닙니다: 혼합된 세리프-이탤릭/볼드 산세리프 편집 헤드라인, 페이퍼 스테이지 및 다크 그리드 인터스티셜 배경, 기본 A-롤/B-롤 레이아웃으로서 스택 분할 (B-롤 위 / 토킹헤드 아래), 키워드 색상 강조가 있는 하이라이트 바 자막, 심 캡션 및 네임 필, 헤드라인 카드, UI 카드 스택. 모든 숏폼을 그 열 가지 패턴으로 스타일 팩에 맞게 테마하여 구축하세요.
- 엔지니어링된 훅 (처음 1~3초): 상단에 텍스트 자막, 패턴 인터럽트, 그다음 프레임 안으로의 움직임(예: 전체 9:16으로 성장하는 분할 패널). 절대 정적인 토킹헤드로 열지 마세요.
- A-롤 / B-롤 구조: A-롤(토킹헤드 / VO)이 뼈대입니다. B-롤(클립, 스크린샷, 모션 그래픽)이 이를 덮고 강조합니다. B-롤은 A-롤의 오디오 위에 자르고, 침묵 속에서는 자르지 마세요.
- 컷 세분성: 스크립트의 에너지가 요구할 때 0.2초까지 빠른 컷; 절대 규칙적인 1초 컷을 사용하지 마세요. 페이싱은 스크립트를 따릅니다.
- 분할 화면 레이아웃: 나란히 및 스택 구성, 전체 프레임으로/에서 의도적인 전환 포함. 심 캡션이 있는 스택 분할이 주력입니다 — 전체 프레임 B-롤 커버는 예외입니다.
- 얼굴 안전 프레이밍: 패널이나 크롭 안에 사람이 있을 때마다
object-position으로 크롭을 바이어스하여 얼굴이 패널의 보이는 영역 중앙에, 눈이 위쪽 1/3에 위치하도록 합니다 — 기본50% 50%는 토킹헤드 소스에 대해 거의 항상 잘못되어 머리를 자릅니다. 사람 패널에 대한 카메라 움직임은 움직임 전체 동안 얼굴이 프레임 안에 있어야 합니다. 중심에서 벗어나거나 잘린 얼굴은 게이트 실패입니다. "editorial-look" §4 "Face-safe framing" 참조. - 이지드 카메라 모션: 확대/축소 및 왼쪽/오른쪽 팬, 항상 이지드, 선형이거나 떨리지 않아야 합니다. 떨림 방지 계약은 "camera-moves" 참조.
- 운동감 있는 텍스트 / 자막: 애니메이션된 등장, 키워드 강조(강조 단어 하나), 음성에 맞춘 자막 타이밍.
- 테마 모션 그래픽: 숫자 카드, 사양/JSON 카드, 바운딩 박스 콜아웃, 포스터 분할, 차트 빌드 — 스타일 테마로 디자인, 제네릭이 아님.
- 로고 / 워드마크 애니메이션: 스크립트가 이름을 언급하는 브랜드/제품 마크 애니메이션.
- SFX: 컷과 그래픽 히트에 레이어된 휘파람, 클릭, 라이저, 임팩트 — 음성 아래에 미묘하게 믹스. "sfx-and-audio" 참조.
- 응집력 있는 미학: 하나의 색상 테마, 일관된 타이포그래피, 이지드 커브, 기본 룩 요소 없음, 튀지 않음. 모두 스타일 팩
FRAME.md에서 비롯.
스타일 테마 (필수, 디자인 전에)
먼저 스타일 팩에서 시각적 아이덴티티를 도출하세요 — 색상, 타입, 모션 성격, 그래픽 언어는 모두 styles/<style>/FRAME.md에서 옵니다. 다른 스타일 → 다른 룩. 아래 "style-theming"을 참조하여 FRAME.md를 구체적인 frame.md 디자인 사양(팔레트 토큰, 로컬 폰트용 @font-face, 모션 성격 → 이징/컷 선택)으로 변환하세요. 제공된 vibe-life 예제는 크림/잉크/피치/버터 팔레트; Space Grotesk + Instrument Serif 이탤릭 + JetBrains Mono; 종이 컷 모션(크로스페이드가 아닌 SFX로 마스킹된 하드 컷); 프레임당 필 안에 하나의 이탤릭 세리프 강조 단어; 평평한 하드 잉크 그림자. 여러분의 스타일은 자체 토큰으로 동일한 역할을 채웁니다.
HyperFrames 하드 규칙 (이것들을 어기면 렌더가 깨집니다)
- 모든 시간 요소에는
data-start,data-duration,data-track-index그리고class="clip"이 필요합니다 (프레임워크가clip을 통해 가시성을 제어합니다). - 절대
.clip요소 자체를 GSAP으로 애니메이션하지 마세요 — 프레임워크가 그 가시성/트랜스폼을 소유합니다. 자식 래퍼(예:.cam,.inner)를 애니메이션하세요. - 타임라인은
gsap.timeline({ paused: true })이어야 하며window.__timelines["main"]에 등록되어야 합니다 (id는data-composition-id와 일치). - 결정론적만 허용 —
Math.random(),Date.now(), 네트워크 페치,repeat: -1금지. 렌더는 프레임 샘플링되며 재현 가능해야 합니다. - 9:16 = 1080×1920.
#root { container-type: size; }를 설정하여cqw/cqh가 프레임을 기준으로 해석되도록 합니다 (1cqw = 10.8px). 타입/그래픽 크기를vw/vh가 아닌cqw/cqh로 지정하세요. - 인접한 같은 트랙의 클립은 닿으면 안 됩니다 — 부동 소수점 정밀도로
3.2 + 0.35 = 3.5500000000000003이 되어3.55에서 시작하는 클립과 겹치고overlapping_clips_same_track이 발생합니다. 간격을 두거나0.34와 같은 지속 시간을 사용하세요. (hyperframes-helper의 lint 주의사항에서 채택.) - 오디오: 비디오는
muted로 설정하고 별도의<audio>요소를 사용합니다. 많은<audio>요소보다는 하나의 사전 혼합 마스터 오디오 트랙(ffmpegadelay+amix로 VO + SFX 믹스)을 선호합니다 — 여러 트랙은 에코/동기화 해제를 유발합니다. 높고 전용인data-track-index에 넣으세요. - 밀도:
timeline_track_too_dense(하나의 트랙에 많은 시간 요소)는 짧은 파일럿에서는 권고 사항이지만 실제 규모에서는 문제가 됩니다 — 프로덕션 길이 편집의 경우 씬을 서브 컴포지션(data-composition-src="compositions/file.html")으로 나누세요.
워크플로우
- 스크립트를 뼈대로 읽으세요. 비트 맵을 구축합니다: 각 비트/타임스탬프 → A-롤(VO/아바타 세그먼트) + B-롤/MG 필요 + 화면 자막 + 의도된 컷/카메라/전환 + 에너지. 스크립트의 에너지가 페이싱을 결정합니다; 균일한 리듬을 강요하지 마세요.
- 스타일 팩에서 테마를 정하세요.
styles/<style>/FRAME.md를 읽으세요. 구체적인 디자인 사양을 생성합니다: 팔레트 토큰, 로컬@font-face선언, 모션 성격, 그래픽 언어. ("style-theming" 참조.) - 에셋 커버리지를 조정하세요. 에셋 매니페스트를 교차 참조합니다: 각 비트가 수집된 미디어로 커버되는지,
build-in-editor(모션 그래픽으로 구축할 것)인지,alternate스왑인지 확인합니다. 최종 렌더에 플레이스홀더나 라이선스 없는 미디어를 절대 넣지 마세요 — 보고서에 격차를 표시하세요. npx hyperframes init edit. 먼저 스캐폴드합니다. 그런 다음fonts/(로컬 woff2 서브셋),assets/sfx/,compositions/를 추가합니다.index.html에서 비트별로 편집을 구축하세요 (길이에 따라 서브 컴포지션 사용). 편집 문법을 적용합니다: 엔지니어링된 훅, A-롤/B-롤 커버, 비-메트로놈 컷, 분할 화면, 이지드 카메라 움직임, 운동감 있는 텍스트, 테마 MGs, 로고 애니메이션. 자식 래퍼를 애니메이션하고, 절대.clip은 애니메이션하지 마세요.- SFX + 마스터 오디오를 작성하세요. ffmpeg(
anoisesrc/aevalsrc/sine)로 저작권 없는 SFX를 합성하거나 승인된 에셋을 사용하고; VO + SFX를 하나의 마스터 트랙으로 믹스하세요. ("sfx-and-audio" 참조.) - 미리보기 및 검사. 백그라운드에서
npx hyperframes preview실행; 브라우저에서 엽니다; 주요 비트의 스크린샷을 찍습니다; 페이싱, 레이아웃, 텍스트 타이밍, 모션 부드러움을 확인합니다. 렌더링 전에 수정하세요. - 린트.
npm run check/npx hyperframes lint --verbose실행. 모든 오류를 수정하세요; 경고를 검토합니다 (알려진 오탐지 참고 — 예: 고대비 카드가 숨겨진 타임스탬프에서 샘플링된 WCAG-대비 경고). - 렌더.
npx hyperframes render→ MP4. - 게이트 스크립트로 검증.
node scripts/verify-render.mjs <path-to-mp4>실행 — 9:16, 예상 지속 시간, h264/yuv420p, 오디오 존재를 확인합니다. 그런 다음ffmpeg프레임 스팟 체크로 콘택트 시트를 만들고 미리보기와 육안으로 비교합니다. edit-report.md작성 및 상태 설정 (done / in_review / blocked). MP4 + 콘택트 시트를 첨부합니다.
검증 게이트 실행 (스크립트는 scripts/verify-render.mjs에 이 파일과 함께 제공됨):
node scripts/verify-render.mjs path/to/edit/<file>.mp4
선택적으로 정확한 사양을 단언:
node scripts/verify-render.mjs <file>.mp4 --duration 12 --tolerance 0.5
누락된 에셋
비트에 assets/에 없는 에셋이 필요한 경우:
- 먼저 매니페스트에서
alternate또는build-in-editor행을 확인하세요 — 커스텀 모션 그래픽 비트는 구축해야 할 것이지 차단 요인이 아닙니다. - 진정으로 누락되었고 합법적으로 직접 빠르게 가져올 수 있는 경우, 직접 가져와서
edit-report.md에 출처를 기록하세요. - 그렇지 않으면 보고서에 정확한 비트/타임스탬프, 필요한 에셋, 의도된 편집 작업을 나열하고 사용자에게 이를 제공하도록 요청한 후 완료할 수 있는 비트를 계속 진행하세요. 라이선스를 받을 수 없는 플레이스홀더를 절대 렌더링하지 마세요.
검증 (전달 전 필수)
- 프리뷰 스크린샷: 라이브 프리뷰에서 캡처한 대표 프레임, 레이아웃/타이밍/모션 확인.
- ffprobe: 해상도 정확히 9:16 (1080×1920), 예상 지속 시간 (±공차),
h264/yuv420p, 오디오 스트림 존재. 게이트 스크립트가 이를 강제합니다. - 프레임 스팟 체크:
ffmpeg로 타임라인 전체에서 프레임을 추출하여 콘택트 시트 생성; 각 필수 기술이 스타일에 맞게 렌더링되고 프리뷰와 일치하는지 확인. - 얼굴 체크: 사람이 포함된 모든 프레뷰 스크린샷 및 콘택트 시트 프레임에서 전체 얼굴이 보이고 패널 중앙에 위치하는지 확인(심, 캡션, 가장자리 또는 카메라 움직임에 의해 잘리지 않음). 그렇지 않으면 게이트 실패 및 재프레이밍.
- 권리: 렌더에 라이선스 없는/플레이스홀더 미디어 없음; 최종 라이선스 확인이 필요한 모든 것은 보고서에 명시.
- 디자인 변경 로그: 스타일 사양 또는 편집 룩 패턴(새로운 레이아웃, 변경된 색상/타입, 수정된 모션)에서의 모든 편차는
edit-report.md의 "Design decisions" 아래에 이유와 함께 기록되어야 합니다. 시각적 변경은 괜찮지만, 묵시적인 시각적 변경은 괜찮지 않습니다.
크레딧 및 출처
이 스킬은 hyperframes 문서, github.com/robonuggets/hyperframes-helper, 크리에이터급 숏폼의 참조 프레임을 연구하고 그 이상으로 나아갔습니다. 자세한 내용은 아래 "standard-provenance"를 참조하세요. 요약:
- 채택 (hyperframes-helper / HyperFrames에서): HTML-진실-소스 모델;
data-*타이밍 속성 +class="clip";window.__timelines에 일시 정지된 타임라인; GSAPpower2/power3.out이징; 흰색 글로우 캡션 스타일링; SVG 밑줄 강조; lint 주의사항 목록(겹침 부동 소수점 정밀도, 결정론적 전용, 음소거 비디오+오디오 등). - 추가 (여기): 완전한 이지드 카메라 모션 시스템 (명시적 떨림 방지 계약 포함); 9:16 숏폼 문법 (엔지니어링된 훅, 0.2초 미만 비-메트로놈 컷, 분할→전체 프레임 전환);
FRAME.md→ 구체적인 디자인 사양으로의 스타일 테마 파이프라인; 저작권 없는 SFX 합성 + 단일 사전 혼합 마스터 트랙 규율; 렌더 검증 게이트 (ffprobe 단언 + 콘택트 시트 스팟 체크).
부록 — 참조 라이브러리 (인라인)
작성 소스는 이것들을 references/ 아래에 별도 파일로 유지합니다; 스킬이 단일 자체 포함 SKIL이 되도록 여기에 인라인됩니다.