Mean-Says/tutorial-video

Tutorial Video (튜토리얼 비디오)

"사람들에게 이걸 사용하는 법을 가르쳐줘"를 MP4 폴더로 변환합니다. Claude는 감독, 시나리오 작가, 조작자 및 편집자의 역할을 수행합니다. 사용자는 계획과 대본을 승인하고 결과를 확인만 하면 됩니다.

작동 방식 (그리고 그 이유)

도구 이해 → 인터뷰 → 대본 (승인) → 녹화 없는 리허설
   → 화면 보정 → 각 비디오 녹화 → tut prepare → tut plan/stills → tut render → delivery/

아키텍처는 세 가지 문제점을 해결하도록 설계되었습니다. 이를 이해하면 아래의 거의 모든 규칙을 설명할 수 있습니다.

1. 확장 프로그램의 클릭이 시스템 마우스를 움직이지 않습니다. 화면 녹화에는 커서가 없습니다. 따라서 페이지에 주입된 recorder.js가 각 클릭, 키 입력 및 탐색이 발생한 위치와 시간을 기록하고, 커서, 클릭 효과, 확대 및 콜아웃은 나중에 편집 시 그려집니다. 편집기는 미래를 알기 때문에 커서는 클릭 전에 버튼 위로 미끄러지고 카메라는 동작 전에 확대됩니다.
2. 비디오와 이벤트 동기화. 각 테이크의 시작과 끝에서 __tut.flash()가 페이지를 0.5초 동안 마젠타색으로 칠합니다. 편집기는 비디오에서 이 플래시를 찾아 정확한 시간(페이지 시계 → 비디오 시간)과 화면에서 페이지의 정확한 사각형(레티나 좌표 또는 여러 모니터 좌표 계산 불필요)을 알아냅니다.
3. Claude는 작업 사이에 느립니다. 원시 비디오에는 긴 정적 구간이 있습니다. 편집기는 이러한 구간(동일한 프레임이므로 컷이 보이지 않음)을 잘라내고, 움직임이 있는 대기 시간을 가속화하며, 자막을 읽는 데 필요한 시간 동안 최종 결과를 정지시킵니다. 따라서 녹화 중에는 서두르지 마십시오. 서두르면 오류만 발생합니다.

아래에서 사용되는 경로:

• SKILL_DIR: 이 스킬의 폴더 (이 파일이 있는 곳).
• TUT="$SKILL_DIR/scripts/tut", REC="$SKILL_DIR/scripts/rec.sh", WIN="$SKILL_DIR/scripts/chrome-window.sh".
• SERIE: 시리즈 폴더, 기본값은 현재 디렉토리의 ./tutoriais/<slug-da-serie>/입니다 (사용자가 다른 위치를 선호하는지 물어보십시오).

모든 tut 명령은 마지막에 RESULT {json} 한 줄을 출력합니다. 이 줄을 읽어 다음 단계를 결정하십시오.

0단계: 사전 요구 사항 (세션당 한 번)

1. $TUT doctor를 실행하십시오. 처음 실행 시 엔진(Remotion)을 설치하고, 첫 번째 렌더링 시 헤드리스 Chrome(~140MB)을 다운로드합니다.
2. Claude in Chrome 도구를 단일 ToolSearch 호출로 로드하십시오: select:mcp__claude-in-chrome__tabs_context_mcp,mcp__claude-in-chrome__tabs_create_mcp,mcp__claude-in-chrome__navigate,mcp__claude-in-chrome__computer,mcp__claude-in-chrome__javascript_tool,mcp__claude-in-chrome__find,mcp__claude-in-chrome__read_page. 확장 프로그램이 연결되지 않은 경우 사용자에게 /chrome을 실행하도록 요청하십시오. 확장 프로그램 없이는 녹화가 불가능합니다.
3. 사용자에게 컴퓨터에서 발생할 일을 한 번 알려주십시오: macOS가 터미널 앱에 대한 화면 녹화 권한과 Chrome에 대한 자동화 권한(창 위치 조정용)을 요청합니다. 녹화 중에는 방해 금지 모드를 켜고 마우스나 창을 건드리지 말아야 합니다.

1단계: 도구 이해

질문하기 전에, 가르칠 내용을 먼저 연구하십시오. 좋은 질문은 이에 달려 있습니다.

• 로컬 프로젝트(저장소)가 있는 경우: README와 문서, 라우트와 페이지, 탐색 메뉴, 양식 및 온보딩을 읽으십시오. 코드 관점이 아닌 최종 사용자 관점의 기능 목록을 작성하십시오("채용 공고 만들기", "동료 초대하기").
• URL인 경우: Claude in Chrome으로 탐색하고, filter: "interactive"와 함께 read_page를 사용하여 주요 화면을 읽고 메뉴를 여십시오.

