design-landing-motion

# design-landing-motion — 다이나믹 랜딩 제작

> `moai-designer` | 컨셉 → 효과 1개 → 에셋 킷 → 구현 → 게이트 (생성 실행: `moai-media`)

## 개요

밋밋한 랜딩과 기억에 남는 랜딩을 가르는 건 효과의 **개수**가 아니라 **하나를 끝까지 완성했는지**다. 이 스킬은 효과를 여러 개 뿌리는 것을 막고, 컨셉에 맞는 시그니처 효과 하나를 골라 초기 렌더·모바일·저감모션까지 완결시킨다.

두 번째 축은 비주얼이다. AI가 만든 랜딩이 싸구려로 보이는 가장 흔한 이유는 stock 이미지나 CSS 그라디언트로 때우기 때문이다. 이 스킬은 **화면에 들어갈 이미지를 브랜드 팔레트에 잠근 채 생성**한다.

## 하지 않는 것

- **호스팅·배포·도메인·DB·시크릿 관리 안 함** — 코드는 사용자 프로젝트 안에 만든다. 외부 호스팅 제품에 올리지 않는다.
- **이미지 생성 실행·모델 선택·크레딧 고지 안 함** — `moai-media:media-higgsfield-core` 계약에 위임한다.
- **디자인 토큰 정의 안 함** — 프로젝트의 디자인 시스템을 읽어 쓸 뿐 새로 만들지 않는다.
- **사용자에게 직접 질문 안 함** — 슬롯이 비면 blocker를 반환한다.

## 트리거 키워드

랜딩 페이지, 랜딩, 히어로, 스크롤 효과, 스크롤 스크럽, 패럴랙스, 시차, three.js, threejs, WebGL, R3F, GSAP, ScrollTrigger, 파티클, 마스크 리빌, 키네틱 타이포, 인터랙션, 다이나믹, 어워드, 모션 사이트

## 참조 파일

| 파일 | 언제 읽나 |
|---|---|
| `references/effects-catalog.md` | 1단계 — 효과를 고를 때 (**고르기 전에 반드시**) |
| `references/asset-kit.md` | 2단계 — 무엇을 생성할지 정할 때 |
| `references/motion-craft.md` | 3단계 — DOM·CSS 모션을 짤 때 |
| `references/threejs-patterns.md` | 3단계 — WebGL·3D가 들어갈 때 |
| `references/quality-gate.md` | 4단계 — 끝내기 전 |

## 워크플로우

### 0단계 — 환경 판정과 브리프

**환경 판정 (먼저).** 프로젝트를 감지해 구현 문법을 정한다. 추측하지 않고 파일로 확인한다.

| 감지 | 스택 |
|---|---|
| `package.json`에 `react`/`next` | React 경로 — R3F(`@react-three/fiber`·`drei`) + Framer Motion + GSAP ScrollTrigger |
| Hugo·Astro·Eleventy·순수 HTML | 정적 경로 — 바닐라 `three` + GSAP + CSS |
| 판단 불가 | blocker 반환 |

**컨셉 스파인.** 이 사이트가 말하려는 한 가지를 한 문장으로 적는다("정밀함", "상승", "축적" 등). 효과 선택은 이 문장에 봉사해야 한다. 스파인 없이 효과부터 고르면 예쁘지만 겉도는 페이지가 나온다.

**디자인 시스템 읽기.** 팔레트·타이포·형태 언어·브랜드 금지 사항을 프로젝트에서 읽는다(`design-brand-visual`과 동일한 우선순위). 근거가 없으면 지어내지 말고 "근거 없음"으로 표시한다.

### 1단계 — 시그니처 효과 **하나** 선택

`references/effects-catalog.md`에서 **하나만** 고른다. 카탈로그 밖에서 즉흥적으로 고르지 않는다.

선택 규칙:
1. 컨셉 스파인을 갚는 효과를 고르고, **왜 그 짝인지 한 문장**을 브리프에 적는다.
2. 같은 세션의 직전 빌드와 **같은 효과를 반복하지 않는다**. 반복 방지 6축은 카탈로그 문서에.
3. 모든 효과는 **초기 렌더 완결**과 **저감모션 대체**가 가능해야 한다. 둘 중 하나라도 불가능하면 그 효과는 탈락이다.
4. 곁들이는 리빌 애니메이션은 허용하되, "이건 무엇을 전달하는가"에 답하지 못하면 뺀다.

### 2단계 — 에셋 킷 생성 (moai-media 위임)

`references/asset-kit.md`의 구성표대로 무엇을 만들지 정하고, 프롬프트에 **팔레트를 명시**해 `moai-media`에 넘긴다. 생성 실행·모델 선택·비용 고지는 그쪽 계약이다.

**사용자 자산이 언제나 이긴다.** 로고·제품 사진·팀 사진·폰트를 이미 갖고 있으면 그대로 쓴다. 생성은 **빈 곳만** 채운다.

