웹 모션 디렉터 스킬 (web-motion-director) — 목적 중심 모션 설계

web-motion-director는 반복 업무를 더 안정적으로 처리하기 위한 AI 에이전트 스킬입니다.

웹페이지와 앱의 애니메이션, 모션 그래픽, 동적 배경, 마이크로 인터랙션을 목적 중심으로 설계·구현·검수한다. 사용자가 "애니메이션 효과", "동적 그래픽", "움직이는 그래픽", "모션 디자인", "마이크로 인터랙션", "스크롤 효과", "히어로 모션", "인터랙티브 그래픽", "키네틱 타이포", "패럴랙스", "정적으로 보여", "살아 움직이게", "motion", "animation", "선택 모드로 효과를 보여줘"라고 요청하거나 정적 웹 디자인에 의미 있는 움직임을 추가해야 할 때 사용한다. 자동 모드에서는 가장 적합한 절제된 모션을 선택하고, 선택 모드에서는 서로 다른 세 가지 모션 콘셉트를 점수화하며, 구현 후 모션 감소·성능·반응형·키보드·터치 환경을 재검수한다.

사용 방법

Codex나 호환되는 AI 에이전트의 스킬 폴더에 아래 SKILL.md 내용을 저장한 뒤, 설명에 포함된 트리거 문장으로 호출하세요.

사용 예:
web-motion-director 스킬 사용해줘.
이 작업은 web-motion-director 기준으로 진행해줘.

연관스킬

이 스킬과 함께 쓰면 좋은 관련 스킬입니다.

원본 위치

.codex/skills/web-motion-director/SKILL.md

SKILL.md

---
name: web-motion-director
description: 웹페이지와 앱의 애니메이션, 모션 그래픽, 동적 배경, 마이크로 인터랙션을 목적 중심으로 설계·구현·검수한다. 사용자가 "애니메이션 효과", "동적 그래픽", "움직이는 그래픽", "모션 디자인", "마이크로 인터랙션", "스크롤 효과", "히어로 모션", "인터랙티브 그래픽", "키네틱 타이포", "패럴랙스", "정적으로 보여", "살아 움직이게", "motion", "animation", "선택 모드로 효과를 보여줘"라고 요청하거나 정적 웹 디자인에 의미 있는 움직임을 추가해야 할 때 사용한다. 자동 모드에서는 가장 적합한 절제된 모션을 선택하고, 선택 모드에서는 서로 다른 세 가지 모션 콘셉트를 점수화하며, 구현 후 모션 감소·성능·반응형·키보드·터치 환경을 재검수한다.
---

# Web Motion Director

## 목표

움직임을 장식이 아니라 다음 네 역할 중 하나로 사용한다.

1. **방향 안내**: 무엇을 먼저 보고 어디로 이동할지 알려준다.
2. **원인과 결과 설명**: 입력, 처리, 완료의 관계를 보여준다.
3. **상태 피드백**: hover, focus, loading, success, error를 분명하게 만든다.
4. **브랜드 기억**: 페이지 주제를 표현하는 대표 장면 하나를 만든다.

어떤 역할도 설명하지 못하는 애니메이션은 제거한다. 여러 작은 효과를 흩뿌리기보다 한 개의 대표 모션과 필요한 피드백만 정교하게 만든다.

## 작업 모드

사용자 표현으로 모드를 판정하고 시작할 때 한 줄로 알린다.