결과: 시청자가 수행할 수 있는 작업의 간단한 지도와 각 작업의 시작 화면. 자세한 내용은 references/roteiro.md를 참조하십시오.

2단계: 인터뷰 및 시리즈 계획

AskUserQuestion을 사용하십시오. 각 질문에는 1단계의 지도에서 가져온 구체적인 옵션과 권장 사항이 포함되어야 합니다. 사용자가 답변을 직접 만들어내지 않아도 됩니다. 사용자와 함께 결정하십시오:

• 대상 및 수준 (누가 보는지, 이미 무엇을 알고 있는지).
• 시리즈의 목표 (온보딩, 지원 문의 감소, 영업 데모, 내부 교육).
• 가르칠 내용: 지도의 작업을 다중 선택으로.
• 비디오 수. 직접 제안하십시오: 비디오 하나 = 하나의 결과 ("채용 공고 게시 방법"), 30초3분, 38단계.
• 시각적 스타일: aurora(어두움), grafite 또는 claro 프리셋, 브랜드 색상 및 로고.
• 녹화 환경: URL, Chrome에 이미 로그인된 데모 계정, 가상 데이터, 절대 표시되어서는 안 되는 것.

그런 다음 시리즈 계획(표: 번호, 제목, 결과, 예상 시간)을 보여주고 승인을 기다리십시오.

3단계: 대본 (승인 게이트)

SERIE/serie.json과 비디오당 하나의 SERIE/videos/<NN-slug>/roteiro.json을 references/roteiro.md의 스키마와 텍스트 규칙에 따라 작성하십시오. 가장 중요한 사항:

• 각 단계에는 명령형의 짧은 titulo(화면에 크게 표시됨), 선택적 texto(위치 또는 이유), 실행할 acoes 및 resultado_esperado가 있습니다.
• 인터페이스 이름은 화면에 표시된 그대로 정확하게 작성하십시오. 시청자는 그 텍스트를 찾습니다.

$TUT validate SERIE를 실행하고 사용자에게 각 대본의 읽기 쉬운 표를 보여주십시오. 승인 전에는 절대 녹화하지 마십시오. 다시 녹화하는 것은 다시 작성하는 것보다 훨씬 비용이 많이 듭니다.

4단계: 리허설 (녹화 없이)

각 비디오에 대해 Chrome에서 단계를 녹화 없이 실행하십시오. 이렇게 하면 작동하는 선택자와 참조, 예상치 못한 팝업, 느린 로딩 및 준비되어야 할 것(데이터, 로그인)을 발견할 수 있습니다. 그 후:

• 시스템을 초기 상태로 되돌리십시오(사용자가 동의하는 경우 리허설 중에 생성된 데이터를 삭제하십시오).
• 로그인이 필요한 경우 사용자에게 수동으로 로그인하도록 요청하십시오. 절대 비밀번호를 입력하지 말고 로그인 화면을 녹화하지 마십시오.
• 일치하지 않는 부분이 있으면 대본을 조정하십시오(그리고 변경 사항을 사용자에게 알리십시오).

5단계: 창 준비 및 보정 (시리즈별, 또는 창이 변경된 경우)

references/gravacao.md의 "Janela e calibração" 섹션을 따르십시오. 요약:

1. recorder.js를 주입하십시오.
2. __tut.windowPlan(1280, 720)을 실행하십시오. 반환되는 마커와 경계를 사용하여 $WIN <marker> <bounds...>를 실행하십시오.
3. 전체 화면으로 몇 초를 플래시와 함께 녹화하십시오: $REC start SERIE/.tut/calibracao --full → __tut.flash() → $REC stop ....
4. $TUT calibrate SERIE를 실행하고 생성된 viewport.png를 확인하십시오.

이미지에는 페이지 영역만 표시되어야 하며, 브라우저 툴바, 다른 창, 테두리 또는 확장 프로그램 경고가 없어야 합니다. 테두리가 나타나면 captura.json에서 insets를 구성하십시오.

6단계: 각 비디오 녹화

전체 프로토콜은 references/gravacao.md에 있습니다. 테이크의 기본 구조:

$REC start SERIE/videos/<id>/take-1          # 페이지 영역만 녹화 (보정된 자르기)
javascript_tool: __tut.flash()                # 초기 플래시 (동기화)
각 단계에 대해:
  javascript_tool: __tut.mark('start:<passo>')
  작업 실행 (computer: left_click / hover / key; __tut.type으로 입력)
  중요한 부분 강조: __tut.callout('텍스트 또는 선택자', '짧은 레이블')
  결과가 화면에 나타날 때까지 기다림
  javascript_tool: __tut.mark('end:<passo>')
