[Momojito] 칵테일 컨텐츠 제공 서비스 :: React&Next.js 4주 프로젝트 돌아보기

Intro

코드스테이츠에서 파이널 프로젝트로 약 4주간 진행했던 프로젝트가 마무리 됐습니다.
퍼스트 프로젝트에 이어 새로운 팀에서 다시 한 번 팀장 역할을 맡았고 마찬가지로 프론트엔드 개발을 담당하였습니다.

서비스이름은 Momojito (모모히또) 입니다. 모모히또는 초보자들에게 생소한 칵테일 정보에 대해 쉽게 접근할 수 있는 칵테일 컨텐츠 제공 서비스입니다.

모두가 스마트폰을 이용하여 간단한 정보들을 탐색한다는 점을 고려해서, 모바일 웹 환경에서의 이용을 중점으로 개발하였습니다. 물론 데스크톱에서도 반응형 UI로 이용하실 수 있습니다 👍

개발에 사용한 기술 스택은 아래와 같습니다

[Front-End] react(hooks), next.js, d3.js, react-spring, styled-component, axios
[Back-End] node.js, express, jwt, mySQL, sequelize, bcrypt
[Deploy] Vercel, S3, EC2, Route53, ELB, ACM, RDS

👇 더 자세히 알아보러 가시려면?👇
배포 주소 , Github Repo, 서비스 발표 영상

재료별 필터링 기능과 함께 대중적인 칵테일 정보들을 탐색 해볼 수 있으며, 이 뿐만 아니라 퀴즈, 칵테일 지도, 이상형 월드컵 같은 다양한 컨텐츠들도 준비되어 있습니다

이번 글에서는 4주간 프로젝트가 어떤 식으로 흘러갔는지, 어떤 것들을 배우고 느꼈는지 돌아보려고 합니다.

기획 (feat. Figma의 중요성)

첫 프로젝트 회의 때 모두가 무엇인가에 이끌린것처럼 "주류" 관련 키워드에 꽂혀있다가 칵테일 얘기가 나왔습니다. 그럼 칵테일을 주제로 했을 때 어떤 점이 좋을까? 생각해보니

1. 국내에 딱히 칵테일 인포사이트라고 할만한 곳이 없다
2. 칵테일 사진이 들어가면 뭔가 그냥 예쁘다 (레퍼런스로 찾아본 사이트들이 그냥 다 이뻤음..) -> UI 구성에 유리하다
3. 칵테일이 재료의 조합으로 이루어진다는 점을 이용해 다양한 컨텐츠를 구성해볼 수 있다

문제라고 할만한게 한가지 있었다면...
"팀원 중 칵테일에 대해 아는사람이 아무도 없다는 것" 😭

이번 기회에 몰랐던 칵테일까지 공부해버리자 마인드로 이렇게 모모히또 프로젝트 (부제: 칵테일 1도 모르는 남자 4명이서 칵테일 정보 사이트를 만든다면?!) 는 시작되었습니다

지난 2주 프로젝트때, 기획단계에서 UI 구성을 디테일하게 해야지 나중에 스트레스 안받는다는 걸 뼈저리게 느꼈었고, 모바일 환경에 대한 기획을 하지 않았던 것에 대한 아쉬움이 컸었습니다. 그래서 이번 기획 기간동안에는 Figma를 이용해서 모바일 UI를 먼저 구성하고, 시간이 걸리더라도 최대한 최종 결과물과 일치하도록 디테일하게 그리기로 팀원들과 합의하고 작업을 시작했습니다.

그 결과...

이전 프로젝트 때보다 훨씬 발전된 형태로 목업 UI 를 그려놓고 시작할 수 있었습니다. 놀라웠던 점은, 어느정도의 디테일들이 들어간 목업 UI가 구성된 이후부터 팀원들과 커뮤니케이션이 훨씬 쉬워졌다는 것이었습니다. 더 이상 서로가 눈에 안보이는 추상적이고, 주관적인 언어로 의견을 주고받는게 아니라 시각화된 UI를 바탕으로 의견을 주고 받을 수 있게 되어서 커뮤니케이션 효율이 크게 올라갔다는 느낌을 받았습니다.

