risingjerry/motion-skill

코드 모션 그래픽 단편 영상 (motion)

영상은 코드로 작성됩니다: 모든 프레임은 시간 t로 계산되므로, "여기 좀 천천히"는 숫자 하나만 바꾸고 다시 렌더링하면 됩니다. 다시 촬영할 필요가 없습니다. AI 이미지 또는 비디오 생성 모델을 전혀 사용하지 않습니다. 화면의 모든 것은 실제 자산이나 코드에서 비롯됩니다.

먼저 작업할 레벨 선택

세 레벨은 동일한 워크플로우를 사용하며, 아래로 갈수록 실사 촬영에 가까워지고 시간이 더 걸립니다. 영상의 요구 사항에 따라 선택하며, 혼합하여 사용할 수 있습니다.

레벨	화면 구성	적합한 경우	시작 지점
1. 2D 모션	실제 로고, 실제 스크린샷, 모양이 계속 변형	앱, 소프트웨어, 브랜드 오프닝	templates/2d.html
2. 브라우저 3D	인터페이스 카드가 3D 공간에 배치, 카메라 이동; 실루엣 전환을 통한 실사 영상 연결	다중 화면 인터페이스 시연, 실사 영상을 포함해야 하는 영상	templates/3d.html, scripts/silhouette.py
3. Blender 스튜디오 촬영	실제 제품 모델, 조명 하나, 실제 재질	헤드폰, 휴대폰, 컵 등 실제 제품	scripts/blender/studio.py

자세한 설명: references/layers.md.

워크플로우 (순서대로, 단계 생략 금지)

1. 명확히 파악하고 실제 자산을 준비합니다. 제품이 무엇인지, 대상은 누구인지, 길이는 얼마인지, 어떤 플랫폼에 게시할지, 마지막에 시청자에게 무엇을 요구할지. 자산은 항상 실제 것을 사용합니다: 공식 로고 파일, 실제 기기 스크린샷 (알림, 아바타, 전화번호는 먼저 지우기), 브랜드 색상 및 글꼴. 앱 스토어 홍보 이미지를 인터페이스로 사용하지 말고, 로고를 기억에 의존하여 그리지 마십시오. 실제 제품의 경우 여러 각도의 사진을 먼저 확보하고, 가능하면 사용자가 직접 찍은 실제 제품 사진을 사용하여 나중에 모델 비율을 확인합니다.
2. 엔딩을 결정합니다. 엔딩에는 아이콘과 워드마크만 남깁니다 (또는 실사 영상 연결). "지금 다운로드", "XX 열기" 등의 슬로건은 추가하지 않으며, "컨셉 영상" 면책 조항의 작은 글씨도 넣지 않습니다 (설명이 필요하면 영상 설명에 작성).
3. 번호가 매겨진 스토리보드를 작성하고 상대방의 승인을 기다립니다. 5–10개의 장면, 각각: 시간대, 화면 내용, 동작, 다음 장면으로 전환되는 방식, 화면의 텍스트. shots.json을 작성하고, node scripts/render.mjs board shots.json board.png를 실행하여 상대방에게 보여줄 이미지를 생성합니다. 승인 없이 최종 편집을 진행하지 않습니다. 이 단계에서 수정하는 것이 가장 저렴합니다. 형식은 references/storyboard.md를 참조하십시오.
4. 페이지를 구성합니다. 템플릿과 templates/motion-kit.js를 자산 폴더에 복사합니다. 모든 비트는 페이지 상단의 BEATS에 작성되며, 리듬을 변경하려면 이 한 곳만 수정하면 됩니다. 페이지 규칙은 references/html-engine.md를 참조하십시오.
5. 프레임별로 자체 점검한 후 다른 사람에게 보여줍니다. render.mjs still로 중요한 순간(각 전환에서 3–4개 지점, 멈춘 화면만 보지 않음)을 추출하고, scripts/sheet.py로 하나의 이미지로 합쳐서 먼저 직접 확인합니다. 그런 다음 검사 스크립트를 실행합니다:
   • render.mjs probe + scripts/layout_check.py probe: 텍스트가 객체에서 최소 40px(4K) 떨어져 있어야 하며, 객체가 화면 중앙 근처에 있어야 합니다.
   • 3D: scripts/blender/motion_check.py(관통, 프레임당 최대 6° 회전, 회전 속도 점프 없음), scripts/seam_check.py(덮개 이음새 ≤ 1px). 체크리스트는 references/checklist.md를 참조하십시오.
