MediaPipe 활용 제스처 인식 기능 기술 검증
1. 기술 검증 개요
1.1. MediaPipe란 무엇인가
MediaPipe는 Google에서 제공하는 실시간 멀티미디어 인식 라이브러리로, 웹·모바일·데스크톱 환경에서 영상, 음성, 제스처와 같은 입력을 빠르고 안정적으로 분석할 수 있도록 설계된 도구입니다.
특히 비전(Vision) 영역에서는 다음과 같은 특징을 가집니다.
- 웹캠 영상에서 사람의 손, 얼굴, 신체 포즈를 실시간으로 추적
- 머신러닝 모델이 사전 학습(pre-trained) 되어 있어 별도의 학습 과정 없이 바로 사용 가능
- JavaScript(Web), Android, iOS 등 다양한 플랫폼을 동일한 개념으로 지원
이러한 특성 덕분에 MediaPipe는 웹 환경에서 실시간 사용자 동작을 인식해야 하는 서비스에 자주 사용되는 기술 스택입니다.
1.2. 왜 MediaPipe를 제스처 인식에 사용하려 했는가
Plum에서 제스처 인식은 단순한 데모 기능이 아니라, 발표자–청중 간의 상호작용을 자연스럽게 유도하는 핵심 인터페이스였습니다.
따라서 제스처 인식 기술에는 다음과 같은 요구사항이 있었습니다.
- 웹캠만으로 실시간 손동작 인식이 가능할 것
- 특정 환경이나 고사양 장비 없이 일반적인 사용자 PC에서도 안정적으로 동작할 것
- “OK 사인”, “숫자 제스처”처럼 서비스 맥락에 맞는 커스텀 제스처를 정의할 수 있을 것
- 오인식을 줄이기 위한 UX 보정 로직을 구현할 수 있을 것
MediaPipe의 GestureRecognizer는 아래와 같은 사항을 가져 위 요구사항을 검증하기에 가장 적합한 후보였습니다.
- 손의 21개 랜드마크 좌표를 정밀하게 제공
- 기본적인 제스처 인식을 즉시 활용 가능
- 이 좌표 데이터를 기반으로 추가 로직을 직접 작성할 수 있음
1.3. 기술 검증의 목표
본 기술 검증의 핵심 목표는, MediaPipe를 활용해 실시간 손동작 인식 기능을 실제 서비스 수준으로 구현할 수 있는지 사전에 확인하는 것이었습니다. 구체적으로는 다음을 검증하고자 했습니다.
검증 항목
- 웹캠 환경에서 손의 위치와 형태를 안정적으로 추적할 수 있는지
- MediaPipe 기본 제스처 외에 커스텀 제스처 인식이 가능한지
- 일정 시간 유지 등 오인식 방지 메커니즘을 구현할 수 있는지
- 실시간 처리 시 CPU 사용량이 과도하지 않은지
1.4. 결론 요약
기술 검증 결과, MediaPipe는 웹 환경에서 실시간 제스처 인식을 빠르게 검증하고 서비스 수준까지 확장하기에 적합한 도구임을 확인했습니다.
특히, MediaPipe의 기본 제스처 인식 기능과 우리가 직접 구현한 규칙 기반 커스텀 로직을 결합함으로써, 머신러닝 모델을 추가로 학습시키지 않고도 대부분의 목표 제스처를 안정적으로 인식할 수 있었습니다.
2. 제스처 인식 기능 구현 접근 방식
제스처 인식 기능은 단일 기술에 의존하지 않고, 두 가지 접근 방식을 조합하는 형태로 설계했습니다.
2.1. MediaPipe 기본 제스처 인식 활용
먼저, MediaPipe가 기본으로 제공하는 GestureRecognizer를 활용했습니다.
동작 방식
- 웹캠 영상에서 손을 감지
- 각 손마다 21개의 주요 랜드마크(뼈마디) 를 추출
- 이 좌표 정보를 기반으로, 사전 학습된 모델이 제스처를 분류
기본 제공 제스처 예시
Thumb_Up(엄지 올리기)Thumb_Down(엄지 내리기)Open_Palm(손바닥 펴기)
이 방식은 즉시 사용 가능하고 안정적이라는 장점이 있었지만, 우리 서비스에 필요한 세부 제스처를 모두 충족하지는 못했습니다.
2.2. 규칙 기반 커스텀 제스처 분류기 구현
MediaPipe 기본 모델의 한계를 보완하기 위해, 우리는 랜드마크 좌표를 직접 분석하는 규칙 기반 분류기를 추가로 구현했습니다.
구현 아이디어
- MediaPipe가 제공하는 21개 랜드마크 좌표를 그대로 활용
- 손가락 간 거리, 펴짐 여부와 같은 기하학적 조건을 코드로 정의
- 조건을 만족하면 특정 제스처로 판단
예시: OK 사인
- 엄지 끝(4번)과 검지 끝(8번)의 거리가 매우 가깝고
- 나머지 세 손가락이 모두 펴져 있을 경우 →
ok_sign
장점
- 별도의 머신러닝 학습 과정이 필요 없음
- 새로운 제스처를 빠르게 추가 · 수정 가능
- 서비스 맥락에 맞는 제스처 정의가 용이
3. 안정적인 인식을 위한 UX · 성능 보정 전략
실제 사용 환경에서는 “인식되었는가”보다 “의도한 제스처만 인식하는가”가 더 중요하다고 생각하였습니다. 이를 위해 두 가지 메커니즘을 도입했습니다.
3.1. 2초 유지 기반 제스처 확정 로직
- 순간적인 동작이나 전환 과정에서 발생하는 오인식 문제를 방지
- 특정 제스처가 2초 이상 유지되었을 때만 최종 인식
- 진행 중에는 아이콘과 프로그레스 바로 사용자에게 상태를 시각적으로 전달
→ 사용자는 “지금 인식 중이다”를 직관적으로 이해할 수 있음
3.2. 성능 최적화 (Throttling)
- 제스처 인식 연산은 300ms에 한 번만 수행
- 랜드마크 렌더링과 UI 업데이트는 매 프레임 처리
→ 화면은 부드럽게 유지하면서 CPU 부하는 효과적으로 감소
4. 기술 검증 결과 요약
본 검증을 통해, 웹 기반 실시간 제스처 인식이 성능·확장성·UX 측면에서 모두 실용적인 수준임을 확인했습니다.
- MediaPipe 기반 실시간 제스처 인식은 웹 환경에서도 충분히 실용적
- 기본 모델 + 규칙 기반 로직 조합이 특히 효과적
- 단, 손 이외의 신체 정보(팔, 전신)가 필요한 제스처는 추가 도구가 필요
4.1. 전체 구조
웹캠 입력
↓
MediaPipe GestureRecognizer
↓
(1) 기본 제스처 결과
(2) 손 랜드마크 좌표 (21 points)
↓
규칙 기반 커스텀 분류기
↓
UX 보정 로직 (2초 유지, 필터링)
↓
최종 제스처 확정4.2. 기술 검증
plum-gesture-test.vercel.apphttps://plum-gesture-test.vercel.app/github.comhttps://github.com/boostcampwm2025/web12-plum/tree/mediapipe-test4.3. 최종 결론
MediaPipe는 웹 기반 실시간 제스처 인식을 구현하기에 매우 적합한 기술이며, 특히 기본 인식 결과를 규칙 기반 로직으로 확장할 수 있다는 점에서 우리 프로젝트의 인터랙션 요구사항을 충족할 수 있는 충분한 가능성을 확인했습니다.
5. 출처
Comments (0)
댓글을 불러오는 중...