Design Landing Motion

---
name: design-landing-motion
description: |
  기억에 남는 다이나믹 랜딩 페이지를 만듭니다. 브리프에서 컨셉 스파인을 뽑고, 시그니처 효과를 하나만
  골라 끝까지 완성하며, 화면에 들어갈 비주얼은 Higgsfield로 생성해 브랜드 팔레트에 잠급니다.
  스크롤 스크럽·시차 레이어·WebGL 디스플레이스먼트·파티클·마스크 리빌·수평 레일·키네틱 타이포 등을
  다루고, React/Next(R3F·Framer Motion·GSAP)와 정적 사이트(바닐라 three.js·GSAP) 양쪽으로 냅니다.
  다음과 같은 요청 시 사용하세요:
  - "랜딩 페이지 만들어 줘", "히어로 인상적으로"
  - "스크롤에 반응하는 사이트", "스크롤하면 영상이 재생되는"
  - "three.js 넣어 줘", "WebGL 효과", "3D로 보이게"
  - "패럴랙스", "마우스 따라 움직이는", "파티클"
  - "어워드 받을 만한 사이트", "밋밋해 보여"
  호스팅·배포·도메인·DB는 범위 밖입니다. 코드는 사용자 프로젝트 안에 만들며 외부 호스팅에 올리지
  않습니다. 브랜드 이미지 한 장만 필요하면 design-brand-visual을 쓰세요.
version: "1.1.1"
---

# 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` 라이브 계약.