앱 3D 비디오
개요
이 Mac에서 완전히 렌더링된 20초 세로 비디오: 부드러운 아이보리 세계 속 실제 SceneKit iPhone, 앱의 마스코트가 점프하며 실제 UI를 누르는 캐릭터, 가치 중심 헤드라인, 그리고 모든 점프를 마림바 음표에 맞추는 오리지널 스윙 악보. template/ 디렉토리는 완전한 예제 프로젝트(Medication-Reminder 앱 'MyApp')이며 그대로 실행됩니다. 스토리, UI, 데이터, 브랜드 및 음악을 변경하고, 사용자가 달리 요청하지 않는 한 외형은 유지합니다.
필수 하위 스킬: motion-video (엔진, 비트 그리드 계획, 스틸 검토). 모든 값(팔레트, 크기, 조명, 음악, 함정, 보조 기기, 실제 vs 예시)은 이 파일 옆의 reference.md에 있습니다.
두 스킬이 다른 경우, 이 스킬이 우선합니다: template/을 복사하고, bash mv3d.sh (mv.sh 아님)를 실행하며, 마스코트의 바운스, 스파클 및 컨페티는 motion-video의 health 프리셋이 이를 피하더라도 외형의 일부입니다. 데이터를 전달하는 UI는 여전히 딥 및 팝만 수행하고, 마스코트가 바운싱을 담당합니다.
템플릿에서 시작
cp -R ~/.claude/skills/app-3d-video/template ~/Movies/MotionVideo/<slug>
cd ~/Movies/MotionVideo/<slug>
bash mv3d.sh audio # score.swift -> music.wav, 레벨 출력; 스틸 전에 실행
bash mv3d.sh stills 0.5,4.6,10.1 # BEATS -> stills/ + sheet.png
bash mv3d.sh video # out.mp4, 20초에 약 5분 (폰 1대); 백그라운드에서 실행
bash mv3d.sh frames out.mp4 2.5,6.3 # SECONDS -> check/ + check_sheet.png
브랜딩은 scenes.swift 상단의 BRAND 블록에 있습니다: APP_NAME (엔드카드 워드마크), APP_VERSION (3D 숫자; 길이가 변경될 때 스틸에서 크기와 위치 재확인), LABEL (첫 번째 헤드라인 위의 작은 레이블), END_PILL (엔드카드의 그라데이션 필), 그리고 마스코트 색상. 그런 다음 render()의 모든 headline(...) 호출, 헤더 주석 및 plan.md를 바꿉니다. 'COMING IN …' 및 'COMING SOON'은 티저 문구입니다. 출시의 경우 사용자에게 레이블 및 엔드카드 텍스트를 요청합니다.
샘플 장면(Live Activity 카드, Lock Screen 위젯, 주간 알약 박스 배경화면)은 예제 앱에 속합니다. 사용자 자신의 UI로 교체하되, 기법은 유지합니다: 프레임별 2D 캔버스를 폰 화면에 매핑, 마스코트가 요소 위에 서서 누름, 단일 클록으로 구동되는 타임랩스.
작업 흐름
- 사실 수집. 사용자의 저장소에서 각 기능에 대해 읽습니다: 실제 문자열, 레이아웃, 팔레트, 상태, 유료 계층 게이팅, 앱 아이콘 색상(마스코트 색상이 됨). 코드가 답할 수 없는 부분(어떤 기능, 정확한 이름, 무료 또는 유료, 티저 또는 출시, 길이; 기본값 20초 세로)을 질문합니다. 저장소에 UI가 아직 없는 기능: 디자인 또는 스크린샷을 요청합니다. 없는 경우, 앱의 디자인 시스템에서 그려 예시로 표시하고 첫 번째 스틸 시트에 보여줍니다.
- 마스코트. 기본값은 앱 브랜드 색상의 투톤 캡슐입니다. 앱에 자체 마스코트 또는 간단한 아이콘 모양이 있는 경우,
buildCapsule()에서 SceneKit 프리미티브로 빌드합니다(CAP_HALF, 단위 크기 및 재질 목록은 유지하여 그림자와 두 패스가 여전히 작동하도록). - 계획
plan.md를 비트 그리드(96 BPM 스윙, 8마디 = 20초)에 대해 작성합니다. 한 기능 = 실제 UI와의 한 번의 마스코트 상호작용. 하나의 아침, 하나의 데이터 세트, 하나의 시계. 폰이 무대이며, 보조 기기(Watch, iPad)는 그곳에 있는 기능에만 등장합니다(reference.md, 'Second device'). 실제 vs 예시를 나열합니다. - 복사. 헤드라인 = 사용자가 얻는 것, 절대 기능 이름이 아님. 유료 항목에 대해 서브 라인에 PRO 칩. 휴머나이저 스킬이 설치된 경우, 모든 라인에 실행한 후 사실을 재확인합니다.
- 악보. 사운드(우쿨렐레, 마림바, 휘파람, 스냅, E 메이저, 엔드카드 다운비트의 신스 차임)는 유지하지만, 새로운 안무에 맞춰 새로운 코드, 멜로디 및 히트를 작성합니다: 모든 착지는 시각적 비트의 마림바 음표입니다. 앱에 자체 알림음이 있는 경우, 신스 차임을 대체할 수 있습니다(
score.swift끝 참조); 악보의 키를 해당 알림음에 맞춥니다(motion-videoreferences/score-guide.md). 사용자가 다른 음악을 요청하는 경우, 악기도 변경합니다. 타겟 −13…−15 dBFS, 0% 클리핑. - 스틸, 최소 2라운드, 중간 점프 비트 포함. 확인: 마스코트가 정보를 가리지 않음, 누르는 요소에 잠시 멈춤, 그림자가 보임, 폰 상단이 헤드라인 아래에 위치, 복사를 통해 아무것도 보이지 않음, 실제 UI 색상이 주황색 헤드라인과 충돌하지 않음.
- 렌더링은 백그라운드에서 수행한 후, MP4에 대해
frames를 실행하고 확인합니다. - 전달은
~/Downloads/<App>_<Topic>_3D_<N>s[_vN].mp4로 하고 사용자에게 파일을 보내거나 보여줍니다. 비트별로 초 단위로 보고, 실제 vs 예시, 오디오가 측정에 의해 평가되었음을 보고합니다. 이전 버전은v1/에 보관합니다. 사용자가 승인할 때까지 비디오를 한 언어로 유지합니다. 각 추가 로케일은 완전히 다시 렌더링해야 하므로, 사용자가 원하는 로케일을 질문합니다.
외형 계약
- 부드러운 태양이 있는 아이보리/오트밀 세계. 어두운 스튜디오 배경이나 채도 높은 분홍색 없음.
- 중성 티타늄 폰, 사진 스타일 베이지 배경화면, 진한 잉크 시계, 온스크린 카드의 밝은 팔레트.
- SF Pro Rounded 볼드 헤드라인; 2번째 라인은 주황색 그라데이션.
- 마스코트가 상호작용함(착지, 구르기, 머리 부딪히기, 요소 위로 점프). 절대 그냥 돌거나 포즈만 취하지 않음.
- 실제 부드러운 그림자. DOF 또는 블룸 없음.
흔한 실수
| 실수 | 수정 방법 |
|---|---|
비트를 frames에 전달하거나 초를 stills에 전달 | frames = 초, stills = 비트 (20초 = 32비트) |
| 마스코트가 착지 즉시 버튼을 떠남 | 약 0.2비트 동안 머물러 누름 동작이 읽히도록 |
| 마스코트가 시간 또는 레이블 위에 서 있음 | 가리게 될 정보 옆에 배치 |
opacity로 메시 페이딩 | 이동, 크기 조정 또는 숨기기 |
| 브랜드 색상이 주황색 헤드라인 그라데이션과 충돌 | 브랜드는 마스코트 및 버전 번호에 유지; 사용자가 요청하는 경우에만 헤드라인 그라데이션 변경 |