altacrest/motion-how-to-video

Claude Motion을 사용한 내레이션 포함 사용 방법 동영상

Novacrest 마케팅 팀이 사용 방법 및 문서 동영상을 제작하는 방식입니다: 앱의 실제 화면, 부드럽게 움직이는 커서, 각 단계별 짧은 캡션, 각 캡션을 읽어주는 영어 음성, 완성된 하나의 MP4 파일. 이는 OmniOrders 빠른 시작 동영상(2026년 10월)에서 시작되었습니다.

동영상 제작에 필요한 모든 것은 이 스킬과 함께 제공됩니다(경로는 이 파일 기준 상대 경로입니다):

• engine/shared.js 및 engine/base.css: 스크린샷 엔진(SS)과 그 스타일. 메모리에서 다시 빌드하지 마십시오.
• examples/how-to-film/: 참조 동영상 "Make a how-to video with Claude Motion"(2026년 10월 27일)의 모든 장면 모듈, lines.json, scenes.json 및 shots.json이 포함되어 있습니다. 장면을 작성하기 전에 읽어보십시오: 각 SS.def 옵션의 사용 예를 보여줍니다.
• scripts/voice.py: 내레이션. ElevenLabs API, 캡션당 하나의 MP3, Whisper가 설치된 경우 확인합니다. 사용자 자신의 터미널에서 실행됩니다.
• scripts/mix.py: 각 클립을 해당 캡션 아래에 배치하고 완성된 MP4를 작성합니다(ffmpeg 필요).

엄격한 규칙

• 실제 화면만 사용하고, 앱에서 캡처해야 합니다. 앱 UI를 다시 그리지 마십시오: 첫 번째 빠른 시작 동영상에서 그린 화면이 적발되었습니다. 명령을 보여주는 일반 카드는 괜찮지만, 앱이나 터미널 창을 그린 복사본은 안 됩니다.
• 테스트 계정을 사용하십시오. 실제 고객 데이터, 키, 토큰 또는 비밀번호를 화면에 표시하지 마십시오: 패치로 가리거나 테스트 계정의 더미 값을 사용하십시오. 사용자를 대신하여 로그인하지 말고, 사용자에게 로그인하도록 요청하십시오.
• 내레이션은 영어(미국)이며, 캡션이 대본입니다: 단계당 하나, 누구나 따라할 수 있는 평범한 단어, 약 12단어 이내, 대시(em dash)를 사용하지 마십시오. 음성이 각 캡션을 단어 그대로 읽습니다. 음성이 단어를 잘못 발음하는 경우 say.json에 구두 재철자를 넣으십시오. 캡션은 원래대로 유지됩니다.
• 비디오를 음성에 맞추기 위해 늘리지 마십시오. 캡션은 해당 클립에 맞춰 시간이 조정됩니다(4단계). 여전히 길게 실행되는 클립은 약간 속도를 높이거나(최대 1.15배, mix.py에서 허용), 라인을 짧게 하고 다시 음성화합니다.
• 파일럿을 먼저 진행하십시오: 첫 번째 장면의 라인을 음성화하고 나머지 작업 전에 확인하고, 음성이나 대본이 변경된 후에도 다시 확인하십시오.
• LLM이 음성을 평가하지 않습니다. voice.py는 faster-whisper가 설치된 경우 Whisper(단어 오류율)로 각 클립을 평가하고, 그렇지 않으면 사용자가 듣습니다.
• 채팅에서 API 키를 요청하거나, 출력하거나, 붙여넣지 마십시오. ElevenLabs 키는 사용자 컴퓨터의 파일에만 저장됩니다.
• 파일을 다운로드하기 전에, 파일 이름과 출처를 묻고 다운로드하십시오.

