Skip to content

DEVOCEAN-YOUNG-404/HandTalker

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

handtalker_mockup

DEVOCEAN YOUNG 2기 404의 팀 프로젝트 Repository입니다.

👪 팀원

이름 역할 GitHub
곽수진 팀장, 백엔드 개발
송보경 기획, 백엔드 개발
정승준 프론트엔드 개발
지현빈 인공지능 개발

HandTalker는?

HandTalker는 농인, 비농인 모두를 위한 실시간 수어 통역 서비스를 지향하고 있어요. 또한 이러한 통역 과정을 실시간으로 제공하는 것이 저희 서비스의 핵심이에요.

HandTalker의 서비스 목적

1. 가족 구성원 내 농인 자녀를 위한 소통

보통 농인과 비농인이 의사소통을 한다면 글씨를 적든지, 농인을 위한 구어 등을 사용할 수 있어요. 하지만 이런 의사소통 방법은 한정적이고, 실제로 농인분들은 수어를 사용할 때 가장 편하다고 해요. 이러한 불편함을 해소하고자 나온 아이디어가 HandTalker랍니다.

2. 후천적 농인을 위한 교육 자료로 서비스

선천적으로 농인이 되는 경우가 많지만, 후천적인 원인으로 농인이 되는 분들도 많아요. 후천적 농인 분들이 보다 쉽고 빠르게 수어 습득이 가능하도록 서비스를 제공하는 것이 목표에요.

3. 모국어가 수어인 농인들의 학습 및 생활 보조

보통 선천적으로 농인이신 분들은 수어를 먼저 배우기 때문에 한국어를 아예 모르는 분들도 많다고 해요. 이런 분들을 위해서 학습권을 보장하고 생활을 보조하는 것이 저희 서비스의 목표에요.

HandTalker, 왜 필요할까요?

"텍스트로 소통하면 그만 아닐까요?"

어쩌면 저희 서비스의 존재 의의를 없애버리는 말입니다. 그래서 저희 팀은 실제 농인분들이 실생활에서 어떻게 의사소통을 하시는지 집중해봤어요.

image.png

참고: 청각장애인 고용 차별 및 고용개선방안 실태조사(수어환경을 중심으로)

첫 번째는 직장과 교육 현장에서의 사례에요. 모든 업무 처리를 수어로 하고, 교육 현장에서도 한국어를 모르는 학생이 있다고 해요. 또한 이들은 한국어를 사용하는 것이 쉽지 않고, 수어를 사용하는 것이 더 좋다고 해요.

image.png

참고: 2017년 한국수어 사용 실태 조사 연구

이 자료는 농인 분들이 1순위로 의사소통 방법을 조사한 자료입니다. 69.3%로 수어가 가장 많은 비율을 차지한다는 것을 알 수 있어요.

image.png

참고: 청각장애인 고용 차별 및 고용개선방안 실태조사(수어환경을 중심으로)

현재 공공기관에서는 농인 분들을 위한 여러 서비스를 제공하고 있어요. 그 중 수어 통역 서비스를 가장 많이 사용한다고 해요.

하지만 이 서비스를 이용하는 것은 현실적으로는 힘들다고 해요. 농인의 수에 비해 수어 통역사의 수가 턱없이 부족하고, 신청 과정이 번거롭기 때문이에요.

그래서 저희 서비스는 이런 불편함을 해소하는 역할도 할 수 있어요.

HandTalker, 협업 툴과 같이 쓰기

코로나19가 길어지면서 비대면 업무 환경이 개선되었고 동시에 협업 툴 시장 또한 대폭 성장했어요. 그렇기에 저희 팀은 소통의 범위를 더욱 넓힐 수 있도록 HandTalker를 협업 툴과 같이 사용할 수 있는 아이디어를 냈답니다.

image.png

저희는 Discord라는 메신저를 채택했어요. 번역한 결과를 디스코드로 전송하면 디스코드 개발자 API를 통해서 HandTalker와 연동해 둔 서버의 설정된 채널로 메시지를 보내도록 개발했어요.

번역기 특성상 오번역 되는 경우가 빈번하기 때문에 메시지를 주고 받는 서로가 인지할 수 있도록 HandTalker 이용자가 보낸 메시지라는 임베드 또한 추가했답니다.

