프로젝트 ModeKUNST

토크노믹스 기반 패션 어드바이징 커뮤니티 입니다.

💁🏻 Why ModeKUNST?

3차 프로젝트 팀원 선정 기간을 앞두고 다음 3가지 조건을 충족하는 프로젝트를 기획했다.

• 1. 🔥 내 모든 것을 불태울 수 있을 만큼의 흥미로운 주제여야 한다.
     이 못난 성격(?) 때문인지 살짝 발만 담그는 식의 경험을 별로 좋아하지 않는다. 따라서 내가 전력투구 할 수 있는 흥미로운 프로젝트 주제를 선정해야 했다.
• 2. ⛓ 블록체인 프로젝트는 일상과 맞닿아 있어야 한다.
     기술을 '구현'하는 입장에서가 아닌 기술을 '경험'하는 입장에서 생각해야 했다.
     여러 블록체인 프로젝트가 탄생하고 사라지고 있는데 일반인들은 이를 알지 못한다.
     그래서 최대한 일상과 맞닿은 프로젝트 주제를 선정해야 했다.
• 3. 💆🏻 인간의 기본적인 욕망을 자극해야 한다.
     일상과 맞닿아 있어야 한다는 조건과 일맥상통한다.
     의식주, 인간이 기본적으로 갖고 생활하는 욕망의 종류다.
     결론은 '의', 옷과 관련된 주제로 마음이 쏠렸다.

주변에 옷을 어떻게 입어야 멋쟁이가 될 수 있는지 고민하는 친구들이 많았다.
그러다가 커피를 한 모금 들이킨 순간, 한 가지 생각이 번쩍하고 지나갔다. ⚡️
"본인에게 어울리는 스타일링을 어떻게 해야 하는지 갈피조차 잡지 못하는 개인들의 고민을 해소해줄 수 있으면 좋겠다!"
팀원 선정 기간에 아이디어를 제시했고 생각보다 빠르게 팀원이 모였고 빠른 일정이 시작됐다.
'멋지거나 혹은 예쁘고 싶은 욕망을 이뤄주자!' 그렇게 프로젝트가 자리잡기 시작했다.

🚩 프로젝트 기간

2022.11.10. - 2022.12.3. (약 3주)
** 온라인 진행

💪🏻 팀원

• 총 인원(4명) = 프론트엔드(2명) + 백엔드(2명)

나는 기획과 프론트엔드를 담당했다.
스마트컨트랙트 코드는 다같이 구현하기로 했다.
지난 1-2차 프로젝트 때 팀장을 맡았기 때문에 마지막 3차 프로젝트 때는 다른 팀원에게 팀장이 될 소중한 기회를 넘겼다. (사실 1-2차 프로젝트 동안 너무 힘들었다 🥲)

💻 프로젝트 깃허브 주소

https://github.com/codestates-beb/BEB-06-FINAL-ModeKunst

🕹 사용한 기술 스택

• 프론트엔드
  • React, Redux Toolkit(상태 관리)
  • 스타일링: TailwindCSS, Styled-components, Framer-motion
• 백엔드
  • Node.js, Express, MySQL, Sequelize
• 스마트컨트랙트
  • Solidity, Ganache, NFT Storage
• 협업 툴
  • Github & Gitmoji, Discord, Figma, Google Meet

✌🏻 My Task

완벽하지는 않지만 모두 반응형(모바일, 태블릿, 데스크탑) 디자인으로 구성했습니다. 🙃

1. 헤더 컴포넌트
   • 로그인 여부에 따른 UI 변환
   • Search bar - 검색어를 입력하면 Search 페이지로 이동 후 결과 노출
     
   • 토큰 교환 버튼 - 커뮤니티 활동으로 획득한 마일리지를 토큰으로 교환
     
2. 회원가입 & 로그인 페이지
   • 회원가입 시 이메일, 연락처, 닉네임 유효성 검사
     • 이메일 인증
       
     • 연락처 인증
       
     • 닉네임 유효성 검사
       
     • 회원가입 완료
       
   • Redux-persist를 사용한 유저 로그인 상태 전역 관리
     • 로그인
       
3. 메인 페이지
   • 전체 게시물 무한 스크롤 (Intersection Observer API)
     
   • 배너 슬라이더, 상단 게시물 캐러셀
     - 🔩 라이브러리: react-slick
     • 배너 슬라이더
       
     • 상단 게시물 캐러셀
       
4. 게시글 작성페이지
   • 게시물 정보 입력, 이미지 업로드 및 미리보기
     - 🔩 라이브러리: react-hook-form
     • 게시물 정보 입력(게시물 기본 정보, 패션 정보 입력)
       
       
       
     • 이미지 업로드 및 미리보기
       
