Communitygithub.com

nandinishukla/talking-head-short

원시 토킹헤드 녹화물을 코드로만 편집하여 게시 준비 완료된 9:16 쇼트(Instagram Reel, TikTok, YouTube Short)로 만듭니다. 카메라와 깨끗한 오디오 동기화, 단어 타임스탬프가 포함된 전사, 각 대사의 마지막 좋은 테이크 선택 및 재촬영/일시정지/잘못된 시작 제거(J-컷 보이스 트랙 포함), 시선 처리(eye-contact check)를 포함합니다. 각 실행마다 세 가지 레이아웃(전체 캠, 카메라 카드에서 머리가 튀어나오는 분할, 움직이는 월드 카메라와 모션 블러가 있는 전체 화면 '럭셔리 테크' HyperFrames 그래픽) 중 하나를 받습니다. 스토리보드와 비트 테이블로 편집을 계획하고, 렌더링 전에 사용자의 승인을 기다립니다. 두 가지 캡션 스타일(작은 알약 캡션, 화자 옷 색상의 큰 히어로 단어)을 적용하고, 커버 타이틀과 CTA 댓글 카드를 추가하며, numpy로 SFX, 라이저 및 배경 음악을 합성하고, -14 LUFS로 믹싱한 후 보고서를 작성합니다.

talking-head-short란 무엇인가요?

이 AI 에이전트 스킬은 원시 토킹헤드 녹화물(웹캠/카메라 영상)을 완전 자동화된 코드 기반 파이프라인을 통해 9:16 비율의 완성된 쇼트(릴, 틱톡, 유튜브 쇼츠)로 변환합니다. Claude Code, Cursor, Codex 등 AI 코딩 에이전트에서 실행되며, 사용자가 로컬에 설치된 ffmpeg, Python, Node.js 및 HyperFrames를 사용하여 설치나 편집 앱 없이 전체 편집을 수행합니다. 이 스킬은 카메라와 깨끗한 오디오 동기화, 자동 전사(단어 타임스탬프 포함), 각 대사의 마지막 좋은 테이크 선택 및 재촬영/일시정지/더듬거림 제거(J-컷 보이스 트랙 포함), 시선 처리, 세 가지 레이아웃(전체 캠, 분할, 전체 화면 그래픽) 중 하나 선택, 두 가지 캡션 스타일 적용, 댓글 카드 CTA 추가, 커버 타이틀 생성, SFX/라이저/배경 음악 합성, -14 LUFS 믹싱, 상세 보고서 작성을 포함합니다. 핵심 워크플로는 사용자와의 단 두 번의 상호작용(스타일 인테이크 질문과 스토리보드 승인)만 필요로 하며, 나머지 모든 결정은 자동으로 이루어집니다. 결과물은 전체 스템이 포함된 final.mp4와 final_master.wav, 그리고 전체 편집 결정 로그가 포함된 REPORT.md입니다. 이 스킬은 편집 자동화가 필요한 일관된 콘텐츠 제작자, 기술 리뷰어, 온라인 강사, AI 교육자에게 특히 유용하며, 빠른 후반 작업이 필요한 모든 사람에게 적합합니다.

지원 대상✓Claude Code~Codex CLI✓Cursor
npx skills add nandinishukla/talking-head-short

즐겨 사용하는 AI에게 물어보기

이 에이전트 스킬이 미리 로드된 새 채팅을 엽니다.

문서

토킹헤드 → 완성된 9:16 쇼트

