손동작 인식을 통한 어린이 영어교육 화상 웹게임 플랫폼입니다.
- 프로젝트 이름 :손동작 인식을 통한 어린이 영어교육 웹 플랫폼
- 참여 공모전 : 2023 Microsoft Imagine Cup Competition
- 개발 배경 : 성인 뿐만 아니라 글을 읽고 쓸 줄 모르는 어린이도 많아 문맹 문제가 심각하다는 사실을 알게 되었습니다. 하루종일 휴대폰을 하는 아이들에게 어떻게 하면 흥미를 가지며 영어공부를 할 수 있을지 고민하다 손동작을 인식해 영어공부를 할 수 있는 프로젝트를 만들고자 하였습니다.
- 배포 주소 : https://thankful-field-06f913500.2.azurestaticapps.net/
- 개발 언어 : JavaScript, Java
- 프론트 : React, Tesseract, Mediapipe, WebCam, Canvas, OpenCV
- 백엔드 : Spring Boot, Spring STOMP, WebRTC, Spring JPA, Azure 가상머신, Azure 웹 앱, Azure SQL DB
- 2023.01.04 ~ 2023.01.28
- 홍영환 - 백엔드 (Spring Boot), Azure API 서버 구축 및 배포, WebRTC, Spring STOMP, STUN TURN 서버 구축 프론트 (React), WebSocket 연결, Canvas그림그리기, Tesseract 문자 변환, 1 vs 1 화상게임 구현, 손모양 인식 모델 적용, WORD-TRACING 구현
- 박민지 - 프론트 (React) , 게임 타이머, DECORATIVE GAME 전체 구현
- 김영림 - 프론트 (React) WORD-TRACING 구현, 메인 배경 및 게임 배경, 이미지 캡쳐
- Mediapipe에서 제공하는 손 동작 인식 모델을 사용하였습니다(versoin 0.3.1629416409)
- 손가락의 지점 3차원 좌표를 벡터계산을 통해서 다양한 손모양 수신호를 만들었습니다.
 |
 |
|---|---|
| 실제 손모양 인식 | 손동작 모델 |
- React Canvas를 이용하여 사용자의 웹캠화면에 그림을 그릴 수 있도록 하였습니다.
- 손 모양에 따라서 그리기, 지우기, 초기화 등 그림그리기 기본 기능을 이용할 수 있도록 하였습니다.
 |
 |
|---|---|
| 손모양에 따른 그리기 기능 | 벡터 계산 |
 |
 |
|---|---|
| 손 모양에 따른 기능 | 각 지점 벡터 |
- Canvas에 cat이란 단어를쓰면 Tesseract를 이용하여 cat을 문자로 인식할 수 있도록 하였습니다.
- 전처리(기울기, 매끄럽게 다듬기) 등을 통해서 인식률을 높였습니다.
Game Mode 종류
- 단어 따라쓰기 ( WORD TRACING )
- 나의 화면 꾸미기 ( DECORATING )
Game Player
- 나홀로 게임
- 1 vs 1 매치 게임
- 랜덤으로 제시된 단어를 따라서 작성합니다.
- "OK" 손동작(엄지 척)을 취하면 정답이 맞는지 확인해 줍니다.
- 정답을 맞추면 Score가 100점씩 증가합니다.
- 게임방법
 |
 |
|---|---|
| 게임 방법1 | 게임 방법2 |
 |
 |
 |
|---|---|---|
| 게임 방법3 | 게임 방법4 | 게임 방법5 |
- 예시
 |
 |
 |
|---|---|---|
| 단어 작성 | 아이콘 생성 | 아이콘 이동 |
- 원하는 단어를 작성합니다.
- 스페이스바( Space bar )를 누르면 아이콘 생성 API에 요청해 해당 단어의 아이콘이 랜덤으로 화면에 나옵니다.
- 마우스 커서를 이용해 아이콘을 움직이며 웹화면을 꾸밀 수 있습니다.
- 아이콘을 배치하고 화면을 이미지로 다운로드할 수 있습니다.
 |
 |
|---|---|
| 방 생성 | 상대방 입장 대기 |
 |
 |
|---|---|
| 대결 시작 | 대결 중 |
< 단어 따라쓰기 ( WORD TRACING ) >
- 플레이 하고자 하는 게임의 모드를 선택 후 방을 생성합니다.
- 상대방이 입장을 하게 되면 게임이 시작하게 됩니다.
- 제시된 단어를 작성하여 OK모션( 엄지 척 )으로 제출합니다.
- 제한시간동안 Score가 높은 사람이 승리합니다.
< 나의 화면 꾸미기 ( DECORATING ) >
- 입장 후 각자 화면에 원하는 아이콘의 단어를 작성합니다.
- 스페이스바를 눌러 문자를 아이콘으로 전환합니다.
- 원하는 위치에 아이콘을 위치시킨 후 프로필을 꾸밉니다.
-
2인용 게임에서 나의 화면 꾸미기 ( DECORATING )로 플레이하면 한 화면에 두 사람이 서로 글씨를 작성해 프로필을 같이 꾸미는 기능 구현까지 성공했었다. 하지만 상대방이 그린 점들의 좌표를 실시간으로 계속 공유하고 캔버스에 동시에 그려주는 기능에 있어서 좌표가 조금 부정확하게 그려지는 부분이 있어 제출전에 다시 개인의 프로필을 꾸미는 방법으로 진행했었다. 개발시간이 더 있었다면 [공유 프로필 꾸미기] 기능도 추가해보고 싶다.
-
로컬에서 WebRTC는 따로 STUN TURN서버가 필요없지만 배포를하고 외부에서 서로 1대1 대결을 하려면 서버가 꼭 필요했었다. 인터넷에 찾아보니 구글이나 다른 곳에서 무료로 지원해주는 STUN/TURN 서버들이 이전에는 있었지만 현재는 전부 막혔다는 사실을 접했다. 그래서 부랴부랴 외국 유튜버의 기술블로그를 보며 Azure 서버를 하나 더 생성해 마감시간안에 완성할 수 있었다.
|
|
|---|---|
| 메인 | Get Started |
 |
 |
|---|---|
| 로그인 | 회원가입 |
 |
 |
|---|---|
| 입장 화면 | 따라쓰기 |
 |
 |
|---|---|
| 엄지로 정답확인 | 오답 화면 |
|
|---|
| 입장 화면 |
|
|
|
|---|---|---|
| 단어 작성 | 아이콘 생성 | 아이콘 이동 |