/sonsaengnim

엘리스 AI 4기 3차 프로젝트 - 손생님 (5팀)

Primary LanguageTypeScript

영어 알파벳 수화 학습 사이트, 손생님🤙

바운스손생님

배포 도메인: http://www.sonsangnim.site/
(❗️ 현재 임시적으로 서버를 닫아놓았습니다 (updated: 2022.10.20)) (최하단 데모영상을 참고해주시길 바랍니다.)

목차
  1. 서비스 실행
  2. 프로젝트 소개
    • 1) 프로젝트 주제
    • 2) 서비스 개요 및 배경
    • 3) 서비스 목표
  3. 서비스 기능 소개
    • 1) 메인 기능
    • 2) 서브 기능
    • 3) 관련 문서
  4. 사용된 데이터셋과 기술스택
    • 1) 어떤 데이터셋을 어떻게 전처리하고 사용할것인지
    • 2) 어떤 방법, 라이브러리나 알고리즘을 사용할것인지
  5. 시스템 아키텍쳐
    • 1) 개발 구조
  6. 프로젝트 팀원 소개
  7. 데모

1. 서비스 실행

git clone https://github.com/elice-AI4/sonsaengnim.git

cd sonsaengnim
  • Front
cd front
yarn install
yarn start
  • Back
cd back
yarn install
yarn start
  • AI
cd AI/model
pip install -r requirement.txt
python app.py

2. 프로젝트 소개

2-1) 프로젝트 주제

Hand pose estimation을 통한 영어 알파벳 수화 학습 사이트

2-2) 서비스 개요 및 배경

청각장애 아동은, 듣고 발화하는 과정을 통해 언어를 재구성하는 건청 아동과는 달리, 청력의 손실로 인해 언어 습득의 선천적 메커니즘이 작용될 수 없다. 따라서 청각장애 아동의 언어능력 향상을 위해 웹 기반 언어학습 시스템은 이들의 언어학습 특성에 적합하게 구성되어야 한다.

출처: 금경애, 권오준, 김태석(2004). 청각장애 아동의 언어학습 특성을 반영한 웹 기반 언어학습 시스템의 구현, 컴퓨터교육학회논문지.

청각장애인들은 시각으로 정보를 습득하고 학습해야 하기 때문에 청각 장애인들을 위한 효과적인 영어 교육방법과 내용이 연구 개발되어야 한다는 것에 대해서 많이 인식하고 있지만, 획기적인 교육 방법은 많이 제시되고 있지 않다.

출처: 이근민(2013). 스마트폰을 활용한 청각장애인의 영어 학습 보조도구 설계 및 적용 연구, 일반공동연구지원사업.

2-3) 서비스 목표

영어 알파벳을 배우고 싶어하는 초등학생 청각장애인이 웹에서 바로 수화를 학습하고 맞는지 확인할 수 있다.

  • 주 사용자: 영어 알파벳 학습을 희망하는 청각장애인(아동 및 초등생)
  • 서브 사용자: 영어 알파벳 수어를 궁금해 하는 청인

3. 서비스 기능 소개

---

3-1) 메인 기능

  • 알파벳 지화&영어 단어 학습
    • 26개의 알파벳 지화 & 21개의 영어 단어 영상 제공
    • 영상을 시청한 뒤 웹캠을 보면서 배운 것을 그대로 따라하고 제출
    • 웹캠이 없는 경우 제출 없이 영상만을 보고 학습할 수 있도록 구성
    • 해당 영상이 올바른 지화인지 검사하여 결과 반환
  • 퀴즈
    • 앞서 학습한 21개 영어 단어 랜덤 등장
    • 웹캠 로딩 후 해당 단어에 대한 수화를 하고 제출 후 정답 확인
    • 제한 시간(10분) 동안 10개 문제
    • 맞힌 문제를 점수로 변환하여 순위표 등극
  • 검색
    • 앞서 학습한 21개의 영어 단어를 한글 및 영어로 검색하면 관련 수화와 단어 카드가 등장
    • 검색 시 편의를 위해 입력한 글자를 포함한 단어를 하단에 리스트로 표시

alphabet_word_hover

3-2) 서브 기능

  • 영유아, 초등생 그리고 청각장애인을 타겟팅한 UI

    • 다양한 색감과 둥근 디자인으로 사용자 친화적인 UI 구성
    • 학습 직전 페이지, 학습 완료 모달창 등 애니메이션 효과 부여
    • 청각 장애인의 경우 한글에도 익숙치 않은 경우가 있어 핵심 단어에 대한 수어를 확인할 수 있도록 국립 국어원 한국 수어 사전의 수어 영상을 tooltip으로 추가

card_flip

tootip_hover

  • 회원가입

    • 회원가입 사용자는 포인트 적립 가능
    • 매 학습 성공 시, 획득한 퀴즈 점수마다 포인트 적립

  • 학습 이력 관리 및 기부 기능

    • 로그인 후 해당 유저가 학습한 내역 확인 가능
    • 적립된 포인트는 2000점 이상부터 기부 가능
    • 학습을 통해 얻은 포인트로 기부를 하는 과정이 반복되면서 장애인에 대한 인식 개선 및 사회적 선순환을 기대

참고: 수화는 일반적으로 청각장애인의 언어를 의미하고, 수화에 존재하지 않는 고유명사와 문자를 표현하기 위해 나타내는 것을 지화라고 합니다.

3-3) 관련 문서

