Apple 스타일 런치 구성

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 (출처가 포함된 카피 근거)를 매 라운드마다 최신 상태로 유지하십시오.
• 증거를 절대 조작하지 마십시오: 가상의 사용자 수, 인용문 또는 로고는 안 됩니다. 실제 스크린샷, 제품 소스의 실제 카피 문자열, 실제 아이콘을 사용하십시오.
• 충실히 보고하십시오: 캡처로 확인된 것과 그렇지 않은 것을 말하십시오.

구조

카드당 하나의 메시지, 양쪽의 하드 컷, 카드 사이에 제품에 대한 데모 샷이 있습니다. 컷은 음악의 비트 그리드에 맞춰집니다.

1. 후크, 스크롤을 멈추기 위한 3초 — 시청자의 문제, 동작 중인 제품, 로고 없음. 사용 사례당 하나의 카드: 하나의 창 + 한 줄, 쌍이 프레임 중앙에 그룹으로 위치. 웹사이트에 나열된 모든 사용 사례를 다루고, 주요 페르소나만 다루지 마십시오 ("에이전트에게 세 시간 더가 필요합니다." / "렌더링에 사십 분이 필요합니다." / "빌드가 반쯤 완료되었습니다." / "떠나야 합니다.").
2. 문제 — 텍스트 전용 카드, 나쁜 대안들이 프레임 중앙에 쌓이고, 비용은 빨간색으로 표시 ("잠금? Mac이 잠듭니다.").
3. 공개 — 음악 비트에 아이콘이 나타나고, 워드마크, 웹사이트 자체의 히어로 라인 (랜딩 페이지와 메시지 일치).
4. "제작 대상" 그리드 — 사이트의 사용 사례를 4개의 타일로: SF Symbol이 있는 색상 원, 제목, 그 아래의 실제 앱 아이콘. 부제목 없음.
5. 데모 — 한 가지 작업을 수행하는 실제 UI, 동작 바로 아래에 캡션, 주요 단어 강조.
6. 기능 카드 — 이점이 제목, 기능이 부제목. 파랑 / 슬레이트 그레인 / 초록 / 그라데이션 텍스트가 있는 검정 / 페이지 회색. 보여주고, 말하지 마십시오: 밤새 돌아가는 시계, 빨간색으로 "✕ 차단됨"이 찍힌 키 캡, 잠금 화면에 도착하는 알림.
7. 결과 — 완료된 작업으로 돌아오고, 모든 작업이 끝납니다.
8. 추가 기능 그리드 — 4개의 타일, 각각 짧은 한 줄.
9. 신뢰 — "클라우드 없음. 추적 없음. 구독 없음."
10. 마무리 — 아이콘 + 이름, "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을 통해 사용, 제목 76120px, 두께 600700, 자간 -0.03~-0.04em; 시계에는 SF Pro Rounded.
• apple.com 제품 페이지 스타일의 가장자리까지 채워지는 그라데이션 카드 (파란색, 초록색, SVG 그레인이 있는 슬레이트, 그라데이션으로 잘린 단색 텍스트가 있는 검정색).
• 액체 유리 표면: 반투명 흰색, 빛나는 테두리, 캡슐 모양, 넓고 부드러운 그림자, 배경 흐림. 제품 UI는 동일한 크기, 두께 및 카피로 자체 소스에서 재구축.
• 실제 SF Symbols는 macOS에서 렌더링 (tools/render-symbols.swift); 실제 앱 아이콘은 설치된 앱에서 추출. Rich.tsx를 통해 **…**로 단어 강조.
• 텍스트는 중앙 정렬; 창과 그 줄은 하나의 중앙 그룹으로 이동. 무언가 위에서 애니메이션되는 동안 아래에서 텍스트를 변경하지 마십시오; 동작 옆에 캡션을 배치하고 줄이 안착할 때까지 다른 모션을 지연시키십시오.

카피

references/copy.md에 출처와 함께 원칙이 있습니다. 규칙:

• 간단한 단어, 짧은 줄, 사실을 전달하지 않는 한 부제목 없음.
• 제목은 제품이 수행하는 작업을 완전히 설명하고, 사이트의 표현을 재사용.
• 구체적인 숫자 ("세 시간 더", "340개 테스트", "오전 2:06").
• 이점을 먼저, 기능은 증거로; 구매자를 막는 반론 처리 (개인정보 보호, 잠금, 가격, "내 경우에 맞는가").
• CTA는 가격이 함께 있는 가치 제안.

오디오

코드로 배경 음악을 작곡 (tools/make-music.py, numpy + ffmpeg): 126 BPM, 첫 마디부터 모든 비트에 킥과 2/4에 박수, 플럭 아르페지오, 서브, 패드; 공개 및 잠금 시점까지 라이저 + 임팩트; 잠금 해제 시 브레이크다운; 마무리 아래에서 해소; 모든 카드 컷에 부드러운 틱. 순간은 스크립트 상단의 매개변수; 컷이 변경될 때마다 재조정. 제품에 실제 시스템 사운드가 있으면 사용. 라이선스 음악 없음.

워크플로

1. 사용 사례, 카피 문자열, UI 캡처, 아이콘을 위해 제품의 사이트와 소스를 읽습니다. references/copy.md를 읽습니다.
2. BRIEF.md와 POSITIONING.md를 작성합니다.
3. templates/promo-project/를 복사하고 src/theme.ts에서 ROOT를 설정합니다.
4. 먼저 타임라인을 구축하고 (src/timeline.ts: 순간, 카피, 트윈), 그 다음 카드, 데모. 순간에 맞춰 음악을 재생성합니다.
5. 확인: dapi check, 그런 다음 dapi capture로 모든 비트의 연락처 시트를 생성하고, 읽고, 수정한 후에만 dapi export합니다. MP4 (길이, 오디오 피크)를 검사하고 응답을 위해 샘플 프레임을 타일링합니다.
6. 파이프라인 세부 사항 및 래스터라이저 문제: references/pipeline.md.