우리 사업을 30초 5장면으로 설명하는 HTML 설명 영상

Full Prompt

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

• 원문의 「부드러운 전환」을 컷 없이 앞 장면 도형이 다음 장면 도형으로 변형되는 방식으로 정했습니다.
• 5장면의 길이를 6·6·9·5·4초로 나누고 120 BPM 마디에 맞췄습니다.
• 서체를 Pretendard 한 종, 굵기 두 가지로 정하고 장면당 한 문장 이내로 제한했습니다.
• 브랜드 색은 두 가지에 보조색 한 가지만 쓰도록 하고, 증거 장면은 큰 숫자로 처리하게 했습니다.
• 파티클 폭발, 글로우, 바운스 이징 등 이 영상에 맞는 금지 항목을 적고, 빈칸 처리 방법과 61장 스틸 검토를 추가했습니다.

30초짜리 사업 설명 모션그래픽을 만든다. 목표는 고객이 「내 문제를 풀어 주는 곳」이라는 것을 다섯 장면 안에 한 흐름으로 이해하게 하는 것이다. 사업 내용(무엇을 파는지, 누구를 위한 것인지, 브랜드 색)은 사용자가 채워 넣은 값을 쓰고, 비어 있으면 가상의 예시 사업으로 만들되 자리표시자 글자는 화면에 남기지 않는다.

콘셉트: 「흩어진 점 하나가 해답이 된다」. 첫 장면의 어지러운 점과 선이 장면마다 모양을 바꿔 이어지고, 마지막에 이름 글자가 된다. 장면은 문제(0~6초), 하는 일(6~12초), 세 단계(12~21초), 증거 하나(21~26초), 이름(26~30초) 순이다. 컷 없이 앞 장면의 도형이 다음 장면의 도형으로 변형된다.

타이포와 색: 서체는 Pretendard 한 종만, 굵기는 ExtraBold와 Regular 두 가지. 화면 글자는 전부 한국어이고 장면당 한 문장을 넘기지 않는다. 색은 브랜드 색 두 가지에 보조색 한 가지, 그리고 흑백만 쓴다. 증거 장면의 숫자는 화면의 절반 높이로 크게 둔다.

금지: 파티클 폭발, 글로우, 렌즈 플레어, 카메라 흔들림, RGB 분리, 크로스페이드, 범용 그라디언트, 바운스 이징, 0.5초 넘게 멈춘 화면.

박자: 120 BPM, 한 마디가 2초이므로 장면은 3마디, 3마디, 4.5마디 안팎으로 나눈다. 박마다 무엇인가 바뀌고, 한 마디에 기법 하나(이동, 크기, 마스크, 선 그리기 가운데 하나)만 쓴다. 세 단계는 한 단계에 1.5마디씩 배정한다. 첫 프레임과 마지막 프레임은 같은 점 배치로 맞춘다.

빌드 방법: 1920x1080 HTML 한 파일, 모든 상태는 window.seek(t) 안에서 시간의 함수로 계산한다. CSS 애니메이션과 타이머, requestAnimationFrame 누적값은 쓰지 않는다. 같은 t를 넣으면 항상 같은 화면이 나와야 한다.

검토: 본 렌더 전에 0.5초 간격 스틸 61장을 뽑아 글자 겹침, 빈 프레임, 박자 어긋남, 작은 글자의 가독성을 확인하고 고친다.

시작: 먼저 장면별 스토리보드를 간단히 적고, 묻지 말고 바로 만든다.

원문 프롬프트

Adopt the role of an expert motion designer. Build a 30-second animated explainer for my business as a single HTML page. 5 scenes. The customer's problem, what I do, how it works in 3 steps, one proof point, and my name at the end. Bold text, smooth transitions, my brand colours. My business [DESCRIBE WHAT YOU SELL, WHO IT'S FOR AND YOUR COLOURS]

출처Alex Prompter @alex_prompter (새 탭에서 열림)·Opus 5.5