제품 데모 비디오 만들기
사람이 조작하는 듯한 일관된 제품 스토리를 제작합니다. 실제 인터페이스를 녹화하고 명확성을 위해 필요한 프레젠테이션 레이어만 추가하는 것을 선호합니다.
컷 선택하기
- 저장소, 랜딩 페이지 또는 상세 워크플로우의 경우 1920×1080, 30 또는 60fps를 사용합니다.
- 4:5 소셜 피드 컷의 경우 1080×1350을 사용하고, 세로형 스토리/릴의 경우 1080×1920을 사용합니다.
- 전체 워크플로우의 기본 길이는 45–90초, 소셜 티저의 기본 길이는 8–15초로 설정합니다.
- 본질적으로 다른 길이의 편집물은 별도로 생성하고, 긴 컷의 속도만 높이지 마십시오.
스토리 구성하기
저작 전에 앱, 사용 가능한 에셋, 기존 스크립트 및 브랜드 처리를 검사합니다. 후크, 문제, 행동, 가시적 결과, 클릭 유도 문안을 포함한 간단한 비트 시트를 작성합니다. 각 비트당 하나의 의미 있는 행동을 유지합니다. 중요한 상태는 읽을 수 있을 만큼 충분히 오래 유지합니다.
전체 워크플로우의 경우, 인간의 의도, 에이전트의 행동, 검토된 결과 및 해결책을 보여줍니다. 티저의 경우, 결과를 먼저 제시하고 이를 증명하는 데 필요한 최소한의 UI만 사용합니다.
인간형 인터랙션 애니메이션
포인터, 타이핑 또는 카메라 애니메이션을 구현하기 전에 motion-language.md를 읽으십시오. human-motion.mjs를 사용하여 결정론적 포인터 경로와 타이핑 타임라인을 생성한 다음, 해당 출력을 녹화 하네스에 적용합니다.
다음 요구 사항을 적용합니다:
- 한 장면 내에서 커서 위치를 연속적으로 유지합니다. 가시적인 행동 사이에서 커서를 순간이동시키지 마십시오.
- 가속, 감속 및 약간의 최종 보정을 포함하여 부드럽게 곡선을 그리는 경로를 따라 이동합니다.
- 거리와 대상 크기에 따라 지속 시간을 다르게 합니다. 하나의 전역 커서 속도를 사용하지 마십시오.
- 도착 후 잠시 멈추고, 포인터 다운과 클릭 물결 효과를 애니메이션으로 적용한 다음, 클릭을 수행합니다.
- 글자별로 다른 지연 시간과 공백 및 구두점에서 약간 더 긴 멈춤을 포함하여 문자를 하나씩 입력합니다.
- 텍스트 필드가 포커스될 때마다 깜빡이는 삽입 커서를 렌더링합니다. 여기에는 타이핑 전, 중, 후의 멈춤도 포함됩니다.
- 스토리를 뒷받침하지 않는 한 인위적인 타이핑 실수를 피합니다.
- 연속적인 위치를 유지할 수 없는 하드 장면 전환 중에는 포인터를 페이드 아웃합니다.
녹화 및 합성
브라우저 자동화가 필요한 경우 Playwright 스킬을 사용합니다. 최종 대상 해상도 또는 그 이상으로 녹화합니다. 재현된 목업보다 실제 앱, 실제 레이아웃 및 실제 상태 전환을 선호합니다. 스테이징이 필요한 경우 제품의 시각적 정체성을 명확하게 보존하십시오.
절제된 카메라 움직임 사용:
- 단순히 움직임을 추가하기 위한 것이 아니라 주의를 집중시키기 위해 팬 또는 줌을 사용합니다.
- 하나의 안정적인 카메라 래퍼를 애니메이션으로 처리하고, 여러 페이지 자식을 독립적으로 전환하지 마십시오.
- 고정된 변환 원점을 유지하고 현재 렌더링된 변환에서 계속 진행하여 점프를 방지합니다.
- 줌 안팎으로 이징을 적용하고, 대상에 머물며, 복귀 이동에도 자체 이징을 제공합니다.
- 카메라, 커서 및 주요 UI 요소를 동시에 경쟁 방향으로 움직이는 것을 피합니다.
- 텍스트 오버레이를 안전 여백 내에 유지하고 오디오 없이도 읽을 수 있도록 합니다.
- 제품의 시각적 언어와 일관되게 자막 및 진행 표시기를 애니메이션으로 처리합니다.
인코딩
광범위한 재생 지원을 위해 yuv420p 및 faststart를 사용한 H.264 MP4를 선호합니다. 고해상도 마스터를 보존하고 그로부터 더 작은 전달 컷을 파생시킵니다. 텍스트를 선명하게 유지하고 UI 가장자리 주변의 과도한 압축을 피하십시오.
검토 및 반복
첫 번째 프레임뿐만 아니라 전체 비디오를 검사합니다. 모든 클릭, 전환, 확대/축소 지점, 타이핑 완료 및 최종 CTA에서 연락처 시트와 프레임을 추출합니다. 확인 사항:
- 커서 이동은 의도적이지만 불완전하게 느껴져야 합니다.
- 모든 클릭에는 가시적인 피드백이 있고 대상에 정확히 위치해야 합니다.
- 포인터 속도와 타이핑 케이던스는 자연스럽게 다양해야 합니다.
- 포커스된 텍스트 필드에서 커서가 깜빡여야 합니다.
- 확대/축소는 시작, 포커스 유지, 역방향 및 끝점에서 연속적으로 유지되어야 합니다.
- 레이블은 읽을 수 있을 만큼 충분히 오래 표시되어야 합니다.
- 커서, 툴팁, 모달 또는 자막이 잘리지 않아야 합니다.
- 전환은 공간적 연속성을 보존해야 합니다.
- 치수, 지속 시간, 코덱 및 파일 크기가 선택한 컷과 일치해야 합니다.
전달 전에 서두른 행동은 수정하십시오. 최종 비디오, 포스터 프레임, 지속 시간, 치수 및 로컬 또는 저장소 경로를 제공하십시오. 요청된 경우에만 저장소 문서를 업데이트하십시오.