뽀모모
뽀모도로 타이머 기반 화상 스터디 커뮤니티
40일간 프론트3, 백엔드 3, 디자이너2 총 8명이 합작한 프로젝트
솔직히 이번 프로젝트 잘 했지만 냉정하게 얘기하자면 100% 만족할 수 없는 프로젝트.
초반 프론트와 백엔드 사이에서 scope 범위에서 못하겠다고 징징거리던 백엔드를 설득시키는 초반 일주일동안 너무 힘들었던 이슈가 있었지만 그럼에도 기본적인 기능은 갖출 수 있어서 다행이었던 프로젝트.
다른 사람들이 봤을 때는 너무 잘했다라는 칭찬이 쏟아지지만 내부적으로는 결국 욕심부리던 쪽이 분위기 상 양보해서 양보한대로 남는게 없어서 아쉬운, 못하겠다고 겁먹던 쪽은 해보니까 되더라, 이왕 이럴거면 욕심 부릴껄 하고 후회하고있는 프로젝트.
이번 프로젝트 나의 역할
한마디로 얘기하자면 컨트롤 타워 라고 표현하고 싶다.
(서현님이 표현해준,,ㅎ)
FE종찬님은 BE재원님이랑 socket.io , webRTC , /video 페이지 집중 마크, FE서현님은 BE상협님과 CURD만 집중적으로 연습해 볼 수 있는 서비스를 해보고 싶다고 하셔서 새로 추가한 공부인증서비스를 집중마크 할 수 있도록 그 외 모든 부분을 책임지며 진행하였다.
매일 아침 10시에 조 모임이 있었으며, 각자 맡은 부분에서 어디까지 진행중인지 오류가 있으면 어디서 오류를 해결하느라 시간이 걸리는지 체크하며, 같이 정보를 찾아보며 해결해야 하는 부분은 한분 한분한테 붙으면서 진행하였다.
스크럼 관리는 각자 맡은 부분에 대해서 그룹노션에 남겼지만 왠지 관리가 깔끔하게 안된것같아서 아쉽다. 프로젝트 거의 끝나갈 때 쯤에야 JIRA라는 스케줄관리 시스템을 알게되었는데 구성은 우리가 FE그룹 노션으로 작성했던 것과 비슷하게 진행되는점에서 우리가 그래도 나름 이렇게 스크럼관리하는게 맞구나 했다.
(이쯤에서 보는 FE그룹노션 애자일보드 : 바로가기)
디자이너분들이 아주 이쁘고 깔끔하게 디자인을 해주셨지만 개발하는 과정에서 알고리즘 상(사실상 우리들의 기술부채)
뽀모모 Documents
프로젝트 개요
부하는 공간에 대한 제약이 높아진 상황에서 집에서 공부하는 사람들이 많아짐.Youtube ‘Study With Me’ 영상을 활용하거나, 2명까지 무료로 가능한 Zoom 으로 친구와 공부, 혹은 그루미나 열품타를 이용하여 화상으로 공부하는 학생들이 많아진 가운데, 이미 오랜 시간 공부하는 습관이 길러진 친구들과 달리, 집중시간이 짧은 학생들은 집에서 혼자 공부하는데 시간관리가 힘든 경향이 있음. 기존 화상 캠 스터디 서비스는 오랜 시간 긴 호흡으로 공부하는 사람들이 많아 상대적으로 집중력이 짧은 친구들이 이용하기 힘들다는 문제점이 있음.
화상 그룹스터디 앱은 많지만 웹 전용으로 나온 서비스는 별로 없음. 웹 전용 서비스중에 '그루미'라는 서비스는 엄청난 집중력과 이미 공부하는 습관이 잡혀진 유저가 많아 상대적으로 집중력이 짧은 친구들이 사용하기 부담스러움
프로젝트 가설
- 코로나로 인해 온라인 수업으로 대체되면서 PC/Laptop/Tablet 구매량이 늘어났기 때문에 웹을 이용하는 학생들이 많을 것이다.
- 뽀모도로 타이머 기법을 이용하여 공부시간과 쉬는시간을 명확하게 구분하면 집중력이 짧은 학생도 오랜 시간 집중이 가능할 것이다.
- 화상 캠을 이용하면 서로 공부 감시자의 역할이 가능하여 집중시간에 딴 짓을 하는 시간이 줄어들 것이다.
- 공부시간과 쉬는시간이 구분되면 총 공부시간 파악에 용이할 것이다.
- 내가 얼마나 공부했는지 자랑할 수 있다면 조금 더 공부하고싶은 의욕이 생길것이다.
프로젝트 핵심기능설명
- 카메라 ON/OFF 가능하여 카메라 끄고싶으면 끌 수 있음
- 미리 설정한 공부시간, 쉬는시간, 반복 횟수(라운드)에 맞춰 스터디룸을 생성하기
- 쉬는시간에는 그룹원과 채팅 가능, 공부시간에는 불가능
- 매 라운드가 끝날 때 마다 DB에 공부시간이 업데이트 되어 오늘 내가 공부한 시간 확인이 가능하며, 랭킹, 공부인증기능 등 내 공부시간 공유 가능
- 대시보드 형식의 디자인으로 PC, 태블릿 최적화이긴 하나 모바일 가로모드로도 사용이 가능
Scope and Limitation
* MVP는 bold로 표시
| Scope | Limitation |
|---|---|
| - 로그인(로컬/카카오/구글) | - 스터디룸 공부시간에 이모티콘 보내기 |
| - 회원가입 | - 친구추가 |
| - 개인정보수정 (프로필사진/닉네임/상태명/구분) | - 친구추가 알림 |
| - 스터디룸 만들기 | - 1:1 채팅 |
| - 스터디룸 그룹 타이머 | |
| - 스터디룸 그룹채팅 | |
| - 스터디룸 화상 캠 이용하기 | |
| - 공부인증 게시물 등록하기 | |
| - 공부인증 게시물 삭제하기 | |
| - 공부인증 댓글달기 | |
| - 공부인증 댓글 삭제하기 | |
| - 내 공부시간 | |
| - 랭킹 |
Architecture
wetRTC는 기본적인 보안으로 https 를 요구하여 AWS Certificate Manager(ACM)를 통해 SSL/TLS인증서를 발급받았고, 뷰어가 HTTPS를 사용할 것을 요청하도록 CloudFront를 구성하였다.
나머지 자세한 설명은 아래 바로가기를 통해 확인할 수 있습니다.
뽀모모 바로가기
