[작업기] Hand cursor - 웹캠으로 제스처 인터랙션 인식하기

Hand Cursor - 웹캠으로 제스처 인터랙션 만들기

 

머신러닝이 인터랙션에 어떻게 결합될 수 있을까?

제스처 인터랙션은 새로울 것 하나 없는 인터랙션이다. 개념 자체는 SF영화에서 자주 나오기도 하고 오래 전부터 있었고, 실제로 사람의 동작이나 제스처를 인식하는 디바이스로 게임이나 공간 인터랙션에 활용이 되어왔다. Microsoft의 Kinect나 Leapmotion이 그 예시인데, 적외선 센서를 통해서 인물과의 거리, 인물의 신체의 형태를 잡아낸다. 

 

 

그런데 최근에 머신 러닝으로 영상을 분석하고 물체를 인식하는 기술이 발전하면서, 노트북의 웹캠 하나로도 이런게 가능해졌다. 사실 머신러닝을 데이터를 분류하거나 예측하는 쪽의 사례만 생각을 하다가 영상을 분석해서 그 안의 제스처나 상황을 인식할 수 있게 만든다고 생각하면 게임, 인터랙션 쪽으로도 활용 사례가 무궁무진할 듯 하다. 기존에 별도의 Kinect나 Leap Motion같은 적외선 센서가 달린 장비를 통해서만 가능했던 이런 인터랙션을, 디바이스에 카메라만 달려있다면 만들어낼 수 있게 되었다. 

 

카메라를 활용해서 디바이스를 한 단계 더 스마트하게

그렇다면 카메라를 켜놓는 상황의 인터랙션에 마우스나 키보드 뿐만 아니라 이런 제스처 인식을 적용할 수 있지 않을까? 하는 생각에서 간단한 인터랙션을 몇 가지 만들어보려고 했다. 키보드나 마우스는 스크린 안에서는 사용자가 자유롭게 움직이고 행동할 수 있게 만들어주지만, 결국 사용자의 손이 그 키보드와 마우스에 묶여있어야 한다는 말이기도 하다. 제스처를 활성화시킬 수 있다면 더 자연스럽고 편안한 인터랙션이 가능하지 않을까? (거북목에서 벗어날 수 있지 않을까...!)

그래서 생각했던 몇 가지 상황은 아래와 같다. 특히 영상통화 커뮤니케이션 상황에서의 인터랙션에 관심이 갔는데 자연스럽게 카메라를 켜놓고 있는 상황이기도 하고, 별 거 아닌 마우스 컨트롤이나 키보드 컨트롤도 자연스러운 비언어 행동을 제한하기 때문에 말하는 사람에게도 듣는 사람에게도 소통의 질을 떨어뜨리는 큰 요소라고 생각했다. 뿐만 아니라 큰 화면을 스트리밍 용도나 회의 용도로 사용할 때 결국 리모콘이나 마우스로 컨트롤해야하는 상황이 꽤 비효율적이라고 생각해왔는데, TV에 카메라가 달려있고 이런 인터랙션으로 컨트롤할 수 있게 된다면 원거리에서도 별도 디바이스 없이 바로 컨트롤하거나 여러 명이서 컨트롤을 할 수 있게 된다. 

 

생각해봤던 간단한 활용 사례들

 

 

머신 러닝을 새로 배워서 만들어야하나?

머신러닝 라이브러리 살펴보려고 Python이나 Pytorch를 따로 배워야 하나 하던 찰나에, 몸 전체의 포즈를 인식하는 라이브러리부터, 얼굴이나 손으로 세부화해서 인식하는 라이브러리가 잘 되어있고, 내가 그나마 아는 js로도 나와있길래 그 중에서 'Handpose' https://github.com/tensorflow/tfjs-models/tree/master/handpose 라는 라이브러리를 가져와서 몇 가지 인터랙션을 만들어봤다. 현재 작동 방식은 제스처 자체를 인식한다기 보다는, 엄지와 검지 사이를 포인터로 생각하고 기존 마우스처럼 hover 등의 인터랙션에 반응하게 버튼이나 요소들을 만들어두고, 엄지와 검지 사이의 거리가 아주 가까워졌을 때를 click으로 인식하게 되어있다. 원래라면 이런 동작 자체를 학습시켜서 인식하도록 하는게 가장 정확도가 높겠지만 기존의 라이브러리를 가져와서 하는거다보니 그 정도까지 살펴볼 엄두가 나지 않았다.

 

+ 표시된 부분이 기존 마우스의 커서라고 생각하면 된다. 

 

카메라 오버레이를 켜보면 어떤 식으로 손이 인식되고 있는지 볼 수 있다. 

 

 

페이지 넘기기. 검지와 엄지로 하는 클릭과 중지와 엄지로 하는 클릭 두 가지가 있다. 

Hover / Click

 

 

딱히 실용적이진 않지만 재미있는 인터랙션도 만들어보고 싶었다. 

 

 

 

https://vimeo.com/509466063

 

사실 기존에 만드려고 했던 zoom을 위한 인터랙션은 잠깐 보류상태다. 이 때 만큼 개인시간이 없어서가 가장 큰 이유이지만, 나중에라도 다시 좀 더 발전시켜보고 싶은 프로젝트다. 이런 인터랙션을 적용할 수 있는 아이디어가 송송 솟지만 그저 만들 시간과 손이 없다... 좀 더 자세한 내용이나 소스코드 관련해서 궁금하신 분들은 댓글이나 이메일 주세요!

 

실제로 써볼 수 있는 링크는 아래에,

https://handgesture-react.netlify.app/

React App

 

세부 인터랙션에 대한 내용은 아래 링크에서 (영어로) 더 자세히 설명되어있습니다.

https://www.seungmee-lee.com/#/./expmnt/hand

seungmee-lee-archive