5. 유저 페이지
   • 인기 게시물, NFT 보유 목록, 좋아요한 게시물, 팔로우/팔로워 리스트 섹션 구성
     
6. 이메일, 비밀번호 찾기 페이지
   • 이메일 찾기
     
   • 비밀번호 찾기
     • 방법 1. 이메일
       
     • 방법 2. 연락처
       

🙇🏻‍♂️ 좋았던 점(고마웠던 점)

1. 🛝 협업의 즐거움
   ✅ 회의를 하며 일정을 계획하고 정해진 목표량을 날마다 체크하는 일련의 팀 활동은 나를 불타오르도록 만들었다. 팀원 모두가 배려가 넘쳐서 분위기도 좋았다. 하지만 배려가 넘친다고 무조건 좋은 건 아닌 것 같다(?). 이는 아쉬웠던 점을 다룰 때 다시 얘기해보려 한다 😓
   ✅ 홀로 구글링하며 모르는 것을 해결하고 기능 구현하는 것도 즐거웠지만 팀원들과 협업하며 서로의 문제를 해결하는 일련의 과정들이 너무 즐거웠다. 프론트/백 영역을 가리지 않고 머리를 맞대 프로젝트 완성도를 높여가는 부분이 기억에 남는다. 게시글 수정페이지를 만들면서 이미지가 정상적으로 불러와지지 않는 문제 때문에 날밤을 지새웠던 게 특히 기억에 남는다 🌜
   ✅ 프론트엔드 팀원분과 이틀에 한 번 코드 리뷰를 했던 게 가장 기억에 남는다. 팀원이 이 코드는 왜 이렇게 작성했는지 물어봐주는 것도 좋았고 팀원이 쓴 코드를 이해하는 과정도 즐거웠다. "이렇게 작성하면 좋겠는데? 이렇게는 작성하지 말아야 겠다" 프론트엔드 팀원 분에게 감사의 말씀을 전달드리고 싶다 😁
   ✅ 멘토님들의 모습을 보면서 많은 자극을 받았다. 저 정도로 많이 알기 위해서는 뼈를 깎는 노력을 하셨을텐데.. 나도 나중에 후배들에게 도움을 주기 위해서 노력해야 겠다는 마음을 매일 되새겼다.

2. 👏🏻 개발 자신감 상승
   ✅ 아는 것도 팀원한테 설명해주면서 자신감을 얻을 수 있었던 것 같다. 라우팅 구조를 왜 이렇게 짰는지 설명하면서 nested routes에 대한 두려움이 사라졌다. 또 이미지 처리 과정을 설명하면서 특정 메서드가 존재하는 이유를 알게 되었다. (지금 보면 당연한 말이지만...) 생각하는 여유? 아무튼 사고가 조금 더 유연해진 것 같다!
   ✅ 반응형 디자인에 대한 막연한 두려움을 가지고 있었는데 해소할 수 있었다. 작은 모바일 화면부터 만들고 점점 넓은 화면을 설계하는 식으로 방향성을 확립했다.
   ✅ 머리로만 생각해왔던 것들을 팀원들과 소통하며 결과물을 도출하는 과정에서 자신감을 많이 길렀다. 더 예쁘게, 더 효율적으로 짤 수 있을텐데 고민하는 과정 덕분에 자신감을 가득 채울 수 있었다.

🤦🏻 아쉬웠던 점(배운 점)

1. 🗺 프로젝트 관리
   ❎ 지금 돌이켜보니 Todo 리스트를 막연하게 작성한 것 같다. 조금 더 구체적으로 작성해서 개발 속도를 더욱 빠르게 할 수 있었는데 후회가 된다.
   ❎ 한번 휘청하니까 도미노 효과로 뒤에 일정이 어그러지는 건 당연한 수순이었다. 그럴 때마다 개발 의욕이 꺾이곤 했다. 모든게 계획대로 흘러갈 수는 없지만 그래도 더 잘 할 수 있었을텐데 라는 생각을 지울 수는 없다.
   ❎ 서로 배려를 많이 했다고 했는데 마냥 좋은 것 같지는 않다. 서로 놓친 부분에 대해 따끔한 피드백이 적절한 시기에 들어갔다면 개발 속도를 늦추지 않을 수 있었을텐데 후회가 된다.

2. 🏃🏻‍♀️ Web3 프로젝트인가? Web2 프로젝트인가?
   ❎ 멘토 시간 때 자주 들었던 말이다. 인스타그램으로도 충분히 커버 가능한 주제인 것 같은데 왜 굳이 ModeKUNST 커뮤니티를 사용해야 되냐는 질문에 말문이 막혔다.
   ❎ 지갑과 토큰이 블록체인 기술의 전부가 아니라는 점을 알고서도 개발을 진행한 점이 아쉽다. 실제로 개인 정보는 DB에 저장되고 심지어 보유 중인 토큰양도 DB에 저장된다. 전혀 블록체인 기술이 꽃 피우는 지점을 볼 수 없었다. 이 한계를 인지했음에도 불구하고 개발을 진행한 건 어쩌면 프론트엔드 개발이 즐거워서 아니었을까? 차라리 프론트엔드 부트캠프에 참가하지 왜 블록체인 부트캠프에 참가했을까? 하하하하하하하하하하(?)

