본문으로 건너뛰기
RAISE LAB
← 목록으로

제품 UI, 코드

제품 화면을 부품으로 풀어 음악에 맞춰 움직이는 30초 소개 영상

스크린샷을 그대로 쓰지 않고 버튼, 카드, 아이콘, 로고로 분해해 음악 박자에 맞춰 움직이는 30초 제품 소개 모션그래픽 프롬프트입니다.

Full Prompt 결과물

Full Prompt로 RAISE LAB 이 직접 만든 결과물입니다. (Claude Opus 5.5 사용)

렌더 모델 Opus 5.5추론 노력 높음(high)

Full Prompt

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

  • 「쇼릴처럼 보이게」라는 모호한 목표를 「화면이 부품으로 풀렸다가 조립된다」는 하나의 콘셉트로 좁혔습니다.
  • 스크린샷 분해 요청을 버튼, 카드, 아이콘, 글자 줄, 로고 단위로 구체화하고 장면마다 앞 장면에서 변형되게 했습니다.
  • 서체는 Pretendard 한 종, 화면 글자는 한국어, 색은 로고에서 뽑은 두 가지와 강조 하나에 흑백으로 정했습니다.
  • 「쫀득하게」를 바운스 없는 지수형 ease-out으로 풀고, 글로우와 파티클 폭발 같은 흔한 장식은 금지했습니다.
  • 음악 맞춤을 120 BPM, 15마디, 킥과 스네어 기준으로 정하고 첫 프레임과 끝 프레임을 같게 했습니다.
  • window.seek(t) 기반 HTML 한 파일과 0.5초 간격 스틸 검토 절차를 추가했습니다.
30초짜리 제품 소개 모션그래픽을 만든다. 목표는 링크(https://t.co/xdCXEdKZRq)의 제품이 무엇인지 보여 주면서, 만든 사람의 모션 디자인 실력이 한 편의 쇼릴처럼 남게 하는 것이다. 데모나 시제품이 아니라 완성된 프로덕션 영상이어야 한다.
콘셉트: 「화면이 부품으로 풀렸다가 다시 조립된다」. 제품 스크린샷을 통째로 쓰지 않고 버튼, 카드, 아이콘, 글자 줄, 로고로 분해해 하나씩 움직인다. 모든 장면은 앞 장면의 부품이 변형되어 나온다. 컷도 페이드도 없다.
타이포와 색: 서체는 Pretendard 한 종만. 화면 글자는 전부 한국어. 색은 제품 로고에서 뽑은 두 가지와 강조 하나, 그리고 흑백만. 실제 로고와 에셋을 쓴다.
금지: 파티클 폭발, 글로우, 렌즈 플레어, 카메라 흔들림, RGB 분리, 크로스페이드, 범용 그라디언트, 바운스 이징, 0.5초 넘게 멈춘 화면.
박자: 음악을 함께 넣는다. 120 BPM, 15마디. 박마다 무엇인가 바뀌고, 큰 동작은 킥과 스네어에 맞춘다. 한 마디에 기법 하나. 첫 프레임과 마지막 프레임을 같게. 쫀득함은 빠른 가속과 느린 감속(지수형 ease-out)으로 낸다.
빌드 방법: 1920x1080 HTML 한 파일, 모든 상태는 window.seek(t) 안에서 시간의 함수로. CSS 애니메이션과 타이머는 쓰지 않는다.
검토: 본 렌더 전에 0.5초 간격 스틸로 겹침, 빈 프레임, 박자 어긋남, 가독성을 확인하고 고친다.
시작: 먼저 마디별 스토리보드를 적고, 묻지 말고 바로 만든다.

원문 프롬프트

Make a dynamic 30-second motion graphics video that shows what an incredible motion designer you are, like it's your showreel for a résumé. go all out.  Make it a video to introduce https://t.co/xdCXEdKZRq Use actual product screenshot/logo/assets Must have music and motion must match the music  Do it like a real professional production video, not like a demo or prototype. Add more animation and motion design; avoid using screenshots as raw; instead, break them down into components/icons so we can animate those too. Make the motions more juicy. Use the best motion design techniques you can.

출처Ihab Khattab @HO_BA (새 탭에서 열림)Opus 5.5

한국어 번역

역동적인 30초짜리 모션그래픽 영상을 만들어 줘. 네가 얼마나 뛰어난 모션 디자이너인지 보여 주는, 이력서에 첨부할 쇼릴 같은 영상이어야 해. 끝까지 밀어붙여 줘. https://t.co/xdCXEdKZRq 를 소개하는 영상으로 만들어 줘. 실제 제품 스크린샷, 로고, 에셋을 사용해. 음악이 반드시 있어야 하고, 모션이 음악에 맞아야 해. 데모나 프로토타입이 아니라 진짜 전문가가 만든 프로덕션 영상처럼 만들어 줘. 애니메이션과 모션 디자인을 더 많이 넣고, 스크린샷을 그대로 쓰지 말고 구성 요소와 아이콘으로 분해해서 그것들도 움직일 수 있게 해. 모션을 더 쫀득하게(juicy) 만들어 줘. 네가 쓸 수 있는 최고의 모션 디자인 기법을 써 줘.