세로형 SaaS 데모 비디오
이런 비디오는 실제 사용 사례를 처음부터 끝까지 보여주며, 실제 제품 인터페이스를 3D 기기 위에 배치합니다. 모든 요소는 서로 연결되어 있으며, 각 요소는 이전 요소에서 자연스럽게 파생됩니다. 소리 없이도 이해할 수 있도록 각 단계마다 레이블이 붙어 있고, 단 한 순간의 무음도 없습니다.
참조에 명시된 숫자(프레임, 볼륨, 시간)는 이 스킬이 만들어진 비디오(32.6초 음성 버전과 32.9초 무음 버전, 휴대폰이 회전하며 코인을 떨어뜨림)를 기준으로 합니다. assets/codigo/의 무음 버전이 템플릿입니다. Plantilla.tsx는 '당신의 브랜드'에 대해 동일한 동작으로 동일한 스토리를 보여주며, 비디오마다 달라지는 모든 내용은 ajustes.ts(브랜드명, 색상, 폰트, 텍스트, 화면 캡처, 사운드)에 있습니다. 새 무음 비디오를 만들 때는 이 템플릿에서 시작하세요.
각 단계에 도달했을 때만 해당 참조를 읽으세요:
| 단계 | 읽을 파일 |
|---|---|
막별 대본, timeline.json, 음성 기반 애니메이션 | references/estructura.md |
| 3D 노트북 및 휴대폰, 선명한 화면, 카메라, 기울어진 휴대폰 피드, 회전 및 돈 | references/imagen-3d.md |
| 시선 유도: 한 번에 하나의 초점, 객체 옆 레이블, 타사 로고 없는 아이콘 | references/atencion-ojo.md |
| 제품 레이블, '마법' 등장 효과(!), 네오모피즘, 연결된 전환, 커서 | references/transiciones-estilo.md |
| 음성: 모델, 음성 선택, 테이크, 배치, 단어별 프레임 매핑 | references/voz.md |
| 효과음, 사운드 팩, 음악, Remotion에서의 믹싱 및 무음 구간 | references/sonido.md |
| 렌더링, 측정, 연락처 시트 및 알려진 버그 목록 | references/revision.md |
| 교훈 정리 및 공유(선택 사항) | references/lecciones.md |
절대 원칙
- 실제 데이터 사용. 화면, 텍스트, 가격, 흐름은 실제 제품(웹사이트, 저장소 또는 사용자가 제공한 정보)에서 가져와야 합니다. 가짜 숫자, 거짓 사용 후기, 결과 보장 금지. 예시 데이터가 필요한 경우 '예시'라는 표시를 붙이세요. 텍스트를 작성하기 전에 프로젝트의 지침(
CLAUDE.md,AGENTS.md등)을 읽어 브랜드, 플랫폼, 단어 사용 금지 조건을 확인하세요. - 음성은 보조 수단일 뿐이며, 없을 수도 있습니다. 비디오는 무음 상태에서도 이해 가능해야 합니다. 각 단계가 화면에 표시되고 레이블(굵은 선과 회색 선)로 설명됩니다. 음성이 있는 경우 각 문장에 레이블이 있어야 합니다.
- 무음 구간 금지. 0.3초 구간이라도 -29 LUFS 이하로 떨어지면 안 됩니다. 음악은 프레임 0부터 재생되며, 모든 시각 요소에는 해당 사운드(키보드, 팝, 타격음)가 있습니다. 처음에 음성이 없는 부분이 있어도 되지만, 사운드가 없는 부분은 절대 있어서는 안 됩니다.
- 모든 것이 연결되어야 합니다. 어떤 것도 갑자기 나타나거나 사라지면 안 됩니다. 메시지가 잘리고 브랜드가 등장하고, 노트북이 닫힌 상태로 들어와 열리고, 요소가 한 화면에서 다른 화면으로 점프하고, 휴대폰이 다음 장면의 미리보기가 됩니다.
- 애니메이션은 무언가에 기반해야 합니다. 음성이 있는 경우 모든 순간은
특정 단어의 프레임 + n입니다. 음성이 없는 경우 모든 순간은 이전 순간에 연결된 대본 상수(GIRO = ASOMBRO + 8)이며, 지속 시간은timeline.json과 비교하여 확인합니다. 코드 전체에 흩어진 임의의 숫자는 절대 사용하지 마세요. - 결정론적 움직임. 모든 것은 프레임의 순수 함수여야 합니다.
Math.random(),Date, 또는 프레임 간 상태를 사용하지 마세요. - 잘리거나 비어 있는 부분 금지. 3D 객체는 프레임 안에 완전히 들어와 중심을 기준으로 회전해야 합니다. 객체는 조각이 아닌 완전한 이미지로 페이드 인/아웃되어야 합니다(조각으로 하면 내부가 보임). 각 항목의 첫 프레임을 항상 확인하세요.
- 보안. ElevenLabs 키는 환경 변수
ELEVENLABS_API_KEY에만 저장해야 합니다. 파일, 채팅, 출력에 절대 저장하지 마세요. 모델이나 사운드 라이브러리를 질문 없이 게시, 구매, 다운로드하지 마세요. 사용자가 요청하지 않는 한 커밋하지 마세요. 게시 시 비디오는 AI로 제작되었음을 표시해야 합니다. - 제품처럼 보여야지 광고처럼 보이면 안 됩니다. 소문자 sans-serif 인터페이스 폰트를 사용하고 색상이 있는 단어에 밑줄을 긋지 마세요. 한 고객이 '비전문적'이라고 거절했습니다. 활성 상태는 굵은 선으로 표시하고 브랜드 색상은 브랜드 자체에만 사용하세요. 감정은 움직임(기울이기, 가속, 회전, 갑작스러운 등장)에서 나와야 하지, 타이포그래피에서 나와서는 안 됩니다.
- 한 번에 하나의 초점, 시선 유도. 위쪽 레이블을 읽으면서 아래쪽 애니메이션을 동시에 볼 수 없습니다. 레이블은 장면이 정지되었을 때 나타나고 해당 객체에 붙어 있어야 하며(카메라 내에서 장면마다 다른 위치), 장면은 레이블을 읽은 후에만 움직여야 합니다. 새로운 요소는 시선이 이미 있는 곳에 나타나거나 움직이는 무언가에 의해 끌려와야 합니다. 대본을 쓰기 전에
references/atencion-ojo.md를 읽으세요. - 타사 로고 사용 금지. 소셜 미디어나 이메일을 표시하려면 평문 이름과 범용 아이콘을 사용하세요. 브랜드 로고는 일반적으로 허가가 필요하거나 지지를 암시하는 것을 금지합니다.
- 보이는 부분에 집중하세요. 휴대폰 화면에서 위쪽(상태 표시줄), 아래쪽(이름, 게시물 텍스트, 버튼), 오른쪽(버튼 열)은 잘릴 수 있습니다. 읽을 수 있는 모든 것은 안전 영역(x 65-888, y 288-1248, 메타, 유튜브 공통) 안에 있어야 하며, 카메라는 프레임 중심이 아닌 이 안전 영역의 중심에 고정되어야 합니다. 전달 전에
scripts/zonas.py로 확인하세요. 숫자와 출처는references/atencion-ojo.md에 있습니다. - 허가 없이 공유 금지. 마지막 단계의 교훈은 로컬에 저장됩니다. 사용자가 보낼 내용을 정확히 확인한 후 명시적으로 동의한 경우에만 공유하세요.
워크플로우
- 자료 및 대본. 실제 화면, 텍스트, 색상을 수집합니다. 막별 대본과 음성 문장을 작성합니다(
references/estructura.md,references/voz.md). 제작 전에 사용자에게 대본과 막 구성을 보여주세요. - 음성 우선(있는 경우). 테이크를 생성하고 선택하여
timeline.json에 배치합니다. 그러면 각 단어의 프레임이 고정됩니다. 음성이 없는 경우 대본 상수를 고정하고 해당 프레임에 맞춰 음악을 생성합니다. - 이미지. 처음부터 시작하지 말고 템플릿을 사용하세요.
assets/codigo/를 프로젝트에 복사하고ajustes.ts를 채운 후 실제 화면 캡처를 해당 위치에 넣습니다. 제품 스토리가 요구하는 경우에만 막을 변경하세요(references/estructura.md). - 사운드. 사운드 팩의 효과음(또는 동일한 프롬프트로 새로 생성), 음악 구간(마지막 타격음을 브랜드 로고에 맞춤), 레벨링 및 음성 아래 배치.
- 측정 및 검토. 각 항목 및 전환의 단일 프레임 확인, 중간 해상도 드래프트, 연락처 시트, 볼륨 및 무음 구간 확인(
references/revision.md). 수정, 재측정, 빠른 전달. 완벽함은 다음 반복에서 추구하세요. - 전달. PNG 시퀀스로 렌더링된 최종 MP4, 볼륨, 피크, 지속 시간 포함. 측정된 항목, 확인된 항목, 사용자만 청각/시각적으로 판단할 수 있는 항목을 설명하세요. 비디오 README를 업데이트하세요.
- 교훈 정리. 이번 비디오에서 문제가 발생하여 해결한 경우 로컬
assets/leccion.md에 교훈을 기록하세요(references/lecciones.md에 위치 및 방법 명시). 공유 여부를 질문하고, 명시적 동의 시gh로 이슈 또는 PR을 엽니다.gh가 없으면 양식 링크를 제공하세요. 동의 없이는 아무것도 보내지 마세요.
스킬에 포함된 파일
scripts/
elevenlabs.py 단어별 시간, 효과음, 음악을 포함한 음성 생성; 재사용을 위한 캐시
paquete_efectos.py 레시피에 따라 효과음을 생성, 선별, 준비 (API 키 필요)
nivelar_musica.py 프레임별 음악 볼륨 커브 생성 (무음처럼 들리지 않도록)
cortar_teclas.py 키보드 입력음을 8개의 개별 키 소리로 분할
medir.py MP4의 LUFS, 실제 피크, 지속 시간, 연락처 시트 생성
silencios.py 임계값 이하 구간 탐지 (무음 구간)
zonas.py 세로형 광고 안전 영역이 그려진 연락처 시트 생성
caja.py 프레임별 어두운 객체의 너비와 중심 계산; 프레임 경계 접촉 경고
huecos.py 깨진 프레임 탐지: 흰색 배경 또는 누락된 3D 객체 프레임
empalme.py 음악 재생성 없이 막을 연장: 가장 유사한 지점에서 전체 마디 반복
claridad.py 음성 캐스팅: 어떤 테이크가 비디오 음악 아래에서 가장 잘 들리는지, 어떤 테이크에 치찰음이 있는지 확인
assets/sonidos/ receta.json: 생성할 27가지 인터페이스 효과음 목록 (볼륨은 references/sonido.md 참조)
assets/codigo/ 템플릿 및 구성 요소 (LEEME.md 참조)
Plantilla.tsx 무음 전체 구성: 채팅, 브랜드, 노트북, 휴대폰, 피드, 회전 및 코인, 리뷰, 보고서, 양식
ajustes.ts 채워야 할 유일한 파일: 브랜드, 색상, 폰트, 텍스트, 캡처 및 사운드
kit-plantilla.tsx 색상, 폰트, 곡선, p()/mix() 함수
mundo3d.ts three.js를 사용한 노트북, 휴대폰 및 코인 (여백이 있는 캔버스)
timeline.json 템플릿의 지속 시간 및 음악 구간; plan-musica.json, ElevenLabs용 계획
assets/leccion.md 교훈 템플릿 (저장소의 lecciones/PLANTILLA.md와 동일)
스크립트는 uv run <script>로 실행하며, 종속성은 내부에 선언되어 있습니다.
새 프로젝트 시작
- Remotion 4와
three사용 (0.18x).remotion.config.ts에Config.setChromiumOpenGlRenderer('angle')추가. Windows에서는 경로를 짧게 유지하세요 (260자 초과 시 오류 발생). scripts/elevenlabs.py가 음성, 효과음, 음악을 처리합니다.uv run scripts/paquete_efectos.py assets/sonidos/receta.json public/<project>/sfx로 효과음을 생성하고ajustes.sonido.efectos를 해당 폴더로 설정하세요. ElevenLabs 키가 없으면 동일한 이름의 자체 사운드 파일을 사용하세요.
사용자와 협업하는 방법
- 사용자의 언어로 직접적이고 실용적으로 답변하며, 메뉴 대신 하나의 추천을 제시하세요.
- 렌더링이나 생성처럼 시간이 오래 걸리는 작업은 한 줄로 미리 알리세요.
- 빠르게 검토 가능한 버전을 전달하고 계속 개선하세요.
- 사용자가 '잘렸다', '비어 있다', '연결되지 않았다'고 말하면, 아무것도 건드리기 전에 프레임이나 측정값에서 원인을 찾고, 한 문장으로 설명하세요.