[Project] 네집내집

airbnb를 모티브로 진행한 네집내집 프로젝트를 마치며..

 

🏠 네집내집

프론트인원 3명, 백엔드 인원 3명으로 이루어진 팀으로,
에어비앤비 보다 더 친근한 느낌으로 숙박 서비스를 계획했다.

 

네집내집?

어릴 적, 친한 친구의 집에서 자고 가는 느낌을 담아
우리 집 근처의 우리 집, 네집내집 이라는 의미로 서비스명을 기획했으며, 홈페이지에서 숙소 예약까지의 flow를 그리기로 했다.

---

프로젝트를 시작하며...

이번 프로젝트에서는 저번 삼십 문방구 프로젝트를 마치면서 아쉬운 부분이었던 기능 구현적인 면을 더 구현해보고 싶은 마음이 들었다.

그래서 페이지가 가장 길고 다양한 기능이 있는 디테일 페이지를 선택했다.

 

디테일 페이지의 구성은 아래와 같았다.

• 숙소의 내부,외부를 보여주는 부분
• 숙소에 대한 내용을 담고 있는 부분
• 숙소의 대한 리뷰
• 숙소의 위치에 대한 지도
• 숙소의 규칙
• 숙소를 예약할 수 있는 부분

으로 총 6개의 부분으로 나누어져 있었다.

---

🏃🏻 1차 스프린트

팀원 모두 프로젝트를 한 번씩 경험한 상태라, 어떠한 형식으로 회의를 진행하는 게 더 효율적인 지 알고 있는 상태였다.

그렇기에 하나의 협업 툴을 사용하자는 의견이 나왔고, 그에 따라 프로젝트를 더 효율적으로 진행 / 운영하기 위해 우리는 Trello 하나만 사용하기로 하였다.

 

우리는 매일 오전 Daily StandUp Meeting으로

• Yesterday
• Today
• Blocker

에 대한 현재 상황을 공유했다.

 

1차 스프린트 우리의 목표

우리는 프론트 인원 각자가 맡은 페이지의 스타일링을 끝내고,

페이지에서 사용하는 api를 적용하고 있는 상황에 도달하는 것이 우리의 목표였다.

---

몰려와라 위기여..

순조롭게 디테일 페이지에 들어갈 부분을 채워가던 도중, 백엔드와 얘기를 하는 과정에서 이미 만들어 놓은 부분에 대한 데이터를 만들지 않았다 라는 말을 듣게 되었다...

 

이미 만들었던 부분이였지만.. 어쩔 수 없었다. 이미 백엔드에서 결정을 했던 부분이라 나의 코드를 삭제를 하고 넘어가기로 하였다.

 

그렇게 대화를 맞친 후, 페이지의 전체적인 틀을 만드는 작업이 완료되었다.

디테일 페이지는 숙소를 예약하는 기능과 숙소에 대한 모든 정보가 전부 합쳐지는 페이지였기에 백엔드에서 받아와야 할 데이터의 양이 많았다.

 

아직 mock 데이터를 작성하는 게 익숙하지 않았던 나는 막막했다. 

depth가 깊고, 많은 데이터를 받아오려면 어떻게 짜야되지..? 란 생각에 백엔드 팀원에게 의견을 물어보러 갔다.

 

위기여..

위기를 맡고 있는 나의 모습

내가 받아와야 할 데이터를 물어보는 과정에서 문제가 발생했다..
백엔드에서는 그 데이터를 만들지 않는다 라는 말을 듣게 되었다. 😨

 

숙소에 대한 설명과 설명에 대한 이미지를 받아오는 부분이었는데 의견 충돌이 있었다.

나는 프론트엔드에서 숙소마다 정보를 검증하며 이미지와 그 이미지에 대한 설명을 기재하는 것은 너무 비효율적이라고 생각했다.

그래서 백엔드에서 데이터를 갖고 있는 게 맞을 것 같다는 의견을 전달했고 이는 백엔드 팀원에게 잘 반영되어 문제를 해결할 수 있었다.

---

문제는 언제나 생기지만, 문제에 대한 답은 언제나 내 안에 있다

나의 의견이 반영되었다고 해서 내가 잘못된 부분이 없을까..?
그렇지 않다고 생각했다. 프로젝트를 시작하고 디테일 페이지 담당자끼리 데이터에 대한 대화를 나누고 시작했었어야 했었다.

삼십 문방구 프로젝트를 진행할 때는 그런 일이 일어나지 않았어서 문제가 될 줄 몰랐다.

문제를 해결하고 난 후에 나의 모습

 

문제는 언제나 생기지만, 그 문제에 대한 답은 나한테 있었다.
프로젝트를 하며 대화가 없다면 대화를 먼저 시도해보자.

---

🏃🏻 2차 스프린트

팀원 대부분 1차 스프린트의 목표였던 스타일링을 끝내고, 기능 구현을 진행하고 있었다.

