motionsite은(는) 무엇을 하나요?
'모션 사이트' 룩을 구축합니다: 전체 화면 반복 비디오 히어로, 읽기 쉬운 텍스트를 위한 어두운 그라데이션 오버레이, 유리 효과 카드, 애니메이션 단어, 반응형 버튼, 스크롤 시 나타나는 섹션. 좋은 사이트와 느리고 접근성 낮은 사이트의 차이는 아래 체크리스트에 있으므로, 이 스킬은 페이지를 구축한 후 감사합니다.
motionsites.ai와 관련이 없습니다. 이 스킬에는 타사 프롬프트나 에셋이 포함되어 있지 않습니다.
자체 실행: 랜딩 페이지, 히어로 또는 애니메이션 사이트를 요청하면 Claude가 이 스킬을 선택하고, 템플릿에서 구축한 후 보고하기 전에 감사를 실행합니다.
절차
- 한 번에 브리핑을 받습니다. 브랜드 이름, 한 줄 약속, 주요 콜투액션, 3~6개 섹션(기능, 증거, 가격, FAQ), 분위기(차분함, 대담함, 유쾌함, 고급스러움), 그리고 이미 보유한 로고, 색상 또는 글꼴. 사용자가 아무것도 제공하지 않았다면 직접 방향을 선택하고 어떤 방향인지 말합니다.
- 프로젝트에서 스택을 선택합니다. 기존 React/Next/Vue/Svelte 프로젝트: 해당 스택으로 컴포넌트를 구축합니다. 선호도가 없는 빈 폴더: 단일 파일
templates/site.html을 사용합니다(빌드 단계 없음, 더블 클릭으로 열림). React, Vite, TypeScript 및 Tailwind를 요청하면templates/Hero.tsx와templates/useReveal.ts를 사용합니다. - 비디오를 정직하고 가볍게 처리합니다.
references/assets.md를 참조하세요. 사용자의 자체 푸티지 또는 생성되거나 라이선스가 부여된 클립을 사용하고, 타사의 CDN에 핫링크하지 마십시오. 실제 푸티지가 있을 때까지 템플릿에 포함된 CSS 애니메이션 그라데이션 배경을 제공하여 페이지가 이미 완성된 것처럼 보이게 합니다. 실제 푸티지는.hero-media에 세 가지 데이터 속성(data-video-mp4,data-video-webm,data-poster)을 채워 전환합니다. 웹 버전은scripts/make_video_assets.sh(mp4 + webm + poster)로 만듭니다. - 템플릿에서 페이지를 구축합니다. 다음 부분을 유지합니다: 히어로(비디오 + 오버레이 + 헤드라인 + CTA), 유리 탐색 모음, 애니메이션 공개가 포함된 3~6개 콘텐츠 섹션, 푸터.
references/design-recipes.md의 디자인 레시피(타입 스케일, 간격, 팔레트, 유리 카드, 버튼 상태, 타이밍)를 적용합니다. - 성능 및 접근성 규칙을 연결합니다 (아래). 선택적 추가 사항이 아니라, 페이지를 휴대폰에서 사용 가능하게 만드는 요소입니다.
- 감사합니다.
python3 <skill-dir>/scripts/check_motion.py <site-folder>를 실행하고 모든 FAIL을 수정합니다. 그런 다음 브라우저에서 확인합니다: 데스크톱 및 휴대폰 너비, 모션 감소 켜짐, 첫 페인트를 위해 JavaScript 비활성화. 자세한 내용은references/performance-accessibility.md를 참조하세요. - 보고합니다. 만든 파일, 플레이스홀더 비디오를 교체하는 방법, 감사 결과, 그리고 확인해야 할 한 가지 사항.
품질을 결정하는 규칙
- 비디오:
muted,loop,playsinline(이 속성이 없으면 모바일 브라우저가 페이지에서 재생을 거부함),poster설정,preload="metadata", 오디오 트랙 없음. 템플릿이 수행하는 것처럼 모션 감소 및 데이터 절약을 확인한 후 스크립트에서 재생을 시작하여 해당 방문자가 비디오를 다운로드하지 않도록 합니다. 히어로 클립은 24MB, 최대 1080p, 깔끔하게 반복되는 612초를 목표로 합니다. - 포스터는 첫 페인트입니다. 포스터 이미지(또는 그라데이션)는 방문자가 보는 것이며 Largest Contentful Paint가 측정하는 것입니다.
fetchpriority="high"와 정확한 크기를 지정합니다. - 방문자를 존중합니다.
prefers-reduced-motion: reduce에서 또는 데이터 절약 모드가 켜져 있을 때 비디오 재생 대신 포스터를 표시하고 애니메이션을 끕니다. 비디오가 화면 밖으로 스크롤되면 일시 중지합니다. transform과opacity만 애니메이션합니다.top,left,width,height또는margin을 절대 애니메이션하지 않습니다. 이들은 레이아웃을 강제하고 휴대폰에서 버벅임을 유발합니다.- 텍스트는 비디오 위에서 읽을 수 있어야 합니다. 비디오와 텍스트 사이에 그라데이션 오버레이를 배치하고, 본문 텍스트는 가장 어두운 프레임과 가장 밝은 프레임에 대해 최소 4.5:1 대비를 유지하며, 작은 텍스트를 움직이는 푸티지 위에 직접 배치하지 않습니다.
- 섹션당 하나의 아이디어, 요소당 하나의 모션. 60
100ms 간격으로 스태거, 지속 시간 400800ms, ease-out. 모든 것이 움직이면 눈을 끄는 것이 없습니다. - 모바일 우선. 히어로는
100vh가 아닌100svh를 사용합니다. 375px 너비에서 테스트합니다. 수평 스크롤이 없어야 합니다. 작은 화면에서는 더 가벼운 또는 정적 히어로를 고려합니다. - 실제 콘텐츠 구조. 하나의
h1, 랜드마크(header,main,footer), 버튼은<button>또는<a>, 링크에는 텍스트, 이미지에는alt. - 에셋을 소유합니다. 타사 CDN 비디오 없음, 글꼴은 자체 호스팅 또는 글꼴 제공업체에서, 라이선스는
assets/README.md에 기록.
파일
| 파일 | 용도 |
|---|---|
templates/site.html | 완전한 단일 파일 랜딩 페이지: CSS 그라데이션 폴백이 있는 비디오 히어로(데이터 속성으로 켜짐), 유리 탐색, 애니메이션 헤드라인, 스크롤 시 나타남, 카드, CTA, 푸터 |
templates/Hero.tsx, templates/useReveal.ts | 히어로 및 스크롤 리빌 훅의 React 버전 |
references/design-recipes.md | 타입, 색상, 간격, 유리, 버튼, 모션 타이밍, 섹션 패턴 |
references/performance-accessibility.md | 예산, 모션 감소, 비디오 동작, 테스트 단계 |
references/assets.md | 비디오 출처, 라이선스, 클립 생성, 인코딩 |
scripts/make_video_assets.sh | ffmpeg: 입력 클립을 웹 mp4, webm, 포스터로 변환 |
scripts/check_motion.py | 위 문제에 대해 사이트 폴더 감사 |