Stitch to Remotion Walkthrough Videos

Stitch to Remotion 워크스루 비디오

선택적 읽기 규칙

다음부터 시작하세요:

• references/senior-master-standard.md
• references/usage-routing.md
• references/quality-checklist.md

그런 다음 사용자의 실제 작업과 일치하는 상속된 문서, 스크립트, 에셋 또는 예제만 로드하세요.

당신은 앱 디자인에서 매력적인 워크스루 비디오를 제작하는 데 특화된 비디오 제작 전문가입니다. Stitch의 화면 검색 기능과 Remotion의 프로그래매틱 비디오 생성 기능을 결합하여 부드럽고 전문적인 프레젠테이션을 제작합니다.

개요

이 스킬을 사용하면 전문적인 전환, 줌 효과, 컨텍스트 기반 텍스트 오버레이로 앱 화면을 보여주는 워크스루 비디오를 만들 수 있습니다. 워크플로는 Stitch 프로젝트에서 화면을 검색하여 Remotion 비디오 컴포지션으로 오케스트레이션합니다.

전제 조건

필수:

• Stitch MCP 서버에 접근 가능
• Remotion MCP 서버(또는 Remotion CLI)에 접근 가능
• Node.js 및 npm 설치
• 디자인된 화면이 있는 Stitch 프로젝트

권장:

• Remotion의 비디오 기능에 대한 familiarity
• React 컴포넌트 이해 (Remotion은 React 사용)

검색 및 네트워킹

1단계: 사용 가능한 MCP 서버 확인

list_tools를 실행하여 사용 가능한 MCP 서버와 해당 접두사를 확인하세요:

• Stitch MCP: stitch: 또는 mcp_stitch: 접두사 확인
• Remotion MCP: remotion: 또는 mcp_remotion: 접두사 확인

2단계: Stitch 프로젝트 정보 검색

1. 프로젝트 조회 (프로젝트 ID가 제공되지 않은 경우):

   • [stitch_prefix]:list_projects 호출 (filter: "view=owned")
   • 제목으로 대상 프로젝트 식별 (예: "Calculator App")
   • name 필드에서 프로젝트 ID 추출 (예: projects/13534454087919359824)

2. 화면 검색:

   • 프로젝트 ID로 [stitch_prefix]:list_screens 호출 (숫자만)
   • 화면 제목을 검토하여 워크스루에 포함할 모든 화면 식별
   • 각 화면의 name 필드에서 화면 ID 추출

3. 화면 메타데이터 가져오기: 각 화면에 대해:

   • projectId와 screenId로 [stitch_prefix]:get_screen 호출
   • 다음 정보 검색:
     • screenshot.downloadUrl — 비디오용 시각 에셋
     • htmlCode.downloadUrl — 선택 사항: 텍스트/콘텐츠 추출용
     • width, height — 적절한 크기 조정을 위한 화면 크기
     • 텍스트 오버레이용 화면 제목 및 설명

4. 에셋 다운로드:

   • web_fetch 또는 Bash의 curl을 사용하여 스크린샷 다운로드
   • 스테이징 디렉토리에 저장: assets/screens/{screen-name}.png
   • 의도한 워크스루 순서에 따라 에셋 정리

3단계: Remotion 프로젝트 설정

1. 기존 Remotion 프로젝트 확인:

   • remotion.config.ts 또는 Remotion 의존성이 있는 package.json 확인
   • 존재하면 기존 프로젝트 구조 사용

2. 새 Remotion 프로젝트 생성 (필요한 경우):

   npm create video@latest -- --blank
   

   • TypeScript 템플릿 선택
   • 전용 video/ 디렉토리에 설정

3. 의존성 설치:

   cd video
   npm install @remotion/transitions @remotion/animated-emoji
   

비디오 구성 전략

아키텍처

다음 컴포넌트로 모듈식 Remotion 구성을 만듭니다:

1. ScreenSlide.tsx — 개별 화면 표시 컴포넌트

   • Props: imageSrc, title, description, width, height
   • 기능: 확대 애니메이션, 페이드 전환
   • 지속 시간: 설정 가능 (기본 화면당 3~5초)

2. WalkthroughComposition.tsx — 기본 비디오 구성

   • 여러 ScreenSlide 컴포넌트 시퀀싱
   • 화면 간 전환 처리
   • 텍스트 오버레이 및 주석 추가

3. config.ts — 비디오 구성

   • 프레임 속도 (기본: 30fps)
   • 비디오 크기 (Stitch 화면 크기와 일치하거나 적절히 조정)
   • 총 지속 시간 계산

전환 효과

전문적인 효과를 위해 Remotion의 @remotion/transitions 사용:

• 페이드: 화면 간 부드러운 크로스페이드

  import {fade} from '@remotion/transitions/fade';
  

• 슬라이드: 방향성 슬라이드 전환

  import {slide} from '@remotion/transitions/slide';
  

• 줌: 강조를 위한 확대/축소 효과

  • 부드러운 줌을 위해 spring() 애니메이션 사용
  • 중요한 UI 요소에 적용

텍스트 오버레이

Remotion의 텍스트 렌더링을 사용하여 컨텍스트 정보 추가:

1. 화면 제목: 각 프레임의 상단 또는 하단에 표시
2. 기능 콜아웃: 애니메이션 포인터로 특정 UI 요소 강조
3. 설명: 각 화면에 대한 설명 텍스트 페이드 인
4. 진행 표시기: 워크스루에서 현재 화면 위치 표시

실행 단계

1단계: 화면 에셋 수집

1. 대상 Stitch 프로젝트 식별
2. 프로젝트의 모든 화면 나열
3. 각 화면의 스크린샷 다운로드
4. 워크스루 순서대로 정리
5. 매니페스트 파일 생성 (screens.json):

{
  "projectName": "Calculator App",
  "screens": [
    {
      "id": "1",
      "title": "Home Screen",
      "description": "Main calculator interface with number pad",
      "imagePath": "assets/screens/home.png",
      "width": 1200,
      "height": 800,
      "duration": 4
    },
    {
      "id": "2",
      "title": "History View",
      "description": "View of previous calculations",
      "imagePath": "assets/screens/history.png",
      "width": 1200,
      "height": 800,
      "duration": 3
    }
  ]
}

2단계: Remotion 컴포넌트 생성

Remotion 모범 사례에 따라 비디오 컴포넌트 생성:

1. ScreenSlide.tsx 생성:

   • 애니메이션에 useCurrentFrame() 및 spring() 사용
   • 줌 및 페이드 효과 구현
   • 적절한 타이밍으로 텍스트 오버레이 추가

2. WalkthroughComposition.tsx 생성:

   • 화면 매니페스트 임포트
   • <Sequence> 컴포넌트로 화면 시퀀싱
   • 화면 간 전환 적용
   • 적절한 타이밍 및 오프셋 계산

3. remotion.config.ts 업데이트:

   • 구성 ID 설정
   • 비디오 크기 구성
   • 프레임 속도 및 지속 시간 설정

참고 자료:

• 시작점으로 resources/screen-slide-template.tsx 사용
• 완전성을 위해 resources/composition-checklist.md 참고
• examples/walkthrough/ 디렉토리의 예제 검토

3단계: 미리보기 및 개선

1. Remotion Studio 시작:

   npm run dev
   

   • 브라우저 기반 미리보기 열림
   • 실시간 편집 및 개선 가능

2. 타이밍 조정:

   • 각 화면에 적절한 표시 지속 시간이 있는지 확인
   • 전환이 부드러운지 확인
   • 텍스트 오버레이 타이밍 확인

3. 애니메이션 미세 조정:

   • 줌 효과를 위한 spring 구성 조정
   • 전환을 위한 easing 함수 수정
   • 텍스트가 항상 읽기 쉬운지 확인

4단계: 비디오 렌더링

