Ameliawampler/launch-video

런칭 비디오

당신은 감독이자 제품 스토리텔러입니다. 편집자는 그 다음입니다. 모든 장면은 시청자를 "이해했어, 원해"라는 한 걸음 더 가까이 이동시킴으로써 그 자리를 얻어야 합니다.

비디오는 단일 시계가 있는 웹 페이지입니다. window.seek(T)는 전역 초 T를 그립니다. Playwright가 30fps로 스크린샷을 찍고, ffmpeg가 음성 해설 및 배경 음악과 함께 프레임을 인코딩합니다. 실제 시간(wall-clock time)에 의존하는 것이 없으므로 어떤 프레임이든 자체적으로 다시 렌더링할 수 있습니다. 이를 통해 다른 장면에 영향을 주지 않고 한 장면을 수정할 수 있습니다.

시작 파일은 template/ 및 scripts/ 디렉토리에 있으며, README에서 실행 방법을 설명합니다.

1. 픽셀보다 먼저 스토리

스크립트를 A, B, C 등으로 키가 지정된 문장으로 작성하십시오. 각 문장은 하나의 캡션과 하나의 비트(beat)가 됩니다. 다음 4비트 구조를 사용하십시오:

1. 훅(0~8초). 시청자의 언어로 고통을 언급하십시오. 로고 월, "소개합니다"는 없습니다. 첫 8초가 나머지를 볼지 말지를 결정합니다.
2. 제품 동작(8~45초). 하나의 문제, 그다음 그 문제를 해결하는 기능, 그다음 결과입니다. 실제 제품이 실제 작업을 수행하는 모습을 보여주십시오: 프롬프트 입력, 답변 얻기, 게시 누르기. 기능 퍼레이드는 피하고 최대 4~5가지 기능을 보여주십시오.
3. 차별점(45~75초). 움직이는 다이어그램과 함께 아키텍처 또는 통합 스토리를 보여주십시오. 누가 무엇을 하는지 설명하십시오. 예: "우리는 X를 합니다; Stripe가 결제 및 세금을 처리합니다."
4. 제안 + 마무리(마지막 10~15초). 가격 또는 요금제를 제시하고 하나의 브랜드 라인으로 끝내십시오. 그 마지막 라인을 짧고 기억에 남게 만드십시오.

총 80~95초를 목표로 하십시오. 나중에 동일한 타임라인에서 30초 광고 컷과 9:16 컷을 만들 수 있습니다.

2. 시각적 규칙(엄격한 제약)

• 브라우저 크롬 없음. 탭, URL 표시줄 또는 북마크를 절대 표시하지 마십시오. 실제 기록을 참조로만 사용하여 제품 화면을 깨끗한 HTML 카드로 다시 구축하고 모든 데이터를 익명화하십시오.
• 제품 이미지가 떠 있습니다. 둥근 모서리(16~18px)와 부드러운 긴 그림자를 제공하십시오. 카드가 프레임을 가득 채우지 않도록 넉넉한 패딩을 유지하십시오. 최대 약 75% 너비입니다.
• 제품 이미지 위에 단어를 배치하지 마십시오. 설명은 UI 옆의 콜아웃이나 아래 캡션에 배치하고 스크린샷 위에는 절대 배치하지 마십시오.
• 액센트 색상은 어두운 배경에서만 나타납니다. 제품 이미지에는 절대 사용하지 마십시오. 브랜드 라인에 액센트가 필요하면 끝 카드를 어두운 브랜드 색상으로 배치하십시오.
• 모든 것을 하나의 색조로 만들지 마십시오. 하나 또는 두 개의 보색 포인트를 사용하십시오. 예를 들어 경고 점에 빨간색 #C8323C, 파트너 브랜드에 보라색을 드물게 사용하십시오.
• 한 번에 한 영역에 집중하십시오. 기능을 강조하려면 커서가 그곳으로 이동하고, 더블 클릭하고, 카메라가 확대되고, 나머지 UI는 회색 처리되거나 흐려집니다.
• 콜아웃은 실제 DOM 요소에 고정된 작은 흰색 알약 모양과 색상 점입니다. 약간 오버슈트와 함께 나타나며, 최대 3개가 화면에 표시되고 장면이 종료되기 전에 사라집니다.
• 배경: 천천히 표류하는 흐릿한 브랜드 색상 blob과 6% 그레인(grain). 조용해야 하고 제품과 절대 경쟁하지 않아야 합니다. 배너 디자인을 그대로 복사하지 마십시오.

3. 모션 용어

• 장면 전환 = 블러 모프(blur-morph). 장면이 축척 0.92로 18px 블러와 함께 들어와 0으로 페이드아웃되며 약 0.7초에 걸쳐 이즈아웃됩니다. 축척 +5%, 블러 18px 및 불투명도 0으로 0.55초에 걸쳐 종료됩니다. 장면을 약 0.1초 겹치십시오. 픽셀 와이프나 패브릭 풀과 같은 속임수 같은 전환은 피하십시오. 저렴해 보입니다.
• 느린 푸시인(Slow push-in): 각 장면에서 3~5%씩 진행되어 어떤 것도 정적이지 않도록 합니다.
• 요소 진입: 300650ms에 걸쳐 이즈아웃을 사용하고 80150ms 간격으로 지연시킵니다(stg()).
• 커서: 부드러운 이즈드 이동, 클릭 시 누름 애니메이션(120ms 동안 축척 0.82), 클릭 전 약 0.3초 유지.
• Dock 인트로(0~2.5초): 실제 Apple 앱 아이콘(iOS/macOS UI 키트에서 가져오고 손으로 그리지 않은 것)과 중앙에 당신의 앱 아이콘이 있는 프로스트 macOS Dock입니다. 앱 슬롯이 커지고, 카메라가 그쪽으로 확대되고, 커서가 클릭하고, 아이콘이 실행 도트와 함께 바운스되며 장면이 앱으로 블러 모프됩니다.
• 리듬: 각 비트가 숨 쉴 시간을 주십시오. VO 문장 후 다음 아이디어 전에 0.8~2초의 시각적 유지를 남겨두십시오. 서두르는 느낌이 들면 그렇습니다. 시각 자료를 자르기 전에 VO 간격을 다시 조정하십시오.

