튜토리얼
Claude Opus 5.5로 콘텐츠를 숨기지 않는 제품 페이지 모션 만들기
Claude Opus 5.5에는 정적인 상태에서도 제품 페이지가 완전하도록 한 다음, 변화를 설명하는 곳에만 모션을 추가하게 하세요.
Claude Opus 5.5에는 정적인 상태에서도 제품 페이지가 완전하도록 한 다음, 변화를 설명하는 곳에만 모션을 추가하게 하세요. 가격, 사양, 구매 링크가 스크롤 애니메이션을 기다려서는 안 됩니다. 초기 가시성을 먼저 고쳐야 합니다. 스크립트가 실패하면 계속 숨는 내용을 짧은 애니메이션으로 해결할 수는 없습니다.
다음은 제안 구현 지침이며 Opus 실측 결과가 아닙니다. 공식 안내에 맞춰 결과물과 검토 기준을 명확히 하고 HTML, CSS, JavaScript를 함께 제공합니다.
세 가지 모션 역할 구분하기
| 모션 | 유용한 목적 | 정적 대안 |
|---|---|---|
| 색상 견본 전환 | 선택 변경 표시 | 선택 라벨과 즉시 이미지 갱신 |
| 제품 분해도 | 부품 관계 설명 | 라벨이 있는 부품 그림 |
| 스크롤 등장 | 장식 | 문서 순서대로 이미 보이는 내용 |
웹 개발자 토론에는 반복되는 등장 효과를 기다리느라 읽기 어렵다는 의견이 있습니다. 정성적 피드백이며 특정 시간이 전환율을 높인다는 증거는 아닙니다.
트리거, 대상, 시작/종료 상태, JavaScript 실패 시 동작을 기록합니다. 관찰자나 타임라인 실행까지 남아 있는 `opacity: 0`, 화면 밖 변환, 높이 0을 찾으세요. DOM에 구매 링크가 있어도 보이지 않을 수 있습니다.
기본 상태는 보이게 하기
다음 예는 카드를 기본으로 표시하고 모션 감소 요청이 없을 때만 짧게 등장시킵니다. 시간과 거리는 예시 디자인 선택이지 보편 기준이 아닙니다.
```css
.product-card {
opacity: 1;
transform: none;
}
@media (prefers-reduced-motion: no-preference) {
.product-card {
animation: product-enter 180ms ease-out both;
}
@keyframes product-enter {
from { opacity: 0.85; transform: translateY(6px); }
to { opacity: 1; transform: none; }
}
}
[MDN 문서](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules/@media/prefers-reduced-motion)는 이 미디어 기능과 사용자 설정의 관계를 설명합니다. CSS만으로 별도의 JavaScript 루프나 자동 재생 영상이 멈추지는 않습니다. 각 제어 코드에서도 같은 설정을 확인해야 합니다.
모든 애니메이션 시간을 일괄 0으로 만들지 마세요. 일부 코드는 이벤트를 기다려 콘텐츠를 표시하거나 상태를 정리합니다. 정적 경로에는 명시적 완료 상태가 필요하며 완료 처리가 정확히 한 번 실행되는지 확인합니다.
## 수정 프롬프트
```text
첨부 HTML, CSS, JavaScript를 검토하고 문구, 제품 사실, 링크, 문서 순서를 유지하세요.
각 애니메이션의 트리거, 시작/종료 상태, JavaScript 실패와 모션 감소 설정에서의 동작을 나열하세요.
가격, 사양, 구매 링크를 기본 상태에서 보이고 사용할 수 있게 하세요. 장식은 no-preference에만 추가하고 설명용 모션에는 같은 사실을 담은 정적 라벨 그림을 제공하세요.
CSS, JavaScript 타임라인, requestAnimationFrame 루프, 영상 자동 재생을 별도로 검사하세요. 미디어 쿼리 하나가 모두 해결한다고 말하지 마세요.
핵심 정보 표시가 애니메이션 이벤트를 기다리지 않게 하세요. 정적 경로에서도 정리와 완료 처리는 정확히 한 번 실행해야 합니다.
최소 패치와 테스트 표를 주세요. 일반 모션, 로드 전 감소 설정, 열린 상태에서 설정 변경, JavaScript 비활성화, 키보드, 좁은 화면을 포함하세요.
전체 페이지 재설계나 전환율 향상 약속은 하지 마세요.움직임뿐 아니라 대안도 시험하기
페이지를 열기 전에 모션 감소를 켜고 같은 제품 정보와 동작이 즉시 가능한지 확인합니다. 열린 상태에서 설정을 바꿔 반투명 카드나 반쯤 열린 도식이 남지 않는지 확인하세요.
JavaScript를 끄고 새로고침합니다. 고급 선택기에 간단한 대안이 필요하더라도 핵심 정보는 읽혀야 합니다. Tab 이동 중 현재 포커스가 등장 효과에 숨지 않아야 합니다. 좁은 화면에서 정적 도식의 라벨이 유지되고 핵심 비교에 가로 드래그가 필요 없는지도 검사합니다.
정적/동적 상태를 캡처하고 각 결과를 검사 완료, 실패, 미검사로 표시합니다. 그럴듯한 생성 코드와 설명만으로 브라우저 테스트가 통과한 것은 아닙니다.
두 경로에 필요한 이미지 준비하기
Panelly Studio에서 완성 제품 이미지나 라벨이 있는 정적 도식을 만들고 읽을 수 있는 기본 화면으로 사용합니다. 모션은 나중에 설명을 보완할 수 있습니다. Opus 직접 통합이나 이 페이지 코드의 Panelly 내보내기를 주장하는 것이 아닙니다.
구조 수정은 랜딩 페이지 수정, 독립 영상은 스크린샷 홍보 영상을 참고하세요.
자주 묻는 질문
모션 감소는 빈 페이지나 축약판인가요?
아닙니다. 정보와 동작은 유지하고 움직임만 사용 가능한 정적 상태로 바꿉니다.
빠르게 재생하면 충분한가요?
스크립트 실패를 고치지 못하며 남은 모션을 사용자가 견딜 수 있다는 보장도 없습니다. 정적 경로를 별도로 확인하세요.