파이프라인은 하나의 원시 녹화물(선택적으로 깨끗한 오디오 파일)을 edit/final.mp4(1080×1920, 60fps, H.264 + AAC 48kHz)로 변환합니다. 또한 네 개의 전체 길이 스템과 보고서를 작성합니다. 모든 작업은 코드로 이루어지며, 로컬 프로젝트 내에 설치됩니다: ffmpeg, Python, Node 및 HyperFrames. 시스템 전체 설치나 편집 앱이 필요 없습니다.

  • 표준: references/brief.md는 전체 하우스 브리프로, 레벨, 지오메트리, 타이밍, 유형 및 색상에 대한 모든 수치를 포함합니다. 이 파일과 브리프가 숫자에 대해 다를 경우 브리프가 우선합니다.
  • 시작 전 읽기: references/lessons.md는 첫 번째 실행에서 시간을 낭비할 수 있는 함정을 다룹니다.
  • 사운드 프로필: references/sound-profile.md에는 제작자의 사운드 이펙트 스타일과 레벨이 자체 편집에서 측정되어 있습니다.
  • 모션 라이브러리: references/motion-library.md에는 사용자가 선별한 모션 참조 자료와 그래픽이 따르는 하우스 룩이 있습니다.
  • 예제: references/examples/에는 첫 번째 쇼트(r1–r9 및 cta)의 그래픽이 있습니다. references/example-report.md는 완성된 보고서입니다.

편집자에게 스타일 인테이크 질문을 먼저(0b단계) 한 다음, 단 한 번의 의도적인 중지(7단계의 스토리보드 승인)를 제외하고는 자율적으로 작업합니다. 이 두 지점 사이에서는 사용자에게 아무 것도 묻지 않습니다: 각 판단(테이크 선택, 레이아웃, 사실적 불일치, 도달할 수 없는 UI)을 내리고 계속 진행하며 보고서에 기록합니다. 스토리보드 승인은 사용자를 기다리는 유일한 지점입니다. 입력 파일이 없거나 읽을 수 없는 경우에만 중지합니다.

프로젝트 구조

<project>/RAW.MP4 (+ 깨끗한 오디오 있으면)
<project>/edit/
  project.json        # 모든 비디오별 결정이 여기에 저장됨(테이크, 런, 캡션, 커버…)
  tools/              # bin/ffmpeg, bin/ffprobe, venv/, node_modules/ (setup.sh)
  work/               # 모든 중간 파일 (gfx/는 HyperFrames 프로젝트)
  stems/  final.mp4  final_master.wav  REPORT.md

모든 스크립트는 edit/에서 export PATH="$PWD/tools/bin:$PATH" 및 PY=tools/venv/bin/python으로 실행됩니다. 아래 $S는 이 스킬의 scripts/ 폴더입니다.

단계

0. 설정 및 프로브

bash $S/setup.sh <project>. 그런 다음 ffprobe -show_streams로 카메라 파일을 확인하고 다음을 기록합니다:

  • 크기 및 회전(세로 소스는 종종 −90° 플래그가 있는 가로로 도착함);
  • fps;
  • 오디오 레이아웃.

한 번 디코딩하여 방향이 지정된 중간 파일을 만듭니다. 모든 단계에서 4K를 다시 디코딩하지 마십시오: ffmpeg -i RAW.MP4 -an -vf scale=1080:-2 -c:v libx264 -crf 13 -g 15 work/cam1080.mp4 가로 소스의 경우 scale=-2:1080을 사용합니다. 긴 명령은 백그라운드에서 실행합니다: 8GB Mac에서 4K 90초당 약 6분.

0b. 스타일 인테이크 (작업 전에 한 번만 질문)

비디오를 편집하는 사람에게 한 번의 질문 라운드(질문 도구가 있을 때 사용)로 그들만이 할 수 있는 선택을 물어봅니다. 이미 제공한 내용은 건너뛰고 답변을 project.json → "intake"에 기록합니다:

  1. 캡션: 일상적인 작은 스타일, "small_style": "pill" (차분한 일반 비디오) 또는 "mono" (타자기, 기술/AI/개발 비디오); 그리고 히어로 순간(훅과 핵심 대사, 화면에 화자만 있는 경우) 사용 여부.
  2. 액센트 컬러: 주제(주요 제품의 브랜드 색상; 직접 조사), 옷에 맞춤, 또는 사용자가 지정한 16진수 → "accent".
  3. CTA: "cta_style": "box" 또는 "pill", 댓글 키워드, 그리고 알약의 링크 칩 텍스트(예: "Free on GitHub · owner/repo").
  4. 음악: "music": {"mode": "synth" | "file" | "none"} (+ 파일 경로).
  5. 커버 타이틀: 사용자가 제공한 것, 또는 훅에서 작성.

