웹캠으로 즐기는 알콩달콩 가위바위보 제작

🎮 웹캠으로 즐기는 알콩달콩 가위바위보 제작

친구나 연인과 함께 컴퓨터 앞에서 바로 즐길 수 있는 특별한 프로젝트를 소개해 드리려고 합니다. 바로 웹캠을 이용해 손 모양을 인식하여 플레이하는 2인용 가위바위보 게임입니다!

이 프로젝트는 단순히 버튼을 클릭하는 방식이 아니라, 실제로 손을 내밀어 가위, 바위, 보를 내면 AI가 이를 인식하여 승패를 가려주는 인터랙티브한 웹 애플리케이션입니다. 귀엽고 사랑스러운 디자인은 덤이지요. 😊

✨ 주요 기능 및 특징

• 🖐️ 실시간 2인 손 인식: 두 명의 플레이어가 동시에 내민 손 모양을 웹캠으로 실시간 인식합니다.
• 🤖 MediaPipe.js 기반 제스처 인식: Google의 강력한 MediaPipe Hands 솔루션을 웹에서 구현하여 별도의 프로그램 설치 없이 브라우저만으로 손의 관절을 추적하고 모양을 판별합니다.
• 💖 귀엽고 직관적인 UI/UX: 파스텔톤 색감과 ‘Hi Melody’ 폰트, 통통 튀는 애니메이션 효과로 게임의 재미를 더했습니다.
• 룰: 5판 3선승제: 총 5라운드까지 진행되며, 3점을 먼저 획득하는 플레이어가 최종 승리합니다.
• 🎉 화려한 승리 축하: 최종 승자가 결정되면 화면에 팡파레와 함께 꽃가루(Confetti)가 흩날리는 축하 애니메이션이 나타납니다.

🛠️ 어떻게 만들었을까? (How It Works)

이 프로젝트의 핵심 기술과 구현 로직을 간단히 살펴보겠습니다.

1. MediaPipe Hands로 손 추적하기

이 게임의 심장은 단연 MediaPipe Hands입니다. 웹캠에서 들어오는 비디오 프레임을 실시간으로 분석하여 최대 2개의 손을 감지하고, 각 손의 21개 랜드마크(관절 위치) 좌표를 반환해 줍니다. 이 랜드마크 데이터가 바로 제스처를 인식하는 기본 재료가 됩니다.

카메라 설정부터 MediaPipe 초기화, 그리고 매 프레임마다 손을 감지하고 결과를 canvas에 그려주는 과정은 MediaPipe에서 제공하는 유틸리티를 활용하여 비교적 간단하게 구현할 수 있었습니다.

2. ‘가위’, ‘바위’, ‘보’는 어떻게 알아챌까?

가장 흥미로운 부분은 21개의 랜드마크 좌표만으로 ‘가위’, ‘바위’, ‘보’를 구분하는 로직입니다. 저는 다음과 같은 간단한 기하학적 원리를 사용했습니다.

손가락이 펴졌는지 어떻게 알까? 손가락 관절 세 개(손바닥 쪽 관절, 중간 관절, 끝 관절)가 이루는 각도를 계산합니다. 이 각도가 거의 180도에 가깝게 펴져 있다면 ‘손가락이 펴진 상태’라고 판단할 수 있습니다. 벡터 내적(dot product)을 이용하면 두 벡터 사이의 각도를 쉽게 구할 수 있죠.

각 제스처 판별 로직:

• 보(🖐️): 엄지를 제외한 4개의 손가락이 모두 펴져 있으면 ‘보’로 인식합니다.
• 가위(✌️): 검지와 중지만 펴져 있고, 나머지 손가락은 접혀 있으면 ‘가위’로 인식합니다.
• 바위(✊): 모든 손가락이 접혀 있으면 ‘바위’로 인식합니다.

이러한 규칙 기반의 접근법은 딥러닝 모델을 직접 훈련시키지 않고도 빠르고 효율적으로 제스처를 인식할 수 있게 해줍니다.

3. 게임의 흐름을 제어하는 ‘상태 머신(State Machine)’

이 게임은 ‘대기 → 카운트다운 → 인식 → 판정 → 라운드 종료’와 같이 명확한 흐름을 가집니다. 이러한 흐름을 관리하기 위해 gameState라는 변수를 두어 현재 게임의 상태를 관리하는 간단한 상태 머신 패턴을 적용했습니다.

예를 들어, gameState가 COUNTDOWN일 때는 화면에 카운트다운 숫자를 표시하고, JUDGE일 때는 두 플레이어의 제스처를 비교하여 승패를 판정합니다. 이 방식을 통해 코드를 훨씬 체계적이고 예측 가능하게 만들 수 있었습니다.

4. 누가 플레이어 1일까?

2인용 게임에서 가장 중요한 것 중 하나는 두 개의 손을 각각 플레이어 1과 2로 안정적으로 할당하는 것입니다. 저는 화면상 손목의 x좌표를 기준으로 이를 해결했습니다.

화면을 반으로 나누어, 오른쪽에 있는 손을 플레이어 1, 왼쪽에 있는 손을 플레이어 2로 지정했습니다. 매 프레임마다 감지된 손들의 x좌표를 기준으로 정렬하여 이 규칙을 일관되게 적용했습니다.

5. 소소하지만 재미를 더하는 UX/UI 디테일

• 미러 모드와 텍스트 플립: 웹캠 화면은 사용자가 거울을 보는 것처럼 느껴지도록 좌우를 반전시켰습니다. 하지만 이 경우 canvas에 텍스트를 그냥 그리면 글씨도 반전되어 보입니다. 이를 해결하기 위해 텍스트를 그리는 순간에만 canvas의 좌표계를 다시 한번 좌우 반전시켜 글씨가 올바르게 보이도록 하는 헬퍼 함수를 만들었습니다.
• CSS 애니메이션: 최종 승리 문구가 통통 튀어 오르는 효과나, 스코어 하트가 채워지는 부드러운 전환, 그리고 하늘에서 쏟아지는 꽃가루 효과는 모두 CSS 애니메이션과 트랜지션을 통해 구현되었습니다. 특히 꽃가루는 JavaScript로 여러 개의 div 요소를 동적으로 생성하고, 각기 다른 애니메이션 지연 시간과 속도를 부여하여 자연스러운 효과를 연출했습니다.

맺으며

이번 프로젝트를 통해 MediaPipe.js의 강력함과 웹 기반 실시간 인터랙션의 재미를 다시 한번 느낄 수 있었습니다. 복잡한 머신러닝 지식 없이도 아이디어만 있다면 누구나 이런 재미있는 웹 서비스를 만들 수 있다는 점이 정말 매력적인 것 같습니다.

여러분도 친구와 함께 이 가위바위보 게임을 즐겨보시고, 더 나아가 여러분만의 제스처 인식 프로젝트에 도전해 보시는 건 어떨까요?

• 🌐 라이브 데모: https://hand-tracking-rps-game.netlify.app/
• PC 화면에 크게 띄워놓고 시켜주세요(모바일X). 코드가 좀 무거워서 로딩시간이 걸릴 수 있습니다. 초등 저학년 대상 체험에 좋으리라 생각합니다.