6. 4K로만 출력합니다. node scripts/render.mjs video page.html 파일명-4K.mp4 --scale 2 (1920x1080 페이지 → 3840x2160). 한 컴퓨터에서 동시에 하나의 4K 렌더링 또는 Blender 렌더링만 실행합니다. 프레임 추출 검사는 4K 최종 영상에서 수행합니다: python3 scripts/sheet.py video ....
7. 화면이 확정된 후에만 사운드를 추가합니다. 화면이 변경되면 모든 비트가 이동합니다. 배경 음악과 음향 효과는 모두 필수입니다. 배경 음악의 가장 강한 비트는 영상의 핵심 포인트와 일치해야 합니다. 전체 -14 LUFS, 실제 피크는 -1 dBTP를 초과하지 않아야 합니다. 비디오 스트림은 원본 그대로 복사하고 재인코딩하지 않습니다. references/sound.md를 참조하십시오.
8. 수정합니다. 각 라운드마다 먼저 백업하고, 수정 후 프레임을 다시 추출하여 자체 점검하며, 변경 사항을 평이한 언어로 명확히 설명합니다. 새 버전으로 별도 저장하고, 상대방의 파일을 덮어쓰거나 삭제하지 않습니다. 무엇을 점검했는지 투명하게 설명합니다: 정지 프레임이 재생과 같지 않고, 이미지를 본 것이 오디오 믹스를 들은 것과 같지 않습니다.

영상을 좋게 만드는 규칙

전체 설명은 references/transitions.md와 references/blender-3d.md에 있습니다. 다음은 반드시 기억해야 할 사항입니다:

• 각 장면은 이전 장면에서 변형됩니다. 페이드 인/아웃이나 디졸브를 사용하지 않습니다. 동일한 객체가 변형, 뒤집기, 펼쳐지기, 접히기 등을 통해 시청자의 시선이 새로운 것을 찾을 필요가 없습니다.
• 동작은 화면 중앙에 위치합니다. 화면 중앙에 조준점이 있다고 상상하고, 주인공은 항상 그 근처에 있어야 합니다.
• 화면은 계속 움직입니다. 멈춘 장면도 매우 느린 줌인이나 드리프트가 있어야 합니다.
• 하나의 동작은 하나의 곡선을 따릅니다. 줌인은 계속 줌인, 중간에 당기지 않습니다. 회전은 계속 회전, 중간에 돌아오지 않습니다. 빠르게 시작하고 천천히 멈추며, 멈추는 시간을 충분히 둡니다.
• 텍스트는 간결하게, 흐릿하게 나타났다가 선명해집니다. 튀어오르거나 갑자기 확대되지 않습니다. 텍스트는 객체 위에 겹쳐지면 안 됩니다.
• 3D는 조명 하나만 사용하고 배경은 검게 만듭니다. 이것이 "스튜디오 촬영처럼 보이게" 하는 가장 큰 이유입니다.
• 3D는 물리적으로 타당해야 합니다. 덮개는 틈 없이 닫혀야 하고, 객체 간 관통이 없어야 하며, 두 객체가 위치를 바꿀 때 3D 공전을 통해 서로를 직선으로 통과하지 않고, 회전 속도가 부드럽고 점프하지 않아야 합니다.
• 실제 제품 사진과 모델을 대조합니다. 비율, 모서리 곡률, 구멍 위치가 맞지 않으면 모델을 수정합니다.
• 실루엣 전환은 클로즈업 세부 묘사에서 시작하여 멀어지고, 실사 영상으로 하드 컷합니다. references/silhouette.md를 참조하십시오.
• 오디오와 비디오는 전체적으로만 이동하고, 속도나 음정은 변경하지 않습니다.

