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

제품 UI, 음악

스포티파이 신곡 발견 흐름을 담은 18초 제품 모션그래픽

초록 아이콘에서 시작해 앱 화면, 검색, 앨범 상세, 확대, 플레이리스트를 지나 워드마크로 마무리하는 18초 제품 영상 프롬프트입니다. 가상의 곡 하나가 모든 장면을 잇습니다.

Full Prompt 결과물

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

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

Full Prompt

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

  • 서체를 Pretendard 한 종으로 정하고, 화면 글자를 한국어로 통일했습니다(원문은 Geist나 Inter 같은 서체를 모델에게 맡김).
  • 색을 검정, 흰색, 초록 #1ED760 세 가지로 줄였습니다(원문은 파스텔과 보색 슬리브 등 여러 색을 허용).
  • 「커버 한 장이 모든 장면이 된다」는 하나의 생각으로 묶고, 모든 장면이 앞 장면에서 변형되도록 정했습니다.
  • 120 BPM에서 한 마디 2초, 마디마다 기법 하나, 첫 프레임과 마지막 프레임의 아이콘 위치 일치를 명시했습니다.
  • 금지 목록에 글로우, RGB 분리, 크로스페이드, 바운스 이징, 0.5초 넘는 정지를 더했습니다.
  • 원문의 장면별 초 단위 지시와 오디오 상세는 덜어 내고, 검토 방식(0.5초 간격 스틸)과 바로 만들기 시작하라는 지시를 더했습니다.
18초짜리 스포티파이 테마 제품 영상을 만든다. 목표는 앱 화면을 나열하는 것이 아니라, 가상의 곡 하나가 처음부터 끝까지 이어진다는 인상을 남기는 것이다.
콘셉트: 「커버 한 장이 모든 장면이 된다」. 곡은 “Glass Tides”, 아티스트는 “AURA”, 커버는 진주빛 액체 비단 한 장을 끝까지 쓴다. 초록 아이콘에서 시작해 화면, 검색 결과, 상세, 전면 확대, 떠다니는 커버를 거쳐 다시 아이콘으로 돌아온다. 모든 장면은 앞 장면의 같은 위치에서 변형돼 나온다.
타이포와 색: 서체는 Pretendard 한 종만. 화면 글자는 한국어로 쓰고, 곡명과 아티스트명과 Spotify 로고만 그대로 둔다. 색은 검정 바탕, 흰색, 초록 #1ED760 세 가지만 쓴다. 무대는 폭 80퍼센트의 둥근 사각형이며 모든 확대는 이 모서리에 잘린다.
금지: 파티클 폭발, 글로우, 렌즈 플레어, 카메라 흔들림, RGB 분리, 크로스페이드, 범용 그라디언트, 바운스 이징, 0.5초 넘게 멈춘 화면.
박자: 120 BPM, 한 마디가 2초이고 1초마다 아이디어가 하나 바뀐다. 마디마다 기법 하나만 쓴다(마스크 등장, 매치컷 확대, 원근 기울임, 접힘 등). 첫 프레임과 마지막 프레임의 아이콘 위치를 같게 맞춘다.
빌드 방법: 1920x1080 HTML 한 파일, 모든 상태는 window.seek(t) 안에서 시간의 함수로 계산한다. CSS 애니메이션과 타이머는 쓰지 않는다. 60fps로 렌더한다.
검토: 본 렌더 전에 0.5초 간격 스틸로 글자 겹침, 빈 프레임, 박자 어긋남, 가독성을 확인하고 고친다.
시작: 먼저 박자별 스토리보드를 적고, 묻지 말고 바로 만든다.

원문 프롬프트

긴 프롬프트라 일부만 옮겼습니다. 전문은 크리에이터의 원 게시물에서 볼 수 있습니다.

A premium music-product film presented inside a large, nearly black rounded rectangular stage
The stage occupies roughly 80% of the canvas width and 75% of its height, centered horizontally and slightly below the vertical center
Outside the stage, use a soft atmospheric green background: luminous emerald near the upper-left corner, deeper forest green toward the sides, fading to near-black at the bottom
…
Create original square album artwork for a fictional track called “Glass Tides” by “AURA”
The hero cover is an abstract macro image of flowing pearlescent liquid silk and molten glass
…
0.0–0.6 seconds: A green Spotify icon grows smoothly into the center of the dark stage Give it a confident arrival with minimal overshoot
…
12.5–14.0 seconds:
The playlist layout transitions into four floating album covers
Include the iridescent hero artwork
Use restrained rotation, perspective, depth ordering, and overlap
Keep their movement coordinated rather than randomly floating
…
Build a deterministic animation driven by absolute time through an async window. seek(t) function
Every transform, opacity, mask, and UI state must be reproducible when seeking frames in any order
Do not depend on live timers, accumulated physics, or CSS transition state during export

출처Brain @brainextends (새 탭에서 열림)Opus 5.5