- **자동 모드(기본)**: 구현이나 개선을 요청했지만 옵션 비교를 요구하지 않으면 적용한다. 화면 목적에 가장 적합한 모션 강도와 기술을 스스로 선택한다. 기본값은 `절제형`이다.
- **선택 모드**: `다른 효과`, `몇 가지`, `A/B/C`, `골라볼게`, `선택 모드`이면 서로 실질적으로 다른 세 콘셉트와 점수를 먼저 보여준다. 사용자가 모든 시안을 요청하지 않았다면 선택 전 운영 코드를 수정하지 않는다.
- **탐색 모드**: `물어보면서`, `같이 정하자`, `취향을 찾아줘`이면 결과를 크게 바꾸는 질문을 한 번에 하나만 한다. 답을 얻으면 선택 모드로 좁히거나 추천안 자동 구현 여부를 확인한다.
- **검수 모드**: `모션 검수`, `어지러운지 봐줘`, `성능 확인`이면 읽기와 진단만 수행한다.

`정적으로`, `애니메이션 없이`, `모션 끄기`라는 요구는 항상 우선한다. 결제, 오류, 접근 권한 같은 핵심 정보는 모션을 봐야만 이해되게 만들지 않는다.

## 필요한 참조

모션을 설계하거나 구현할 때 [motion-patterns-and-budgets.md](references/motion-patterns-and-budgets.md)를 읽고 적합한 패턴, 시간값, 대체 표현, 성능 예산을 선택한다.

이온디의 브랜드 모션이나 로고를 다룰 때는 `docs/eond-brand-guide.md`의 로고·브랜드 모션 규칙을 먼저 읽고 승인된 HTML·GIF·SVG 자산을 우선 재사용한다. 사용자가 새로운 변형을 요청하지 않았다면 대표 방향형 모션의 의미와 순서를 임의로 바꾸지 않는다.

## 협업 위치

- `improve-eond-uxui`가 전체 사용자 과업, A/B/C 방향, 구현 승인 범위를 지휘하면 이 스킬은 선택안의 모션 층만 담당한다.
- `eond-premium-design-director` 또는 `frontend-design`이 정한 시각 명제와 대표 요소를 움직임으로 번역한다. 별도의 장식 테마를 덧씌우지 않는다.
- `web-design-guidelines`로 구현 위치 기준 접근성과 인터랙션 기본 품질을 재검수한다.
- 새 비트맵 이미지가 실제로 필요할 때만 `imagegen`을 사용한다. CSS, SVG, HTML로 표현할 수 있는 동적 그래픽은 코드로 만든다.

관련 스킬을 함께 사용할 때는 해당 스킬을 왜 적용하는지 사용자에게 알리고 지침을 완전히 읽는다.

## 1. 모션 명제 확정

코드를 쓰기 전에 아래 내용을 한 줄씩 정한다.

- 사용자가 이 장면에서 이해해야 할 것
- 모션이 시작되는 계기: 진입, 스크롤, 입력, hover/focus, 데이터 변화
- 시작 상태와 끝 상태
- 대표 모션 한 개와 보조 피드백
- 모션을 줄이거나 JS가 없을 때 남는 정적 장면

모션 명제 예시: `제작 요청이 화면 설계에서 배포까지 이어지는 과정을 한 줄의 진행 경로로 보여준다.`

## 2. 강도와 기술 선택

### 강도

- **절제형**: 신뢰, 문의, 결제, 문서, 가이드. 짧은 진입과 상태 피드백 위주.
- **서사형**: 랜딩, 포트폴리오, 프로세스 소개. 스크롤 구간이 내용 순서를 설명.
- **반응형**: 도구, 제품 데모, 탐색 화면. 사용자의 입력이나 포인터에 직접 반응.
- **표현형**: 캠페인, 실험적 쇼케이스. 강한 모션을 한 장면에 집중하고 나머지는 조용하게 유지.

### 구현 기술 우선순위

1. CSS transform, opacity, pseudo-element
2. 의미 있는 선·도형이면 SVG와 CSS/WAAPI
3. 복수 요소의 명확한 타임라인이면 Web Animations API
4. 픽셀·입자·대량 객체가 주제의 핵심일 때만 Canvas/WebGL
5. 외부 라이브러리는 저장소에 이미 있거나 사용자가 의존성 추가를 승인한 경우만

