Communitygithub.com

foolhardy45/portfolio

Stitch 프로젝트의 화면을 활용하여 부드러운 전환, 줌 효과, 텍스트 오버레이가 포함된 워크스루 비디오를 Remotion으로 생성합니다.

portfolio란 무엇인가요?

이 스킬은 Stitch MCP 서버에서 앱 디자인 화면을 가져와 Remotion을 사용하여 전문적인 워크스루 비디오를 제작하는 방법을 제공합니다. 사용자는 먼저 Stitch 프로젝트와 화면 목록을 조회하고, 각 화면의 스크린샷과 메타데이터를 다운로드한 후, Remotion 프로젝트에서 이를 조합하여 비디오를 생성합니다. 주요 기능으로는 페이드, 슬라이드, 줌과 같은 다양한 전환 효과와 화면 제목, 설명, 진행률 표시기 등의 텍스트 오버레이를 지원합니다. 또한 대화형 핫스팟, 음성 해설 통합, Stitch HTML 코드에서 텍스트를 추출하는 동적 텍스트 추출과 같은 고급 기능도 제공합니다. 이 스킬은 개발자나 디자이너가 별도의 비디오 편집 도구 없이도 앱 프로토타입의 시연 동영상을 손쉽게 제작할 수 있도록 도와줍니다.

지원 대상~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/foolhardy45/portfolio/tree/HEAD/.claude/skills/remotion
원본 보기→모든 스킬 둘러보기

즐겨 사용하는 AI에게 물어보기

이 에이전트 스킬이 미리 로드된 새 채팅을 엽니다.

OpenAIChatGPTClaudeClaudeGeminiGeminiGrokGrokPerplexityPerplexityDeepSeekDeepSeek

문서

Stitch에서 Remotion 워크스루 비디오 만들기

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

개요

이 스킬은 전문적인 전환, 줌 효과, 상황에 맞는 텍스트 오버레이를 사용하여 앱 화면을 소개하는 워크스루 비디오를 만들 수 있게 해줍니다. 작업 흐름은 Stitch 프로젝트에서 화면을 가져와 Remotion 비디오 합성으로 구성합니다.

사전 요구 사항

필수:

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

권장:

  • Remotion의 비디오 기능에 대한熟悉
  • 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. 화면 메타데이터 가져오기: 각 화면에 대해:

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

  4. 자산 다운로드:

    • web_fetch 또는 curl이 포함된 Bash를 사용하여 스크린샷 다운로드
    • 스테이징 디렉토리에 저장: 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. 애니메이션 미세 조정:

    • 줌 효과에 대한 스프링 설정 조정
    • 전환에 대한 이징 함수 수정
    • 텍스트가 항상 읽기 쉬운지 확인

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를 유지 관리합니다. 고급 기술에 대해서는 다음을 검토하세요:

활용할 주요 Remotion 스킬:

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

일반적인 패턴

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

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

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

패턴 2: 기능 강조

특정 UI 요소에 집중:

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

패턴 3: 사용자 흐름

단계별 사용자 여정 표시:

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

문제 해결

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

모범 사례

  1. 종횡비 유지: 실제 Stitch 화면 크기를 사용하거나 비례적으로 크기 조정
  2. 일관된 타이밍: 특정 화면을 강조하지 않는 한 화면 표시 시간을 일관되게 유지
  3. 읽기 쉬운 텍스트: 충분한 명암비 보장; 적절한 글꼴 크기 사용; 어수선한 오버레이 피하기
  4. 부드러운 전환: 자연스러운 움직임을 위해 스프링 애니메이션 사용; 갑작스러운 컷 피하기
  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, 소셜 미디어 등)

참고 자료

사용 시기

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

Individual skills in this repo

This repo contains 2 individual skills — each has its own dedicated page.

foolhardy45/portfolio

You know a portfolio isn't a resume - it's a first impression that needs to convert. You balance creativity with usability. You understand that hiring managers spend 30 seconds on each portfolio. You make those 30 seconds count. You help people stand out without being gimmicky.

foolhardy45/portfolio

Generates high-converting Next.js/React landing pages with Tailwind CSS. Uses PAS, AIDA, and BAB frameworks for optimized copy/components (Heroes, Features, Pricing). Focuses on Core Web Vitals/SEO.

관련 스킬

steipete/video-frames

Extract frames or short clips from videos using ffmpeg.

community

steipete/summarize

Summarize or transcribe URLs, YouTube/videos, podcasts, articles, transcripts, PDFs, and local files.

community

openclaw/openclaw

Use when testing, fixing, or extending the OpenClaw Control UI GUI with Vitest + Playwright end-to-end checks, mocked Gateway WebSocket flows, mocked dashboard runs, screenshots/videos, or agent-verifiable browser proof.

community

obra/superpowers

Obra superpowers agent skills.

community

affaan-m/ECC

See, Understand, Act on video and audio. See- ingest from local files, URLs, RTSP/live feeds, or live record desktop; return realtime context and playable stream links. Understand- extract frames, build visual/semantic/temporal indexes, and search moments with timestamps and auto-clips. Act- transcode and normalize (codec, fps, resolution, aspect ratio), perform timeline edits (subtitles, text/image overlays, branding, audio overlays, dubbing, translation), generate media assets (image, audio...

community

affaan-m/everything-claude-code

End-to-end marketing campaign planning and execution. Covers audience research, positioning, campaign angle definition, landing page copy, email sequences, social posts, ad copy, short-form video scripts, and content calendars. Use as the orchestration layer for multi-channel product launches. Use when planning or executing a multi-channel product launch, or producing landing page, email, social, or ad copy.

community