스크롤 및 드래그 상품 전시
실제로 작동하는 웹페이지와 편집 가능한 소스 파일을 제공합니다. 먼저 이번 작업이 스크롤, 드래그, 또는 둘 다인지 확인합니다. 기존 페이지에 한 가지 인터랙션을 추가할 때는 이미 승인된 다른 인터랙션을 유지합니다. 참고 영상은 시각적 및 움직임 관계를 파악하는 데 사용되며, 이를 바탕으로 원래 사이트가 특정 프레임워크를 사용했다고 단정할 수 없습니다. 페이지 표시와 실제 전자상거래 주문 시스템은 각각 완료 상태를 별도로 설명해야 합니다.
참고 자료 분석
로컬 비디오의 길이와 화면 비율을 읽고, 시작, 전환 중간 지점, 끝 장면을 추출합니다. 필요한 경우 연속적인 움직임을 확인하기 위해 샘플링을 추가합니다. 기록 대상: 객체 위치 및 크기, 시야각 변화, 배경 및 소품, 글자 크기, 가려짐 순서, 스크롤 방향 및 롤백 동작. 녹화 화면의 외곽 프레임, 설명 자막 또는 마우스 커서를 웹 디자인으로 오인하지 마십시오.
참고 자료를 스크롤 진행률에 따라 정렬된 동작 테이블로 정리합니다. 화면에서 직접 볼 수 있는 부분, 추론된 부분, 이번에 선택한 구현 방식을 각각 표시합니다. 참고할 커피 사례 및 경로 판단은 references/motion-design.md를 참조하십시오.
프레젠테이션 방식 선택
- 실제 시야각 변화, 인터랙티브 회전 또는 재질 변경이 필요한 경우: Three.js 3D 모델과 GSAP을 사용합니다. 적합한 GLB가 있을 때는 우선 재사용합니다. 간단한 컵, 병, 캔은 파라메트릭 지오메트리 모델링으로 제작할 수 있으며, 이는 독창적인 개략 모델임을 명확히 합니다.
- 카메라 고정, 복잡한 조명, 기존 렌더링 자료가 있는 경우: Canvas 시퀀스 프레임을 사용합니다. 프레임 번호는 스크롤 진행률에 따라 결정됩니다. 로드되지 않은 프레임과 메모리 사용량을 처리해야 하며, 임의의 비디오가 프레임 단위로 원활하게 점프할 수 있다고 가정해서는 안 됩니다.
- 위치 이동, 투명도 및 평면 기울기만 필요한 경우: DOM/CSS 레이어로 충분합니다. 단일 이미지로는 실제 앞면에서 뒷면으로의 전환을 만들 수 없습니다.
소재 경로가 결정된 후에 스크롤 로직을 구성합니다. 사용자가 브랜드를 지정하지 않은 경우, 명확한 데모 브랜드 및 상품 데이터를 사용할 수 있습니다. 인증, 판매량, 리뷰 또는 실제 거래 결과를 허위로 만들어서는 안 됩니다.
시작 템플릿
두 가지 자체 포함된 Vite + Three.js + GSAP 템플릿이 있으며, 상품과 작업에 따라 선택합니다. 새로운 브랜드의 경우에도 비주얼을 다시 디자인해야 합니다.
assets/starter/(coffee, 기본값): 커피 스크롤 내러티브에 드래그가 더해지고, 풍미에 따른 색상 변경 및 로컬 쇼핑백이 포함됩니다.mini.html은 상품과 쇼핑백을 공유하는 미니프로그램 스타일 H5입니다.assets/gallery/(gallery): 향수, 헤드폰, 시계의 세 가지 시각적 테마. 헤드폰은 스크롤 확장, 세 개의 텍스트 구간 및 드래그 공존을 지원합니다. 향수와 시계는 드래그 및 구조 버튼을 사용합니다. 이를 기반으로 커피 이외의 사례를 제작할 수 있습니다.
존재하지 않는 디렉토리에 생성하십시오 (스크립트가 기존 프로젝트를 덮어쓰지 않습니다):
python3 /path/to/scroll-product-showcase/scripts/create_project.py /absolute/path/to/new-project
cd /absolute/path/to/new-project
npm ci
npm run dev -- --port 5197
실제 스킬 설치 경로에 따라 /path/to/scroll-product-showcase를 대체하십시오. 포트가 사용 중이면 사용 가능한 포트로 변경하고 실제 주소를 제공하십시오.
커피 이외의 사례를 생성할 때는 --template gallery를 추가하십시오. 갤러리 템플릿의 헤드폰 진입점은 /?case=headphones이며, /?case=perfume 및 /?case=watch도 있습니다. 기존 프로젝트를 수정할 때는 생성기를 사용하여 덮어쓰지 말고 해당 프로젝트를 직접 수정하십시오.
수정 위치:
src/scene.js: 카메라, 조명, 스크롤 포즈 및 독립적인 드래그 각도. 커피 모델은 여기에 있으며, 갤러리 모델은src/models.js에 있습니다.src/scroll-story.js: 스크롤 단계, 동기화된 텍스트 및 진행률 표시줄.src/main.js: 진입점 및 인터랙션 상태. 커피의 포인터 제스처는src/drag.js, 쇼핑백은src/bag.js에 있습니다.- 커피
src/products.js, 갤러리src/content.js: 상품 텍스트 및 색상. src/style.css및index.html: 레이아웃, 반응형 디자인, 텍스트 및 시맨틱 구조.- 커피
mini.html,src/mini.js,src/mini.css,src/cup-viewer.js: 미니프로그램 스타일 인터페이스.vite.config.js는 두 개의 빌드 진입점을 유지합니다.
템플릿은 CSS sticky로 장면을 고정하고 ScrollTrigger로 진행률을 구동합니다. 동일한 레이어에 pin을 추가로 겹쳐서 사용하지 마십시오. 다른 프로젝트도 ScrollTrigger pin으로 변경할 수 있지만, 충돌하는 sticky 레이아웃을 제거해야 합니다.
인터랙션 조합 및 구현 제약 사항
드래그, 스크롤 공존, 구조 버튼 또는 미니프로그램 인터페이스와 관련된 경우, references/interaction-modes.md를 읽으십시오. 자세 조합, 입력 분담 및 검증 포인트가 설명되어 있습니다.
- 단일 0–1 진행률로 모델, 카메라 및 텍스트의 스크롤 편곡을 제어합니다. 동일한 수동 각도에서 정방향과 역방향으로 동일한 진행률에 도달하면 동일한 자세를 얻어야 합니다. 드래그 각도는 별도로 저장한 다음 스크롤 자세에 중첩합니다. 두 핸들러가 서로의 회전을 덮어쓰도록 해서는 안 됩니다.
- 스크롤과 드래그가 공존할 때, 리셋은 기본적으로 수동 각도만 지우고 스크롤 진행률과 색상 배열은 유지합니다. 구조 버튼이 동일한 동작을 제어하는 경우, 다른 애니메이션을 시작하여 진행률을 덮어쓰지 않도록 타임라인의 해당 위치로 이동해야 합니다. 사용자가 다른 리셋 의미를 명시적으로 지정한 경우 사용자 요청을 따릅니다.
- 먼저 객체의 안전 영역을 결정한 다음 텍스트를 배치합니다. 모바일에서는 객체 크기와 궤적을 다시 설정해야 하며, 데스크탑 버전을 단순히 등비로 축소해서는 안 됩니다.
- 제목, 설명, 선택 버튼 및 가격은 접근 가능한 HTML에 배치합니다. Canvas는 시각적 표현을 담당합니다.
- 텍스처를 교체할 때는 이전 텍스처를 해제합니다. 언로드 시 옵저버, 애니메이션, 이벤트 및 GPU 리소스를 정리합니다. 픽셀 비율을 제한하고, 보이지 않는 장면이 계속 다시 그려지지 않도록 합니다.
- 동적 효과 선호도를 줄이기 위해 정적 구도와 직접 접근 가능한 상품 정보를 제공합니다. WebGL이 실패할 때도 상품 선택과 쇼핑백은 유지합니다.
- 로컬 쇼핑백은 선택, 추가/감소, 삭제, 지속성을 지원할 수 있습니다. 백엔드에 연결되지 않은 경우 데모임을 명확히 기재해야 하며, 주문이 제출되었거나 결제가 완료되었다고 표시할 수 없습니다.
검증 및 인도
먼저 빌드한 다음, 브라우저에서 실제 렌더링을 확인합니다. 실제 인터랙션으로 시작, 중간, 끝, 되감기, 좁은 화면, 동적 효과 감소 및 상품 선택을 다루도록 합니다. 공존 모드에서는 중간에서 드래그, 계속 스크롤 및 리셋도 실제로 테스트합니다. 케이스를 전환한 후 텍스트, 무대 높이 및 색상 배열을 확인합니다. 쇼핑백이 있는 경우 수량, 합계 및 새로고침 후 상태를 검증합니다. 페이지 이상, 리소스 로딩 및 가로 오버플로를 확인합니다.
커피 템플릿의 scripts/verify-browser.mjs는 선택적 회귀 스크립트입니다. PLAYWRIGHT_MODULE을 사용하여 기존 Playwright 모듈을 가리키고, BASE_URL을 실제 서비스 주소로 설정할 수 있습니다. 현재 환경에서 브라우저 도구를 사용하도록 규정된 경우 해당 도구를 사용하여 동일한 인터랙션 검증을 수행하고, 별도의 브라우저 드라이버를 시작하지 않습니다. 갤러리 템플릿은 위 시나리오에 따라 브라우저 도구를 사용하여 검증합니다. 실제로 실행된 검사만 보고하며, 여전히 스크린샷을 보고 시각적 품질을 판단해야 합니다. 빌드 성공 또는 HTTP 200이 화면 검증을 대체할 수 없습니다.
완료 후 미리보기 주소, 소스 코드 디렉토리 및 주요 스크린샷을 제공하십시오. 실제 구현 경로와 아직 연결되지 않은 서비스를 설명하십시오. 사용자가 명시적으로 화면 녹화 또는 비디오를 요청한 경우에만 추가로 녹화하고, 정적 스크린샷을 인터랙티브 검증 또는 녹화라고 보고하지 마십시오.
필요시 참조할 기술 문서: GSAP ScrollTrigger, Three.js GLTFLoader.