🔥 서비스 개요1. 서비스 주제2. 기획 의도뽀모도로공부 커뮤니티뽀모도로 + 커뮤니티 = 뽀모3. 기능핵심 기능 - 함께 하는 뽀모도로추가 기능4. 브레인 스토밍5. 유저 스토리6. 와이어 프레임7. 플로우 차트👥 팀 소개1. 팀원2. 팀 목표3. 팀 문화4. 팀 규칙5. 사용 기술6. 타임 라인
🔥 서비스 개요
1. 서비스 주제
같이 뽀모해요!
서비스명 뽀모서비스 소개- 뽀모도로* + 커뮤니티
- 간단한 모집글을 통해 관심사가 동일한 사람들끼리 모여 정해진 시간 동안 함께 집중하여 학습하는 웹 사이트입니다.
*뽀모도로 기법이란?
뽀모도로 기법(Pomodoro Technique)은 시간 관리 방법론으로, 보통 타이머를 이용하여 25분간 집중해서 일을 한 다음 5분간 휴식하는 방식으로 진행합니다.
'뽀모도로'는 이탈리아어로 토마토를 뜻합니다. 프란체스코 시릴로가 대학생 시절 토마토 모양으로 생긴 요리용 타이머를 이용해 25분간 집중 후 휴식하는 일처리 방법을 제안한데서 그 이름이 유래했다고 합니다.
2. 기획 의도
뽀모 = 뽀모도로 + 커뮤니티
뽀모도로
정해진 시간동안 효율적으로 학습 혹은 집중하고 싶을 때, 많은 사람들이 뽀모도로 기법을 사용합니다.
공부 커뮤니티
개발자들 사이에서 “모각코”가 하나의 문화로 자리 잡았습니다.
이에 따라 자신의 공부하는 모습이나 공부량을 실시간을 공유하는 웨일온 스터디, 열품타와 같은 서비스들이 많이 이용되고 있습니다.
뽀모도로 + 커뮤니티 = 뽀모
기존 대부분의 뽀모도로 서비스들은 집중 시간과 휴식시간을 반복할 수 있는 타이머만 제공하고 있으며, 개인을 타겟으로 하고 있습니다.
저희는 뽀모도로 기법을 관심사가 비슷한 사람들끼리 모여 함께 할 수 있는 환경을 가진 서비스가 있으면 좋겠다고 생각했습니다.
뽀모도로와 커뮤니티가 합쳐진 서비스, 바로 뽀모입니다!
3. 기능
핵심 기능 - 함께 하는 뽀모도로
- 타이머 기능을 통한 집중 시간과 휴식 시간의 반복 (뽀모도로 기법)
- 25분 집중, 10분 휴식 단위인 기존 뽀모도로와 달리 최근 유행하는 50분 집중, 10분 휴식을 기준으로 설정
- 비슷한 관심사를 가진 사람끼리 모여 뽀모도로에 참여할 수 있게 함
- 커뮤니티성 강화
- 학습 효율 향상
- 집중 시간에 적어 놓은 댓글(궁금한 것이나 잡담)을 휴식 시간에 공개함으로써 재미 요소 추가
추가 기능
*추후 발전 방향
- 쉬는 시간에 미니 게임을 할 수 있는 기능
- 단위 시간(집중시간, 휴식 시간)을 커스텀하는 기능을 추가한다
4. 브레인 스토밍
스크린샷
Figma
5. 유저 스토리
유저 스토리
6. 와이어 프레임
스크린샷
Figma
7. 플로우 차트
Figma
👥 팀 소개
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=7d28d94e-916b-4d93-9056-f48257b60165&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=7d28d94e-916b-4d93-9056-f48257b60165&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