clementsprs/product-motion-film

프리미엄 제품 모션 필름

약 40초 분량의 제품 필름을 제작하기 위한 레시피입니다. 브랜드 자체 런칭 영상처럼 보이고 생동감 있게 느껴지도록 제작되었습니다: UI 기반, 사람 없음, 나레이션 없음, 음악 및 약간의 사운드 악센트. 실제 런칭 필름에 대한 약 15번의 리뷰 라운드를 거쳐 개선되었으며, 파트너 브랜드 자체 콘텐츠 리뷰도 포함되었습니다. 아래의 모든 규칙은 리뷰에서 돌아온 메모에서 시작되었습니다.

코드 패턴: references/remotion-patterns.md. 브랜드 정보 읽기: references/brand-reading.md. 브리프 형식: references/brief-template.md.

먼저 수집할 입력 사항

1. 브리프: 기능당 한 행 (사용자가 묻는 내용, 제품이 하는 일, AI가 답변하는 내용). 브리프가 없으면 작성하고 (references/brief-template.md) 빌드 전에 승인을 받으십시오.
2. 브랜드의 라이브 표면: 주제와 가장 가까운 마케팅 페이지 및 제품 앱, 브라우저에서 열기.
3. 사용자가 가져오는 에셋: 로고타입 (SVG), 아이콘, 배경 패턴, 파트너 및 채널 로고 (실제 파일), 라이선스된 woff2 폰트, 가상 인물을 위한 아바타 (생성 또는 라이선스), 음악: 생성하기 전에 사용자가 원하는 트랙이 있는지 물어보십시오.
4. 포맷: 먼저 16:9; 16:9가 승인된 후에만 1:1 및 4:5 컷.

브라우저를 열 수 없으면 그렇게 말하고 스크린샷을 요청하십시오. 절대 기억에 의존하여 브랜드의 색상이나 서체를 추측하지 마십시오.

1. 라이브 사이트 및 앱에서 브랜드 정보 읽기

페이지 내 작은 스크립트로 실제 값을 가져오십시오 (getComputedStyle on the H1, body, primary button, a card; 참조 references/brand-reading.md): 제목 폰트 / 두께 / 자간, 잉크 및 보조 회색, 악센트, 카드 모서리 반경 및 가는 선, 배경 처리, 시그니처 비주얼 (예: 밤하늘 배경), 로고타입 SVG. 모든 값을 하나의 theme.ts에 기록하고 읽은 위치와 시간을 명시하십시오; 다른 곳에서는 색상 리터럴을 사용하지 마십시오.

일반 모션 키트를 기반으로 빌드된 버전은 "프리미엄이 아니고 브랜드에 맞지 않는다"는 이유로 거부되었습니다: 브랜드 자체 라이브 시스템을 기반으로 빌드하십시오.

2. 구조: 하나의 연속적인 대화

부분	길이	내용
훅	~5초	함께 작동하는 AI들을 전체 로고와 이름으로 표시하며, 하나의 칩으로 전환되고 모든 아이콘이 함께 모여 끝남; 짧은 두 줄의 주장 (잉크 + 회색); 제품 로고타입이 강하게 등장 ("<제품>이 작동하게 합니다.")
대화 ×4	각 ~7-10초	프롬프트가 떠오르며 중앙에 크게 자체 입력됨 → 전송됨, 오른쪽으로 슬라이드됨 → 상태 표시줌 ("<제품> 검색 중…" + 실제 도구 이름, 점 → ✓) → 제품 카드가 스레드 내에 나타나 완전히 재생됨 → AI의 답변이 메시지 버블로 스트리밍됨
피날레	~3.2초	브랜드의 어두운 배경이 전체 프레임으로 올라옴 (유일한 어두운 순간); "[로고]의 모든 힘, 이제 당신의 AI에서."; 일반 URL

• 중간 화면, 타이틀 카드, 상단 캡션 없음. 하나의 토론이 기능을 보여줍니다. 각 새 프롬프트가 전환입니다: 스레드가 스크롤되고, 새 메시지가 올라오면서 이전 교환을 위로 밀어냅니다. 한 단계 내에서 카메라는 프롬프트 → 제품 카드 → 답변으로 이동합니다.

• 한 번에 한 가지만 집중. 채팅이 한쪽에 있고 제품이 다른 쪽에 있는 분할 화면은 사용하지 마십시오 ("화면에 정보가 너무 많습니다").

• 전반적으로 밝은 배경. 제품의 결과는 카드로 대화 속에 표시됩니다; 영화 중간에 어두운 패널이 올라오는 것은 어색한 컷으로 느껴졌습니다. 어두운 부분은 엔드 카드용입니다.