3-4) 이 프로젝트의 맥락과 배경이 유사한 인공지능 기반 서비스의 활용 사례 및 참고 논문

  • 황건우, 소효정(2016). 청각장애 아동을 위한 한글교육 모바일 앱 개발, 한국보완대체의사소통학회.

  • 박정민, 김영운, 박찬정(2020). 청각장애인의 실시간 한글 지화 번역을 위한 실시간 영상과 데이터 분석, 한국컴퓨터교육학회

  • 한솔이, 김세아, 황경호(2017). 형태소 분석 기반 전자책 수화 번역 프로그램, 한국정보통신학회논문지.

  • 허명진(2010). 청각장애 아동의 언어습득 경로 분석을 통한 효율적인 언어지도 방안, 신진연구자지원사업.

4. 사용된 데이터셋과 기술스택

---

4-1) 어떤 데이터셋을 어떻게 전처리하고 사용할것인지

  • 저작권 문제를 고려하여 학습 전후 보여주는 영단어 수화 영상과 발음 입모양 영상은 직접 촬영했습니다.

  • 인공지능 모델 학습을 위한 수화 및 지화 데이터는 모든 팀원들과 함께 촬영을 했고, 각 클래스마다 총 30프레임인 1초짜리 영상 200개를 데이터셋으로 구축했습니다.

4-2) 어떤 방법, 라이브러리나 알고리즘을 사용할것인지

파트 기술
Team 🤘 image image image image spreadsheet
FE 👌 image image image image image image JOTAI mediapipe*
BE 🤚 image image image image image image
AI :fingers_crossed: image image image image image mediapipe* LSTM, gunicorn

mediapipe는 구글의 머신러닝 오픈소스 프레임워크로, face, hand, pose 등 여러 인식과 관련된 작업을 처리할 수 있습니다. 수화를 인식할 수 있는 서비스를 만들기 위해 손의 움직임을 탐지하는 부분은 mediapipe를 활용했습니다. 해당 움직임이 맞는 수화인지 인식하는 부분은 프로젝트 중 인공지능 모델로 구축하였습니다.
[참고](google의 mediapipe )

기술스택

5. 시스템 아키텍쳐

5-1) 개발 구조

서비스 구조도

6. 프로젝트 팀원 소개

이름 포지션 담당 업무
박보선 프론트엔드 1. 메인 / 로그인 / 회원가입 / 퀴즈 / 학습이력 페이지 구현
2. 로그인 / 회원가입 / 퀴즈 / 학습이력 페이지 API 연동
3. 웹캠 기능 구현
4. 웹캠과 Mediapipe 연결
5. 순위 페이지 구현 및 API 연동
6. 퀴즈 페이지 모달 컴포넌트 구현
박정훈 프론트엔드 1. navbar / about / 단어 학습 / 알파벳 학습 페이지 구현
2. about page section scrolling 구현
3. 단어 학습 / 알파벳 학습 페이지 API 연동
4. 타겟층을 고려한 알파벳 애니메이션 / 영상 flip 애니메이션 구현
5. framer-motion을 활용한 드래그, 애니메이션
6. 저작권 표시를 위한 footer 컴포넌트 구현
7. 실시간으로 인공지능과 통신하기 위한 socket.io 구현
8. 로딩 창, socket 데이터 통신 시 모달창 흐름 구현
김동현 백엔드 1. 유저 DB 설계 및 API 개발
2. 학습 이력에 따른 포인트 반환하는 기능 추가
3. 포인트 기부를 위한 donation DB 설계 및 API 개발
4. jwt token 설정
5. jest test file 작성
6. swagger 작성
7. 서비스 배포(nginx, docker)
김유진 백엔드/디스코드 관리 1. Discord 서버 관리
2. 수화 데이터를 가져오는 Hand DB 설계 및 API 구현
3. 퀴즈 점수 등록 및 상위 10등 반환해주는 Score DB 설계 및 API 구현
4. Score DB 갱신 기능 구현
5. 퀴즈 문제로 낼 이미지를 반환하는 Quiz DB 설계 및 API 구현
6. 서비스 배포(nginx, docker)
7. 수화 영상 DB 생성 및 관리(AWS S3)
김채정 인공지능/팀장 1. LSTM 모델 프로토타입 테스트
2. 모델 학습 및 평가
3. Jupyter Notebook 코드를 클라이언트 사이드 모델로 변환
4. 서비스 성능 개선 위한 flask 코드 작성
5. 단어 카드 / 모달창 이미지 / 마스코트 디자인
6. 핵심 버튼 별 청각장애인 수어 영상을 담은 tooltip 적용
7. 단어 검색창 컴포넌트 구현 및 API 연동
8. 사용자 편의를 고려한 자동완성 기능 구현
9. 학습 페이지에 들어갈 입모양/단어 수화 영상 촬영
유혜선 인공지능/노션 관리 1. GPU VM/배포 VM 환경 설정 및 관리
2. 모델 학습 및 평가, 정확도 개선
3. LSTM 모델 프로토타입 테스트
4. 백 사이드 모델 구축(Flask, gunicorn)
5. 서버 부하 방지를 위한 백 사이드 모델 경량화
6. 서비스 성능 개선 위한 flask 코드 작성
7. Docker 및 Gunicorn 배포 관리
8. 실시간 프론트 통신을 위한 Socket.io 구현
9. 학습 페이지에 들어갈 알파벳 지화 영상 촬영
전원 - 1. 인공지능 서비스 배경 조사
2. 서비스 기획
3. 수화 데이터 직접 촬영하여 데이터셋 구축

7. 데모

메인 페이지

tootip_hover

학습 중 맞혔을 때

readme_demo_alpha_correct

학습 중 틀렸을 때

readme_demo_alpha_incorrect