활성화 규약
모션 디자이너 쇼릴 언어(풀 블리드 플랫 컬러 컷, 초대형 와이드 캡스, 모노크롬 HUD 코너, 비트에 맞춘 키네틱 모션, 3D 리소그래피 셰이더)로 웹사이트/랜딩 페이지(모든 스택) 또는 코드 렌더링 영상(쇼릴, 프로모션, 런칭 클립)을 제작할 때 사용합니다. 대시보드, 문서 사이트, 폼 중심 앱에는 사용하지 않습니다.
엄격 규칙
- 아래 모든 경로는 이 스킬의 폴더(
SKILL_DIR)를 기준으로 합니다. 도구 실행은node "$SKILL_DIR/assets/palette/palette.mjs" …형식을 따릅니다. - 사용자 언어로 응답하며, 사이트/영상 카피는 프로젝트 언어로 작성합니다.
- 디자인 또는 코드를 시작하기 전에 먼저 인테이크(intake)를 완료합니다. 절대 하드코딩된 헥스 컬러를 사용하지 마십시오. 색상은 반드시
palette.mjs역할 토큰(ink,bone,action,machine,on-*,hud-on-*)에서 가져옵니다. - 필드 위의 텍스트는
on-<field>를 사용합니다.forbiddenPairs에 명시된 조합을 텍스트/배경으로 절대 렌더링하지 마십시오. - 한 장면(scene)당 하나의 시그니처 무브(signature move)만 사용합니다. 강약을 번갈아 배치하고, 동일한 역할의 필드를 3번 연속 배치하지 않습니다. 키 포즈는 최소 1비트 이상 유지하며, 하나의 이징(easing) 패밀리만 사용합니다.
- 웹: transform과 opacity를 애니메이션 대상으로 합니다.
prefers-reduced-motion을 존중합니다(정적 종료 상태, 루프 없음, 핀 고정 없음). 오프스크린 캔버스는 일시정지합니다. pin은 1024px 이상에서만 사용합니다. 375px에서 오버플로우가 발생하지 않아야 합니다. - 절대 사용후기, 지표, 클라이언트를 허위로 생성하지 않습니다. 기존 콘텐츠는 유지합니다.
- '안티-슬롭' 목록(
references/design-system.md§8)을 거부(거절)합니다.
결정 게이트
| 상황 | 액션 |
|---|---|
| 타이포그래피 중심, 플랫 컬러 컷 | Swiss Kinetic: design-system.md, assets/web, assets/video |
| 3D, 촉각적, 포스터/프린트 느낌 | Riso Shader: shader-print.md, assets/shader/ |
| 둘 다 | Hybrid: 플랫 영역(on-* 토큰) 위 키네틱 타이포 뒤에 셰이더 필드 배치 |
| 브랜드 컬러가 알려짐 | `palette.mjs --brand "#HEX" --format css |
| 프리셋 사용 | --list (이름, 태그, 견본 표시) → --preset <name> |
| 놀라게 해줘 | README, 카피, CSS, 사용자 단어에서 업계/분위기 추론 → --surprise --mood "<tags>" --seed <n>; 추론 이유 명시; --exclude <name>으로 한 번 재시도 가능 |
| 웹사이트 | references/web-techniques.md 참조; assets/web/*를 해당 스택에 맞게 변형 |
| 영상 | assets/video/reel-template/ 복사; references/video-pipeline.md 참조 |
| 사이트 + 영상 | 영상을 스토리보드로 먼저 제작한 후, 동일한 장면들로 사이트 제작 |
실행 단계
- 출력 유형(사이트/영상/둘 다)과 스택을 감지합니다. 기존 콘텐츠와 브랜드 에셋을 읽습니다.
- 인테이크: 한 번에 한 가지 질문씩 진행합니다. 먼저 스타일(Swiss Kinetic / Riso Shader / Hybrid / Surprise me), 그다음 팔레트(Brand color / Preset / Surprise me)를 묻습니다.
- 폰트는 프리셋
fontPairing또는design-system.md§2에서 가져옵니다. BPM: 120을 선호합니다(30fps와 60fps에서 비트당 정수 프레임; 60fps에서 144/150도 허용). 다른 템포는 비트를 프레임으로 반올림합니다. - 정식 리듬(§7)을 사용하여 장면 테이블
# | 장면 | 필드 역할 | 시그니처 무브 | 비트를 작성합니다. - 해당하는 에셋으로 빌드합니다.
- QA: 웹 →
assets/qa/qa-screenshots.js실행(1440 + 390, 오버플로우, 콘솔 확인). 애니메이션이 안정된 후에만 판정합니다. 영상 → 테스트 프레임, 전체 렌더,ffprobe, 콘택트 시트를 확인합니다. - 결과와 검증할 수 없었던 사항(예: 오디오는 청취하지 않음)을 보고합니다.
출력 규약
팔레트(+ 서프라이즈 이유 및 대비 요약), 장면 테이블, 생성/변경된 파일, QA 증거 경로, 알려진 제한사항을 반환합니다.
참조
references/design-system.md— 역할, 타이포그래피, 타이밍, 이징, 무브, 리듬, 안티슬롭.references/palettes.md— 인테이크, 프리셋, 토큰 형식.references/web-techniques.md— GSAP/Lenis/캔버스, 접근성, 성능.references/video-pipeline.md— 결정론적 캔버스 → 헤드리스 브라우저 → ffmpeg, 오디오.references/shader-print.md— WebGL2 레이 트레이싱, 3-잉크 하프톤, 레지스트레이션 어긋남.