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

제품 UI, 음악

공 하나가 토글에서 키보드까지 이어 가는 10초 UI 모션

흰 공 하나가 토글, 슬라이더, 알림 카드, 키보드를 차례로 지나 처음 스위치로 돌아오는 10초짜리 2D UI 모션 영상입니다. 카메라는 하나로 이어진 큰 화면 위를 움직이고, 첫 프레임과 끝 프레임이 맞물려 반복 재생됩니다.

Full Prompt 결과물

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

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

Full Prompt

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

  • 원문이 사용자에게 되묻던 값(목표 값, 알림 문구, 답장, 강조색, 박자)을 100, 한국어 문구 세 개, 「다시」, 전자 파랑, 120 BPM으로 미리 정했습니다.
  • 영어였던 화면 글자를 모두 한국어로 바꾸고 서체를 Pretendard 한 종으로 고정했습니다. 입력 글자에 맞춰 키도 두벌식 자모로 정했습니다.
  • 「약 10초」를 정확히 10초, 5마디로 나누고 마디마다 한 장면과 한 기법을 배정했습니다.
  • 금지 목록에 카메라 흔들림, RGB 분리, 바운스 이징, 0.5초 넘는 정지, 크로스페이드를 더해 원문의 금지를 구체화했습니다.
  • 스틸을 보여 주고 확인받는 절차 대신, 스토리보드를 적고 바로 제작하도록 바꿨습니다.
  • 반복 재생을 위한 일치 조건을 공 위치, 진행 방향, 커서, 스위치 상태로 명시했습니다.
10초짜리 2D UI 모션 필름을 만든다. 목표는 흰 공 하나가 토글, 슬라이더, 알림, 키보드를 차례로 건드리고 처음 자리로 돌아오는 하나의 움직임으로 읽히게 하는 것이다.
콘셉트: 「공 하나가 모든 조작을 잇는다」. 모든 요소는 하나의 큰 캔버스에 놓이고 카메라가 그 위를 이동하며 확대한다. 장면은 앞 장면에서 변형돼 나온다. 스위치에서 튀어나온 공이 슬라이더 손잡이에 내려앉고, 100에서 튕겨 카드 세 장을 지나, 답장 알약이 입력창으로 늘어나며 키보드가 올라온다. 전송 버튼이 켜지면 답장이 작은 파란 말풍선으로 줄고, 카메라가 물러나 처음 스위치로 돌아온다.
타이포와 색: 서체는 Pretendard 한 종만. 화면 글자는 전부 한국어: 알림 「슬라이더 - 100 도달」「중력 - 무언가 떨어지는 중」「메시지 - 이제 뭐 하지?」, 입력 「다시」(두벌식 키 ㄷ ㅏ ㅅ ㅣ). 색은 전자 파랑 하나와 흑백만. 거의 검은 바탕에 옅은 점 격자, 컨트롤은 숯색.
금지: 파티클 폭발, 글로우, 렌즈 플레어, 카메라 흔들림, RGB 분리, 하드 컷, 크로스페이드, 범용 그라디언트, 바운스 이징, 0.5초 넘게 멈춘 화면.
박자: 120 BPM, 10초는 5마디. 한 마디에 기법 하나: 1마디 커서 클릭과 스위치, 2마디 슬라이더 이동과 값 0에서 100, 3마디 카드 세 장이 박마다 도착, 4마디 입력창 확장과 키 네 번, 5마디 전송과 카메라 후퇴. 첫 프레임과 마지막 프레임은 공 위치, 진행 방향, 커서, 스위치 상태까지 같게.
빌드 방법: 1920x1080 HTML 한 파일, 모든 상태는 window.seek(t) 안에서 시간의 함수로. 카메라는 위치와 로그 줌의 변환 하나. CSS 애니메이션과 타이머는 쓰지 않는다. 키 누름 시각은 고정하고 입력창 글자는 그 시각까지의 부분만 보여 준다.
검토: 본 렌더 전에 0.5초 간격 스틸로 겹침, 빈 프레임, 공의 순간이동, 박자 어긋남, 글자 가독성을 확인하고 고친다.
시작: 먼저 박자별 스토리보드를 적고, 묻지 말고 바로 만든다.

원문 프롬프트

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

A 10-second 2D UI motion film in 16:9. Place everything on a near-black canvas with a faint dot grid. Use charcoal controls, sharp white text, one blue accent and a white ball that moves through the entire film. A real cursor makes the opening click feel physical; the ball guides each transition that follows. Keep the UI clean and the impacts precise, with only small spring overshoots. Move the camera through one continuous layout so every interaction fills the frame.

Banned: hard cuts, stock footage, glows, particle bursts, disconnected transitions, excessive bouncing and blurry text during camera moves.
…
Toggle: the cursor clicks a blue switch. Its white ball springs free, and the camera follows it toward a horizontal slider.

Slider: the ball lands on the knob and moves it along the track. The blue fill stays attached, while a value bubble above the knob climbs to 100.

Notifications: hitting 100 sends the ball onward and brings in three dark cards: "Slider", "Gravity" and "Messages". Each arrives on its own beat. The camera follows the ball down to "What now?".
…
Return: the camera pulls back to show the toggle, slider, cards and keyboard together in one world. The ball travels back to the first switch. Match its position, the cursor and the switch state to the opening frame so the film loops cleanly.

출처testarossa @rossaxbt (새 탭에서 열림)Opus 5.5