> moai-media 미설치 또는 MCP 미연결 시: 완성된 생성 프롬프트를 텍스트로 출력하고 Higgsfield 웹(https://higgsfield.ai)에서 직접 만들도록 안내한다. 이때 stock 이미지나 CSS 그라디언트로 대체하지 않는다 — 빈 슬롯임을 명시하는 편이 낫다.

### 3단계 — 구현

판정된 스택의 문법으로 만든다. 모션 규범은 `references/motion-craft.md`, WebGL은 `references/threejs-patterns.md`.

순서가 중요하다: **정적 레이아웃을 먼저 완성**하고 그 위에 모션을 얹는다. 모션부터 짜면 초기 렌더가 비어 있는 페이지가 나오고, 이건 게이트에서 걸린다.

### 4단계 — 게이트

`references/quality-gate.md`의 항목을 기계적으로 점검한다. 통과 못 하면 끝난 게 아니다.

## 하드 규칙

- **시그니처 효과는 페이지당 하나.** 두 개 이상은 서로를 죽인다.
- **초기 렌더가 완결돼야 한다.** JS가 돌기 전 스크린샷에 이미 완성된 히어로가 보여야 한다.
- **`prefers-reduced-motion` 대체는 모든 애니메이션 요소에 필수.** 저감모션에서는 핀 없이 최종 상태를 정적으로 보여준다.
- **핫패스에서는 `transform`과 `opacity`만 애니메이션한다.** 레이아웃 속성(width·top·margin)을 움직이지 않는다.
- **모바일 열화를 미리 선언한다.** 커서 효과는 스크롤 대응으로, 긴 핀은 짧게. "데스크톱만 됨"은 열화가 아니라 방치다.
- **이미지 안에 본문 텍스트를 굽지 않는다.** 타이포는 HTML로 얹는다.
- **stock·picsum·CSS 그라디언트로 때우지 않는다.** 생성이 불가하면 빈 슬롯임을 밝힌다.
- **모션을 제대로 끝낼 수 없으면 정적으로 낸다.** 반쯤 붙은 ScrollTrigger보다 깔끔한 정적 페이지가 낫다.

## 출력 형식

```
## 랜딩 제작 결과
- 컨셉 스파인: [한 문장]
- 판정 환경: [React | 정적] — 근거: [감지한 파일]
- 시그니처 효과: [카탈로그 id] — 스파인과의 연결: [한 문장]
- 참조한 디자인 시스템: [파일 경로] (없으면 "근거 없음")
- 생성 에셋: [항목별 목록] (위임: moai-media)
- 모바일 열화: [무엇이 어떻게 바뀌는지]
- 저감모션 대체: [정적 최종 상태 설명]
- 게이트: [통과 | 걸린 항목과 조치]
```

## 주의사항

- 효과를 고르기 전에 카탈로그를 읽는다. 즉흥 선택은 대체로 남들과 같은 결과를 낸다.
- 의존성을 추가하기 전에 프로젝트가 그걸 감당하는지 확인한다(번들 크기·빌드 설정·SSR 호환).
- WebGL은 실패할 수 있다(구형 기기·드라이버). 폴백을 반드시 둔다 — `references/threejs-patterns.md`.
- 접근성은 저감모션만이 아니다. 키보드 포커스·대비·스크린리더 흐름을 모션이 망가뜨리지 않는지 본다.
- 생성 비용은 에셋 수에 비례한다. 킷 구성을 확정하기 전에 사용자에게 알린다.

## 관련 스킬

| 스킬 | 시점 |
|---|---|
| `moai-designer:design-brand-visual` | 대안: 이미지 한 장만 필요할 때 |
| `moai-designer:design-brand-system` | 선행: 팔레트·타이포 기준 수립 |
| `moai-designer:design-tokens-transformer` | 선행: 토큰을 CSS로 |
| `moai-designer:design-slop-check` | 후속: 카피 AI 슬롭 점검 |
| `moai-media:media-higgsfield-image` | 위임: 이미지 생성 |
| `moai-media:media-higgsfield-video` | 위임: 스크럽용 영상 생성 |
| `moai-media:media-higgsfield-assets` | 위임: 3D(GLB)·업스케일·누끼 |
| `moai-media:media-higgsfield-identity` | 선행: 인물·마스코트 일관성 |

## 출처

- [Higgsfield Skills (공식 agent 문서)](https://github.com/higgsfield-ai/skills) — `higgsfield-websites` v0.12.0 (MIT). 효과 카탈로그·모션 규범·에셋 킷 구성·안티슬롭 카피 규칙·게이트 항목의 착안점.
- 원본은 Cloudflare Worker 호스팅 파이프라인과 결합돼 있고 `higgsfield website` CLI를 요구한다. 이 스킬은 **디자인·모션·에셋 지식만** 가져오고 호스팅 계층은 가져오지 않는다. 따라서 원본과 동작이 같지 않다.
- 생성 실행·모델·비용: `moai-media:media-higgsfield-core` 라이브 계약.