애니메이션 사용 설명 영상

비디오 매뉴얼

제품 화면을 짧은 설명이 포함된 둘러보기 비디오로 만듭니다: 애니메이션 커서가 화면을 클릭하며 이동하고, 하이라이트와 확대/축소로 시선을 유도하며, 애니메이션 텍스트가 각 단계를 설명합니다.

작업은 네 단계로 이루어집니다. 사용자가 결정하고, 당신이 제작합니다.

단계	사용자	당신
1. 제품 프로젝트	제품 대상, 브랜드 색상, 배경 템플릿, 로고, 브랜드 가이드 설정	음성 규칙 도출 및 모션 조정
2. 장면	스크린샷 또는 Figma 링크 첨부	Figma 프레임 가져오기
3. 스토리보드 초안	주요 화면, 순서 및 텍스트 결정	초안 작성 (사용자 편집 가능)
4. 비디오	시청, 텍스트 및 순서 편집, 프레임에 코멘트	액션 추가, 모든 프레임 확인, 코멘트 반영, 렌더링

사용자가 가장 신경 쓰는 것은 문구와 순서이므로, 이는 3단계에서 모든 제작 작업 전에 확정되며 4단계에서 MP4가 렌더링될 때까지 편집 가능합니다.

사용자와 대화할 때는 그들의 언어를 사용하십시오. 별도의 지시가 없는 한 제품 UI의 언어로 캡션을 작성하십시오.

두 가지 작업 방식

스튜디오 사용 (기본값). 로컬 웹 앱이 네 단계를 보여줍니다. 사용자가 그곳에서 작업하며, ✦ 버튼은 당신이 처리하고 응답할 요청을 대기열에 추가합니다. 시작하기 전에 references/studio.md를 읽으십시오. 이것이 해당 루프의 프로토콜입니다.

대화 전용. 사용자가 브라우저를 열고 싶지 않거나 로컬 서버를 실행할 수 없는 경우, 대화에서 질문하고 보여주면서 동일한 네 단계를 수행하십시오. 아래 "스튜디오 없이"를 참조하십시오.

어느 방식이든 파일은 동일하므로 프로젝트는 두 방식 간에 이동할 수 있습니다.

프로젝트 구조

모든 파일은 사용자 프로젝트의 video-manual/ 아래에 위치하므로, 하나의 프로필이 제품을 위해 제작된 모든 매뉴얼에 서비스됩니다:

video-manual/
├── product-profile.json     # 제품당 하나: 대상, 음성, 모션, 배경
├── brand/                   # guide.md (붙여넣은 브랜드 가이드), 로고
├── requests.json            # 스튜디오에서 대기열에 추가된 요청
└── <manual-slug>/           # 비디오당 하나의 폴더 (예: create-task/)
    ├── screens/             # 01-board.png, 02-new-task.png, ...
    ├── storyboard.json      # 먼저 초안, 그 다음 전체 스토리보드
    ├── comments.json        # 스튜디오의 프레임 코멘트
    └── out/                 # manual.html, manual.mp4, stills/, frames/

설정

스크립트는 이 스킬의 scripts/ 폴더에 있습니다. 렌더링을 위해 한 번 종속성을 설치해야 합니다:

cd <skill-dir>/scripts && npm install

그런 다음 스튜디오를 백그라운드에서 시작하고 사용자에게 주소를 알려주십시오:

node <skill-dir>/scripts/studio.mjs video-manual --open

한 문장으로 다음에 일어날 일을 알려주십시오: 사용자가 1단계를 작성하면, ✦ 버튼으로 보내는 모든 것을 당신이 처리할 것입니다. 그런 다음 references/studio.md에 설명된 대로 요청을 기다리십시오.

1단계 — 제품 프로젝트

video-manual/product-profile.json에 이미 voice 블록이 있으면 제품이 설정된 것입니다: 그대로 사용하십시오. 각 비디오를 개별적으로 조정하는 것보다 제품 전체의 일관성이 더 중요합니다.

그렇지 않으면 사용자가 양식(이름, 도메인, B2C/B2B, 대상 연령, 기기, 강조 색상, 배경 템플릿, 선택적 로고 및 브랜드 가이드)을 작성하고 profile 요청을 보냅니다. 그런 다음:

1. product 블록과 brand/guide.md를 읽으십시오.
2. voice 블록을 작성하십시오 — 레지스터, 문장 끝말, 가장 긴 캡션, 피해야 할 단어, 제품 용어. references/voice-guide.md를 읽으십시오. 사용자의 브랜드 가이드가 일반적인 조언보다 우선합니다.
3. 동일한 대상에 맞게 모션을 조정하십시오. references/motion-profiles.md를 읽으십시오. 사용자가 프리셋과 배경을 선택했습니다. 대상 관객에 맞게 속도, 크기 및 이징을 조정하십시오.
4. 한두 문장으로 rationale을 추가하십시오.

