xiaoxiao8096/code-motion-video-skill

순수 코드 애니메이션 비디오 제작 규격

화면, 모션, 전환, 배경음악, 음향, 타이포그래피, 폰트가 모두 코드로 생성됩니다. 비디오 생성 모델이나 AI 음악 생성 또는 샘플링을 사용하지 않습니다. 각 단계의 결과물을 먼저 요청자에게 확인받고 다음 단계로 넘어갑니다.

권장 기술 스택: Remotion (React) – 화면, Python + NumPy/SciPy – 오디오 합성, FFmpeg – 최종 인코딩. Motion Canvas, Revideo, Manim, HyperFrames 등으로 변경해도 워크플로우는 동일합니다.

1. 요구사항 명확화

• 주인공 (제품, 브랜드, 개인, 이벤트), 대상 청중, 영상에 등장해도 되는/안되는 이름이나 요소. 명확히 설명되지 않은 경우 '모든 시청자를 대상으로 말하는 것'으로 작성합니다.
• 길이 (일반적으로 15–60초), 화면 비율 (가로 1920×1080, 세로 1080×1920 또는 정사각형), 프레임 속도 (정식 버전은 60fps 권장), 게시 채널.
• 주인공의 공식 자료 (웹사이트, 보도자료, 문서)를 읽고, 그대로 인용: 자신을 어떻게 설명하는지, 핵심 장점, 말투. 영상의 사실은 해당 자료에서만 가져옵니다.

2. 오픈소스 참조 조사

각 참조는 실제로 존재하는지 확인하고, 주소, 라이선스, 참조 가치를 기록합니다. 찾을 수 없으면 목록에 넣지 않습니다. 일반적인 카테고리:

• 비디오 프레임워크 및 예제 저장소: Remotion, Motion Canvas, Revideo, Manim, HyperFrames, theatre.js, GSAP, Lottie.
• 디자인 시스템 및 색상: Radix Colors, Open Color, Tailwind, Catppuccin, IBM Carbon, Primer, Geist, awesome-design-systems.
• 그라데이션 및 셰이더 배경: shadergradient, whatamesh, three.js.
• 모션: Motion, react-spring, anime.js, awesome-creative-coding.
• 오디오: Tone.js, jsfxr, ZzFX, tonal.
• 폰트: 상업적 사용이 허가된 라이선스 (예: SIL OFL)만 사용합니다. 한국어: Noto Sans KR, 나눔고딕, 본고딕 등; 서양어: Inter, Space Grotesk, Unbounded, JetBrains Mono.
• 아이콘: Lucide, Tabler, Phosphor.
• 카피 스타일: chinese-copywriting-guidelines, Humanizer-zh, humanizer, stop-slop.
• 지정 로고 또는 자료: 원본 파일을 찾고, 라이선스 및 등록 상표 여부를 확인합니다. 라이선스가 없는 상표 그래픽은 내부 미리보기에만 사용하고, 공개 배포 전에 반드시 허가를 받습니다.

3. 계획 작성 (렌더링 전)

• 주제문과 전반적인 톤 앤 매너.
• 통합 타임라인: BPM 설정 (예: 120 BPM, 마디당 2초), 모든 컷 포인트가 마디선이나 비트에 위치하도록 합니다. 시간은 항상 정식 버전 프레임 속도의 프레임 번호로 기록하고 timeline.json에 저장하며, 화면과 오디오가 이 데이터를 공유합니다.
• 스토리보드: 각 장면의 시간 코드 및 프레임 범위, 화면 텍스트, 화면, 모션 (이징 곡선 또는 스프링 파라미터), 사운드.
• 전환 표: 각 전환을 개별 설계하며, 시작과 끝을 포함합니다. 기법 (마스크 와이프, 형태 변환, 매치 컷, 카메라 돌진 관통, 공유 요소 확대, 색상 블록 와이프, 페이지 넘기기 등), 프레임 범위, 이징, 다음 컷으로 가져갈 요소, 사운드 이펙트 및 비트 일치를 명확히 기록합니다.
• 시각 시스템: 색상 팔레트 (hex), 그리드 및 여백, 폰트 조합 (글자 크기, 두께), 배경 처리.
• 배경음악: 조성, 코드 진행, 섹션 구조, 각 악기의 합성 방법, 컷 포인트와의 대응.
• 사운드 이펙트 목록: 각 장면에서 사용할 사운드 이펙트와 합성 방법.
• HTML과 헤드리스 브라우저를 사용하여 약 4장의 정적 스타일 프레임을 캡처하고, 1–2장의 전환 분해도 (중간 상태를 하나로 합친 이미지)를 추가합니다.

