AI와 함께하는 단어학습 Wordy!🐾

*wiki에서 자세한 프로젝트 설명을 확인하실 수 있습니다

프로젝트 주제

AI를 통해 학습 중인 단어의 예시 스크립트 및 문법, 단어 정리, 복습 단어 카드 서비스

한줄 소개

학습에 어려움이 있는 누구나 학습한 단어로 만들어진 예문을 통해 반복학습을 해보세요!

실행 방법

• 각 폴더별 (front,back) README에서 확인가능합니다.
• 프로젝트 실행 시 궁금한 사항은 이슈에 남겨주세요.

기술 스택

협업

서비스 설명

Wordy는 사용자 중심의 영어 학습 플랫폼으로, 어디서나 편리하게 영어 단어를 학습하고, AI 기반의 문법 교정 서비스를 이용할 수 있도록 설계되었습니다.

영어는 전 세계적으로 가장 널리 사용되는 언어 중 하나이지만, 많은 사람들이 영어 학습에 어려움을 겪고 있습니다. 특히 단어 학습과 문장 구성에 대한 어려움이 크게 느껴집니다. 이러한 배경에서, Wordy는 사용자들이 효과적으로 영어 단어를 학습하고, 학습한 단어를 바탕으로 문장을 구성하는 연습을 할 수 있는 서비스를 제공하고자 탄생하였습니다.

또한, 자신이 작성한 문장이 올바른 문법으로 이루어져 있는지 확인하는 것은 영어 학습자에게 큰 어려움입니다. 이에 Wordy는 AI 기반의 문법 교정 기능을 도입하여, 사용자들이 영어 작문을 쉽고 정확하게 교정받을 수 있도록 하였습니다.

뿐만 아니라, Wordy는 사용자의 학습 동기를 높이기 위해 개인별 학습 진도율과 랭킹 시스템을 제공합니다. 이를 통해 사용자는 자신의 학습 상황을 쉽게 파악하고, 다른 사용자와의 랭킹을 통해 경쟁 의식을 느끼며 학습에 재미를 느낄 수 있습니다.

Wordy는 사용자의 영어 학습을 쉽고 재미있게 만들어주는 플랫폼으로, 사용자들이 영어에 대한 자신감을 높이고, 세계와 소통할 수 있는 기회를 제공하고자 합니다.

기획 의도

AI를 개인 공부에 이용하면 어떨까?

• 자기 주도학습용, 혼자 공부를 하면 어떤 어려움을 느낄지에 대한 고민
• ai를 활용하여 맞춤형 대화 예문 제공
• 다른 사람들과 함께 학습함으로 학습 의지 다지기는 기능 제공

우리 서비스를 이용하는 사람은요?

• 단어를 다회독해도 암기에 어려움을 느끼는 학습자
• 단어 학습 시간 효율을 최대한 하고 싶은 학습자

프로젝트가 제공하는 기대 효과와 활용 방안

• 단어 학습에 어려움이 있는 유저를 위한 서비스
• 외운 단어 기반으로 한번 더 예시 스크립트를 보여줌으로 인해 메타인지 상승 효과

서비스 시나리오

유저 시나리오

• 단어를 혼자 외우던게 어렵던 20살 엘리스씨, 막연히 단어만 외우기도 어렵고 외운 단어에서 예제를 보여주는 좋은 사이트가 없는지 고민을 하던 중, 낱말 카드 형식으로 단어도 학습하고, 학습한 단어 기반으로 예문에 예문 속 문법까지 만들어주는 교육 사이트의 광고를 발견합니다.

• pre-svg : 페이지 접속

• 평소 이직을 희망하며 야간 토익학원을 다니던 30살 이금자씨는 출퇴근 시간에도 영단어 종이 수첩의 불편함을 깨닫고 핸드폰으로 학습 할 수 있는 어플을 찾게 되고, Wordy의 단어장 서비스를 통해 종입 수첩에 있던 단어들을 모바일에 저장하고 Wordy에서 제공되는 단어 학습을 통해 언제 어디서든 쉽게 영어 단어를 저장하고 학습 할 수 있게 됩니다.

서비스 시나리오

Wordy는 어디서나 쉽게 영단어 학습을 하며, AI를 통해 문법 교정까지 해주는 서비스 입니다.

Wordy는 기존의 영단어 학습 서비스에서 더 나아가 학습 했던 단어들을 모아 사용자가 문장 생성이라는 컨텐츠를 통해 재학습을 도우며, 평소 영작문에 대한 어려움을 느끼는 유저를 위해 AI 문법 교정을 통해 쉽게 해결할 수 있습니다. 추가로 사용자가 학습을 할때마다 본인의 학습 진도율과 유저별 진행정도의 랭크 시스템을 통해 서비스 이용도를 높이기 위한 요소도 추가했습니다.

