Apple 스타일 제품 데모 비디오
목표는 움직이는 apple.com 제품 페이지입니다. 밝은 배경, 크고 타이트하게 트래킹된 SF Pro, 화면에 한 번에 하나의 메시지, 가장자리까지 채워진 컬러 카드, 제품의 실제 UI, 실제 SF Symbols, 실제 앱 아이콘, 경쾌하게 구성된 트랙, 그리고 가치를 강조하는 평범한 콜 투 액션입니다. Diffusion Studio JSX 합성으로 제작되어 모든 프레임이 결정론적이며 내보내기 전에 확인할 수 있습니다.
이 파일 옆에 있는 templates/promo-project/에서 시작하세요 (완전하고 작동하는 합성: Mac 잠금 화면 유틸리티의 출시 필름). 완성된 형태를 보려면 BRIEF.md와 POSITIONING.md를 읽으세요.
작업 스타일
- 피드백은 간결한 글머리 기호로 제공되며, 종종 의도된 프레임의 스크린샷이 포함됩니다. 모두 수행하고, 각각을 캡처로 검증하고, 내보낸 후 프레임 접촉 시트와 함께 응답하세요.
- 브레인스토밍을 요청받으면 각각 한 줄로 3-4개의 옵션을 나열한 다음, 기다리지 않고 최상의 옵션을 구축하세요.
BRIEF.md(시간과 카피가 포함된 비트 테이블)와POSITIONING.md(출처가 있는 카피 근거)를 매 라운드마다 최신 상태로 유지하세요.- 증거를 조작하지 마세요: 가상의 사용자 수, 인용문 또는 로고를 만들지 마세요. 실제 스크린샷, 제품 소스의 실제 카피 문자열, 실제 아이콘을 사용하세요.
- 충실히 보고하세요: 캡처로 검증된 것과 그렇지 않은 것을 말하세요.
구조
카드당 하나의 메시지, 양쪽에 하드 컷, 카드 사이에 제품 데모 샷이 있는 경우 포함됩니다. 컷은 음악의 비트 그리드에 맞춥니다.
- 후크, 3초 스크롤 멈춤 — 시청자의 문제, 작동 중인 제품, 로고 없음. 사용 사례당 하나의 카드: 하나의 창 + 한 줄, 그룹으로 중앙에 위치. 웹사이트에 나열된 모든 사용 사례를 다루며, 주요 사용자만이 아닙니다. ("에이전트에게 3시간 더 필요합니다." / "렌더링에 40분 필요합니다." / "빌드가 절반입니다." / "떠나야 합니다.")
- 문제 — 텍스트 전용 카드, 나쁜 대안이 중앙에 쌓이고, 비용은 빨간색으로 표시 ("잠글까요? Mac이 잠듭니다.")
- 공개 — 음악 히트에 아이콘 팝, 워드마크, 웹사이트 자체 히어로 라인 (랜딩 페이지와 메시지 일치).
- "제작 대상" 그리드 — 사이트의 사용 사례를 4개의 타일로: SF Symbol이 있는 컬러 원, 제목, 그 아래 실제 앱 아이콘. 부제목 없음.
- 데모 — 실제 UI가 한 가지 작업을 수행, 동작 바로 아래에 캡션, 주요 단어 강조.
- 기능 카드 — 혜택이 헤드라인, 기능이 부제목. 파란색/슬레이트 그레인/초록색/그라데이션 텍스트가 있는 검정색/페이지 회색. 보여주고 말하지 마세요: 밤새 돌아가는 시계, 빨간색으로 "✕ 차단됨"이 찍힌 키캡, 잠금 화면에 도착하는 알림.
- 결과 — 완료된 작업으로 돌아가기, 모든 작업 완료.
- 더 많은 기능 그리드 — 4개의 타일, 각각 짧은 한 줄.
- 신뢰 — "클라우드 없음. 추적 없음. 구독 없음."
- 마무리 — 아이콘 + 이름, "7일 무료 체험.", "그런 다음 $8.99, 일회성.", URL. 그 외에는 아무것도 없음.
길이 약 45초. 후크 카드 ≈ 1.3초, 텍스트 카드 ≈ 2초, 데모 1.6–2.8초, 그리드 ≈ 3.4초, 마무리 ≈ 7초. 빠른 속도이지만 모든 화면은 읽을 수 있을 만큼 충분히 오래 유지됩니다.
외관
토큰은 references/design.md에 있습니다. 요약:
- 페이지 배경
#f5f5f7, 텍스트#1d1d1f, 보조#6e6e73, 강조색 = 제품의 파란색, 시스템 빨간색#ff3b30(비용 및 Touch ID 글리프용), 시스템 초록색 (성공용). 라이트 모드만. - SF Pro는
-apple-system으로; 헤드라인 76–120 px, 굵기 600–700, 자간 −0.03 ~ −0.04 em; 시계에는 SF Pro Rounded. - apple.com 제품 페이지 스타일의 가장자리까지 채워진 그라데이션 카드 (파란색, 초록색, SVG 그레인이 있는 슬레이트, 그라데이션으로 클리핑된 모노 텍스트가 있는 검정색).
- Liquid Glass 표면: 반투명 흰색, 빛나는 테두리, 캡슐 모양, 넓은 부드러운 그림자, 배경 흐림. 제품 UI는 자체 소스에서 동일한 크기, 굵기 및 카피로 재구성.
- macOS에서 렌더링된 실제 SF Symbols (
tools/render-symbols.swift); 설치된 앱에서 추출한 실제 앱 아이콘.Rich.tsx를 통해**…**로 단어 강조. - 텍스트는 중앙 정렬; 창과 그 라인은 하나의 중앙 그룹으로 움직입니다. 상단에서 애니메이션이 발생하는 동안 하단의 텍스트를 변경하지 마십시오. 동작 옆에 캡션을 배치하고 라인이 도착할 때까지 다른 모션을 지연시킵니다.
카피
원칙은 references/copy.md에 출처와 함께 있습니다. 규칙:
- 간단한 단어, 짧은 줄, 사실을 전달하지 않는 한 부제목 없음.
- 제품이 수행하는 작업을 완전히 설명하는 헤드라인; 사이트의 것을 재사용.
- 구체적인 숫자 ("3시간 더", "340개 테스트", "오전 2:06").
- 혜택 우선, 기능은 증거로; 구매자를 막는 반대 의견 (프라이버시, 잠금, 가격, "내 경우에 적용되나요")을 처리.
- CTA는 가치에 대한 호출이며 가격이 옆에 표시됩니다.
오디오
코드로 배경 음악을 작곡 (tools/make-music.py, numpy + ffmpeg): 126 BPM, 모든 비트에 킥, 첫 마디부터 2/4에 박수, 플럭 아르페지오, 서브, 패드; 공개와 잠금에 라이저 + 임팩트; 잠금 해제 시 브레이크다운; 마무리 아래에서 해소; 모든 카드 컷에 부드러운 틱. 순간은 스크립트 상단의 매개변수입니다. 컷이 변경될 때마다 다시 조정하세요. 제품에 실제 시스템 사운드가 있는 경우 사용하세요. 라이선스 음악은 사용하지 마세요.
워크플로우
- 사용 사례, 카피 문자열, UI 캡처, 아이콘을 위해 제품의 사이트와 소스를 읽습니다.
references/copy.md를 읽습니다. BRIEF.md와POSITIONING.md를 작성합니다.templates/promo-project/를 복사합니다.src/theme.ts에서ROOT를 설정합니다.- 먼저 타임라인을 구축하고 (
src/timeline.ts: 순간, 카피, 트윈), 그 다음 카드, 데모를 구축합니다. 순간에 맞게 음악을 재생성합니다. - 검증:
dapi check를 실행한 다음, 모든 비트의 접촉 시트를dapi capture로 생성합니다. 읽고 수정한 후에만dapi export를 실행합니다. MP4를 조사하고 (길이, 오디오 피크) 응답을 위해 샘플 프레임을 타일로 표시합니다. - 파이프라인 세부 사항 및 래스터라이저 문제점:
references/pipeline.md.