• 제품이 모든 AI와 작동할 때 AI 중립적 (MCP 서버, 공개 API): 채팅에 단일 어시스턴트의 로고, 서체 또는 색상이 없습니다. 헤더 = "<제품> MCP" 칩 + "함께 작동" + AI 아이콘; 답변은 제품 본문 폰트에 제품 색상 꼬리가 달린 단어가 아직 도착 중입니다.

• AI는 메시지 버블로 대화합니다 (흰색, 왼쪽, 사용자의 회색 버블 반대쪽). 답변 텍스트만 표시하면 캡션으로 읽혀 "대화의 일부"가 아닙니다. 아바타는 필요하지 않습니다.

• 답변 전에 실행을 완료하십시오: 카드가 완료된 후에만 답변이 시작됩니다. 단계 길이 = 입력 + 상태 + 카드 자체 실행 시간 + 답변.

• 모바일 크기: 1920 × 1080 캔버스에서 프롬프트 ~62px, 상태 ~44px, 답변 ~58px; 제품 카드는 약 1.2-1.4배 확대 (카드별로, 가장 높은 카드가 여전히 헤더를 넘지 않도록).

• 에이전트 주도 변형 (제품이 AI 에이전트인 경우): 역할이 뒤바뀐 동일한 문법. 에이전트가 먼저 작성 (흰색 버블, 헤더에 마크 + 워드마크), 사용자가 결정 (회색 버블, 라이브 웨이브폼 및 대본이 포함된 음성 메모). 장치를 보여주고, 쓰지 마십시오: 휴대폰 순간은 잠금 화면에서 에이전트의 푸시 알림이 떨어지면서 열리고, 탭하면 배너가 앱 열리듯 전체 프레임으로 확장되며 대화가 그 안에 있습니다; 앱 아이콘은 흰색 타일에 에이전트의 얼굴입니다. 장치가 너비에 표시됩니다: 휴대폰 순간은 휴대폰 프레임 안에 (좁은 열, 알림이 그 안으로 열림), 노트북 순간은 전체 너비를 사용합니다; 프레임이 그 사이에서 튀어 열리며 전체 기록이 새 너비로 다시 흐릅니다 (스레드를 휴대폰과 노트북으로 두 번 배치하고 위치와 크기를 프레임과 혼합). 따라서 대화가 사라지지 않습니다. 장치 이름을 한 번만 지정 ("노트북에서"), 이후 구분선에는 시간만 표시됩니다. 증명 장면 (고객 사례, 참고 자료)을 길이를 맞추기 위해 자르지 마십시오: 요청 시 다시 돌아왔습니다. 에이전트 주도 영화에서 에이전트의 작은 마크는 각 메시지 옆에 있습니다 (AI 중립적 MCP 영화와 다름). 장치를 넘나드는 하루는 헤더 컨텍스트 칩이 되어 전환됩니다 ("휴대폰에서 · 오전 8:42" → "노트북에서") 더하기 스레드의 시간 구분선, 장치 프레임은 사용하지 않습니다. 항목 목록 (에이전트 / 사용자 / 음성 / 카드 / 구분선, 각각 읽기 기간 포함)으로 빌드하고 시작, 레이아웃 및 스크롤 카메라를 계산합니다.

• 프로액티브 에이전트 변형 (외부에 선호됨): 요점이 에이전트가 사용자를 위해 작업한다는 것이라면 채팅을 전혀 표시하지 마십시오. 에이전트가 푸시 (자체 음성의 헤더 라인 + 카드)하고 사용자는 수락 또는 건너뛰기만 탭합니다 (누름 + 리플, 그런 다음 "수락됨" 칩; 에이전트가 목록을 푸시할 때 행당 건너뛰기 / 수락); 푸시된 카드에 이미 자체 작업 버튼 ("오늘 통화에 추가")이 있는 경우 사용자는 해당 버튼을 탭하고 별도의 수락 행이 없습니다. 사용자가 지시를 입력하는 경우 ("인트로를 자르고 보내줘") 일반 LLM 채팅으로 읽힙니다. 수락을 넘어서는 한 순간을 허용합니다: 사용자가 에이전트가 통찰력으로 답변하는 질문 ("Tom에 대해 알아야 할 것이 있나요?") 또는 에이전트가 즉시 수행하는 추가 작업을 요청합니다; 사본 수정은 절대 안 됩니다. 외부 컷을 에너지로 시작하십시오: 실제 앱 알림의 폭풍이 쌓이고 흔들리며, 던져진 후, "너무 많은 스레드." 그리고 에이전트의 마크가 강하게 등장합니다.

3. 카피