4. 시각적 방향 대안

스타일이 정해지지 않았거나 요청자가 이의를 제기하는 경우, 3–4개의 뚜렷이 다른 방향을 제시합니다 (예: 밝은 잡지 스타일, 따뜻한 그라데이션 + 모래 유리, 다채로운 팝업 스티커, 스위스 그리드, 어두운 테크 스타일). 각 세트에 색상 팔레트, 배경, 폰트, 영감의 출처를 제공하고, 동일한 장면의 스타일 프레임을 하나씩 캡처하여 비교 이미지를 만듭니다. 스토리보드와 전환은 그대로 유지하고 시각적 요소만 변경합니다.

5. 제작

• 화면: 폰트는 로컬 파일을 사용하고 로드 완료 후 렌더링합니다. 모든 애니메이션은 프레임 번호로 구동됩니다. 브라우저에서 실시간으로 실행되는 SVG, CSS, JS 애니메이션은 프레임 기반 계산으로 다시 작성해야 하며, 그렇지 않으면 렌더링 결과가 불확실합니다.
• 모션: 활발한 스타일은 오버슈트가 있는 스프링 + 스쿼시 앤 스트레치를 사용하고, 절제된 스타일은 부드러운 이징을 사용합니다. 스프링 반동으로 인해 스케일 값이 음수가 될 수 있으므로 클리핑해야 합니다.
• 오디오: 자체 합성기 사용: 디튠드 톱니파 패드, FM 글로켄슈필, Karplus-Strong 플럭, 슬라이딩 사인파 킥 드럼, 필터링된 노이즈 심벌즈 및 박수, 사이드체인 압축, 리버브. 음향 효과는 노이즈, 스윕, 공진 합성으로 만듭니다. 브랜드 사운드로 2–3음 시퀀스를 설계하여 엔딩 및 최종 마무리에 사용할 수 있습니다.
• WAV 작성 시 비트 심도와 정규화가 올바른지 확인하십시오. 그렇지 않으면 볼륨이 수십 dB 차이가 날 수 있습니다. FFmpeg를 사용하여 라우드니스를 목표 값으로 통일합니다 (일반적인 온라인 플랫폼: -14 LUFS), 피크에 여유를 둡니다.
• 인코딩: H.264 + AAC, faststart 활성화.
• 메모리 부족 시 렌더링 병렬 처리 수를 줄입니다.

6. 미리보기

• 먼저 저해상도 전체 미리보기 (예: 960×540, 30fps)를 최종 믹스와 함께 렌더링하여 리듬을 확인합니다.
• 자체 점검: ffprobe로 길이, 프레임 수, 오디오 트랙을 확인합니다. 일정 간격으로 프레임을 추출하여 접촉 시트를 만들고 요소 겹침, 누락된 글자, 네모 상자(결자)를 확인합니다. 소스 코드를 검색하여 나타나지 말아야 할 내용이 없는지 확인합니다.
• 전달 시 알려진 위험을 설명합니다. 예: 너무 빠를 수 있는 전환, 수치 확인만 하고 사람 귀로 청음하지 않은 사운드.

7. 카피에서 AI 어투 제거

• '~하는 것이 아니라 ~하는 것', 3열 평행 구조, 공허한 구호, 홍보성 어투, 추상 명사 나열을 제거합니다.
• 구체적인 장면과 구체적인 숫자를 쓰고, 구어체 리듬을 사용하며, 한 문장에 한 가지 사실만 말하고, 비트에 맞출 수 있는 길이로 유지합니다.
• 한글과 영어 사이, 한글과 숫자 사이에는 공백을 추가합니다.
• 장면별 수정 전후 비교표를 제공합니다.

8. 정식 버전

• 내용은 확인된 미리보기와 동일하며, 사양만 향상시킵니다: 1920×1080, 60fps, CRF 16–18, yuv420p, AAC 320k.
• ffprobe로 사양을 확인하고, 완성된 영상에서 키프레임을 캡처하여 선명도를 확인하고, 수정된 문제를 재점검합니다.
• 파일이 너무 큰 경우 압축된 공유용 버전을 별도로 출력합니다.
• 필요한 경우 동일한 타임라인을 사용하여 레이아웃을 다시 구성하고 세로 또는 다른 화면 비율로 내보냅니다.

파일 구조

project/
  plan_v*.md        계획 (각 버전 새로 저장)
  frames*/          스타일 프레임 및 HTML 소스 파일
  fonts/  assets/
  timeline.json     화면과 오디오가 공유하는 타임라인
  video/            비디오 프로젝트
  audio/compose.py  오디오 합성 스크립트
  out/              미리보기, 정식 버전, 스크린샷