Stageshow: 제품 UI 일러스트와 모션

히어로, 기능 카드, 문서 또는 벤토 그리드에 사용할 정지형 제품 UI나 커서가 움직이는 React 데모를 만드세요. 제품과 보여줄 장면, 스타일, 배치 위치를 알려주세요.

미리보기

인터랙티브 데모 사이트 둘러보기에서 미리 만든 세 장면을 선택하고 다시 재생할 수 있습니다. 이 사이트는 새 디자인을 생성하지 않으며 Capafy 런타임 테스트가 아닙니다.

아래 GIF는 원본 재정렬 예시를 바탕으로 만든 가상의 출시 체크리스트를 실제 React로 실행해 캡처한 것입니다. Capafy 런타임에서 테스트한 결과는 아닙니다.

포함 사항

• 창, 화면, 휴대폰, 커서와 모션을 위한 React·CSS 키트
• 예제, 디자인 가이드, 장면 검토 도구
• React 프로젝트에 맞게 수정할 수 있는 소스

이렇게 요청해 보세요

제품, 배치 위치, 보여줄 동작이나 정지 화면, 스타일, 원하는 결과물을 구체적으로 알려주세요.

1. 랜딩 히어로: "프로젝트 관리 앱에서 작업이 완료로 바뀌고 완료 수가 올라가는 React 애니메이션을 만들어줘. 밝은 배경과 차분한 초록색을 쓰고 모바일 레이아웃도 만들어줘."
2. 기능 카드: "문서 공유 버튼을 누르면 이메일 초대와 편집 권한 선택이 열리는 작은 React·CSS 카드를 만들어줘. 정지 화면에도 핵심 장면이 보이게 해줘."
3. 대시보드: "가상의 구독 서비스 매출 차트 위를 커서가 움직이면 날짜와 금액이 바뀌는 대시보드를 만들어줘. 수치는 가상으로 넣어줘."
4. 벤토 그리드: "팀 협업 앱의 작업 배정, 댓글, 알림을 보여주는 정적 React 벤토 그리드를 만들어줘. 작업 카드를 가장 크게 배치해줘."
5. 모바일 흐름: "가상의 운동 앱에서 운동 카드를 누르면 상세 화면과 기록이 나타나는 모바일 React 데모를 만들어줘."
6. 문서 일러스트: "웹훅이 서비스에서 고객 엔드포인트로 전달되는 요청과 응답을 라벨로 표시한 정적 React 일러스트를 블루프린트 스타일로 만들어줘."

예시는 요청 방법을 보여주며 특정 결과를 보장하지 않습니다.

사용 환경과 제한

포함된 미리보기에는 적합한 환경과 Node.js 20.19 이상이 필요합니다. 결과는 런타임, 의존성과 프로젝트 접근 권한에 따라 달라집니다. 실제 브라우저를 조작하는 자동화가 아니라 연출된 UI 일러스트입니다. 예제의 제품명과 아트워크는 각 소유자의 것이므로 사용 전 별도 조건을 확인하세요.

패키지의 실제 앱 아이콘과 브랜드 SVG는 중립적인 대체 이미지로 교체되어 있습니다. 필요한 경우 사용 권한을 확보한 자산을 직접 제공하세요.