웹 애니메이션: 선택 및 구축
이 스킬은 30개의 레시피 중에서 웹사이트에 적용할 애니메이션을 선택하고 구축하는 데 도움을 줍니다. 폴더 내 파일:
- placements.md: 웹사이트의 8개 위치와 각 위치에 적합한 애니메이션 목록
- recipes.md: 30개 애니메이션 각각에 대한 상세 구축 명세
1단계: 적용 위치 묻기
스킬이 로드되면, 사용자 언어로 아래 질문을 번호 목록과 함께 먼저 물어보세요. 답변을 받기 전에 코드를 작성하지 마세요.
"웹사이트의 어느 부분에 애니메이션을 적용하고 싶으신가요?"
- 랜딩 페이지의 히어로(Hero) 영역
- 스크롤 전환 또는 화면 간 전환
- 카드 및 기능 그리드
- 폼, 입력 필드, 일회용 코드
- 버튼, 토글, 진행 표시줄
- 내비게이션 및 메뉴
- 제품 또는 앱 소개 (휴대폰 목업, 캐러셀)
- 페이지 전체에서 커서를 따라다니는 캐릭터 또는 효과
사용자가 요청 시 이미 위치를 언급했다면, 2단계로 건너뛰고 어떤 위치로 이해했는지 명시하세요.
2단계: 애니메이션 유형 묻기
placements.md를 읽고 선택된 위치에 해당하는 옵션만 번호 목록으로 보여주세요. 각 옵션에는 이름, 사용자 언어로 무엇이 보이는지 한 문장 설명, 복잡도 수준을 포함하세요. 사용자에게 번호를 선택하거나 두 가지를 조합해 설명하도록 요청하세요.
사용자가 확신하지 못하면, 알려진 정보(비즈니스 유형, 대상, 유지보수 가능한 복잡도)에 따라 한 문장으로 이유를 들어 하나를 추천하세요.
3단계: 구축 전 세 가지 짧은 질문
하나의 메시지로 모두 물어보세요:
- 무엇 위에 구축하나요? 순수 HTML/CSS/JS, React, Next.js, Webflow, WordPress 또는 다른 것?
- 콘텐츠는 무엇인가요? 제목, 텍스트, 이미지, 브랜드 색상, 로고. 없으면 데모 콘텐츠를 사용하고 표시하세요.
- 사이트가 모든 브라우저와 모바일에서 작동해야 하나요? '실험적'으로 표시된 애니메이션은 Chrome에서만 사용 가능한 API에 의존합니다.
4단계: 구축
- recipes.md에서 선택한 레시피를 열고 전체 명세를 읽으세요.
- 명세와 사용자 콘텐츠에 따라 처음부터 구현을 만드세요.
- 효과를 얻는 가장 간단한 도구를 선택하세요: CSS를 Canvas보다 우선, Canvas를 WebGL보다 우선. 실제 깊이, 조명 또는 셰이더가 필요한 경우에만 Three.js 또는 R3F를 사용하세요.
- 레시피의 '조정 버튼'을 파일 상단의 변수나 작은 패널(예: lil-gui 또는 Leva)로 노출하여 코드 수정 없이 조정할 수 있게 하세요.
- Chrome 전용으로 표시된 레시피의 경우: HTML을 텍스처로 캡처하거나 간단한 CSS 버전과 같은 fallback을 구축하세요. user agent가 아닌 런타임 지원을 확인하세요.
5단계: 전달 전 검사
목록을 살펴보고 사용자에게 무엇이 확인되었는지, 무엇이 아닌지 보고하세요:
- prefers-reduced-motion: 이 설정에서 애니메이션이 중지되거나 정적 버전으로 대체됩니다.
- 성능: 일반 컴퓨터에서 60fps를 목표로 하세요. 컴포넌트가 보이지 않을 때(IntersectionObserver)와 탭이 숨겨졌을 때 루프를 중지하세요. devicePixelRatio를 2로 제한하세요.
- 모바일: hover 대신 터치를 사용하고, 저성능 기기에서는 더 가볍거나 정적인 버전을 제공하세요.
- 접근성: 텍스트는 실제 HTML로 유지되어 스크린 리더와 검색 엔진에 접근 가능합니다. 콘텐츠를 숨기는 효과는 읽기를 차단하지 않아야 합니다.
- 코드를 브라우저에서 실행하지 않았다면, 그 사실을 명시적으로 작성하세요.