getlarge/themoltnet - 제품 데모 녹화

제품 데모 녹화

프레이밍, 개인정보 보호, 내러티브, 디코딩된 출력물을 별도의 릴리스 게이트로 취급합니다. 성공적인 제품 실행만으로 녹화물이 안전하고 읽기 쉬우며 깔끔하게 구성되었음을 보장하지 않습니다.

네이티브 macOS 또는 브라우저 캡처 메커니즘에 대해서는 references/capture-macos.md를 읽으십시오. 폴링 또는 재시도 루프가 있는 브라우저 워크플로우 빌더에 대해서는 references/browser-workflows.md를 읽으십시오. 타이틀 카드, 하단 써드, 다이어그램, 콜아웃 및 엔드 카드에 대해서는 references/infographic-style.md를 읽으십시오.

먼저 전달 프레임 설정

녹화 전:

1. 샷 리스트를 작성하기 전에 내러티브 유형을 선택하십시오:
   • 개요는 제품의 형태를 설명합니다. 가장 작은 대표 노드 또는 화면 시퀀스를 보여주고, 일반적인 카피를 사용하며, 시나리오별 설명을 생략합니다.
   • 시나리오 데모는 하나의 구체적인 질문에 답변합니다. 사례를 설명하고, 실제 실행 단계를 보여주며, 검증된 결과로 마무리합니다.
   • 두 가지가 모두 유용할 경우 별도의 짧은 동영상을 선호하십시오. 사용자가 명시적으로 결합된 워크스루를 원하지 않는 한 일반 제품 설명과 도메인별 사례를 혼합하지 마십시오.
2. 시각적 기준 설정:
   • 이전 녹화물이 존재하는 경우 처음부터 끝까지 검사하십시오. 유용할 때 컨택트 시트를 추출하고, 페이싱, 프레이밍, 주석 및 가장 강력한 설명적 순간을 기록하십시오.
   • 이전 녹화물이 없는 경우 @themoltnet/design-system 라이브러리, 인접한 문서 미디어 및 통합 제품의 네이티브 UI를 그 순서대로 사용하여 녹화 전에 타이틀 카드 스틸, 가장 조밀한 주석 처리된 UI 스틸 및 엔드 카드 스틸을 만드십시오. 이 승인된 스틸은 시리즈의 이후 동영상에 대한 기준선이 됩니다.
3. 동영상이 표시될 페이지를 읽으십시오. 사용자 결과, 필요한 설정, 주요 상호 작용, 대기 또는 재시도 동작 및 성공적인 결과를 명명하는 짧은 샷 리스트를 작성하십시오.
4. 앱을 정리하기 전에 최종 화면 비율과 해상도를 선택하십시오. 1440x810 또는 1920x1080과 같은 기존의 16:9 프레임을 선호하십시오.
5. 전체 의도된 콘텐츠 영역이 해당 프레임에 맞도록 응용 프로그램을 정리하십시오. 필요한 경우 앱 내부의 선택적 사이드바를 숨기십시오. 임의적인 사후 제작 크롭으로 사이드바 또는 컨트롤의 절반을 제거하지 마십시오.
6. 브라우저 크롬이 구성의 일부인지 결정하십시오. 깨끗한 브라우저 뷰포트 캡처를 선호하십시오. 사용할 수 없는 경우 전체 브라우저 창을 유지하거나 의도적인 프레임 안에 배치하십시오. 전체 창은 잘린 탭, 가장자리 또는 응용 프로그램 콘텐츠보다 깔끔합니다.
7. 세 가지 대표적인 스타일 프레임을 실제 표시 크기에서 검토하십시오. 오버레이 시스템, 안전 영역 또는 정보 계층 구조가 아직 발명되는 동안 전체 워크스루를 녹화하지 마십시오.

안전한 캡처 경계 사용

• 하나의 응용 프로그램 창 또는 하나의 브라우저 뷰포트만 캡처하고, 다른 응용 프로그램이 들어갈 수 있는 데스크탑 사각형은 절대 캡처하지 마십시오.
• 녹화 전에 정확한 창 식별자를 확인하고 잠그십시오. 탐색, 팝업 또는 응용 프로그램 재시작 후 다시 확인하십시오.
• 알림을 비활성화하고 전용 데모 데이터를 사용하지만, 이러한 예방 조치를 개인정보 보호 경계로 의존하지 마십시오.
• 자격 증명, 토큰, 개인 식별자, 개인 URL 및 관련 없는 계정 데이터를 캡처된 표면 외부에 유지하십시오. 비밀번호 마스킹은 필요하지만 자격 증명 입력 장면을 바람직하게 만들지는 않습니다.
• 포인터를 의도적으로 만드십시오. 정적 결과를 읽는 동안 텍스트에서 멀리 배치하십시오.

