remotion-consult — 비디오 요구사항 → 비디오 디자인 시스템

"이 비디오 어떻게 만들지"를 아이디어에서 실행 가능한 엔지니어링 명세로 바꿉니다: 명확화, 연구, 제안을 통해 최종적으로 DESIGN.md(비디오 디자인 시스템 문서, tokens.ts 계약 포함)를 산출하며, remotion-build가 직접 사용할 수 있습니다.

진입 분류("비디오 만들기" 먼저 프로세스 결정, 바로 질문하지 않음)

사용자가 "비디오 만들어 줘/영상 하나 찍어"라며 카테고리를 말하지 않으면, 먼저 하나의 질문으로 프로세스 소속을 결정합니다(consult/build/video-shotcraft 세 가지 모두 "비디오 만들기"를 트리거하므로, 반드시 명시적으로 분기해야 함):

사용자 의도	어느 루트?
비디오 제작/수정 (나레이션, 데이터, 제품 데모, 브랜드 모션, 교육, 이미지 슬라이드쇼)	통일적으로 본 프로세스(consult → build); 모션은 전체 모션 라이브러리 + shotcraft 샷 카드 두 곳에서 선택
명시적으로 video-shotcraft 템플릿(Ink Press) / 자유 창작 / 공동 창작 사용	자체 프로세스 Skill `video-shotcraft` 트리거 (사용자 명시적 선택, 자동 라우팅 아님)
이미 DESIGN.md / 레퍼런스 비디오 / 명확한 개편 방향 보유	본 프로세스, Phase 0 사전 검사 후 바로 진입

분류 질문: "video-shotcraft 템플릿/자유 창작/공동 창작을 명시적으로 사용하시겠습니까? 아니라면 → 통일적으로 consult→build, 샷 카드는 shotcraft에서 모션 라이브러리로 참조(모든 문장에 카드 선택 강제하지 않음)."

사용 시기

비디오 제작/수정 (나레이션, 데이터 시각화, 제품 데모, 브랜드 모션).
비디오 디자인 방향 결정: 화면 비율, 자막 스타일, 색상, 폰트, 리듬, 전환 효과, 모션.
"비디오 디자인 시스템", "video design tokens", "DESIGN.md"가 필요할 때.
요구사항이 모호한 경우("비디오 하나 만들어 줘"), 먼저 명확화 후 실행.

핵심 마인드셋

방향 먼저, 세부 사항은 나중에: 심미/자막/리듬 시스템을 먼저 결정하고, 그 다음 화면 구현.
템플릿 사용 금지: 목표는 "이 비디오만의 고유 리듬 지문"을 산출하는 것이지, 템플릿 라이브러리에서 고르는 것이 아님.
실행 가능성 우선: DESIGN.md는 직접 tokens.ts와 씬 블루프린트를 작성할 수 있을 정도로 구체적이어야 하며, "좀 더 고급스럽게" 같은 추상적인 수준에 머물러서는 안 됨.
정직함: 자막 문구에 데이터/사실을 조작하지 않음.

프로세스 (순서대로 실행)

Phase 0 — 사전 검사

작업대/비디오/{slug}/에 이미 DESIGN.md / 나레이션 대본 / captions.srt가 있는지 확인; 있으면 베이스라인으로 삼고 처음부터 다시 만들지 않음.
동일 브랜드의 교차 도메인 디자인 자산 확인 (사용자의 "웹 먼저, 비디오 나중" 워크플로): 작업대/디자인 테스트/{브랜드}/DESIGN.md(웹 버전) 또는 자료실/AI도구/디자인시스템라이브러리/{브랜드}-DESIGN.md → 있으면 해당 색상/폰트/감정이 브랜드 DNA 베이스라인이며, 비디오 버전은 이를 계승하여 진화시키고 처음부터 다시 만들지 않음(Phase 3 디자인 시스템 일관성 검사 입력이기도 함).
브랜드 제약 조건 확인 (프로젝트 README, 기존 시각 자산, 레퍼런스 비디오).

Phase 1 — 명확화 (필수, 건너뛰지 말 것)

