이미지 · 영상

14초 제품 홍보 영상 연출

앱의 핵심 기능과 스텝을 14초 모션 디자인 템플릿(HTML/MP4)으로 연출합니다.

추천 툴: ClaudeAI 분류
쓰인 기법: 단계별 사고 · 출력 형식 지정 · 변수 활용

프롬프트 원문

Build a 14-second motion design product film in 16:9 (1920x1080, 30 fps) for my app ${name}, which ${what_it_does}.
Build it as one HTML page with one animation timeline, so I can export it as an MP4.

Look: light grey-green background with a soft grid, white cards with thin borders, one brand colour ${hex}, one clean sans-serif font.

The text builds word by word: "${hook_question}" / "${name} ${step_1}, ${step_2}, and ${step_3} for you." / "${result}."
Scene 1: the hook question, big and centred.
Scenes 2 to 4: one card shows each step. The card from one step becomes the object of the next step.
Scene 5: the result with a small "done" stamp.
Scene 6: logo, name and "${tagline}".

Rules: the camera never stands still. Every move is eased. Key words are in the brand colour, the rest stays dark.

한국어 풀이 보기(참고용)

${what_it_does} 기능의 내 앱 ${name}을 위한 16:9 (1920x1080, 30 fps) 크기의 14초 모션 디자인 제품 홍보 영상을 제작해 주세요.
MP4로 내보낼 수 있도록 단일 애니메이션 타임라인이 포함된 하나의 HTML 페이지로 만들어 주세요.

룩앤필: 부드러운 그리드가 있는 연한 회록색 배경, 얇은 테두리가 있는 흰색 카드, 브랜딩 컬러 1종 ${hex}, 깔끔한 산세리프 폰트 1종.

텍스트는 단어별로 빌드됩니다: "${hook_question}" / "${name}이(가) 당신을 위해 ${step_1}, ${step_2}, ${step_3}을 실행합니다." / "${result}."
장면 1: 후킹 질문, 화면 중앙에 크게 배치.
장면 2~4: 각 단계를 보여주는 카드 한 장씩 배치. 이전 단계 카드가 다음 단계의 오브젝트로 전환됨.
장면 5: 작은 '완료' 도장 표식과 함께 결과 화면 연출.
장면 6: 로고, 앱 이름 및 "${tagline}".

규칙: 카메라 움직임은 멈추지 않아야 합니다. 모든 이동에는 자연스러운 이징(Ease) 효과를 적용합니다. 핵심 단어는 브랜드 컬러로 표시하고 나머지는 어둡게 유지합니다.

활용Claude에 입력하여 바로 브라우저에서 실행 가능한 HTML/CSS 코드 형태로 추출하세요.
활용브랜드 컬러 hex 값과 단계별 설명 텍스트만 내 제품에 맞춰 바꿔 사용하세요.

출처 · prompts.chat · Claude prompt: 14-second product film for an invoicing app (16:9) — 원문은 출처에 게시된 그대로이며, 권리는 원작자에게 있습니다.

개선안

원문과 같은 언어로 보완한 프롬프트입니다. 점수는 명확성 · 구체성 · 출력 형식 · 재사용성 기준의 AI 평가입니다.

원문 72점개선안 92점

Act as an expert motion designer and front-end developer. Build a single, self-contained HTML file containing a 14-second motion design product film (1920x1080, 30 fps) for the app `${name}`, which ${what_it_does}.

Visual Style:
- Background: Light grey-green with a subtle grid overlay.
- Cards & Typography: White cards with thin borders, clean sans-serif font.
- Color: Brand color `${hex}` for highlighted keywords; dark neutral for standard text.

Timeline & Scene Breakdown (0-14s):
- Scene 1 (0-3s): "${hook_question}" animates word-by-word, large and centered.
- Scenes 2-4 (3-9s): Displays "${name} ${step_1}, ${step_2}, and ${step_3} for you." Each step's card smoothly transitions into the object of the next step.
- Scene 5 (9-11.5s): Displays "${result}." with a animated "done" stamp.
- Scene 6 (11.5-14s): Logo, app name, and "${tagline}".

Technical Rules:
- Use GSAP or standard Web Animations API with a single master timeline for seamless MP4 export.
- Camera & Easing: Maintain continuous, smooth camera motion (pan/zoom) with custom easing; zero static frames.
- Output: Return only the ready-to-run single-file HTML code.

