README.md

SuQuiz(수퀴즈) : 수어 학습 서비스

목차

1. 서비스 소개

2. 기술 스택

3. 기획 배경

4. 핵심 기능

5. 기술적 특징

6. ERD

7. 시스템 아키텍처

8. 개발 산출물

9. 서비스 시연 영상

10. 제작 기간 및 참여 인원

 

서비스 소개

💡 후천적 청각 장애인 또는 그들과 소통하고 싶은 사람들을 위한 퀴즈 기반 수어 교육 서비스💡

Easy Peasy Lemon SuQuizy! 수퀴즈와 함께라면 수어 학습도 식은 죽 먹기!

수퀴즈(SuQuiz)는 수어를 뜻하는 手와 문제를 뜻하는 영단어 Quiz 의 합성어로, 게이미피케이션을 접목하여 퀴즈 게임을 통해 쉽고 즐겁게 수어를 학습할 수 있는 서비스입니다.

 

기술 스택

🚀 Stacks 🚀

FE

BE

AI

WebRTC

Infra

 

🔨 Tools 🔨

 

👥  Collaboration 👥

 

기획 배경

• 청각장애 발생의 주된 원인 중 후천적 원인의 비율은 2008년 87.2%에서 2017년 92.4%로 5.2% 증가하였으며, 선천적 원인에 비해 후천적 청각장애 발생 비율이 더 높습니다. ^{참고자료 - 기사1}

• 청각장애인은 손을 이용하는 언어인 수어(手語)를 주된 의사소통 수단으로 쓰지만, 이들에 대한 전문적 수어 교육은 제대로 이뤄지지 않는다는 조사 결과가 나왔습니다.^{참고자료 - 기사2}

• 정식적인 수어 교육을 받았다는 응답 비율은 학교 교사에게서 배웠다는 응답은 29.1%, 전문 수어 강사로부터 교육받은 비율은 5.9%에 그쳤습니다.

• 혼자 학습하고 복습하는 인터넷 강의는 지속적이지 못한 학습 방식입니다. ^{참고자료 - 그림1}

• 이에 지속적이며 즐거운 방식으로 수어를 학습할 수 있는 창구의 필요성을 느껴, 게이미피케이션을 접목한 수화 교육 서비스 ‘수퀴즈’를 기획하였습니다.

참고 자료

기사1. 청각 장애 발생의 주된 원인 중 후천적 원인의 비율

기사2. 청각장애인 수어교육 부실…정식으로 배운 이는 35%뿐 | 연합뉴스

기사3. 청각장애 아동이 게임을 통해 수화를 배운다면

기사4. 법만 만들고 공식 수어 교육기관은 '0'

그림1. 차시가 늘어날수록 반비례하는 조회수. 출처 : 경기도평생학습포털

 

페르소나

• 후천적으로 장애를 얻게 된 장애인
• 장애가 있는 사람과 소통하고 싶은 비 장애인 (가족, 주변 친구들)
• 수어를 처음부터 시작하는 기초 수어 학습자

 

핵심 기능

• Web RTC 화상화면을 통해서 실시간으로 퀴즈를 맞추는 방식으로 학습합니다.
• 참가자가 제시어에 해당하는 단어를 수어에 해당하는 동작으로 맞췄을 시에 정답입니다.
• 퀴즈의 정답 유무를 판별하는 기능은 모션인식과 AI 모델을 통해 구현합니다.
• 수어학습자료는 국립국어원 Open API를 이용합니다.

1. 학습하기

• 기초 자음과 모음, 숫자를 카드형식으로 학습하고, 이를 웹캠에서 따라해보는 기능
• 단어를 학습한 후, 단어장에 저장하여 원하는 단어를 복습 가능

학습모드 시작

• 학습하기를 눌러 카테고리와 주제를 선택하고, 학습을 시작합니다.

학습모드 인식

• 제시어에 해당하는 영상을 통해 수어 동작을 따라해보고, 올바른 동작인지 확인합니다.

학습모드 탭 전환

• 탭 전환을 통해 다른 카테고리의 단어들을 학습할 수 있습니다.

단어장

• 학습한 단어를 단어장에 추가하고, 저장한 단어들을 복습할 수 있습니다.

 

2. 싱글플레이(워들)

• 학습하기를 통해 배운 기초 자음과 모음으로, 자음과 모음의 합성을 통해 단어를 추리하며 학습하는 기능
• 랜덤으로 제시된 단어를 수어 동작을 통해 자음과 모음을 조합하여 하나씩 자리를 맞추는 게임

게임 플레이

• 정확한 자리에 해당하는 자모음이면 초록색, 존재하는 자모음이나 자리가 다르면 노란색, 없는 자모음이면 회색으로 표시되며
• 최소한의 횟수에 단어를 맞추는 것이 게임의 목표입니다.

