키오스크 체험

실감관상

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

프로젝트 소개

CO-SHOW 실감미디어 부스를 위해 수정구 터치와 얼굴 스캔을 거쳐 부위별 풀이를 확인하는 키오스크 콘텐츠를 제작하였습니다.

CO-SHOW 실감미디어 부스의 가로형 키오스크를 위한 참여형 콘텐츠 <실감관상>을 제작하였습니다. 화면 속 수정구를 문지르고 카메라로 얼굴을 읽은 뒤, 부위별 풀이를 확인하는 세 단계로 구성했습니다.

터치할 때 수정구의 밝기와 크기가 달라져 입력이 전달되었음을 보여줍니다. 얼굴의 비율은 브라우저 안에서 계산하며 카메라 영상은 저장하지 않습니다.

결과 화면에 풀이와 QR을 함께 배치하여 휴대폰에서도 내용을 확인할 수 있도록 하였습니다.

얼굴 스캔에는 카메라 사용 허용이 필요합니다.

02 / PROCESS

수정구 터치와 얼굴 스캔, 관상 결과 확인의 세 단계로 화면을 구성하였습니다. 얼굴 비율은 브라우저 안에서 계산하고 카메라 영상을 저장하지 않는 구조를 적용하였습니다.

버튼을 누르면 밝기와 크기가 변하도록 하여 터치 입력에 대한 반응을 전달하였습니다. 화면 왼쪽 위에는 운영자 화면으로 진입할 수 있는 영역을 구성하였습니다.

03 / MAKING

43인치 가로 화면에서 수정구를 문지르는 행동, 얼굴 스캔, 부위별 풀이와 QR 결과로 이어지도록 구성하였습니다.

MediaPipe로 얼굴 특징을 읽고 측정값을 단계로 변환하여 대표상과 부위별 풀이에 연결합니다. 얼굴 데이터는 브라우저 안에서 처리하고 결과 코드로 휴대폰 결과 화면을 구성합니다. 카메라를 끈 경우 무작위 결과를 사용하는 분기를 두었습니다.

04 / GALLERY