• 내용 : 프로젝트 기획서를 기반으로 한 소개, 일정 관리, 현재 개발 상태, 지금까지의 개발 시연 영상
안녕하세요 ‘모모’를 기획하고 개발중인 소인성 팀입니다.
저희가 준비한 모두의 모임을 위한 앱 ‘모모’의 중간발표를 시작하겠습니다.
모두의 모임을 위한 서비스 모모는, 누구나 모임을 쉽게 만들고 또 참여할 수 있도록 도와주는 모임 일정 관리 앱입니다.
취미, 학습, 네트워킹 등을 함께 하기 위해서, 쉽고 빠르게 모일 수 있는 플랫폼을 제공합니다.
먼저 이 아이디어를 기획하게 된 배경을 말씀드리겠습니다.
혹시 모각코를 하고 싶은데 사람들을 모으기 어려웠던 적, 다른 팀과도 자유롭게 교류하며 친해지고 싶었는데 그런 자리를 어떻게 만들수 있나 생각해보신적 있으신가요?
오프라인 만남을 원하시는 분들이 꽤 있는 것 같은데, 막상 모임을 만들거나 슬랙에 채팅을 보내는 경우는 드물다고 생각하였습니다. 이를 위한 모임 일정 플랫폼이 있으면 좋겠다라는 생각에 기획하게 되었습니다.
세부 기획에 앞서, 그동안 어떤 서비스들을 이용하여 모임을 정해왔고, 또 기존의 서비스들은 어떤 것이 있는지를 찾아보았습니다.
가장 많이 사용하는 것은 카카오톡일텐데, 우리에게 친숙하지만 텍스트로만 투표가 이루어져서 세세한 일정조율은 어렵고, 한 채팅방 내에서만 이루어진다는 아쉬움이 있었습니다.
웹 사이트 중에선 대표적으로 ‘when2meet’서비스와 ‘되는시간’이라는 서비스가 있었습니다.
먼저, when2meet의 경우 디자인 요소가 부족하여 사용자 만족도에 아쉬움이 있었고, 이전 모임일정들을 다시 찾거나 모아보는 것에 어려움이 있었습니다.
‘되는시간’은 when2meet보다 좋은 UI/UX를 제공하지만 비즈니스 위주의 기능을 제공하다 보니 가볍게 일정을 잡고 싶은 사용자들에겐 부담이 될 수 있다고 생각했습니다.
이 문제점들을 해결하면서, 저희만의 특징을 가진 모모를 기획하였습니다.
첫번째 특징으로는, 모임 참여 뿐만 아니라 댓글, 좋아요와 같은 SNS 기능들을 제공하여 사용자들간의 다양한 교류가 가능합니다. 서로 의견이나 알림을 줄 수 있습니다.
두번째로, 직관적이고 친근한 UI입니다. 기존 서비스들을 사용하면서 느꼈던 아쉬움을 토대로 UI를 개선하였고, 다양한 교류와 소통을 원하는 사용자들이 더욱 친근하게 접근할 수 있도록 구상하였습니다.
마지막으로, 주요 기능인 일정 관리에서 다양한 옵션들을 제공합니다. 그 중 모임을 만들때 멘션, 해시 태그를 활용하여 주제와 참여자를 특정 할 수 있고, 참여 인원을 제한하여 모임을 효율적으로 관리할 수 있습니다.
이런 기획을 가지고, 프로젝트 세팅을 시작하였습니다.
먼저, 필요한 기능을 정리하기 위하여 유저 스토리를 작성하였습니다.
각자 화면 구상을 생각하고 회의를 진행하면서 와이어프레임과 최종 UI를 구상했습니다.
UI를 바탕으로 구현해야할 요소들을 찾아 개발TASK를 작성하였습니다.
[[[[]]
애자일 방식을 차용하여, 에픽과 유저스토리로 분리하고 각각에서 구현이 필요한 기능들을 태스크로 적어 분담하였습니다. 담당 팀원과 진행 상태를 할당해서 서로의 작업 현황을 알 수 있게 관리하고 있습니다.
[[[[]]
일정과 진행하고 있는 스프린트를 모아두어 주요 일정과 작업 진행도를 확인할 수 있도록 하고 있습니다.
개발 시작에 앞서 협업을 하는 프로젝트이니만큼 깃허브와 코드 스타일에서의 컨벤션을 협의하였습니다.
커밋 메세지와 브랜치 전략, PR시 리뷰어 지정 등의 규칙과, 네이밍 eslint 등의 코드 스타일을 설정하였습니다.
다음으로, 어떤 기술 스택을 갖출지에 대해 고민하였습니다.
트렌드
→ React
→ TypeScript
→ redux
Redux-Toolkit
가장 많이 고민한 상태관리이지만 선택한 이유는 단순했습니다. 가장 많이 쓰이면서 FLUX 패턴을 공부하기 좋은 라이브러리
커뮤니티가 활발하고 재사용성이 좋은 리액트와, 동적 타이핑의 이슈를 막을 수 있고, 타입 지정을 통해 추론이 가능하기 때문에 협업에 이점이 있는 타입스크립트를 선택하였습니다.
중앙 상태 관리와 FLUX 패턴 학습을 위해 리덕스 툴킷을 사용하고,
그 외에도 이모션, 스토리북을 활용하며 vercel로 배포할 예정입니다.
협업을 위한 툴로 피그마, 깃허브, 노션 등을 사용하고 있습니다.
이렇게 세팅을 마쳤고, 저희는 지금까지 이런 방식으로 협업을 진행하고 있습니다.
코어타임을 시작하며 오픈 스크럼에서는 코어타임 동안 할 일을, 마치기 전엔 한 일을 공유하고 있고,, 안건이나 이슈 상황은 중간 중간에 자유롭게 이야기 하고 있습니다.
특별히 저희 팀은 야근 코어타임도 진행하고 있습니다. 혼자 개발하기 보다 디스코드에 같이 들어와서 단란하게 작업하고, 이슈나 문제 상황을 빠르게 공유하고 도움을 주고 받고 있습니다.
현재 저희팀의 개발 상황은, 공용으로 사용할 컴포넌트를 개발한 스프린트1과, 이를 활용하여 화면을 구현한 스프린트2까지 마쳤습니다. develop 브랜치로 병합을 위해 코드리뷰를 받고 있는 단계이기 때문에, 구상한 화면과 작동 화면 예시는 피그마를 통하여 보여드리며 발표 마치겠습니다.
<<피그마
피그마 보여주면서 말할 대본은 필요함 …
첫 화면은 메인페이지에서 시작합니다.
메인페이지는 헤더, 사용자 목록, 모임 모집글이 보이게 되는데요,
소셜미디어에서 흔히 보이는 게시판과 달리 저희 서비스는 모임 모집글이 보여집니다.
모집글이 곧 게시글 역할을 한다고 보시면 될 것 같습니다.
우선 로그인 화면으로 이동해보겠습니다.
헤더의 로그인 버튼을 누르면 로그인 화면으로 이동하게 되는데요,
가입한 이메일로 로그인을 할 수 있고 회원가입 버튼 클릭시 회원가입 페이지로 이동합니다.
회원가입 페이지에서는 이메일, 비밀번호, 이름 3가지 정보를 받습니다.
입력한 정보들이 유효하다면 가입이 승낙되고 로그인 페이지로 이동됩니다.
로그인 성공 시 메인페이지로 이동합니다.
로그인 상태에서 헤더에 3개의 메뉴 아이콘인 다크모드, 알림, 프로필이 나타납니다.
다크모드는 아직 계획단계에 있고
알림 클릭시 알림 툴팁이, 프로필 클릭시 내 정보 툴팁이 보여집니다.
사이드의 사용자 목록은 현재 접속중인 회원을 보여주고
키워드를 입력하여 사용자를 검색할 수 있습니다.
게시글도 검색이 가능하고 커스텀 데이터를 통해 정렬 및 필터가 가능합니다.
이 부분은 나머지 UI들이 완성되는데로 개발할 계획입니다.
본문의 나머지 UI를 설명하기에 앞서 저희 서비스의 주 기능인 모임 모집글이 생성되는 과정을 설명드리겠습니다.
+ 버튼을 클릭하면 모임 생성을 위한 모달이 나타납니다.
모임의 제목과 설명을 작성할 수 있고 설명에는 대표 이미지를 업로드할 수 있습니다.
모임에 참여할 인원도 제한할 수 있습니다.
모임 개설시 일정을 투표할 날짜를 설정합니다. 미정을 체크하면 모임 개설한 날짜 이후의 시간이 전부 투표 가능한 상태가 됩니다.
미정 해제시 투표할 날짜의 시작과 끝을 모임 개설자가 직접 입력해야 합니다.
이 부분은 어떤 날짜든 고를 수 있게 확장할 계획에 있습니다.
멘션의 경우 자신이 모임에 초대하고 싶은 사용자를 검색하여 추가합니다. 멘션을 받은 사용자는 멘션 알림을 받게 되고 초대에 수락하면 모임에 참여하게 됩니다.
태그는 개설하려는 모임의 주제를 나타냅니다. 어떤 태그든 입력이 가능하고 이후 검색에 노출되어 원하는 주제의 모임을 검색할 때 사용할 수 있습니다.
만들기 버튼으로 모임을 개설합니다.
모임방 상세페이지에서는 본문에 태그와 멘션된 사용자가 보여지고
댓글작성, 북마크 등록, 일정투표가 가능합니다.
모임 개설자는 개설할 당시 설정했던 정보들을 수정할 수 있습니다.
이제 타임테이블로 넘어가서 일정투표를 진행해보겠습니다.
기본적으로 내가 투표했던 일정표가 보여집니다.
투표하기를 클릭하면 다른 사람들이 투표한 일정표가 같이 보여지게 되는데
투표한 인원이 많은 시간대일수록 채도가 높아집니다.
클릭과 드래그를 통해 원하는 시간대에 투표하거나 투표를 취소할 수 있습니다.
저장하기 클릭시 내 투표가 업데이트됩니다.
일정표에 마우스를 올리면 그 시간대에 투표한 사람 목록이 툴팁으로 보여집니다.
다시 메인페이지로 이동해서 모임글 목록을 살펴보겠습니다.
언제모일까
카드 - 상태, 태그, 북마크
날짜 투표
이날모일래
정해진 날짜별 정렬
시간 투표, 투표 완료 게시글
일주일 기준으로 페이지네이션
~