
미리보기 갤러리
비슷한 Skill
모든 Skill 보기제공 내용
- 16~20초 분량의 1920x1080 MP4: 어두운 스튜디오의 디바이스에 실제 제품 화면이 나타나고, 큼직한 커서 아래에서 스크롤되며, 동작 하나를 수행하고, 핵심 주장을 말한 뒤, 로크업을 드러냅니다.
- CSS 원근감으로 디바이스를 구현한 편집 가능한 프로젝트 — 3D 모델도, WebGL도, 로더도, 라이선스할 것도 없습니다 — 그리고 평평한 판을 실제 사물처럼 보이게 하는 transform 스택.
- 연출 노하우: 줌인해도 버티는 화면을 캡처하는 방법, 인터페이스로의 줌인이 카메라 이동이 아니라 피사체의 전환인 이유, 그리고 잘 작동하는 두 가지 이음매.
이런 분께 추천
- 제품에 보여 줄 만한 화면이 있고, 런칭의 목적이 그 제품이 실재하고 작동함을 증명하는 것일 때.
- 내 사이트나 앱에서 그 화면을 실제로 캡처할 수 있을 때.
- 제품 전체를 둘러보기보다 동작 하나를 제대로 보여 주고 싶을 때.
이런 분께는 비추천
- 인터페이스가 없는 제품, 또는 화면을 목업으로 만들어야 하는 경우 — 스튜디오 속 디바이스에 목업을 띄우는 건 아무것도 보여 주지 않는 매우 비싼 방법입니다.
- 여러 기능을 시연해야 하는 영상. 인터페이스 안에서 동작이 두 개가 되면 런칭 영상이 튜토리얼이 됩니다. 더 길고, 더 느리고, 다른 시청자를 위한 것입니다.
- 특정 제조사의 휴대폰이나 제3자 사이트를 화면에 보여 주고 싶은 경우.
SNS 콘텐츠·캠페인제품 런칭·앱 성장브랜드 소셜 영상 제작제품 런칭 홍보 영상 제작제품 데모 영상 제작근거 우선단계별 확인세련된 비주얼색수차 분할 리빌CSS 원근 슬래브다크 스튜디오 디바이스인터페이스 줌 스루초대형 커서
이 Skill 소개

시작 전에 필요한 것
- 준비할 것
- 스크롤할 수 있을 만큼 긴, 제품 화면의 실제 캡처 · 영상이 인터페이스 안에서 수행할 동작 하나와 그에 대한 제품의 응답 · 핵심 주장과 두 줄짜리 CTA · 로크업 · 두 가지 색상: 어두운 스튜디오 배경색과 제품 포인트 색상 하나
- 의존성
- HyperFrames CLI — 필수 · Node.js 22 이상 — 필수 · FFmpeg — 필수
- 최근 테스트
- v1.0.0 — Claude Code / Claude Desktop / Cowork / Codex / ChatGPT
사용자 리뷰
리뷰를 불러오는 중…