간단한 reveal을 위해 GSAP, Framer Motion, Lottie, Rive를 새로 설치하지 않는다. 라이브러리를 쓰면 순수 CSS/JS보다 나은 이유, 번들 영향, 정적 fallback을 기록한다.

## 3. 선택 모드의 세 가지 안

세 안은 속도나 색만 다르게 만들지 않는다. `설명 방식`, `사용자 계기`, `대표 장면`, `기술 복잡도`가 달라야 한다.

각 안에 다음을 포함한다.

- 한 줄 모션 명제
- 대표 장면과 2~4단계 타임라인
- 트리거와 사용자가 제어할 수 있는 것
- 데스크톱·모바일 차이
- `prefers-reduced-motion` 대체 장면
- 기술과 예상 변경 파일
- 장점, 포기하는 것, 위험
- 점수: 의미 25 · 조작 명료성 15 · 브랜드 적합성 15 · 접근성 15 · 성능 15 · 구현 가능성 10 · 차별성 5 = 100

추천안을 하나 표시한다. 시각 확인이 선택에 중요하면 운영 화면 대신 독립된 작은 프로토타입으로 세 안을 비교하도록 제안하거나, 사용자가 요청한 경우 직접 만든다.

## 4. 구현 원칙

1. JS가 없어도 핵심 콘텐츠와 링크가 보이는 progressive enhancement로 구현한다.
2. 기본 애니메이션은 transform과 opacity를 사용하고 레이아웃을 반복 계산시키는 속성 애니메이션을 피한다.
3. 스크롤 이벤트를 직접 연속 처리하기보다 IntersectionObserver 또는 requestAnimationFrame을 사용한다.
4. 반복 모션은 화면 밖, 탭 비활성, 모바일 저성능 조건에서 중지하거나 단순화한다.
5. 포인터 기반 효과는 touch, coarse pointer, 키보드에서도 같은 과업을 완료할 수 있게 한다.
6. 장식 요소는 접근성 트리에서 제외하고 콘텐츠 읽기 순서를 바꾸지 않는다.
7. 3Hz를 넘는 점멸, 스크롤 가로채기, 강제 스무스 스크롤, 커서 대체, 자동 회전 핵심 콘텐츠를 사용하지 않는다.
8. `prefers-reduced-motion: reduce`에서는 지속 이동·줌·패럴랙스를 제거하고 즉시 상태 또는 짧은 opacity 변화로 대체한다.
9. 모바일에서는 장식 레이어 수와 동시 실행 수를 줄이고 핵심 CTA를 가리지 않는다.

## 5. 재검수

구현 전과 같은 콘텐츠와 화면 폭에서 확인한다.

- 1440px, 768px, 390px에서 겹침, 잘림, 가로 스크롤이 없는가.
- 키보드 focus와 hover가 같은 의미를 제공하는가.
- touch에서 포인터 전용 기능 때문에 정보가 사라지지 않는가.
- 모션 감소 설정에서 모든 콘텐츠와 핵심 행동이 남는가.
- 진입 전 콘텐츠 숨김이 JS 오류로 영구화되지 않는가.
- 반복 효과가 화면 밖과 비활성 탭에서 멈추는가.
- 레이아웃 이동, 긴 작업, 프레임 끊김을 실제 도구로 확인했는가. 측정하지 않은 성능은 추정으로 표시한다.

## 기본 출력 순서

1. 판정한 모드와 한 줄 모션 명제
2. 현재 화면에서 모션이 해결할 문제
3. 자동 모드면 선택한 콘셉트, 선택 모드면 A/B/C와 점수
4. 대표 장면의 타임라인과 정적 fallback
5. 기술 선택, 변경 범위, 성능·접근성 조건
6. 구현한 경우 파일, 화면 폭별 검증, 모션 감소 결과, 남은 위험

한국어로 결론부터 간결하게 작성한다. 점수는 화려함이 아니라 현재 과업과 제약에 대한 적합도다.

