사용 가이드로 건너뛰기
Web Video Presentation작성자 ConardLi

Web Video Presentation 스킬.

한 번에 하나의 말하기 단위씩, 영상처럼 속도를 맞춘 브라우저 프레젠테이션입니다.

  • 프레젠테이션
  • 모션
  • 내레이션
소스 검토 · Web Video PresentationSKILL.md
작업 프레젠테이션 결과물 • 챕터로 나뉜, 클릭으로 진행되는 16:9 React 프레젠테이션 • 소스에서 가져온 구어 스크립트, 챕터 개요, 보조 세부 내용 • 자동으로 넘어가는 녹화 모드를 위한 단계별 선택형 오디오 파일 시작하기 전에 Vite, React, TypeScript, Node 도구를 사용합니다. 선택형 TTS는 선택한 제공업체, 자격 증명, 어댑터에 따라 달라지며, 최종 녹화에는 브라우저 캡처 또는 녹화 소프트웨어가 필요합니다.
편집 요약 · 소스 검토일 2026-10-07 · 생성된 예시가 아님

01 기능 소개

Web Video Presentation

고정 스테이지, 검토를 거친 첫 챕터, 챕터별 내레이션 기록, 선택형 오디오 지원 녹화를 갖춘 내레이션 단위 프레젠테이션 워크플로입니다.

소스 기반 워크플로실행 벤치마크가 아님

작업 방식

Web Video Presentation은 제공된 자료를 녹화할 수 있는 웹 프레젠테이션으로 바꿉니다. 결과물은 고정된 16:9 스테이지 위의 Vite, React, TypeScript 프로젝트이며, 반응형 마케팅 사이트나 자동으로 제공되는 영상 파일이 아닙니다. 클릭할 때마다 내레이션 한 단위가 진행되고, 장면은 집중된 전체 화면 구성으로 교체됩니다.

이 워크플로는 두 가지 콘텐츠 기준을 유지합니다. 구어 스크립트는 순서와 속도를 정하고, 원문 글은 시각 자료를 풍부하게 하는 세부 내용을 제공합니다. 챕터의 narrations.ts는 단계 수와 텍스트, 선택형 오디오의 기준입니다. 첫 챕터를 먼저 완성하고 검토한 뒤 나머지 챕터에서 시각 표현을 확장합니다. 음성 합성은 웹 경험이 준비된 뒤 별도로 결정합니다.

예상 결과물

  • 챕터로 나뉜, 클릭으로 진행되는 16:9 React 프레젠테이션
  • 소스에서 가져온 구어 스크립트, 챕터 개요, 보조 세부 내용
  • 자동으로 넘어가는 녹화 모드를 위한 단계별 선택형 오디오 파일
예시 브리프 보기

브리프에서 검토까지

  1. 01
    스크립트와 개요 준비

    제공된 글을 보존하고, 원래 언어로 구어 스크립트를 다듬으며, 챕터 경계와 화면 내용을 계획합니다. 개요는 모든 애니메이션을 지정하지 않고 정보의 리듬을 정합니다.

  2. 02
    계획 맞추기

    스크립트, 개요, 테마, 에셋, 개발 방식을 함께 확인해 첫 챕터의 내용과 시각 브리프를 확정합니다.

  3. 03
    완성된 챕터 검토

    메인 에이전트가 실제 콘텐츠와 의도한 모션을 담은 첫 챕터를 완성하고, 정해진 검토와 수정을 마친 뒤, 이후 챕터로 넘어가기 전에 반드시 사용자 승인을 받기 위해 멈춥니다. 이 샘플로 속도와 디자인 토큰 불일치를 해결하세요.

  4. 04
    오디오와 녹화 선택

    요청하면 챕터 내레이션 기록으로 음성을 생성하고 구간 길이를 확인합니다. 그렇지 않으면 수동으로 진행하고 녹화나 편집 중에 보이스오버를 추가합니다.

02 활용 상황

사용하기 좋은 경우

Vite, React, TypeScript, Node 도구를 사용합니다. 선택형 TTS는 선택한 제공업체, 자격 증명, 어댑터에 따라 달라지며, 최종 녹화에는 브라우저 캡처 또는 녹화 소프트웨어가 필요합니다.

적합한 경우

  • 기술 설명개념을 한 번에 하나의 관계씩 드러내면서, 소리 내어 말하는 내용 외의 소스 세부 내용도 함께 전달해야 할 때 유용합니다.
  • 녹화하는 제품 발표브라우저에서 녹화할 튜토리얼과 제품 발표처럼, 각 단위마다 화면에 보이는 내용을 정밀하게 제어해야 하는 경우에 적합합니다.

확인할 한계

  • 반응형 웹사이트가 아님고정 스테이지는 사용 가능한 뷰포트에 맞게 크기가 조정됩니다. 이는 프레젠테이션 방식이며, 일반적인 모바일 읽기를 위해 설계된 레이아웃이 아닙니다.
  • 오디오는 선택 사항이며 외부 기능임음성에는 설정된 제공업체나 다른 TTS 경로가 필요합니다. 웹 프로젝트가 완성되었다고 해서 음성 합성이나 최종 영상 녹화가 이루어졌다는 증거는 아닙니다.

