[프로젝트 회고] Fandom-k 프로젝트를 마치며..

🚪 들어가며

 

코드잇 스프린트 9기 과정 중 첫번째로 프로젝트를 진행했습니다. 인원은 프론트엔드 5명이었고 API 명세 등 백엔드 서버는 주어진 상황이었습니다. 프로젝트 진행기간은 약 3주였습니다. 

 

📚 프로젝트 소개

Fandom-K는 아이돌을 좋아하고 팬덤문화를 일상에서 자주 접하는 사용자가, 등록된 아이돌 중 한 명 또는 여러 명에게 크레딧을 충전하여 후원을 할 수 있고 인기투표를 할 수도 있는 아이돌 팬덤 플랫폼입니다. 

 

구체적인 회고 전에 배포 사이트 링크를 통해 저희 팀의 결과물을 먼저 훑어보셔도 좋을 것 같습니다😎

 

배포 링크: https://fandom-k-9-4.netlify.app/

 

🔨 기술스택

• 개발환경: React/JS/React-Router
• 빌드: Vite
• API 관리: Axios
• 커뮤니케이션: Discord/Notion
• 버전관리: Github
• 상태관리: Context API

 

😎 나의 역할

1. 공통 컴포넌트 (Button, Header, RefreshButton) 구현

모든 페이지에 사용되는 공통 컴포넌트 중 Button, Header 그리고 RefreshButton를 구현했습니다.  이 중 RefreshButton은 오류 발생 시, 렌더링되는 페이지로 새로고침 버튼을 통해 페이지 새로고침을 유도합니다. 

 

 

2. 랜딩 페이지(홈 페이지) UI 및 기능 구현

 

공통 컴포넌트 제작을 제외한 저의 첫번째 임무는 랜딩 페이지 제작이었습니다. 모든 UI와 기능을 구현했습니다.

'지금 시작하기' 버튼 클릭시, localStorage 초기화하고 리스트 페이지로 이동하도록 했습니다. 또한, IntersectionObserver를 이용하여, 아래로 스크롤 시, 애니메이션 기능을 추가했습니다. 이 과정에서 useIntersectionObserver 훅을 만들어 재사용하며 코드를 간결히 만들려 노력했습니다.

 

 

3. 마이 페이지(홈 페이지) UI 및 기능 구현

 

마이 페이지에서 제가 구현한 기능은 다음과 같습니다. 

• 아이돌 목록
  • PC에서 아이돌 목록은 좌/우측 버튼 클릭 시 다음 순서의 후원 리스트가 보입니다.
  • Tablet, Mobile 에서 터치 스크롤을 통해 조작합니다.
• 관심있는 아이돌 추가 및 삭제
  • 아이돌 목록에서 한 명 또는 여러 명의 아이돌을 관심 아이돌로 추가 및 삭제하는 기능을 구현했습니다.
  • 관심 있는 아이돌로 추가하고 싶은 카드를 중복으로 선택가능합니다.
  • 선택된 카드는 체크표시가 됩니다.

•  

마이페이지 안에는 관심있는 아이돌 목록(InterestedIdols.jsx)컴포넌트와 추가할 수 있는 아이돌 목록(AddInterestedIdols.jsx) 컴포넌트로 나눠서 구성했고 상태관리는 Context API를 사용했습니다.  

 

AddInterestedIdols부터 살펴보면 아이돌 목록을 불러올 때, 오른쪽 화살표 버튼을 클릭하면 무한 스크롤을 통해 데이터를 로딩해서 배열에 담도록 설계했습니다. 이 과정에서 랜딩 페이지 애니메이션을 구현할 때 사용한 IntersectionObserver를 활용했습니다. 특히, 커스텀 훅을 통해 재사용성 높은 컴포넌트를 만들기 위해 노력했습니다. useDataNum 훅을 만들어, 반응형에 따라 불러올 데이터를 쉽게 설정하여 받을 수 있도록 했고 useScrollTo 훅을 만들어, 캐러셀 기능을 list 페이지에서도 재사용 가능하게 했습니다. 

 

InterestedIdols에서 관심있는 아이돌 목록에 추가되면 localStorage에 저장하여 새로고침하더라도 추가한 아이돌 데이터가 유지되게 했습니다. 또한, 이 목록에 비었을 때 렌더링할 EmptyMessage 컴포넌트도 만들었습니다. 

 

💯 배운점

1. Github를 통한 협업방식

개발자의 덕목은 개발 실력뿐만아니라 협업 능력도 있다고 생각합니다. 타인들과 협업하여 개발할 기회가 없었는데 이번 프로젝트를 통해 협업방식에 대해 배웠습니다. 

Git flow 전략

 

