[MusicMate] 팀 프로젝트 - 프로젝트 시작

 

프로젝트 로고

 

이번 프로젝트는 음악 클립을 공유하고 음악 관련 소통을 하는 SNS 플랫폼이다.
이번에도 팀장으로 전체 프로젝트 일정 관리, 스크럼 마스터로 작업하게 되었다.
이번 글에서는 프로젝트 준비 과정에서의 의사결정과 프로젝트에서의 학습 전략을 정리했다.

 

프로젝트 준비 과정

1. 프로젝트 방향성 정하기 :

프로젝트를 진행하며 팀원들이 얻어내고 싶은 건 뭔지, 요구사항을 만족하기에 어떤 아이디어가 적절할 것 같은지와 작성할 문서에 대해서 의논했다.

- 진행 중심은 학습 위주로

- SNS형태로 구현

- 필요 문서 : 와이어프레임, 디자인 문서, 요구사항 분석, 기획서

 

2. 아이디어 브레인스토밍

아이디어 브레인스토밍 뒤에 각자 차별점과 기존 서비스를 비교한 기획서를 써온 뒤 차별점 중심으로 발표했다.

 

3. 아이디어 투표

짜온 기획서대로 발표하고 투표한 뒤에 메인 아이디어를 선정했다. 선정된 아이디어는 음악 관련 커뮤니티, 음성 클립과 음악 클립을 공유할 수 있는 SNS 형태로 선택됐다.

 

4. 기술 선정

필요할 것 같은 웹 API와 관련 문서들에 대해서 조사한 뒤 사용할 기술을 미리 선정했다.

- React, TypeScript : 안정성과 재사용성, 컴포넌트 학습

- MediaRecorder API, Web Audio API : 음악 클립 재생과 커스텀에 활용

- supabase : storage, realtime 등의 다양한 기능과 상대적으로 쉽게 사용할 수 있는 라이브러리가 포함됨

 

5. 요구사항 분석, MVP 작성

요구사항을 분석하고 문서를 작성한 뒤에 MVP를 3단계로 나누어 붙였다.

 

6. 데이터베이스 구조 정의

3NF를 의식하고 설계했는데, 잘 된 부분도 있고 안 된 부분도 있다. 입력은 Table의 제약조건과 함께 Table로 넣고, 조회는 View를 이용해 Join해 관리했다. 조회나 입력에 supabase는 Join 후에 필터링이 안 되기 때문에 RPC로 관리하려고 한다.

 

 

프로젝트 문서

기획서

Figma 문서로 작성했다.

 

 

이런 느낌으로 기존 서비스 분석, 서비스 필요성, 서비스 특징, 서비스 목표, 특화 기능, MVP, 페르소나, 예상 사용 API를 정의했다.

 

 

데이터베이스 ERD :

ERD 일부

supabase가 ERD 만들어주니까 필요없겠지? 라고 생각했었는데. 자동 완성해주는 문서가 가독성이 상대적으로 떨어졌지만 흐름을 파악하기는 괜찮았다.

 

 

요구사항 정의서:

요구사항 정의서

저번엔 노션 문서로 늘어썼었는데, 이번엔 그래도 형태라도 지켜서 작성하려고 했다. 근데 요구사항을 좀 덜 쪼개서 그런지 프로젝트 진행하면서 세부화되면서 점점 늘어난다.

 

디자인 문서

프로젝트 디자인

이런 느낌이다. 하고 작성하려고 해서 엄청 세세하게 깎지는 않았다. 디자인 잘하면 좋지만 익숙하지 않은 Figma라는 툴로 개발자가 가성비가 덜 나오는 작업보다 Variable 작성하고 컨셉 위주로 잡았다.

 

 

이번 프로젝트 진행하면서 배우고 싶은 것

1. 코드를 잘 읽는 법

AI 때문에 요즘 어렵긴 하지만, 결국 개발자는 AI와 함께 일해야 할 것 같다. AI가 짜준 코드는 항상 정확하지만은 않고, 코드 LOC가 커질수록 AI는 실수할 확률이 엄청나게 올라간다. 결국엔 구조 파악은 개발자가 해야 한다고 생각한다. 

협업 과정에서도 유지보수나 구현 범위에 교집합이 있을 경우 다른 사람의 코드를 읽을 일이 많다고 하는데, 그때 잘 하는 연습을 하려고 한다.

 

- 프로젝트 진행하며 할 것

팀원들의 코드를 세세하게 살펴보지는 않더라도 전체적인 흐름을 파악하고 함수 구조를 파악하며 리뷰해보려고 한다. 궁금한 점은 간단한 인터뷰도 하려고 한다.

 

 

2.  선언형 프로그래밍(React)의 컴포넌트 구조를 파악할 것

아토믹 디자인을 공부하긴 했지만 컴포넌트를 분리하는 규칙이 쉽지는 않다. 단일 책임 원칙, 재사용성, 컴포넌트 생명주기 등을 관리해야 하고 렌더링 트리거에 따라 리렌더되는 컴포넌트 관리도 해줘야 한다.
어떨 땐 애매하기도 하다. 분리할 땐 재사용성과 관심사 분리를 위해서 하위 요소로 로직이 이동해야 하는 경우도 있고, 컴포넌트의 제어는 상위 요소에서 하도록 권장하기도 한다.
계획 없이 분리할 경우 Props Drilling이 심화되고 ref 공유로 인한 의존성 역전, 컨텍스트 구현 등과 같이 구현 복잡도와 구조적 문제가 증가할 수 있어서 주의하려고 한다.

 

- 프로젝트 진행하며 할 것

Props Drilling에 주의하면서 단일 책임 원칙, 의존성 역전 원칙등을 고려하면서 진행하려고 한다. 로직을 하위 컴포넌트에서 구현하거나 Props를 하위로 내려줄 때 '왜?'에 집중해보려고 한다.

 

3. 라이브러리 사용 방법 학습

이전까지는 vanilla로 구현하는 데에 집중했지만 이번에는 라이브러리를 사용해보려고 한다. 많이 사용되는 것 위주로. swiper, YouTube Iframe Player API, supabase와 같은 라이브러리와 MediaRecorder API, Web Audio API와 같은 WebAPI도 제대로 학습해보고 사용해보려고 한다.

 

- 프로젝트 진행하며 할 것

사용할 수 있는 자리에 적극적으로 사용하되, 공식 문서, MDN 문서 파악해보고 사용하기.

 

 

다음 진행 계획

MVP 단계별로 마일스톤을 정해서 기능 위주로 채운 뒤 애니메이션, CSS 등의 뒷작업을 하려고 한다.

핵심 기능 중의 하나인 클립 저장, 녹음을 구현하게 됐다. 되게 좋은 글을 찾아서 꾸준히 공부하면서 내실을 채우려고 한다.

카레유님 블로그 소리의 기본 변환부터, CS지식, 실습까지 다 되어 있는 좋은 문서다.