HandTalker와 기술

프로젝트 구조

image.png

저희 서비스는 React로 프론트엔드를 구성하고, 백엔드는 Spring으로 구성했어요. AI 서버는 Python과 OpenCV, MediaPipe 등 여러 라이브러리를 활용했답니다.

유저가 서비스에 접속해 웹캠으로 비디오를 전송하면 WebSocket을 통해 서버와의 실시간 통신을 하게 되고, AI 서버에서 도출해낸 결과값을 유저에게 돌려주는 방식으로 프로젝트를 구성했어요.

인공지능, 어떻게 사용했을까요?

image.png 저희 팀은 Google의 MediaPipe라는 비전 AI 오픈 소스 프레임워크를 사용했어요. 실시간 비주얼 컴퓨팅 처리 및 해석에 매우 용이한 프레임워크에요.

이 프레임워크를 활용해서 손의 21개의 관절좌표(랜드마크)를 추출했어요.

지문자 인식

수어 인식의 첫 단계로 저희는 지문자 인식을 채택했어요. 지문자는 자음과 모음, 그리고 숫자 등을 손가락의 모양으로 나타내는 표현 방법이에요. 지문자를 키보드처럼 사용하기 위해, 26개의 알파벳 지문자, 10개의 지수어, 스페이스바, 백스페이스 등 총 38개의 제스쳐를 각각 20번씩 학습했어요.

학습 메서드는 각각의 관절좌표에서 이웃한 관절좌표 값과의 차이를 계산 한 벡터를 구한 후 벡터 간 각도를 계산했어요. 그 학습된 관절좌표와 라벨링한 데이터를 바탕으로 K nearest neighbors(KNN) 알고리즘으로 학습했어요. KNN 알고리즘은 지도학습 중 하나로, 주어진 데이터 포인트와 가장 가까운 이웃들과의 거리를 기반으로 예측을 수행해요.

이웃의 수, 단순하고 직관적이고, 데이터의 차원의 수가 적은 우리의 데이터에 적합하다 판단했어요. K값은 3으로 선정 후 학습을 진행했어요.

행동 인식

하지만, 지문자 인식 만으로는 농인들의 소통을 돕기에는 한계가 있어요. 보통 농인들과의 수어를 바탕으로 한 소통에서는 연속적인 행동으로 단어 및 문장을 나타내며, 수화 단어가 존재하지 않거나, 수화 단어가 생각나지 않을 때 지문자를 사용하므로 사용 빈도 수가 적어요.

image.png

그렇기에 저희는 연속 데이터인 수화 행동 인식을 바탕으로 한 모델 학습을 진행했어요. 수화의 경우, 상황에 따라 손짓 뿐 아닌, 몸 전체적인 제스처, 그리고 표정 역시 고려 대상이에요. 그렇기에 MediaPipe에서 오른손, 왼손, 그리고 전신의 포즈를 고려할 수 있는 MediaPipe Pose를 사용했어요.

각각의 손은 21개의 관절좌표를 추출하고, 전신에서는 총 33개의 좌표를 추출했어요. 각각의 손은 (x, y, z) 좌표로 이루어져 있고, 전신의 좌표는 (x, y, z, visiability)로 이루어져 있어요. 이들의 좌표를 추출해 1차원으로 Flatten 시켰어요. 21 * 3 + 21*3 + 33 * 4 = 258 이므로 한 프레임에서 나오는 관절 좌표의 길이는 (1, 258)이에요.

image.png

그 후, 저희는 학습 데이터를 생성했어요. 저희는 (Hello, Love, Thanks, You, Me, Happy, Meet, Leave, Nice to meet, Name) 총 10가지의 수화에 대해 학습했어요. 동영상을 바탕으로 하는 연속 sequence를 추출해야 하기에, 각각의 카테고리마다 총 30번의 학습 동영상을 촬영했어요. 하나의 학습 동영상은 30 프레임으로 구성했으며, 하나의 프레임의 크기는 위에서 말한 관절좌표의 크기인 (1,1,258) 이에요. 그렇기에 총 학습 데이터는(300, 30, 258)로 이루어져 있고, 각각의 데이터에 카테고리 라벨링을 진행했어요.

