무료
Solenne · 16:9
이 Skill로 렌더링한 결과
프로덕트 런치 모션 v1.0.0
앱이나 웹사이트를 위한 Dribbble급 런칭 영상. 컷 없이 변하는 하나의 UI 도형, 모든 클릭을 하는 커서, 스프링, 돌아가는 숫자, 박자에 맞춘 사운드.
아직 평가 없음 0 다운로드
- 포맷
- 영상 · 16:9
- 길이
- 0:30
최고의 모션 디자이너처럼 런칭 영상을 연출하는 오픈소스 Skill입니다. 하나의 요소가 버튼에서 슬라이더, 토글, 차트로 컷 없이 변하고, 커서가 모든 변화를 이끌며, 숫자는 오도미터로 올라가고 모든 클릭과 휙 소리가 음악의 박자에 맞춰 떨어집니다. 에이전트가 스토리를 쓰고 HTML로 영상을 만들어 모션 블러가 들어간 60fps로 렌더링한 MP4를 건넵니다.
2026년 11월 2일 업데이트
받게 되는 것
- 완성된 런칭 영상, H.264 MP4, 1920×1080, 모션 블러가 들어간 60fps
- 모든 프레임이 시간의 함수인, 바로 편집할 수 있는 HTML 영상
- 박자별 컨택트 시트와 1초 간격 스토리보드
- 음악과 박자에 맞춰 믹스한 합성 효과음
잘 맞는 경우
- 앱, SaaS, 웹사이트 런칭
- 기능 출시와 제품 업데이트
- 브랜드 스팅과 UI 모션 릴
맞지 않는 경우
- 얼굴이 나오는 영상이나 실사 촬영 영상
- 내레이션 대본이 있는 설명 영상
이 Skill에 대하여
이렇게 말하세요
/product-launch-motion localhost:3000에 있는 내 앱으로 30초 런칭 영상을 만들어 줘. 하나의 도형이 컷 없이 변해: 카드가 슬라이더, 토글, 상태 필, 대시보드가 돼. 이 120 BPM 곡을 쓰고 가입자 수가 드롭에 맞춰 나오게 해 줘.
에이전트에게 웹사이트나 앱을 맡기세요. 고객의 문제에서 스토리를 뽑아 런칭 영상을 연출합니다. 헤드라인이 한 단어씩 내려앉고, 요청이 타이핑되고, 그다음은 하나의 도형이 데모 전체를 이끕니다. 커서가 클릭하고 드래그할 때마다 카드가 슬라이더, 토글, 상태 필, 대시보드로 변합니다. 카메라는 다가가 각 상태가 화면을 꽉 채우게 하고, 물러나며 규모를 보여 주고, 마지막에는 숫자가 올라가고 로고가 음악의 드롭에 맞춰 착지합니다.
작동 방식
- 연출안 먼저: 에이전트가 제품을 읽고 짧은 크리에이티브 플랜을 씁니다. 스토리와 하이라이트, 브랜드 표현, 음악, 박자별 장면 목록까지. 크리에이티브 결정은 스스로 내리고 하나씩 적어 두니, 어떤 것이든 한 줄로 뒤집을 수 있습니다.
- 음악 먼저: numpy로 곡의 박자 그리드를 측정하고 모든 장면을 거기에 맞춥니다. 매 박자마다 무언가 일어나고, 가장 큰 순간은 드롭에 떨어집니다.
- 하나의 HTML 영상: 모든 프레임이 시간으로 계산됩니다. 닫힌 형식의 스프링, 토글과 탭의 앞뒤 가장자리가 따로 움직이며 늘어나는 모션, 블러가 들어간 내용 전환, 기울고 눌리고 물결이 퍼지는 커서, 그리고 숫자를 보여 주는 오도미터.
- 사운드: UI 효과음은 처음부터 합성하고, 각 소리의 피크를 박자에 맞춰 배치합니다.
- 검수와 렌더링: 박자마다 한 장씩 컨택트 시트로 확인해 고친 뒤, Playwright가 프레임당 4개의 서브프레임을 렌더링하고 FFmpeg가 이를 합쳐 진짜 모션 블러가 들어간 60fps로 완성합니다.
팁
- 빌드업과 드롭이 있는 120 BPM 안팎의 로열티 프리 곡을 가져오거나 에이전트에게 찾게 하세요.
- 도형이 변했으면 하는 상태를 8~12개 적거나 "알아서 해 줘"라고 하세요.
- 실제 숫자를 주세요. 큰 숫자는 사실대로 쓰고, 어떤 디테일을 지어냈는지 알려 줍니다.
- Claude Opus 5.5로 쓰면 가장 좋습니다. 고급스러움은 디테일에서 나옵니다.
오픈소스
Product Launch Motion은 Muhammad Abubakr(AbubakrChan/product-launch-motion)가 만들었고 MIT 라이선스로 공개되어 있습니다. 다운로드는 GitHub에 공개된 Skill 그대로이며, 작가가 Cheerful을 위해 만든 샘플 영상은 포함하지 않습니다.
시작 전에 필요한 것
- 준비물
- 웹사이트나 앱, 보여 주고 싶은 스토리나 상태, 실제 숫자와 로고, 선택 사항으로 120 BPM 안팎의 로열티 프리 곡.
- 의존성
- Node.js 20 이상 — 필수 · Playwright Chromium — 필수 · FFmpeg — 필수 · Python 3.9 이상 — 필수
- 외부 비용
- 없음. 영상은 내 컴퓨터에서 만들고 렌더링하며 효과음은 합성합니다. API 키나 유료 서비스는 쓰지 않습니다.
- 마지막 테스트
- v1.0.0 —
사용자 리뷰
아직 리뷰가 없습니다. Skill을 설치하고 첫 평가를 남겨 보세요.
자주 묻는 질문
'하나의 도형, 컷 없음'이 무슨 뜻인가요?
데모 전체가 하나의 요소로, 크기와 모서리 반경, 색을 바꾸고 내용은 짧은 블러로 전환됩니다. 버튼이 로더, 슬라이더, 토글, 차트로 바뀌니 시선이 길을 잃지 않습니다.
음악이 꼭 필요한가요?
빌드업과 드롭이 있는 120 BPM 안팎의 로열티 프리 곡과 가장 잘 맞습니다. 직접 가져와도 되고, 에이전트에게 찾게 해서 핵심 순간에 맞춰 빌드업과 드롭을 짜게 해도 됩니다.
렌더링 후에도 바꿀 수 있나요?
네. 영상은 모든 프레임이 시간으로 계산되는 HTML 파일 하나라서, 문구, 색, 타이밍, 장면 전체를 바꾸고 다시 렌더링하면 됩니다.
왜 무료인가요?
Product Launch Motion은 Muhammad Abubakr의 오픈소스 Skill입니다. 그대로 소개하며, 샘플은 저희 스마트홈 앱 Solenne에 직접 돌려 만들었습니다.
