yunjichoi9151 / ddoing

애니메이션 shadowing과 영어 단어 drawing을 통한 영어 학습 플랫폼

🧒 어린이 영어 학습 서비스, 또잉(ddoing)

📅 진행기간

2023.02.27(월) ~ 2023.04.07(금) (6주)

✏️ 개요

애니메이션 shadowing과 영어 단어 drawing을 통한 영어 학습 플랫폼

• 애니메이션 shadowing을 통한 자연스러운 영어 표현 학습

• 영어 단어 drawing을 통한 게임 형식의 단어 학습 진행

• 경험치, 시바 프로필 등 보상을 통한 성취감 향상

🌈 기획배경

1. 영어 말하기의 중요성 증가

기업의 입사 지원 조건이 될 만큼 오픽, 토익 스피킹 등 영어 회화가 중요

2. 영어에 흥미를 이끌어 낼 수 있는 학습 방식의 필요성 증가

지루한 공부가 아닌 게임처럼 즐기며 흥미를 가지도록 하는 학습법 필요

3. 갈수록 증가하는 영어 사교육 비용에 대한 부담

🌟 주요 기능

📌 메인 페이지

• 애니메이션 쉐도잉 인기리스트 top6 조회

• 단어 드로잉 결과 유사도에 따른 명예의 전당 top6 조회

🎭 애니메이션 스크립트 페이지

• 학습여부, 발음 평가 점수 등에 따른 검색

• 애니메이션 별 역할 선택 및 해당 역할 스크립트 발음 평가

• 선택한 역할 대사에 따른 동영상 제어

🎨 영어 단어 그림 그리기 페이지

• 학습할 단어 제시

• 제시 단어를 사용자가 그린 뒤 유사도 평가

• 제시 단어에 대한 의미, 사진, 예문 제시

🐶 마이페이지

• 시바도감 : 레벨에 따른 잠금 해제

• 학습한 애니메이션 영상 최신순 조회

• 내가 그린 그림 최신순 조회

• 회원정보 조회 및 수정

🖥 서비스 화면

💻 랜딩 화면

📌 메인 화면

🔍 애니메이션 리스트 화면

🎭 애니메이션 상세 화면

🎨 단어 드로잉 화면

🐶 마이페이지 화면

👩‍💻 팀원

이름	GitHub	개발	역할
임성민		FE / BE / AI	✨ 팀장 & AI AI 학습 및 서빙 DB설계 Drawing Page Logic 최적화
권용재		FE / AI	✨ PM & AI AI 학습 데이터 전처리 & 분류 모델 Frontend에 연결 MainPage, Drawing Page 구성 및 관리
윤민주		BE / CI/CD	✨ 프로젝트 자동 배포 환경 구축 Drawing 기능 API 구현 발음 평가 오픈 API 활용
조수정		BE	✨ BE 팀장 & DBA Animation 기능 API 설계 및 구현 Drawing 기능 File Upload 구현
조승희		FE / BE	✨ JWT 로그인 백/프론트 구현 와이어프레임 설계 User관련 CRUD 프론트 및 백 API 작성 화면 및 로고 디자인
최윤지		FE	✨ FE 팀장 와이어프레임 설계 Animation 관련 Page & 기능 담당(발음 평가) Three.js를 활용한 3D model 렌더링

⚙ 기술 스택

🛠 개발 환경 및 IDE

✔ Front-end

• React 18.2.0
• Redux 4.2.1
• TypeScript 4.9.5
• Vite 4.1.0
• VSCode

✔ Back-end

• Java 11
• Spring Boot 2.7.9
• Hibernate
• Gadle 7.6.1
• Intellij
• MySQL 8.0.32

✔ AI

• Python 3.8.16
• FasAPI 0.94.0
• TensorFlow 2.11.0

✔ Infra

• Nginx 1.18.0
• docker 20.10.21
• Jenkins 2.387.1

📃 산출물

💡 와이어 프레임

💡 요구사항 명세서

💡 API 명세서

💡 ERD

💡 서비스 아키텍처

📊 AI

• Dataset

  

  • Quick, Draw! Dataset 활용
  • #class : 340, #images : over 40,000,000 ea

• Model

  
  • EfficientNetV1와 비교했을 때 4배 빠른 학습속도와 6.8배 적은 parameter수로 비슷한 정확도를 달성
  • MBConv 대신에 Fused-MBConv를 사용
    • MBConv의 1x1 conv + 3x3 depthwise conv 대신에, 하나의 3x3conv를 사용하여 학습속도 개선
  • non-uniform scaling strategy 사용
    • stage가 증가할 수록 layer가 증가하는 정도를 heuristic하게 결정

📂 폴더 구조

• ✔ AI

  .
  ├── backend
  │   ├── Dockerfile
  │   ├── class_pickle_db
  │   ├── efficientnetv2-b0_model.h5
  │   ├── new_main.py
  │   ├── requirements_tensorflow.txt
  │   ├── run.sh
  ├── eda
  ├── models
  └── utils
  

• ✔ Back-end

  ├── Dockerfile
  ├── build.gradle
  ├── gradle
  │   └── wrapper
  │       ├── gradle-wrapper.jar
  │       └── gradle-wrapper.properties
  ├── gradlew
  ├── gradlew.bat
  ├── settings.gradle
  └── src
      ├── main
      │   └── java
      │       └── backend
      │           ├── BackendApplication.java
      │           ├── animation
      │           │   ├── controller
      │           │   ├── domain
      │           │   ├── dto
      │           │   ├── repository
      │           │   └── service
      │           ├── auth
      │           ├── common
      │           ├── draw
      │           │   ├── controller
      │           │   ├── domain
      │           │   ├── dto
      │           │   ├── repository
      │           │   └── service
      │           └── user
      └── test
  

• ✔ Front-end

  .
  ├── @types
  │   └── react-audio-analyser
  │       └── index.d.ts
  ├── Dockerfile
  ├── index.html
  ├── nginx.conf
  ├── package-lock.json
  ├── package.json
  ├── public
  │   ├── Ddoing.ico
  │   └── assets
  ├── src
  │   ├── App.tsx
  │   ├── components
  │   │   ├── Shiba
  │   │   ├── animation
  │   │   ├── carousel
  │   │   ├── common
  │   │   ├── drawing
  │   │   ├── land
  │   │   └── user
  │   ├── fonts
  │   ├── interface
  │   ├── main.tsx
  │   ├── pages
  │   ├── redux
  │   │   ├── configStore.hooks.ts
  │   │   ├── configStore.ts
  │   │   ├── index.ts
  │   │   ├── modules
  │   │   │   ├── animation
  │   │   │   ├── drawing
  │   │   │   └── user
  │   │   └── util
  │   ├── router
  │   ├── styles
  │   └── vite-env.d.ts
  ├── tailwind.config.cjs
  ├── tsconfig.json
  ├── tsconfig.node.json
  ├── types
  │   ├── animation
  │   ├── drawing
  │   ├── reduxStateType.ts
  │   ├── twin.d.ts
  │   └── user
  └── vite.config.ts
  

🖼 협업툴

• Git
• Notion
• JIRA
• MatterMost
• gather