키보드 없이 손끝으로 타닥! 웹캠 AI 타이핑 게임 웹앱
오늘은 제가 최근에 푹 빠져서 개발한 재미있는 AI 프로젝트, ‘손끝으로 타닥! AI 타이핑 배틀’을 소개해 드리려고 합니다. 이 프로젝트는 별도의 장비 없이 웹캠 하나만으로 두 사람이 손가락 움직임을 이용해 타이핑 대결을 펼치는 인터랙티브 게임입니다. AI 기술이 얼마나 직관적이고 재미있게 활용될 수 있는지 보여주는 좋은 예시라 생각합니다.
AI 체험 부스나 교육용 콘텐츠, 또는 친구와 함께 즐길 수 있는 신기한 웹 게임을 찾고 계셨다면, 이 글이 흥미로운 영감을 줄 수 있을 겁니다.
1. 마법의 시작: 내 손이 키보드가 된다면?
이 게임의 핵심은 어떻게 컴퓨터가 키보드 없이 우리의 손 움직임을 이해하고 글자로 변환하는가에 있습니다. 비밀은 바로 구글에서 개발한 강력한 오픈소스 라이브러리, 미디어파이프(MediaPipe)에 있습니다.
실시간 손 추적 (Hand Tracking): 게임이 시작되면 웹캠이 켜지고, 미디어파이프의 Hands 솔루션이 실시간으로 영상 속에서 손을 찾아냅니다. 단순히 손의 위치만 찾는 것이 아니라, 손가락 마디마디를 포함한 21개의 주요 지점(Landmarks)의 3차원 좌표를 정밀하게 추적합니다.
핵심 제스처 인식: 이 좌표 정보를 이용해 두 가지 핵심 제스처를 인식하도록 만들었습니다.
- 호버 (Hover): 검지 손가락 끝이 화면의 가상 키보드 위로 올라가면, 해당 키를 강조 표시하여 사용자가 어떤 키를 선택하고 있는지 알려줍니다.
- 클릭 (Click): 검지 손가락 끝과 중지 손가락 끝의 거리가 특정 값 이하로 가까워지면, 즉 두 손가락을 살짝 집는 듯한 동작을 하면 ‘클릭’으로 인식합니다. 이 순간, 호버링된 키가 실제로 입력됩니다.
이 간단한 두 가지 제스처의 조합만으로 실제 키보드처럼 타이핑하는 경험을 만들어낼 수 있습니다.
2. 웹으로 구현하기: 주요 기능 들여다보기
이 프로젝트는 더 많은 사람이 별도의 설치 없이 쉽게 체험할 수 있도록 모든 기능을 단 하나의 HTML 파일에 담았습니다.
(1) 모든 것을 그리는 캔버스(Canvas)
이 게임의 화면은 단순한 웹페이지가 아니라, 모든 그래픽 요소를 실시간으로 그려내는 거대한 도화지, 즉 <canvas>입니다. 매 순간(프레임)마다 웹캠 영상 위에 반투명 레이어, 목표 단어, 가상 키보드, 플레이어 정보 등 모든 UI 요소를 새로 그려냅니다. 이 모든 과정이 1초에 수십 번씩 반복되기에 우리는 부드러운 실시간 게임 화면을 볼 수 있습니다.
(2) 두 명의 플레이어 구분하기
2인용 게임의 핵심은 두 개의 손을 각각 Player 1과 Player 2로 정확하게 구분하는 것입니다. 이는 아주 간단한 원리로 해결했습니다. 웹캠이 인식하는 화면의 정중앙을 기준으로, 손목이 왼쪽에 나타나면 Player 2, 오른쪽에 나타나면 Player 1로 지정합니다. 이렇게 하면 사용자가 화면 앞에서 자리를 잡는 순간 자연스럽게 각자의 플레이어 역할이 정해지고, 게임 내내 역할이 바뀌는 혼란이 발생하지 않습니다.
(3) 다채로운 게임 경험 만들기
매번 똑같은 단어만 입력하면 지루하겠죠? 그래서 50개의 다양한 단어로 구성된 단어 목록을 만들었습니다. 게임이 새로 시작될 때마다 이 목록에서 무작위로 목표 단어가 선택되어 제시됩니다. 이 목록에는 스페이스바를 사용해야 하는 두 단어 조합도 포함되어 있어, 게임에 예측 불가능한 재미를 더합니다. 또한, 한 플레이어가 먼저 2승을 달성하면 바로 최종 승자가 되는 ‘3판 2선승제’ 규칙을 적용하여 게임을 더욱 빠르고 긴장감 넘치게 만들었습니다.
3. 누구나 즐기는 AI를 꿈꾸며
‘손끝으로 타닥! AI 타이핑 배틀’은 복잡한 AI 기술을 어떻게 하면 쉽고 재미있는 경험으로 바꿀 수 있을까 하는 고민에서 시작된 프로젝트입니다. 처음에는 간단한 아이디어였지만, 디자인을 다듬고 사용자 피드백을 반영하며 점차 완성도를 높여가는 과정 자체가 무척 즐거웠습니다.
이 프로젝트가 AI 기술에 대한 막연한 두려움을 없애고, ‘AI가 우리 삶을 이렇게 즐겁게 만들 수도 있구나!’하는 긍정적인 인식을 심어주는 작은 계기가 되었으면 합니다. 여러분도 이 게임을 직접 해보시거나, 여러분만의 상상력이 담긴 새로운 인터랙션을 만들어보는 것은 어떨까요?