스킬을 최신 상태로 유지하려면 (조용히 실행, 질문 금지):
npx hyperframes skills update talking-head-recut를 실행하세요. 모든 것이 최신이면 아무 일도 일어나지 않습니다. 그렇지 않으면 이 스킬과 이에 의존하는 핵심 도메인 스킬들을 먼저 업데이트합니다.
Talking Head Recut은(는) 무엇을 하나요?
Talking Head Recut은 로컬 비디오가 전체 재생되면서, 그 위에 타임라인에 맞춰 디자인된 그래픽 카드 (타이틀, 로우써드, 데이터 콜아웃, 인용문, 사이드 패널, 화면 속 화면)를 말하는 내용에 동기화하여 레이어링합니다. 에이전트는 카드의 타이밍과 콘텐츠를 설계하고, 각 카드의 HTML을 대화 중에 직접 작성한 후, 단일 composition HTML로 조립하고 hyperframes를 통해 MP4로 렌더링합니다. 고정된 아키타입 목록이나 미리 정의된 카드 구조는 없습니다. 오버레이는 실제 대본 내용에서 생성됩니다.
빌드 전에 경로를 확인하세요. 이 스킬은 기존 talking-head 클립을 디자인된 그래픽 카드(타이틀, 로우써드, 데이터 콜아웃, 인용문, 사이드 패널, PiP)로 패키징합니다. 사용자가 일반 자막/캡션(말한 내용을 텍스트로)을 원할 경우 →
/embedded-captions; 짧은 단일 내레이션이 없는 요소 (로고 스팅/로우써드 하나) →/motion-graphics. 클립은 그대로 재생됩니다 — 재타이밍, 색상 변경, 프레임 변경, 순서 변경, 오디오 편집은 NLE 편집이며 범위를 벗어납니다. URL/주제/PR로부터 빌드하는 경우 → creation 워크플로우. 오버레이 vs 캡션이 확실하지 않습니까? 먼저/hyperframes를 읽으세요.
embedded-captions의 그래픽 패키징 자매 스킬입니다. 캡션은 _말한 단어_를 읽을 수 있는 자막으로 추가합니다. 이 스킬은 재생 중인 비디오 위에 _디자인된 그래픽_을 추가합니다. 일반 자막 →embedded-captions. 처음부터 비디오를 빌드하는 경우 → creation 워크플로우 (product-launch-video/faceless-explainer/ ...).
작업 디렉토리의 검사 가능한 중간 파일들:
metadata.json— 지속 시간 / 너비 / 높이 / fpsaudio.mp3— 추출된 오디오transcript.json— 평면 단어 배열[{ text, start, end }, …](Whisper;segments,words래퍼 없음)storyboard.json— 가벼운 카드 개요 (에이전트의 계획)public/cards/card-XX.html— 카드당 하나의 HTML 조각public/index.html— 최종 조립된 compositionoutput.mp4— 렌더링된 비디오
CLI 해결
# hyperframes — 전사 (로컬 Whisper) + 조립된 HTML을 MP4로 렌더링
npx hyperframes --help
이 스킬은 hyperframes CLI와 시스템의 ffmpeg / ffprobe에서 완전히 실행됩니다. 전사는 로컬 Whisper를 통해 hyperframes transcribe로 수행됩니다 — 타사 서비스, API 키, 또는 속도 제한 프록시가 필요 없습니다.
워크플로우
1. 환경 확인
npx hyperframes doctor # ffmpeg, 헤드리스 브라우저, 렌더링 종속성 확인
# 번들된 자산 확인:
ls "<SKILL_DIR>/assets/fonts" "<SKILL_DIR>/assets/vendor/gsap.min.js"
필요:
ffmpeg/ffprobe(시스템)<SKILL_DIR>/assets/fonts/*.woff2,<SKILL_DIR>/assets/vendor/gsap.min.js(이 스킬 내에 번들, 9단계에서 작업 디렉토리로 스테이징됨)
전사에는 키가 필요 없습니다 — hyperframes transcribe는 Whisper를 로컬에서 실행합니다 (4단계).
hyperframes render에 대해 macOS에서 강력히 권장:
export PRODUCER_BROWSER_GPU_MODE=hardware
2. 작업 디렉토리 생성
모든 아티팩트는 videos/<project-name>/ 아래에 위치합니다 — 다른 비디오 워크플로우(product-launch-video / faceless-explainer / pr-to-video)와 동일한 규칙입니다. 현재 작업 디렉토리(cwd)를 워크스페이스 루트에 유지하고, 모든 항목은 이 하위 디렉토리에 기록됩니다.
VIDEO_PATH="/absolute/path/input.mp4"
WORK_DIR="videos/$(basename "$VIDEO_PATH" | sed 's/\.[^.]*$//')"
mkdir -p "$WORK_DIR"
3. 오디오 및 메타데이터 추출
# 메타데이터 — 지속 시간 / 너비 / 높이 / fps
ffprobe -v error -select_streams v:0 \
-show_entries stream=width,height,r_frame_rate \
-show_entries format=duration -of json "$VIDEO_PATH" > "$WORK_DIR/metadata.json"
# 오디오
ffmpeg -y -i "$VIDEO_PATH" -vn -acodec libmp3lame -q:a 2 "$WORK_DIR/audio.mp3"
출력: metadata.json (width/height/duration 읽기; fps = 평가된 r_frame_rate 분수, 예: 30000/1001 → 29.97) + audio.mp3.
4. 전사
npx hyperframes transcribe "$WORK_DIR/audio.mp3" -d "$WORK_DIR" --json --model small.en
로컬 Whisper — API 키, 프록시, 속도 제한 없음. 작업 디렉토리에 단어 수준의 transcript.json을 기록합니다 (단어 text + start / end 타임스탬프). 6단계에서 카드 타이밍을 결정하는 단어/문장 타이밍을 얻으려면 이 파일을 읽으십시오; 문장 수준 청크가 필요한 경우 구두점/일시 정지에서 직접 단어를 문장으로 그룹화하십시오.
미디어 지속 시간으로 클램프. Whisper는 마지막 단어의 end가 실제 클립 길이를 약간 초과하여 반환할 수 있습니다 — 모든 카드의 endSec와 composition.durationSeconds를 metadata.json의 지속 시간으로 클램프하지 않으면 비디오 이후 검은색 꼬리가 표시됩니다.
5. 대본 수정
transcript.json은 단어 객체의 평면 배열입니다 — [{ "text": "...", "start": s, "end": s }, …] (segments 배열, words 래퍼 없음; 단어당 키는 text). 이를 읽고 명백한 ASR 오류를 수정합니다:
- 동음이의어, 제품명, 기술 용어, 구두점
- 단어의
text를 제자리에서 편집;start/end타임스탬프는 유지 - 미리 그룹화된
segments배열이 없습니다 — 카드 타이밍을 위한 문장 수준 청크가 필요할 때 직접 단어를 문장으로 그룹화하십시오 (종결 구두점/일시 정지에서 분할)
6. 가벼운 스토리보드 작성 (채팅에서)
CLI 미포함. transcript.json + metadata.json을 읽고 직접 카드를 설계합니다. storyboard.json은 에이전트 내부 계획 아티팩트입니다 — 이를 소비하는 CLI 명령은 없습니다. 9단계에서 각 카드의 HTML을 작성하기 전에 타이밍과 콘텐츠를 명확히 생각할 수 있도록 존재합니다. 아래 예시와 일관된 형태를 유지하여 동일한 개요가 9단계에서 작성하는 composition을 구동할 수 있도록 합니다:
{
"schemaVersion": 3,
"composition": {
"fps": 30,
"width": 1080,
"height": 1920,
"durationSeconds": 121.2,
"layout": "portrait",
"themeId": "noir",
"seed": 42
},
"videoTrack": {
"sourcePath": "input-video.mp4",
"startSec": 0,
"endSec": 121.2,
"bounds": { "x": 0, "y": 0, "width": 1080, "height": 1920 }
},
"subtitles": { "enabled": false },
"cards": [
{
"id": "card-01",
"intent": "화자의 불안한 자정 질문으로 갈고리 걸기",
"startSec": 0.5,
"endSec": 13.0,
"accentIndex": 0,
"zone": "fullscreen",
"contentHints": {
"kicker": "솔직한 질문",
"title": "밤 11시의 영혼을 뒤흔드는 질문",
"detail": "고객의 60초 음성 메시지: '위안화가 절상되면 제 USD 정책이 큰 손실이라는 뜻인가요?'"
}
}
]
}
필수 카드 필드:
| 필드 | 유형 | 목적 |
|---|---|---|
id | 문자열 | 카드 HTML 및 GSAP 선택자에 사용되는 안정적인 ID |
intent | 문자열 | 자연어 설명; 카드 합성에 제공 |
startSec / endSec | 숫자 | 초 단위 시간 (endSec > startSec) |
accentIndex | 0 | 1 | 2 | 3 | 4 | 이 카드가 사용할 5가지 테마 악센트 색상 중 하나 |
zone | 열거형 (아래 참조) | 캔버스에서 카드가 위치할 영역 |
contentHints | 객체 | 자유 형식 가방; 에이전트가 kicker/title/detail/data/quote를 여기에 넣음 |
archetype (선택 사항) | 문자열 | 카드 패턴을 기억하기 위해 첨부할 수 있는 자유 형식 레이블; 없음 = 자유 형식, 기본값 |
transition (선택 사항) | 열거형: cut | fade | slide | wipe | 선언적 카드 간 전환 |
다섯 가지 zone 값:
| zone | 해결된 경계 | 사용 시기 |
|---|---|---|
fullscreen | 전체 캔버스를 덮음 | 영웅 순간, 큰 숫자, 만트라 |
whiteboard-area | 40px 마진 (또는 세로형 높이의 45%) 안쪽 | 밀집 데이터 / 주석 콘텐츠 |
lower-third | 하단 30% 밴드 | 보이는 비디오 위의 주석 |
side-panel | 오른쪽 42% (가로형) 또는 하단 40% (세로형) | 데이터 쪽, 비디오 다른 쪽 |
video-overlay | 전체 캔버스, 거의 투명한 카드 기대 | 전체 화면 비디오 위의 주석 오버레이 |
9단계에서 composition을 조립할 때, 각 카드의 zone을 위 표에 따라 카드 호스트 래퍼의 픽셀 경계로 해석합니다. 비디오 경계는 composition 수준에서 한 번 설정됩니다 (videoTrack.bounds). 비디오가 카드 간에 "이동"하는 것처럼 보이게 하려면 composition의 <script>에서 #video-wrap에 대한 GSAP 트윈을 작성합니다 (9단계 참조).
규정된 카드 역할 없음, 규정된 내러티브 아크 없음. 카드는 비디오에서 실제로 말하는 내용에서 생성됩니다 — 모두 인용문이거나 모두 데이터일 수 있으며, 숫자나 스토리로 시작할 수 있습니다. 대본이 리듬을 결정하게 하십시오.
핵심 포인트는 몇 개? — 지속 시간 + 밀도에서 자동 추론. 고정된 상한은 없습니다. 비디오 지속 시간에서 기본 템포를 선택한 다음 정보 밀도로 조정합니다. 최소값만 고정: 최소 5개 카드이므로 짧은 비디오에도 리듬이 있습니다.
1단계 — 지속 시간별 기본 템포 (중간 밀도의 자연스러운 초/카드):
| 비디오 지속 시간 | 기본 템포 (카드당 초) | 근거 |
|---|---|---|
| < 60초 (짧은 릴) | 6–8초 | 시청자는 짧은 형식에서 빠른 컷을 기대함 |
| 60초 – 3분 | 8–12초 | 일반적인 소셜 템포 |
| 3 – 10분 | 12–20초 | 숨 쉴 공간 제공; 각 카드가 더 많은 것을 전달 |
| 10 – 30분 | 20–35초 | 장시간 강의 / 인터뷰 리듬 |
| > 30분 | 30–60초 | 에피소드, 챕터에 가까운 느낌 |
2단계 — 밀도 승수 (기본 템포에 곱함):
| 대본의 신호 | 승수 | 효과 |
|---|---|---|
| 높은 밀도 — 많은 숫자, 뚜렷한 주장, 짧은 템포, 목록형 열거, 1–2문장마다 새로운 아이디어 | × 0.7 | 더 빠르게 컷, 더 많은 카드 |
| 중간 밀도 — 데이터와 내러티브가 혼합된 흐름 | × 1.0 | 기본 템포 |
| 낮은 밀도 — 하나의 확장된 이야기, 반복적인 재구성, 느린 반성적 템포, 단일 주장 전개 | × 1.5 | 더 느리게 컷, 더 적은 카드 |
3단계 — 계산:
초당카드 = 기본템포 × 밀도승수
카드수 = max(5, round(비디오지속시간초 / 초당카드))
예시 (참고 — 상한 클램프 없음; 긴 비디오는 자연스럽게 더 많은 카드를 생성):
- 30초 릴, 단일 펀치라인 (낮은 밀도) → 7 × 1.5 = 10.5초/카드 → round(30/10.5)=3 → 최소값인 5 카드
- 60초 반성적 독백 (낮은 밀도) → 10 × 1.5 = 15초/카드 → 4 → 최소값인 5 카드
- 121초 talking-head, 풍부한 데이터 (높은 밀도) → 10 × 0.7 = 7초/카드 → 17 카드
- 5분 인터뷰, 혼합 밀도 → 16 × 1.0 = 16초/카드 → 19 카드
- 10분 심층 분석, 높은 밀도 → 16 × 0.7 = 11초/카드 → 55 카드
- 30분 강의, 중간 밀도 → 28 × 1.0 = 28초/카드 → 64 카드
- 1시간 팟캐스트, 낮은 밀도 → 45 × 1.5 = 67.5초/카드 → 53 카드
카드가 약 15초 이상 유지될 때는 더 풍부한 카드(데이터 블록, 다단계 공개, 지연된 애니메이션으로 전개되는 여러 하위 포인트)를 계획하십시오 — 정적 한 줄짜리는 8초가 지나면 지루해집니다. 많은 카드가 30초를 초과하는 긴 작품의 경우, 타임라인을 하위 구성으로 청킹(장당 하나의 .html, data-composition-src로 마운트)하여 파일당 GSAP 타임라인을 관리 가능하게 유지하는 것을 고려하십시오 — HyperFrames lint 경고 timeline_track_too_dense 참조.
content는 일반 문자열 ("Title: 연율화 5.69%\nNotes: ...") 또는 데이터를 캡처하는 모든 JSON 형태일 수 있습니다. 에이전트가 카드당 형태를 결정합니다.
선택적 아웃트로. 이 스킬에는 고정된 브랜드 아웃트로가 없습니다. 사용자가 마무리 카드를 원하면 직접 중립적인 카드를 디자인하고 (워드마크 + 한 줄 태그라인, 약 1.5-2초, 페이드 인 -> 짧은 유지 -> 페이드 아웃), cards[]에 추가하고, composition.durationSeconds를 endSec까지 확장하십시오. 그렇지 않으면 마지막 콘텐츠 카드에서 종료합니다.
7. 렌더링 전략 결정
사용자와 시각적 방향 확인 (먼저 수행)
카드 디자인이나 경계를 결정하기 전에 사용자에게 출력 비율, 레이아웃, 스타일 및 카드 밀도 프리셋을 선택하도록 요청하십시오. 프레임은 선택한 레이아웃 × 스타일 조합에서 자동 선택됩니다 (아래 "자동 프레임 선택" 표 참조). 질문을 보내기 전에 두 가지를 미리 계산하십시오:
recommendedRatiofro
…
[전체 내용이 길어 일부 생략됨]