이후 와이어프레임, DB스키마, API문서와 같이 기획단계에서 정할 수 있는 것들은 최대한 정한 뒤 공용 Notion 으로 매일 업데이트되는 내용을 체크리스트와 캘린더 형식으로 공유하면서 진행하였습니다. 협업 시 모두가 같은 페이지에서 같은 목표를 공유하는 것의 중요성도 느낄 수 있었습니다

(팀 노션)

기획내용에 대해 더 자세히 알고싶으시다면? 👉 Github wiki

Next.js ?? 누구냐 넌

기획 단계를 마무리하고 본격적인 개발에 들어가면서 가장 먼저 한 것은 React에서 Next.js 프레임워크를 이용하기 위한 환경을 세팅하는 것이었습니다.

Next.js는 Dynamic Routing과 Pre-Rendering을 기반으로, 빌드 시점에 정적인 html 페이지들을 생성해서 깜빡임 없는 빠른 페이지 전환을 가능하게 하는 프레임워크입니다.
서버 사이드 랜더링과 클라이언트 사이드 랜더링을 필요에 따라 이용할 수 있도록 지원하며, 각 페이지마다 SEO를 최적화시키는데 유용합니다.

팀원 중 도현님께서 이런 신문물의 존재와, 칵테일 요소마다 상세페이지를 가지게 되는 저희 프로젝트 구조에 적용하기 적합하다는 점을 설명해주셔서, 주저없이 사용해보기로 결정하였습니다.

코드스테이츠 정규 과정에서 배우지 않았던 스택이라 세팅부터 막막했지만, 공식문서 번역에 투자했던 하루이틀의 시간과, 이미 어느정도 next.js 컨셉에 대해 이해를 하고 계셨던 팀원분 덕분에 프로젝트에 적용할 수 있었습니다.

Next.js를 사용하면서 느꼈던 점은 따로 포스팅 하였습니다.
👉 파이널 프로젝트에 Next.js 적용 후 느꼈던 장점들

재사용 가능한 UI 컴포넌트 만들기

파이널 프로젝트를 진행하면서 이전까지 생각하지 못했던 개념을 팀원분들께 배울 수 있었습니다. 바로 재사용 가능한 컴포넌트를 만든다는 개념인데요, 2주 프로젝트때는 이런 개념에 대해 생각하지 못했기 때문에 버튼, 모달 등 주로 쓰는 컴포넌트를 그때그때 새로 만들어서 중복되는 코드가 생기는 것을 그냥 방치했었습니다.

하지만 이번에는 props 로 받을 변수를 적절하게 세팅함으로써, 하나의 컴포넌트 파일을 만들어 여러 곳에서 재사용 가능하도록 만들기 위해 노력하였습니다.

예를들어, 퀴즈 컨텐츠와 이상형 월드컵 컨텐츠를 끝까지 플레이 하시면 나오는 결과페이지에 카카오톡 공유하기 기능과 댓글 기능이 있습니다. 이 두 기능 모두 하나의 컴포넌트에서 props로 컨텐츠가 이상형월드컵인지 퀴즈인지에 대한 정보를 전달받아서 다른 데이터를 출력합니다.

대부분의 버튼과 캐러샐, 모달창도 팀원들과 함께 이런 방식으로 컴포넌트를 모듈화해서 최대한 재사용 가능하게끔 구현할 수 있었습니다. 이로 인해 코드 가독성이 좋아졌으며 파일 구조가 예전해비해 훨씬 더 단순해졌다는 것을 느낄 수 있었습니다

(퀴즈 결과페이지)

기타 전반적인 회고

[좋았던 점]

• 먼저 개인적으로도 그렇고 팀원들도 상당히 만족했던 프로젝트였습니다. 기획단계에서 3주차까지 개발할 기본기능(Bare minimum)들을 정하고, 4주차에 시간이 남으면 구현할 심화기능(Advanced Task)을 정했었는데 그러한 일정들이 딱딱 맞아서 3주차때 정말 모든 기본 기능에 반응형 UI와 배포까지 완료되어 있었습니다. 이미 3주차 결과물로도 충분히 만족스러웠고, 4주차에는 버그 해결과 몇몇 심화기능에만 집중하면 되는 상황이었기 때문에 프로젝트 전반적으로 받았던 스트레스가 적었습니다.

