맛피 기획기

윤뿔소·2023년 1월 16일
0

팀 프로젝트: 맛피

목록 보기
1/8
post-thumbnail

맛피 노션: 매일 회의록 작성 및 발표 준비
코드스테이츠의 기본 강의는 다 듣고, 프리 2주 동안하고 한달 ~ 3주 동안 하는 메인프로젝트가 시작됐다. 기획부터 배포까지 다 우리가 해야하기에 기획부터 시작했고, 운이 좋게 내 기획안이 채택됐다.

기획 의도

나는 맛집을 찾고, 돌아다니기를 좋아한다.
그런데 나는 경험주의적인 사람이다. 그래서 먹을 땐 좋지만 나중에 기억이 잘 안날 때가 많았다. 얼마나 아까운가 그 경험은 그 시간에 값졌는데, 나중에 오니 기억도 못하고 되게 안타까웠다.
그래서 나는 네이버 지도에 즐겨찾기를 추가하고 메모를 살짝 추가했다. 하지만 이것도 한계가 명확했다.

  1. 지도앱과 기록앱의 분리
    네이버는 데이터도 방대하고, 블로그도 있어서 좋지만 지도앱을 나가서 봐야해서 연속성이 떨어지고 광고도 많아 방대한 데이터의 물을 흐릴 때가 많았다.
  2. 장소에 대한 자신의 기록 한계
    1번의 연장선인데 장소에 대한 직접적인 언급을 하기 어렵다. 네이버지도에 메모라는 시스템이 있지만 한줄이고, 눈에 띄지 않는다.

위의 이유로 내가 원하는 앱을 만들고 싶었다. 비즈니스 모델이나 경쟁업체 등은 고려하지는 않았다.

  1. 지도(정보)와 기록의 연속성
    지도를 보며 맛집의 루트를 그리고, 맛집을 클릭해 맛집에 관련된 양질의 글이 모달로 나오는 등 바로바로 맛집에 대해 탐방할 수 있게 접근성도 늘리는 앱을 만들고 싶다.
  2. 기록 되새김질
    나의 글이 내가 픽한 맛집에 메모가 아닌 사진도 들어가고 글을 일기처럼 써서 그때 당시의 생생한 경험을 되새김질하기를 바랐다. 하나하나가 추억이니까 말이다. 또 맛집 데이터가 쌓이면 나 자신에 대해서 취향을 파악할 수도 있다. 좀 더 자신을 알아가는 방식으로 써도 되는 것. 일종의 맛집 MBTI로도 쓸 수 있어 공유도 하고 그랬으면 좋겠다.

이러한 점에서 출발했다.

기술 스택 정하기

프론트

프론트엔드는 팀원과 협의해서 한번도 써보지 못한, 써보고 싶은 슈퍼셋 언어, 타입스크립트로 하기로 정했다. 여기에 Next.js를 써보자고 얘기가 나왔지만 시간상 좀 오래 걸릴 거 같아 다음에 기회 있을 때 해보자고 얘기했다.

그 외에 React.js, Styled-Component, MUI 등으로 정했다. 배포하는 건 Varcel로 하기로 했다.

백엔드, 배포툴

백엔드 분들은 코스에서 배우신 Java, Spring을 하기로 했고, 플럭스 구조로 서버를 구축하기로 했다.
배포는 AWS EC2로 하기로 했다.

커뮤니케이션 툴

기본적으로 디스코드를 통해 스크럼을 진행하고, 노션으로 기록을 담당했다.
또한 깃헙에서 이슈, PR을 작성해 논의를 거쳤고, Project를 만들어 스케쥴 관리도 덤으로 진행했다.

참고: 앱 컨셉 구성

앱 이름

오프라인에서 만나서 얘기를 나눴는데 치열했다. 맛을 붙이자, 개발하는 거니 개발 관련 용어로 짓자, 맛집 관련인데 너무 딱딱하지 않냐 하고 머리를 맞대고 브레인스토밍을 하던 중 팀원 중 한분이 작은 거에서 만들고 앱 이름을 만들자고 했다.

그래서 맛을 붙이고 맛집 장소 용어는 맛 Place, 글을 쓰고 읽는 사람들을 맛 People, 맛집에 관련한 글들은 맛 Post 이렇게 정하다 보니 공통점이 보이기 시작했다.

맛에 P를 붙여 '맛P'로 명명했고 '맛피'라고 읽기로 정했다. 괜스레 맘에 들었다. 귀여우면서 앱의 정체성을 보여주니 좋았다.

앱 로고

2023/01/09
로고도 구상하기 시작했고, 맛P가 잘 그리면 사람 얼굴 같기도 하고 그래서 로고를 얼굴 처럼 그리기로 했다.
색은 컬러 헌트 이걸로 정했다.