준비할 입력

  • 글 또는 스크립트실질적인 내용이 있는 소스 콘텐츠나 개요를 제공하세요. 이 스킬은 발표에서 무엇을 말할지 결정하는 일을 대신하는 것으로 소개되지 않습니다.
  • 테마와 에셋시각적 분위기를 정하고, 계획된 챕터에 사용할 수 있는 제품 캡처, 다이어그램 또는 승인된 플레이스홀더를 정하세요.
  • 협업과 오디오이후 챕터를 각각 검토할지 함께 완성할지 정하고, 음성 생성 백엔드는 별도로 승인하세요.

03 핵심 결정

중요한 결정

  1. 하나의 내레이션 기록

    챕터에서 렌더링되는 단계 수와 내레이션 배열을 맞추면 화면 순서, 음성 텍스트, 생성된 오디오 구간 간의 불일치가 줄어듭니다.

  2. 콘텐츠 중심 모션

    개요는 애니메이션 결정을 구현 단계에 맡깁니다. 그래서 너무 일찍 임의의 효과를 지정하지 않고, 실제로 설명할 관계에 따라 등장 방식을 정할 수 있습니다.

04 예시 브리프

구체적인 브리프로 시도하기

아래 예시 브리프는 테스트되지 않았습니다. 사용하기 전에 스킬의 설정을 확인하세요.

설정 검토

스캐폴드, 챕터 참조, 테마, 선택형 오디오 스크립트를 포함해 저장소의 스킬 패키지 전체를 유지하세요.

업스트림 소스 파일
https://github.com/ConardLi/garden-skills/blob/aaf9a82f5efd73e87cc0998edc398e75bfc35901/skills/web-video-presentation/SKILL.md

Vite, React, TypeScript, Node 도구를 사용합니다. 선택형 TTS는 선택한 제공업체, 자격 증명, 어댑터에 따라 달라지며, 최종 녹화에는 브라우저 캡처 또는 녹화 소프트웨어가 필요합니다.

하나의 결과물부터 시작

스킬을 실행하기 전에 이 브리프의 범위, 소스 자료, 제약 조건을 상황에 맞게 조정하세요.

예시 브리프
Web Video Presentation을 사용해 첨부한 브라우저 렌더링 글을 5분 분량의 영어 설명 영상으로 만들어 주세요. 원문 글은 유지하고, 구어 스크립트와 개요를 만들며, 절제된 기술 테마를 제안해 주세요. 첫 챕터는 텍스트만 있는 슬라이드가 아니라 레이아웃과 페인트의 차이를 보여 주세요. 이후 챕터를 만들기 전에 검토를 위해 멈춰 주세요. 제가 오디오 제공업체를 선택하기 전까지는 음성을 합성하지 마세요.

결과 점검

실제 출력이 다음의 관찰 가능한 기준에 맞는지 확인하세요.

  • 각 챕터에서 보이는 단계 수가 내레이션 항목 수와 일치합니다.
  • 첫 챕터는 문단만이 아니라 시각적 시연으로 개념을 전달합니다.
  • 오디오 파일과 자동 재생은 해당 선택 단계가 실제로 완료된 경우에만 보고됩니다.

OpenDesign은 코딩 에이전트를 위한 로컬 디자인 작업 공간을 제공합니다. 이 목록은 스킬이 번들로 제공된다거나, 외부 도구, 자격 증명, 소프트웨어 종속성이 포함된다는 뜻이 아닙니다.

05 출처 및 라이선스

소스 및 라이선스

이 페이지는 아래에 링크된 고정 소스 리비전을 설명합니다. 업스트림의 동작과 요구 사항은 바뀔 수 있습니다.

소스 소유자
ConardLi
라이선스
MIT
검토한 스냅샷
2026-10-07 · aaf9a82f5efd
편집 소스 요약
고정 스테이지, 검토를 거친 첫 챕터, 챕터별 내레이션 기록, 선택형 오디오 지원 녹화를 갖춘 내레이션 단위 프레젠테이션 워크플로입니다.

링크된 소스를 바탕으로 OpenDesign이 작성한 원본 요약입니다. 저장소 스타 수는 날짜 기준의 인기 지표이며 스킬 사용량이나 품질 점수가 아닙니다.

06 시작 전 질문

시작 전 질문

결과물이 MP4인가요?

핵심 결과물은 브라우저 프로젝트입니다. 녹화와 후반 작업을 통해 그 경험을 영상으로 만들며, 선택형 음성 파일은 녹화 중 재생을 자동화하는 데 도움이 될 수 있습니다.

직접 사용하는 음성 제공업체를 쓸 수 있나요?

소스는 기본 경로와 어댑터를 갖춘, 제공업체에 구애받지 않는 러너를 설명합니다. 작동하는 계정이나 로컬 도구는 여전히 설정해야 합니다.

스크립트를 쓴 뒤에도 글을 보관하는 이유는 무엇인가요?

스크립트는 말하기의 리듬을 정하지만, 원문 글은 내레이션을 과밀하게 하지 않고 화면을 뒷받침할 수 있는 예시, 수치, 세부 내용의 원천으로 남습니다.

OpenDesign

다음 디자인 반복을 위한 여유를 만드세요.

브리프, 소스 자료, 디자인 작업을 로컬 작업 공간에 함께 보관하세요. 워크플로에 추가하기 전에 스킬 자체의 설정을 확인하세요.

업스트림 소스 파일
https://github.com/ConardLi/garden-skills/blob/aaf9a82f5efd73e87cc0998edc398e75bfc35901/skills/web-video-presentation/SKILL.md