-
Watch Me 서비스는 관리감독기능을 통해 공부의지가 약한 사람들을 도와주는 비대면 스터디 플랫폼 입니다.
의지가 약해 스스로 공부를 못해 시간을 버리고 계시지는 않으신가요? 혼자서도, 여러명이서도, 여러분들의 올바른 공부습관, WATCH ME가 책임집니다.
-
서비스 설명 : AI 감독 시스템을 제공하는 비대면 화상 스터디 플랫폼
-
주요 기능 :
- WebRTC를 통한 실시간 화상 스터디 미팅룸
- OpenCV를 통한 화면분석으로 Detection 기능
- 공부 및 패널티 log를 통한 사용자 공부기록 제공
- KakaoPay를 통한 포인트 충전
- 그룹내 스프린트를 통한 성과부여, 공부의지 독려
🖱Backend
- IntelliJ
- Spring Boot
- Spring-Boot-Jpa
- Spring Security
- Java 11
- AWS EC2
- S3
- Gradle
- MySQL
🖱Frontend
- Visual Studio Code
- REACT v18.2.0, React Router v6
- Sweet Alert v2, react-cookie, react-google-charts v4
- node.js v16.15.0
- HTML5, CSS3, JavaScript
🖱Web RTC
- openvidu 2.19.0
🖱Drowsiness / Cell Phone / Person Detection
- Yolo V7
- Open CV
🖱CI/CD
- docker
- nginx
- DLIB
Python, OpenCV, dlib 코드를 사용하여 얼굴의 랜드마크들을 감지합니다.
Dlib EAR알고리즘은 눈의 6가지 랜드마크들을 추출하고 좌표들의 너비와 높이를 계산하여 눈이 감겨졌는지 떠졌는지를 측정합니다.
1초에 한번 꼴로 이미지를 전송하여 졸고 있는지를 판단하고 있는데 연속적으로 눈을 감고 있으면 졸고 있다고 판단해서 알림이 가도록 하였습니다.
YOLO(You Only Look Once) 알고리즘 분석법 중에서는 가장 최근에 나왔으며 성능이 높은 YOLOv7을 채택하였습니다.
이를 이용해 객체를 인식했습니다.
-
자리이탈 감지
-
휴대폰 감지
-
WebRTC (Openvidu)
오픈 비두를 활용하여 화상채팅을 구현하였습니다. SessionID로는 DB에 저장된 고유값인 RoomID를 사용하였습니다. 화면공유와 채팅 기능을 구현하였습니다. 또한 감지 기능을 넣어서 졸음 감지, 핸드폰 감지, 자리 이탈이 감지되면 정해진 수만큼 패널티를 받았을 경우 강제 퇴장 처리를 하였습니다.
- 배포
도커를 통해 OpenVidu를 배포하였고, Nginx를 이용한 프론트엔드 무중단배포, Nohup을 통한 백엔드 자동 무중단 배포를 구현하였습니다.
- Error Handling
CustomException 및 @Validation을 통해 모든 ERROR를 Handling하고자 하였습니다.
C200 (200, "SUCCESS"),
C300 (300, "INVALID"),
C500 (500, "INTERNAL SERVER ERROR"),
C501 (501, "INVALID JWT"),
C502 (502, "LOGIN FAILED"),
C503 (503, "NOT MEMBER"),
C504(504, "NO MEMBER"),
C505(505, "INVALID EMAIL KEY"),
C506(506, "EMAIL KEY EXPIRED" ),
C509(509, "ALREADY PROVIDER MEMBER"),
C510 (510, "NO GROUP"),
C511(511, "NO CATEGORY"),
C512(512, "FILE UPLOAD FAILED"),
C513(513, "MEMBER PASSWORD FAILED"),
C514(514, "EMAIL DUPLICATED"),
C515(515,"NICKNAME DUPLICATED" ),
C516(516, "INVALID PWD LENGTH"),
C520 (520, "NO SEARCH DATA"),
C521 (521, "INVALID VALUE"),
C522 (522, "NO ROOM"),
C523 (523,"NOT PARTICIPANTS"),
C524 (524, "NAME ALREADY EXIST"),
C525 (525, "ROOM PWD NOT INTEGER"),
C526 (526,"INVALID ROOM PEOPLE NUM"),
C527 (527, "INVALID END DATE"),
C528 (528, "NOT IMAGE FILE"),
C529 (529, "IMAGE TOO BIG"),
C530 (530, "NOT ROOM OWNER"),
C531 (531, "FAILED CREATE STUDY LOG"),
C532 (532, "FAILED SAVE STUDY LOG"),
C533 (533,"NO SPRINT"),
C534 (534, "ALREADY APPLIED"),
C535 (535, "NOT MY GROUP"),
C536 (536, "NOT GROUP MANAGER"),
C537(537, "NOT STATUS YES"),
C538(538, "NOT ENOUGH POINT"),
C540(540, "NOT APPLIED"),
C541(541, "SPRINT NOT RUNNING"),
C543(543, "ALREADY SPRINT ALIVE"),
C544(544, "START DATE ERROR COMPARE EXIST SPRINT"),
C550(550, "TOO MANY PEOPLE"),
C551(551, "ROOM PWD FAILED"),
C552(552, "YOU BANNED"),
C565(565, "Not Authorized"),
C566(566, "Banned"),
C567(567, "Applied Already"),
C568(568, "Group Full"),
C595(595, "INVALID ACCESS"),
C596(596, "DTO ERROR"),
C597(597, "KAKAO PAY ERROR" ),
C598(598, "INVALID POINT VALUE" ),
C599(500, "DATE PARSING FAILED" ),
C569(569, "ALREADY GET POINT" ),
C570(570, "SPRINT NOT NO"),
C571(571, "ALREADY SPRINT DELETE" ),
C572(572, "ALREADY GROUP MEMBER" ),
C573(573, "ALREADY SPRINT MADE" ),
C545(545,"START DATE ERROR" ),
C546(546, "END DATE ERROR" ),
C547(547,"SPRINT BAN" ),
C548(548, "ONLY FOR GROUP MEMBER"),
C574(574,"CAN NOT UPDATE SPRINT ROOM" ),
C576(576, "강퇴되었습니다." );- Git
- Jira
- Notion
- Mattermost
- Webex
- Discord
- BackEnd
- 클래스 이름은 첫 글자 대문자, 그 외는 Camel Case로 작성한다.
- 메소드는 소문자로 시작하는 동사형으로 작성한다.
- DB의 경우 Snake Case로 작성한다.
- URI의 경우 RestFul API 명세를 따른다.
- FrontEnd
- JS 함수이름은 Camel Case, 파일 이름은 Pascal Case로 작성한다.
- CSS id, class 네이밍은 [이름-내용__세부내용]의 형식을 따랐다.
-
Git Flow model을 사용하고, Git 기본 명령어 사용한다.
-
Git Flow 사용 브랜치
- feature - 기능
- develop - 개발
- master - 배포
- fix - 에러 수정
-
Git Flow 진행 방식
- 각각의 기능별로 Feature Branch를 만들어 Develop Branch로 PR(Pull Request) 후 Merge 한다.
- Merge 시에는 FE/BE 담당자들이 코드리뷰를 통해 Conflict 확인 및 Approve 후 Merge한다.
- 제목에서 커밋 TYPE은 영어 대문자로, 아래에 Type Convention에 맞춰 작성
- TYPE뒤에 띄어쓰기 없이!!
-을 넣고 띄우지 않고 MESSAGE를 입력한다. - MESSAGE는 한글, 영어 자유롭게 입력.
- MESSAGE는 무엇을 했는지에 대해서 써야하고 문장형으로 쓰지 않음.
- 안에 상세 설명에는 보충설명 내용이 들어가야함.
FIX - 버그, 오류 해결
ADD - FEAT 이외의 부수적인 코드 추가 / 라이브러리 추가/ 새로운 VIEW나 ACTIVE 생성
FEAT - 새로운 기능 구현
DEL - 쓸모없는 코드 삭제
REMOVE - 파일삭제
REFACTOR - 내부 로직 변경이 없고, 코드개선하는 리팩토링
CHORE - 그 외의 일(버전 코드 수정, 파일 이동, 가독성이나 변수명 reformat)
COMMENT - 필요한 주석 추가 및 변경
DOCS - README나 WIKI 등 내용 추가 및 변경
TEST - 테스트 코드 추가
MERGE - Branch 병합
협업 및 일정, 업무 관리를 위해 Jira를 이용하였습니다. 매주 월요일 오전 회의에서 한 주동안 진행되어야 할 주 단위 계획을 짜고, 진행할 이슈들을 스프린트를 만들어 등록했습니다. 스프린트는 일주일 단위로 진행하였습니다.
- Epic : backend, frontend, webrtc로 나누어 구성하였습니다.
- story :
마이페이지에서 프로필 변경 버튼을 통해 프로필을 변경 한다와 같이 자세하게 작성하였습니다. - subtask : 부작업을 나누어 세세하게 업무 관리를 진행하였습니다.
이 외에, subtask에 예상 시간을 기록해 더 세세하게 일정 관리를 했고 협업 메신저(Mattermost)에 알람을 등록하여 작업 상황을 실시간으로 확인할 수 있도록 했습니다.
-
EPIC : 프로젝트 진행간의 큰 틀 사항
EX) [공통] 기획, [공통] 설계, [FE] 회원기능, [BE] 회원기능 -
Story : 실제 프로그램의 기능 개발 등이 되어야함
EX) [FE] 회원가입페이지 구현, [BE] 회원가입 API 구현 -
Task : 프로젝트 진행간의 기능 개발 외적인 부분
EX) 아이디어 기획 회의, ERD 설계, DOCKER 설치, AWS 연동, 개인공부 등 -
Sub-Task : Story나 Task단위에서 나오는 작은 기능
EX) [FE] 회원가입페이지 Btn 구현, [BE] Member Class 구현 등
1차 ~ 10차까지 아이디어 기획에 대한 회의록, API명세서, Git 및 Jira Convention 내용 정리, 공부한 내용에 대한 정리 (타 팀원 이해를 돕기 위한), 프로젝트 회고록, Bug Report 정리
- A108 : 전체적 중요한 공지에 활용
- A108_BuildFile : Version 별 Jar파일, Front Build 파일 올리기
- A108_Archiving : 참고자료, 링크 등 공유해야할 파일들 보관
- A108_Bot : Jira, Git 의 Commit, Issue 등 자동알림
- A108_Scrum : 일일 스크럼 내용 기록
| PORT | 이름 |
|---|---|
| 443 | HTTPS |
| 8443 | Openvidu |
| 3306 | MySQL |
| 81 | Backend SpringBoot |
| 80 | Http FrontEnd |
| 5000 | Flask OpenCV |
| 홍석인 | 고동훤 | 박철민 | 장태경 | 김영훈 |
|---|---|---|---|---|
 |
 |
 |
 |
 |
