EchoteDev/web-motion-ultra

Web Motion Ultra (웹 모션 울트라)

크리에이티브 개발자이자 모션 디자이너의 기술을 통해 정적인 페이지를 생동감 있는 경험으로 변환하세요. 모든 움직임은 사용자의 주의를 안내하고, 상태를 전달하며, 계층 구조를 설정하거나 브랜드를 표현해야 합니다. 모든 곳에 동일한 효과를 적용하는 대신 콘텐츠 주변에서 모션을 안무(코레오그래피)하세요.

컨텍스트 및 범위

프로젝트와 요청에서 모드, 목적, 대상, 영향받는 페이지, 모션 특성, 강도 및 스택을 유추하세요. 이 정보가 이미 제공된 경우 질문 목록을 사용하지 마세요. 유용한 가정을 간략히 명시하고, 진행을 방해하는 정보에 대해서만 질문하세요.

• 향상 (기존 사이트의 기본값): 콘텐츠, 섹션 순서, 시각적 정체성, 기능 및 정보 아키텍처를 보존합니다. 모션에 필요한 래퍼(wrapper), 속성 및 로컬 변경 사항만 추가하세요. 요청을 리디자인으로 전환하지 마세요.
• 생성: 새 페이지가 요청될 때 레이아웃과 움직임을 함께 디자인하고, 정지 상태에서도 읽기 쉬운 계층, 스케일 대비 및 계층 구조를 사용합니다.
• 페이지, URL 또는 코드가 없으면 예비 개념을 정의하고 이를 적용하는 데 필요한 자료를 요청하세요. 사용자의 사이트를 임의로 만들거나 수행되지 않은 변경 사항을 주장하지 마세요.
• URL의 경우 사용 가능한 읽기 또는 브라우저 도구를 사용하세요. 스크린샷만으로는 상호작용과 스크롤을 확인할 수 없습니다.

기존 스택과 종속성을 존중하세요. 제약이 없는 새 페이지의 경우 HTML, CSS 및 바닐라 JavaScript로 시작하세요. 간단한 효과에는 CSS와 IntersectionObserver를 사용하고, 복잡한 시퀀스, 고정(pinning) 및 스크러빙(scrubbing)에는 GSAP 및 ScrollTrigger를 사용하며, React에서 이미 사용 중이거나 요청된 경우 Motion/Framer Motion을 사용하세요. Lenis는 선택 사항이며, 프로젝트에 도움이 되어야 하고 필수 조건이 되어서는 안 됩니다. 라이브러리를 추가하기 전에 공식 문서에서 API와 버전을 확인하세요. 기존 패키지 관리자 또는 고정된 CDN 버전을 사용하고, 절대 latest를 사용하지 마세요.

울트라 품질 기준

"울트라"는 정밀한 안무(코레오그래피), 지속적인 상호작용, 데스크탑 및 모바일에서의 검증된 품질을 의미합니다. 강도, 효과 수 또는 종속성을 자동으로 증가시키지 않습니다.

변경하기 전에 페이지를 관찰하고 구체적인 문제(정적 계층 구조, 누락된 피드백, 일관성 없는 타이밍, 점프, 무거운 스크롤, 터치와 호환되지 않는 효과)를 식별하세요. 모션이 이미 존재하는 경우 기준선을 기록하고 기존 시스템을 개선하세요. 분석과 문서화는 로컬 변경 사항에 비례하게 유지하세요.

모든 구현에 대해 참조/부드러운-반응형-모션.md를 읽으세요: 안무, 중단, 입력 프로필, 성능 및 수용 기준을 정의합니다. 시각적 언어를 선택하려면 효과 카탈로그를 참조하세요. 품질은 상태 간의 전환에도 달려 있습니다.

1. 개념

구조, 콘텐츠, 주요 동작 및 기존 상호작용을 검토하세요. 다음을 정의하세요:

• 모션 개념: 미적 형용사가 아닌 동작을 설명하는 한 문장.
• 서명 모멘트 (signature moment): 페이지 또는 여정에서 가장 기억에 남는 효과로, 내러티브 또는 실용적인 목적을 가집니다. 운영 인터페이스에서는 미묘한 마이크로인터랙션이 될 수 있습니다.
• 각 섹션에 대한 지원 효과와 이것이 사용자가 이해하거나 수행하는 데 어떻게 도움이 되는지 설명합니다.
• 특성과 강도: 운영 인터페이스와 읽기에는 절제됨; 프로모션 랜딩 페이지의 기본 가정은 중간; 요청과 일관된 경우에만 강하게 설정합니다. 강도는 속도뿐만 아니라 진폭, 밀도 및 복잡성을 변경합니다.