옵션에 합리적인 기본값을 제공(예: 주제의 브랜드 색상; 일반 비디오는 pill + hero, 기술 비디오는 mono + hero; 마지막 비디오의 다른 CTA 스타일)하여 답변에 몇 초만 걸리도록 합니다. 아무도 답변할 수 없는 경우(무인 실행), 해당 기본값을 사용하고 보고서에 명시합니다.

1. 동기화 및 전사

  1. $PY $S/analyze_audio.py <camera> [clean_audio]는 16kHz에서 상호 상관을 수행하여 오프셋과 피크 비율을 보고합니다. 카메라 타임라인의 보이스 소스, 10ms RMS 엔벨로프, 클리핑된 샘플 수 및 노이즈 플로어를 기록합니다. 깨끗한 파일이 없으면 카메라 트랙을 사용하며 보고서에 명시해야 합니다.
  2. $PY $S/transcribe.py medium.en "Product names, people, @handles"는 250ms 이상의 간격이 있는 모든 단어를 나열합니다.
  3. analyze_audio.py를 다시 실행하여 조용한 구간 목록이 주변 단어를 표시하도록 합니다.
  4. 단어를 라인당 테이크로 그룹화합니다. 각 라인에 대해 마지막 완전한 테이크를 유지합니다. 마지막 테이크에 청각적 결함(더듬거림, 클리핑 또는 잘못된 단어, 다시 시작)이 있는 경우에만 이전 테이크를 사용합니다. 테이크 후의 재시작, 자체 수정, "okay", 떨어진 음절 및 중얼거림, 양쪽 끝의 데드 에어를 제거합니다.

2. 컷

project.json → "lines": [[label, src_start, src_end], …]를 유지된 각 테이크 주변의 대략적인 가장자리와 함께 전달 순서로 작성합니다. 연속된 라인은 하나의 범위를 공유할 수 있습니다. 그런 다음:

  1. $PY $S/cut.py는 시작/진짜 끝(−35dB / −32dB-for-150ms), 250ms 이상의 일시정지 → 120ms, 40ms 리드인, 50ms 오디오 J-컷 리드, 갭 내에서 페이드 아웃되는 테일, 프레임 양자화된 픽처 컷 및 END를 처리합니다.
  2. $PY $S/check_joins.py: 150ms 이상의 조용한 구간이 있는 모든 조인은 음수 "gap_overrides": {"<segment>": -0.0333}를 받습니다. cut.py를 다시 실행합니다. 절대 무음을 추가하지 마십시오.

3. 시선 처리

