Skip to content

영어 쉐도잉 학습 AI 반응형 웹서비스 : 유튜브 보면서 재밌게 영어 학습하고, AI와 영어로 채팅까지

Notifications You must be signed in to change notification settings

itmakesmesoft/OPENER

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

logo (2)

Opener - 영어 회화 연습을 위한 웹 사이트

👉프로젝트 소개

서비스 개요

  • 스피킹을 통한 영어 학습 웹 사이트

주요 기능

  • 내 학습 로드맵을 따라 영어 영상 학습
  • 쉐도잉을 통한 반복 연습 및 발음 평가를 통한 영어 학습
  • 사용자 정보 기반 추천 쉐도잉 영상 제공
  • 선택한 주제 기반 AI와의 음성 채팅
  • 유저와의 음성 채팅으로 문법, 문맥 점수 기반 게임
  • 다양한 상황별 챌린지를 통한 자연스러운 영어 구사 연습
  • ELO 점수 시스템을 이용한 랭킹 시스템

🏞️개발 환경

Frontend

React 18.2.0
Node.js 18.16.0
VSCode 1.77.0
tailwind 3.3.1
npm 8.19.2
eslint 8.36.0
recoil 0.7.7

Backend

Spring Boot 2.7.11
Java 11
IntelliJ 2022.3.1
FastAPI 0.95.0
Python latest
MySQL 8.0.32
Redis latest

📐아키텍처 설계

image


💻피그마 설계

image


💽ERD 설계

Member Service / Shaodowing Service

Challenge Service / Chatting Service


📺주요 화면

메인 페이지

학습 로드맵 / 인기 챌린지


  • 자신이 현재 학습 중인 쉐도잉 영상 진도가 나타납니다.
  • 좋아요 순 인기 챌린지 목록이 나타납니다.


추천 문장 / TREB 랭킹



  • 사용자 정보를 기반으로 영어 문장을 추천해줍니다.
  • 유저 게임 상위 10위권 사용자들이 나타납니다.

쉐도잉 학습 페이지

카테고리 별 쉐도잉 영상 목록


쉐도잉목록


  • 카테고리 별로 쉐도잉 영상 목록을 볼 수 있습니다.

쉐도잉 영상 학습 페이지


발음평가


  • 마이크 버튼을 누르고 문장을 따라 말해 발음 평가를 받을 수 있습니다.
  • 정확도, 완성도, 발음, 유창성에 대한 점수를 얻을 수 있습니다.

쉐도잉학습상세


  • 쉐도잉 영상의 문장을 반복하면서 학습할 수 있습니다.
  • 문장의 단어를 누르면 단어장을 볼 수 있습니다.

다음자막

  • 화살표 버튼으로 다음 자막으로 이동해 학습할 수 있습니다.
  • 구간 영상을 20번 반복 학습하게 되면 학습이 완료됩니다.

챌린지 페이지

원본 챌린지 목록 페이지


챌린지목록


  • 참여할 수 있는 챌린지 목록을 볼 수 있습니다.

챌린지를 참여한 사람들의 챌린지 목록 페이지


챌린지참여하기


  • 해당 챌린지에 참여한 사용자들의 챌린지 목록을 볼 수 있습니다.
  • 미리보기를 누르면 원본 챌린지 영상을 볼 수 있습니다.
  • 참여하기를 누르면 해당 챌린지에 참여할 수 있습니다.

사용자 챌린지 페이지


챌린지재생


  • 사용자 챌린지를 볼 수 있습니다.
  • 좋아요를 누를 수 있습니다.
  • 자신의 챌린지면 삭제할 수 있습니다.
  • 공유 버튼을 눌러 링크를 복사할 수 있습니다.

채팅 페이지


채팅페이지


  • AI와 채팅, 사용자와의 채팅 중 선택할 수 있습니다.

AI 채팅


AI채팅주제선택


  • 대화하고 싶은 주제를 선택할 수 있습니다.

ai채팅시작


  • 선택한 주제를 바탕으로 AI의 첫 채팅이 나옵니다. AI와 자유롭게 대화할 수 있습니다.

ai채팅

  • 마이크 버튼을 눌러 말한 내용이 대화창에 표시됩니다.
  • 인식을 잘못한 부분이 있다면 키보드 버튼을 눌러 수정할 수 있습니다.
  • 채팅을 보내면 AI의 답장을 받으며 계속 채팅을 이어갈 수 있습니다.
  • 말을 잘못 인식했다면 내용을 초기화할 수 있습니다.

유저와 채팅 게임

유저게임매칭


  • 대화 게임하기 버튼을 눌러 매칭을 기다릴 수 있습니다.
  • ELO 시스템을 통해 자신의 점수 구간에 맞는 사람들이 매칭됩니다.

매칭성공


  • 게임할 수 있는 상대가 대기열에 들어오면 매칭되고, 채팅방으로 이동합니다.

내가보냄 상대방이보냄


  • 자기 턴에만 음성 채팅을 보낼 수 있습니다.
  • 제시어를 포함해 말하면 보너스 점수가 부여됩니다.

패스


  • 제한시간 안에 말하지 못하면 pass가 됩니다.

채팅 결과 페이지


결과창이동


  • 10번의 턴이 끝나면 결과 페이지로 이동합니다.
  • ELO 기반 점수 시스템으로 점수가 부여됩니다.
  • 상대와 나의 문법 점수, 문맥 점수를 볼 수 있습니다.

문법피드백


  • 오른쪽에서 내 문장의 각각 문법 피드백을 볼 수 있습니다.

로드맵 페이지


로드맵


  • 현재 내 학습 로드맵을 볼 수 있습니다.
  • 순서대로 학습할 시 다음 단계를 볼 수 있습니다.

About

영어 쉐도잉 학습 AI 반응형 웹서비스 : 유튜브 보면서 재밌게 영어 학습하고, AI와 영어로 채팅까지

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Contributors 7