저희 팀은 Git flow 전략을 채택했고 각 팀원 이름의 브랜치에서 개발을 하고 dev브랜치로 PR을 올려 dev에 우선 Merge를 한 후, Main브랜치에 합치는 방식으로 진행했습니다. 이 방식으로 협업을 진행하며 특히, 코드리뷰 과정이 좋았습니다. 완벽하다고 생각했던 코드에서 오류나 비효율적인 부분을 지적당하고 개선하는 과정을 통해 개인적인 성장과 함께 결과물의 퀼리티를 높일 수 있었던 것 같습니다. 

 

또한, 다른 팀원의 코드를 읽고 리뷰하며, 프로젝트 전체적인 코드의 이해도를 높일 수 있었고 이를 통해 오류 및 보완해야 할 점을 더 잘 찾을 수 있었습니다.

코드리뷰

 

 

2. 스크럼 방법론을 통한 팀 커뮤니케이션

저희 팀은 일요일을 제외한 매일 오전 11시부터 오후 5시까지를 코어 타임으로 설정하여 작업을 진행했습니다. 코어 타임 동안에는 문제가 발생할 경우 팀원들 간에 빠른 의사소통을 통해 즉각적으로 해결하려고 노력했습니다. 또한, 매일 오후 3시 30분에 데일리 스크럼을 진행하여 각자의 진행 상황과 이슈를 공유하고, 프로젝트에 대한 이해도를 높였습니다. 이러한 방식으로 팀원들 간의 협업을 강화하고, 전체적인 작업 흐름을 원활하게 유지할 수 있었습니다.

 

 

3. 재사용성을 고려하여 코딩하기 

앞서 언급했던 것처럼, 각 페이지를 구현하는 과정에서 재사용이 가능한 커스텀 훅을 만들기 위해 노력했습니다. 컴포넌트 간에 동일한 로직이 필요한 경우, 커스텀 훅을 사용하면 중복 코드를 피하고 로직을 한 곳에 모아서 관리할 수 있었습니다. 컴포넌트가 여러 책임을 가지게 되면 유지보수하기 어려워집니다. 커스텀 훅을 사용하여 관심사 분리를 더 잘 구현한 것 같습니다.

내가 만든 커스텀 훅

 

4. UX개선을 위한 디자인 변경

디자인 명세대로 디자인을 완성하고 각 페이지를 점검할 때, 불편한 부분들이 발견되었습니다. 

아이돌 추가 목록의 디자인

 

첫번째로 아이돌 추가 목록에는 전체, 남자, 여자 아이돌을 분류하는 기능이 없어 관심있는 아이돌을 찾기 힘들었습니다. 

 

아이돌 분류 기능 추가

 

그렇기에 위 그림과 같이 분류 기능을 추가하여 관심있는 아이돌을 쉽게 찾을 수 있도록 했습니다.

 

Header의 디자인

 

두번째는 Header에서 타이틀을 클릭하면 리스트 페이지로 이동하고 오른쪽의 프로필 이미지를 클릭하면 마이 페이지로 이동하지만, 랜딩 페이지로 돌아갈 방법이 없다는 것을 알게 되었습니다.

 

Header에 Home 아이콘 추가

 

그렇기에 위 그림과 같이 Header의 왼쪽에 Home 아이콘을 추가하여 클릭 시 랜딩 페이지로 이동하는 기능을 추가했습니다.

 

물론, 현업에서 디자이너의 디자인을 마음대로 바꾸면 안되겠지만, 이렇게 개발 도중 UX를 개선할 수 있는 부분이 보이면 디자이너와 협의하여 수정할 수 있을 것입니다. 프로젝트를 진행하며 사용자 입장에서 생각해보는 법을 배웠습니다.

 

📝 보완할 점

1. 상태 관리 

이번 프로젝트에서는 Context API를 통해 상태 관리를 했으나, 소규모 프로젝트였기에 문제가 없었던 것 같습니다.

추후 진행할 프로젝트에서는 다른 상태 관리 라이브러리를 사용하면서 학습하여 역량을 쌓고 싶습니다. 

 

2.  프로젝트 진행 상황 관리 

각 기능별로 올리는 PR의 부족, Github projects의 todo를 활용한 이슈관리를 중간쯤부터 해본 점, 코드리뷰와 일정관리를 첫날부터 정하지 못하고 중간쯤부터 진행했던 점 등 개발 이외에 협업 과정에서 아쉬웠던 점이 있습니다. 다음 프로젝트를 진행할 때는 이 점에 더 유의하여 꼼꼼히 관리할 것입니다. 

 

3. 최적화 필요성

소규모 프로젝트였기에 이번 프로젝트에서는 크게 신경쓰지는 않았지만 프로젝트 규모가 커질수록 성능 최적화가 중요해집니다. 예를 들어, React의 렌더링 성능 최적화(memoization, useMemo, useCallback 등)나, 대량의 데이터를 처리할 때 가상 스크롤링(Virtual Scrolling)을 도입하면 페이지 로딩 속도와 성능을 개선할 수 있습니다.