처음 접속한 유저는 서비스 체험과 회원가입 선택해 서비스를 이용할 수 있으며, 기존 유저는 로그인을 통해 서비스를 바로 이용 가능합니다.

그렇게 회원 가입을 통해 로그인을 한 유저는 처음 단어 학습 페이지가 나오고 만약 워디의 다른 서비스를 보고 싶다면 좌측 상단에 위치한 버튼을 통해 제공되는 서비스를 눌러 이용 가능합니다. 처음 회원 가입을 할 땐 사용자의 이메일 중복 검사와 인증 번호를 통해 회원가입이 가능하며, 사용자의 이메일 등록을 통해 이후 리마인드 서비스까지 추가적으로 제공 받을 수 있습니다. 단, 소셜 로그인의 경우 사용자가 이메일 제공을 안한다면 이후 내 정보란에서 이메일을 직접 입력해 리마인드 서비스를 받을 수 있습니다.

처음 보여지는 서비스인 단어 학습은 대중적인 학습을 돕기 위한 대표적인 4개의 공인인증시험 카테고리를 통해 사용자가 직접 선택해 단어를 학습 할 수 있습니다. 사용자가 카테고리 중 하나를 선택하면 영단어와 단어 뜻을 고르는 4지선다의 문제가 하나 씩 나오며 10개 정도를 학습합니다. 제공되는 10개의 단어 테스트는 사용자가 직접 버튼을 눌러 정답이면 정답을 출력하고, 오답이면 오답 출력과 함께 정답의 뜻을 출력 해줍니다. 만일 모르는 문제의 경우 우측 하단의 버튼을 통해 해당 문제를 넘길 수 있습니다. 이렇게 총 10개의 퀴즈를 풀고 나면 학습 결과 창이 나오고 정답 갯수와 풀었던 문항의 번호와 정답 여부, 단어, 뜻을 이렇게 차례대로 보여줍니다. 이후 사용자가 직접 선택을 통해 학습하고 싶은 단어를 최대 3개까지 골라 문장 단어 학습을 진행 할 수 있으며, 기존과 같이 추가 학습 영단어 10개를 이어갈 수 있습니다.

이후 진행된 단어 학습을 통해 본인의 학습 점수가 Wordy쪽에 점수로 변환되고 이는 곧 랭킹 시스템의 점수로 변환돼 본인의 랭킹과 다른유저들의 랭킹을 확인 할 수 있습니다.

그 다음 문법 교정은 앞서 말한 영작문에서 헷갈리는 문법이나 쓰고자 하는 영어 작문을 AI 문법 교정기를 통해 올바른 영어 작문을 도와줍니다. 사용자가 직접 문장을 넣고 입력 버튼을 누르면 하단 교정된 문장의 박스 안에 알맞은 영어 작문이 생성 됩니다.

세번째로 기존 단어 학습 페이지에서 했던 문장 단어 학습이 다시금 나오는데, 여기서 사용자가 학습 했던 단어들이 보기로 나오고 보기들 중 세 개를 골라 스크립트(영어 문장)를 생성해 학습을 할 수 있습니다.

네번째로 단어장을 통해 학습했던 단어, 틀린 단어, 그리고 즐겨 찾기를 등록한 단어들을 한눈에 볼 수 있습니다. 추가적으로 사용자가 직접 영어 단어의 직접 단어의 뜻과 스펠링을 체크하고 지우거나 고칠 수 있습니다. 또한 상단에 사용자가 단어 검색을 통해 필터링을 할 수 있으며 쉽게 원하는 단어 또는 오답을 찾을 수 있습니다.

다섯번째로 Wordy에서 제공되는 모든 단어를 저장소를 통해 한눈에 확인할 수 있으며 여기서도 단어장과 같이 찾고자 하는 단어와 즐겨 찾기 등록 버튼을 통해 단어장에 곧바로 추가가 가능하며 하단 중앙의 버튼으로 빠른 검색 이동이 가능합니다.

마지막으로 내 정보 페이지를 통해 유저의 사진과 이메일, 이름 그리고 학습 총 진행률과 카테고리 별 진행률을 확인 할 수 있습니다. 보여지는 이메일을 통해 Wordy측에서 인증 번호 발송 및 리마인드 서비스를 제공하며, 단어 학습 페이지로 빠른 이동이 가능하도록 버튼이 추가 됐습니다.

이외에도 최상단 우측의 사용자의 이미지 클릭을 통해 내 정보로 바로 이동 및 로그아웃을 진행 할 수 있습니다.

기능 소개

