시스템 교육 비디오
웹 시스템의 실제 사용을 녹화하여 완성된 교육 비디오로 변환합니다: 각 챕터별 짧은 비디오 하나와 챕터 마커가 포함된 전체 비디오 하나를 생성합니다. 음성은 없습니다. 짧은 호출(callout)이 무슨 일이 일어나고 있는지와 그 이유를 설명합니다.
각 부분이 실제 녹화 문제를 해결하므로 방법은 고정되어 있습니다. 시스템마다 모양만 변경됩니다.
| 모든 시스템에서 동일하게 유지되는 요소 | 시스템 자체에서 가져오는 요소 |
|---|---|
| 1920 × 1080 비디오, 초당 30프레임, MP4 | 페이지에서 읽어온 카드 및 호출 색상 |
| 타이틀 카드: 로고, 키커, 제목, 한 줄, 컬러 밴드 | 하이라이트, 화살표 및 클릭 링 색상 |
| 화살표가 있는 호출 상자 및 요소 하이라이트 | 제목 및 본문 폰트 (웹 폰트 포함) |
| 모서리의 'n / N 단계' 카운터 | 버튼에서 가져온 모서리 둥글기 |
| 느린 커서, 클릭 링, 부드러운 확대/축소, 로딩 시 점프 컷 | 로고 |
| 코드로 생성된 음향 효과 | 배경에 따른 밝거나 어두운 호출 스타일 |
| 전체 비디오의 검은 챕터 카드 및 마커 | 언어 및 오른쪽에서 왼쪽 텍스트 |
규칙 및 존재 이유
- 가상 데이터만 포함된 로컬 복사본. 스크립트는 실제로 클릭하고 저장하며, 비디오는 누구와도 공유할 수 있습니다. 엔진은 로컬이 아닌 주소를 거부합니다. 오직 시스템 소유자만
allowRemote: true를 설정할 수 있으며, 실제 데이터가 없는 테스트 서버에 대해서만 설정 가능합니다. 실제 시스템을 가리키지 말고, 실제 사람의 이름, 이메일 또는 문서를 절대 표시하지 마십시오. - 애플리케이션은 변경되지 않습니다. 모든 것은 프로젝트의
video-tour/폴더에 있으며, 자체 패키지를 가지고 있습니다. 애플리케이션을 변경하지 않고는 작업을 보여줄 수 없다면, 해당 작업을 생략하고 보고하십시오. - 비디오는 저장소 외부에 보관됩니다. 저장소 외부의 폴더에 저장됩니다.
- 프로젝트 자체 규칙을 따르십시오. 먼저
CLAUDE.md또는 유사한 파일을 읽으십시오. 소유자가 git을 실행한다고 명시되어 있으면 git을 실행하지 마십시오. 작은 머신에서는 한 번에 하나의 무거운 작업만 실행하십시오. - 시스템이 할 수 없는 것을 가장하지 마십시오. 오늘 날짜, 외부 서비스 또는 변경되는 답변(챗봇)이 있는 기능에 의존하는 작업은 생략하고 보고하십시오. 녹화 전에 준비된 모든 데이터는 보고서에 공개됩니다.
1단계: 필요한 것을 한 번에 수집
먼저 프로젝트를 확인하십시오: README, package.json, 문서, 시드 데이터, 테스트 계정. 그런 다음 여전히 누락된 항목을 한 번에 질문하고, 첫 번째 정지가 있을 때까지 다시 질문하지 마십시오.
- 시스템을 로컬로 시작하는 방법 및 주소.
- 테스트 데이터를 초기화하는 방법. 초기화하지 않으면 챕터가 서로의 데이터와 충돌합니다.
- 비디오에 필요한 각 역할에 대한 테스트 계정.
- 비디오 대상. 이는 중요한 작업과 카드에 표시될 단어를 결정합니다.
- 호출의 언어. 기본값: 시스템 화면의 언어.
- 비디오가 저장될 위치. 기본값: 프로젝트 옆 폴더.
2단계: 시스템 학습 및 챕터 계획 수립
라우트, 메뉴 및 사용자 문서를 읽고 실행 중인 시스템의 페이지를 여십시오. 그런 다음 챕터 계획을 작성하십시오: 각 사람이 실제로 작업하는 영역에 대해 하나의 챕터, 화면 둘러보기가 아닌 실제 작업("주문을 생성하고 승인을 위해 보내기")을 중심으로 구성하십시오. 챕터는 일반적으로 26단계로 구성되며 14분 동안 실행됩니다. '시작하기' 챕터로 시작하십시오. 생략할 내용을 이유와 함께 나열하십시오.
3단계: 설정 및 시스템 모양 읽기
node ~/.claude/skills/system-training-videos/scripts/init.mjs <project folder> --out "<video folder>"
cd <project folder>/video-tour && npm install && npx playwright install chromium
video-tour/tour.config.mjs의 모든 TODO를 채우십시오. 다음 명령(이를 사용함)을 실행하여 로그인이 작동하는지 확인하십시오:
node video-tour/tour.mjs brand
이 명령은 시스템을 방문하여 모양을 읽고, theme.json과 로고를 작성하며, <video folder>/_work/brand/에 네 개의 미리보기(title-card.png, chapter-card.png, callout.png, counter.png)를 저장합니다. 네 개를 모두 확인하십시오. 색상 감지는 추측일 뿐 확실하지 않으므로, 시청자의 관점에서 평가하십시오: 이게 시스템처럼 보입니까? 올바른 로고가 있습니까? 제목이 실제 폰트로 표시됩니까? 구성에서 theme으로 잘못된 것을 수정한 다음 brand를 다시 실행하십시오. references/theme-and-config.md를 참조하십시오.
4단계: 챕터 1, 그 다음 승인 한 번
챕터 1을 작성한 다음(먼저 references/writing-chapters.md 읽기):
node video-tour/tour.mjs make 1
make는 데이터를 초기화하고, 빠른 리허설을 수행하고, 다시 초기화한 다음, 녹화, 빌드 및 검사를 수행합니다. 출력되는 스틸 이미지와 연락처 시트를 확인하십시오.
그런 다음 멈추고, 소유자에게 챕터 계획, 생략된 작업 및 스틸 이미지를 보여주십시오. 이것이 유일한 승인입니다. 지금 모양이나 계획을 변경하는 것은 저렴하지만, 전체 시리즈 이후에는 비용이 많이 듭니다. 승인 후에는 멈추지 않고 시리즈를 완료하십시오.
5단계: 나머지 챕터
각 챕터에 대해: 작성하고, make를 실행하고, 연락처 시트를 확인하십시오. check는 측정 가능한 것(2.5초 미만의 호출, 카메라에 포착된 로딩 화면, 브라우저 오류, 사운드 레벨)을 잡아냅니다. 의미를 이해할 수는 없으므로 직접 프레임을 읽어 다음을 확인하십시오:
- 잘못된 요소에 있거나 화면 가장자리에서 잘린 호출;
- 시청자가 봐야 할 것을 가리는 호출, 카운터 또는 팝업;
- 오류 메시지, 빈 페이지 또는 가상이 아닌 모든 것;
- 보여줘야 할 것을 잘라내는 확대/축소.
시트에서 의심스러운 것이 있으면 전체 프레임 하나를 추출하십시오: ffmpeg -ss 20 -i chapter.mp4 -frames:v 1 frame.png.
두 번의 수정 후에도 챕터가 여전히 실패하면, 해당 챕터를 건너뛰고 보고한 후 계속 진행하십시오. 이전에 본 문제는 references/troubleshooting.md에 있습니다.
6단계: 전체 비디오
모든 챕터가 빌드되고 시스템이 실행 중일 때:
node video-tour/tour.mjs join
이 명령은 시작 카드, 각 챕터 앞의 검은 카드, 종료 카드, 챕터 마커 및 chapters.txt("00:00 Title" 형식, YouTube 준비)가 포함된 <name>-training.mp4를 작성합니다. 길이와 마커를 확인하십시오:
ffprobe -v error -show_entries chapter=start_time:chapter_tags=title -of csv=p=0 <full video>
7단계: 보고서
기술적이지 않은 사람을 위해 짧은 문장으로 작성하십시오:
- 각 챕터와 전체 비디오의 경로 및 길이를 표로.
- 챕터당 하나의 스틸 이미지가 있는 폴더.
- 시작 시간이 포함된 챕터 목록.
- 생략되거나 건너뛴 내용과 이유.
- 녹화 전에 준비되었지만 비디오에 표시되지 않는 데이터.
- 확인하고 받아들인 작은 시각적 결함.
- 사운드를 직접 듣지 않고 측정하여 확인했으므로, 공유하기 전에 한 챕터를 사람이 들어야 한다는 점.
그런 다음 시작한 서버를 중지하십시오.
참조 파일
references/writing-chapters.md: 챕터를 작성하기 전에 읽으십시오. 모든 동작, 비디오를 깔끔하게 유지하는 패턴, 호출 작성 방법.references/theme-and-config.md: 설정,brand가 읽는 내용, 모양을 수정하는 방법.references/troubleshooting.md: 녹화가 실패하거나 프레임이 잘못 보일 때 읽으십시오.