운영 완료·데모 공개

AJOU ARCADE

야외 대학 축제에서 방문객의 발길을 멈추기 위해, 시선으로 조작하는 아케이드 게임 4종을 3주 만에 만들었습니다.

대학 동아리 박람회에서 방문자의 발걸음을 멈추게 하기 위해 웹캠 시선 추적만으로 플레이할 수 있는 아케이드 게임 4종을 개발했습니다. 체험 후 바로 지원 동선으로 이어지게 만들고 현장 피드백을 즉시 반영했습니다.

링크

설명보다 먼저 발길을 멈추게 하는 체험

여러 부스가 경쟁하는 대학 축제에서는 전단지만으로 IT 동아리의 새로운 방향을 짧은 시간 안에 설명하기 어려웠습니다. 기술을 나열한 전시보다, 지나가던 사람이 멈춰서 직접 체험하고 지원까지 고려하게 만드는 입구가 필요했습니다.

그래서 흔한 클릭 게임 대신, 별도 설치 없이 '시선으로 플레이한다'는 장면을 관심을 끄는 계기(후크)로 삼았습니다.

시선에서 플레이까지

방문객이 화면을 보고 게임을 마친 뒤 지원 폼을 열기까지

초기 구현에서는 얼굴 landmark를 받을 때마다 React state를 갱신해 Canvas 게임 그리기와 UI 렌더링이 충돌하며 프레임 드랍이 발생했습니다.

MediaPipe 좌표는 높은 빈도로 들어오지만 점수·게임 종료·선택 같은 UI 상태는 매 프레임 바꿀 필요가 없습니다. 야외에서는 빛과 얼굴 위치 때문에 작은 흔들림도 더 커졌습니다.

최신 좌표는 ref에 저장하고 requestAnimationFrame 안에서 Canvas를 그렸습니다. React state에는 점수나 확정된 선택처럼 화면 구조가 바뀌는 이벤트만 전달했습니다.

이 입력 처리로 웹 게임 4종을 야외 부스에서 운영했고, 당일 빛 환경에 맞춘 화면 수정도 다시 배포했습니다. 공개 데모에서도 같은 게임을 확인할 수 있습니다.

고빈도 센서 데이터와 화면 구조를 바꾸는 UI 상태는 서로 다른 주기로 갱신해야 했습니다.

레트로 콘셉트의 다크 화면은 실내에서는 잘 보였지만 야외의 강한 햇빛과 반사 아래에서는 안내와 게임 내용이 잘 보이지 않았습니다. 방문자가 바뀔 때마다 시작 상태로 되돌리는 일도 필요했습니다.

박람회가 이미 진행 중이라 카메라 모델이나 게임 전체를 바꿀 시간은 없었습니다. 시선 인식 정확도 문제와 화면을 읽기 어려운 문제도 구분해서 다뤄야 했습니다.

근거 없이 인식 파라미터를 바꾸는 대신 밝은 테마와 짧은 안내, 무조작 자동 초기화와 운영자 초기화를 추가해 당일 다시 배포했습니다.

수정 버전으로 야외 부스 운영을 이어가며 게임 4종을 행사 끝까지 제공했습니다. 변경 전후의 가독성이나 대기 시간은 수치로 측정하지 않았습니다.

실제 사용 환경은 개발 환경과 다를 수 있으므로, 알고리즘뿐 아니라 빛·대기열·운영자 조작까지 배포 전에 검증해야 한다는 기준이 생겼습니다.

게임 4종은 공개 데모에서 확인할 수 있습니다. 직전 학기의 같은 모집 단계와 비교해 지원자는 9명에서 약 150명으로 늘었고, 최종 참여자는 약 50명이었습니다.

이제는 알고리즘 정확도뿐 아니라 현장의 빛·대기 시간·운영자 초기화까지 함께 설계합니다.

지원자 증가에는 모집 대상, 현장 운영, 경품, 홍보 등 다른 요인도 함께 작용했습니다. 게임만의 효과로 볼 수는 없습니다.