Communitygithub.com

스크린샷 모션 스킬

스크린샷으로 제품 비디오를 생성합니다. 카드 스포트라이트, 다크 런치-필름, 오비탈 갤러리, 키네틱 그래픽, 프리즈매틱 폴드, 페이지 턴 스토리북 등 6가지 템플릿을 지원하며, 편집 가능한 카피, 라이선스 오디오, 데스크탑 편집 팩을 제공합니다. 스크린샷 프로모션, 앱 출시 비디오, 플립북 등에 활용할 수 있습니다.

스크린샷 모션 스킬란 무엇인가요?

이 스킬은 사용자가 제공한 스크린샷을 활용해 전문적인 제품 비디오를 자동으로 생성하는 AI 에이전트용 도구입니다. 6가지 구현된 템플릿(스포트라이트, 키네틱, 프리즘, 오비트, 런치, 스토리북)을 지원하며, 각 템플릿은 고유한 시각 효과와 지속 시간을 가집니다. Claude Code, Cursor, Codex 등 다양한 AI 코딩 어시스턴트 환경에서 실행할 수 있습니다. 주요 워크플로는 사용자가 스크린샷과 제품 정보를 제공하면, 스킬이 자동으로 적절한 템플릿을 선택하고 프로젝트 JSON을 생성한 후, Python 스크립트로 렌더링 작업을 준비하고 실행합니다. Node.js와 Chrome/Chromium이 필요하며, 준비된 작업 디렉토리 내에서 npm으로 종속성을 설치하고 `motion.py` 스크립트로 프레임 단위 미리보기와 최종 비디오를 렌더링합니다. 음악이나 효과음 추가는 라이선스를 확인한 후 가능하며, 데스크탑 편집용 팩(편집 가능한 SRT 자막, 오디오 스템, 원본 스크린샷 포함)도 제공합니다. 이 스킬은 단순히 데모 비디오를 제공하는 것이 아니라 확장 가능한 라이브러리입니다. 사용자는 새로운 템플릿을 추가하거나 기존 템플릿을 수정할 수 있으며, 자연어로 수정 요청을 하면 업데이트된 프로젝트를 다시 렌더링합니다. MIT 라이선스 기반으로 오픈소스이며, 사용자 에셋의 무단 게시나 글로벌 설치를 허용하지 않습니다.

지원 대상~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/simwy/screenshot-motion-skill/tree/HEAD

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

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

문서

스크린샷 모션 스킬은(는) 무엇을 하나요?

6가지 구현된 템플릿 중 하나로 실제 편집 가능한 비디오를 제작합니다.

템플릿효과스크린샷 수지속 시간
spotlight다섯 개의 카드가 펼쳐지고, 가운데 스크린샷이 히어로가 된 후 다시 일렬로 돌아옴정확히 5장12초
kinetic굵은 타이포그래피, 분할 화면 및 그래픽 전환정확히 5장16초
prism아코디언 화면, 레이어드 글라스 효과와 빛 스윕정확히 5장18초
orbit네온 오비탈 갤러리, 깊이 회전 및 최종 정렬정확히 5장18초
launch다크 편집 프로모션, 콜라주, 기능 클로즈업, 큰 헤드라인 및 CTA정확히 5장20초
storybook하드커버 열림, 그림책 페이지 넘김, 표지 닫힘1~12장설정 가능; 기본 5페이지 32초

스크린샷을 정리하기 전에 템플릿 선택 및 매핑을 읽으세요. 명시적으로 선택된 효과를 따르세요. 그렇지 않으면 사용자의 의도에 가장 가까운 템플릿을 추천/선택하고 이전 선택을 유지하세요. 모든 요청을 기본적으로 책 템플릿으로 설정하지 마세요. 권위 있는 템플릿 레지스트리는 templates.json입니다. 이는 확장 가능한 라이브러리이며 번들로 제공되는 완성된 데모 비디오가 아닙니다.

입력 및 결정

