[나만무] 2차 발표 후기

후기

2023-07-27

 

나만무 2차 발표를 마쳤다. 이번에 준비한 것은 저번주와 마찬가지로 "웹 기반 실시간 모션 인식 게임"이라는 틀 속에서 "테트리스"를 붙인 것이다. "뿌요뿌요 테트리스"처럼 테트리스로 1대1 경쟁하지만, 그 조작법이 "Hand Detection"이다.

 

개발 환경

FE: React.js + Typescript + react-webcam + mediapipe(모션 인식 라이브러리)

BE: Node.js(18버전) + express.js + mediasoup(Web RTC 라이브러리)

AWS: EC2

 

모션 인식

오른손을 왼쪽으로 넘기면 블록이 왼쪽으로 1칸 이동하고, 왼손을 오른쪽으로 넘기면 블록이 오른쪽으로 1칸 이동한다. 한손을 회전시키면 블록이 1번 회전하고, 아래쪽으로 내리면 블록이 내려가는 속도가 빨라진다.

 

react-webcam 라이브러리로 노트북 웹캠을 가져와서 mediapipe 라이브러리로 사용자의 손을 인식하고 그린다. Hand Detection까지는 속도가 상당히 빠르다. 그러나 여기에 게임을 붙여서 진행하는 순간, 상태 관리나 렌더링 문제가 커지면서 속도가 조금 느려지고 클라이언트 부하도 상당히 커진다. CSR 방식의 React.js로 개발하다보니 클라이언트에서 모션인식과 테트리스 + WebRTC로 영상 송수신을 처리해야 한다. 솔로모드로 테트리스를 진행할 때는 모션 반응속도와 게임 진행이 무리가 없었다. 그러나 1대1 대전 모드만 해도 반응 속도가 눈에 띄게 느려진다. 특히 2차 발표 피드백 중, "손 움직이는게 게임에 반영된건지 잘 모르겠다."고 하셨다.

 

구현 중 어려웠던 점

 

처음 사용하는 리액트를 가지고 MVP를 빠르게 개발하는 것부터 좀 어려웠던 것 같다. 훅이나 Promise, await, async 등의 개념들부터 공부하면서 차근차근 적용했다. 특히 훅 부분이 까다로웠는데, useEffect와 useMemo, useRef, useReducer 각각의 개념을 이해하는 것도 헷갈렸다. 촉박한 시간 내에 새로운 기술을 배우는 것을 너무 만만하게 봤다. 그래도 짧은 시간 내에 어떻게든 써보면서 리액트 사용법을 익혔다. 나중에라도 이 경험이 도움이 되겠지.

 

 

발표 피드백

 

"게임으로서 확장성이 없는 것 같다."는 평가를 받았다. 그냥 모션 인식해서 테트리스하는 것 뿐인 것 같다. 재미가 없다기보다는 그냥 테트리스라는 느낌. 의장님께서는 "어떤식으로 확장할 수 있을지 잘 모르겠다. 게임적 재미를 더 보여주면 좋겠다."고 말씀해주셨다.

 

이번 일주일을 웹 UI 만들고 통신을 구현하는 것만으로 다 써버려서 게임적인 요소를 추가하는 것은 하지도 못했다. 정말 단순하게 일대일 모션인식 테트리스만을 구현한 것이 사실이다. 최종 발표까지 남은 2주 동안, 게임 기획을 어떻게 할지, 엎을지 그대로 갈지, 어떤 게임이 재밌을지, 팀원들과 더 고민해봐야 할 듯 하다.

 

발표장표

상대방 영상을 제대로 가져오지 못해 엉성한 모습이다..

로그인 서버는 구현하지 못하고 구상만 해놓았다.