javascript_tool: __tut.flash()                # 최종 플래시 (시계 드리프트 보정)
javascript_tool: __tut.dump()  →  $TUT save-events SERIE/videos/<id>/take-1   (stdin을 통한 JSON)
$REC stop SERIE/videos/<id>/take-1
$TUT prepare SERIE/videos/<id>/take-1

재녹화를 방지하는 규칙:

• 전체 페이지 로드 후에는 항상 recorder를 다시 주입하십시오. 이전 이벤트는 탭 세션에 저장됩니다. 다른 도메인으로 이동하기 전에 dump와 save-events를 수행하십시오.
• 단계 중간에 오류가 발생하면 __tut.mark('abort:<passo>')를 사용하고, 이전 상태로 돌아간 후 start:<passo>로 다시 시작하십시오. 마지막 완료된 시도만 유효합니다. 이 때문에 녹화를 중단하지 마십시오.
• 입력할 때는 필드를 클릭한 후 __tut.type('텍스트')를 선호하십시오(텍스트가 한 글자씩 나타납니다). computer type은 텍스트가 한 번에 나타납니다.
• 스크롤할 때는 __tut.scrollTo('텍스트 또는 선택자')를 선호하십시오(부드러운 스크롤). 편집기가 잘라내므로 일시 중지는 문제가 되지 않습니다. 서두르지 마십시오.
• alert / confirm을 실행하지 마십시오: 이것들은 확장 프로그램을 중단시킵니다. 단계에 "삭제"가 필요한 경우 미리 사용자에게 알리십시오.

7단계: 편집 및 검토

$TUT prepare SERIE/videos/<id>/take-N    # 자르기, 동기화, 움직임 측정 → take.json
$TUT stills  SERIE <id>                  # videos/<id>/qc/stills.jpg에 있는 스틸의 평면도 및 그리드

렌더링하기 전에 스틸 그리드를 확인하십시오(이미지를 읽음). 다음을 확인하십시오:

• 커서와 클릭 파동이 올바른 요소 위에 있는지;
• 콜아웃이 요소를 감싸는지;
• 자막이 화면 내용과 일치하는지;
• 확대가 빈 영역에 있지 않은지;
• 민감한 데이터가 표시되지 않는지.

대본(텍스트)을 수정하거나 문제가 있는 단계만 take-2로 다시 녹화하십시오. 계획은 해당 단계가 완료된 최신 테이크를 사용합니다. 그런 다음:

$TUT render SERIE <id>                   # → SERIE/delivery/<id>.mp4 + 챕터 + contact sheet

최종 확인을 위해 contact sheet(delivery/<id>.sheet.jpg)를 여십시오. 시각적 조정(테마, 확대/축소, 배경 음악, 인트로 및 아웃트로)은 references/edicao.md에 있습니다.

8단계: 전달

1. $TUT deliver SERIE를 실행하십시오. YouTube에 붙여넣을 준비가 된 제목, 길이 및 챕터가 포함된 delivery/LEIAME.md를 생성합니다.
2. 사용자에게 delivery/ 폴더와 요약(비디오, 길이, 포함된 내용)을 보여주십시오.
3. 파일을 보낼 수 있다면 첫 번째 MP4를 보내십시오.
4. $TUT clean SERIE를 실행하기 전에 물어보십시오. 이 명령은 원시 녹화 파일 raw.mkv를 삭제하여 공간을 확보합니다.

원칙

• 대본이 명령하고, 녹화가 따릅니다. 실제 인터페이스가 대본과 다르면 중단하고 사용자와 함께 대본을 조정하십시오. 녹화 중에 즉흥적으로 하지 마십시오.
• 한 단계 = 화면의 한 아이디어. 자막에 두 문장이 필요하다면 아마도 두 개의 단계일 것입니다.
• 보여주고, 말하지 마십시오. 콜아웃을 사용하여 요소를 가리키십시오. 자막은 동작의 이름만 지정합니다.
• 기본적으로 개인 정보 보호. 페이지 영역만 녹화하고, 가상 데이터가 있는 데모 계정을 사용하며, 주소 표시줄에 쿼리 문자열을 표시하지 마십시오. 녹화 전에 표시되지 않아야 할 것을 닫으십시오.
• 눈으로 결과를 확인하십시오. 스틸과 contact sheet는 직접 확인하기 위해 존재합니다. 확인하지 않고 비디오가 괜찮다고 사용자에게 말하지 마십시오.

참조

• references/roteiro.md: 도구 발견, 시리즈 설계, 인터뷰 질문, serie.json 및 roteiro.json 스키마, 텍스트 규칙, 예제.
• references/gravacao.md: 창, 보정, 단계별 테이크, __tut API, 오류 복구 및 Claude in Chrome과 macOS의 함정.
• references/edicao.md: 편집기가 컷, 확대/축소 및 커서를 결정하는 방법, 테마 및 오디오 옵션, QC 체크리스트 및 문제 해결.