터치스크린 체험

실감타로

사용 도구·기술: React / TypeScript / Vite, Zustand, Three.js / React Three Fiber, React Spring / CSS 3D, PWA / qrcode.react
시기: 2026.10–11
분류: 참여형 콘텐츠

프로젝트 소개

CO-SHOW 실감미디어 부스를 위해 손을 올리는 동작부터 카드 선택과 결과 확인으로 이어지는 태블릿 체험 콘텐츠를 제작하였습니다.

CO-SHOW 실감미디어 부스를 위해 손을 얹고 카드를 섞고 고르는 행동으로 이어지는 참여형 콘텐츠 <실감타로>를 제작하였습니다. 손 모양 가이드에 손을 유지하면 게이지가 차오르며 체험이 시작됩니다.

관람객이 질문을 선택하거나 고민을 직접 입력한 뒤 세 장의 카드를 고르고, 과거와 현재, 미래에 대한 풀이를 확인하도록 구성했습니다. 선택한 카드가 공개되는 순서와 움직임을 연결하여 진행 과정을 보여주고, 결과는 QR을 통해 휴대폰에서도 살펴볼 수 있도록 하였습니다.

02 / PROCESS

손 모양 가이드에 1.2초 동안 손바닥을 유지하면 게이지가 차오르도록 구성하였습니다. 손을 일찍 떼면 게이지가 줄어드는 반응을 통해 체험을 시작하는 방식을 안내합니다.

질문 선택과 카드 섞기, 세 장의 카드 선택과 공개가 차례로 이어지도록 구성하였습니다. 준비된 데이터베이스의 풀이를 보여주고 QR을 통해 결과 페이지를 확인할 수 있도록 하였습니다.

03 / MAKING

손바닥을 유지하는 입력에서 시작하여 질문 선택, 덱 섞기, 세 장 선택과 공개, 결과 확인과 QR 저장으로 이어지는 체험을 설계하였습니다. 사전 제작한 풀이 데이터를 사용하고 무조작 시 대기로 복귀하도록 하였습니다.

Zustand로 체험 단계를 관리하고 Three.js 기반 카드 덱과 CSS 3D의 뒤집기를 연결하였습니다. 카드 ID와 질문 종류로 결과를 구성하고 QR을 통해 휴대폰 결과 페이지에서도 같은 내용을 확인하도록 하였습니다.

04 / GALLERY