내 프론트엔드 컴포넌트로 만드는 SaaS 제품 런치 모션그래픽

Full Prompt

원문 프롬프트를 강화하여 결과에 좀 더 의도성을 반영한 프롬프트입니다.

• 원문의 「하이엔드 느낌」「끝까지 최선」처럼 기준이 모호한 말을 줌 하나, 서체 한 종, 색 세 가지라는 구체적 제약으로 바꿨습니다.
• 「실제 컴포넌트를 쓴다」는 뜻을 살려, 새로 그리지 않고 프로젝트 폴더를 먼저 읽어 가져오도록 정했습니다.
• 콘셉트를 「가장 작은 부분이 화면 전체가 된다」로 정해 장면이 서로 변형으로 이어지게 했습니다.
• 길이가 없던 원문에 15초와 120 BPM을 정하고, 마디별 기법 순서를 적었습니다.
• 금지 목록, 시간의 함수로 만드는 빌드 방식, 0.5초 간격 검토 절차를 새로 추가했습니다.

15초짜리 SaaS 제품 런치 모션그래픽을 만든다. 목표는 이 제품이 무엇을 해결하는지를 기능 나열이 아니라 하나의 생각으로 남기는 것이다. 먼저 프론트엔드 프로젝트 폴더를 읽고, 화면에 나올 컴포넌트는 새로 그리지 않고 제품에 있는 실제 컴포넌트와 스타일을 가져와 쓴다.

콘셉트: 「제품의 가장 작은 부분이 화면 전체가 된다」. 버튼 하나, 카드 하나에서 시작해 확대와 변형으로 대시보드, 핵심 기능 화면으로 이어진다. 모든 장면은 앞 장면에서 변형돼 나온다. 컷도 페이드도 없다. 카메라 언어는 하나, 정면에서 밀고 들어가는 줌만 쓴다.

타이포와 색: 서체는 Pretendard 한 종만. 화면 글자는 전부 한국어이며, 제품 UI 안의 문구도 한국어로 바꿔 넣는다. 색은 제품의 대표색 한 가지에 보조색 한 가지, 강조색 한 가지까지 세 가지와 흑백만 쓴다.

금지: 파티클 폭발, 글로우, 렌즈 플레어, 카메라 흔들림, RGB 분리, 크로스페이드, 범용 그라디언트, 바운스 이징, 0.5초 넘게 멈춘 화면.

박자: 120 BPM, 박마다 화면에서 무엇인가 바뀐다. 한 마디에 기법 하나씩, 컴포넌트 등장, 확대 전환, 데이터 차트 차오름, 문구 교체 순으로 쓴다. 마지막 마디는 첫 컴포넌트로 돌아와 첫 프레임과 끝 프레임을 같게 맞춘다.

빌드 방법: 1920x1080 HTML 한 파일로 만들고, 모든 상태는 window.seek(t) 안에서 시간의 함수로 계산한다. CSS 애니메이션과 타이머는 쓰지 않는다.

검토: 본 렌더 전에 0.5초 간격 스틸을 뽑아 겹침, 빈 프레임, 박자 어긋남, 글자 가독성을 확인하고 고친다.

시작: 먼저 박자별 스토리보드를 적고, 묻지 말고 바로 만든다.

원문 프롬프트

Analyze my frontend project, use the actual components from the product, and create a dynamic motion graphics video that showcases and sells my SaaS. Make it feel like a high-end product launch. Go all out.

출처Rafael @FractaDev (새 탭에서 열림)·Opus 5.5