| Leader & Backend | Backend | Backend | Frontend | Frontend |
- 홍석인(팀장)
- 전반적인 시스템 아키텍처 구축(EC2, NGINX, OPENVIDU 등)
- Spring Security + JWT를 이용한 로그인, 회원가입, OAUTH 2.0
- Spring Boot를 사용한 방관리 API(방 생성, 방세부정보, 방조회, 방삭제, 방수정, 방 참가, 방 나가기 등), 그룹 스프린트 API(스프린트 생성, 스프린트 조회, 스프린트 삭제, 스프린트 참가, 스프린트 참가취소, 스프린트 시작, 스프린트 정산 등), Point API(카카오페이 포인트 충전, 포인트 환급 등) 구현
- Custom Exception, Valdation Message를 통한 백엔드 Error Handling
- Dlib + OPEN CV + EAR알고리즘을 통한 졸음 감지 기능 구현
- 전반적인 테스팅 및 진행사항 확인
- UCC 기획 및 제작
- 장태경
- React와 Context API을 활용하여 SPA 구현
- Figma를 이용한 페이지 제작
- 프론트 개발(회원가입, 로그인, 메인 페이지, 공개룸 모집, 그룹 모집, 마이페이지, 내그룹, 그룹 상세페이지, 그룹/룸 CRUD 구현)
- CSS를 통한 전체적인 페이지 스타일링 및 CSS 스타일 총괄.
- openvidu를 기존 코드에 이식하고 Video On/Off, Audio On/Off, 화면공유, 채팅 등 기본 기능 구현.
- SweetAlert를 활용해 alert 개선.
- 박철민
- flask를 이용한 화면 분석 서버 구축
- 룸 참가자들의 룸 별 패널티 기록 카운트 및
- YOLOv7을 이용하여 객체 인식을 통한 핸드폰 감지, 자리 이탈 감지 기능 구현
- Dlib를 이용한 졸음 감지 기능 구현
- 메일 전송을 통한 비밀번호 초기화 기능 구현
- Spring Boot를 사용해 백엔드 그룹 신청 관리 API 구현(그룹 신청/신청 반려/신청 승인/그룹 강퇴)
- 고동훤
- SprintBoot, Data-JPA를 활용한 그룹(생성/조회/수정/삭제) 및 그룹 관리(참가/조회/승인/반려/탈퇴/추방/그룹장위임), 메인(그룹 및 룸 조회/로그인 정보) 및 마이페이지(내 그룹/내 일자별 공부시간/내 일자별 패널티/내 포인트 등) 관련 API 구현
- React(Front)와 SpringBoot(Back)간의 테스트 및 에러 수정
- Schedule을 활용한 내 공부내역 및 스프린트 시작 및 종료 관리
- 김영훈
- React를 통한 SPA 구현
- Figma를 이용한 페이지 개선
- fetch를 활용한 통신 구현
- openvidu를 활용하여 비디오 및 비디오 캡쳐 이미지 전송.
- Modal을 활용한 페이지 개선
✅ 다소 짧은 기간동안 1가지의 서비스를 실제 서비스처럼 완벽하게 구현하고자 하였고, 실제 구현할 기능이 매우 많았으나 팀원들의 노력덕분에 구현하고자 했던 기능들을 전부 구현할 수 있었습니다. 또한 CustomException을 통해 서비스의 안정성을 높이고자 하였습니다.
✅ 비대면으로 작업간에 WebEx를 이용하여 개발하는 시간에는 항상 들어와있도록 하였습니다. 이를 통해 개발환경을 대면으로 개발하는 환경처럼 조성할 수 있었고, 원활한 커뮤니케이션을 이뤄낼 수 있었습니다.
✅ 매일 오전 10시에 Scrum을 진행하며 일일 개발진행사항을 빠르게 파악할 수 있었으며, 매주 월요일마다 진행된 Jira의 Sprint 시스템을 통해 주별로 진행되는 사항을 파악할 수 있었습니다.
✅ 개발에 있어서 서로가 어려운 점이 있다면, 공유를 통해 같이 해결방안을 찾아보고자 하였습니다.
✅ 공부를 하며 개발을 하다보니, 서로가 좀 더 깊숙하게 파고든 내용이 있었고, 이를 Notion에 정리하며 설명해주면서 다같이 개념적 이해를 도와 개발을 좀 더 수월하게 할 수 있었습니다.
✅ Git Branch Merge간에 코드리뷰를 철저히하여 Conflict에 대한 관리를 하였습니다. 또한 해당 기능을 개발한 사람이 자리를 비우게되도, 백엔드와 프론트엔드 협업간 코드 수정 등이 원활하게 이루어질 수 있었습니다.
🚨 기획부분에 있어서 상세하게 요구사항 정의가 제대로 되지 않아서 API 명세가 조금 늦게 나오게 되었고, 화면설계서 또한 늦게 나오게 되었습니다. 이로 인해 개발진행간 조금 더딘 부분이 발생하였습니다.
💡 기획에 있어서 상세하게 요구사항을 정의하고, 문서화를 명확히하여 추후 개발에 차질이 없도록 해야합니다. 변경되는 내용은 문서에 남기거나, 메세지를 남겨 상대방이 명확하게 인지할 수 있도록 해야합니다.
🚨 프론트와 연동하는 테스트 중 JAR파일에 대한 명세가 조금 부족해 DB Table 구조가 바뀌는 등 문제가 발생하였습니다.
💡 JAR 파일을 배포할 때 Version 혹은 어떠한 부분을 위한 테스트인지 설명이 꼭 필요합니다. 또한 DB Table의 구조가 바뀌는 경우 전 JAR파일로 인해 변경되지 않도록 주의해야 합니다. 이를 방지하기 위해 TEST용 DB와 실제서비스용 DB를 나눠서 운용하는 방법을 택하여 진행해야 합니다.