[Project] Air-pnp- 회고록

💻 Air-pnp 프로젝트

숙소를 대여해주는 사이트인 에어비앤비를 모티브로 삼아 내가 있는 지역에 내가 원하는 재능을 가진 사람의 시간을 빌리는 서비스를 제공합니다 :)

• 참고 사이트: 에어비앤비
• Air-pnp 프론트엔드 깃헙 레포
• Air-pnp 홈페이지 시연 영상 보러가기!

📅 프로젝트 기간

2021.12.13 ~ 2021.12.24

프로젝트 기획

프로젝트를 기획하면서 처음에는 다양한 의견이 제시 되었다. 파티룸 대여를 주된 컨셉으로 정하고 여러 테마를 만들어보기, 여행지를 정해서 임의의 장소를 만들기 - 익스트림을 위한 장소, 상상속의 장소, 아틀란티스, 버뮤다삼각지대 등등.. 인공 섬을 만들어서 그곳에 있는 숙소를 대여해주기 등 다양한 컨셉이 나왔지만 보다 현실적으로 초점을 맞출만한 타이틀이 필요하였다. 그래서 에어비앤비를 베이스를 가지고 가되 굳이 숙박이 아닌 포맷만 동일하게 가지고 가기로 하였다. 최종적인 컨셉으로는 '장소'가 아닌 내가 있는 지역의 내가 원하는 재능을 가진 사람의 '시간'을 대여해주는 사이트로 폭이 좁혀졌다. 그렇게 사람을 뜻하는 people과 응시하다를 뜻하는 peer의 약자로 에어피앤피라는 사이트가 탄생하였다.

☃️ 팀 구성

• Back-end: 3명
• Front-end: 3명

💡 기술 스택

👉🏻 Common :

• Git
• Github
• Slack
• Trello
• Notion

👉🏻 Back-end :

• Python
• Django
• MySQL
• Docker
• JWT
• Bcrypt
• AWS EC2
• RDS
• S3(이미지)

👉🏻 Front-end :

• JavaScript
• React.js
• HTML5 / CSS3(Styled-components)
• React-router(v6)
• Naver MAP API
• Kakao Social SDK
• S3(배포)

📸 구현 목록(볼드 처리 된 부분은 직접 구현한 기능)

[Front-end]

• Nav :

  • 검색 버튼 클릭 시 모달 애니메이션 구현 및 스타일링
  • 회원 로직을 위한 드롭다운 메뉴 구현
  • 커스텀 DatePicker를 통해 특정 날짜 사이의 호스트 검색기능 구현

• 호스트 리스트 페이지

  • 페이지네이션을 통해 다수의 데이터를 페이지로 분리
  • 체크박스 및 네이버 맵을 이용한 카테고리/지역 필터링
  • 슬릭슬라이더를 통한 이미지 미리보기 기능

• 호스트 상세 페이지

  • 전반적인 레이아웃 구현
  • content가 5줄 이상일 경우 css처리로 더보기 버튼 생성, 더보기 버튼 클릭 시 description 모달창 구현
  • slick 라이브러리 사용하여 사진 캐러셀 기능 구현 및 스타일링

• 호스트 등록 페이지

  • 네스팅 라우팅을 통한 호스트 등록절차 기능 구현
  • 이미지 업로드 이후 미리보기 기능 구현
  • FormData를 이용하여 데이터 서버 전송

• 로그인

  • 카카오 SDK를 이용한 카카오 소셜로그인 구현

  🖊 프로젝트 진행 방식

• 프로젝트는 Scrum 방식으로 진행되었으며 애자일 스프린트 방식으로 작업하였다. 스크린트 기간은 각 1주일로 잡아 총 2번의 스프린트로 진행되었다.

  • 1주차 스프린트 때는 전반적인 방향제시와 함께 필수구현 기능을 정하였다. 2주차 스프린트 때는 추가적인 기능구현 보다는 완성도와 배포를 목적으로 미팅을 하였다.
  • 매일 Stand-up meeting을 통해 각자 어제 했던 일과 오늘 할일을 공유했다. 시간을 따로 지정해두지 않고 모두가 모일 수 있는 시간에 미팅을 진행했는데 팀원 모두가 이 점이 좋았다고 했다.