1. Remotion CLI로 렌더링:

   npx remotion render WalkthroughComposition output.mp4
   

2. 대안: Remotion MCP 사용 (가능한 경우):

   • 구성 세부 정보와 함께 [remotion_prefix]:render 호출
   • 출력 형식 지정 (MP4, WebM 등)

3. 최적화 옵션:

   • 품질 수준 설정 (--quality)
   • 코덱 구성 (--codec h264 또는 h265)
   • 병렬 렌더링 활성화 (--concurrency)

고급 기능

대화형 핫스팟

클릭 가능한 요소나 중요한 기능을 강조:

import {interpolate, useCurrentFrame} from 'remotion';

const Hotspot = ({x, y, label}) => {
  const frame = useCurrentFrame();
  const scale = spring({
    frame,
    fps: 30,
    config: {damping: 10, stiffness: 100}
  });
  
  return (
    <div style={{
      position: 'absolute',
      left: x,
      top: y,
      transform: `scale(${scale})`
    }}>
      <div className="pulse-ring" />
      <span>{label}</span>
    </div>
  );
};

음성 해설 통합

워크스루에 내레이션 추가:

1. 화면 설명에서 음성 해설 스크립트 생성
2. 텍스트 음성 변환 사용 또는 오디오 녹음
3. <Audio> 컴포넌트로 Remotion에 오디오 가져오기
4. 화면 타이밍을 음성 해설 속도와 동기화

동적 텍스트 추출

Stitch HTML 코드에서 텍스트를 추출하여 자동 주석 생성:

1. 각 화면에 대해 htmlCode.downloadUrl 다운로드
2. HTML을 파싱하여 주요 텍스트 요소 추출 (제목, 버튼, 레이블)
3. 중요한 UI 요소에 대한 자동 콜아웃 생성
4. 타이밍된 텍스트 오버레이로 구성에 추가

파일 구조

project/
├── video/                      # Remotion 프로젝트 디렉토리
│   ├── src/
│   │   ├── WalkthroughComposition.tsx
│   │   ├── ScreenSlide.tsx
│   │   ├── components/
│   │   │   ├── Hotspot.tsx
│   │   │   └── TextOverlay.tsx
│   │   └── Root.tsx
│   ├── public/
│   │   └── assets/
│   │       └── screens/        # 다운로드된 Stitch 스크린샷
│   │           ├── home.png
│   │           └── history.png
│   ├── remotion.config.ts
│   └── package.json
├── screens.json                # 화면 매니페스트
└── output.mp4                  # 렌더링된 비디오

Remotion 스킬과의 통합

Remotion은 모범 사례를 정의하는 자체 Agent Skills를 유지 관리합니다. 고급 기술을 위해 이를 검토하세요:

• 저장소: https://github.com/remotion-dev/remotion/tree/main/packages/skills
• 설치: npx skills add remotion-dev/skills

활용할 주요 Remotion 스킬:

• 애니메이션 타이밍 및 이징
• 구성 아키텍처 패턴
• 성능 최적화
• 오디오 동기화

일반적인 패턴

패턴 1: 간단한 슬라이드 쇼

페이드 전환이 있는 기본 워크스루:

• 화면당 3~5초
• 크로스페이드 전환
• 화면 제목이 있는 하단 텍스트 오버레이
• 상단 진행 표시줄

패턴 2: 기능 강조

특정 UI 요소에 초점:

• 특정 영역으로 줌 인
• 기능을 가리키는 애니메이션 원/화살표
• 주요 상호 작용에 대한 슬로우 모션 강조
• 이전/이후 나란히 비교

패턴 3: 사용자 흐름

단계별 사용자 여정 표시:

• 방향성 슬라이드가 있는 순차적 화면 흐름
• 번호가 매겨진 단계 오버레이
• 사용자 작업 강조 (클릭, 탭)
• 애니메이션 경로로 화면 연결

문제 해결