이 세 가지 사실(대상 연령, 도메인, B2C/B2B)이 모든 캡션을 결정합니다. 양식에 하나가 비어 있거나 화면이 이와 모순되면 음성 규칙을 작성하기 전에 물어보십시오.

2단계 — 장면

각각의 개별 화면 상태에 대해 하나의 이미지를 screens/에 순서대로 번호를 매겨 저장합니다. 시각적으로 변경되는 상태(모달 열림, 드롭다운 확장, 양식 작성)는 별도의 이미지가 필요합니다: 비디오는 클릭 결과를 다음 스크린샷으로 잘라서 보여줍니다.

사용자는 일반적으로 스튜디오에서 이러한 이미지를 업로드합니다. Figma 링크가 있는 scenes 요청의 경우 각 프레임을 PNG로 내보내고 논리적 너비를 coordWidth에 기록하십시오. 또한 레이어 메타데이터를 읽으십시오 — 정확한 요소 경계는 픽셀 추정보다 훨씬 신뢰할 수 있습니다.

둘러보기에 필요한 상태가 누락된 경우, 단계를 건너뛰지 말고 어떤 상태인지 말하고 요청하십시오. 시청자가 따라잡지 못하는 점프는 매뉴얼의 목적을 무효화합니다.

3단계 — 스토리보드 초안

draft 요청 시 모든 화면과 프로필을 읽은 다음 초안을 storyboard.json에 작성하십시오: 순서대로 장면, 각각 caption과 해당 장면에서 발생하는 상황을 설명하는 note를 포함합니다. 아직 액션은 없습니다. 비디오 범위와 텍스트 작성 방법에 대한 references/manual-script.md를 읽고, 모든 줄을 프로필의 음성으로 작성하십시오.

사용자는 스튜디오에서 초안을 편집하고 문구와 순서가 올바르면 "비디오 요청" 버튼을 누릅니다. 해당 produce 요청이 승인입니다. 승인이 도착하기 전에 액션을 추가하지 마십시오.

4단계 — 비디오

제작

references/storyboard-schema.md를 읽고 승인된 초안을 전체 스토리보드로 변환하십시오: 각 장면의 note를 따르고, 액션을 추가하고, coordWidth를 설정하십시오. 캡션은 승인된 그대로 유지됩니다.

좌표는 가장 잘못되기 쉬운 부분입니다. 정확한 경계가 있는 경우(Figma 메타데이터, DOM 사각형) 사용하십시오. 이미지만 있는 경우 주의 깊게 살펴보고 추정하십시오. 아래 확인 절차가 잘못된 부분을 잡아냅니다.

사용자가 보기 전에 확인

빌드한 후 스틸 이미지를 렌더링하십시오 — 각 클릭, 텍스트 및 캡션 변경 시점, 각 장면 끝에 하나씩:

node <skill-dir>/scripts/build.mjs video-manual/<slug>/storyboard.json
node <skill-dir>/scripts/render.mjs video-manual/<slug>/out/manual.html --stills video-manual/<slug>/out/stills

build.mjs는 스토리보드의 유효성을 검증하고, 각 캡션을 프로필의 음성 규칙과 비교하며, 각 장면의 타이밍을 출력합니다. 오류를 수정하십시오. 사용자가 작성한 텍스트에 대한 음성 경고의 경우 사용자의 문구를 유지하고 응답에 경고를 언급하십시오.

스틸 이미지를 읽고 각각을 확인하십시오:

• 커서 끝이 캡션이 지정한 요소에 있는가?
• 하이라이트 링이 요소 전체를 감싸고 다른 것은 포함하지 않는가?
• 확대 후 대상이 완전히 보이고 읽을 수 있는가?
• 입력된 텍스트가 필드 안에 있고 플레이스홀더를 덮는가?
• 각 캡션이 최대 두 줄로 완전히 보이는가?
• 각 콜아웃이 올바른 요소를 가리키면서 커서나 요소를 덮지 않는가?

스토리보드를 수정하고 모든 프레임이 통과할 때까지 다시 빌드하고 다시 렌더링한 후 요청에 응답하십시오. 버튼 옆을 클릭하는 커서는 전체 매뉴얼을 잘못 보이게 하므로 사용자가 그런 것을 발견해서는 안 됩니다.

검토 루프

스튜디오의 4단계에서 사용자는 다음을 할 수 있습니다:

• 캡션, 제목 또는 화면 텍스트를 편집하고 장면 순서를 재정렬 — 요청 없이 storyboard.json에 직접 저장됩니다.
• 프레임에서 일시 정지, 위치 고정 및 코멘트 작성 후 코멘트를 revise 요청으로 보냅니다.