작은 프록시(scale=-2:540)를 만든 다음 $PY $S/eyesheet.py work/proxy.mp4를 실행하고 work/eye/*.jpg를 확인합니다. 머리 회전 주위에 100ms 단계를 추가합니다. 카메라는 화자가 렌즈를 보고 있을 때만 보여줍니다. 대사 중간에 시선을 돌리면 턴 전 단어 경계에서 분할하고 나머지는 전체 비주얼로 만듭니다.

4. 런 계획 (그래픽 전)

$PY $S/plan.py는 픽처 컷 시간을 출력합니다. "runs": [[start_ms, end_ms, layout, "R1 hook"], …]를 [0, END]를 타일링하여 작성하고(마지막 끝에는 "END" 사용), 다시 실행합니다. 다음 규칙을 검증합니다:

  • 훅은 분할이고 아웃트로(CTA 이후)는 전체 캠입니다;
  • 어떤 런도 약 8초를 넘지 않으며 인접한 런은 레이아웃을 공유하지 않습니다;
  • 세 가지 레이아웃이 모두 사용됩니다.

콘텐츠별로 레이아웃 선택:

  • 카메라를 직접 보는 의견과 이야기 → 캠;
  • 하나의 스크린샷, 카드, 로고 행 또는 짧은 목록 → 분할;
  • 확대가 필요한 화면 녹화, 뉴스 페이지, 제품 UI → 비주얼.

픽처 컷에 경계를 설정합니다. plan.py는 각 런의 단어와 런 기준 시간을 출력합니다; 그래픽 시간을 여기에 맞춥니다.

5. 조사 및 캡처

모든 명명된 제품과 모든 주장(출시, 인용, 숫자)에 대해 실제 소스를 찾고 두 개 이상의 평판 좋은 소스로 수치를 확인합니다. 보고서를 위해 불일치 사항을 기록합니다.

  • 실제 페이지 캡처: edit/에서 실행되는 node $S/shot.mjs <url> <out.png> 1280 1400 0 사용. HyperFrames의 chrome-headless-shell을 자체적으로 찾습니다. 각 사이트의 robots.txt 및 이용약관을 존중합니다: 인용할 페이지만 캡처하고 크롤링하지 마십시오.
  • 리포지토리는 종종 docs/에 UI GIF 또는 스크린샷을 제공합니다; 이를 사용하여 UI를 재구성합니다.
  • 로그인이 필요한 UI는 공개 스크린샷 또는 문서에서 재구성하고 보고서에 기록합니다.
  • "Claude Code"는 화자가 터미널에 대해 이야기하지 않는 한 Claude 데스크톱 앱 UI를 의미합니다.

6. 캡션 및 커버 (스토리보드에 표시되므로 지금 계획)

$PY $S/captions.py work/cam1080.mp4 (카메라 비디오는 히어로 색상용). 기술 / AI 도구 / 개발자 / 제품 설명 비디오(터미널, 코드 또는 앱 화면이 있는 모든 것)에는 "small_style": "mono"를 설정하고, 일반 및 라이프스타일 비디오에는 "pill"을 설정합니다. "captions.chunks" 없이 실행하면 자동 초안(모든 곳에 작은 스타일, 훅에 하나의 히어로 초안)을 출력합니다. 편집하여 다시 붙여넣습니다. 세 가지 스타일이 있습니다:

  • mono [a, b, "mono", [accent word]]: 1–3단어, 터미널 타자기. 대문자 VT323이 거의 검은색 상자에 문자 입력 속도 30자/초로 성장하고, 하나의 의미 있는 키워드가 단색 액센트 블록에, 액센트 블록 커서(입력 중에는 고정, 입력 후 깜빡임)가 있습니다. assemble.py가 프레임별로 입력합니다.
  • pill [a, b, "pill"]: 1–3단어, 작은 Poppins Bold가 반투명 어두운 둥근 상자에: 기술 비디오가 아닌 경우 더 차분한 작은 스타일.
  • hero [a, b, "hero", [big word indices]]: 2–5단어 중 1–2개의 매우 큰 단색 단어(Archivo Black)가 위와 아래 작은 단어 사이에 있으며, 작은 스타일(알약 또는 정적 모노 상자)을 따릅니다. 큰 단어의 색상은 화자의 옷과 일치합니다: captions.py work/cam1080.mp4가 첫 번째 히어로 프레임에서 몸통을 샘플링하고 선택한 색상을 출력합니다. 옷 위에서도 읽힐 수 있도록 깊은 동일 색조 아웃라인이 있습니다. 선택이 잘못된 경우(복잡한 인쇄물, 셔츠 위에 재킷) "hero_color": "#RRGGBB"로 재정의합니다. 훅과 화자만 화면에 있는 중요한 라인(전체 캠 또는 분할의 카드)에서 사용하며, 절대 그래픽 위나 연속으로 두 번 사용하지 않습니다. 의미를 전달하는 단어(주장, 숫자 또는 혜택)를 선택하고 기능어는 사용하지 마십시오.

"cover": [line1, line2]를 설정합니다(사용자가 제공하지 않은 경우 훅에서 작성, 110px에서 라인당 약 14자). 레이아웃별로 "y"에 알약 중심과 "hero_y"에 히어로 블록 중심을 설정합니다.

  • 캡션은 절대 얼굴, 카드 가장자리 또는 비주얼 위에 위치해서는 안 됩니다.
  • 세로 소스의 경우 분할 간격이 얼굴이므로 몸통의 약 y 1660에 알약을 배치하고 실제 프레임에서 아웃트로를 확인합니다.
  • assemble.py가 두 스타일을 합성합니다.

7. 스토리보드 및 비트 테이블: 승인을 위해 중지

사용자가 계획을 보고 승인할 때까지 아무 것도 렌더링되지 않습니다.

  1. references/motion-library.md(사용자가 선별한 하우스 룩)에서 각 그래픽 비트의 모션 참조를 선택합니다. references/motion-prompts.md에는 전체 프롬프트 텍스트(작성자 크레딧 포함)가 있습니다; 인용된 각 ID의 블록을 읽습니다. 타사 갤러리를 긁어오지 마십시오. 라이브러리 항목은 사용자가 추가했으며 일부 사이트(예: prompt-motion.com)는 AI 크롤러를 차단합니다.
  2. 가르치는 내용에서 비디오의 액센트 컬러를 선택합니다: 주요 제품의 브랜드 색상(로고, 기본 버튼), 그렇지 않으면 주제에 어울리는 색상. "accent": {"color": "#RRGGBB", "why": "..."}를 작성하고 $PY $S/accent.py를 실행합니다. work/gfx/assets/accent.css(액센트 채우기, 4.5:1 텍스트 음영 및 밝은 밴드 틴트)를 작성하며, 모든 구성이 base.css를 통해 이를 가져옵니다. 구성에 액센트 16진수 값을 하드코딩하지 마십시오: var(--clay), var(--clayText) 및 var(--band)를 사용합니다. 히어로 캡션 색상은 별도입니다(옷에서 가져옴).
  3. project.json에 "beats"를 작성합니다, 런당 하나 이상: {"run": "R1", "t": 0.0, "visual": "...", "camera": "...", "sfx": "...", "refs": ["id"], "source": "real capture / rebuilt UI / logo"}. 선택적으로 "storyboard_notes": {"R1": "why this layout"}를 추가합니다.
  4. $PY $S/storyboard.py work/cam1080.mp4는 work/storyboard.html을 작성합니다: 런당 9:16 스케치(레이아웃 영역, 화자 프레임, 그래픽, 캡션 스타일 및 위치)와 비트 테이블(시간, 런, 레이아웃, 정확한 단어, 화면 동작, 카메라 이동, SFX, 모든 히어로 순간이 있는 캡션 스타일, 모션 참조, 소스)을 포함합니다.
  5. 사용자에게 표시(페이지에 액센트 견본과 선택 이유 표시): 아티팩트로 게시하거나 파일을 보내고 무엇을 볼지 한 줄로 알려줍니다. 그런 다음 턴을 종료하고 기다립니다. 변경 사항을 project.json에 적용하고 다시 생성하여 다시 표시합니다. 명확한 승인이 있을 때만 계속합니다.

8. 그래픽 (HyperFrames)

  1. assets/engine.js, assets/base.css, assets/accent.css, assets/fonts/ 및 assets/motion/을 work/gfx/assets/에 복사한 다음 (accent.py를 다시 실행하여 비디오별 액센트가 기본값을 대체하도록 함), hyperframes init에서 hyperframes.json을 추가합니다.
  2. 각 분할/비주얼 런당 하나의 work/gfx/compositions/<run key lowercase>.html을 작성합니다. data-duration은 런과 정확히 일치해야 합니다.
  3. 승인된 스토리보드에 표시된 대로 정확히 구축하며, 각 비트의 모션 참조와 일치시킵니다. references/examples/에서 가장 가까운 예제부터 시작합니다:
    • r1, r3, r5, r7: 단계와 푸시가 있는 분할 세계;
    • r2: 로고 잠금, 그런 다음 고정 프레임의 실제 캡처에 대한 채찍(whip)이 세척된 복제본 위에;
    • r4, r6, r9: 내부 카메라만 움직이는 제품 창;
    • cta: 투명 댓글 카드(CTA 스타일 A); cta_pill.html: 댓글 알약(CTA 스타일 B);
    • motion/*.html: 모션 구성 요소당 하나의 데모(커서, 유리, 모프, 플러드 + 아이리스, 마스크라이즈, 키네틱, 벽, 채찍; 설명-흐름, 설명-콜아웃, 설명-상태, 설명-루프); 아래 "모션 구성 요소" 및 "설명 구성 요소" 참조.

엔진 작동 방식과 중요한 규칙:

  • E.run(id, dur, render)는 하나의 일시 중지된 타임라인을 등록합니다. render(t)는 t의 순수 함수여야 합니다.
  • E.path는 월드 카메라 키프레임을 제공합니다. E.camera는 이를 적용하고 화면 속도를 따라 뷰포트를 블러링합니다(σ = 0.29·v·0.75/60, ≤ 40px, 정지 시 및 t = 0에서 0).
  • E.track 및 E.land는 객체별 속성(불투명도, x, y, scale, blur)을 애니메이션합니다. 피사계 심도: 이웃은 최대 14px 블러 및 70% 불투명도; 이전 히어로는 9px 및 40%.
  • 카메라 이동:
    • 글라이드: sine.inOut, 스케일 변경 ≤ 0.04;
    • 스텝: 0.5초 power3.inOut, 다음 항목을 명명하는 단어 0.25초 전 시작;
    • 푸시: 1.2–2초 power2.inOut, 최대 약 1.6×;
    • 풀백: 1–2초;
    • 채찍: 런당 최대 하나, 0.45초 아웃 power3.in, 0.6초 인 power3.out.
  • 프레임 0은 착지 상태, 선명함, 카메라 정지.
  • 제품 창이 주제인 동안에는 창 내부의 카메라만 움직입니다(1.15–1.4×, 0.4–0.7초 power2.inOut).
  • 콘텐츠 영역:
    • 분할은 콘텐츠를 y 40–900에 유지하고, 세계는 y 900에서 페이드 아웃;
    • 비주얼은 콘텐츠를 y 1230 위로 유지;
    • 프레임 0에서 인트로 그래픽은 y 620 아래에 유지(커버가 위에 있음).
  • 시각적 스타일:
    • 장면당 하나의 희박한 주제;
    • Poppins, 30px 미만 없음;
    • 거의 흰색 방사형 바닥과 세 겹 그림자;
    • 어두운 것 없음, 격자 없음;
    • 동작을 애니메이션하고 레이블을 지정하지 마십시오.
  • 모든 가시적인 소리 가치 있는 이벤트는 구성의 <script type="application/json" id="events">에 있어야 합니다(팝 / 클릭 / 차임 / 아이콘이 착지할 때 thud / 흰색 플래시용 플래시 / 채찍 중간점에서 whoosh / 키 / 틱, 런 기준). 오디오 단계에서 이를 읽으므로 SFX는 항상 정확한 시간에 배치됩니다.

9. 오디오

  1. $PY $S/sfx.py는 이벤트에서 SFX 위치를 읽고, 아첨의 6dB 범프로 각각을 합성합니다. work/sfx/에 :70ms의 따뜻한 808 킥 클릭(카드가 나타날 때), 짧은 하이햇 째깍(tick)(텍스트가 나타날 때), 0.2초 사이 퀵 딩(기능 단어), 1초 8분음표 4개를 130BPM의 둔탁한 808 톰(제품 창), 0.18초 440Hz 사인(플래시용) 등의 SFX가 있습니다.
  2. $PY $S/riser.py는 2초 라이저를 808 킥 디딤(또는 퀵 사이 퀑)으로 합성합니다.
  3. 음악: 합성 모드의 경우 $PY $S/music.py가 4 on the floor 킥(808 베이스 위), 130BPM, 변조, 3.5kHz 저역 통과, 화이트 노이즈 스네어를 갖춘 16마디 루프를 생성합니다. 파일 모드의 경우 work/stems/bgm.wav에 복사합니다.
  4. $PY $S/mix.py가 모든 트랙을 가져와 오디오 및 비디오를 믹싱하고 전환 곡선(리드 및 엔드에 20ms 부드러운 페이드)을 적용하며, 루프백 A/B 비교로 -14 LUFS를 목표로 합니다. ffmpeg의 필터 체인을 작성하고 edit/final.mp4를 렌더링합니다. --max-passes 3 실패 시 보고서에 적습니다.

10. 보고서

$PY $S/report.py가 edit/stems/REPORT.md를 기록합니다:

  • 기술 스펙(크기, 코덱, 비트 전송률, LUFS);
  • 타임라인에서 각 런의 시작과 끝;
  • 지연, 해결 방법, 눈에 띄는 편집 결정;
  • 실제 소스, 재구축된 UI, 로그인 장벽으로 인한 누락된 소스 목록;
  • 편집기에서 제공하지 않은 기본값 및 사용자 가정 목록;
  • 교차 확인된 주장 및 불일치 사항;
  • 스토리보드에서 승인되지 않은 변경 사항.

모션 구성 요소

assets/motion/ 파일(예제는 references/examples/motion/*.html):

  • cursor.html: 커서. 이동할 시간과 클릭할 시간을 전달합니다.
  • glass.html: 유리 패널. 아이콘, 텍스트 및 외부 모서리 반경을 전달합니다.
  • morph.html: 아이콘 A가 B로 변형됩니다. 두 개의 Path2D를 전달하고 시작 아이콘 색상(액센트에서)을 선택합니다.
  • flood.html: 색상 홍수(액센트) + 동심원 아이리스. 아이콘, 텍스트 및 활성화 시간을 전달합니다.
  • maskrise.html: 위에서 마스크가 올라오면서 아래에서 나타납니다. 아이콘(투명 PNG)과 텍스트를 전달합니다.
  • kinetic.html: 포스터 스타일로 큰 단어가 차례로 나타납니다. 단어 배열을 전달합니다.
  • wall.html: 타일이 행/열로 나타나는 벽입니다.
  • whip.html: 채찍 컷. 전환 시간을 전달합니다.

설명 구성 요소

references/examples/motion/explain-*.html(예제):

  • explain-flow.html: 화면 상단의 단순화된 다이어그램..
  • explain-callout.html: 스크린샷/UI 위의 타이포그래피 콜아웃.
  • explain-status.html: 고정된 창의 상태 표시등.
  • explain-loop.html: 루프 다이어그램 화살표.

경고

조사와 웹 디버깅은 일회성 조치입니다. 모든 도구를 설치한 프로젝트에서 한 번만 수행하십시오. 계속해서 하면 안 됩니다.

사용자에게 질문하는 것은 단계 0b와 7에서만 가능합니다. 그 외에는 사용자를 기다리지 마십시오. 예외: 누락된 파일, 읽을 수 없는 파일, 중대한 오류. 추측하고 계속 진행하며 보고서에 기록합니다.

다른 시간에는 리소스를 사용하지 마십시오. 8코어 Mac에서도 병목 현상이 발생합니다. 단계를 병렬로 실행하지 마십시오. 대화 시작 시 setup.sh를 실행하고 완료될 때까지 기다리십시오.

관련 스킬