[커마디] 첫 팀프로젝트 회고
3월 6일부터 시작해서 2달 동안 React와 Next.js를 공부하고, 5월부터 시작한 첫 프로젝트를 마침내 완료했다!!
5월 1일부터 시작해서 26일까지 딱 4주만에 기획부터 코딩, 마지막 서비스 문서작성까지 기간 안에 프로젝트를 완성할 수 있어서 유종의 미를 거둘수 있었다. 코드캠프x인프런에서 만든 온라인 부트캠프에서 처음 만나서 각자 다른 지역에 살고 있기에 팀원분들과 처음부터 끝까지 온라인으로 소통할 수 밖에 없었지만, 오히려 활발한 소통이 이루어졌고 덕분에 시간분배를 더 효율적으로 하여 무사히 마칠 수 있었다.
이 포스팅에서는 우리가 만든 첫 프로젝트가 어떤 서비스인지에 대한 소개와 기획의도, 진행 과정과 아쉬운 부분 등을 소개 해 보려고 한다.
🔸YouTube 발표 영상🔸
영상 URL : https://www.youtube.com/watch?v=csp9rMNWX4o
GitHub : https://github.com/code-bootcamp/cumadi
나의 GitHub : https://github.com/ParkSohyunee
프로젝트 소개
우리 프로젝트의 이름은 ⭐️커마디(cumadi)⭐️이다. 커스텀 마크다운 블로그 웹 어플리케이션으로, 마크다운으로 작성한 블로그 글들을 시리즈로 엮어서 판매하는 서비스이다. 사용자가 마크다운으로 블로그 글을 작성할 수 있고, 마음에 드는 문구를 드래그하여 저장하고, 이 글들을 묶어 시리즈로 판매할 수 있다.
처음 아이디어 회의를 했을 때, 해당 아이디어를 제시한 우리팀 팀원분께서 글쓰기를 좋아하고, 많이 써왔고 그만큼 많은 블로그 플랫폼들을 접하면서 평소 가지고 있던 아쉬운 점을 보완하는 구체적인 아이디어를 제시해 주었다. 덕분에 주제를 빨리 정할 수 있었고, 어떤 기능이 있어야 하는지가 속전속결로 이뤄졌다.
티스토리, 벨로그, 노션 등 블로그 플랫폼이 많지만 우리의 서비스는 조금 더 지적 자원 활성화에 대한 니즈를 충족하자는 의도로 기획되었다.
💎 서비스
커마디
내 맘대로. 내 입맛대로. 포스트시리즈
cumadi.site
기술 스택
이번 프로젝트에서 우리가 사용한 프론트엔드 기술 스택은 React, Next.js, Emotion, Apollo-Client, TypeScript 이고, 주요 라이브러리로는 전역 상태 관리를 위한 Recoil, 마크다운 에디터 구현을 위한 TOAST UI, 마크다운으로 작성된 글을 렌더링하기 위한 React-Markdown, 결제를 위한 Portone, 방문 통계를 보여주는 Chart.js 를 사용하여 구현하였다.
랜딩 페이지
커마디 랜딩페이지에서는 포스트와 시리즈 목록을 보여준다. 다양한 썸네일에 호기심을 가진 사용자는 포스트를 클릭하여 볼 수 있고, 내 맘대로. 내 입맛대로. 블로그 글을 작성할 수 있다. 또한, 모든 페이지는 반응형으로 구현하였다.
프로젝트에는 따로 디자이너와 기획자가 없어서 UI/UX 경험이 있는 팀장님이 figma로 디자인을 제작해 주셨고, Ant 디자인 컴포넌트를 활용하여 버튼, 카드, 아이콘 등 공통컴포넌트를 완성해 주셔서, 각자 담당한 페이지에서 공통 컴포넌트를 활용하여 스타일을 구현할 수 있었다.
커마디 서비스 기능
우리팀은 각각 기능별로 페이지를 나누어 담당하였는데, 나는 장바구니와 결제 기능을 담당하였다. 그래서 해당 기능에 대한 설명을 조금 더 구체적으로 해보겠다.
- 회원가입과 로그인
사용자는 유효성 검사를 완료하면 회원가입을 할 수 있고, 로그인 하게 되면 accessToken을 받아온다.
- 포스트(블로그 글) 작성
포스트 작성 페이지에서는 제목과 태그, 내용을 작성할 수 있고, 마크다운 에디터 구현을 위해 Toast UI 라이브러리를 사용하였다. 또한, 토스트 ui 훅을 사용하여 에디터 안에서 인라인 이미지 첨부도 가능하다.
- 포스트 출간
작성한 포스트 출간을 위해 포스트 미리보기에서 소개글과 썸네일 이미지를 업로드 할 수 있는 폼을 두었다. 만약, 사용자가 미리 만들어 놓은 시리즈가 있다면 작성한 포스트를 시리즈에 담을 수 있다.
포스트는 CRUD가 가능하고, 좋아요 기능과 댓글 기능, 대댓글 기능을 구현하여 커뮤니티 소통을 목적으로 구현하였다.
- 포스트 메모
블로그를 돌아다니다 보면 저장하고 싶은 문장이 종종 있다. 이 기능 또한 커마디에서 가능하다! 나중에 보고 싶은 문구를 드래그하여 저장하면 삭제하지 않는 이상 언제든지 다시 볼 수 있다.
- 시리즈(포스트 묶음) 작성
새 시리즈 만들기 페이지에서 사용자는 출간한 포스트들을 선택하여 시리즈로 만들 수 있고, 유료, 무료를 선택하여 출간이 가능하다. 카테고리탭에서 시리즈 카테고리를 정할 수 있고, 랜딩페이지에서 카테고리별 시리즈를 확인 할 수 있다.
- 장바구니
구매하고 싶은 시리즈를 구매하기 전 장바구니에 담을 수 있고, 실시간으로 장바구니에서 담긴 내역을 확인할 수 있다. 처음에는 localStorage를 사용하여 기능을 구현했는데, 사용자가 재로그인시에도 장바구니 품목들을 유지하도록 하기 위해 백엔드 API를 필요했다. 장바구니 품목들은 삭제가 가능하고, 원하는 품목만 선택하여 구매할 수 있고, 구매한 시리즈는 장바구니에서도 삭제가 된다.
장바구니 기능을 구현하면서 장바구니 자체가 사용자의 행동에 따라 바로 반영되어야 하다보니 화면을 refetch 하기 위해 쿼리를 재요청 하는 코드가 많았다. 따라서 불필요한 렌더링을 줄이기 위해 일부기능은 cache 직접수정하는 방향으로 리팩토링하여 최소 렌더링을 유지하도록 구현하였다.
- 바로구매
이 기능은 말그대로 구매하고 싶은 시리즈를 장바구니를 거치지 않고 바로 구매를 할 수 있는 기능이다. 사용자가 바로구매를 클릭했을 때 해당 시리즈를 recoil을 사용하여 저장한뒤 바로구매 페이지에서 불러오는 방법을 시도하였으나, 새로고침 시 초기화되는 문제로 인해 최종 localStorage를 사용하여 구현하였다. 구매 완료한 시리즈는 로컬스토리지에서 삭제되므로 사용자의 UI에서 노출되지 않도록 사용성을 개선시켰다.
- 결제
결제를 위해 Portone 라이브러리를 사용하였다. Next.js의 Script태그를 활용하여 라이브러리를 연동하였고, 장바구니 페이지와 바로구매 페이지에서 각각 결제가 가능하다.
유료인 시리즈는 포트원 라이브러리를 이용하였는데 시리즈 중에는 무료인 시리즈가 있고, 무료도 구매가 가능하게끔 기능을 추가해주었다. 무료시리즈 구매 기능을 구현하기위해 yse24 의 e-book을 직접 구매하여 유저플로우가 어떻게 흘러가는지를 참고하였다.
또한, 결제테스트 중 동일한 시리즈를 중복으로 구매할 수 있는 것을 발견하여, 결제하기를 클릭하면 사용자가 구매한 상품인지를 먼저 검증하는 기능을 추가하여 사용성을 개선하였다.
🌱 진행 과정
우리팀 팀장님은 프로젝트에서 협업툴 사용과 규칙 또는 시도해 보면 좋은 방법 등을 정해서 팀원들을 이끌어 주셨다. 또한 항상 이유를 함께 설명해 주셔서 목적을 갖고 방법들을 활용할 수 있었다. 덕분에 프로젝트를 하면서 오로지 기능 구현만을 목적으로 하지 않았고, 협업을 어떻게 하는지, 팀원 각각이 한팀을 이뤄 프로젝트를 완성하는 과정과 함께 어떻게 하면 효율적으로 프로젝트에 임할 수 있는지 등의 과정을 경험할 수 있었고, 이 부분은 나에게 너무 큰 도움이 되었다.
- 매일 아침 Daily Scrum 미팅을 통하여 진행상황 및 이슈사항을 팀원들과 보고
데일리 스크럼에는 PR에 대한 코드리뷰도 함께 진행했는데 코드를 작성하는 것만큼 남에게 설명하는 것도 쉬운일이 아니었다.
- 코드컨벤션을 규정하고 준수하여 코드 작성
본격적으로 개발을 하기 전에 코드 작성 규칙을 정하고, 이를 적용시켰다. 우리는 크게 General Rules, JavaScript Rules, React.js / Next.js Rules (컴포넌트 내부 작성 순서), CSS Rules, File Rules, Git Rules로 분리하여 각각 상세하게 규칙을 만들었다.
항상 PR을 올리기 전 코드컨벤션대로 작성했는지 검토의 검토를 반복했다. 💯 나중에는 이 과정 또한 익숙해졌고, 팀원의 코드를 보았을때 가독성이 높아져서 더욱 코드를 이해하기 쉬워졌다.
- Task Estimation 메소드를 활용하여 진행하고자 하는 태스크의 리소스를 주도적으로 판단하여 일정 내 기능 구현
💧Estimation이란 한 개의 태스크 / 프로젝트 / 기능 등을 수행할 때 어느 정도 리소스가 들어갈 지를 미리 예측(estimate)하는 척도로,
1. 팀플레이어로 프로젝트를 진행하면서 개발 속도를 맞출 수 있고,
2. 메타인지를 기를 수 있다. ‘잘 하는’ 개발자는 Estimation과 실제 수행 시간이 비슷한 척도로 나온다고 한다.
개발 시행착오를 통해 메타인지를 기를수록 좋다.
- 코드를 작성하면서 막힌문제 해결했을 때, 페이지를 구현했을 때 등 슬랙으로 자랑하기
공유 목적도 있지만 온라인으로 진행하다 보니 서로의 상황을 실시간으로 알 수 없기에 슬랙으로 본인이 한 기능 구현을 뽐내며(?!) 서로 독려하고, 의욕을 불태워주었다. 🔥
- QA 테스트 🛠️
마지막으로 우리서비스를 각자 기능테스트를 하며 중요도가 '상'인 버그를 수정하는 작업을 진행했다. 내가 구현한 장바구니 기능에도 렌더링 이슈가 있었는데 우리팀원분이 동일한 문제에 대해 해결한 경험을 말씀해 주셔서 코드를 수정하고, 이슈 없이 기능 구현을 완성할 수 있었다.
📖 프로젝트를 마치며
커마디 프로젝트는 이상적인 블로그 플랫폼을 염두에 두고 기획하여 넣고 싶은 기능들이 정말 많았지만, 1개월 단기 프로젝트인 점에서 '사용 가능한 MVP'를 배포하는 것을 우선시 하였다. 그런만큼 각자의 기능에서 아쉬운 부분이 있지만 전체적인 서비스 면에서는 그동안 공부한 지식을 활용하여 기능을 구현하고, 스스로 응용하기 위해 노력한 결과로 프로젝트를 완성시킬 수 있었다. 프로젝트를 마무리한 후에 3개월 전의 나와 비교하여 정말 많이 성장했음을 느끼지만 몇가지 아쉬운 점과 앞으로의 기대사항을 생각해 볼 수 있었다.
- 구현하고자 하는 기능에 대한 탐색, 상세한 유저플로우 작성하기
처음 장바구니, 바로구매, 결제 기능을 맡았을 때 유저플로우가 잘 그려지지 않았다. 최소한 흐름만 가지고 기능을 구현하려고 하자 추가 기능이 필요했고, 벡엔드와 소통하는 과정에서 추가적인 리소스가 많이 들어갔다. 따라서 앞으로 새로운 기능을 맞딱트렸을때는 먼저 해당 기능이 무엇인 지에 대한 탐색과정을 충분히 거치려한다. 🧐
- 기능에 대한 디테일한 설계의 필요성
프로젝트를 진행하면서 여러 사이트의 장바구니와 바로구매를 참고하였는데 저마다 방식이 디테일하게 달랐다. 예를 들면, 바로구매라고 해도 장바구니에 상품을 담기게 한 뒤 해당 상품만 호출하여 띄우는 경우가 있었고, 장바구니 전체를 같이 결제페이지에 호출하거나, 장바구니와는 상관이 없을 때도 있었다. 우리 서비스는 각 페이지를 분리하여 기능을 구현했는데, 다음에는 페이지가 연결되는 방향으로 디테일하게 설계하여 여러가지 케이스에 활용하고 싶다.
- 비회원 + 회원 장바구니 기능 만들어보기
처음에 로컬스토리지만 사용하여 구현한 비회원 장바구니 기능과 API를 사용한 장바구니 기능을 더하여 비회원일때와 로그인하여 회원이 되었을때 장바구니를 유지하게끔 최종 완성시키고 싶다.
이렇게 프로젝트를 모두 완료하니 ⭐️뿌듯한 마음⭐️이 든다. 모든 과정이 처음투성이였지만 그만큼 처음 배운것을 지키며 프로젝트에 적용하고자 노력했기에 과정을 기록할 수 있었다. 이번 경험을 통해 아쉬운 부분을 보완하고 잘한 부분은 유지하여 다음 프로젝트에 적용 해 볼 것이다. 또한 발전하는 나의 모습도 틈틈히 기록하려 한다.
