가장 먼저, 이 스킬을 최신 상태로 유지하세요 — 조용히 실행되며 묻지 않습니다:
npx hyperframes skills update talking-head-recut. 모든 것이 최신 상태이면 빠르게 아무 작업도 하지 않고, 그렇지 않으면 이 스킬과 이 스킬이 의존하는 핵심 도메인 스킬을 사용자가 의존하기 전에 업데이트합니다.
토킹헤드 리컷은(는) 무엇을 하나요?
토킹헤드 리컷(Talking Head Recut)은 전체 재생되는 로컬 비디오를 가져와서 그 위에 시간에 맞춰 디자인된 일련의 그래픽 카드(타이틀, 하단 3분할, 데이터 콜아웃, 인용문, 사이드 패널, PIP)를 레이어링하며, 말하는 내용과 동기화합니다. 에이전트는 카드를 디자인하고(타이밍 + 콘텐츠), 각 카드의 HTML을 대화에서 직접 작성한 후 단일 합성 HTML을 조립하고 hyperframes를 통해 MP4로 렌더링합니다. 고정된 아키타입 목록이나 미리 정의된 카드 구조는 없습니다. 오버레이는 전사본의 실제 내용에 따라 결정됩니다.
진입점은
/hyperframes입니다. 이 스킬은 기존의 토킹헤드 클립에 디자인된 그래픽 카드(타이틀, 하단 3분할, 데이터 콜아웃, 인용문, 사이드 패널, PIP)를 패키징합니다. 일반 자막(말한 단어를 텍스트로 표시)이 아닙니다. 클립은 그대로 재생됩니다. 다른 의도 — 일반 자막, 독립 그래픽, 처음부터 비디오 만들기 — 또는 불확실한 경우 →/hyperframes를 먼저 읽으세요: 의도 레이어가 모든 라우팅을 결정합니다.
embedded-captions의 그래픽 패키징 형제. 자막은 _말한 단어_를 읽을 수 있는 자막으로 추가합니다. 반면 이 스킬은 재생 중인 비디오 위에 _디자인된 그래픽_을 추가합니다. 일반 자막 →embedded-captions. 처음부터 비디오 만들기 → 생성 워크플로우(product-launch-video/faceless-explainer/ ...).
/hyperframes를 통해 라우팅되면, 의도 레이어는 입력(어떤 클립)만 확인하고 나머지 렌더 전략 질문(화면비, 레이아웃, 스타일 그룹, 카드 수)을 연기된 질문으로 알립니다. 이러한 질문들은 7단계에서, 조사된 푸티지와 전사본이 권장 사항을 뒷받침할 때 이루어집니다. 레이어의 실행 형태 질문은 적용되지 않습니다. BRIEF.md가 있는 경우, 확인된 입력과 사용자 메모를 포함합니다. 먼저 읽으세요.
작업 디렉토리에서 확인 가능한 중간 파일들:
metadata.json— 길이/너비/높이/fpsaudio.mp3— 추출된 오디오transcript.json— 평면 단어 배열[{ text, start, end }, …](Whisper,segments나words래퍼 없음)storyboard.json— 간단한 카드 개요 (에이전트의 계획)public/cards/card-XX.html— 카드당 하나의 HTML 프래그먼트public/index.html— 최종 조립된 합성output.mp4— 렌더링된 비디오
CLI 확인
# hyperframes — 전사 (로컬 Whisper) + 조립된 HTML을 MP4로 렌더링
npx hyperframes --help
이 스킬은 전적으로 hyperframes CLI와 시스템 ffmpeg / ffprobe에서 실행됩니다. 전사는 hyperframes transcribe를 통한 로컬 Whisper입니다. 타사 서비스, 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단계).
macOS에서 hyperframes render를 위한 강력 권장 사항:
export PRODUCER_BROWSER_GPU_MODE=hardware
2. 작업 디렉토리 생성
모든 아티팩트는 videos/<프로젝트-이름>/ 아래에 위치합니다. 이는 다른 비디오 워크플로우(product-launch-video / faceless-explainer / pr-to-video)와 동일한 규칙입니다. 작업 디렉토리 루트에 cwd를 유지하세요. 모든 파일이 이 단일 하위 디렉토리 아래에 기록됩니다.
VIDEO_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 명령도 이를 소비하지 않습니다. 각 카드의 HTML을 작성하기 전에 타이밍과 콘텐츠를 명확히 생각할 수 있도록 존재합니다. 아래 예시와 일관된 형태를 유지하여 동일한 개요가 9단계에서 작성할 구성을 추진할 수 있도록 하십시오:
{
"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단계에서 구성을 조립할 때, 위 표에 따라 각 카드의 zone을 카드 호스트 래퍼의 픽셀 경계로 변환하십시오. 비디오 경계는 구성 수준에서 한 번 설정됩니다(videoTrack.bounds). 비디오가 카드 사이에서 "움직이는" 것처럼 보이게 하려면 구성의 <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단계 — 계산:
secPerCard = 기본 속도 × 밀도 승수
cardCount = max(5, round(videoDurationSec / secPerCard))
예시 (참고: 상한 없음. 긴 비디오는 자연스럽게 더 많은 카드를 생성합니다):
- 30초 릴, 단일 펀치라인(낮은 밀도) → 7 × 1.5 = 10.5초/카드 → round(30/10.5)=3 → 최소값 5 카드
- 60초 반성적 독백(낮은 밀도) → 10 × 1.5 = 15초/카드 → 4 → 최소값 5 카드
- 121초 토킹헤드, 풍부한 데이터(높은 밀도) → 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 린트 경고 timeline_track_too_dense 참조.
content는 일반 문자열("제목: 연율 5.69%\n메모: ...")이거나 데이터를 캡처하는 모든 JSON 형태일 수 있습니다. 에이전트가 카드당 형태를 결정합니다.
선택 사항 아웃트로. 이 스킬에는 고정된 브랜드 아웃트로가 없습니다. 사용자가 클로징 카드를 원하면 직접 중립적인 카드를 디자인하십시오(워드마크 + 한 줄 태그라인, ~1.5-2초, 페이드 인 -> 짧게 유지 -> 페이드 아웃). 이를 cards[]에 추가하고 composition.durationSeconds를 해당 endSec까지 확장하십시오. 그렇지 않으면 마지막 콘텐츠 카드에서 종료합니다.
7. 렌더 전략 결정
사용자와 시각적 방향 확인 (먼저 수행)
카드 디자인이나 경계를 결정하기 전에, 사용자에게 출력 비율, 레이아웃, 스타일 그룹, 원하는 카드 수를 선택하도록 요청하십시오.
이 문서의 나머지 부분은 추가 번역이 필요할 수 있습니다. 위 단계를 계속 진행하십시오.