코드잇 프론트엔드 기초 팀 프로젝트 회고록

서론

5월 29일에서 6월 13일까지 약 2주간의 기간 동안 코드잇 부트캠프 프론트엔드 과정에서 진행하는 기초 팀 프로젝트를 진행하였습니다. 개발을 공부하기 시작하고 처음으로 해보는 팀 프로젝트였기에 기술적 어려움은 물론이고 초기에는 소통이나 정보 공유에 있어서도 어려움을 겪었습니다. 하지만 프로젝트 기간동안 팀원분들과 매일같이 작업을 하고 의견을 나누며 기술적 문제는 서로 알아보며 해결을 하였고 소통의 문제는 회의때 규칙을 정하거나 따라야할 컨밴션 등을 정하며 해결해 나갔습니다. 팀장으로서 회의를 이끌거나 팀원분들을 격려해주는 일이 많았는데 그때마다 잘 따라와 주시고 적극적으로 협력해 주신 8팀 팀원 분들 덕분에 이런 문제점을 끝까지 가져가지 않고 프로젝트 도중에 해결한 것 같습니다.

 우리 8팀은 최종 기한까지 결과물을 만드는 것은 물론 우리 팀만의 개성을 보일 수 있는 추가 기능까지 구현하며 무사히 마치며 작업물을 배포까지 마쳤고 내가 13일에 대표로 발표를 하며 무사히 팀 프로젝트를 완료했습니다. 최근 8팀 출신 팀원분들의 피어리뷰까지 받았기에 이 팀 프로젝트에 대한 KPT 회고를 적고자 합니다.

 

결과물 배포 링크 https://team8-delta.vercel.app/

프로젝트 개요

프로젝트 내용 ( 서비스 소개, 컨셉 소개 )

• 팬덤케이(FandomK)라는 이름의 좋아하는 아이돌을 위해 후원, 투표, 인기 차트 확인 등의 기능을 제공하는 아이돌 팬덤 플랫폼을 만드는 프로젝트입니다. 이러한 기능을 통해 팬덤 활동에 실질적인 참여감을 줄 수 있는 서비스를 지향하며 만들었습니다.  

 

주제 및 선정 배경 

• 첫 프로젝트인 만큼 팀원 모두가 배우고 성장하고자 하는 의지가 강했기 때문에 난이도 '상' 프로젝트를 선택했습니다.
• (제안) 팀원들이 평소 아이돌에 관심이 많았기 때문에 아이돌 관련 서비스를 만들어 보는 좋은 경험을 할 수 있을 거 같아서 팬덤케이 프로젝트를 선택했습니다.

 

개발환경

• Frontend: HTML, CSS, JavaScript, React
• 배포: Vercel
• 버전 관리: Git, GitHub
• 협업 툴: Figma, Notion, Discord
• (제안) vite랑 사용한 라이브러리도?

 

프로젝트 구조

• 공용 컴포넌트 및 스타일링 시스템 설계
• 라우팅 기반의 페이지 구조
• 기능 단위로 컴포넌트를 분리하여 재사용성 확보
• API 연동을 통한 실시간 데이터 처리

 

 

활용 방안 및 기대 효과

• 아이돌에 관심 있는 사용자층을 겨냥한 실사용 가능한 팬덤 플랫폼으로 확장 가능성 보유
• API 연동 및 공통 UI 설계를 통해 재사용성과 유지보수 효율성을 체험
• 실무와 유사한 기능 분담과 협업을 통해 팀워크 및 문제 해결 능력 향상

 

프로젝트 수행 절차 및 방법

[ 주제 선정 ]

• Discord로 실시간 소통 및 회의

[ 역할 분담 및 일정 계획 ]

• Notion을 활용해 전체 일정 및 역할 분담표 관리
• GitHub에서 브랜치 전략 사용

[ 공용 컴포넌트 및 스타일 시스템 설계 ]

[ 기능 구현 및 API 연동 ]

[ 페이지별 UI 개발 및 통합 ]

[ 버그 수정 및 디버깅 ]

[(제안) 디자인 수정 및 작업물 병합]

[ 최종 테스트 및 배포 ]

• Vercel로 배포 테스트 반복

 

 

KPT 회고

 

KEEP

• 프로젝트를 끝까지 완성했습니다.
• 팀원들과의 소통이 활발했고, 협업에 적극적으로 참여했습니다.
• 발생한 이슈에 대해 함께 해결하려는 자세를 유지했습니다.
• 추가 기능에 대해 많은 아이디어를 나누고 실제로 여러 가지를 구현했습니다..
• 팀원들 간의 소통이 활발해 문제가 발생했을 때 바로 회의하고 해결해 나갈 수 있었습니다.
• 문제가 발생 했을 때 팀원들끼리 상의를 해서 트러블 슈팅을 진행했으며 해결 못할 사항은 시니어 개발자에게 질문하여 프로젝트 진행을 늦추지 않을 수 있었습니다.

PROBLEM

• 공용 스타일링과 컴포넌트를 구성했지만, 실제 구현 과정에서 일부가 재사용되지 않았습니다.
• 공용 레이아웃까지 함께 설계했다면 전체 구조가 더 통일감 있었을 것 입니다.
• 구현하고 싶은 추가 기능 아이디어는 많았지만, 여러 이슈로 인해 실제 프로젝트에 반영하지 못한 점이 아쉬웠습니다.
• swagger UI에 대한 이해가 부족해 프로젝트 초반에 잘못된 방향으로 작업을 진행했었던 점이 아쉬웠습니다.
• 설정 페이지에서 다크모드와 라이트모드 전환 기능, 그리고 다국어 번역 기능을 구현하지 못한 점이 아쉬웠습니다.
  특히 다국어 번역 기능을 통해 각 국가별로 인기 아이돌 정보를 현지화하여 보여주고자 했지만, 기술적인 제약과 시간 부족으로 해당 기능을 완성하지 못해 아쉬움이 남습니다.

TRY

• 첫 팀 프로젝트였던 만큼 협업 과정에서 어려움도 많았습니다. 예를 들어, 팀원 간의 원활한 소통이나 Git을 활용한 버전 관리 및 공용 컴포넌트 사용에 익숙하지 않아 일부 비효율적인 작업이 있었습니다. 하지만 이러한 경험을 통해 협업의 중요성과 기술적인 부분에 대한 보완점을 많이 느낄 수 있었고, 다음 프로젝트에서는 더 나은 협업이 가능할 것이라 생각합니다.
• 피어리뷰에서 팀장으로서 책임감있게 열심히 하는 모습은 좋았고 열심히 참여해주셔서 감사하다는 평가와 함께 조금만 더 자신감 있게 활동을 하시면 좋을 것 같다는 평가를 받았습니다. 이러한 평가에 대해 생각해보았고 다음 팀 활동 및 프로젝트에서는 좀 더 자신감 있게 소통해보고자 합니다.