목차

1. 서비스 소개
2. 기획 배경
3. 기능 소개
4. 기술 스택
5. 프로젝트 일정 및 산출물
6. 개발 멤버 및 회고

---

서비스 소개

서비스 설명

개요

• 한줄 소개 : 혼자말고 함께 공부하자
• 서비스 명 : STVDY(스터디)

타겟 🎯

• 혼자서 공부를 하면 집중력이 저하되는 사람들

• 남들과 같이 공부를 하면서 의욕을 내고 싶은 사람들

• 집중력을 높이는 나만의 테마를 사용하고 싶은 사람들

  👉 ** 혼자서 공부를 하기보다 여럿이서 공부하고 싶은 모든 사람들 **

기획 배경

배경

자기 개발의 시대. 언제 어디서든 나를 성장시키는 세상입니다. 많은 사람들이 공부를 하겠다 다짐하지만, 혼자서 하는 공부는 집중력이 저하되거나, 미루게 되곤 합니다. STVDY은 이러한 집중력 저하와, 공부를 미루는 것에 대해 상호 경쟁과 타인의 의식을 통해서 집중력을 향상 시킬수 있습니다.

STVDY의 장점은 다음과 같습니다. 먼저. 자신만의 프로필을 통해 나를 은유적으로 드러낼 수 있으며, 나만의 집중력 테마를 이용해, 더욱 공부 및 회의에 집중할 수 있게 합니다. 또한 화상 스터디 또는 회의시 나의 내용을 공유하기 위한 화면 공유기능이 탑재되어 있으며, 이와 함께 기기 선택 변경도 가능합니다. 그리고 나를 드러내기 싫어하는 사람을 위한 캠 오프, 마이크 오프와 부담없이 서비스에 접근가능해, 사용자가 부담없이 사용가능하겠습니다.

목적 🥅

스터디, 집중할 수 있는 분위기에서 하자

의의

• 비대면 상황에서 어디서든지 다른 사람들과 함께스터디를 할 수 있는 온라인 비대면 스터디    
• 질문게시판으로 궁금증을 공유하고 서로 해결하며 공부 효과 상
• 프로필과 나만의 테마를 이용해 집중력 상승

기능 소개

메인

1. 비로그인시

2. 로그인시

회원가입 및 로그인

1. 로그인 창

2. 회원가입 창

a. 가입되지 않은 이메일인 경우

b. 가입된 이메일인 경우

3. 이메일로 전송받은 전송번호 기입 후 회원 가입

질문게시판

1. 최신질문순 질문 목록

2. 해결중인 질문 목록

3. 답변 없는 질문 목록

4. 질문 세부

5. 질문 작성

프로필

1. 이미지 변경 전

2. 이미지 변경 후

테마 변경

1. 테마 변경 전

2. 테마 변경 후

스터디룸

1. 스터디룸 생성

a. 화면 우측 상단 검색창 옆 + 버튼을 클릭 후 나오는 입력창에 내용 기입

• 필요시 키워드 및 비밀번호 여부 기입 및 제한 인원수, 종료 시간, 프라이버시 체크

2. 스터디룸 참여

a. 화면 좌측 사이드 바의 스터디룸 선택 후 들어가려는 스터디룸 선택

b. 해당 방 정보 확인 후 방 입장 여부 선택

• 비밀번호 입력란 있을 시 정확한 비밀번호 입력 후 입장 가능

3. 스터디룸 내부 화면

a.메시지 탭

b. 참가자 확인 탭

c. 그라운드 룰 확인 탭

d. 마이크 및 카메라 오프 기능

e. 마이크 및 카메라 기기 선택 기능

• 우측 사이드바 하단의 설정 이모티콘을 누르고, 기기를 선택

• 필요시 화면공유 기능 사용 가능

챗 GPT

1. 챗 GPT 사용

• 모든 페이지 좌측 상단에 있는 챗 GPT 클릭 후, 개인 opean AI API 등록 후 사용 가능

기술 스택

1. webRTC

webRTC란?

WebRTC (Web Real-Time Communication)는 웹 브라우저 간에 플러그인의 도움 없이 서로 통신할 수 있도록 설계된 API 입니다. 음성 통화, 영상 통화, P2P 파일 공유 등으로 활용될 수 있습니다. 

openvidu

WebRTC를 보다 간단하게 적용할 수 있고, 다양한 프레임워크와 호환성이 높은 openvidu를 사용하여 프로젝트를 진행했습니다.

