화이트보드 설명 동영상은(는) 무엇을 하나요?

스타일의 핵심: 음성과 그림이 함께 움직입니다. 모든 것이 말해지는 대로 그려지고, 쓰여지고, 밑줄이 그어지고, 동그라미가 쳐지며, 각 슬라이드는 점진적으로 구성됩니다. 스토리보드를 작성하기 전에 references/style-guide.md를 읽으십시오. 색상, 화면상 단어 규칙, 점진적 공개, 동기화 타이밍 표 및 전체 동영상 구조가 포함되어 있습니다.

모든 동영상은 template/에서 시작하십시오 (복사하여 사용하고, 처음부터 만들지 마십시오): 이 스킬의 template/를 <project>/video/로 복사한 다음 source env.sh && cargo build --release를 실행하십시오. 바이너리는 target/release/explainer입니다 (Windows에서는 explainer.exe, env.sh에서 R ...가 실행합니다). 템플릿은 약 95초 데모("약 1분 안에 이진 탐색")로, 복사할 네 개의 장면이 있습니다. template/README.md에 모든 명령이 있습니다. Python 스크립트는 프로젝트 폴더에서 python -I narration/<x>.py로 실행하며, numpy, soundfile, librosa, faster-whisper 및 pillow가 설치되어 있어야 합니다. 포함된 내용:

src/kit.rs: 그리기 키트 (손으로 그린 스트로크, hand/note 텍스트, underline, circle, arrow, stamp, counter, 논문 그림용 Card (mark/ring/spot/zoom, camera, shrink_aside, 아이콘 포함)). 전체를 사용하십시오.
src/lib.rs: 장면 디스패치, 0.1초 딥이 있는 챕터 칩, 이미지 테이블, SceneCues (c.w(beat, "word") = 단어가 말해지는 시점). 데모 장면: s_intro.rs (콜드 오프닝, 제목, 아웃트로 요약), s_idea.rs (말해진 단어 위에 구축된 슬라이드), s_figure.rs (링/마크/노트/스팟과 줌이 있는 그림 카드), s_quiz.rs (함정 스탬프가 있는 mcq 퀴즈).
src/objs.rs: 재사용 가능한 객체 (mcq, grid, token, vecbar, hbar, code_panel, chat_card, quote_card, axes/trace, vec_arrow, photo, ...) 및 "이 동영상" 섹션: 각 동영상의 반복 객체를 여기에 배치하여 모든 장면에서 동일하게 그려지도록 합니다.
src/duck.rs: 호스트 스프라이트 (발 위치, 음성 엔벨로프에서 나온 말하는 움직임, 장면별 위치: 콜드 오프닝/퀴즈/아웃트로에서는 크게, 그 외에는 오른쪽 아래 작게). 스프라이트가 없으면 호스트도 없습니다.
src/t3d.rs (선택 사항): 즉시 모드 큐브 및 텐서/배열 3D 인서트용 View3.
narration/: script.py (장면 → 비트, 퀴즈용 PAUSE), tts.py (음성 설정, local-tts의 say.py를 찾음), build_vo.py (음성 + 줄별 캐시 + 일시 정지 성형 + 템포 + faster-whisper 단어 정렬 → audio/narration.wav, src/cues.rs, src/envelope.rs), words.py (모든 c.w(...) 키, 누락된 디스패치 암 및 남은 플레이스홀더 확인, WORDS.md 작성), est_cues.py (음성이 생성되기 전 임시 큐 및 무음 트랙), audit_vo.py / tts_try.py (발음 감사), make_srt.py (DISPLAY 맵, OVERRIDE 및 --review가 있는 자막), envelope.py, glitch.py (최종 파일 검사).
tools/: prep_figs.py (figs/*.png에서 src/figs.rs 작성), get_pet.py (호스트 스프라이트 다운로드), font_metrics.py, make_demo_fig.py, lowprio.py (유휴 우선순위로 작업 실행).
media/: 글꼴. 미디어 파일만 최상위 레벨에 위치할 수 있습니다 (include_media_dir!는 다른 파일에서 패닉 발생). 따라서 라이선스 텍스트는 media/licenses/에 있습니다.
HELPERS.md: 각 장면 도우미에게 제공할 브리핑 (규칙, 파일 맵, 빌드 및 확인 루프).
STORYBOARD.md: 데모의 스토리보드로, 도우미에게 필요한 세부 수준을 보여줍니다.
THIRD_PARTY.md: 글꼴, 스프라이트, fframes 및 FFmpeg 라이선스.

요구 사항

Rust (stable) 및 fframes 1.3.0 (crates.io에서, template/Cargo.toml에 고정됨, 사용 용도에 맞는 라이선스 조건 확인).
FFmpeg 공유 라이브러리 (FFmpeg 7+ "shared" 빌드) 및 LLVM/libclang (fframes 빌드용). template/env.sh는 FFMPEG_DIR 및 LIBCLANG_PATH를 읽습니다. Windows에서는 FFmpeg의 bin을 PATH에 추가하고, cargo와 빌드된 바이너리 모두에 대해 DLL이 필요합니다 (DLL 없이 파이프 시 127로 자동 종료됨).
Python 3.10+ 및 faster-whisper (단어 정렬, 감사), numpy.
local-tts 스킬 (동일 플러그인, 음성용). GPU는 많은 도움이 됩니다. 모든 작업은 CPU에서도 실행됩니다.
호스트 스프라이트 (선택 사항): github.com/gennadi-kuzmin/awesome-codex-pets의 Codex 펫 (192x208 셀). python -I tools/get_pet.py --list, 그 다음 python -I tools/get_pet.py <pet-id>를 실행하여 하나를 다운로드하고 sprites/로 슬라이스합니다. 해당 저장소의 MIT 라이선스는 코드를 다루며, 동영상을 게시하기 전에 각 펫의 아트워크 권리를 확인하십시오. 밝은 펫을 선택하십시오 (어두운 펫은 검은 칠판에서 사라집니다). 스프라이트가 없으면 호스트 없이 동영상이 렌더링됩니다.

fframes 버전 및 공식 스킬

새 동영상은 fframes 1.3.0을 사용합니다. 제작자의 공식 스킬인 fframes-video는 일반 API를 다루며 릴리스마다 변경되므로, 이 스킬이 다루지 않는 내용은 해당 스킬을 참조하십시오: 해당 SKILL.md, 그 다음 references/api.md, audio.md, design.md 및 3d.md. npx skills add https://fframes.studio -g -a claude-code -y로 설치하십시오 (권한이 설치를 차단하는 경우 사용자에게 실행하도록 요청). 동일한 파일은 github.com/dmtrKovalenko/fframes의 skills/fframes-video/에 있습니다. 이 스킬은 이 스타일에 특화된 내용(룩, 파이프라인 및 아래의 교훈)만 유지합니다. 둘이 렌더링에서 충돌할 경우 아래의 주의사항이 우선합니다.

1.3에서 새롭고 사용할 가치가 있는 것:

3D 샷 (fframes::three_d): 다음 섹션을 참조하십시오.
더 선명한 검사: frame 3s --crop x,y,w,h (비디오 픽셀 단위의 확대 크롭, 터치 스트로크 및 작은 레이블용), frame --ids (모든 id가 있는 요소의 윤곽선 및 이름 표시), strip 2s,5s,9s (선택한 시간을 나란히 표시) 및 inspect --pops (한 프레임에서 나타나거나 사라지는 요소 찾기, 호스트의 깜박임 그룹화). --pops는 프레임을 확인하고 인코딩된 mp4를 확인하지 않으므로 최종 파일에 대해 glitch.py를 계속 실행하십시오.
Lottie: 기능 lottie, frame.play_lottie(ctx, "x.json", LottieOptions { .. })로 기성 애니메이션 아이콘 사용. 손으로 그린 키트 스트로크가 기본값으로 유지됩니다. 화이트보드 룩과 일치하는 경우에만 Lottie를 사용하십시오.
include_media_dir!(pub struct M, "media", stereo)는 스테레오 파일을 스테레오로 유지합니다.

화이트보드 동영상의 3D 샷

깊이 또는 움직이는 카메라가 설명 자체인 경우에만 3D를 사용하십시오: 레이어 스택, 텐서 형태, 메모리 계층 구조, 물리적 장치, 손실 표면, 기울어지는 논문 그림 카드 등. 텍스트, 레이블, 차트 및 화살표는 손으로 그린 SVG로 유지됩니다. 챕터당 한두 개의 3D 순간으로 제한하십시오: 동영상은 여전히 화이트보드입니다. references/three_d_example.rs는 4초 테스트입니다 (회전하는 레이어 스택, 들어올려지는 레이어, 거기에 고정된 손 레이블, 3D 평면에 svgr로 그려진 논문 카드).

fframes = { version = "=1.3.0", features = ["compile-time-svgtree", "cli", "3d", "wgpu"] }. 3D는 CPU 프레임 렌더러에서 작동합니다: wgpu를 사용하면 3D가 GPU에서 렌더링되고 다시 읽혀집니다 (1080p에서 120프레임: RTX 4070 Laptop에서 1.4초, Renderer::cpu()에서 4.2초). GPU가 사용 중이면 렌더러를 .cpu()로 전환하고 (예제는 FF_3D=cpu를 읽음) 다른 것은 변경되지 않습니다. wgpu 타입은 main.rs에 #![recursion_limit = "256"]이 필요할 수 있습니다.
보드 룩: 키트의 BG 사각형 위에 Background::Transparent, Material::shadow_catcher 바닥, ToneMapping::Neutral (키트 팔레트가 그대로 유지되도록), 그리고 Material::standard(c).roughness(0.45).clearcoat(0.4) (스트립 크기에서 읽히는 덩어리진 객체용).
3D 객체의 손 레이블: camera.project(scene.local_to_world(id, local), w, h)는 인서트 내부의 픽셀을 제공합니다. 인서트의 x/y를 추가하십시오. 키트를 사용하여 트리거 단어에 레이블을 그리십시오.
3D의 논문 그림: ctx.render_svgr(svgr!(..), w, h) → Geometry::plane의 Material::unlit(0xffffff)와 함께 Texture::from_image(&img). 동일한 경로로 그림 PNG를 카드에 배치합니다.
움직이는 객체는 인서트 렌더러의 상자 안에 머물러야 합니다. 그렇지 않으면 가장자리에서 잘립니다.
장면을 new()에서 한 번 빌드하고, 프레임별로 복제 및 포즈를 지정합니다 (공식 3d.md 참조).
텐서 / 배열 시각화: 즉시 모드가 잘 작동합니다. 장면 fn은 각 프레임의 t에서 Vec<Cube>를 빌드하고 (위치는 단순 산술이므로 블록이 축소, 분할, 풀림, 고스트 채움), 하나의 공유 rounded_box 지오메트리로 인서트를 렌더링하고, 손으로 그린 화살표를 위한 점을 투영합니다. 전면 레이어에만 큐브 번호를 쓰고 희미해진 큐브 (알파 < 0.6)의 레이블은 건너뛰십시오 (그렇지 않으면 비쳐 보입니다). 3D로 전체 inspect는 느립니다 (5400프레임에 약 10분): 백그라운드에서 실행하십시오.
전체 카메라 움직임 동안 고정된 레이블을 모든 객체에서 멀리 유지하고 (샷 시작과 끝의 스틸 확인), shrink_aside가 완료된 후에 3D 샷을 시작하고, 도중에는 시작하지 마십시오.

워크플로우

리서치 (research/paper_notes.md): 표/페이지와 함께 모든 숫자, 그리고 용어 위험 (퍼센트 대 포인트 등). 논문의 그림을 이미지로 추출 (figs/, 동영상에서 흰 카드). 논문 자체의 다이어그램과 그림을 화면에 표시하십시오.
스크립트 (narration/script.py): 분당 약 150단어, 비트당 1문장, 음성을 위해 철자 표기 ("Swee Bench", "T zero", 숫자는 단어로). 가장 놀라운 숫자로 콜드 오프닝 → 제목 + 논문 카드 → 로드맵 → 챕터 → 3-4개 퀴즈 (질문, A-D 보기, PAUSE, 정답) → 이전에 그려진 동일한 객체를 재사용하는 평결 포스터 → 작은 글씨 → 아웃트로. 음성 빌드 후 길이를 확인하십시오. 서두르기보다는 라인을 다듬거나 TEMPO를 올리십시오 (1.06이 적합).
- 퀴즈는 어렵고 정확한 객관식 (스타일 가이드 섹션 6): 추론 질문, 실제 오해를 나타내는 4가지 보기, 정확히 하나의 방어 가능한 답변. research/quiz_keys.md를 작성하고 (모든 보기는 페이지/표 참조로 정당화, 파생 숫자는 Python으로 계산) 음성을 빌드하기 전에 확인하십시오.
- 요약하지 말고 가르치십시오. 각 아이디어를 실제 숫자로 작업 예제와 함께 처음부터 구축하십시오. 해당 줄에서 모든 용어를 정의하고 전문 용어를 일상적인 것으로 축소하십시오 ("노드는 하나의 작업일 뿐입니다"). 대부분의 비트를 연결 단어로 시작하십시오 ("그래서,", "이제,", "하지만"). 분당 약 150단어를 유지하십시오: 그림에 시간이 필요합니다.
- 사용 전에 모든 기호를 적절히 소개하십시오; 해당 기호를 사용하는 줄에서 짧은 알림을 반복하십시오.
- AI가 아닌 사람처럼 들리게 만드십시오. 스크립트를 작성하기 전에 references/natural-narration.md를 읽은 다음 python -I scripts/aispeak_scan.py <project>/narration/script.py를 실행하십시오. 음성을 빌드하기 전에 대본에 나오는 전형적인 AI 패턴 ("여기가 핵심입니다"과 같은 단계적 안내, not-X-but-Y 재구성, 인용할 만한 마무리, 스스로 답하는 질문)을 수정하십시오.
- 콜론-조각 라인을 피하십시오 ("첫째: ...", "세 가지 벤치마크."): 음성이 거기서 멈추고 다음 라인이 갑작스럽게 들립니다. 장면의 첫 단어만 있는 경우 ("프로브.") 삼켜질 수 있습니다: "다음, 프로브."라고 쓰십시오. "시청해 주셔서 감사합니다!"에 자체 비트를 부여하십시오.
스토리보드 (STORYBOARD.md): 장면별, 어떤 요소가 어떤 트리거 단어에 나타나는지, 대략적인 위치 (x, y), 크기 및 색상, 어떤 그림/크롭, 그리고 반복 객체 및 색상 의미. 구현할 수 있을 만큼 구체적이어야 하며, 디자인이 아니어야 합니다. 칩 영역 (왼쪽 위)과 호스트 영역 (오른쪽 아래)을 예약하십시오.
음성: narration/build_vo.py는 local-tts 스킬의 say.py를 통해 음성을 만듭니다. LOCAL_TTS_SAY, 그 다음 ~/.claude/skills/local-tts/, 그 다음 ~/.claude/plugins/**에서 찾습니다. GPU가 사용 중입니까? GGML_BACKEND=CPU 및 WHISPER_DEVICE=cpu. 줄별로 캐시됩니다. 줄을 다시 쓰면 새 테이크가 강제됩니다. shape()는 클립 내 각 무음을 앞의 구두점으로 제한합니다 (없음 0.14초, , 0.24초, :; 0.3초, .?! 0.42초), 줄 사이 0.5초 (질문 후 0.7초). 장면을 그리기 전에 음성을 감사하십시오: audit_vo.py는 스크립트를 프롬프트로 사용하지 않고 모든 클립을 전사하고 (build_vo의 프롬프트 Whisper는 잘못된 발음을 숨깁니다) 스크립트와 차이를 비교합니다. 미국식 철자와 동음이의어는 무시하십시오. 실제 오독은 tts_try.py로 테스트하여 수정하십시오 (전체 문장 내에서: 이름은 단독으로는 괜찮지만 문장 중간에서는 왜곡될 수 있습니다). 알려진 오독은 local-tts 스킬의 주의사항에 있습니다. 재음성 후 감사를 다시 실행하십시오 (Qwen은 가끔 단어를 두 번 말합니다, "the the"). 음성이 아직 준비되지 않았습니까? est_cues.py는 임시 큐와 무음 트랙을 작성하며, 장면은 build_vo.py가 둘 다 덮어쓸 때 자체적으로 재시간을 측정합니다.
키트 + 1-2개의 예시 장면을 직접 그리고 전체 크기로 확인하여 도우미가 품질 기준을 가질 수 있도록 하십시오.
장면 그룹을 병렬 하위 에이전트에 분배 (작고 빠른 모델, 높은 추론 노력이 좋음, 브리핑이 빡빡할 때 잘 수행합니다. 더 강력한 모델은 예시에만 필요합니다). 먼저 objs.rs에 반복 객체를 배치하고 HELPERS.md를 작성하십시오. research/에 대한 절대 경로를 사용하십시오. 프로젝트를 에이전트당 work/<group>/에 복사하고 (렌더 및 음성 캐시는 건너뛰기) 대상 디렉터리를 하드 링크하십시오 (cp -al target work/g/target 또는 에이전트별 CARGO_TARGET_DIR, 그런 다음 해당 복사본의 explainer 크레이트 아티팩트를 삭제)하여 디스크 및 빌드 시간을 절약하십시오. 각 도우미는 src/s_<group>.rs만 편집하고, 빌드하고, words.py 및 inspect를 실행하고, 스트립과 전체 프레임을 확인합니다. s_*.rs를 다시 복사하여 병합하십시오. 다른 파일은 먼저 diff하십시오.
- 도우미를 빠르게 유지하십시오. 빌드가 병목입니다: [profile.release] incremental = true + codegen-units = 256을 유지하고 (재빌드 ~50초 → ~25초) 한 번에 최대 ~4명의 도우미를 실행하십시오. 나중 그룹은 먼저 끝낸 사람에게 주십시오. 한 그룹 = 비슷한 무게의 2개 장면; 퀴즈 또는 조밀한 장면을 분할하십시오. 예산: 장면당 최대 3회 빌드 및 확인 라운드, 12프레임 스트립과 @end, 그런 다음 남은 의문점을 목록화하는 대신 마무리하십시오. 도우미당 한 번의 대상 수정 라운드는 저렴합니다.
- 사실을 확인하십시오: 모든 화면상 숫자를 paper_notes와 비교하고 모든 작업 예제를 계산하십시오 (도우미는 숫자를 지어내거나, 올림을 잘못하거나, 이후 퀴즈의 답을 제공하는 데모를 만들 수 있습니다). 사진이 해설과 일치하는지 확인하십시오.
- 각 도우미의 스트립과 프레임을 직접 검토 (도우미 자체 확인 이미지는 오래되었을 수 있음)한 다음 구체적인 수정 사항을 보내십시오. 그들의 일반적인 실수는 각 단계를 상단 절반에 작은 유형으로 뭉치는 것입니다: y-범위와 px

화이트보드 설명 동영상