• 위와 연결되는 내용인데, 팀웍이 너무 좋았습니다. 팀원들 모두가 프로젝트에 성실하셨고 적극적으로 좋은 의견을 계속 제시해주셨습니다. 어떻게 보면 초반에 타이트하게 일정을 잡은 느낌이 있었는데, 무리없이 하나하나 문제들을 해결해나가시는 것을 보면서 저도 힘이 많이 났던 것 같습니다. 배울 점 많은 팀원들과 같이 하게 된게 가장 좋았던 점입니다.

• 개인적으로는 전체 페이지 UI / UX 에 대해 주도적으로 관여하면서 여러가지 시도해본 것들이 많았기 때문에 좋은 경험이 되었습니다. 특히 유저가 로그인을 하지 않아도 많은 기능을 이용해볼 수 있도록 구현된 점이 만족스럽습니다. Pinterest 통해 얻은 칵테일 이미지들의 배경을 제거하는 작업, 칵테일 설명 하나하나 가져와서 편집하는 일, 칵테일맵 애니메이션에 들어갈 벡터이미지를 구하는 등 코딩 외적인 일들도 많았지만 지금 생각하면 UI/UX에 대한 시야가 조금 더 넓어지게 된 계기가 된 것 같습니다.

• 이번 프로젝트를 통해 배운 새로운 스택(next.js, d3.js)들이 상당히 맘에 듭니다. next.js에 대해서는 블로깅과 기술발표 영상을 통해 프론트엔드 기술에 대한 이해도를 넓힐 수 있었습니다. 또한 d3를 통해 칵테일맵을 구현한건 다른 팀원분이었지만, 데이터 시각화라는 키워드를 어떻게 적재적소에 쓸 수 있는지 처음 알게 되었습니다. 이번 프로젝트를 계기로 데이터 시각화에 더욱더 많은 관심을 가지게 되었습니다.

[아쉬웠던 점]

• 전체적으로 모바일 UI를 먼저 구성하고, 이후에 데스크톱 UI를 구성하다보니 대부분의 모바일 UI 요소들을 데스크톱에서 재사용하게 되었습니다. (데스크톱 UI 목업 그릴때쯤 이미 체력 고갈...ㅠ) 그래서 데스크톱에서 봤을 때 매력이 좀 떨어진다는 점이 아쉬습니다. 디자이너의 중요성을 절실히 깨달았습니다..

• 서비스 자체에 매력이 있나..? 고 자문했을 때 자신있게 답하기 어려울 것 같습니다. 결국 인포사이트는 컨텐츠의 양과 질이 중요한데, 확보한 칵테일 데이터가 생각보다 적습니다.. 특히 칵테일 재료에 대한 데이터들은 이름만 나열되있고 디테일 까지 구현하기까지는 손이 모자랐기에 이런 점들이 아쉽습니다.

앞으로의 계획

최우선 목표는 프론트엔드 개발자로의 취업입니다.

아직 타입스크립트를 이용해본 적이 없기 때문에, 개인적으로 타입스크립트를 학습하면서 리팩토링 해보려고 합니다.

또한, 데이터 시각화라는 분야에 관심이 많이 가기 시작했습니다. d3를 이용해 대시보드를 만들어보는 프로젝트에도 개인적으로 도전해보고 싶습니다 :)

개발하면서 참고한 사이트들

✐ 칵테일DB.com
✐ 앱솔루트 공식사이트
✐ 갓무위키
✐ [youtube] 살면서 알아두면 좋을 74가지 칵테일
✐ 칵테일 이상형 월드컵 레퍼런스
✐ 칵테일 지도에 사용한 d3.js 레퍼런스
✐ 언젠간 꼭 이렇게 만들어보고 싶습니다...🥲