What is OpenVidu?

적용

STVDY 에서는 화상회의 및 스터디를 하기 위해 openVidu를 사용합니다.

2. 개발 환경

1. BackEnd
   • openjdk 17.0.7
   • spring boot 3.1.2
   • mysql 8.0.34
   • redis 5.0.7
   • openvidu 2.28.0
   • intellij 2023.2
2. FrontEnd
   • node 18.16.1
   • vue 3.3.4
   • openai 3.3.0
   • vscode 1.79.2

3. System Architecture

프로젝트 일정 및 산출물

프로젝트 일정

프로젝트 기획 및 설계 : 23.07.04 ~ 23.07.21
개발 : 23.07.24 ~ 23.08.11
배포 : 23.08.07 ~ 23.08.11
테스트 : 23.08.14 ~ 23.08.17
시연 및 발표 : 23.08.18

프로젝트 진행

1. Git flow

---

Git flow 사용을 위해 sourcetree 프로그램을 사용하였고 우아한 형제들의 git flow을 참고했습니다. front 와 back 으로 나누어 feature의 하위 브랜치를 사용하였으며 매일 오전 스크럼 이후 back 브랜치와 front 브랜치로 merge 하여 사용했습니다.
commit message는 feat(대기방): 채팅방 구현 과 같이 통일하여 작성했습니다.

2. Jira

---

매주 월요일 오전 회의에서 금주의 진행 이슈를 백로그에 등록했습니다. 전주에 완료하지 못한 이슈나, 앞으로 진행할 이슈들을 추가합니다.

• 에픽은 회원, 미팅, 설계 등으로 구성했습니다.
• 레이블은 BE, FE, full 으로 구성했습니다.
• 스토리는 명확한 전달을 위하여 API 명세서 작성와 같이 작성했습니다.
• 작업현황을 실시간으로 지라에 반영하여 현재 팀원이 어떤 작업을 하고있는지, 일정에 딜레이가 있는지 한 눈에 알아볼 수 있게 했습니다.
  

프로젝트 산출물

1. Figma

2. ERD

3. API 문서

개발 멤버 및 회고

• 안세혁 : 프론트 전반에 거쳐 코딩을 하고 백엔드와의 중간다리 역할을 하면서 미숙한 점이 많아 실수도 많았지만 그만큼 배운 것도 많은 기회였습니다. 아이디어는 다양했으나 짧은 기간 시간 관리를 잘 하지 못하여 모두 구현하지 못한 것이 아쉬움으로 남습니다. 다음 프로젝트는 완벽한 시간 관리로 돌아오겠습니다.

• 이대근 : DB구성을 JPA라는 새로운 프레임워크와 진행하면서 혼동될 때도 있었지만 이론적으로도 기술적으로도 발전이 많았습니다. SPRING을 다루는 실력도 늘었다고 생각하며 프로젝트 전반에 대한 시야가 넓어진 좋은 경험이였습니다.

• 김소이 : Backend Rest API 개발, Security, 인증 및 인가를 담당하였습니다. 더 많은 기술을 다뤄보고 싶었지만, 진행과정에서 발생하는 여러 변수로 인해 해보지 못해 아쉬움이 있습니다. 하지만 이번 프로젝트를 통해 프로젝트 진행 중에 필요한 점이 무엇인지 확인할 수 있어서 좋았습니다.

• 윤우혁 : Backend Rest API 개발, Infra 및 CI/CD 구축을 담당하였습니다. 적용하고 싶은 기술적 요소는 많았으나 시간적인 부분에서 다소 아쉬운 점이 남습니다. 프로젝트 진행 과정에서 좋은 동료들과 함께 소통 측면과 개발 측면에서 큰 성장이 있어 뜻깊은 경험으로 남았습니다.

• 김범기 : 처음으로 다수와 함께 하는 프로젝트를 진행하게 되면서 소통의 중요성과 기획단계가 얼마나 중요한지에 대해서 몸소 체감했습니다. webRTC 기술의 front부분을 맡으면서, 해당 기술에 대해 지식이 전무해 학습하면서 프로젝트에 도입하는 것이 프로젝트 기간 동안 크나큰 고통이었지만, 이 고통이 성장에 도움이 되었습니다.

• 안대현 : 프론트엔드로 같이 프로젝트를 진행했지만, 취업함으로 중도퇴소하게 되어 끝까지 함께하지 못해 아쉽습니다. 잠깐의 프로젝트가 앞으로의 성장에 도움이 되었습니다.