이해를 위해 녹화

• 샷당 하나의 아이디어를 사용하십시오. 중요한 구성 및 결과를 일반 재생 속도로 읽을 수 있을 만큼 충분히 오래 유지하십시오.
• 설정이 시청자가 결과를 재현하는 데 도움이 될 때만 표시하십시오. 통합 데모의 경우 이는 종종 설치, 비밀을 드러내지 않고 인증, 워크플로 가져오기, 실행 및 터미널 결과 검사를 의미합니다.
• 나중에 크롭된 래스터를 확대하는 것보다 네이티브 응용 프로그램 확대/축소 및 레이아웃 변경을 선호하십시오.
• 실제 성공적인 실행을 캡처하십시오. 재구성된 타이틀 카드와 주석으로 설명할 수 있지만 관찰되지 않은 동작이나 결과를 암시해서는 안 됩니다.
• 동작 자체가 교육적이지 않은 경우 상태 중심 편집은 하나의 실제 실행에서 가져온 깨끗한 스틸을 사용할 수 있습니다. 상태를 관찰된 순서대로 유지하고, 보이는 작업 증거를 보존하며, 진행 상황을 전달하기 위해서만 전환을 사용하십시오.
• 녹화된 테이크 외부에서 자격 증명 생성 및 연결 테스트를 완료하십시오. 자격 증명 설정 자체가 문서화된 주제가 아닌 한 안전한 인증 상태에서 내러티브를 시작하십시오.
• 흐름에 안정적인 단계가 있는 경우 짧고 독립적으로 사용할 수 있는 테이크를 녹화하십시오. 이렇게 하면 재녹화가 제한되고 개인정보 검토가 더 정확해집니다.
• 긴 폴링 또는 재시도 루프의 경우 실제 순서 상태를 보존하지만 반복되는 유휴 부분을 가속화하거나 자르십시오. 초기 동작, 터미널 워크플로 상태 및 허용된 결과를 읽을 수 있는 속도로 유지하십시오.

제품을 숨기지 않고 편집

• 모든 의도된 응용 프로그램 가장자리를 보존하십시오. 화면 비율을 강제로 적용하기 위해 콘텐츠를 크롭하는 대신 축소하고 전달 프레임에 패딩을 추가하십시오.
• 방향 또는 다음 단계를 개선할 때만 타이틀 및 엔드 카드를 사용하십시오.
• 하단 써드를 미리 계획된 안전 영역 안에 유지하십시오. 흐름을 이해하는 데 필요한 컨트롤, 상태, 출력, 오류 또는 식별자를 덮어서는 안 됩니다.
• 시나리오 데모의 경우 주석이 실행과 함께 진행되도록 하십시오. 현재 단계의 이름을 지정하고 한 짧은 줄로 그 결과를 설명하십시오. 예를 들어 의도 — 장소 및 시간 범위 추출 다음에 의도 완료 — 예보 가져오기. 제품의 실제 단계 이름과 관찰 가능한 상태를 사용하십시오. 숨겨진 추론을 설명하지 마십시오.
• 개요 동영상은 동반 시나리오 데모보다 시각적으로 조용하게 유지하십시오. 노드 레이블 및 네이티브 상태 표시기가 이미 충분할 때 설명을 전달해야 합니다.
• 기존 동영상을 교체할 때는 확립된 문서 시각적 언어와 일치시키십시오. 대체하는 자산보다 덜 신중하게 느껴지지 않도록 하십시오.
• 광범위한 브라우저 호환성을 위해 기본적으로 H.264 High, yuv420p, 상수 30fps, 내레이션이 의도되지 않은 경우 오디오 없음, MP4 fast-start를 사용하십시오.
• 이 macOS 툴체인에서 실용적인 경우 최종 렌더링에 단일 스레드 libx264를 선호하십시오. 정확한 타임스탬프 QA 프레임을 추출할 때 빠른 입력 탐색 대신 번들 헬퍼를 사용하십시오.
• 아티팩트 미리보기에서 프레임이 손상된 것처럼 보이면 체크섬 안정적인 아티팩트를 다시 열고 네이티브 플레이어에서 동영상을 검사하십시오. 미리보기 경로가 동일한 이미지 바이트를 간헐적으로 다르게 렌더링했습니다. 결함이 독립적으로 재현 가능하지 않으면 동영상을 변경하지 마십시오.
• 정상 재생 및 반복 추출에서 프레임이 계속 손상된 경우 깨끗한 소스에서 영향을 받은 세그먼트를 교체하고 -threads 1로 최종 마스터를 다시 인코딩하십시오.