• 모든 회의와 일정은 Trello / Notion으로 관리 되었다.

  • Trello에서는 각자 작업 상태에 따라 Backlog / This week / In progress / Code Review / Done으로 구분하여 전체적인 상황을 팀원 모두 파악할 수 있도록 관리되었다.
  • meeting을 진행할 때마다 Notion에 회의록을 작성하였다. 1주차 중반부가 지날때쯤엔 양식을 미리 만들어놔 미팅이 진행되기전에 각자의 작업 현황을 간단하게 정리해오기로 했다. 매일 실행되지는 않았지만 미팅 시간을 줄이는데 도움이 되었다.

🙇🏻‍♀️ 개인적인 소감

🧏🏻‍♀️ 내가 맡은 역할 :

이전 프로젝트때는 회원가입과 로그인 페이지를 맡게되었는데, 막상 끝내고 나니 다른 기능 구현에는 아쉬움이 남아 이번 프로젝트때는 꼭 해보지 못했던 페이지를 담당하여 여러 기능들을 구해보겠다는 욕심이 앞섰었다. 결과적으로는 메인페이지, 상세페이지, footer를 맡게 되었다.

✨ 좋았던 점

• 프로젝트 발표가 끝나고 팀원들과의 회고미팅때, 좋았던 점으로 가장 먼저 '팀원들' 이라고 답하였다. 개인적인 아쉬움이 너무나도 컸던 이번 프로젝트에서 나의 유일한 버팀목이자 좋았던 점은 동기들, 팀원들이다. 예상치 못한 실수도 잦았고 욕심만 앞섰지 뜻대로 한번에 되지 않았던 기능구현 속에서 건강한 멘탈, 평정심을 유지하기엔 정말 힘들었지만 주위를 둘러볼땐 항상 동기들과 팀원들이 있었다. 기대고 싶을땐 기댈수 있었고 나의 시시콜콜한 농담을 받아준 그들이 있었기에 2주간의 프로젝트를 무사히 마무리하고 발표땐 웃으며 소감을 말할 수 있었다고 생각한다.
• 스타일드 컴포넌트는 나의 아쉬움이자 동시에 좋았던 점이다. 처음 상세페이지 레이아웃을 짰을때 sass와 스타일드컴포넌트를 함께 혼용해서 사용했다. 그리고 스타일에 맞게 컴포넌트화를 해야된다는 코멘트를 받고 하루 온종일에 걸쳐 코드를 전면으로 수정하였다. 스타일드컴포넌트화를 시키는 반복적인 노동에 가까웠는데 처음에는 일을 두번하는데 시간을 버렸다는 생각에 너무 아쉬웠지만 그 시간이 있었기에 스타일드 컴포넌트를 익숙하게 구사할 수 있었다고 생각한다.
• 실수 또 실수! main과 footer는 아주 간단한 레이아웃만 끝내면 되는 작업이었는데, 간단하다는 점에서 그리고 익숙한 작업이라는 점에서 간과했던 부분이 많았다. 머지하면 나오고 또 머지하면 또 나오는 실수를 찬찬히 뜯어보면서 단순한 실수가 아닌 실력의 부족함에서 발생한 일이였음을 깨닫기도 했고(물론 실수도 실력의 한 부분이라고 하지만) 그 과정을 겪으며 새로 배우게 된 점, 스스로 태도를 점검하게 된 점, 이런 시간을 반복하면서 팀원들에게 폐를 끼치게 되며 다시 한번 내가 팀의 구성원이라는 것을 인지하게 해준 점 모두가 결국엔 성과였다고 생각한다.
• 그럼에도 너무 멋진 작업물로 배포까지 하고 발표까지 무사히 마칠 수 있었다. 너무너무 힘들었지만 다시 한번 개발을 하길 정말 잘했다고 생각 들게 해준 프로젝트였다. 너무나도 소중하고 감사한 경험... 🙆🏻‍♀️❤️