3. 🗣 팀원과의 소통(배포 실패)
   ❎ 특히 아쉬운 부분이다. 처음에는 공통 API 문서를 만들어두고 프론트 쪽에서 필요한 데이터가 생기면 API 문서에 적고 노티를 날리면 백 쪽에서 해당 데이터 구조를 수정하고 다시 노티하기로 했다. 하지만 요청 사항은 정확하게 전달되지 않았고 그 횟수가 점점 누적된 결과 약간의 갈등으로 번지기도 했다. 정확하게 전달돼서 원하는 데이터를 받아오는데 성공했다고 해도 프로퍼티명 typo로 인해 에러를 해결하기 위해서 적지 않은 시간이 소요되기도 했다. 서로에 대해 점점 불만사항이 쌓였고 그럴수록 프로젝트 진행 속도는 느려졌다. (타입스크립트의 필요성을 느낀 순간이다 😁)
   ❎ 깃 레포에서 pull을 했는데 일부 코드에서 에러가 났다. 그런 경우가 종종 있었는데 원인은 백엔드 팀원 한 명이 리액트 코드를 수정해서 push 했던 것이다. (????) 서로의 코드를 살펴봤다는 점에서 좋은 취지라고 생각하지만... 왜 코드를 일부 수정했다고 노티하지 않았지 하는 의문을 지울 수 없다.
   ❎ 프로젝트를 계획 단계에서 채팅 기능은 advanced todo 리스트로 분류했다. 시간이 남으면 구현하고 그렇지 못하면 패스하자고 합의를 해놓은 상태였다. 그런데 갑자기 문제의 백엔드 팀원 한 명이 계획에는 없던 관리자 페이지 제작을 제안했다. Web3 정신에 위배되는 것 같아 기각했는데 결국에는 받아들이고 개발을 재개했다. 하지만 예상했던 대로 관리자 페이지를 만드는 데에는 생각보다 많은 시간이 소요되었고 기존 작업들도 영향을 받는 상황에 놓였다. 문제는 여기서 발생했다. 문제의 팀원이 채팅 기능도 구현해야 한다는 의견을 제시했다. 이에 나머지 팀원은 채팅 기능을 구현하지 않아도 충분히 완성도가 높을 거란 의견을 전달했다. 하지만 채팅 기능을 구현해야 한다는 의견이 완강했고 결국 타협점을 찾지 못했고 개발이 잠시 중단되는 해프닝이 발생했다. 나를 제외한 팀원 두 명은 결국 지쳐서 여기까지만 하겠다고 선언했고 이대로는 프로젝트를 완성하지 못할 게 불 보듯 뻔했다. 나머지 팀원 두 분에게 관리자 페이지에 힘 쏟아달라고 전달했고(실제로 관리자 페이지는 성공적으로 마무리 되었다) 내가 문제의 팀원과 붙어 채팅 기능을 마무리하겠다고 밝혔다. 그렇게 웹소켓을 다루게 되었다. 그런데... 프로젝트 종료를 4일 앞두고도 채팅 기능을 완성하지 못했다. 주말까지 에러를 해결해서 노티 주겠다는 해당 팀원은 잠수를 타버렸고 미리 만들어놓은 컴포넌트들은 필요없게 되었다. (??????????) 내가 그분에게 행여나 실수를 했나 돌이켜봤지만 그럴만한 해프닝은 전혀 없었다. 결국 한 팀원의 욕심을 제대로 제어하지 못한 탓에 프로젝트를 배포하지 못했다.
   ❎ 애정을 갖고 진행한 프로젝트인데 이렇게 허무하게 끝나버렸다. 서로를 배려한다고 좋은 취지에서 넘어가고는 했지만... 다음 팀 프로젝트 때는 배려를 바탕으로 적절한 시기에 적절한 발언은 꼭 해야겠다고 다짐했다.

🍀 마무리

프로젝트를 정상적으로 배포하지 못했다는 점에서 많이 아쉬움이 남는다.
하지만 팀원 간 끊임없는 소통의 중요성(enough is NEVER enough), 쾌적한 개발 경험을 위한 타입스크립트와 GraphQL 공부의 필요성, 무엇보다 향후 개발자로서의 자신감과 확신을 얻었다는 점에서 감사한 마음이 더 크다.
더욱 멋있는 개발자로 성장하자 🔥