AskUserQuestion을 사용하여 한 번에 명확화하되, 최소 9개 항목을 커버해야 함 (한 번에 6개 질문을 초과하지 않으며, 여러 번에 나눌 수 있음). 처음 두 항목은 스타일 소스이므로 반드시 질문해야 하며 건너뛸 수 없음 (사용자가 "자동 선택"으로 빠르게 넘길 수는 있지만, 반드시 확인해야 함):

스타일 소스 (첫 번째 질문 필수): 자유 디자인 / 레퍼런스 사이트에서 직접 선택 (video-real-library.md에서 후보를 보여주고 사용자가 선택) / 레퍼런스 사이트 자동 선택 (사용자가 주제를 주면 자동 선택) / 사용자가 레퍼런스 제공 (URL/스크린샷, 최우선).
레퍼런스 선택 (세 가지 차원 상호 보완, 언제 무엇을 사용할지):
- 브랜드 DESIGN.md (디자인 시스템 라이브러리 자료실/AI도구/디자인시스템라이브러리/{브랜드}-DESIGN.md 또는 자체 프로젝트 DESIGN.md) → 디자인 토큰 베이스라인 (색상/폰트/간격), 브랜드 유지/개편 시 사용, 시스템을 처음부터 다시 만들지 않음.
- 웹 HTML (video-real-library / real-design-library 레퍼런스 사이트) → 타이포그래피/시각적 인스턴스 (레이아웃/계층/구도), 특정 시각적 구조를 원할 때 사용.
- 비디오 (video-real-library 모션 소스 / 사용자가 제공한 비디오) → 모션/리듬/자막 스타일, 특정 움직임 언어를 원할 때 사용.
- 상호 보완: DESIGN.md가 시스템을 정하고 → HTML이 인스턴스를 제공하며 → 비디오가 모션을 제공, 세 가지를 합쳐 완전한 방향을 구성. 사용자가 제공한 레퍼런스가 최우선. 선택된 레퍼런스는 opencli (로그인 상태 유지) 를 사용하여 실제 폰트/색상 값/리듬을 가져오며, Phase 4에서 충실히 계승.
비디오의 목적: 한 문장으로 포지셔닝 + 대상 시청자 + 게시 플랫폼 (TikTok/Bilibili/학술/내부 — 화면 비율과 리듬 기준 결정).
카테고리 앵커: remotion-shared/categories/ 4가지 중 하나 (voiceover-caption/data-viz/product-demo/brand-motion), 또는 사용자 정의.
화면 비율 및 길이: 9:16 세로 / 16:9 가로 / 1:1 정사각형; 목표 길이; 시리즈화 여부 (시리즈 = 리듬이 재사용 가능해야 함).
감정/스타일: 전문적 절제 / 날카로운 데이터 / 따뜻한 스토리텔링 / 창의적 리듬 / 레트로… 비교 가능한 2-3개의 방향어 제공.
콘텐츠 형태 (자막 소스 결정에 중요): 기존 나레이션 대본 보유 / 기존 .srt/.vtt 보유 / 이미지+데이터 보유 / 처음부터 작성 — 자막 소스 라우팅을 결정.
선호/금기: 싫어하는 것, 자막 스타일 (문장 단위/단어 수준 강조/자막 없음), 가독성 최소 기준.
일관성 검사: Phase 0 사전 검사에서 브랜드 DNA (DESIGN.md/시각 자산/레퍼런스 비디오)가 이미 있는지 확인 → 있으면 이후 방향이 이를 벗어나서는 안 됨 (절제된 진화); 없으면 자유 디자인.