☄️ 아쉬웠던 점

• 위에서는 좋았던 점이라고 언급했지만 사실상 너무나도 아쉬웠던 점. 첫번째를 꼽아보자면 소통.
  • 상세페이지 레이아웃을 다 잡아놓고, 컴포넌트화까지 끝내놓고 그때서야 백엔드 조원과 상세페이지에 들어갈 데이터에 대해서 미팅을 했었다. 당연히 서로 생각한 페이지가 달랐고, 그에 들어가는 컨텐츠 또한 달랐다. 내가 바로 수정하기에도 백엔드 쪽에서 데이터를 다시 짜기에도 어려운 상황이 왔다. 결국 처음에 소통했던대로가 아닌 에어비앤비를 페이지를 그대로 클론을 한 내가 수정을 해야만했다. 이런 상황이 닥치고 제일 먼저 들었던 생각은 '내가 왜 그랬지?'의 연속이었다. 레이아웃을 짜기 전에 백엔드와 한번만 더 소통했더라면, 아니 그 전에 스프린트 회의를 통해 말을 맞췄던 컨셉에 더 집중했더라면, 등등 ~ 했더라면 으로 시작하는 후회들을 곱씹고 또 곱씹었다.
• 작업은 혼자하는게 아니야!
  • 에어비앤비의 컨셉만 빌려다 새로운 서비스를 기획하는 것이지 에어비앤비를 그대로 클론하는 것이 아니었는데, 나의 첫 작업물들은 모두 에어비앤비를 클론하였다. 보다 다양한 컨텐츠로 가득 찬 페이지를 만들고 싶은 욕심이 너무 앞섰던 것이다. 후에 덜어내기 과정을 겪으면서 개인적인 욕심에 봐야하는 방향을 보지 못했던 것에 반성을 하게 되었다. '프로젝트'라는 본질에 대해 생각해보게 되었다.
• 이 모든것을 아울러 다시 한번 정리해보자면 포인트는 '개발 외적인 것에 발목 잡히지 말기', 프로젝트의 '내용' 말고 프로젝트란 '무엇인지' 본질적으로 생각해보기이다. 프로젝트만 파도 모자랄 시간에 다른쪽으로 욕심이 쏠려 개발 외적인 것에 너무나도 많은 시간을 발목 잡힌 것이다. 그리고 프로젝트에서 무엇을 하는지 보다, 내가 프로젝트에 들어와있다는 것, 프로젝트란 협업이라는 것을 뼈저리게 느끼게 해준 고통의 연속이자 고마운 시간들이었다.
• 모든 것을 한번에 하려고 하지말고 점진적인 개발하기!
  • 욕심은 좋은 원동력이지만 과하면 독이 될 수 있다는 것. 한번에 모든 기능을 때려붓기 보다는 내가 할 수 있는 것 부터, 한단계 한단계 차근차근 밟아 나가기.

🎉 프로젝트를 마치며

두번째 프로젝트이자 공식적으로 마지막 프로젝트인 air-pnp와 함께 하면서 가장 많이 한 것은 아무래도 자아성찰이 아닐까 싶다...🤔 ㅋㅋㅋ... 과한 욕심은 독이 된다는 것을 정말 오랜만에 몸소 느꼈고 동기들은 언제나 그자리에서 날 반겨준다는 믿음은 더욱 커졌다. 다음 프로젝트는 무조건 '잘'한다라는 약속은 내걸지 못하겠지만 어떻게든 이겨낼수 있다는 무대뽀스러운 약속은 책임질 수 있다! 1차때와는 다르게 또 새로운 기술들을 사용해보며 겁내는 나보다는 즐기는 나를 발견하며 뿌듯함을 느낄수 있었고 서로의 모난점을 덮어주었던 팀원들에게 다시 한번 감사하다고 말하고 싶다. 벌써부터 넘나 그리운 시간들... 💖