Wordy는 영어 단어 학습과 AI 기반 문법 교정 서비스를 제공합니다. 사용자는 학습한 단어를 바탕으로 문장 생성 컨텐츠를 통해 복습할 수 있으며, 학습 진도율과 랭킹 시스템을 통해 학습 동기를 부여받을 수 있습니다.

회원 관리

서비스는 회원가입 혹은 로그인 후 이용 가능하며, 이메일 인증을 통해 회원가입이 진행됩니다. 소셜 로그인 시 이메일 제공이 없다면, 내 정보에서 이메일을 직접 입력해야 합니다.

단어 학습

단어 학습은 4개의 공인인증시험 카테고리를 통해 이루어지며, 사용자는 10개의 단어를 학습하고 테스트합니다. 정답과 오답 결과는 학습 결과 창에서 확인할 수 있습니다. 학습한 단어는 랭킹 시스템의 점수로 변환되며, 사용자는 자신과 다른 유저의 랭킹을 확인할 수 있습니다.

문법 교정 [AI]

문법 교정 기능은 사용자가 작성한 문장을 AI가 교정하여 올바른 영어 문장을 생성해줍니다.

스크립트 생성 [AI]

문장 단어 학습은 사용자가 학습한 단어를 바탕으로 스크립트를 생성해 보다 자연스러운 대화형 학습을 제공합니다.

단어장 및 저장소

단어장 및 저장소에서 학습한 단어, 틀린단어, 카테고리별 단어, 즐겨찾기 등 단어들을 한눈에 확인하고 추가로 커스텀 단어를 등록하거나 즐겨찾기에 등록할 수 있습니다. 또한 검색API를 통해 서비스에 등록된 단어를 검색할 수 있습니다.

내 정보 페이지 및 리마인드 서비스

내 정보 페이지에서 유저의 개인 정보와 학습 진행률을 확인할 수 있으며, 학습현황에 따라 이메일을 통해 리마인드 서비스를 제공합니다.

시작 페이지

서비스 소개 페이지

• 로그인
  • 로컬 로그인 -> ID/PW 찾기
  • 소셜 로그인 (로그인만 가능하게!)
• 레벨 테스트로 이동 (비회원도 가능) : 10문제 중 정답 개수로 초/중/고급 등급부여
  • 고급 8개 이상 / 중급 8개 미만 / 초급 3개 미만
  • 레벨 테스트 결과를 사용자에게 노출시키지 않고 서버에만 저장
  • 테스트 후 회원가입 진행
• 회원가입 진행
  • 로컬 회원가입
  • 소셜 회원가입

랭킹 페이지

유저간의 랭킹을 확인할 수 있는 페이지

• 화면 처음 접속 시 모달 또는 alert로 등수가 몇등 떨어졌는지 표시( 서버에서는 유저가 종료한 시점의 등수와 재접속 시 등수 차를 구할 수 있는 세션이용 )
• 유저 랭킹 표시 (사용자 랭킹 반환/ 전체 랭킹)
  • 랭킹 표시 카테고리 예시 : 누적 랭킹/ 주차별랭킹 / 일일랭킹
• 누적 랭킹일 경우 100등까지 UI로 표시 (스크롤 사용)

학습 페이지

유저가 추천 단어 기반으로 새로운 단어 학습 및 학습 단어 기반으로 AI 스크립트로 추가 학습을 할 수 있는 페이지

• 유저 학습 수준에 따라 단어 10개씩 학습 가능

  • 4지 선다형
  • CRS, 클라이언트에서 기본 10개 단어 학습 완료를 한 사이클로 둘 시, 한 사이클 완료 후 정답 개수를 서버에 전송
  • 한 사이클당 기본 점수 부여 (예 : 10개 단어 중 6개 정답일 시, 6점으로 한다.)

• 학습 도중 유저가 저장해서 학습하고 싶은 단어는 즐겨찾기 기능 이용

• 유저가 기존에 생성해둔 단어장 및 즐겨찾기

나의 학습

유저가 학습한 단어만 재 학습할 수 있는 복습 페이지

• 기본 단어(학습 페이지에서 오답처리된 단어들)장 내에서 재 학습 시 맞추면 기본 단어장에서 삭제됨
• 유저가 만든 단어장, 개인이 만들 수 있는 단어장

단어 카테고리

직군별 또는 수준별 단어로 분류해 카테고리를 나눠서 볼 수 있는 페이지

• 데이터셋 가공이 완료된 후 확립예정
• 단어 카테고리를 선택해서 들어가면 해당 단어 학습 또는 조회 가능

내 정보

유저 정보를 조회 및 수정, 버전 정보를 확인 할 수 있는 페이지

