홈페이지용 제품 시연 장면 만들기

홈페이지에 넣을 제품 시연 애니메이션은 어떻게 만드나요? 알림이 오고, 누르고, 확정되는 3박자처럼 사용자의 순간 하나를 장면으로 만들고 가상의 예시 데이터로 반복 재생되게 합니다.

서비스가 저절로 쓰이는 장면을 보여 주면 설명 글보다 빨리 이해됩니다. 실제 기능 없이 장면만 만들면 됩니다.

이렇게 씁니다

장면 하나는 사용자의 순간 하나입니다. 예: 알림이 오고, 눌러서, 확정되는 3박자.
실제 데이터처럼 보이는 예시(이름, 시간, 금액)를 씁니다. 실존 인물이나 회사 이름은 피합니다.
반복 재생되므로 마지막 장면이 첫 장면으로 자연스럽게 이어지게 합니다.
실제 기능으로 오해하지 않도록 페이지 안에서 예시 화면임을 알 수 있게 합니다.
동작 줄이기 설정이면 마지막 장면 한 장만 보여 줍니다.

복사해서 쓰는 프롬프트

8초 시연 장면

우리 서비스 홈페이지 히어로에 넣을 제품 시연 애니메이션을 HTML/CSS로 만들어 줘. 실제 기능은 없어도 돼.
서비스: (한 줄 설명)
장면(총 8초, 무한 반복):
1. 0~2초: 휴대폰 화면 위에서 새 예약 알림이 내려온다.
2. 2~5초: 손가락 표시가 알림을 누르면 예약 상세 카드가 펼쳐진다.
3. 5~8초: [확정] 버튼이 눌리고 체크 표시와 함께 "예약 확정" 상태로 바뀐다.
- 이름과 시간은 가상의 예시로.
- prefers-reduced-motion이면 3번 장면 정지 화면만.

참고한 게시물: @flowlab_web