음성이 사용자 터미널에서 실행되는 이유: Claude의 작업 공간과 사용자 컴퓨터의 Claude 쉘은 ElevenLabs에 도달할 수 없으며(Novacrest 네트워크 허용 목록이 api.elevenlabs.io와 elevenlabsusercontent.com을 차단함, 2026년 11월 12일 확인), 키는 채팅을 통해 전달되지 않습니다. Claude가 모든 것을 준비하고 사용자가 하나의 명령을 붙여넣습니다. ElevenLabs 커넥터(사용자 지정 커넥터, https://api.elevenlabs.io/v1/mcp)는 키 없이 음성을 생성할 수 있지만, 오디오가 elevenlabsusercontent.com 링크로 반환되어 작업 공간에서 다운로드할 수 없으므로 여기서 사용되지 않습니다. 관리자가 해당 두 도메인을 허용하면 이 부분을 재검토하십시오.

1단계: 범위 및 캡션

한 번에 누락된 것만 물어서 다음을 얻으십시오: 흐름(예: "OmniOrders에서 송금 생성"), 앱 및 해당 테스트 계정, 동영상이 사용될 위치(문서 페이지, 빠른 시작, YouTube) 및 제품 색상. 단계 목록과 단계당 하나의 캡션, 제목 줄과 종료 줄을 lines.json({"id": "caption"}, 영화 순서대로, open, ask-a, ask-b, end와 같은 id 사용)으로 작성하십시오. 음성이 잘못 발음할 수 있는 단어(OmniOrders를 "Omni Orders"로, 대시가 포함된 리포지토리 이름)가 있는 줄에만 say.json({"id": "spoken text"})을 추가하십시오. 채팅에서 사용자에게 캡션을 보여주고, 사용자가 변경하지 않는 한 계속 진행하십시오.

2단계: 내레이션 시작

캡션이 확정되는 즉시 시작하고, 캡션을 진행하는 동안 캡처 및 빌드를 수행합니다.

1. 사용자 컴퓨터에 영화 폴더를 만듭니다: ~/Downloads/<film-slug>/에 lines.json, say.json(있는 경우) 및 scripts/voice.py의 복사본을 넣습니다. 연결된 폴더가 있는 경우 device_bash를 사용하여 거기에 씁니다. 연결된 폴더가 없는 경우 SendUserFile로 파일을 보내고 사용자에게 하나의 폴더에 넣도록 요청합니다.
2. 처음에 사용자는 Text to Speech 액세스 권한이 있는 ElevenLabs API 키가 필요합니다(README, "ElevenLabs"). ~/.config/elevenlabs/env가 존재하는지 확인하십시오(파일을 테스트하고, 절대 읽지 마십시오). 존재하지 않는 경우 설정 줄로 아래 블록을 시작하십시오.
3. 사용자에게 터미널용 복사-붙여넣기 블록 하나를 제공하십시오:

   cd ~/Downloads/<film-slug>
   python3 voice.py setup        # 처음 한 번만: 키를 묻는 메시지가 나타나면 붙여넣으십시오(입력이 숨겨짐)
   python3 voice.py check        # 키가 작동하고, 크레딧이 남아 있는지 확인
   python3 voice.py --only open,<첫 번째 장면의 id>
   

   파일럿이 정상적으로 들리면(voice.json에 플래그가 없거나 사용자가 들었을 때), 나머지는 python3 voice.py를 실행합니다.
4. 기본 음성: Matilda(XrExE9yKIg1WjnnlVkGX), eleven_multilingual_v2, 안정성 0.5, 유사성 0.75, 속도 1.0, MP3 44.1 kHz 128 kbps; 각 라인은 앞뒤 캡션을 컨텍스트로 하여 읽혀지므로 읽는 흐름이 자연스럽습니다. 사용자가 요청할 때만 음성이나 속도를 변경하십시오. voice.py는 사용될 문자 수(약 1크레딧)를 출력합니다. check에 남은 크레딧이 더 적게 표시되면 중단하고 물어보십시오.
5. 클립은 voice/<id>.mp3에 저장됩니다. voice/voice.json에는 각 클립의 길이와, Whisper가 있는 경우 들은 내용 및 단어 오류율이 나열됩니다. 0.05를 초과하는 라인은 듣고, say.json에 재철자를 추가하거나 새 문구를 작성한 다음 python3 voice.py --only <id> --redo를 실행하십시오.

3단계: 화면 캡처

1. claude-in-chrome 스킬을 로드합니다. 사용자가 로그인한 Chrome의 새 탭에서 앱을 엽니다. 페이지 뷰포트가 1512 x 745가 될 때까지 창 크기를 조정합니다(innerWidth 및 innerHeight 확인): 이것이 엔진의 월드 크기이며, 스크린샷은 2배, 3024 x 1490으로 반환됩니다.
2. 테스트 계정에서 흐름을 진행합니다. 영화에 필요한 각 상태를 computer 스크린샷과 save_to_disk: true로 캡처합니다: 각 클릭 전후; 타이핑의 경우 빈 필드와 채워진 필드(영화는 입력된 라인을 채워진 샷에서 잘라낸 패치로 표시).
3. 작업 공간에서 webp(품질 약 90)로 변환하고, <flow>_<step>.webp로 이름을 지정하고, 각 입력 라인의 2x 크롭도 추가합니다. 각 샷의 URL 경로를 shots.json에 기록하고 각 패치의 rect를 뷰 픽셀(1512 x 745 공간)로 기록합니다.
4. 테스트 계정 외부에서 데이터를 변경하는 것은 제출하지 마십시오. 단계에서 그렇게 해야 하는 경우 중단하고 물어보십시오.

4단계: 영화 빌드

1. Motion 아티팩트 유형(아티팩트 도구의 유형 목록에서 찾음)에서 영화를 생성하고, title = 동영상 이름으로 설정하고, 반환되는 유형의 지침을 읽으십시오: 해당 지침이 영화를 규율합니다. 요청에서 그 질문을 해결하여 양식이 필요하지 않도록 하십시오. 스타일: 실제 스크린샷 위에 안내 커서, 참조 영화의 스타일. 색상: 제품 팔레트(OmniOrders: #16213E, #11ACE4, #F4F7FB, #2FD193). 길이: 음성에 의해 설정되며(아래 참조), 5초 제목 카드와 7초 종료 카드가 추가됩니다.
2. engine/shared.js를 변경하지 않고 영화에 modules/shared.js로 쓰고, engine/base.css를 modules/base.css로 쓰고, 첫 번째 줄의 네 가지 색상만 변경합니다. 이 영화의 자체 스크린샷과 크롭을 에셋으로 업로드하고, 다른 영화의 _blob 참조를 절대 복사하지 마십시오.
3. lines.json(1단계 파일), shots.json(각 샷의 URL 경로, "host"는 /로 시작하는 경로 앞에 브라우저 바에 표시되는 도메인), 단계별로 하나의 장면 모듈을 SS.def로 작성하고(제목 카드는 SS.open 사용, SS.end는 mark, next 및 url 사용), 각 장면의 dur 및 desc를 가진 scenes.json을 작성합니다. 캡션을 caps: [['<id>', tin, tout], ...]로 선언하여 mix.py가 찾을 수 있도록 합니다. 캡션이 없는 음성 라인(제목 카드의 라인)은 해당 모듈에서 동일한 방식으로 선언됩니다(예: const voiceOnly = [['open', 0.4, 4.6]];). 예제를 따르십시오: 커서가 컨트롤로 이동하고, 링과 클릭 물결 효과가 표시되고, 카메라가 부드럽게 들어오며, 캡션이 어두운 플레이트에 위치합니다.
4. voice/voice.json의 클립에 맞게 캡션 시간을 조정합니다: 각 장면에서 첫 번째 캡션은 0.3초에 시작하고, 각 캡션은 해당 클립 길이 + 0.45초 동안 유지되며, 다음 캡션은 그 후 0.35초 후에 나타납니다. 장면의 dur는 마지막 캡션의 종료 시간 + 약 0.4초이거나, 화면상의 동작이 필요한 경우 더 길어집니다. 커서, 링 및 카메라를 해당 시간 내에 맞추십시오. 음성이 아직 준비되지 않은 경우 각 캡션에 약 5초를 할당하고 음성이 준비되면 시간을 다시 조정하십시오.
5. 배경 음악은 차분하고 현대적으로 유지하십시오: 첫 번째 빠른 시작의 배경 음악은 "80년대 교회 오르간"이라는 평가를 받았습니다.
6. 사용자가 영화를 재생하고 변경 사항을 요청합니다. 변경 사항을 적용하고(변경된 캡션은 다시 음성화). 사용자가 만족하면 영화 페이지의 플레이어 아래에 있는 다운로드 화살표를 통해 MP4가 내보내집니다. 사용자가 클릭하거나, 사용자가 동의하면 Chrome의 Claude가 클릭합니다. 파일은 사용자의 다운로드 폴더에 저장됩니다.

5단계: 혼합(mix)

1. 내보낸 MP4, voice/ 폴더, scenes.json 및 장면 모듈을 한 곳에 배치합니다: 사용자 컴퓨터의 영화 폴더(ffmpeg가 설치된 경우 device_bash로 mix.py 실행) 또는 클라우드 작업 공간(스테이징). ArtifactData(out_dir)로 영화에서 저장된 문서는 그대로 작동합니다.
2. python3 mix.py cues --scenes scenes.json --modules <scene-*.js가 있는 폴더> --lines lines.json은 cues.json을 작성합니다: 영화에서 각 캡션의 시작 및 종료 시간(장면 시작 시간, 이전 장면의 dur 합계 + 캡션 시간).
3. python3 mix.py mix --film <내보낸>.mp4 --voice voice --cues cues.json --out <product>-<flow>.mp4 --web은 각 클립을 해당 캡션에서 시작하고, 내보내기에 사운드가 있는 경우 영화 배경 음악을 음성 아래 25%로 유지하며, 음성을 -16 LUFS로 레벨링하고 영상을 복사합니다. 1.15배 이상 필요한 클립에서 중지됩니다. 해당 라인을 짧게 하고, 다시 음성화한 후 다시 혼합합니다.
4. python3 mix.py frames --film <product>-<flow>.mp4 --cues cues.json --out frames는 각 캡션 중간 지점의 프레임을 저장합니다. 모든 프레임을 확인하십시오: 캡션이 보이고, 올바른 화면이며, 개인 정보가 없어야 합니다. 그런 다음 시작 몇 초를 재생하십시오: 음성이 해당 캡션과 함께 시작됩니다. 다른 모든 작업에 대해서는 비디오 제작 스킬의 ffmpeg 규칙을 따르십시오.

6단계: 전달

• 완성된 MP4를 SendUserFile로 보내고 사용자의 연결된 폴더에 <product>-<flow>.mp4로 저장하십시오.
• 웹사이트의 경우: -web.mp4 복사본을 사이트 리포지토리의 PR에 넣으십시오. 사용자에게 링크를 제공하고, 사용자가 병합합니다.
• 사용자가 아직 수행해야 할 작업 목록을 간단히 끝에 나열하십시오: 터미널 명령, 내보내기, PR 병합.

설정, 사용자당 한 번(플러그인의 README에 자세한 내용이 있음)

1. GitHub에서 설치: Claude > 사용자 지정 > 플러그인 > 추가 > 마켓플레이스 추가, altacrest/novacrest-skills 입력하고 사용을 선택하고, 자동 동기화를 켜고, 동기화한 다음 How-to video를 설치합니다.
2. ElevenLabs: Text to Speech 액세스 권한이 있는 API 키, 모든 영화 폴더에서 python3 voice.py setup으로 저장.
3. Chrome의 Claude, 앱의 테스트 계정에 로그인됨.