• 프롬프트는 한 사람이 대화를 계속하는 것처럼 들립니다: 연속성은 이전 내용에 대한 참조 ("그들을 위해", "이 신호들", "이것 실행")에서 오며, 가벼운 반응은 최대 하나입니다. 모든 프롬프트에 칭찬 단어를 사용하지 마십시오.
• 구체적이고 가치를 전달하며, 단계 전체에서 하나의 공유 어휘를 사용합니다 (예: 모든 프롬프트에서 "구매 의도 신호").
• 숫자는 적게: 훅에는 숫자 없음 (가격 없음); 숫자는 카드 내부에 있습니다. 주장 숫자는 브리프에 출처가 있습니다; UI 숫자는 예시로 표시됩니다; 사람과 회사는 가상입니다.
• 상태 표시줄에 실제 도구 또는 API 이름을 사용하고, 제품의 실제 도구 목록과 대조 확인합니다. 절대 하나를 invent 하지 마십시오.
• 로고가 이름을 대체합니다: 마지막 줄 안의 로고타입; 로고타입 + 워드 잠금은 단어 공간을 유지합니다. URL에 화살표나 버튼 없음: 비디오에서는 아무것도 클릭할 수 없습니다.

4. 제품 카드: AI가 실제로 수행한 작업 표시

• 단계당 하나의 카드, 3-4행, 헤더에 제품 전체 로고타입.
• 정성적, AI 시대 출력, 배관 작업 아님: {{firstName}} 병합 태그 없음 ("AI 시대에 충분히 정성적이지 않음"). 하나의 레코드에 대해 실시간으로 작성된 실제 메시지, 데이터에서 가져온 구절이 마커 스윕으로 강조 표시되고, 한 줄 각도 표시.
• 워크플로우는 조건부 분기가 있는 흐름입니다 (실제 단어가 있는 단계 → "3일 기다림" → "열리지 않음" → 이메일 / "열림, 응답 없음" → 라이브 웨이브폼이 있는 음성 메시지), 날짜 아이콘 행이 아닙니다. 흐름이 그려질 때 카드가 아래로 커집니다: 절대 빈 블록 없음.
• 실제 채널 로고 (LinkedIn, Gmail…)가 진정성을 더합니다.
• 상태 목록은 현대적인 실행 로그: 채워지는 얇은 레일, 점 보류 중 → 회전 링 → 브랜드 색상의 채워진 체크, 단계당 결과 줄, 작은 기간. 녹색 체크가 있는 상자형 아이콘 사각형은 "구식"으로 읽힙니다.
• 상태 변경은 그 자체로 하나의 순간: 토글은 카드가 도착할 때까지 기다렸다가 트랙이 페이드 인, 노브가 압축, 맥동 링 퍼짐, "활성" 레이블 팝, 그런 다음에만 실행이 시작됩니다.
• 표시된 작업에 속하지 않는 UI 잘라내기 (일정 단계의 팀 채팅 요약 카드는 "이치에 맞지 않음").

5. 모션 문법: 요소에서 다이내믹, 정지 시점에서 읽기 가능

기준: 모든 요소에 물리 효과가 있는 유쾌한 런칭 영화 (공개 예: Allo의 "We decided to give Grok Bot a phone", 2026년 10월; 마스코트 불필요) 및 AI 어시스턴트 자체 런칭 영화 (프레임 없는 대화, 큰 글씨).

• 이징이 아닌 스프링 모든 도착 요소에 대해 (spring() 오버슈트 포함; 패턴 파일의 프리셋 및 감쇠된 kick()).
• 단어가 약간 기울어져 튀어 오르며 줄이 만들어지면서 서로를 밀어냅니다; 오래된 줄은 던져지고, 절대 페이드 아웃되지 않습니다. 로고타입이 강하게 등장하고 줄이 한 번 흔들립니다.
• 스레드 카메라: 텍스트 길이 추정에서 스레드를 배치하고 초점 지점 사이를 부드러운 스프링으로 스크롤합니다 (새 프롬프트 중앙 정렬 → 카드 중앙 정렬 → 답변 보기), 전송 및 카드 도착 시 약간의 펀치. 헤더는 흰색 페이드 위에 있어 스크롤된 콘텐츠가 그 아래로 미끄러집니다.
• 카드가 스프링으로 도착 (약간 기울어짐, 도구 호출이 도착할 때 약간의 충돌); 행이 슬라이드 인, 태그 및 체크 표시 팝, 막대 오버슈트, 미리보기 플립.
• 정지 시간은 길게, 모션은 빠르게: 3.2초 단계는 "너무 빨라서 읽을 수 없습니다". 다이내믹함은 빠른 시작 (0.3-0.6초)에서 오며, 절대 짧은 정지 시간에서 오지 않습니다. 답변은 약 9단어/초, 다음 프롬프트 전 약 1초. 지속 시간과 가독성이 충돌할 때 가독성이 우선: 단계를 삭제하도록 제안합니다.
• 하드 컷, 전체 프레임 크로스페이드 없음: 하나의 연속적인 공간.