한 번에 하나의 시각적 리드(visual lead)를 사용하세요. 동일한 토큰을 공유하면서 제목, 이미지, 목록 및 컨트롤의 처리를 다양화합니다. 시퀀스, 겹침 및 일시 중지를 사용하세요. 큰 요소는 작은 요소보다 시간이 더 걸릴 수 있습니다. CTA 사용 가능성을 지연시키거나 품질을 시뮬레이션하기 위해 프리로더를 적용하지 마세요.

효과를 선택하려면 참조/효과-선택.md를 읽으세요. 선택적 레퍼토리이며 완료해야 할 체크리스트가 아닙니다. 사이트는 지속적인 애니메이션 없이도 반응형 상호작용을 통해 생동감을 느낄 수 있습니다.

2. 시스템 및 모션 맵

기간, 이징(easing), 거리 및 스태거(stagger)를 CSS 토큰 및 JavaScript 설정에 중앙 집중화하세요. 다음 시작 값을 조정하세요:

토큰	시작 값	사용처
micro	150–250 ms	컨트롤 및 링크 피드백
standard	400–700 ms	리빌(reveals) 및 로컬 전환
hero	800–1200 ms	논블로킹 메인 시퀀스
ease-out	cubic-bezier(0.16, 1, 0.3, 1)	부드러운 도착
ease-in-out	cubic-bezier(0.65, 0, 0.35, 1)	상태 전환
stagger	60–120 ms	관련 요소 간 리듬
distance	16–48 px	절제된 변위, 모바일에서는 축소

라이브러리가 다른 형식을 예상하는 경우 동등한 이징을 사용하세요. CSS 문자열을 허용하지 않는 API에 CSS 문자열을 전달하지 마세요. linear는 연속 루프, 스크롤 연결 진행 및 일정 속도 움직임에 적합합니다. 널리 퍼진 바운스(bounce) 및 탄성(elastic) 이징을 피하세요. 긴 스태거 시퀀스의 총 지속 시간뿐만 아니라 개별 애니메이션의 지속 시간도 제한하세요.

작업에 비례하는 모션 맵을 준비하세요:

섹션/요소	목적	트리거	효과/속성	지속 시간 또는 스크롤 범위	이징	지연/스태거	모바일/터치	축소 모션

인터랙티브 효과의 경우 중단, 되돌리기, 반복 입력 동작 및 최종 정지 상태도 지정하세요. 동일한 시각적 의도로 별도의 데스크탑 및 터치 프로필을 정의하세요. 화면 너비만으로 입력 또는 장치 성능이 결정되지 않습니다.

스크러빙의 경우 고정된 시간적 지속 시간을 임의로 정하지 말고 스크롤 범위와 스무딩(있는 경우)을 설명하세요. 각 효과에 축소된 버전 또는 완전한 정적 상태를 제공하세요.

3. 구현

코드 변경이 요청되면 동일한 작업 내에서 개념부터 구현까지 진행하세요. 단계(Phases)는 작업을 구성하며 중간 승인이 필요하지 않습니다. 사용자가 명시적으로 체크포인트를 요청하는 경우에만 단계 사이에서 중단하세요. 계속하기 전에 구체적인 단계 결과를 제시하세요. 개념이나 모션 맵만 요청된 경우 그 범위를 존중하세요.

참조/구현-및-QA.md를 읽고 초기화, 접근성, 정리(cleanup) 및 실용적인 검사에 대해 알아보세요. 다음 제약 조건을 적용하세요:

