| name | vibe-webeffect |
| description | 사용자가 웹페이지·랜딩페이지·웹앱 UI를 만들거나 고칠 때, 작업 맥락을 읽고 어울리는 웹 애니메이션 효과를 추천하고 코드까지 적용해주는 스킬. 72개 효과 카탈로그 (스크롤 스크러빙 / 호버 / 시그니처 / 등장·리빌 / 마이크로 인터랙션 / 로딩·상태 / 실험실) 기반. 다음 상황에서 반드시 이 스킬을 사용한다: 사용자가 "웹페이지 만들어줘", "랜딩페이지", "히어로 섹션", "포트폴리오 사이트", "대시보드 UI", "폼/버튼 만들어줘", "애니메이션 넣어줘", "효과 추천해줘", "더 살아있게/고급스럽게/화려하게 해줘", "밋밋한데?", "인터랙션 추가" 등을 언급할 때 — 애니메이션이라는 단어가 없어도 HTML/CSS/JS UI를 새로 만들거나 개선하는 요청이면 트리거한다.
|
vibe-webeffect — 웹 애니메이션 추천·적용 스킬
사용자의 UI 작업 요구를 읽고 → 카탈로그에서 어울리는 효과를 골라 → 정확한 이름(KR+EN)과 이유와 함께 추천하고 → 동의하면 코드를 적용한다.
핵심 철학: "용어가 곧 능력" — 효과의 정확한 이름을 알려주는 것 자체가 사용자의 자산이 된다.
파일 구성
catalog.json — 72개 효과. {id, cat, kr, en, intensity, tags, prereq, code, ref} 스키마references/recipes.md — 카테고리별 공용 구현 패턴(보일러플레이트). 코드 적용 전 반드시 읽는다
워크플로우
1단계 — UI 컨텍스트 추출
사용자 요청에서 만들려는 화면의 구성요소를 파악한다. 명시가 없으면 요청의 성격에서 추론한다.
| 감지된 컨텍스트 | 매칭 태그 | 우선 카테고리 |
|---|
| 히어로/랜딩 첫 화면 | hero, landing | signature, scroll, insane(1개만) |
| 콘텐츠 섹션/블로그/소개 | section, content | reveal (기본값) |
| 카드 그리드/갤러리/포트폴리오 | grid, gallery, card, portfolio | reveal(stagger) + hover |
| 통계/수치/성과 | stats, number | reveal(count-up), signature(number-roll) |
| 폼/로그인/설정 | form, input, settings | micro + loading(error-shake) |
| 버튼/CTA | button, cta | micro, hover |
| 데이터 로딩/API 호출 화면 | loading, wait, feed | loading (필수) |
| 챗/AI 인터페이스 | chat, ai | loading(typing), micro |
| 제품 상세/이커머스 | product, ecommerce | hover, scroll(before-after), micro(star) |
| 스토리텔링/브랜드 사이트 | storytelling, brand, wow | scroll, signature, insane |
| 타임라인/프로세스/연혁 | timeline, process | reveal(line-draw, alternate-slide) |
| 배경이 밋밋함 | background, ambient | insane(constellation 등), signature(blob) |
2단계 — 카탈로그 매칭
catalog.json을 읽고 태그가 겹치는 효과를 후보로 모은다. 동률이면 intensity가 낮은 쪽을 우선한다(과잉 방지).
3단계 — 추천 제시 (적용 전에 반드시)
상황별로 2~4개를 골라 아래 형식으로 제시하고 사용자의 선택을 받는다:
[한국어 이름] ([영어 이름]) — 왜 이 화면에 맞는지 한 줄 + 필요한 전제조건(있으면)
단, 사용자가 "알아서 해줘/바로 적용해줘"라고 했거나 이미 효과를 지정했다면 추천 단계를 건너뛰고 적용한다. 이때도 적용한 효과의 이름은 반드시 결과 보고에 명시한다.
4단계 — 적용
references/recipes.md에서 해당 카테고리의 공용 패턴을 읽는다- catalog의
code(핵심)와 recipes의 보일러플레이트를 조합해 사용자 프로젝트 구조에 맞게 삽입한다
- 아래 적용 규칙을 지킨다
5단계 — 결과 보고
적용한 효과의 이름(KR+EN)을 명시하고, 사용자가 나중에 AI에게 재요청할 수 있는 한 줄 지시문("~효과 넣어줘")을 함께 알려준다.
적용 규칙 (위반 금지)
- 강도 배합 — 한 화면(뷰포트)에
bold는 최대 1개. 나머지는 subtle/medium. 전 화면이 다 움직이면 아무것도 안 보인다.
- reduced-motion 필수 — 모든 애니메이션에
@media(prefers-reduced-motion:reduce) 가드 또는 JS matchMedia 체크를 넣는다.
- 성능 — transform·opacity만 애니메이션하는 것을 기본으로 한다.
filter·box-shadow 애니메이션은 작은 요소에만. 스크롤 핸들러엔 lerp/rAF, 리스너엔 {passive:true}.
- transition 재생 함정 — transition 기반 효과를 재트리거할 땐 recipes.md의 "스냅 리셋" 패턴을 쓴다 (클래스 뗐다 바로 붙이면 재생 안 됨).
- 등장 효과는 IntersectionObserver 1개로 통합 — 요소마다 옵저버를 만들지 않는다.
- 로딩 UX 원칙 — 진행률을 알면 확정 프로그레스(+% 숫자), 모르면 무한/스피너, 구조를 알면 스켈레톤. 1초 미만 작업엔 로딩 표시 생략.
- 의존성 0 — 모든 효과는 라이브러리 없이 순수 HTML/CSS/JS로 적용한다. 사용자가 GSAP 등을 이미 쓰고 있을 때만 그 방식을 따른다.
- 마이크로 인터랙션 공용 이징 —
cubic-bezier(.34,1.56,.64,1) (오버슈트 스프링).
추천 어조
- 이름을 가르치듯: "이건 **라인 마스크 리빌(line mask reveal)**이라고 하는데…"
- 과잉을 말리는 것도 추천이다: "여긴 효과 없이 두는 게 낫다"가 정답인 화면이 있다.
- 전제조건(예: 이미지 시퀀스는 ffmpeg 프레임 추출 필요)은 추천 시점에 미리 알린다.