6. 음악 및 사운드

• 기분 좋고, 경쾌하며, 현대적인: ~115-122 bpm, 선명하고 스냅한 드럼 (클럽 킥 없음), 경쾌한 베이스, 플럭/기타/마림바, 박수 및 스냅. 리뷰에서 거부됨: 조용한 피아노 배경 ("더 다이내믹하게"), 4/4 일렉트로팝 ("너무 나이트클럽"), 레트로 ("올드 스쿨 아님").
• 선택한 트랙이 너무 짧은 경우 (재고 그루브는 종종 ~25초): 전체 4마디 블록을 마디 경계에서 반복, 인트로 후에 시작하여 영화가 전체 에너지로 열리도록 하고, 마지막 프레임에서 실제 엔딩을 유지합니다. 선택한 트랙을 절대 타임 스트레치하지 마십시오. 패턴 파일의 레시피 ("사운드").
• 생성하는 경우: 영화의 정확한 길이를 요청하고 초당 음량을 확인한 후 빌드하십시오; 모델은 프롬프트된 구조를 무시합니다 (한 테이크는 드롭 전 15초 동안 조용히 앉아 있었습니다). 작동한 프롬프트는 패턴 파일에 있습니다.
• SFX는 눈에 보이는 원인이 있는 경우에만 (로고 전환 및 카드 도착 시 팝, 전송 시 클릭, 프롬프트가 올라오고 피날레에서 부드러운 스윽, 마지막 단계가 체크될 때 차임). 약 -14 LUFS로 믹싱.

7. 품질: 매우 선명하게

• 마스터 슈퍼샘플 2x (--scale=2, CRF 14, JPEG 100, x264 slow); 리뷰 라운드는 일반 1080p 렌더를 사용할 수 있습니다.
• 큰 표면에 CSS 블러 없음; 큰 box-shadow 블러 없음 (Chrome에서 밴딩 처리, 방사형 그래디언트 사용); 제한된 대기를 가진 로컬 woff2 폰트; <Img> 내에서 fill="currentColor"가 있는 SVG는 검은색으로 렌더링되므로 fill을 다시 작성합니다.
• 그림만 변경: --muted로 한 번 렌더링, 각 오디오 믹스를 WAV로 렌더링하고 먹싱. 오디오만 변경: 기존 그림에 다시 먹싱.

8. 빌드 및 리뷰 루프

1. Remotion 프로젝트 스캐폴딩 (패턴 파일의 구조), theme.ts 채우기, 사용자의 에셋을 public/에 넣기.
2. 이 순서로 영화 작성: 로고 목록 + 훅 카피, PROMPTS, TOOLS, STATUSES, REPLIES, 단계당 하나의 카드 컴포넌트 (높이 및 배율 포함), 그런 다음 타임라인 상수 (시작 및 지속 시간 계산), 그런 다음 음악 오프셋.
3. 전체 렌더 전에 모든 단계에서 스틸 (npx remotion still … --frame=<초 × 60> --scale=0.5), 연락처 시트로: 겹침, 줄 바꿈, 헤더 아래 카드, 빈 블록, 남은 단일 어시스턴트 브랜딩.
4. 먼저 1080p 리뷰를 보냅니다; 4K 및 소셜 컷은 승인 후에만. 모든 수정 사항을 같은 날 이 스킬에 다시 기록합니다.

카드 높이는 측정되며, 추측하지 않습니다: 스레드 레이아웃은 각 카드의 높이를 예약하며, 과소평가하면 다음 메시지가 카드 아래로 미끄러집니다 (452px로 예약된 요약 카드가 약 530으로 렌더링되어 겹침). 실제 부분 (헤더 + 본문 패딩 + 행 × 행 높이)을 합산한 다음, 전체 렌더 전에 각 카드의 최종 상태를 그 뒤의 항목과 비교하여 확인합니다.

완료 조건

• 하나의 연속적인 AI 대화로 읽히고, 한 번에 한 가지에 집중하며, 모든 줄을 휴대폰에서 첫 시청에 읽을 수 있어야 합니다.
• 각 단계는 AI가 답변하기 전에 제품에서 완료됩니다; 모든 제품 카드는 실제 채널 로고와 함께 실제적이고 정성적인 출력을 보여줍니다.
• 아무것도 모션 없이 도착하거나 떠나지 않습니다; 아무것도 멈추거나 읽을 수 없게 됩니다.

---

[참조 파일은 그대로 유지되며 번역되지 않았습니다: references/remotion-patterns.md, references/brand-reading.md, references/brief-template.md]