참고 리소스

이 스킬이 직접 참조하는 Markdown 참고 파일입니다. 재사용할 때 같은 상대 경로로 저장하면 동작이 안정적입니다.

.codex/skills/web-motion-director/references/motion-patterns-and-budgets.md

# 모션 패턴과 품질 예산

## 목차

1. 패턴 선택표
2. 시간과 이징
3. 동적 그래픽 기술 선택
4. 접근성 대체 표현
5. 성능 예산
6. 금지 패턴

## 1. 패턴 선택표

| 패턴 | 해결하는 문제 | 적합한 화면 | 기본 구현 | 감소 모션 대체 | 주요 위험 |
| --- | --- | --- | --- | --- | --- |
| 진입 안무 | 첫 시선과 읽기 순서 | 히어로, 랜딩 첫 화면 | CSS/WAAPI opacity+translate | 지연 없이 최종 상태 | 콘텐츠가 늦게 보임 |
| 진행 경로 | 단계와 인과관계 | 제작 과정, 가입, 배포 | SVG path, 단계 상태 | 완성된 경로와 번호 | 장식 선으로 오인 |
| 라이브 표면 | 제품이 실제 작동한다는 증거 | 도구, SaaS, 제작 서비스 | DOM 상태 전환 | 대표 완료 상태 | 가짜 기능처럼 보임 |
| 스크롤 챕터 | 긴 이야기의 순서 | 사례, 프로세스, 기능 소개 | sticky+IntersectionObserver | 일반 세로 문서 | 스크롤 가로채기 |
| 반응형 필드 | 사용자의 탐색에 생동감 | 히어로, 쇼케이스 | CSS 변수, pointer event | 정적 대표 구도 | 터치/멀미/CPU |
| 키네틱 타이포 | 한 문장의 의미 변화 | 캠페인, 강한 브랜드 장면 | clip/mask/transform | 완성 문장 | 읽기 방해 |
| 비교 전환 | 이전과 이후의 차이 | 리뉴얼, 최적화, 사례 | range 또는 button toggle | 두 정적 이미지 | 포인터 의존 |
| 상태 마이크로 인터랙션 | 눌림과 결과 확인 | 버튼, 탭, 폼, 저장 | CSS+상태 class | 색·문구·아이콘 | 장난스러운 과장 |
| 주변광/노이즈 | 분위기와 깊이 | 제한된 히어로 배경 | 느린 CSS/SVG | 정적 배경 | 흔한 AI 그래디언트 |

한 화면에서 대표 패턴은 하나만 사용한다. 상태 마이크로 인터랙션은 필요한 컨트롤에 보조적으로 적용할 수 있다.

## 2. 시간과 이징

아래 값은 출발점이며 화면 밀도와 이동 거리에 맞게 조정한다.

| 용도 | 권장 범위 | 비고 |
| --- | ---: | --- |
| 눌림·토글 피드백 | 100–180ms | 즉각적으로 느껴져야 함 |
| hover·focus 변화 | 140–220ms | focus 의미를 흐리지 않음 |
| 작은 패널·메뉴 | 180–300ms | 닫기는 열기보다 같거나 빠르게 |
| 히어로 진입 | 420–700ms | 핵심 문구를 오래 숨기지 않음 |
| 섹션 reveal | 350–600ms | 요소 간 stagger 40–90ms |
| 상태 간 형태 전환 | 300–600ms | 이동 거리와 복잡도에 비례 |
| 주변 반복 모션 | 8–24s | 느리고 작은 진폭, 필요 시 중지 |

- 진입은 감속 곡선, 종료·퇴장은 가속 곡선을 기본으로 한다.
- spring은 제품 성격과 상태 피드백에 맞을 때만 사용한다. 모든 요소를 튕기지 않는다.
- 동일 계층의 요소는 시간값과 이징을 통일한다.

