SyncTake Coding Agent Skill
이 스킬은 코딩 에이전트(Claude Code, Cursor, Antigravity, OpenCode, Codex)가 웹 애플리케이션의 내레이션이 포함된 세련된 워크스루 동영상을 자율적으로 제작하는 방법을 안내합니다.
🎯 이 스킬을 활성화해야 하는 경우
사용자가 다음과 같은 요청을 할 때 이 워크플로우를 활성화하십시오:
- "이 프로젝트/기능의 데모 동영상/워크스루를 만들어 줘"
- "앱이 어떻게 작동하는지 보여주는 동영상을 녹화해 줘"
- "이 새 UI의 30초/60초 워크스루 동영상을 만들어 줘"
- "이 기능을 내레이션과 함께 동영상으로 소개해 줘"
🛠️ 0단계: 환경 및 종속성 확인
워크플로우를 실행하기 전에 필요한 도구가 설치되어 있는지 확인하십시오:
- SyncTake CLI 확인:
synctake --help || pip install -e /path/to/synctake - Playwright 확인(자동 헤드리스 캡처용):
python -c "import playwright" 2>/dev/null || (pip install playwright && playwright install chromium)
📋 5단계 자율 에이전트 플레이북
[1. UI 검사] ──> [2. synctake.json 작성] ──> [3. 개발 서버 시작] ──> [4. 자동 파이프라인 실행] ──> [5. 동영상 전달]
1단계: 코드베이스 및 UI 랜드마크 검사
- 워크스페이스에서 라우트, 컴포넌트 및 HTML 뷰(예:
src/,pages/,app/,public/index.html)를 검색합니다. - 동영상의 주요 시각적 랜드마크를 식별합니다:
- 헤더, 내비게이션, 히어로 (
#hero,header,.brand) - 대화형 컴포넌트, 폼, 버튼 (
#deploy-btn,button[type='submit'],select) - 카드, 메트릭, 그래프 (
[data-testid='metrics'],.card,.recommendation-grid)
- 헤더, 내비게이션, 히어로 (
- 또는 내장 UI 검사기를 실행합니다:
synctake plan ./public/index.html --prompt "<사용자 지침>" --duration <초>
2단계: 워크스루 사양 작성 (synctake.json)
프로젝트 루트에 synctake.json을 생성합니다.
페이싱 및 스크립팅 규칙:
- 분당 단어 수: 140~150 WPM(초당 약 2.4단어)을 목표로 합니다. 10초 장면에는 약 20~24단어가 포함되어야 합니다.
- 장면 타임스탬프(
at): 엄격하게 증가해야 합니다. - 화면 콜아웃:
title과callout은 짧고 간결하게 유지하십시오(네이티브 플로팅 카드로 표시됨). - 초점: 실제 유효한 CSS 선택자(
#id,.class,[data-testid='...'])를 사용하십시오. - 내레이션: 자연스럽고 대화체로 작성하십시오. 원시 코드 기호, 선택자 또는 타임스탬프를 절대 소리 내어 읽지 마십시오.
{
"title": "기능 워크스루",
"duration_seconds": 30.0,
"voice": {
"provider": "system"
},
"scenes": [
{
"id": "01-overview",
"at": 0.0,
"title": "실시간 클러스터 개요",
"callout": "지역별 실시간 상태 및 원격 측정 메트릭",
"focus": "#metrics-card",
"text": "환영합니다! 이 워크스루에서는 실시간 클러스터 상태 및 자동 복구에 대해 알아보겠습니다."
},
{
"id": "02-actions",
"at": 12.0,
"title": "원클릭 배포",
"callout": "사용자 승인을 통한 자동 검증",
"focus": "#deploy-btn",
"text": "단 한 번의 클릭으로 당사 파이프라인이 구성 변경 사항을 검증하고 롤링 업데이트를 적용합니다."
}
]
}
3단계: 개발 서버가 실행 중인지 확인
웹 애플리케이션의 개발 서버가 로컬 포트에서 이미 수신 대기 중인지 확인하십시오:
lsof -i :3000 -i :5173 -i :8000 || true
실행 중이 아닌 경우 백그라운드에서 실행하십시오:
- 정적 HTML의 경우:
python3 -m http.server 5173 --bind 127.0.0.1 - Vite의 경우:
npm run dev - Next.js의 경우:
npm run dev
4단계: 자동 파이프라인 실행
올인원 자동 실행 명령을 실행하십시오:
synctake run \
--url http://127.0.0.1:5173 \
--config ./synctake.json \
--out ./demo.mp4
사용자가 음성 참조 클립(예: voice.wav)을 제공한 경우 --ref-audio ./voice.wav를 전달하여 음성을 복제하십시오.
synctake run이 자동으로 수행하는 작업:
- 헤드리스 화면 캡처: Playwright를 통해 Chromium을 실행하고, 장면 큐를 단계별로 수행하며, 호스트 적응형 포커스 링으로 요소를 강조 표시하고, 네이티브 콜아웃 배지를 표시하며, 보정된 WebM을 저장합니다.
- 음성 합성: 명확한 음성 영어를 합성하거나(또는 사용자 음성 복제) 합니다.
- 페이싱 및 슬롯 검증: 어떤 오디오 클립도 할당된 장면 지속 시간을 초과하지 않는지 확인합니다.
- 마스터 캔버스 조립: 클립을 정확한 큐에 배치하고, 일시 정지를 디지털 침묵으로 채우며, 보정된 48kHz 스테레오 오디오를 출력합니다.
- 무손실 먹싱: 오디오를 방송 표준(-16 LUFS)으로 정규화하고 제로 세대 비디오 손실로 1080p H.264 MP4로 먹싱합니다.
5단계: 완성된 동영상 전달
synctake run이 완료되면:
- 출력 동영상이 존재하고 비어 있지 않은지 확인합니다(
ls -lh ./demo.mp4). - 완성된 동영상 산출물을 절대 파일 경로 링크와 함께 사용자에게 제시합니다:
"완성된 워크스루 동영상입니다: demo.mp4!"