video-taste-profile (작업대/비디오/*/.taste-profile.json 또는 글로벌 프로필)이 있으면 먼저 읽음. 스타일 소스 = 레퍼런스 사이트인 경우, Phase 2는 반드시 레퍼런스 실제 값을 가져와야 함 (chrome-devtools/vision), Phase 4는 충실히 계승 — 레퍼런스를 추상적인 키워드로 바꾸고 자유롭게 변형하지 않음.

Phase 2 — 연구 (사용자 동의 시에만 수행, 병렬 가능)

3계층 연구 방법, 우선순위 낮은 것부터 높은 것 순:

Layer 1 업계 관행: 유사한 비디오가 일반적으로 어떻게 촬영되는지 (안전 베이스라인).
Layer 2 새로운 트렌드: remotion-shared/video-anti-slop.md와 대조, 실제 비디오 레퍼런스 1-2개를 가져옴 (remotion-shared/video-real-library.md 레퍼런스 소스 + 사용자 제공 레퍼런스 최우선), 자막 스타일/전환/리듬에서 참고할 점 추출.
Layer 3 제1원리: 시청자 심리, 자막 가독성, 콘텐츠 주도 리듬 — 최우선. 충돌 시 "왜 관행에서 벗어났는지"를 명시적으로 기록.

제안서의 "시각적 레퍼런스 설명"은 실제 레퍼런스 라이브러리 사례로 앵커될 수 있어야 함 (예: "xxx와 유사한 단어 수준 강조 자막 스타일"), 공허하지 않게.

Phase 3 — 완전한 제안 (핵심 산출물)

references/video-proposal-format.md에 따라 출력:

SAFE 방향 (2-3개): 카테고리 베이스라인, 안전함.
RISK 방향 (2-3개): 의도적으로 벗어남, 각각 "왜 가치 있는지 + 무엇을 잃는지"를 반드시 작성.
memorable-thing: 한 문장으로 앵커 — "시청자가 기억하기를 바라는 하나의 시각/리듬 순간" (예: "3초的那个 푸시 인 전환").
각 방향: 심미적 키워드, 자막 폰트, 색상, 타임라인 리듬 (글자/초, 전환 빈도), 구도, 전환 스타일, 시각적 레퍼런스 설명.

자체 점검: 두 방향이 단순히 색상과 폰트만 바꾼 것이라면 차별화가 안 된 것이므로 다시 해야 함.

디자인 시스템 일관성 검사: Phase 0 사전 검사에서 기존 브랜드 디자인 시스템 (DESIGN.md / 브랜드 DNA, 예: 이미 만든 웹 또는 비디오)이 발견된 경우, SAFE/RISK 방향은 기정 브랜드 DNA (색상/폰트/감정 베이스라인)를 벗어나서는 안 됨 — RISK 방향은 기정 DNA 내에서 절제된 이탈만 허용 (예: 악센트 색상 변경, 명암 구조 변경, 폰트 시스템 변경), 처음부터 다시 만들거나 관련 없는 스타일로 뛰어넘는 것은 불가. 자유로운 디자인은 기존 시스템이 없을 때만 허용. DESIGN.md를 산출하기 전에 "색상/폰트/감정" 세 항목이 베이스라인과 일치하거나 합리적으로 진화했는지 항목별로 확인.

Phase 4 — 디자인 시스템 (DESIGN.md)

사용자가 방향을 선택하면, references/video-design-system-template.md에 따라 DESIGN.md 작성, 7개 섹션:

심미 방향: 한 문단 포지셔닝 + 키워드 + 금기.
자막 폰트: caption/title/body 3단계 + 화면 비율 기준 글자 크기 + 강조 모드 (word/line/none).
색상: 의미론적 팔레트 (captionActive/captionInactive 포함) + 대비 최소 기준.
타임라인 리듬: fps/화면 비율/총 길이 + 자막 리듬 + 전환 빈도.
화면 구도: 안전 영역 + 자막 영역 + 제목 영역.
전환 효과: 전환 유형 선택 + 지속 시간 + 입장 모션 + 이징.
Video Design Tokens (tokens.ts 계약, remotion-shared/video-tokens-spec.md 참조) + 모션 편성 개요 (씬 블루프린트에서 업그레이드, video-design-system-template.md §8 참조): 素材分层清单 (bg/mid/fg, 조립 가능) + 각 자막 문장 → 素材进场动效 + 폰트 모션 + 나레이션 연동 (시청각 결합).

그리고 tokens.ts 계약 (TS 상수 객체, 의미론적 명명)을 생성 — 이것이 remotion-build의 유일한 인터페이스입니다. 모션은 전체 모션 라이브러리에서 조합하여 DESIGN.md에 작성 (remotion-shared/categories/{카테고리}/motion-list.md).

제8절: 렌더링 코어 표기 (선택 사항, 기본값 Remotion): DESIGN.md에 렌더링 백엔드 표기 — 기본값 Remotion 코어; 사용자가 명시적으로 지정하거나 웹 핸드필이 필요한 스타일의 경우 HyperFrames 코어를 표기 (HeyGen 오픈소스 HTML→MP4, remotion-build/references/hyperframes-guide.md 참조). 판단 기준: 복잡한 샷 카드/기존 Remotion 프로젝트 있음 → Remotion; 순수 HTML/GSAP 모션, 내장 lint 필요 → HyperFrames. 렌더링 코어는 build의 렌더링 작성 방식에만 영향을 미치며,素材/BGM/자막/검수/§8 개요는 모두 재사용.

Phase 5 — 미리보기 + 스타일 샘플 승인 게이트 (선택 사항, 기본값 켜짐)

전체 비디오를 렌더링하지 않음. 산출물:

3-5장의 키프레임 스틸 프레임 (npx remotion still <id> --frame=N, 문장 시작/끝/전환 프레임 포함) — 사용자가 구도와 자막 위치를 확인할 수 있도록 함.
또는 3-5초의 저해상도 샘플 클립 (--scale=0.25) — 사용자가 실제 움직임 리듬을 볼 수 있도록 함.
스타일 샘플 승인 게이트 (paper-collage-video style-proof 참조): 방향 결정 후, 먼저 1-2개의 핵심 문장에 대한 3-5초 실제 샘플 (저해상도)을 렌더링하여 사용자 확인을 받음 — 스타일/색상/모션 느낌이 맞는지 확인 후에야 remotion-build 전체 비디오 제작에 들어감 (전체 비디오를 완성하고 나서 스타일 방향이 잘못된 것을 발견하는 것을 방지).

미리보기 산출물은 작업대/비디오/{slug}/preview/에 저장. 미리보기의 목적은 사용자가 실제 시각 자료를 바탕으로 결정을 내리는 것이지, "내가 렌더링할 수 있다"는 것을 보여주는 것이 아님.

레드라인

기본 템플릿 사용 금지: 보라색-남색 그라데이션, 전체 동일한 자막 리듬, 모든 장면 중앙 동일 구도를 적극적으로 제공하지 않음.
복제 금지: 픽셀 단위로 타인의 비디오를 클론하지 않음 (자막 스타일/리듬은 참고 가능, 전체 비디오를 복사하지 않음).
조작 금지: 데이터, 브랜드 사실을 허위로 만들지 않음.
대비 최소 기준: 자막 ≥3:1 (실사/이미지 배경 위 포함).
비디오 글자 크기 최소 기준 (화면 텍스트는 모두 키워드): 자막 caption ≥64px/800, 데이터 mono ≥44px/700, 제목 ≥88px/900 — 가는 체와 작은 글자 주석 금지. 절대 숫자의 유일한 사실 소스 = remotion-build/references/video-quality-metrics.md §자막 하드 임계값 ("비디오 철칙" 행), 여기서 숫자 복사하지 말고, 임계값 변경 시 먼저 metrics를 수정할 것.
먼저 명확화 후 디자인: Phase 1을 완료하지 않고 제안 단계로 건너뛰지 말 것.

참조 파일

📍 remotion-shared 공유 라이브러리 검색 순서: 프로젝트 .claude/skills/remotion-shared/ → 글로벌 Codex → 글로벌 Claude Code. 찾을 수 있는 첫 번째 것을 사용.

파일	언제 읽을지
`.claude/skills/remotion-shared/video-anti-slop.md`	어떤 단계에서든 방향 판단 시 (동질화 방지)
`.claude/skills/remotion-shared/video-real-library.md`	Phase 2 연구에서 실제 비디오 레퍼런스 가져오기
`자료실/AI도구/video-shotcraft/`	샷 레시피 카드 라이브러리 (202 카드 12 카테고리: 카메라 워크/리듬/전환/폰트/특수효과), demos/{카테고리}/{카드} 직접 복사, video-shots-spec 참조

video-shotcraft 포지셔닝 (두 번째 모션 라이브러리 / 템플릿 라이브러리, 분기 라우팅 아님):

shotcraft = 완전히 참고 가능한 컴포넌트/모션 라이브러리 (demos/{카테고리}/{카드}/{컴포넌트}.tsx 씬 레벨 샷 모션 + template/ 템플릿 프로젝트 + assets/ 컴포넌트와 사운드 효과). 모든 비디오는 통일적으로 본 consult→build를 따르며, 제품 비디오/나레이션 비디오로 분기하지 않음.

§8 카드 선택: DESIGN §8.2 샷 카드 열은 선택적으로 기입 가능, 값에 의도 태그 [copy] / [참고] 포함. 통합 단계의 유일한 사실 소스 = remotion-shared/video-shots-spec.md「샷 카드 통합 단계」(build가 그대로 실행).

사용자가 명시적으로 shotcraft 템플릿(Ink Press) / 자유 창작 / 공동 창작을 사용하겠다고 할 때만 Skill video-shotcraft가 트리거되어 자체 프로세스에 따라 진행됨 (사용자 명시적 선택, 자동 라우팅 아님). | .claude/skills/remotion-shared/video-shots-spec.md | 샷 카드 시스템 + 권위 있는 팁 (감독/편집/디자인/사운드, 검색 + 플랫폼 추출) | | .claude/skills/remotion-shared/video-design-presets.md | Phase 4에서 사전 설정 디자인 시스템 선택 (6세트 검증된 브랜드) | | .claude/skills/remotion-shared/video-tokens-spec.md | Phase 4에서 tokens 작성 시 | | .claude/skills/remotion-shared/categories/{카테고리}/DESIGN.template.md | Phase 4에서 카테고리 템플릿으로 초안 작성 | | .claude/skills/remotion-shared/categories/{카테고리}/motion-list.md | Phase 4에서 모션 조합 선택 | | .claude/skills/remotion-shared/motion-library/ | 전체 모션 라이브러리 컴포넌트 목록 (50개, build용) | | 자료실/AI도구/디자인시스템라이브러리/ | Phase 2 연구/Phase 3 제안: 브랜드 DESIGN.md 심미 앵커 | | 자료실/AI도구/심미참고라이브러리/심미참고총람.md | Phase 2 프론트엔드/사진/편집 트렌드 + Phase 4 리듬 디자인 | | .claude/skills/remotion-shared/aesthetic-judgment/ | Phase 4 방향 결정 시: 사진/편집/프론트엔드 타이포그래피 6축 판별 (素材 스타일/리듬/레이아웃) | | .claude/skills/ui-ux-pro-max/SKILL.md | 디자인 규칙 엔진: 비디오 화면 스타일 결정 시 확인 (Phase 4) | | .claude/skills/hallmark/SKILL.md | 반 AI 슬롭 검토 (57개 게이트): 방향이 전문적인지/템플릿 방지인지 (Phase 2/3) | | .claude/skills/taste-skill/SKILL.md | 취향 검사 (Pre-Flight 40+ 항목): 방향이 수준에 맞는지 (Phase 3 자체 점검) | | 자료실/AI도구/design-skills/open-design/craft/anti-ai-slop.md | 탈템플릿 규칙 ("칠죄종") + 151 디자인 시스템 대안 (Phase 2/4) | | .claude/skills/design-shared/review-panel.md | 리뷰 패널: agency-agents 관점 + 디자인 시스템 라이브러리/심미 참고 라이브러리 판단 기준 (Phase 4 방향 자체 점검 + 일관성 검사) | | .claude/skills/design-shared/wcag-basics.md | 색상/자막 가독성 결정 시 (하드 제약) | | references/video-proposal-format.md | Phase 3 제안서 작성 시 | | references/video-design-system-template.md | Phase 4 DESIGN.md 작성 시 | | references/video-taste-profile.md | 사용자 비디오 취향 기록/업데이트 필요 시 |

출력 및 마무리

통일된 전달 요약으로 종료:

STATUS: PASS | FAIL | BLOCKED
산출물: DESIGN.md 경로 + 미리보기 키프레임/샘플 클립 경로
핵심 결정: 선택된 방향 (SAFE/RISK 중 하나 + memorable-thing + 소속 카테고리)
NEXT_OWNER: remotion-build (비디오 생성) | user (방향 확인 대기)
확인 대기: 미결 사항

마무리 질문: 방향 정해졌나요? 비디오를 생성할까요? (remotion-build에 위임 권장)

video-design-skills