revise를 references/studio.md에 설명된 대로 처리하십시오: 코멘트가 있는 프레임을 렌더링하여 사용자가 본 것을 확인하고, 코멘트가 관련된 것만 변경하고 다른 것은 변경하지 않으며, 새 프레임에서 수정되었는지 확인한 후 각 코멘트에 응답하십시오. 사용자가 장면을 재정렬한 후 각 클릭이 여전히 다음 화면으로 이어지는지 확인하십시오. 끊어진 체인은 조용히 수리하지 말고 사용자에게 알릴 사항입니다.

이 루프는 사용자가 만족할 때까지 반복됩니다.

렌더링

사용자는 스튜디오에서 한 번의 버튼으로 MP4를 내보냅니다. 직접 렌더링하려면:

node <skill-dir>/scripts/render.mjs video-manual/<slug>/out/manual.html --out video-manual/<slug>/out/manual.mp4

렌더링은 비디오 길이와 거의 비슷한 시간이 걸리며, 느린 기계에서는 두세 배까지 걸릴 수 있습니다. 1분 이상의 매뉴얼은 백그라운드에서 실행하십시오. 출력 경로, 길이 및 파일 크기를 보고하십시오.

스튜디오 없이

대화에서 동일한 네 단계를 수행하십시오:

1. 프로젝트 — 화면과 UI 텍스트에서 대상 연령, 도메인 및 B2C/B2B를 추론하고, 읽은 내용을 진술한 후 한 번의 질문으로 사용자에게 확인을 요청하십시오. 그런 다음 프리셋, 강조 색상 및 배경을 포함하여 전체 프로필을 직접 작성하십시오.
2. 장면 — 사용자가 제공한 이미지를 screens/에 복사하거나, 브라우저나 Figma 도구가 있으면 직접 캡처하십시오.
3. 초안 — 초안 스토리보드를 작성하고 표(단계, 화면, 발생 상황, 캡션, 화면 텍스트)로 예상 길이와 함께 보여준 후 승인을 기다리십시오. 사용자가 처음부터 바로 진행하겠다고 하면 진행하고 초안 위치를 알리십시오.
4. 비디오 — 위와 같이 제작하고 확인한 후 out/manual.html의 위치를 알리십시오. 이 독립 실행형 페이지는 비디오를 재생하고 텍스트 및 순서 편집을 위한 자체 패널이 있습니다. "편집 다운로드"는 사용자가 반환할 수 있는 storyboard.edited.json을 제공합니다. 사용자가 반환하면 변경된 내용을 나열하여 사용자가 의도한 대로 읽었음을 확인하고, storyboard.json으로 저장한 후 다시 빌드하고 스틸을 다시 확인하십시오. 그런 다음 렌더링하십시오.

이후 변경 사항

• 문구 또는 순서: 사용자가 스튜디오에서 편집하거나 직접 알립니다.
• 음성 ("너무 딱딱해", "우리 사용자들은 그보다 나이가 많아"): 프로필의 voice 블록을 변경한 후 캡션을 다시 작성하십시오.
• 느낌 ("너무 느려", "너무 튀어"): 개별 장면이 아닌 프로필의 모션 토큰을 변경하십시오 — references/motion-profiles.md의 튜닝 테이블을 참조하십시오.
• 한 단계가 잘못 보임: 해당 장면의 액션을 수정하고 스틸을 다시 확인하십시오.

다시 렌더링하기 전에 변경 후 항상 다시 빌드하고 스틸을 다시 확인하십시오.

제한 사항

요청이 다음 중 하나에 해당하면 명확히 말하십시오:

• 화면은 정적 이미지입니다. 스크롤, 호버 상태 및 앱 내 애니메이션은 재현되지 않습니다. 별도의 스크린샷으로 표시하십시오.
• 음성 해설이나 음악은 없습니다. 캡션과 화면 텍스트가 설명을 제공합니다.
• 스튜디오는 텍스트와 장면 순서를 편집합니다. 단계가 클릭하거나 강조하는 것은 사용자의 코멘트를 통해 변경됩니다.
• 출력은 기본적으로 16:9입니다. 다른 화면 비율의 경우 스토리보드에서 meta.width와 meta.height를 설정하십시오.

문제 해결

• playwright-core is not installed: 스크립트 폴더에서 npm install을 실행하십시오.
• no browser found: Google Chrome을 설치하거나 스크립트 폴더에서 npx playwright install chromium을 실행하십시오.
• ffmpeg not found: ffmpeg를 설치하거나 FFMPEG_PATH를 설정하십시오. npm install은 일반적으로 ffmpeg-static을 통해 하나를 제공합니다.
• 스튜디오에서 요청이 "대기 중"으로 남음: studio.mjs wait가 실행 중이지 않습니다. 실행하거나 studio.mjs pending을 실행하십시오.
• 4단계에 비디오 대신 오류 표시: 장면이 누락된 이미지를 가리키거나 좌표가 화면 밖에 있습니다. build.mjs가 장면을 지정합니다.
• 글꼴이 잘못 보임: 비디오는 기계에 설치된 글꼴을 사용합니다. 프로필에서 font.family를 설치된 글꼴로 설정하십시오.