제품 UI, 코드
강의 랜딩 페이지 히어로용 15초 모션그래픽
모션 디자이너의 역량을 보여 주면서 강의 랜딩 페이지의 히어로 영상으로 쓸 수 있는 15초 모션그래픽을 Claude에게 만들게 하는 프롬프트입니다.
Full Prompt 결과물
Full Prompt로 RAISE LAB 이 직접 만든 결과물입니다. (Claude Opus 5.5 사용)
렌더 모델 Opus 5.5추론 노력 높음(high)
Full Prompt
원문 프롬프트를 강화하여 결과에 좀 더 의도성을 반영한 프롬프트입니다.
- 「대단한 모션 디자이너」라는 막연한 목표를 「원 하나가 변형을 이어 가는」 하나의 콘셉트로 정했습니다.
- 서체는 Pretendard 한 종, 화면 글자는 한국어, 색은 검정·흰색·주황·청록으로 못 박았습니다.
- 128 BPM 8마디로 15초를 맞추고, 마디마다 기법 하나만 쓰도록 했습니다.
- 랜딩 페이지에서 반복 재생되므로 첫 프레임과 끝 프레임을 같게 했습니다.
- 파티클 폭발, 글로우, 바운스 이징 등 흔한 군더더기를 금지 목록으로 적었습니다.
- 1920x1080 HTML 한 파일과 window.seek(t) 방식, 0.5초 간격 스틸 검토를 빌드 절차로 정했습니다.
[ ] 로 감싼 값은 바꿔 쓸 수 있는 자리입니다. 복사한 뒤 그 자리의 화면 글자·이름·색만 고치면 그만큼 영상이 바뀝니다. 그대로 두고 돌려도 됩니다.
15초짜리 모션그래픽 히어로 영상을 만든다. 강의 랜딩 페이지 맨 위에서 소리 없이 반복 재생되며, 보는 사람이 「이 사람에게 움직임을 배우고 싶다」고 느끼게 하는 것이 목표다. 콘셉트: 「원 하나가 움직임의 무게를 배운다」. 원 하나가 막대, 글자, 격자로 차례로 변형되고, 모든 장면은 앞 장면의 모양에서 이어져 나온다. 컷 편집은 없다. 타이포와 색: 서체는 Pretendard 한 종만 쓰고 화면 글자는 전부 한국어로 한다. 색은 검정, 흰색, 주황 하나, 청록 하나만 쓴다. 큰 글자는 마지막 마디의 한 줄 「[움직임을 설계하다]」뿐이다. 금지: 파티클 폭발, 글로우, 렌즈 플레어, 카메라 흔들림, RGB 분리, 크로스페이드, 범용 그라디언트, 바운스 이징, 0.5초 넘게 멈춘 화면. 박자: 128 BPM, 8마디로 정확히 15초(마디당 1.875초). 한 마디에 기법 하나만 쓴다(이동, 스케일, 마스크 열기, 글자 분해 등). 박마다 무엇인가 바뀐다. 첫 프레임과 마지막 프레임을 같게 해서 반복 재생에도 이음매가 보이지 않게 한다. 빌드 방법: 1920x1080 HTML 한 파일로 만들고, 모든 상태는 window.seek(t) 안에서 시간의 함수로 계산한다. CSS 애니메이션과 타이머는 쓰지 않는다. 검토: 본 렌더 전에 0.5초 간격으로 스틸을 뽑아 겹침, 빈 프레임, 박자 어긋남, 글자 가독성을 확인하고 고친다. 시작: 먼저 마디별 스토리보드를 적고, 묻지 말고 바로 만든다. 대괄호 [ ] 안은 바꿔 쓸 수 있는 값이다. 그대로 두거나 원하는 값으로 바꾸되, 대괄호 기호 자체는 화면에 그리지 않는다.
원문 프롬프트
make a dynamic 15-second motion graphics video that shows what an incredible motion designer you are, and can be the hero asset for the course landing page.출처Adam Sandler @TheViableEdge (새 탭에서 열림)Opus 5.5
한국어 번역
당신이 얼마나 대단한 모션 디자이너인지 보여 주면서, 강의 랜딩 페이지의 히어로 에셋으로 쓸 수 있는 역동적인 15초짜리 모션그래픽 영상을 만들어 줘.