게임 결과

• 단어를 맞추면 그 단어에 해당하는 수어 영상을 보여줍니다.
• 현재까지 문제를 맞춘 날짜와, 도전횟수, 정답률, 최근 연속 정답일 수, 최근 연속 풀이일 수, 도전 횟수 분포등 퀴즈 풀이에 대한 다양한 통계를 보여줍니다.

결과 공유

• 매일 정답 단어가 달라지며, 모든 사용자는 같은 문제를 공유합니다. 게임 결과를 클립보드에 복사하여 SNS 공유 가능할 수 있습니다.

튜토리얼

• 게임 하단에 게임 방법에 대한 튜토리얼을 캐러셀로 제공합니다.  

3. 멀티플레이(행맨)

• 싱글 플레이(워들)에서 배운 단어로, 다른 사용자와 경쟁하며 학습한 단어를 응용 및 복습하는 기능

방 생성하기

• 방 만들기를 통해 세션을 생성하고, 방장이 되어 초대코드를 다른 친구들에게 공유할 수 있습니다.

초대코드로 입장하기

• 방장에게 채팅으로 받은 초대코드를 통해 세션에 입장할 수 있습니다.

게임 플레이

• 제시어의 수어 영상과, 글자 수 만큼 빈칸이 제시됨
  1. 한 사람씩 돌아가면서 자음/모음을 수어로 동작함
  2. 제시어에 그 자음/모음이 있으면 빈칸이 채워지고, 맞추면 한 번 더 자음/모음을 수어로 시도할 기회가 주어짐
  3. 자기 차례에 제시어를 모두 완성시키면 승리!

게임 종료

• 결과창을 통해 게임 결과를 확인하고, 퀴즈를 맞춘 순위와 경험치 변동을 확인할 수 있습니다.
• 다시하기를 클릭하여 방에 남아 다음 게임을 플레이하거나, 방을 나갈 수 있습니다.

💡 기초 자음모음(학습) → 단어(싱글플레이) → 응용 및 복습(멀티플레이)으로 교육 시나리오 구성  

기타 기능

소셜 로그인

• 네이버 소셜 로그인
• 카카오 소셜 로그인
• 회원가입 및 닉네임 유효성 검사

마이페이지

• 친구 요청, 친구 수락, 친구 삭제 기능
• 친구와의 1:1 채팅 기능
• 최대 연속 정답일 수, 최대 연속 풀이일 수, 누적 풀이 수, 정답률 등 퀴즈 풀이 정보 표시

퀴즈 랭킹

• 퀴즈를 선택할 수 있는 로비에서 멀티플레이를 통해 획득한 경험치 및 레벨의 랭킹을 확인

 

기술적 특징

1. OpenVidu

• webRTC 기술을 활용하여 실시간 화상 미팅 서비스 구현
• OpenVidu 라이브러리 사용
• React에서 OpenVidu 라이브러리를 커스터마이징하여 화상 통신 화면을 구성하고,
• 웹 게임에 필요한 데이터를 OpenVidu signal 발생을 통해 세션 참가자들이 실시간으로 교환
• Spring boot에서 세션을 관리하고, 클라이언트로부터 요청을 받아 새 세션id 혹은 토큰을 OpenVidu 서버에 요청
• 클라이언트는 응답받은 세션id와 토큰을 통해 세션에 참가

2. MediaPipe

• Mediapipe Hands Library를 통해 수어에 필요한 손동작을 인식
• 26개의 랜드마크로 구성되어 있음

3. KNN-알고리즘

• OpenCV 및 KNN 알고리즘을 활용하여 사용자의 동작이 어떤 수어인지 분류하는 AI 모델 학습  

ERD

 

시스템 아키텍처

 

개발 산출물

기능 명세서

api 명세서

ERD

시스템 아키텍처

시퀀스 다이어그램

와이어프레임

화면 정의서

포팅 매뉴얼

중간 프레젠테이션

최종 프레젠테이션

 

서비스 시연 영상

유튜브 링크

제작 기간 및 참여 인원

제작 기간

2024.01.08 ~ 2024.02.16 (6주)

참여 인원

📌 조담현	📌 김현준	📌 안윤철	📌 최은희	📌 정혜진
👑팀장	🖥️개발 팀장	👨‍💻BE 리더	👩‍💻FE 리더	📝형상 관리자
백엔드	백엔드	백엔드	프론트엔드	프론트엔드
PM, 발표, API, WebRTC, WebSocket	API, 아키텍처 설계, CI/CD 구축, 소셜로그인	API, 수어 모션인식, AI 학습	WebRTC, 소셜로그인	형상 관리, 워들 알고리즘, UI/UX