🤽 할 일에 빠져드는 시간, DiveIn

효율적인 시간관리와 집중을 위해
AI가 늘 당신과 함께

DEMO

DEMO SITE

DEMO YOUTUBE

UI/UX

🎨 Main page

🎨 Overview

🤷‍ Service Needs

'줌터디'와 같은 언택트 시대의 새로운 공부법이 등장했습니다. 비대면 시대에서 집에서 혼자 공부하려니 쉽지 않아 친구들과 줌을 켜서 상호 감시하는 용도로 화상회의를 쓰기도 합니다.

혼자 있으면 경각심이 떨어져 해야할 일들에 대해서 소홀히 하거나 다른 곳에 시선이 가기 마련입니다. 이 때 웹캠을 통해서 감시를 하는 것도 좋지만, 얼굴이 공개되는 것을 꺼리거나 기존에 화상회의 플랫폼을 통해 타인에 의해 집중력을 관리하는 것에 대한 한계가 있음에 주목했습니다.

얼굴인식을 통해서 집중도&감정 분석 결과를 제공하고, 같은 스터디원들 간에 집중력을 대결할 수 있는 Gamification요소를 넣어 혼자있어도 집중력있게 일/공부를 끝낼 수 있도록 만들고자 합니다. 뿐만 아니라 untact 에서 ontact 로, 많은 사람들과 함께 작업을 하며 상호 생산성을 높여주는 기제로서 작용시키고자 합니다.

🔑 Core Service Logic

• 캠을 통해 얼굴을 인식하여 감정을 분석해 현재 집중하고 있는지, 또는 자리를 비웠는지를 체크해 집중도를 계산합니다.
• 기존의 카페에서 각자 공부하지만 개인의 부담감을 높여 일에 몰입하게 만드는 것처럼, 화상 통화 기술로 온라인에서도 한 공간에 모여 스터디를 하게 합니다.
• 스터디하는 중에는 캠이 신경 쓰이지 않게 나의 화면을 아바타로 대체하고, 현재 집중하고 있는지 그 척도를 아바타에서 보여줍니다.
  
  

🚀 Tech

1. 얼굴 인식

안면인식	이모지 씌우기	배경 처리	스켈레톤 제거

2. 썸네일 공유
   1. 짧은 시간 간격으로 (해당 서비스에서는 2초) 프론트에서 ML 분석 후, Canvas에 옮겨 아바타 이미지를 생성
   2. Server에 Presigned URL을 요청해 S3 업로드 URL을 받는다.
   3. S3에 직접 업로드하고, 소켓 통신을 통해 같은 방에 있는 유저들에게 나의 업데이트된 아바타 URL 정보를 전송한다.
   4. 다른 유저들은 해당 URL을 받아 화면을 업데이트 해준다.
      
      

💻 Development Stack

FrontEnd

• React
  
• Ant.d, styled-components

Server

• Language/Framework
  
  • Node.js :: 실시간 정보처리
    
  • Django :: 그외 API 서버 및 서버간 통신
    
• DB/Cache: MySQL, redis
  
• Cloud Service : EC2, S3, RDS, ACM, Route53
  
  

👨‍💻 Frontend

1. Atomic Design & Contoller 패턴으로 구성
2. ML :: 웹캠을 통하여 실시간으로 영상을 받아내, 얼굴 모션인식을 분석
   얼굴을 인식하여 그 위치와 각도에 맞게 이모지를 붙여내 가상의 아바타를 생성

👨‍💻 Server

서버 부하분산을 위해 MSA 도입, 다음과 같은 서버들로 구성

1. WebRTC 서버 :: 실시간 영상전송 서버 Node.js
   WebRTC 기반 openvidu 이용 실시간 영상전송
   
2. WebRTC -- Django Adapting Server Node.js
   Django와 Node 사이에서 세션마다 필요한 token 발행 및 삭제하는 서버
   
3. Thumbnail 서버 :: 실시간 썸네일 전송 서버 Node.js
   frontend에서 인식하여 캐릭터를 입힌 이미지 썸네일을 5초 간격으로 포워딩하는 서버
   
4. 인증 서버 :: 회원 정보 관리 서버 Node.js
   회원가입, 로그인, 토큰 등의 멤버 정보 관리
   
5. Pool 서버 :: 풀 정보 관리 서버 Django
   풀 입장, 풀의 각 멤버의 상태 트래킹하는 서버
   
   

📑 Server Architecture Diagram

📑 ERD

🤙 API

1. WebRTC 서버 :: 실시간 영상 전송 서버 (socket)
   
2. WebRTC -- Node Adapting Server
   기본 url :: https:/webrtc.clubapply.com/
   POST /token 방 입장 시 socket connection 설정 위한 pool마다의 토큰 제공
   DEL /token 방 퇴장 시 socket connection 해제, 삭세
   
3. 인증 서버
   기본 url :: /api/auth
   POST /auth/user 회원가입
   DELETE /auth/user 회원탈퇴
   POST /auth/user/signin 로그인
   POST /auth/user/logout 로그아웃
   GET /auth/user/refresh 리프레시 토큰 발급
   POST /auth/user/verify 토큰 해독 및 유효성 확인, 유효하면 해당 유저 정보 제공
   
4. 풀 Server
   기본 url :: /pool
   GET /pool 기존에 존재하는 풀 리스트
   POST /pool/enter 새로 풀에 입장
   POST /pool/leave 자리 비움
   POST /pool/back 자리 복귀
   POST /pool/exit 방 나감