image.png image.png

학습 데이터가 Sequence한 모델이기에, RNN, LSTM, GRU, 1D-CNN, Bi-LSTM, Bi-GUR 총 6개의 모델에 대해 학습을 진행하고 결과를 비교했어요. Train/Test는 70%, 30%로 나누었고, Optimizer는 Adam, Loss는 Categorical Cross Entropy, Regulation은 Early Stopping을 사용했어요. 각각의 모델에 학습을 진행 한 결과, 1D-CNN이 약 0.989의 Accuracy로 가장 높은 정확도를 보여 해당 모델을 채택했어요.

인공지능 React와 섞어먹기

앞서 인공지능 모델에 관한 설명을 드렸다면, 이번에는 React 기반의 클라이언트와 AI 서버를 어떻게 연결했는지 써볼까 해요.

React X MediaPipe Hands

image.png

지문자 인식에 관해 설명드렸는데, 저희 팀의 최초 과제는 클라이언트와 Python으로 실행되는 AI 서버를 상호 연결해 실시간 통역을 제공하는 거였어요.

지문자를 인식하고 무슨 지문자인지 검출하는 과정에는 21개의 관절 좌표가 필요해요. 그래서 클라이언트 단에서 손의 관절 좌표를 추출해 AI 서버로 WebSocket을 통한 실시간 전송을 채택해 개발했답니다.

image.png

MediaPipe Hands를 사용해 실시간으로 손을 트래킹하고, 좌표를 추출할 수 있게 했어요. (MediaPipe는 Python, App, Web 등 여러 환경을 지원하는 매우 범용성 높은 프레임워크랍니다)

이 좌표를 그대로 JSON에 담아 AI 서버로 전송하면 검출 결과를 다시 WebSocket으로 클라이언트에서 받는 방식으로 개발했어요.

React와의 자세한 연동 방법에 대해서는 아래 링크에 상세히 적어두었답니다! 블로그 보러가기

React X MediaPipe Holistic

앞서 말했듯이 지문자만 인식한다면 농인과의 의사소통에는 한계가 존재하죠. 그래서 행동을 인식할 수 있는 방법에 맞춰 MediaPipe의 Holistic이라는 방법으로 새롭게 클라이언트를 개선시켰어요.

image.png

image.png

사진과 같이 얼굴, 손, 그리고 몸짓까지 세가지를 전부 트래킹 할 수 있는 솔루션이에요. 물론 좌표는 똑같이 제공이 된답니다.

이렇게 한다면 행동 뿐만 아니라 지문자까지 인식이 가능하기 때문에 기존에 사용하던 MediaPipe Hands는 더 이상 사용하지 않게 됐어요.

행동 인식 및 검출을 위해서는 새로운 방식을 채택했어요.

  1. 클라이언트에서 유저의 웹캠을 초당 30프레임 캡처
  2. Base64로 인코딩 된 프레임 데이터를 AI 서버에 전송
  3. 서버에서 OpenCV에 사용하기 알맞은 형태로 전처리 후 결과 검출
  4. 클라이언트에 결과 전송

따라서 지문자+행동 인식 두 가지 모두 가능해졌고 두 통신 방식을 사용했어요.

HandTalker 데모

서비스가 MVP 상태일 때는 지문자만을 사용해 문장 생성에 다소 어려움이 있었어요. 이제는 지문자와 행동 모두를 인식할 수 있는 솔루션을 만들어 문제를 개선해봤어요.

행동.gif

처음에는 행동 인식을 사용하고, 지문자 모드 버튼을 누르면 바로 지문자 인식을 사용할 수 있게 개발했어요.

또한 여러 기기에서 사용할 수 있도록 반응형 디자인을 채택해서 모바일 환경에서도 잘 실행되도록 만들어 보았답니다.

후기

이번 프로젝트는 팀원들에게 정말 새로운 경험이었어요. 기존에 하던 것이 아닌 새로운 기술을 접하고 경험하는 것이기에 팀원 모두가 많이 배워갈 수 있는 기회였던 거 같아요.

이런 성장의 기회를 제공해주신 데보션에게 정말 감사하다는 말씀 드리며 이상 HandTalker의 404팀이었습니다! 감사합니다 :)