• 유저 프로필 목록 조회
• 유저 정보 수정하기 클릭 시 비밀번호 입력 후 수정가능

AI 활용

1. 모델 설정

• T5-small 모델을 사용하여 영어 문법 오류 수정 작업을 수행할 수 있도록 설정합니다. T5-small 모델은 T5의 경량화 된 모델로, 학습 및 추론 속도가 빠르며 메모리 사용량이 적기 때문입니다.

2. 데이터셋 로드

• text-to-text 형식으로 학습하는 모델의 특성상 문장 데이터셋이 필요합니다. 틀린 문장(modified)과 교정된 문장(sentence)을 가진 데이터셋, 'juancavallotti/multilingual-gec' 을 사용했습니다.

3. 데이터 전처리

• 불필요한 열을 제거하고, 문장을 토큰화하여 T5 모델에 입력 가능한 형태로 전처리합니다. 기존 데이터에 {교정된 문장, 교정된 문장} 데이터를 Concatenate하여 Data Augmentation을 수행합니다.

4. 훈련 및 평가

• Seq2SeqTrainer를 사용하여 모델을 훈련하고 평가합니다. 모델을 학습시키고 성능을 평가하여 최적의 성능을 얻습니다.

5. 모델 저장

• 가장 낮은 Loss를 가진 모델을 선택하여 Hugging Face에 'gec-fine-tuned'로 업로드합니다.

6. Pipeline 활용

• Hugging Face의 pipeline을 사용하여 미리 훈련된 모델 'gec-fine-tuned'를 활용하여 문법 오류 수정 작업을 쉽게 수행합니다.

7. 서버 연결

• 파이썬 fast api를 이용해 빠르게 교정된 문장을 사용자에게 제공합니다.

팀 구성

• 진채영 팀장 백 프론트
• 박영현 프론트
• 이도은 프론트
• 임재홍 백 프론트 AI
• 정현수 백 프론트 AI
• 조대찬 백

각 팀원의 역할과 기여한 부분

진채영 [👑Team Leader: Front / back ]

• 카카오 소셜 로그인 [백/프론트]
• 학습 유저 랭킹 API [백/프론트]
• 클라이언트 아키텍처 및 배포
• 커스텀 및 학습 카테고리 단어장 클라이언트 CRUD
• React query를 통한 상태관리
• 커스텀 Hook을 통한 디바운스 적용 상태관리
• 페이지네이션 컴포넌트 구현
• 회원가입 및 로그인 페이지 에러 해결 및 구현
• 소셜 로그인 유저 이메일 추가 에러 해결 및 구현
• Figma를 통한 ui 기획
• Viewport 모바일용 버튼 생성 |

임재홍 [ Front / Back / AI ]

• 파이썬 FastAPI 서버 아키텍쳐 설정 및 배포
• 대화문 생성 api 구현 및 번역 api 연동
• 문법 설명 api 구현
• 대화문 생성 페이지 구현
• 학습완료 페이지 → 대화문 생성 연동

정현수 [ Front / Back / AI ]

• 학습 데이터 수집 및 전처리
• AI 모델 학습
• fine-tuned 모델 pipeline 배포
• db 데이터 전처리
• 파이썬 문법교정 api 생성 (FastAPI)
• 저장소 페이지 구현
• 검색 컴포넌트 생성
• 즐겨찾기 컴포넌트 생성
• 커스텀 모달 생성
• 문법 교정 페이지 구현

박영현 [ Front ]

• 단어 학습 페이지 구현
• 체험 학습 페이지 구현
• 메인 서비스 전체 레이아웃 구조 |

이도은 [ Front ]

• 서비스 네이밍
• 서비스 초안(Figma) 및 ui 선정 작업
• app (클라이언트 측 api 모듈, 페이지 이동) 및 index 세팅
• 로그인 페이지 및 기능 구현
• 회원 가입 페이지 및 기능 구현
• 루트 페이지 및 기타 서브 페이지 스타일 작업 및 버튼 기능 구현
• user Image 상태 관리 기능 구현
• user 정보 페이지 기능 구현
• user 학습 진행률 출력 기능 구현
• user 이미지 업로드 기능 구현
• 헤더 component 기능 및 유저 프로필 기능 구현
• Kakao 로그인 user의 이메일 추가 등록 및 modal 기능 구현 |

조대찬 [ Back ]

• 시스템 아키텍쳐 및 배포
• 서버 아키텍쳐
• 데이터베이스 아키텍쳐
• SSL/TLS
• 회원, 인증/인가 관련 API 구현
• 학습 API 구현
• 학습 진행률 API 구현
• 단어장 관련 API 구현
• 단어 검색 API 구현
• 리마인드 스케쥴러 구현
• jest TDD
• load test