요청에서 홍보할 제품, 제공된 스크린샷 순서, 출력 언어를 식별하세요. 이전 선택을 유지하세요. 제품이 모호한 경우, 프로모션 문구를 작성하기 전에 명확히 하세요. 그렇지 않으면 합리적인 기본값을 사용하고 진행하세요. 기본값: 1920×1080, 30fps, 스토리북의 경우 4초 유지, 영어 설명 텍스트, 음성 내레이션 없음.

카피를 작성하기 전에 스크린샷을 검사하세요. 실제 UI를 사용하고, 컨트롤, 고객 수, 성능 주장, 가격 또는 다운로드 주소를 임의로 만들지 마세요. 설명 카피는 별도의 편집 가능한 레이어입니다. 스크린샷에 포함된 텍스트는 캡션을 변경해도 수정할 수 없습니다. 사용자가 제공하거나 적절히 라이선스된 미디어를 사용하세요. 비공개 스크린샷과 생성된 작업은 설치된 스킬 디렉토리 외부에 보관하세요.

사용자 상호작용

호출을 비디오 제작 요청으로 취급하세요. 스크린샷과 제품 세부 정보가 누락된 경우에만 요청하고, 도구를 사용할 수 있을 때 직접 설정을 작성하고 준비, 렌더링 및 믹싱을 실행하세요. 일반 워크플로우로 사용자에게 Python 명령어를 전달하거나 JSON을 작성하도록 요구하지 마세요. 로컬 종속성을 확인하고 구체적인 누락 요구 사항을 보고하세요. 실행 권한을 존중하고, 환경에서 수행할 수 없는 경우 사용자가 취해야 할 조치를 설명하세요.

자연어로 수정 요청을 수락하고, 생성된 프로젝트를 업데이트한 후 수정된 결과를 렌더링하세요. 스크린샷 또는 스토리북 지속 시간 변경의 경우, 구성 메타데이터가 일관되도록 새 작업을 준비하세요. 사용자가 명시적으로 요청하지 않는 한, 기술 명령어는 에이전트 실행 또는 개발자 문제 해결에 두세요. 수동 사용법은 개발자 렌더링 명령어를 참조하세요.

비디오 생성

  1. 설정 참조를 읽으세요. 사용자 에셋 옆에 프로젝트 JSON을 작성하고, examples/의 해당 예제를 시작점으로 사용하세요. 스크린샷 하나당 하나의 기능을 설명하는 짧고 구체적인 설명을 작성하세요. --template spotlight, --template launch, --template orbit, --template kinetic, --template prism 또는 --template storybook을 선택하세요. 아래 명령어는 storybook을 예시로 합니다. 검증된 줄 제한을 준수하세요.
  2. 격리된 작업을 준비하세요:
    python3 /path/to/screenshot-motion-skill/scripts/motion.py prepare --template storybook --config /path/to/project.json --out /path/to/new-job
    
    prepare는 기존 작업을 절대 덮어쓰지 않습니다. 작업에는 자체 렌더러, 복사된 스크린샷 및 정규화된 설정이 포함됩니다. 준비 후에는 헬퍼 CLI를 제외하고 스킬에 의존하지 않습니다.
  3. 새 작업 내부에서 npm install을 사용하여 종속성을 설치하세요. Node.js 22+ 및 Chrome/Chromium이 필요합니다. 대화형 미리보기를 위해 해당 작업에서 npm run studio를 사용하세요.
  4. 먼저 선택한 템플릿의 대표적인 정지 프레임을 렌더링하세요:
    python3 /path/to/screenshot-motion-skill/scripts/motion.py render --job /path/to/new-job --frame 150 --browser /path/to/chrome
    
    결과 PNG를 검사하세요. 전체 렌더링 전에 카피, 클리핑 또는 레이아웃을 수정하세요. 유용한 미리보기 프레임: spotlight 105/190/330; launch 60/150/250/355/450/550; orbit 45/170/270/380/490; kinetic 35/100/170/245/320/430; prism 70/150/240/330/470; storybook 150 및 첫 번째 턴 중간점 90 + holdFrames + 21. 작업 지속 시간 내에서 프레임을 선택하세요.
  5. --frame 없이 렌더링하세요. 이렇게 하면 out/video-silent.mp4가 생성됩니다. 자동 검색이 실패하면 기존 브라우저를 명시적으로 제공하세요. 스크립트는 브라우저를 다운로드하지 않습니다.
  6. motion.py mix --job /path/to/new-job을 실행하여 out/video.mp4를 만드세요. 오디오 입력이 없으면 무음 복사본을 만듭니다. 음악, 전환 사운드 또는 종이 사운드의 경우 오디오 및 라이선스를 읽으세요. 요청되고 적절한 권한이 있는 음성 서비스를 사용할 수 없는 한 내레이션을 추가하지 마세요.
  7. 출력 검사를 따르고, 소스 코드만이 아닌 렌더링된 파일을 검사한 후 실제 비디오와 작업 경로를 반환하세요. 내레이션, 듣기 또는 실시간 재생이 수행되었는지 정확히 설명하세요. 렌더링이 차단된 경우 특정 누락 종속성을 보고하고, 정지 이미지로 대체하여 비디오라고 부르지 마세요.