규칙 준수

• 브랜드: 상대방이 소유하거나 사용 허가를 받은 브랜드에 대해서만 작업합니다. 다른 사람의 브랜드는 연습 작품으로만 사용하고, 공식인 척 가장하지 않으며, 광고를 게재하지 않고, 상대방의 실제 캠페인을 모방하지 않습니다.
• 자산: 상대방이 직접 만들었거나 사용 권한을 받은 자산, 글꼴, 음악, 모델만 사용하며, 이 사용 유형에 대한 권한을 확인합니다.
• 표현: 영상 속 숫자와 표현은 모두 실제이고 출처가 있어야 하며, 데이터나 평가를 조작하지 않습니다.
• 개인정보: 스크린샷과 실사 촬영에서 개인 정보를 먼저 제거합니다. 출연하는 사람은 동의해야 합니다.
• 유료 서비스(내레이션, AI 음악 등)는 상대방의 할당량을 소비하므로, 상대방이 요청한 경우에만 사용합니다.

스크립트 개요

스크립트	기능
scripts/render.mjs	HTML 페이지 → 정지 프레임 / 4K mp4 / 위치 기록(probe) / 스토리보드(board)
scripts/sheet.py	정지 프레임 또는 최종 영상에서 시간별로 프레임 추출→ 시간이 표시된 검사 이미지 생성(원본 해상도에서 추출)
scripts/layout_check.py	텍스트와 객체 간 거리, 객체 중앙 정렬 검사
scripts/seam_check.py	실제 카메라 위치에서 두 부품 간 이음새 오차(픽셀 단위)
scripts/blender/studio.py	단일 조명 스튜디오 장면 + EEVEE/Cycles 렌더링, GLB/glTF/USDZ/OBJ/FBX 지원, --demo는 자체 예제 모델 포함
scripts/blender/motion_check.py	프레임별 관통, 각속도, 회전 속도 급변 검사
scripts/silhouette.py	인물 마스킹(macOS Vision, 선택 사항)→ 부드러운 벡터 실루엣, 클로즈업에서 멀어짐 가능
scripts/audio/synth.py	코드 합성 음향 효과 및 배경 음악 기초 생성(저작권 없음)
scripts/audio/mix.py	배경 음악을 포인트에 맞추기, 음향 효과를 비트에 맞추기, 사이드체인으로 공간 확보, 라우드니스 정규화, 비디오에 합성
scripts/encode.py	프레임별 PNG → mp4
scripts/doctor.py	의존성 확인, 부족한 것과 설치 방법 안내

언제 어떤 파일을 읽을까요

상황	읽을 파일
레벨 선택 및 작업량 추정	references/layers.md
스토리보드 작성	references/storyboard.md
HTML 페이지 작성 및 영상 출력	references/html-engine.md
장면 간 전환 설계	references/transitions.md
실제 제품 3D 작업	references/blender-3d.md
실루엣 및 실사 영상 연결 작업	references/silhouette.md
배경 음악 및 음향 효과 추가	references/sound.md
납품 전 자체 점검	references/checklist.md
화면이 이상할 때	references/pitfalls.md

환경

Node.js 20+, Python 3.9+ (numpy, Pillow, opencv-python-headless), ffmpeg, Google Chrome 또는 Chromium. 레벨 3은 Blender(무료)가 필요합니다. 실루엣 전환의 자동 마스킹은 macOS 14+가 필요하며, 다른 시스템은 다른 도구로 마스크를 생성합니다. 시작하기 전에 python3 scripts/doctor.py를 실행하고, 부족한 것이 있으면 먼저 상대방에게 설치 방법을 알려줍니다. Skill 디렉토리에 .venv가 있으면 Python 스크립트는 .venv/bin/python으로 실행합니다(Windows: .venv\Scripts\python). Windows에서는 python3를 python으로 바꿉니다.