anandragav/sharepoint-skills-plugin

나레이션 스토리 애니메이션

사용 시기

고객 스토리, 캠페인, 제품 출시, 시장 진출 여정, 사례 연구, 학습 튜토리얼 또는 내러티브 설명에 사용하며, 독립적인 애니메이션 HTML 경험으로 재생되어야 합니다. HTML만 생성하세요. 사용자가 명시적으로 요청하지 않는 한 PowerPoint, 나레이션 텍스트 파일, 오디오 파일 또는 비디오를 만들지 마세요.

편집 Story Studio 경험과 일치시켜야 하며, 일반적인 슬라이드 방식의 애니메이션을 만들지 마세요. 완성된 Story Studio 참조 파일과 가상의 Routewise 샘플은 GitHub의 이 스킬 demo/ 폴더에 있습니다.

입력

• 스토리 소스: 사용자가 제공한 간략한 설명, 사실 또는 명명된 SharePoint 소스.
• 선택 사항: 스토리 유형, 대상, 언어, 행동 유도, 브랜드 방향 및 대상 폴더.
• 사용자가 소스를 제공하지 않으면 명확히 가상의 샘플을 만드세요. 가상의 이름, 수치, 결과 또는 인용을 실제로 제시하지 마세요.

단계

1. 스토리를 수집합니다. 쓰기 전에 제공된 SharePoint 소스를 읽으세요. 소스 사실이나 사용자가 명시한 세부 정보만 사용하세요. 소스가 제공되지 않으면 완성된 스토리를 가상으로 표시하세요.
2. 6~9개 장면 아크를 계획합니다. Story Studio 시스템의 스토리 유형에 적합한 장면만 사용하세요: 제목(title), 통계(stats), 막대(bars), 경로(route), 네트워크(network), 타임라인(timeline), 인용(quote), 결과(result), CTA.
3. 나레이션 준비된 장면 데이터를 작성합니다. 각 say 필드는 45단어 이하로 유지하고, 짧은 절과 자연스러운 일시 정지를 포함하세요. 헤드라인은 간결해야 하며 편집적 강조를 위해 <em>만 사용할 수 있습니다. 보이는 모든 숫자는 소스에서 가져와야 합니다. 숫자가 필요하지만 제공되지 않은 경우 [placeholder]를 사용하세요.
4. 완전하고 오프라인에서 사용 가능한 단일 HTML 파일을 빌드합니다. CDN, 외부 폰트, 외부 이미지, 네트워크 호출 또는 <script src>를 사용하지 마세요.
5. Story Studio 디자인과 UX를 재현합니다:
   • 따뜻한 편집용 종이 팔레트, 세리프 디스플레이 타이포그래피, 모노 레이블, 빨간색 악센트, 가는 테두리, 그레인, 16:9 프레임 스테이지, 마스트헤드, 실행 중인 레이블, 폴리오 및 장면 수;
   • 둘 이상의 스토리 변형이 포함된 경우 장면 선택 버튼;
   • 애니메이션 와이프 전환, 계단식 텍스트 표시, 마스크된 헤드라인 줄, 축소 모션 지원 및 반응형 전체 화면 스테이지;
   • 장면별 모션: 통계 카운트업, 막대 채우기, 애니메이션 경로 및 지도 핀, 파트너 네트워크 표시, 타임라인 진행, 단어별 인용 표시, 결과 컨페티 폭발;
   • 나레이션 진행 상황에 동기화된 자막 단어, 장면 스크러버/진행 표시기, 이전, 다음, 다시 시작, 자막 토글, 나레이션 토글, 음성 선택기, 속도 선택기, 전체 화면 제어, 키보드 단축키 및 상태 텍스트;
   • 접근성 레이블, 눈에 보이는 컨트롤, 반응형 동작 및 prefers-reduced-motion 처리.
6. 나레이션은 기본적으로 ON입니다. 로드 시 나레이션을 활성화하고 첫 번째 장면에 대해 브라우저 음성 합성을 즉시 시도합니다. 장면 전체에서 나레이션을 활성화 상태로 유지하고 각 장면의 음성이 끝날 때까지 기다렸다가 자동으로 전환합니다.
7. 음성 선택기를 포함하세요. speechSynthesis.getVoices()를 사용하여 시청자의 설치된 영어 브라우저/시스템 음성과 함께 '기본 음성' 옵션으로 채웁니다. voiceschanged에 반응하여 늦게 로드되는 음성이 나타나도록 합니다. 음성을 선택하면 선택한 음성을 사용하여 현재 장면 나레이션을 다시 시작해야 합니다. 공유 음성 라이브러리를 발명하거나 명명된 음성이 모든 시청자에게 제공된다고 주장하지 마세요.
8. 브라우저 자동 재생 제한을 정직하게 처리합니다. 브라우저는 시청자가 페이지와 상호 작용할 때까지 가청 음성을 차단할 수 있습니다. 차단된 경우 "나레이션이 준비되었습니다 — 재생하려면 선택하세요"와 같은 눈에 띄는 스테이지 내 메시지를 표시하고, 활성화된 나레이션 상태를 유지하며, 첫 번째 클릭, 키 누름 또는 터치에서 음성을 시작합니다. 오디오가 자동으로 재생된다고 주장하지 마세요.
9. 완전한 파일을 생성한 후 별도의 애니메이션 엔진을 직접 편집하지 마세요. 결과가 완전한 HTML 문서이고 작동하는 컨트롤과 외부 종속성이 없는지 확인하세요.
10. 이 사이트의 모든 HTML 대시보드 및 애니메이션 HTML 스토리를 Reports 라이브러리에 저장합니다. 사용자가 다른 대상을 요청하지 않는 한 다른 곳에 업로드하거나 게시하지 마세요.

출력 형식

간략하게 응답하세요:

• 스토리의 장면 아크를 한 줄로;
• 정확한 HTML 파일 이름과 링크;
• 컨트롤: Space(재생/일시 중지), Left/Right 화살표(장면 이동), N(나레이션), C(자막), F(전체 화면);
• 음성 선택기가 시청자의 브라우저/장치에 설치된 영어 음성을 나열하고 선택한 음성을 나레이션에 사용한다는 참고 사항;
• 스토리가 가상이거나 자리 표시자를 포함하는 경우 명확한 진술;
• 브라우저가 허용할 때 나레이션이 자동으로 시작되고, 그렇지 않으면 첫 번째 상호 작용이 시작한다는 참고 사항.

제약 조건

• 실제 소스가 제공된 경우 클라이언트 이름, 수치, 인용 또는 결과를 절대 조작하지 마세요.
• 실제 인용은 제공된 소스에 귀속시키세요.
• 완성된 경험을 독립적이고 브라우저에서 열 수 있게 유지하세요.
• 나레이션에 시청자의 브라우저 음성을 사용하세요.
• 음성 합성 또는 음성을 사용할 수 없는 경우 명확한 스테이지 내 메시지를 표시하고 시각적 스토리는 계속 사용할 수 있게 유지하세요.
• 입력 소스를 읽을 수 없는 경우 명확히 말하고 소스 사실을 조작하지 마세요.