Design Landing Motion

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

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

> `moai-designer` | 컨셉 → 효과 선택 → 필요한 에셋 → 구현 → 게이트

## 개요

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

두 번째 축은 비주얼이다. 사용자 자산과 브리프에 맞는 이미지를 먼저 고르고, 빈 곳에만 생성 이미지를 쓴다. 이미지 생성이 필요하지 않은 구성이라면 생성 단계를 생략한다.

## 하지 않는 것

- **호스팅·배포·도메인·DB·시크릿 관리 안 함** — 코드는 사용자 프로젝트 안에 만든다. 외부 호스팅 제품에 올리지 않는다.
- **이미지 생성 실행·모델 선택·크레딧 고지** — 실제 이미지 도구와 연결의 지원 범위·견적을 확인한다. 이 스킬은 필요한 자산과 사용처를 정한다.
- **디자인 토큰 정의 안 함** — 프로젝트의 디자인 시스템을 읽어 쓸 뿐 새로 만들지 않는다.
- 필요한 브리프 정보가 비면 사용 가능한 질문 채널로 확인하고, 답 없이 정할 수 없는 결정만 보류한다.

## 트리거 키워드

랜딩 페이지, 랜딩, 히어로, 스크롤 효과, 스크롤 스크럽, 패럴랙스, 시차, 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 경로 — 기존 의존성을 확인한 뒤 필요한 모션 도구를 선택 |
| Hugo·Astro·Eleventy·순수 HTML | 정적 경로 — 기존 CSS·JavaScript를 먼저 사용하고 필요한 경우에만 라이브러리 추가 |
| 파일을 볼 수 없는 채팅 요청 | 구현 환경을 확인하거나 플랫폼에 중립적인 제작 지시로 범위를 정함 |

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

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

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

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

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

### 2단계 — 필요한 에셋 준비

`references/asset-kit.md`에서 필요한 항목만 고른다. 확인된 브랜드 팔레트가 있으면 프롬프트에 반영한다. ChatGPT Work에서 모델을 지정하지 않은 이미지 요청은 현재 대화의 이미지 생성 도구를 사용한다. Images 2.5 요청은 앱이 모델 식별 정보를 노출하는지 확인하고, Flare·Sunburst API 모델 ID 지정 요청은 별도 API 경로의 사용 가능 여부를 확인한다. 사용자가 Higgsfield를 지정했거나 영상·3D 등 그 경로가 필요한 항목은 이 플러그인의 공식 Higgsfield 연결에서 지원 도구·모델·견적을 확인한다. 별도 설치된 `moai-media:media-higgsfield-*` 스킬의 상세 절차도 사용할 수 있다. Claude Cowork에서는 실제 연결된 도구를 확인한다. 생성 전에 비용·승인 조건을 따른다.

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

> 이미지 도구가 없으면 사용 가능한 기존 자산으로 진행하고, 생성이 필요한 슬롯은 프롬프트와 함께 미완료로 표시한다. Higgsfield를 선택한 경우에만 그 웹 경로를 안내한다.

### 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로 얹는다.
- **가짜 제품·인물·후기로 빈 곳을 채우지 않는다.** 생성이 불가하면 필요한 슬롯을 밝힌다. 브리프에 맞는 라이선스 자산이나 CSS 표현은 사용할 수 있다.
- **모션을 제대로 끝낼 수 없으면 정적으로 낸다.** 반쯤 붙은 ScrollTrigger보다 깔끔한 정적 페이지가 낫다.

## 출력 형식

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

## 주의사항

- 효과를 고르기 전에 카탈로그를 읽는다. 즉흥 선택은 대체로 남들과 같은 결과를 낸다.
- 의존성을 추가하기 전에 프로젝트가 그걸 감당하는지 확인한다(번들 크기·빌드 설정·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-codex-image` | 선택: 별도 설치된 경우 ChatGPT 이미지 작업 상세 절차 |
| `moai-media:media-higgsfield-image` | 선택: 별도 설치된 경우 Higgsfield 이미지 생성 절차 |
| `moai-media:media-higgsfield-video` | 선택: 별도 설치된 경우 영상 생성 절차 |
| `moai-media:media-higgsfield-assets` | 선택: 별도 설치된 경우 3D·업스케일·누끼 절차 |
| `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를 요구한다. 이 스킬은 **디자인·모션·에셋 지식만** 가져오고 호스팅 계층은 가져오지 않는다. 따라서 원본과 동작이 같지 않다.
- 이미지 생성 실행·모델·비용: 현재 대화의 이미지 도구 또는 이 플러그인에 연결된 공식 Higgsfield 도구의 라이브 결과.