서비스 개요 대본
안녕하세요 동영팀 프로젝트 중간 발표를 맡은 남주영입니다
저희 동영팀은 뽀모라는 서비스를 기획하고 개발 중입니다
기획서를 보면서 서비스 및 프로젝트 소개를 해드리겠습니다
🔥 서비스 개요
1. 서비스 주제 ✅
뽀모는 뽀모도로와 커뮤니티를 결합한 서비스입니다
뽀모도로는 시간관리 기법 중 하나로, 작업의 효율을 높이기 위해 25분간 집중 시간을 가진 후 5분을 휴식하는 것을 반복하는 것입니다.
뽀모는 간단한 모집글을 통해 관심사가 비슷한 사람들끼리 모여, 뽀모도로 기법을 통해 함께 작업이나 학습을 할 수 있는 웹 사이트입니다.
뽀모도로 + 커뮤니티를 결합한 주제다 → 뽀모도로가 무엇이냐 → 서비스 주제 소개 읽기
같이 뽀모해요!
*뽀모도로 기법이란?
뽀모도로 기법(Pomodoro Technique)은 시간 관리 방법론으로, 보통 타이머를 이용하여 25분간 집중해서 일을 한 다음 5분간 휴식하는 방식으로 진행합니다.
'뽀모도로'는 이탈리아어로 토마토를 뜻합니다. 프란체스코 시릴로가 대학생 시절 토마토 모양으로 생긴 요리용 타이머를 이용해 25분간 집중 후 휴식하는 일처리 방법을 제안한데서 그 이름이 유래했다고 합니다.
2. 기획 의도 ✅
기획 의도를 말씀 드리겠습니다.
저희 뽀모는 앞서 말씀 드렸다시피 뽀모도로와 커뮤니티라는 키워드를 결합하여 기획되었는데요
첫번쨰, 뽀모도로 기법은 많은 사람들이 작업 시 효율적으로 시간을 관리하기 위해 사용하고 있습니다.
그 예로 이러한 뽀모도로 타이머를 제공하는 유튜브 영상 컨텐츠들을 확인할 수 있습니다.
두 번째, 현재 온라인으로 모여 함께 공부하는 문화가 많은 사람들 사이에 자리 잡았습니다.
그 예로 자신의 공부하는 모습이나 공부량을 실시간으로 공유하는 웨일온 스터디, 열품타와 같은 공부 커뮤니티 서비스들이 있습니다.
현재 대부분의 뽀모도로 서비스는 타이머만 제공하며 개인을 타겟으로 하고 있습니다.
저희는 많은 사람들이 이용하는 뽀모도로 기법을 커뮤니티와 결합하여, 관심사가 비슷한 사람들끼리 모여 소통하며 뽀모도로 기법을 통해 학습할 수 있는 서비스가 있으면 좋겠다고 생각했습니다.
이러한 배경으로 뽀모를 만들게 되었습니다.
뽀모 = 뽀모도로 + 커뮤니티
뽀모도로
정해진 시간동안 효율적으로 학습 혹은 집중하고 싶을 때, 많은 사람들이 뽀모도로 기법을 사용합니다.
공부 커뮤니티
개발자들 사이에서 “모각코”가 하나의 문화로 자리 잡았습니다.
이에 따라 자신의 공부하는 모습이나 공부량을 실시간을 공유하는 웨일온 스터디, 열품타와 같은 서비스들이 많이 이용되고 있습니다.
뽀모도로 + 커뮤니티 = 뽀모
기존 대부분의 뽀모도로 서비스들은 집중 시간과 휴식시간을 반복할 수 있는 타이머만 제공하고 있으며, 개인을 타겟으로 하고 있습니다.
저희는 뽀모도로 기법을 관심사가 비슷한 사람들끼리 모여 함께 할 수 있는 환경을 가진 서비스가 있으면 좋겠다고 생각했습니다.
뽀모도로와 커뮤니티가 합쳐진 서비스, 바로 뽀모입니다!
3. 기능
저희 뽀모의 핵심 기능은 특정 시간 동안 함께 뽀모도로 기법을 통해 학습할 사람을 모집하고, 해당 시간 동안 소통하며 함께 학습하는 것입니다.
자세한 것은 디자인 결과물과 함께 설명드리도록 하겠습니다.
핵심 기능 - 함께 하는 뽀모도로
- 타이머 기능을 통한 집중 시간과 휴식 시간의 반복 (뽀모도로 기법)
- 25분 집중, 10분 휴식 단위인 기존 뽀모도로와 달리 최근 유행하는 50분 집중, 10분 휴식을 기준으로 설정
- 비슷한 관심사를 가진 사람끼리 모여 뽀모도로에 참여할 수 있게 함
- 커뮤니티성 강화
- 학습 효율 향상
- 집중 시간에 적어 놓은 댓글(궁금한 것이나 잡담)을 휴식 시간에 공개함으로써 재미 요소 추가
추가 기능
*추후 발전 방향
- 쉬는 시간에 미니 게임을 할 수 있는 기능
- 단위 시간(집중시간, 휴식 시간)을 커스텀하는 기능을 추가한다
4. 브레인 스토밍
저희 뽀모는 이러한 브레인스토밍 과정을 거쳐 탄생한 아이디어 입니다.
스크린샷
Figma
5. 유저 스토리
저희는 유저 스토리를 정의한 후 각각의 시나리오를 작성하여 기획을 구체화 했습니다.
6. 와이어 프레임
또한 유저 스토리를 기반으로 와이어 프레임과 플로우 차트를 그렸스비낟.
스크린샷
Figma
7. 플로우 차트
Figma
서비스 소개(디자인) 대본
디자인 결과물을 통해 저희 서비스를 본격적으로 소개드리겠습니다.
로그인 + 회원가입
저희 서비스에 처음 방문 시 로그인 페이지가 나옵니다.
그리고 해당 버튼을 통해 회원가입 페이지에서 회원가입을 할 수 있습니다.
메인
로그인을 하면 볼 수 있는 메인 페이지입니다.
헤더에서 전체 검색을 할 수 있고 마이페이지와 알림을 확인할 수 있습니다.
우측 사이드바에서는 전체 유저 목록을 볼 수 있고 유저 검색을 할 수 있습니다
메인 영역에서는 뽀모도로 카테고리를 볼 수 있습니다
원하는 뽀모도로 카테고리를 클릭하면 뽀모도로 방 목록을 볼 수 있습니다
뽀모 방 목록
카드를 클릭하면 상세한 정보를 확인할 수 있습니다.
뽀모 모달
이 정보를 확인한 후 뽀모 참여하기 버튼을 통해 뽀모에 참여합니다
뽀모 방
휴식 시간에는 댓글을 자유롭게 확인할 수 있습니다.
집중 시간이 되면 새로운 댓글은 확인할 수 없으며 본인이 새로 단 댓글과 이미 공개되었던 댓글 밖에 볼 수 없습니다
뽀모도로 시작 시간 이후에 나간다면 다시 참여할 수 없습니다.
뽀모 방 목록
이 버튼을 통해 뽀모 방을 생성할 수 있습니다.
이러한 인풋들을 입력해야 하며 시작 시간과 반복횟수를 설정하면 종료 시간이 자동으로 계산됩니다
참고로 저희 뽀모는 실제 유행 중인 컨텐츠들에서 많이 채택 중인 시간 단위인 50분 집중, 10분 휴식을 기준으로 삼고 있습니다
여기까지 서비스 소개였습니다.
팀 소개 대본
👥 팀 소개
저희 팀을 소개해드리겠습니다.
1. 팀원
저희는 김동영 멘토님 팀으로, 팀장인 저와 김규란님, 김 ,,, 훈님으로 구성되어 있습니다.
멘토님김동영
팀장남주영
팀원김규란
팀원김순요
팀원김은아
팀원백승훈
2. 팀 목표
저희 팀의 목표입니다.
읽기
이런 과정을 통해 팀 목표를 정했다.
그 외에도 팀 문화, 규칙 등을 정해 좋은 협업을 하기 위해 노력하고 있습니다.
- TS, Next.js 잘 써보기
- 문서화 잘하기
- 레드 플래그 이슈 바로 공유하기
- 무엇이든 기본적으로 규모를 작게 가져가되, 퀄리티와 완성도를 높이기
이런 과정을 통해 팀 목표를 정했어요.
각자 원하는 목표
- 규란
- 기능을 컴팩트하게 해서 실제 운영될 수 있는 서비스로 만들기
- 사용하는 기술들의 docs 제대로 읽어보기 (기술을 제대로 사용하고 싶다.)
- 트러블 슈팅 내용 꼭 문서화하기 (나중에 다 까먹음….ㅠ..)
- 프로젝트 진행 과정도 문서화가 잘 되면 좋겠다!
- 주영
- 규모는 작게, 대신 완성도 있게, 어려운 일이 있다면 규모를 줄이되 대충하지 않기
- 문서화 잘하기
- 도전적인 기능 해보면 좋음 그치만 안 해도 괜찮음
- 프로젝트에 알맞은 툴, 스택 가져가기
- 순요
- 타입스크립트, next js를 프로젝트에서 활용해보고 싶다.
- 최소한의 기본 기능 구현하기!
- 프로젝트를 진행하는 과정을 밀도있게 경험하고 싶다.
- 문서화 필수!(기록이 생명)
- 코드 리뷰나 기술 공유 활발하게..
- 적극적인 커뮤니케이션!(레드 플레그 이슈 반드시 바로바로 공유!)
- 승훈
- 상태관리를 통해 유지 관리를 해보고 싶다. (가능하면 리덕스만 뺴고…)
- 최소한의 기능을 먼저 핵심 구현하여 마지막엔 에러부터 예외사항등을 처리해보고 싶다
- 타입 스크립트를 효율적으로 사용해보고 싶다. (인터페이스로 보기 편하게 분리)
- Next.JS를 통해 웹사이트를 제작한다. (SSR CSR 분리까진 아니더라도 다른 기능 써보기)
- 은아
- nextjs의 주요 기능을 활용하고싶다! (리액트에 비해 가지는 넥스트의 장점 활용)
- 타입스크립트 제대로 활용!!!
- 문제가 생기면 30분~1시간 정도 고민해보고 공유하기!
팀의 목표
- TS, Next.js 잘 써보기
- 문서화 잘하기
- 레드 플래그 이슈 바로 공유하기
- 무엇이든 기본적으로 컴팩트 있게 가져가서 최대한 완성도 높이기
3. 팀 문화
이것만은 꼭 지켜조!
- 작업 관련 내용은 최대한 공개적으로 이야기 하기 (개인 간의 내용이더라도 슬랙에 스레드 만들어서 이어나가기)
- 회의 불필요하게 길게 하지 않기
- 프로젝트는 프로젝트 사람은 사람 행복하고 즐거운 프로젝트 합시다! (사적 감성 담지말기)
- 아이디어, 같이 생각해볼 내용이 있다면 바로 꺼내보기
이런 과정을 통해 팀 문화를 정했어요.
- 주영 🎄
- 승훈 🔰
- 순요 ✨
- 규란 🍳
- 은아 ✈️
각자 원하는 팀 문화
- 주영
- 다양한 의견 존중하기
- 의견을 말할 때는 이유를 함께 제시하기 ✨🔰
- 응답 빠르게 하기 (응답 못할 상황 최대한 사전에 공유하기, 당장 답을 못하더라도 인지했다는 노티 주기) 🍳 ✨
- 상황을 솔직하게 공유하기
- 작업 관련 내용은 최대한 공개적으로 이야기 하기 (개인 간의 내용이더라도 슬랙에 스레드 만들어서 이어나가기)🎄 🍳✈️
- 회의 불필요하게 길게 하지 않기 ✈️🔰 🍳✨
- 질문 할 때 맥락을 정확하게 전달하기 🎄
- 승훈
- 프로젝트는 프로젝트 사람은 사람 행복하고 즐거운 프로젝트 합시다 (사적 감성 담지말기)✈️🔰 🍳
- 너무 흥분해서 들이 받을거 같을 때 10분 생각하는 타임 가지기
- 강요 X, 압박 X 서로의 사정 배려해주기✈️🔰
- 아닌거 같은데 X → 아 이건 어떻게 생각해 O
- 순요
- 토론할 때 사적인 감정 배제하기.(의견을 말하는 사람뿐만 아니라 듣는 사람도!) 🎄✨
- 화내지 않기
- 약속 잘 지키기
- 반대 의견을 제시할 때는 근거를 가지고 이야기 하기.
- 호응 잘해주기(감탄사 중요!)
- 규란
- 공적인 회의에서 존댓말 쓰기!
- 긴 회의보다는 짧은 회의를 자주하자!
- 핵심적인 내용 담아서 의사소통 하기
- 아이디어, 같이 생각해볼 내용이 있다면 바로 꺼내보기 🎄 ✨ ✈️
- 같이 개발에 집중하는 포커스 타임이 있으면 좋겠다! 🎄 🍳
- 마음의 문을 열고, 긍정적으로 생각하기
- 지각하지 않기.. (나한테 하는 다짐)🔰
- 은아
- 즐겁게 하기
- 자신만의 시각으로 보지말기
- 기한 잘 지키기!
4. 팀 규칙
업무 프로세스
- 스크럼은 매일!
- 월 ~ 목 : 오후 5시
- 금 : 오후 11시
- 뽀모에 집중하는 시간, 포커스 타임!
- 월 ~ 목 : 오후 3 - 5시
- 금요일 : 오후 9 - 11시
- 카메라, 화면 공유 둘 다 필수
컨벤션 및 깃허브 협업 방식
코드 컨벤션
- 기본적으로 카멜 케이스, 타입 및 컴포넌트 파스칼 케이스, 상수 어퍼 스네이크 케이스
- 줄임말 X
- 컨벤션은 자유롭게 가되 가독성이 좋지 않다면 리뷰에서 수정 의견이나 요청할 수 있음
커밋 컨벤션
- 작업 효율을 위해 최대한 빠르게 완성할 수 있는 subject case 추천 ex FEAT → feat
- 커밋 단위는 되도록 작고 의미에 맞게 하기
참고
![[Git] 커밋 메시지 규약 정리 (the AngularJS commit conventions)](https://www.notion.so/image/https%3A%2F%2Fstatic.velog.io%2Ffavicon.ico?table=block&id=17a94350-3853-4340-a4bb-d4c1b0958350&cache=v2)
![[Git] 커밋 메시지 규약 정리 (the AngularJS commit conventions)](https://www.notion.so/image/https%3A%2F%2Fvelog.velcdn.com%2Fimages%2Foutstandingboy%2Fpost%2Fbb737678-1796-4778-bcb2-b407fab3460d%2FKakaoTalk_20200129_214020465_02.jpg?table=block&id=17a94350-3853-4340-a4bb-d4c1b0958350&cache=v2)
이슈
- 이슈 단위
- 최대한 잘게 나누기
- 원활한 코드 리뷰를 위하여
- 애자일 협업을 위하여
- 누가 봐도 무슨 업무인지 알 수 있도록 명확하게 작성하기
브랜치 전략
main ← 이슈 단위로 브랜치 따서 작업 후 머지
브랜치 네이밍
subject/#이슈번호 Pull Request
- 이슈 개발을 마친 후, 메인 브랜치에 머지하기 전에 거치는 소통 과정
- 코드 리뷰를 달아줄 팀원을 배려하며 작성해야 함
- 글 명확하게 쓰기
- File Changed 개수 ≤ 15 추천 ..
- 애초에 이슈를 제대로 분리
- PR 메시지에 들어갈 내용
- 어떤 것을 구현했는지 요약/어떻게 구현했는지 설명
- PR Point (우려되는 점, 집중해서 봐주었으면 하는 점 등)
- 구현 결과 스크린샷
리뷰
- 리뷰 룰 - PN 룰 코드 리뷰 in 뱅크샐러드 개발 문화
- 리뷰 짝
- 10,11 - 규란-주영, 승훈-은아
- 12,13 - 규란-승훈, 주영-은아
- 14,15 - 규란-은아, 주영-승훈
- 16,17 - 규란-주영, 승훈-은아
- 18,19 - 규란-승훈, 주영-은아
- 리뷰 짝은 리뷰 필수, 그 외는 최대한 모두 해주기 또는 크리티컬한 것만 찾아내주기
머지 방식
- PR 머지 방식 - 머지 커밋 생성
- 머지 시 리뷰 짝의 어프루브 필수
- 빌드 테스트 통과 못 받으면 머지 X
5. 사용 기술
저희 프로젝트는 이러한 기술을 사용 중입니다
- 언어: TypeScript
- 라이브러리: Next.js
- CSS: Emotion
- 린트: ESLint, Prettier
- 패키지: Npm
- API: Axios, React Query
- 배포: Vercel
6. 타임 라인
저희는 이러한 타임라인을 통해 프로젝트를 진행하고 있습니다.