오디오는 가치가 있을 때만 추가

• 임베디드 문서 동영상의 기본값으로 무음 재생을 유지하십시오. 간결한 시각적 주석으로는 설명할 수 없는 타이밍, 인과 관계 또는 맥락을 실질적으로 설명할 때 내레이션을 추가하십시오.
• 잠긴 사진에 맞춰 내레이션을 작성하고 시간을 맞추십시오. 자막 또는 텍스트 대본은 동일한 정보를 보존해야 하며, 동영상은 음소거된 상태에서도 이해할 수 있어야 합니다.
• 식별 가능한 사람을 모델로 한 복제 또는 합성 음성은 해당 사람의 명시적 승인을 받아야 사용하십시오. 주변 페이지 또는 크레딧에서 음성이 합성임을 공개하십시오. 실제 라이브 녹음으로 제시하지 마십시오.
• 사용자가 명시적으로 게시하기로 선택하지 않는 한 음성 샘플, 모델 파일 및 생성된 중간 파일을 리포지토리 밖에 두십시오. 하나의 내레이션 데모를 생성하기 위한 승인은 해당 전달물에 한정된 것으로 취급하며, 미래 음성 생성을 위한 지속적인 동의로 간주하지 마십시오.
• 오디오를 먹싱한 후 전달 QA를 다시 실행하십시오. 명료도, 레벨, 동기화, 자막, 채널 레이아웃 및 최종 컨테이너가 여전히 동영상 전달 사양을 충족하는지 확인하십시오.

디코딩된 전달물 검토

번들 헬퍼를 중간 파일이 아닌 최종 파일에 대해 실행하십시오:

.agents/skills/product-demo-recording/scripts/qa-video.sh \
  path/to/final.mp4 /private/tmp/demo-video-qa --interval 2 4 5 6

헬퍼는 스트림 메타데이터, 순차적으로 디코딩된 컨택트 시트 및 시작/중간/끝 및 요청된 타임스탬프 프레임을 JPEG로 작성합니다. 새 출력 디렉토리를 사용하십시오.

그런 다음 다음 모든 검사를 수행하십시오:

1. 최종 동영상 전체를 정상 속도로 시청하십시오.
2. 모든 응용 프로그램, 모달, 샷, 주석 및 결과 상태 변경에 대한 컨택트 시트를 검사하십시오.
3. 모든 편집 경계 직전, 직후 및 해당 지점의 정확한 프레임을 검사하십시오. 검토 피드백에 명명된 타임스탬프를 항상 추가하십시오. 인접 프레임이 대표적이라고 추론하지 마십시오.
4. 다른 앱, 데스크탑 영역, 알림, 자격 증명, 개인 데이터, 잘린 가장자리, 부분 브라우저 크롬, 이상한 검은색 테두리 또는 가려진 컨트롤이 없는지 확인하십시오.
5. 텍스트를 읽을 수 있고, 포인터 배치가 차분하며, 전환이 깔끔하고, 보이는 결과가 주변 문서와 일치하는지 확인하십시오.
6. 코덱, 픽셀 형식, 치수, 프레임 속도, 지속 시간, 오디오 선택 및 fast-start 요구 사항이 전달 사양과 일치하는지 확인하십시오.

이러한 검사가 커밋될 정확한 파일에 대해 수행될 때까지 녹화물이 검토되었다고 설명하지 마십시오.

의도적으로 출시 및 보관

• 최종 에셋과 의도적인 문서 변경 사항만 스테이징하십시오. 로우 테이크, 자격 증명, 브라우저 프로필 또는 QA 내보내기를 추가하지 마십시오.
• 최종 파일이 검토되고 안전하게 커밋되거나 업로드될 때까지 로우 테이크를 보관하십시오. 그런 다음 운영자의 보관 선택을 따르십시오. 광범위한 삭제 패턴보다는 민감한 임시 캡처를 명시적으로 제거하십시오.
• 인계 시 무엇이 표시되었는지, 최종 기술 속성, 검사된 타임스탬프 및 최종 에셋이 어디에 있는지 명시하십시오.