배포 도메인: http://www.sonsangnim.site/
(❗️ 현재 임시적으로 서버를 닫아놓았습니다 (updated: 2022.10.20)) (최하단 데모영상을 참고해주시길 바랍니다.)
git clone https://github.com/elice-AI4/sonsaengnim.git
cd sonsaengnim
cd front
yarn install
yarn start
cd back
yarn install
yarn start
cd AI/model
pip install -r requirement.txt
python app.py
Hand pose estimation을 통한 영어 알파벳 수화 학습 사이트
청각장애 아동은, 듣고 발화하는 과정을 통해 언어를 재구성하는 건청 아동과는 달리, 청력의 손실로 인해 언어 습득의 선천적 메커니즘이 작용될 수 없다. 따라서 청각장애 아동의 언어능력 향상을 위해 웹 기반 언어학습 시스템은 이들의 언어학습 특성에 적합하게 구성되어야 한다.
출처: 금경애, 권오준, 김태석(2004). 청각장애 아동의 언어학습 특성을 반영한 웹 기반 언어학습 시스템의 구현, 컴퓨터교육학회논문지.청각장애인들은 시각으로 정보를 습득하고 학습해야 하기 때문에 청각 장애인들을 위한 효과적인 영어 교육방법과 내용이 연구 개발되어야 한다는 것에 대해서 많이 인식하고 있지만, 획기적인 교육 방법은 많이 제시되고 있지 않다.
출처: 이근민(2013). 스마트폰을 활용한 청각장애인의 영어 학습 보조도구 설계 및 적용 연구, 일반공동연구지원사업.
영어 알파벳을 배우고 싶어하는 초등학생 청각장애인이 웹에서 바로 수화를 학습하고 맞는지 확인할 수 있다.
영유아, 초등생 그리고 청각장애인을 타겟팅한 UI
회원가입
학습 이력 관리 및 기부 기능
참고: 수화는 일반적으로 청각장애인의 언어를 의미하고, 수화에 존재하지 않는 고유명사와 문자를 표현하기 위해 나타내는 것을 지화라고 합니다.
황건우, 소효정(2016). 청각장애 아동을 위한 한글교육 모바일 앱 개발, 한국보완대체의사소통학회.
박정민, 김영운, 박찬정(2020). 청각장애인의 실시간 한글 지화 번역을 위한 실시간 영상과 데이터 분석, 한국컴퓨터교육학회
한솔이, 김세아, 황경호(2017). 형태소 분석 기반 전자책 수화 번역 프로그램, 한국정보통신학회논문지.
허명진(2010). 청각장애 아동의 언어습득 경로 분석을 통한 효율적인 언어지도 방안, 신진연구자지원사업.
저작권 문제를 고려하여 학습 전후 보여주는 영단어 수화 영상과 발음 입모양 영상은 직접 촬영했습니다.
인공지능 모델 학습을 위한 수화 및 지화 데이터는 모든 팀원들과 함께 촬영을 했고, 각 클래스마다 총 30프레임인 1초짜리 영상 200개를 데이터셋으로 구축했습니다.
파트 | 기술 |
---|---|
Team :metal: | |
FE :ok_hand: | * |
BE :raised_back_of_hand: | |
AI :fingers_crossed: | * LSTM, |
mediapipe는 구글의 머신러닝 오픈소스 프레임워크로, face, hand, pose 등 여러 인식과 관련된 작업을 처리할 수 있습니다. 수화를 인식할 수 있는 서비스를 만들기 위해 손의 움직임을 탐지하는 부분은 mediapipe를 활용했습니다. 해당 움직임이 맞는 수화인지 인식하는 부분은 프로젝트 중 인공지능 모델로 구축하였습니다.
[참고](google의 mediapipe )
이름 | 포지션 | 담당 업무 |
---|---|---|
박보선 | 프론트엔드 | 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. 수화 데이터 직접 촬영하여 데이터셋 구축 |