## 3. 동적 그래픽 기술 선택

### CSS와 DOM

텍스트, 카드, 선, 간단한 배경, hover/focus에 우선한다. 콘텐츠가 DOM에 남아 반응형과 접근성을 다루기 쉽다.

### SVG

경로, 연결, 단계, 아이콘 형태 변화처럼 선과 벡터가 의미를 가질 때 사용한다. 경로 길이 애니메이션은 한 번의 설명 장면에 제한한다.

### Web Animations API

여러 DOM 요소의 재생, 취소, 역재생, 타임라인 제어가 필요할 때 사용한다. 상태와 정리(cleanup)를 명시한다.

### Canvas와 WebGL

많은 입자, 픽셀 처리, 3D 장면 자체가 페이지 메시지일 때만 사용한다. DOM 대체 문구, 정적 poster, 화면 밖 pause, resize와 device-pixel-ratio 제한을 함께 구현한다.

### 외부 런타임

- GSAP: 복잡한 타임라인과 SVG 제어가 반복될 때
- Framer Motion: 이미 React와 해당 의존성을 사용하는 제품 UI일 때
- Lottie/Rive: 승인된 애셋과 상태 제어가 있고 정적 fallback이 준비됐을 때

새 의존성은 저장소 기존 기술로 구현하기 어려운 이유가 분명할 때만 추가한다.

## 4. 접근성 대체 표현

| 원래 표현 | `reduce`에서 남길 것 |
| --- | --- |
| 큰 이동·패럴랙스 | 최종 위치의 정적 장면 |
| 확대·축소 | 짧은 opacity 또는 즉시 전환 |
| 자동 반복 | 정지된 대표 프레임 |
| 그려지는 경로 | 완성된 경로와 단계 라벨 |
| 키네틱 단어 교체 | 모든 의미가 포함된 고정 문장 |
| 포인터 추적 | 중앙 정렬된 기본 구도 |
| 스크롤 챕터 | sticky 없는 일반 문서 흐름 |

감소 모션은 `아무것도 보이지 않음`이 아니라 같은 정보를 더 안정적인 형태로 제공하는 모드다.

## 5. 성능 예산

- 기본 목표는 새 모션 라이브러리 0개다.
- 동시에 지속되는 주변 모션은 데스크톱 2개, 모바일 1개 이하를 출발점으로 삼는다.
- 큰 blur, filter, box-shadow의 매 프레임 애니메이션을 피한다. 필요한 blur는 정적으로 두고 컨테이너 transform을 움직인다.
- Canvas 해상도와 입자 수는 viewport와 devicePixelRatio에 상한을 둔다.
- 관찰되지 않는 섹션과 `document.hidden` 상태에서는 animation loop를 멈춘다.
- 이미지와 폰트 로딩이 끝날 때까지 핵심 콘텐츠 표시를 막지 않는다.
- CLS는 모션 시작 전후 공간을 예약해 방지한다.
- 60fps를 목표로 할 수 있으나 DevTools 등으로 측정하지 않았다면 달성했다고 보고하지 않는다.
- 모바일 실제 또는 에뮬레이션에서 긴 작업, 프레임 드롭, 스크롤 지연을 확인한다.

## 6. 금지 패턴

- 핵심 콘텐츠를 자동 캐러셀에만 넣기
- 사용자의 스크롤 거리나 방향을 강제로 바꾸기
- 커서를 작게 숨기거나 브랜드 커서로 교체하기
- 모든 섹션에 동일한 fade-up 반복하기
- hover에서 레이아웃 크기가 변해 주변 요소를 밀기
- 입력 오류를 흔들기만 하고 해결 문구를 제공하지 않기
- 움직이는 배경이 본문 대비를 계속 바꾸게 하기
- 무한 marquee를 여러 줄 동시에 사용하기
- 모션 감소 설정에서 콘텐츠 자체를 제거하기