데스크탑 편집 전달

요청 시 편집 내보내기 및 호환성을 따르세요. 클린 모드를 렌더링하고 편집 가능한 SRT 캡션, 독립적인 오디오 스템, 원본 스크린샷 및 샷 클립이 포함된 휴대용 팩을 내보내세요. 모션 지오메트리는 베이크되어 있으며 가져온 캡션은 편집기 스타일링이 필요하다고 설명하세요. 최종 스타일링된 MP4를 참조용으로 유지하세요. 사용자의 앱/버전을 확인한 후에만 네이티브 드래프트 지원을 주장하세요. 선택적 레거시 Jianying 어댑터는 실험적이며 현재 macOS/Windows 또는 CapCut에서 확인되지 않았습니다. 응용 프로그램의 라이브러리에 드래프트를 자동으로 설치하지 마세요.

안정적인 구현 세부 사항

다음 페이지 컬 노트는 스토리북에 적용됩니다. 스포트라이트의 경우, 페인트 장벽과 화면 공간 레이블을 유지하세요. 런치의 경우, 보이는 UI에서 지원되는 경우에만 정규화된 region 크롭을 사용하세요. 이전 제품의 픽셀 좌표를 재사용하지 마세요.

  • 오른쪽으로 넘기는 페이지는 앞면에 이전 스크린샷, 뒷면에 다음 설명이 있습니다. 전체 스프레드를 크로스페이드하거나 뒤집힌 텍스트를 미러링하지 마세요.
  • 모든 지오메트리는 프레임 번호를 따릅니다. 벽시계 애니메이션이나 시드 없는 무작위성을 도입하지 마세요.
  • Canvas2D 스트립 메시는 중첩된 브라우저 3D 합성 문제를 피합니다. 평면 페이지 빠른 경로, 작은 스트립 오버랩 및 연속 조명 오버레이를 유지하세요. 스트립별 안티앨리어싱 쉐이딩은 텍스트에 가시적인 선을 만듭니다.
  • 카메라 거리 3000은 들어올려진 페이지 끝이 1080p 프레임 내에 있도록 합니다. 카메라 또는 페이지 크기 변경 후 전체 턴 범위를 다시 확인하세요.
  • 기본 렌더러는 이미지를 자르지 않고 맞춥니다. 가로 스크린샷이 지원됩니다. 세로 종횡비로 늘리지 마세요.
  • 기본적으로 순차적으로 렌더링하세요. 동시성을 높이려면 캡처된 프레임의 다른 시각적 확인이 필요합니다.

패키지의 원본 코드는 MIT 라이선스입니다. Remotion 및 미디어는 별도의 라이선스를 가집니다. THIRD_PARTY_NOTICES.md를 참조하세요. 이 스킬은 사용자 에셋 게시, 업로드, 계정 설정 변경 또는 전역 설치를 허가하지 않습니다.

라이브러리 확장

다른 효과를 추가하라는 요청을 받으면 확장 계약을 따르세요. 기존 템플릿을 교체하지 않고 렌더러, 레지스트리 항목 및 예제를 추가하세요. 새 효과와 관련된 기존 템플릿을 모두 확인하세요.

관련 스킬