우리 동네 반려견 미용샵, 검색부터 예약까지 간편하게 한번에!
그루멍은 우리 동네 반려견 미용실을 한눈에 볼 수 없을까? 라는 물음에서 시작된 프로젝트입니다. 펫팸족의 증가로 우후죽순으로 늘어나는 반려견 미용실. 타 지도 서비스에서 제공하는 미용샵 정보는 부정확하며 짧고 성의 없는 리뷰만 가득합니다. 그루멍은 샵 정보를 직접 관리하고 업데이트하기 때문에 운영시간, 특이사항 등 샵 정보를 정확하게 제공하며, 실제 이용한 고객의 리얼한 후기를 확인할 수 있습니다.
TypeScript, Next.js, React, GraphQL, React-Hooks, Emotion, Recoil
- 랜딩 페이지, 로그인 페이지, 권한분기, 예약 페이지 제작
- 전체 오류 확인
- 와이어프레임 및 프로토타입 제작, 디자인 시스템 구축
- 지도 페이지, 회원가입 페이지 제작
- Shop 디테일, 리뷰 페이지, Button 컴포넌트 제작
- 배포 담당
- Jira 및 Git 관리
- 마이페이지, 반응형 제작
- 부트캠프에서 교육 받을 때 두 가지의 react 디자인 패턴을 사용했습니다. container/presentational 패턴, react-hook로 컴포넌트화 시키기는 hooks 패턴. 저희가 이번에 선택한 패턴은 아토믹 패턴이었습니다. 피그마 컴포넌트 디자인 활용을 극대화하고 싶었기 때문입니다. 아래 피그마 디자인을 보면 아토믹 패턴과 바로 호환할 수 있도록 구현했습니다. 덕분에 피그마 프레임이 곧 리액트 컴포넌트 폴더로 만들어지는 형식을 취했고 디자인이 변경될 때 곧바로 리액트 컴포넌트에도 적용할 수 있었습니다.
-
저희는 그동안 리액트를 배우며 들었던 의문이 하나 있었습니다. 과연 우리는 재사용을 잘 하고 있는 걸까? 리액트는 재사용이 장점인 라이브러리라고 했지만 그동안 그 진수를 느껴보지 못했었습니다. 그래서 이번 프로젝트를 통해 최대한 재사용할 수 있는 디자인과 기능을 구현해 보자고 다짐했습니다. 작은 기능이라도 두 번 이상 사용된다면 hooks로 컴포넌트화 했으며, 컬러, 폰트, 미디어쿼리 등 디자인 요소도 모두 재사용 가능하도록 만들었습니다. 특히, 컬러와 폰트는 피그마의 디자인 시스템 토큰을 export 한 후에 객체로 변환하여 사용했습니다.
- 서비스의 메인 기술인 지도는 Map, MapMarker, MapInfoWindow, MapPolygon, MapList, MapListBox 6개의 컴포넌트 및 기술 집합체입니다. 찾고 싶은 동네나 지역구를 검색하면 등록된 상점의 위도와 경도를 기준으로 marker가 띄워지며, marker를 클릭하면 MapList에서는 해당되는 상점을 찾아 띄웁니다. marker 위에는 infoWindow를 사용해 간단한 가게 정보를 표시합니다. 또한 지역구에 마우스 hover 하면 해당 지역구 경계선을 기준으로 polygon이 생성되는데요. 가까운 동네 반려견 미용샵을 찾는다는 취지이기 때문에 polygon 기능을 통해 유저가 거주하는 지역구 내의 미용샵을 추천하는 기능을 탑재했습니다. polygon 클릭 시 지도가 zoom 되며 해당 지역구 내의 미용샵이 리스트가 별점이 높은 순으로 표시됩니다.
- 이번 협업에는 애자일 방법론을 적용했습니다. 짧은 기간 동안 수많은 수정과 디벨롭이 발생할 것 같았고 이에 유연하게 대처하기 위함이었습니다. 애자일을 적용할 수 있는 많은 협업 툴을 찾아보고 공부했습니다. 지라, 노션, 아사나, 트렐로 중 지라를 선택한 이유는 스프린트 관리 용이, 깃허브 연동, 직관적인 UI, 낮은 진입장벽이 있었습니다. 크게 기획&디자인, 개발, 배포 및 디버깅 3개의 에픽 이슈로 나눈 후 태스크 단위의 스토리 이슈로 업무를 분배했습니다. 업무 분배 방식은 오전 회의를 통해 각자 구현해야 할 태스크를 나누고 업무 예상시간을 스토리 포인트로 정하여 어느 한쪽에 업무가 몰리지 않도록 공평하게 나누었습니다.
