최종 완성 후에 ppt에 페이지 번호 붙일게요
[1p 시작]
안녕하세요, 모두의 모임을 위한 앱 모모를 개발한 소인성 팀입니다!
[2p 목차]
저희팀의 최종 발표는 팀 소개, 서비스 소개, 저희가 협업한 방식과 과정,
그리고 개발 과정, 모모의 기능 소개 및 시연,
마지막으로 개발하면서 저희가 기술적으로 공부하고 도전했던 것이 무엇이었는지
순서로 진행하겠습니다.
[3p 팀 소개]
저희 팀은 4명으로 이루어져있고,
예진님이 팀장과 노션관리를,
민수님이 리마인더 역할을,
건호님은 회의록 관리를
그리고 동건님이 명세서 기록과 깃허브 관리를 맡아주셨습니다.
개발에 있어서는 크게 페이지를 단위로 역할을 분담하였습니다.
[4p 기획 배경]
저희 서비스를 기획하게 된 배경을 설명 드리겠습니다.
모각코 모임을 열고 싶은데 막상 슬랙에 보내기도 망설여지셨거나, 혹은
팀원들과의 오프라인 약속을 정할 때 날짜와 시간을 정하는데에 불편함은 없으셨나요?
모각코, 자유로운 오프라인, 온라인 게임모임 등
다양한 상황에서 모임 일정 관리가 필요한데,
부담없고 친근하게 사용할 수 있는 플랫폼이 있으면 좋겠다고 생각하였습니다.
[5p 기획 배경]
그래서 저희는, 모임을 쉽게 만들고 쉽게 참여할 수 있는 플랫폼!을 기획하였습니다.
[6p 기획 과정]
본격적인 기획 과정을 말씀드리겠습니다.
각자 구상한 화면을 모아 와이어프레임을 만들었습니다.
참고한 다양한 서비스들에서의 아쉬운 부분들을 보완할 수 있는 UI를 만들기 위해 회의를 진행하였고,
최종 UI 디자인과, 협업을 위한 디자인 시스템을 구현하였습니다.
[7p 기획 과정]
최종 UI를 바탕으로 유저 스토리를 작성하면서 상호 보완해나가며 기획을 마무리하였습니다.
이렇게 구상한 UI와 유저 스토리를 바탕으로 기능 명세서를 작성하였습니다.
애자일 방식을 차용하여, 에픽과 유저스토리로 분리하고
각각에서 구현이 필요한 기능들을 태스크로 적어 분담하였습니다.
담당 팀원과 진행 상태를 할당해서 서로의 작업 현황을 알 수 있게 관리하였습니다.
[8p 그라운드룰]
이러한 기획을 갖추고 저희는 다음과 같은 방법으로 협업을 진행하였습니다.
먼저, 저희는 저희팀만의 특별한 룰인 ‘야근 코어타임’을 진행하였습니다.
오전에 진행되는 코어타임 외에도 저녁 8시부터 12시까지
디스코드에 접속하여 함께 개발하는 시간을 가졌습니다.
서로에게 동기부여가 되어주고,
질문이나 이슈사항이 있을 때마다 바로 소통할 수 있다는 점에서 팀원 모두 만족한 규칙이었습니다.
또한, 오픈 스크럼, 마무리스크럼, 야근 코어타임 앞 뒤로 각자 한일과 할일, 그리고 이슈사항을 디스코드로, 또 슬랙으로 활발히 공유하며 작업하여서 온라인임에도 빠르게 소통할 수 있었습니다.
[9p]
저희는 작업 기간을 스프린트 단위로 나누어 진행하였습니다.
짧게는 3일, 최대 5일정도를 하나의 스프린트 기간으로 두었고,
회의를 통해 각 스프린트 내에서 해야할 일과 각자의 할일을 분담하였습니다.
[10p]
기획회의 제외 총 5번의 스프린트를 진행하였고,
스프린트 1,2에선 주로 공통 컴포넌트 구현,
2,3에선 공통 컴포넌트를 활용한 페이지 구현과 api 연결을 진행하였습니다.
4에선 자체적으로 테스트한 후 이슈를 해결해가며 수정 보완하는 과정을 거쳤고
마지막 스프린트5에서 배포와 추가적인 이슈 해결, 그리고 리팩토링을 진행하였습니다.
[11p 개발 컨벤션 - 깃허브]
개발에 있어서 저희 팀은 깃허브 컨벤션과 코딩 컨벤션을 설정하였습니다.
먼저 깃허브 컨벤션을 설정 함으로써 협업의 효율을 증가시키고자 하였습니다.
커밋, 브랜치, PR, Merge 규칙 등을 문서화하였으며,
이를 통해 명확한 커뮤니케이션이 가능하였고 깃허브에서의 충돌을 최소화할 수 있었습니다.
[12p 개발 컨벤션 - 코드스타일]
또한, 코딩 컨벤션을 통해 코드의 일관성과 가독성을 향상시키고자 하였습니다.
prettier, eslint 등의 도구와 코드 네이밍, 스타일과 폴더 구조 등을 정립하였습니다.
이렇게 동일한 규칙성을 가지게 된 코드는,
팀원들의 이해도의 향상과 협업의 원활함을 이끌어 낼 수 있었습니다
[13 기술스택]v
저희는 다음과 같은 기술 스택을 선정하였습니다.
커뮤니티가 활발하고 재사용성이 좋은 리액트와,
동적 타이핑의 이슈를 막을 수 있고, 타입 지정을 통해 추론이 가능하기 때문에
협업에 이점이 있는 타입스크립트를 선택하였습니다.
상태관리를 위하여 리덕스 툴킷을 선택하였는데,
중앙 상태 관리와 FLUX 패턴 학습을 위해서였고,
실제 개발을 하면서 리덕스 툴킷의 작동 과정과 사용법을 많이 익힐 수 있었습니다.
리덕스 thunk를 사용하여, 서버상태와 로컬상태를 동시에 컨트롤할 수 있다는 장점이 있었지만,
로컬, 서버 상태가 혼용되면, 의도치않은 업데이트가 발생하거나
상태값이 원하는 시점에 가져와지지 않는 등의 문제가 발생할 수 있어서
이를 주의하며 사용할 수 있었습니다.
배포에는 vercel을 사용하였고
디자인과 Api 패칭 확인을 위해 피그마와 포스트맨을 활용하였습니다.
[14 서비스 기능 - 모임 카드 모아보기]
이제 저희의 서비스를 간단히 소개해드리려고 합니다.
먼저 웹사이트에 접속하면 처음 보이는 화면인데요,
[ >> 다음]
현재 접속중인 유저들을 확인할 수 있고, 특정 유저를 검색하여 찾을 수 있습니다.
[ >> 다음]
특정 모임을 검색하여 찾을 수도 있습니다.
[ >> 다음]
메인 기능으로 열린 모임들을 모아 볼 수 있는 화면이 있습니다.
왼쪽 ‘언제 모일래’ 탭에서, 날짜가 정해지지 않은 모임들을 모아 볼 수 있고
+ 버튼을 눌러 새로운 모임을 생성할 수 있습니다.
[ >> 다음]
오른쪽 ‘이날 모일래’ 탭에선, 오늘날짜부터 일주일 동안의 모임을 날짜별로 볼 수 있습니다.
특정 날짜로 정해진 모임들이기 때문에, 사용자가 가능한 날짜에 열린 모임에 참여하거나, 새로운 모임을 생성할 수 있습니다.
[15 서비스 기능 - 모임 만들기] v
모임 만들기 화면 입니다.
모임을 만들때는 모임 만들기가 표출이 되고, 수정할 때는 모임 수정하기가 나타납니다.
제목, 설명란, 날짜를 입력을 해야 만들기를 작성할 수 있습니다.
또한 대표 이미지 추가, 확대, 삭제를 할 수 있으며 참여 인원들을 조절 할 수 있습니다.
그리고 투표 시작과 끝을 선택하여 그날 하루만 투표를 진행할 수 있습니다.
또한 언제 모일래 탭에서 진행할 경우 기본적인 날짜 설정은 오늘로 default가 되어 있으며,
이날 모일래 탭에서 특정 날짜에서 추가를 할 경우 특정 날짜에 대해서 진행이 됩니다.
그리고 멘션 기능을 활용하여 사람에게 알림 및 멘션을 할 수 있고,
태그 기능을 활용하여 어떠한 주제인지 적을 수 있습니다.
[16 서비스 기능 - 타임 테이블] v
다음은 타임테이블이라는 일정 투표 기능입니다.
모임 개설자가 설정한 시작, 끝 날짜에 맞춰 원하는 날짜, 시간을 투표할 수 있습니다.
일정표에서는 현재 투표에 참여한 인원이 많은 시간대일수록
채도가 높은 색상으로 표시되며
오른쪽 아래에 참여 인원 숫자가 표기됩니다.
마우스 호버시 참여자 목록을 툴팁으로 확인할 수 있습니다.
투표하기 클릭시 테이블이 두 영역으로 나눠지고
왼쪽 테이블에서 자신의 투표 내용을 마우스 드래그하여 변경할 수 있습니다.
두 테이블의 스크롤은 동기화되어 있어서 어느 테이블에서 스크롤하든 동시에 움직입니다.
[17 시연]
이번엔, 저희 서비스에 직접 접속하여 이용해보면서 자세한 소개를 해드리겠습니다.
각자 맡은 페이지에 보여주고자 하는 주요 기능 넣어주세요.
또한 추가로 보여주고자 하는것도 해당 페이지에 추가로 넣어주세요.
메인페이지
- 전체 유저 목록과 그 중 온라인인 유저
- 특정 포스트 검색
- 날짜 미정 모임 목록과 특정 날짜 모임 목록 구분하여 보기
- 새로운 모임 혹은 특정 날짜에서 새로운 모임 생성 버튼
대본~
앞선 소개에서처럼 저희의 첫 화면은 이렇게 구성되어있습니다.
왼쪽엔 유저들의 전체 목록을 볼 수 있고, 현재 접속중인 유저가 상단에, 그리고 진한 색으로 나타나는 것을 볼 수 있습니다. 특정 유저를 클릭하면 해당 유저의 프로필로 이동합니다.
아래쪽에선 특정 모임을 검색할 수 있습니다. [직접 입력해보기 시연]
검색결과를 클릭하면 해당 모임 상세화면으로 이동합니다.
가운데엔 두가지 탭이 있습니다.
먼저, “언제 모일래” 탭은 날짜가 정해지지 않은 모임을, [이날 모일래]는 특정일로 정해진 모임으로 이루어집니다.
각각의 모임 카드들은 제목과 작성자, 태그와 좋아요 여부를 보여줍니다.
“이날 모일래”탭을 보면, 오늘날짜부터 일주일동안의 모임을 볼 수 있습니다. 아래 버튼을 사용해서 지난 주, 다음주로도 이동할 수 있습니다.[버튼 클릭 시연]
언제모일래 탭의 카드와 다르게 특정한 날짜로 정해진 모임이기 때문에 정해진 모임날짜도 함께 볼 수 있습니다.
각각에서 +버튼을 누르면 새로운 모임을 만들 수 있습니다. 이런 모임카드 생성버튼과 각 모임카드에 좋아요를 누르는 것은 회원만 가능합니다[좋아요누르고 ‘로그인하세요’뜨는거 시연]
회원 기능을 사용하기 위해서 회원가입과 로그인을 진행하겠습니다.
[시연]
로그인 페이지 v
- 로그인 체크
민수님, 유저플로우 처럼 시연영상 들어갔으면 해서 아래처럼 수정해보았습니다! 어떠신가요회원가입을 하지 않은 경우, 아래 회원가입 버튼을 눌러서 회원가입을 진행할 수 있습니다.
[회원가입 누르기]
회원가입을 위하여 이메일, 비밀번호, 비밀번호 재확인, 이름을 입력해야합니다.
이메일 입력시 이메일 유효성을 체크하고, 중복된 이메일의 경우 안내 문구를 보여줍니다.
비밀번호 또한 유효성 체크를 진행합니다.
가입버튼을 눌러 회원가입을 진행하면 로그인 페이지로 이동합니다.
[가 입 눌러서 로그인으로 이동]
로그인페이지에서 앞서 가입한 이메일과 비밀번호를 입력할 수 있습니다.
로그인 입력시에도 유효성을 검사하여 안내 문구를 보여줍니다.
올바른 이메일과 비밀번호를 입력하고 확인 버튼을 누르면,
메인 페이지로 이동할 수 있습니다.
대본~
로그인페이지에서는 이메일과 비밀번호를 입력할 수 있는 란이 있고
로그인 체크 하여 틀릴 경우 문구를 알려줍니다.
로그인 검사가 완료되면 메인 페이지로 이동 할 수 있는 확인버튼과
회원가입 페이지로 이동 할 수 있는 버튼으로 나뉘어져 있습니다.
(asdf4@naver.com)
회원가입 페이지 v
- 유효성 체크 (동일한 이메일, 비밀번호 아닐경우, 글자수)
- 회원가입
대본 ~
회원가입 페이지에서는 이메일, 비밀번호, 비밀번호 재확인, 이름을 입력할 수 있는 란이 있습니다.
이메일 란에서는 이메일 유효성 체크와 중복된 이메일에 따른 문구를 알려줍니다.
비밀번호와 이름도 동일하게 유효성 체크를 진행합니다.
입력이 완료되면 로그인 페이지로 이동할 수 있는 가입 버튼과
로그인 페이지로 이동 할 수 있는 버튼으로 나뉘어져 있습니다.
모달 생성, 수정
- 모달 생성, 수정
대본 ~
모임 모달에서는
(바로 만들기 클릭)
만들기 버튼을 누르면 곧 바로 제목과 설명에 대한 유효성 체크를 하게 되며 입력을 할 수 있습니다.
(설명에 짧게 입력하는게 아니라는것을 보여주기 위해 길게 입력한다.)
(이미지 첨부)
대표 이미지를 첨부할 수 있으며,
(이미지 클릭)
이미지를 확대할 수 있습니다.
(x 클릭)
또한 올린 이미지를 없앨 수 있습니다.
이어서 몇 명이 모이면 좋겠는지 인원을 조절 할 수 있습니다.
(투표 시작 캘린더를 킨다.)
투표의 시작과 끝은 언제나 오늘이상으로 제약을 하게 하였으며
(투표 시작을 투표 끝보다 높게 한다.)
투표의 시작이 끝보다 높을 경우에는 끝은 시작을 따라가게 하며, 그 반대도 작업을 진행하였습니다.
(멘션 이름 있는것 방향키로 내리고 엔터)
멘션은 현재 유저 리스트에 있는 유저에게 알람이 갈 수 있도록 설정을 하였으며 만일 특정 유저가 이미 있다며 유저 리스트에서 제외를 시키고, 그 외를 보여주게 하였습니다.
(태그에 이미 있는 이름을 입력하여 없다는 것을 보여준다.)
또한 잘못 입력하였을 경우 x 버튼을 눌러 삭제를 진행할 수 있습니다.
(간단하게 입력후 엔터)
이어서 태그 또한 어떠한 주제를 메인 페이지와 디테일 페이지에서 보여주고 싶은지 입력을 할 수 있는 란이 있습니다.
(x 버튼 누르기..)
디테일 페이지 - 본문
대본~
우선, 사용자는 게시물의 제목과 작성된 시간, 작성한 유저에 대한 정보를 볼 수 있으며, 아래에 본문과 타임테이블화면을 선택할 수 있는 탭이 있습니다. 먼저 본문 탭부터 말씀 드리겠습니다.
본문 탭에는 작성자가 등록한 글 내용과 사진이 있습니다. 또한 내용과 관련된 해시태그, 멘션된 특정 유저에 대한 정보를 볼 수 있고 글에 좋아요를 누를 수 있는 기능 또한 마련되어있습니다.
그리고 바로 아래에는 새 댓글을 작성하고 작성된 댓글을 볼 수 있습니다.
특정 유저에 따라 보이는 아이콘이 다른데요, 글 작성자는 해당 글을 수정하거나 삭제할 수 있는 아이콘이 보이며, 댓글에서는 본인이 작성한 댓글을 삭제할 수 있는 x 아이콘을 볼 수 있습니다.
디테일 페이지 - 타임테이블
대본 ~
타임테이블 탭을 클릭하여 일정 투표 화면으로 이동하겠습니다.
가장 처음 보이는 일정표는 현재 모임에 투표한 결과가 보여집니다.
투표에 참여한 전체 참여자 수 대비 해당 시간대에 투표한 인원이 많을 수록 색상의 채도가 높아집니다.
투표한 인원이 몇명인지 각 셀에 표기가 되고 마우스 호버시 참여자 목록을 볼 수 있습니다.
투표하기 클릭시 타임테이블이 양쪽으로 나눠집니다.
오른쪽은 전체 일정 투표 테이블이고 왼쪽이 내가 일정을 투표할 테이블입니다.
각 테이블의 스크롤은 서로 동일하게 움직입니다.
마우스 드래그로 일정을 선택하거나 취소할 수 있습니다.
취소 버튼으로 언제든지 현재 투표 내용을 취소할 수 있고
완료하기 버튼을 누르면 최종적으로 변경사항을 반영하게 됩니다.
다시 투표하기를 클릭하면 내가 투표했던 내역을 반영한 테이블에서 투표를 수정할 수 있습니다.
알림 (미리 알림 꽉 찬 상태여야함)
- 댓글, 좋아요(북마크), 멘션
- webWorker로 주기적으로 갱신
- 알림 내용 클릭시 연관 게시글로 이동
- 전체 확인 클릭시 알림 전체 확인 처리
헤더의 알림 아이콘을 클릭하여 사용자의 알림 내역을 확인할 수 있습니다.
사용자의 게시글에 좋아요나 새로운 댓글 등록이 등록된 경우, 그리고 다른 사용자가 맨션하는 경우 알림을 받게 됩니다.
특정 알림을 클릭하면 연관된 게시글로 이동합니다.
알림은 주기적으로 갱신되며 확인하지 않은 알림이 있을 경우 아이콘 옆에 빨간색 점으로 알림이 있음을 표시합니다.
전체확인을 눌러 모든 알림을 읽음 표시할 수 있습니다.
마이 페이지
- 프로필 수정 (닉네임 중복, 이미지 수정)
- 비밀번호 변경
- 본인의 마이페이지라면 만든모임, 참여한모임, 관심 모임을 선택해서 모아볼 수 있고, 다른 유저의 마이페이지라면 다른 유저가 만든 모임, 참여한 모임을 모아볼 수 있다.
헤더에서 프로필을 눌러 마이페이지로 이동하면, 본인의 프로필과 비밀번호를 수정할 수 있습니다.
프로필 수정 버튼을 누르면
(이미지 변경 아이콘 클릭)
가장 먼저 이미지를 변경할 수 있는 아이콘이 있습니다. 이것을 누르면 이미지를 변경할 수 있고, 완료 버튼을 누르게 되면 이미지 변경을 할 수 있습니다.
(이름 Input 변경)
회원가입과 동일하게 유효성 체크를 진행합니다.
(닉네임 Input 변경)
닉네임 또한 동일하게 유효성 체크를 진행합니다.
(기존 닉네임 입력 후 완료 버튼 클릭)
또한 닉네임도 중복된것인지 확인을 하는 기능이 추가되어있습니다.
(변경하지 않고 뒤로 누르기)
비밀번호 변경 버튼을 누르면
기존 비밀번호를 입력하여 새 비밀번호를 변경할 수 있습니다.
(새 비밀번호 asdf 입력)
새 비밀번호 또한 회원가입과 동일하게 유효성 체크를 진행합니다.
(새 비밀번호 확인 asdf 입력)
새 비밀번호 확인 또한 동일하게 체크를 진행합니다.
(새 비밀번호, 새 비밀번호에 1을 추가로 입력)
(비밀번호에 아무렇게 입력한 후 완료 클릭)
비밀번호가 동일한지 확인하는 기능또한 추가가 되어 있습니다.
(뒤로 가기 클릭)
아래에선 세가지 탭이 있습니다.
내가 만든 모임, 참여한 모임, 좋아요를 눌러둔 관심 모임 이렇게 세가지로 분류하여 해당하는 모임들을 모아 볼 수 있습니다.[하나씩 눌러보이기 시연]
나의 프로필이 아닌 다른 유저의 프로필도 볼 수 있습니다.[다른 유저 프로필 하나 누르기 시연]
다른 유저의 프로필에선 해당 유저가 만든 모임과 참여한 모임으로 나누어져있습니다.[하나씩 눌러보이기 시연]
또한 각각의 모임 카드를 누르면 해당 모임 상세화면으로 이동합니다.
[18 합성컴포넌트] v
마지막으로, 이렇게 개발하는 과정에 있어서
저희가 공부했던 부분과
기술적 챌린지에 대해 공유해보려고 합니다.
공용 컴포넌트 작업중
지속적인 추가 요구사항으로 인해 다양한 문제가 생겼었고,
이에 합성 컴포넌트 패턴을 도입하게 되었습니다.
관심사에 따른 분리를 함으로써
관심사별로 props를 컨트롤 할 수 있게 되었고,
props drilling에 대한 대처가 이전보다 더 완화 될 수 있었습니다.
원하는 관심사의 조합을 함으로써
계층 구조가 한눈에 드러나서 직관적으로 확인을 할 수 있었으며,
UI 변경에 용이하였습니다.
[ 19 Rtk]v
두번째로 리덕스 툴킷입니다.
액션 기반의 중앙 상태 관리 라이브러리인 리덕스를 공부하고 직접 사용해보면서 배우고자
리덕스 툴킷을 상태관리 라이브러리로 선택하였습니다.
리덕스와 비교하여 반복되는 코드나 번거로운 설정이 줄어들고,
직관적으로 사용할 수 있는 툴킷의 API의 활용성을 느낄 수 있었습니다.
또한, 비동기 작업 처리에 thunk를 사용하여, thunk가 반환하는 액션 객체를 활용할 수 있었습니다.
[20 이벤트핸들러]v
타임테이블의 이벤트 핸들러를 등록하는 과정에서 의도치 않은 동작이 발생하거나
아예 동작을 멈추는 경우가 있어
이를 계기로 리액트의 종속성에 대해 공부해 볼 수 있었습니다.
React는 결국 상태값의 변경으로 재렌더링이 발생합니다.
전역 객체에 등록된 이벤트 핸들러는 가상DOM의 영역에서 벗어났기 때문에
재렌더링이 발생해도 의도한 동작이 발생하지 않을 수 있습니다.
따라서 종속성 관리를 통해 리렌더링 발생시
이벤트 핸들러가 변경사항을 반영해서 재등록되도록 만들어 주어야 했습니다.
[21 유틸리티타입]v
프로젝트 중 중복된 인터페이스 속성들로 인한 문제를 해결하면서,
TypeScript의 유틸리티 타입의 강력함을 체험했습니다.
Required, Omit 등으로 특정 인터페이스에서 필요한 속성들을 선택적으로 커스터마이징 하였습니다.
이를 통해 반복되어 사용되는 프로퍼티들을 효율적으로 관리하며
코드의 간결성과 가독성을 향상시켰습니다.
또한, 타입 별칭을 사용하여 정의한 유틸리티 타입을,
인터페이스에서 extends를 활용한 확장 적용하는 방법을 배우며,
인터페이스의 유연성을 더욱 깊이 이해할 수 있었습니다.
[끝]v
이상으로 인성팀의 발표를 마치겠습니다.
감사합니다~