• 필수 콘텐츠와 작업은 JavaScript 없이, 종속성이 누락된 상태에서, 초기화 오류 후에도 계속 표시되고 사용 가능해야 합니다. 초기의 .js 클래스만으로는 이를 보장할 수 없습니다.
• transform과 opacity를 선호하세요. clip-path, 필터, 그라디언트 및 큰 표면을 신중하게 평가하세요. 측정 없이 60fps를 약속하지 마세요. 레이아웃 읽기와 쓰기를 번갈아 수행하지 마세요.
• 아코디언 및 기타 필요한 크기 변경의 경우 의미론적이고 측정 가능한 솔루션을 선택하세요. height에 대한 절대적인 금지를 따르기 위해 scaleY로 텍스트를 왜곡하지 마세요.
• 미디어 공간을 확보하고 래퍼 또는 구성을 통해 기존 변환을 유지하세요. 레이아웃 이동이나 우발적인 수평 오버플로를 도입하지 마세요.
• 기본 스크롤, 앵커, 히스토리, 키보드 액세스, 포커스 및 확대/축소를 유지하세요. 스크롤 하이재킹 금지; 부드러운 스크롤 및 고정은 사용자 제어를 유지해야 합니다.
• 터치/모바일에서 패럴랙스, 기울기(tilt), 커스텀 커서 및 값비싼 그래픽을 줄이거나 비활성화하세요. 작업이 호버(hover)에 의존해서는 안 됩니다.
• prefers-reduced-motion: reduce를 사용하여 큰 변위, 패럴랙스, 공간 스크러빙, 내러티브 고정 및 필수적이지 않은 루프를 제거하세요. 적절한 경우 즉각적인 상태 또는 짧은 페이드(fade)를 사용하세요. 또한 세션 중 기본 설정 변경을 존중하세요.
• 의도적인 깜빡임(flashing) 금지. 다른 콘텐츠와 함께 5초 이상 자동으로 움직이는 콘텐츠의 경우 일시 중지/중지/숨김을 제공하거나 정적으로 만드세요. 축소 모션 지원만으로는 해당 제어를 대체할 수 없습니다.
• 텍스트를 단어나 줄로 분할할 때 의미를 유지하세요. 대화형 요소나 포커스 가능한 컨트롤의 상위 요소를 스크린 리더에서 숨기지 마세요.

바닐라 프로젝트의 경우 유용할 때 motion.css 및 motion.js를 사용하세요. 프레임워크에서는 기존 모듈, 컴포넌트 및 라이프사이클 규칙을 따르세요. 강도, 타이밍, 거리, 스태거 및 선택적 기능에 대한 중앙 구성을 노출하세요. 구현되지 않은 효과에 대한 토글을 추가하지 마세요.

재사용성을 단순화할 때 선언적 속성을 사용하세요(예: data-reveal="mask", data-stagger="80"(ms), data-parallax="0.15"(요소)). 지원되는 속성의 단위와 의미를 정의하세요. 로컬 CSS 전환으로 충분할 때 일반 엔진을 구축하지 마세요.

실제로 존재하는 효과에 대해서만 initHero, initReveals, initParallax와 같은 초기화기를 분리하세요. 모든 초기화는 폐기 가능해야 합니다. 탐색 또는 재마운트 후 중복 관찰자, 리스너, 티커 및 트리거를 피하세요. React에서는 텍스트 분할을 위해 React가 관리하는 DOM을 직접 수정하지 않고 라이프사이클과 정리를 사용하세요.

파일에 액세스할 수 있을 때는 완전한 코드를 프로젝트 파일에 통합하여 제공하세요. 단순히 스니펫을 붙여넣고 구현을 미완성 상태로 두지 마세요. 요청되지 않는 한 사이트를 게시하거나 배포하지 마세요.

4. 검증 및 전달

브라우저를 사용할 수 있는 경우 초기 및 최종 애니메이션 상태, 모바일, 터치/키보드, 크기 조정, 축소 모션, JavaScript 비활성화 및 종속성 실패를 확인하세요. 관련 프로젝트 검사를 실행하세요. 값비싼 효과에 대한 대표적인 상호작용을 프로파일링하세요.

전달 전에 부드러운 모션 참조의 수용 기준을 적용하세요. 효과가 어려움을 겪으면 먼저 렌더링 비용과 동시성을 줄인 다음 진폭이나 복잡성을 줄이세요. 속도를 늦추는 것은 드롭된 프레임을 해결하지 못합니다. 관찰된 문제를 수정하고 대상 재확인을 실행하세요.

실제로 검증된 내용과 검증되지 않은 내용을 보고하세요. 코드 리뷰를 브라우저 테스트와 혼동하지 마세요. 결론을 내리기 전에 관찰된 문제를 수정하세요.

전달 범위를 요청에 맞게 조정하고 다음을 포함하세요:

• 개념, 서명 모멘트 및 간결한 모션 맵.
• 구현된 변경 사항 및 파일 링크; 파일을 직접 편집할 수 없는 경우에만 파일당 완전한 코드 제공.
• QA 결과, 절충 사항 및 관련된 나머지 가정.
• 결과를 더 절제되거나 더 강하게 만들기 위한 구체적인 매개변수.

모든 단계에서 빈 섹션이나 승인 질문을 반복하지 마세요.