GSAP/CSS 기반 기술 스택과 단일 HTML 파일 출력 형식을 명확히 명시.
14초 타임라인을 장면별 구체적 시간대(초 단위)로 분할하여 모션 싱크 향상.
연출 제약(카메라 이동, Easing 함수)을 명확한 개발 사양으로 보강.

‹ 라이브러리로

Build a 14-second motion design product film in 16:9 (1920x1080, 30 fps) for my app ${name}, which ${what_it_does}. Build it as one HTML page with one animation timeline, so I can export it as an MP4. Look: light grey-green background with a soft grid, white cards with thin borders, one brand colour ${hex}, one clean sans-serif font. The text builds word by word: "${hook_question}" / "${name} ${step_1}, ${step_2}, and ${step_3} for you." / "${result}." Scene 1: the hook question, big and centred. Scenes 2 to 4: one card shows each step. The card from one step becomes the object of the next step. Scene 5: the result with a small "done" stamp. Scene 6: logo, name and "${tagline}". Rules: the camera never stands still. Every move is eased. Key words are in the brand colour, the rest stays dark.

${what_it_does} 기능의 내 앱 ${name}을 위한 16:9 (1920x1080, 30 fps) 크기의 14초 모션 디자인 제품 홍보 영상을 제작해 주세요. MP4로 내보낼 수 있도록 단일 애니메이션 타임라인이 포함된 하나의 HTML 페이지로 만들어 주세요. 룩앤필: 부드러운 그리드가 있는 연한 회록색 배경, 얇은 테두리가 있는 흰색 카드, 브랜딩 컬러 1종 ${hex}, 깔끔한 산세리프 폰트 1종. 텍스트는 단어별로 빌드됩니다: "${hook_question}" / "${name}이(가) 당신을 위해 ${step_1}, ${step_2}, ${step_3}을 실행합니다." / "${result}." 장면 1: 후킹 질문, 화면 중앙에 크게 배치. 장면 2~4: 각 단계를 보여주는 카드 한 장씩 배치. 이전 단계 카드가 다음 단계의 오브젝트로 전환됨. 장면 5: 작은 '완료' 도장 표식과 함께 결과 화면 연출. 장면 6: 로고, 앱 이름 및 "${tagline}". 규칙: 카메라 움직임은 멈추지 않아야 합니다. 모든 이동에는 자연스러운 이징(Ease) 효과를 적용합니다. 핵심 단어는 브랜드 컬러로 표시하고 나머지는 어둡게 유지합니다.

개선안

원문과 같은 언어로 보완한 프롬프트입니다. 점수는 명확성 · 구체성 · 출력 형식 · 재사용성 기준의 AI 평가입니다.

원문 72점개선안 92점

Act as an expert motion designer and front-end developer. Build a single, self-contained HTML file containing a 14-second motion design product film (1920x1080, 30 fps) for the app `${name}`, which ${what_it_does}.

Visual Style:
- Background: Light grey-green with a subtle grid overlay.
- Cards & Typography: White cards with thin borders, clean sans-serif font.
- Color: Brand color `${hex}` for highlighted keywords; dark neutral for standard text.

Timeline & Scene Breakdown (0-14s):
- Scene 1 (0-3s): "${hook_question}" animates word-by-word, large and centered.
- Scenes 2-4 (3-9s): Displays "${name} ${step_1}, ${step_2}, and ${step_3} for you." Each step's card smoothly transitions into the object of the next step.
- Scene 5 (9-11.5s): Displays "${result}." with a animated "done" stamp.
- Scene 6 (11.5-14s): Logo, app name, and "${tagline}".

Technical Rules:
- Use GSAP or standard Web Animations API with a single master timeline for seamless MP4 export.
- Camera & Easing: Maintain continuous, smooth camera motion (pan/zoom) with custom easing; zero static frames.
- Output: Return only the ready-to-run single-file HTML code.

GSAP/CSS 기반 기술 스택과 단일 HTML 파일 출력 형식을 명확히 명시.
14초 타임라인을 장면별 구체적 시간대(초 단위)로 분할하여 모션 싱크 향상.
연출 제약(카메라 이동, Easing 함수)을 명확한 개발 사양으로 보강.