이런 식으로 2개다. 귀엽게 윙크하며 혀도 내밀고 있다. 마치 앞에 맛있는 음식이 있어 애교를 부리는 듯 하다.

위의 로고를 90도 돌리면 맛P라고 쓰여진 게 보여질 것이다. 로고는 이렇게 생성했다.

기능 목록 기획

2023/01/10
아이디어 미믹, 사용자 요구사항 명세서

엑셀을 만들며 6명 다 모여서 기능을 구상했다. 나온 것이

  1. 글, 픽한 맛플레이스 등을 보며 지도도 볼 수 있게 전체적으로 지도앱 구현에 왼쪽 3분의 1만큼 맛집 정보 페이지, 마이페이지 등등 구현
  2. 메인 페이지는 오늘의 맛포스트 전체를 보여줌
  3. 맛포스트를 누르면 모달로 키고 끌 수 있어 연속성을 높이고, 블로그처럼 자유롭게 글 쓰기 및 댓글도 가능
  4. 맛플레이스를 탐색: 검색(키워드, 현재 위치), 맛포스트에서 찾아가기, 픽한 맛집 목록
  5. 픽한 맛집을 맛 Picker라고 명명, 목록과 로그인하면 마커로 뜨게 설정

기본적으로 이런 기능을 가졌으면 좋겠다고 했다.

추가적으로
1. 웹소켓을 이용한 채팅 및 맛플레이스 선택 후 코스를 공유
2. 미팅 장소 조율기를 만들어 실시간으로 지도를 보며 그리기

등등을 기획했다.

최다 논의 주제

가장 많이 논의가 이루어진 것이 검색이었다. 특히 장소 데이터를 어떻게 하느냐였다. 공공데이터를 가져와 검색 기능을 만드는 등의 다양한 의견이 있었지만 카카오맵 API를 사용해 검색을 가져오는 것이 제일 쉬울 거 같아 이렇게 하기로 결정했다.

22/01/11
처음엔 카카오맵 API로 검색을 할 수 있었고 그 데이터를 우리가 사용하는 방식으로 하려고 했다.
하지만 정책상 문제가 생겼는데 그 데이터를 가져와 DB로 저장하는 방식이 안된다.. 몰랐다... 지금 생각해보면 당연하다. 날먹이지 않는가? 다시 토의가 이루어졌고 결국 공공데이터를 가져와 필요없는 데이터를 버리는 등의 가공을 거쳐 DB에 넣기로 했다.
그래서 검색을 따로 만들어서 DB에서 꺼내쓰는 식으로 하기로 했다. 검색도 키워드만 하면 좀 그러니까 엘라스틱 서치로 한번 만들어보겠다고 논의했다.

화면 정의서

디자인도 프론트가 다 해야하니 같이 피그마로 협업을 하며 만들었다.

피그마

중점적으로 둔 것은

  • 연속성과 맛집과 지도를 같이 보는 컨셉이므로 항상 맛집 + 컨텐츠 컨테이너가 뜨게 하고, 컨테이너를 접을 수도 있게 했다.
  • 색은 많이 넣지 않았고, 버튼에 컨셉 잡아서 비슷한 색 여러개를 넣는 방식으로 했다. 컬러 헌트
  • 마커는 만들어서 이미지로 픽 마커에 넣는 방식으로 선택했다.
  • 맛포스트 디테일 페이지를 따로 만든 것이 아닌 모달로 선택했다. 페이지가 옮겨가면 연속성이 떨어지니까.

백엔드 기획서

백엔드 기획서는 기능 구현에 있어 테이블 및 API를 구상했고, DB는 MySQL, 배포는 AWS로 하기로 했다.
참고: 아키텍쳐, API, 테이블

사담

이렇게 기획을 만들고 시작했다. 저것만 하더라도 50%가 끝난 거 같다 ㅎㅎ 검색 같은 어떤 시련이 우리에게 닥칠지는 몰라도 잘할 수 있을 것만 같은 기분이 든다. 굿!

22/02/03
메인프로젝트가 끝나고 발표도 끝났고 다 했다.. 기획과 좀 달라진 점과 기능을 포기하는 것도 있었다. 검색은 결국 카카오 API를 안쓰고 공공데이터를 가져와 DB에서 꺼내쓰는 방식이었다. 물론 공공데이터를 쓴 게 오히려 공부가 더 많이 됐다.
그래도 내 생각대로는 끝냈다. 아쉬웁긴 하지만 완주에 의의가 있고, 더더욱 리팩토링 하면 되니까!
추가로 할 것은 버튼에 대한 디자인과 alert 디자인을 좀 더 만들어야겠다.

profile
코뿔소처럼 저돌적으로

1개의 댓글

comment-user-thumbnail
2023년 2월 7일

프로젝트만 이렇게 따로 빼놓으니까 읽기 편하고 좋은 거 같아요. 정독 시작!

답글 달기