4. 오디오

• VO: 창립자의 ElevenLabs 음성 클론으로 음성 해설을 생성합니다. 전체 스크립트를 한 번에 읽습니다. (Scribe로) 전사하여 단어 수준 타이밍을 얻은 다음 간격을 다시 조정합니다. 문장 사이의 침묵을 잘라내고 비트가 여유를 필요로 하는 곳에 추가 침묵을 삽입합니다. 문장 시작 및 종료 시간을 TL={A:[start,end,text],...}로 timeline.js에 작성하고, 모든 애니메이션을 하드코딩된 초가 아닌 TL에 기반하여 키프레임을 지정합니다.
• 한 줄을 변경하려면 해당 줄만 생성하고 침묵 지점에 스플라이스한 다음 해당 TL 항목을 업데이트하십시오.
• 음악: 기악 배경 음악입니다. 보컬이 없는지 확인하기 위해 전사 내용이 비어 있는지 확인하십시오. 볼륨 0.3으로 믹싱하고 사이드체인 덕킹을 VO 아래에 적용하며, 마지막 3~4초에 걸쳐 페이드아웃합니다(scripts/mix.sh 참조).

5. 웹사이트에서 애니메이션 가져오기

스크롤 기반 사이트 애니메이션을 프레임별로 캡처할 수 있습니다(scripts/capture-scroll.js):

• 내비게이션, 쿠키 배너 및 섹션 텍스트를 숨겨서 시각적 요소만 남도록 합니다.
• 조밀하게 캡처하고 4px 스크롤 단계를 사용합니다. 16px 단계를 10초 동안 재생하면 약 6fps로 끊겨 보입니다.
• 캔버스에서 인접 프레임을 소수 인덱스로 혼합하여 서브 프레임(sub-frame) 부드러움을 얻습니다.
• 병렬 브라우저에서 캡처를 분할하는 경우 먼저 동일한 시작 위치에서 스크롤하여 각 브라우저를 워밍업하십시오. 스크롤 애니메이션은 상태 저장적이므로 페이지 중간에 새로 로드하면 이음새에서 점프가 발생합니다.
• 연속 프레임 간의 평균 절대 차이를 스캔하여 이음새를 확인하십시오. 중앙값보다 훨씬 높은 스파이크는 점프를 의미합니다.

6. 파이프라인

1. 스크립트를 작성한 다음 VO를 생성하고, 전사하고, 간격을 다시 조정하고 timeline.js를 작성합니다.
2. scenes.js에서 장면을 구축합니다. 각 장면은 S({tIn,tOut,s0,push,ox,oy,build(){...},update(T){...}})입니다.
3. node scripts/preview.js page.html out.png T ...로 주요 비트에서 스틸을 확인합니다.
4. scripts/render-parallel.sh로 렌더링합니다. 변경한 시간 범위만 다시 렌더링합니다.
5. scripts/mix.sh로 믹싱한 다음 scripts/encode.sh(libx264 crf 17, yuv420p, AAC 192k, faststart)로 인코딩합니다.
6. QA: 인코딩된 mp4에서 모든 장면의 프레임을 추출하고 브랜드 라인, 콜아웃 및 이음새를 확인합니다. 보내기 전에 전체 속도로 한 번 들어보십시오.

7. 어렵게 얻은 교훈

• 렌더링을 작업자를 기다리는 단일 추적 백그라운드 작업으로 실행하십시오. 분리된 nohup 작업은 종료되어 부분 프레임을 남깁니다.
• 페이지당 수백 개의 대형 이미지를 미리 로드하면 Chromium이 "Target crashed"와 함께 충돌할 수 있습니다. 페이지가 큰 이미지 시퀀스를 미리 로드하는 경우 최대 2개의 병렬 작업자를 사용하십시오. 작업자 충돌은 조용히 오래된 프레임을 남기므로 인코딩 전에 항상 프레임 수와 작업자 로그를 다시 확인하십시오.
• 클래스 이름이 앱의 CSS와 충돌할 수 있습니다. 예를 들어 앱 스타일시트의 .dark는 카드를 1080px 높이로 만들 수 있으므로 장면 클래스에 접두사를 붙이거나 특이한 이름을 사용하십시오.
• 콜아웃은 장면 종료 시간에 고정되어야 합니다. 그렇지 않으면 다음 장면 위에 남아 있습니다.
• 콜아웃에서 기술적 주장을 과장하지 마십시오. "0ms"가 아니라 "API 왕복 없음 · 프로세스 내에서 결정됨"이라고 작성하십시오.
• 아웃트로 라인을 변경할 때 끝 카드에 이미 같은 단어가 표시되는 경우 해당 캡션도 제거하십시오.