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

제품 UI, 음악

클릭 한 번에 앱 아이콘이 열리는 12초 제품 스팅

Frame by Frame 앱을 소개하는 12초 정사각 제품 영상을 만드는 프롬프트입니다. 헤더 등장, 커서 클릭, 앱 아이콘 궤도, 메뉴바 입력창, 답변 페이지, 카드, 엔드 카드까지 프레임 단위로 지정합니다.

Full Prompt 결과물

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

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

Full Prompt

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

  • 제품 이름, 입력 문장, 카드 제목을 사용자에게 묻지 않고 정했습니다. 화면 글자는 모두 한국어입니다.
  • 원문의 프레임 단위 좌표와 키프레임 표 대신, 장면이 앞 장면에서 변형되는 하나의 콘셉트(뷰파인더)로 묶었습니다.
  • 색은 원문 팔레트에서 파랑, 하늘, 민트 세 가지와 흑백으로 줄였고 서체는 Inter 대신 Pretendard 한 종으로 정했습니다.
  • 원문이 쓰던 글로우 끝장면과 만든 뒤 스틸 4장을 보여 달라는 절차를 없애고, 박자별 스토리보드를 쓴 뒤 바로 만들도록 했습니다.
  • 124 BPM과 12초 길이는 원문을 따랐고, 마지막 프레임을 첫 프레임과 같게 하는 조건을 새로 넣었습니다. 정사각 1080x1080도 원문을 따랐습니다.
12초짜리 정사각 제품 모션그래픽을 만든다. 목표는 「프레임 바이 프레임」이라는 앱이 사용자의 한 줄 입력에서 결과 화면까지 가는 과정을 끊김 없는 하나의 움직임으로 보여 주는 것이다.
콘셉트: 「뷰파인더 하나가 모든 화면이 된다」. 네 모서리 괄호가 로고, 앱 아이콘, 메뉴바 아이콘, 입력창, 카드로 차례로 변형돼 나온다. 컷은 음악이 떨어지는 지점 한 번뿐이고 나머지는 앞 장면이 다음 장면이 된다. 커서가 장면을 이끈다.
타이포와 색: 서체는 Pretendard 한 종만. 화면 글자는 전부 한국어(입력 문장은 「런칭 영상을 만들어 줘」, 카드 제목은 「런칭」「사운드」). 색은 파랑 #2F6BFF, 하늘 #3CC8F0, 민트 #4ED6A0 세 가지와 흑백만. 배경은 흰 종이색, 마지막 장면만 검정.
금지: 파티클 폭발, 글로우, 렌즈 플레어, 카메라 흔들림, RGB 분리, 크로스페이드, 범용 그라디언트, 바운스 이징, 0.5초 넘게 멈춘 화면.
박자: 124 BPM, 박마다 무엇인가 바뀐다. 한 마디에 기법 하나: 상승, 커서 클릭, 궤도 회전, 타이핑, 위로 쓸기, 카드 적층. 블러는 움직임의 속도와 방향을 따른다. 첫 프레임과 마지막 프레임을 같게.
빌드 방법: 1080x1080 HTML 한 파일, 모든 상태는 window.seek(t) 안에서 시간의 함수로. CSS 애니메이션과 타이머는 쓰지 않는다.
검토: 본 렌더 전에 0.5초 간격 스틸로 겹침, 빈 프레임, 박자 어긋남, 가독성을 확인하고 고친다.
시작: 먼저 박자별 스토리보드를 적고, 묻지 말고 바로 만든다.

원문 프롬프트

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

Story: the product header rises out of a blue haze inside a light app window → a cursor glides in, turns to face where it's going, grows on hover and clicks the logo → hard cut on the music drop to the app icon with four squares orbiting into a cross → the icon collapses into a Mac menu bar → the cursor clicks the menu-bar icon, a frosted glass prompt box springs out and the prompt types → whip-tilt up through a light-blue flash into the answer page scrolling into place → a card rises over it → blur-dissolve to two stacked cards with giant frosted-glass titles → blur-dissolve to the lone logo disc → hard cut to a black end card with a glowing wordmark.
…
Coordinates are px on the 1080 stage. Music beat k = 0.048 + 0.4838·k s (124 BPM, one beat = 14.5 frames). The three hard cuts f72, f101, f159 land 2 frames before a beat: keep these exact frames.
…
1. One HTML page, 1080x1080, drawn by seek(t) as a pure function of the frame number. No CSS transitions, no timers, no Math.random (seeded hashes only). Shots register as {f0, f1, render(localFrame)}.

출처dawood46 @notdwd (새 탭에서 열림)Opus 5.5