나는 지도 api를 적용시키고, 달력 라이브러리인 reac-dates를 사용하여 달력 기능을 구현하고 있었다.

리스트 페이지를 맡은 상민님은 카테고리와 숙소 필터링을 구현 중이었고, 윤숙 님은 html, css를 어려워하셔서 아직 진행 중이셨다.

---

Prop Drilling

props를 내려주는 나

달력을 구현하면서 프롭스 드릴링을 하게 되었다...

 

체크인 / 체크아웃 인풋에 원하는 날짜를 출력하는 순서는 아래와 같다.

props 구조

1. 예약바 컴포넌트의 체크인 state를 props로 모달창에 내린다.
2. 모달창 컴포넌트에서 체크인 state를 다시 한번 달력에 내린다.
3. 달력 컴포넌트에서 props로 체크인 state를 받아서 원하는 날짜는 클릭하여 체크인 state에 값을 담는다.
4. 날짜가 담긴 체크인 state를 다시 부모 컴포넌트로 올린다.

지금은 3개의 컴포넌트만 이동하면 되지만, 서로 주고받을 게 많다면 혹은 더 깊은 깊이의 컴포넌트를 왔다 갔다 해야 한다면? 코드가 더 복잡하고 길어질 것이다.

 

이 부분을 리덕스를 통해 더 간편하게 state 값을 전달하려고 했지만 프로젝트의 기한이 다 되어 적용시키지는 못했다.

추후에 리팩토링할 때, 리덕스를 적용하여 관리할 예정이다.

---

내 바퀴가 잘 굴러가고 있다면, 다른 바퀴도 잘 굴러가는지 확인하자

바퀴 확인하자!

프로젝트 발표 전날, 팀의 전체적인 흐름을 파악하고 점검하는 과정에서 윤숙 님이 맡은 페이지가 완성이 안 되어있는 것이 파악되었다.

팀원에게 모르는 걸 물어보는 게 팀원의 시간을 뺏는 것 같아서 도움 요청을 못하셨다고 하셔서 마음이 아팠다.

먼저 도움을 드렸어야 했었는데 맡은 페이지에 집중하느라 그러질 못했던 것 같다.

다행히 내가 한 번 해본 Nav 컴포넌트와 서비스의 소개를 하는 메인 페이지를 맡고 계셔서 도움을 드리는 게 어렵지 않았다.

그렇게 모든 페이지를 완료했고 발표 전날 통신까지 완료되어 발표 준비를 할 수 있었다.

 

프로젝트는 개인이 아니라 팀으로 진행되고 운영된다.
내 바퀴가 굴러가면 다른 바퀴들도 잘 굴러간다는 장점이 있지만,
내 바퀴만 굴러가면 프로젝트는 완성이 되지 않으니 항상 주변을 돌아보자.

---

🔊 프로젝트 발표

프로젝트 당일의 나

우리가 기획한 네집내집은 기존의 숙소 예약 서비스보다 좀 더 친근한 숙소 예약 서비스를 목표로 한다.

네집내집은 배너의 문구, 페이지의 소제목 등 사용자에게 전달하는 메시지 또한 더 친근감 있게 다가가려 노력했다.

발표를 듣는 사람들의 반응은 기존의 숙소 예약 서비스를 대하는 모습과는 달랐다.

 

숙소를 보며 '저 집 좋다' 보다는 어? OO이네 집이네 같은 친구의 집을 보는 듯한 반응을 보였다.

또 반응 속에서 친근함을 느끼는 모습을 볼 수 있었다.

 

우리가 사용자에게 전달하고자 하는 메시지가 사용자에게 고스란히 전달되는 모습을 보니 너무 뿌듯했고, 다시 한번 기획의 중요성을 느낄 수 있는 기회였다.

---

프로젝트 영상

- 메인 페이지 -> 소셜 로그인

메인페이지- 소셜 로그인을 진행하는 모습

---

- 리스트 페이지

- 리스트 페이지

- 디테일 페이지

- 디테일 페이지

---

프로젝트를 마치며..

프로젝트 중 명국님과 대화를 하다가, 갑자기 명국님이 저희 이런 얘기를 나누고 있네요? 라고 말한 적이 있다.

나는 무슨 얘기요? 라고 물었고, 아래와 같이 답해주셨다.

 

두 달 전에 우리는 기초적인 html, css에 대한 얘기를 나눴지만 지금의 우리는 React, django에 대한 얘기를 하고 있네요?

란 말을 들었을 때, 처음 개발을 시작했을 때의 모습보다 성장했다는 생각이 들었고, 말로 표현하지 못할 기분이 들었다.

 

기존의 딱딱한 문구와는 다른 더욱 친근한 문구를 생각하고 데이터에 적용시킨 
백엔드 명국님, 은지님, 기현님에게 감사하다는 말을 전하고, 
프론트 상민님, 윤숙님에게 프로젝트 너무 재밌게 잘 끝내서 좋았다는 말을 전하고 싶다.

프로젝트 보러 가기