문제	해결책
흐릿한 스크린샷	다운로드한 이미지가 전체 해상도인지 확인; screenshot.downloadUrl 품질 설정 확인
정렬이 안 맞는 텍스트	화면 크기가 구성 크기와 일치하는지 확인; 실제 화면 크기에 따라 텍스트 위치 조정
끊기는 애니메이션	프레임 속도를 60fps로 증가; 적절한 damping으로 올바른 spring 구성 사용
Remotion 빌드 실패	Node 버전 호환성 확인; 모든 의존성이 설치되었는지 확인; Remotion 문서 검토
타이밍이 어색함	매니페스트에서 화면당 지속 시간 조정; Remotion Studio에서 미리보기; 실제 사용자로 테스트

모범 사례

1. 종횡비 유지: 실제 Stitch 화면 크기를 사용하거나 비례적으로 조정
2. 일관된 타이밍: 특정 화면을 강조하지 않는 한 화면 표시 지속 시간을 일관되게 유지
3. 읽기 쉬운 텍스트: 충분한 대비 보장; 적절한 글꼴 크기 사용; 지저분한 오버레이 피하기
4. 부드러운 전환: 자연스러운 움직임을 위해 spring 애니메이션 사용; 갑작스러운 컷 피하기
5. 철저한 미리보기: 최종 렌더링 전에 항상 Remotion Studio에서 미리보기
6. 에셋 최적화: 이미지를 적절히 압축; 효율적인 형식 사용 (UI는 PNG, 사진은 JPG)

사용 예시

사용자 프롬프트:

내 Stitch 프로젝트 "Calculator App"의 화면을 찾아서 화면 워크스루를 보여주는 remotion 비디오를 만들어 줘.

에이전트 워크플로:

1. Stitch 프로젝트 나열 → "Calculator App" 찾기 → 프로젝트 ID 추출
2. 프로젝트의 화면 나열 → 모든 화면 식별 (Home, History, Settings)
3. 각 화면의 스크린샷 다운로드 → assets/screens/에 저장
4. 화면 메타데이터로 screens.json 매니페스트 생성
5. Remotion 컴포넌트 생성 (ScreenSlide.tsx, WalkthroughComposition.tsx)
6. Remotion Studio에서 미리보기 → 타이밍 및 전환 개선
7. 최종 비디오 렌더링 → calculator-walkthrough.mp4
8. 비디오 미리보기 링크와 함께 완료 보고

성공을 위한 팁

• 간단하게 시작: 복잡한 애니메이션을 추가하기 전에 기본 페이드 전환부터 시작
• Remotion 패턴 따르기: Remotion의 공식 스킬 및 문서 활용
• 매니페스트 파일 사용: 화면 데이터를 JSON으로 정리하여 쉽게 업데이트
• 자주 미리보기: Remotion Studio를 사용하여 문제를 조기에 발견
• 접근성 고려: 캡션 추가; 텍스트가 읽기 쉬운지 확인; 명확한 시각 자료 사용
• 플랫폼에 맞게 최적화: 대상 플랫폼(YouTube, 소셜 미디어 등)에 맞게 비디오 크기 조정

참고 자료

• Stitch 문서: https://stitch.withgoogle.com/docs/
• Remotion 문서: https://www.remotion.dev/docs/
• Remotion 스킬: https://www.remotion.dev/docs/ai/skills
• Remotion MCP: https://www.remotion.dev/docs/ai/mcp
• Remotion 전환: https://www.remotion.dev/docs/transitions

사용 시기

이 스킬은 위에서 설명한 기본 도메인 또는 기능과 관련된 작업을 처리할 때 사용하세요.

제한 사항

• 이 스킬은 작업이 위에서 설명한 범위와 명확히 일치하는 경우에만 사용하세요.
• 출력물을 환경별 검증, 테스트 또는 전문가 검토의 대체물로 취급하지 마세요.
• 필수 입력, 권한, 안전 경계 또는 성공 기준이 누락된 경우 중단하고 명확히 요청하세요.