[내 마음 속 바다] 개발 동아리 DND 10기 프로젝트 회고

내 마음 속 바다

 

시작하며...

개발 동아리 DND 10기에서 내 마음 속 바다 라는 프로젝트를 진행하였다.

 

DND 는 지난 기수인 9기 때 붙었고, 그 당시 완전 프론트엔드 개발 초짜였던 내가 팀 프로젝트를 통해 개발 구현 능력과 협업 능력을 기를 수 있어 도움이 많이 되었던 활동이었다.

 

그래서 다시 한 번 DND 활동을 하고 싶어 10기 내부지원을 통해 10기에 합격하게 되어 다시 한번 활동하게 되었다.

 

(DND는 여름, 겨울 방학에 8주동안 활동하며, 최대 2번까지 활동가능하고 2번 활동하면 수료증이 발급된다.)

 

수료증

 

[DND 공식 홈페이지]

DND

 

"내 마음 속 바다" 프로젝트를 하면서 정말로 프론트엔드 개발에 대해 많이 배울 수 있는 활동이었는데, 8주간 DND 활동이 끝나서도 팀원들과 실제로 프로젝트를 런칭하기 위해 계속 개발을 이어왔다.  (현재 6월까지만 서버를 운영하고 이제 닫기로 하였다.)

 

DND 팀 활동

DND 는 8주 동안은 주어진 가이드라인 안에서 팀 프로젝트를 진행하는 거였다. 우리 팀은 디자인 2, 프론트 2, 백 2 이렇게 총 6명으로 구성되어 있었다.

 

1주 차 (1/1 ~ 1/7)

1주 차에는 프로젝트 주제 분야와 아이디어를 선정하는 것이었다. 1주 차 회의를 통해 바로 프로젝트를 선정하게 되었고. 어떤 기능이 필요한지 정리하면서 점점 프로젝트의 구체적인 모양을 잡아갔다.

 

1주차 - 프로젝트 선정

 

2주 차 (1/8 ~ 1/14)

2주 차 때엔 각자 리서치를 하며, 구글폼 설문조사를 하여 인사이트를 도출하였다.

설문조사

위에서 도출한 결과를 토대로 우리 서비스의 목적과 이를 사용할 유저의 페르소나를 선정해 보고 IA 프레임도 구성하였다.

 

목적, IA

 

3, 4 주차 (1/15 ~ 1/28)

3, 4주차 때엔 본격적으로 프로젝트를 진행하기 앞서 이슈 관리 도구, 아키텍처, 컨벤션을 선정하고 프로젝트 기초 초기 세팅을 들어갔다.

 

아키텍처 및 컨벤션

• 패키지 매니저: npm (최신 LTS 버전)
• 개발 언어: TypeScript
• 번들러: Vite
• 라이브러리: React 18
• 상태 관리 : Zustand
• 스타일 라이브러리: Emotion
• 데이터 패칭: axios, TanStack Query
• Form 관리: React Hook Form, zod
• 배포: Vercel, Chromatic
• UI 문서화: Storybook

 

아키텍쳐

컨벤션

 

라이브러리

같이 프론트엔드 파트 담당하시는 분이 너무 잘하시고 열정도 넘치셔서 미리 프로젝트의 기술 스택과 컨벤션 관련해서 정리해 오셨다. 그래서 나는 정리해 오신 거에서 의견을 남기고 최대한 열심히 참여하려고 이것저것 찾아보고 사용할 라이브러리에 대한 공부를 열심히 했다.

 

특히 React Query(Tanstack Query) 는 이전 프로젝트에서 사용해 본 경험이 있지만 단순히 데이터를 요청하는데만 사용하고 서버상태의 기능을 전혀 사용하지 않았다. 하지만 공식문서를 한글로 번역한 문서를 보면서 무슨 기능이 있는지 확인해 보고 이를 직접 프로젝트에도 적용시켜 봤다.

 

또한 폼에 입력할 내용이 많을 때 관리하기 어렵고, 지난 프로젝트에서는 상태 관리를 Recoil 을 사용해서 구현했었다. 하지만 이번에 React-Hook-Form 라이브러리를 사용하여 폼의 전역 상태 관리를 할 수 있어 관리하기 편했고, Zod 라이브러리와 함께 쓰니 타입 검사 관점에서 유용하고 간편했다.

 

그리고 팀 프로젝트를 하다 보면 공통 컴포넌트를 만들게 되는데 이러한 공통 컴포넌트를 관리하고 시각적으로 확인하기 쉽게 Storybook 을 사용했다. 그럼 컴포넌트의 관리도 가능하며 다른 사람이 만든 컴포넌트도 쉽게 사용하게 되며 팀 프로젝트에서 정말 유용한 라이브러리라고 생각을 했다.

 

5 , 6, 7,  8 주차 (1/29 ~ 2/24)

남은 5~8주 차에는 본격적으로 프로젝트 개발에 들어갔다.

 

최종 발표 (2/24)

드디어 최종 발표 날이 다가왔다... 장소는 강남역 안에 있는 프로그래머스 강의장에서 진행하였다.

 

내가 최종 발표를 맡게 되어서 좀 떨렸지만 지금까지 열심히 준비하고 우리 프로젝트에 대한 자부심(...ㅋㅋ)이 있어 두렵진 않았다.

프로젝트는 1차 MVP 기능을 모두 만들어 정상적으로 작동했으며 발표를 하면서 동시에 프로젝트 배포 주소를 공유하여 직접 사용할 수 있도록 했는데 발표하면서도 주변에서 칭찬을 하고 있는 게 들려서 뿌듯했다.

 

최종 발표, 무스탕 벗고 발표할걸...

 

발표를 무사히 마치고 같이 8주 동안 프로젝트를 진행한 팀원들과 같이 식사를 하였고 프로젝트를 조금 더 디벨롭해서 실제로 출시해 보자는 의견이 나오게 되었다. 그래서 DND 는 끝이 났지만 출시까지 개발을 계속 달리게 되었다.

 

발표 자료 링크

https://www.dnd.ac/project/69

DND

 

개발 협업 방식

이번 DND 활동을 통해 제대로 개발 협업을 경험해 보았다. 그전까진 그냥 개인 이름으로 브랜치를 만들고 각자 작업할 부분만 만들어서 구현했었는데 이번에는 본인이 작업할 내용을 이슈를 만들고 이슈 번호를 토대로 브랜치를 만든 후, 작업 완료 후 PR 을 올려 리뷰를 나누고 main 에 merge 하는 방식으로 하였다.

 

이슈 issue

나는 지금까지 총 55개의 이슈를 작성했었고, 이슈 템플릿에 맞춰 작업할 내용을 정리했었다.

 

이슈

 

풀 리퀘스트 pr

확인해 보니 풀 리퀘스트는 60개를 작성했었고

 

풀 리퀘스트

 

PR 에는 내가 무슨 작업을 했는지 상세히 적어두고, 상대방이 코드 리뷰 하기 편하게 구현 방법과 결과를 자세하게 작성했다.

(지금보니깐 진짜 열심히 했었다...)

 

내가 쓴 Pr

 

리뷰 review

같이 프로젝트를 진행한 프론트엔드 개발자분이 너무 정성스럽게 리뷰를 남겨주셔서 정말 많이 도움이 되었고 단기간에 크게 실력이 향상되었다. 반면에 나도 정말 좋은 리뷰를 남겨주고 싶었는데 그분이 너무 잘하셔서 고칠 점을 찾기가 어려워서 리뷰를 많이 남겨주지 못해 너무 죄송스러웠다 🥲 

 

대신 그 이후부터 나도 리뷰를 통해 상대방이 발전될 수 있다는 걸 몸소 겪어본 입장이라 최대한 정성스럽게 리뷰를 남겨주게 되었다.

 

내가 구현한 기능

1. 공통 컴포넌트 구현

가장 먼저 공통 컴포넌트를 구현하였다. 사실 이전 프로젝트에서는 공통 컴포넌트를 만들지 않고 각자 맡은 페이지부터 구현하게 되어 겹치는 컴포넌트가 많았고 코드의 양도 많아져 비효율적이었다.

 

하지만 이 프로젝트에서 처음으로 공통 컴포넌트를 만들게 되어 공통 컴포넌트의 중요성을 알게 되었다.

 

우선 나는 본격적인 페이지 작업에 앞서 Bottom Sheet, Icon Button, Accordion, Chip, Card, Polaroid 컴포넌트를 만들었다. 

(개발 도중 추가된 공통 컴포넌트도 있음)

 

2. 편지 쓰기 페이지 구현

편지 쓰기 페이지

 

먼저 UI 를 구현하였고 React Hook Form 을 사용하여 폼 기능을 구현한 후에 MSW 모킹 서버를 사용하여 기능을 구현한 후 API 연동을 하였다.

 

여기서 React Hook Form 의 FormProvider 를 사용하였다. 이전 프로젝트에서도 form 기능을 구현하였는데 이를 상태 관리 하기 위해 Recoil 을 사용하여 상태관리를 하였다. 하지만 이번에 같이 한 팀원분이 FormProvider 라는 걸 알려주셔서 이번에 도입하게 되었는데 전보다 편하게 하위 컴포넌트에서 form 관리를 할 수 있었다!

 

또한 Zod 를 사용하여 간편하게 유효성 검사도 할 수 있었다.

 

https://jjang-j.tistory.com/61

React-Hook-Form 의 FormProvider 로 간편하게 폼 관리하기 (+ useFormContext)

 

3. 흘러온 편지 페이지 구현

흘러온 편지 페이지

 

이것도 UI -> Form 기능 -> MSW -> API 순서로 구현하였다.

 

팀원분이 만들어 주신 Fannel 컴포넌트를 사용하여 답장하기 버튼을 클릭했을 때 답장하기로 이동할 수 있게 구현하였고, 편지 쓰기 페이지처럼 React Hook Form 의 FormProvider 와 Zod 를 사용하였다.

 

4. 내게 온 답장 페이지 구현

내게 온 답장 페이지 구현

 

이것도 위와 비슷하다.

 

사실 정말 열심히 구현했는데 늦게 회고를 작성하다 보니 다 까먹었다 🥲 앞으로 바로바로 회고를 작성해야겠다... 그리고 구현한 내용이 너무 많다 보니깐 정리하는 게 너무 힘들다...

 

5. 보관함 페이지 구현

보관함 페이지

 

사진에 보이는 화면은 원래 저 UI 가 아니었다. 해당 페이지를 만들면서 사용자 경험성 측면에서 불편한 UI 라고 생각이 들어, 최종 발표를 마친 후 직접 디자인하여 새로운 UI 를 제안하였고 디자이너분들이 내가 만든 디자인에서 다듬어서 수정해 주셨다. 

 

추가 기능 및 리팩토링

최종 발표 전까지 기본 MVP 기능은 다 구현하였고, 서비스 출시를 앞서 코드를 리팩토링하고 새로운 기능을 추가하였다.

 

1. 테스트 코드 작성

리팩토링과 새로운 기능을 추가하기 전에 테스트 코드를 작성하였다.

 

리팩토링과 새로운 기능을 추가해도 이전과 같은 동작을 하는지 간편하게 확인하기 위해 작성하여 반복적인 수동 테스트를 수행하지 않도록 하였다.

 

2. 리팩토링

폴더와 파일 구조를 리팩토링하고 겹치는 부분은 분리하였다.

 

3. 신고하기 기능 구현

신고하기 기능

React Hook Form + Zod 를 사용하여 구현하였다.

 

라디오 버튼 컴포넌트에 forwardRef 를 사용하여 React Hook Form 의 ref 를 받도록 하였다.

 

4. 금칙어 필터링 기능 구현

정규식을 사용하여 금칙어 목록에 있는 글자가 있으면 자도으로 * 로 변환되게 하였다.

 

5. 기타

그 외에도 보관함 페이지 UI, 답장받은 편지 삭제, 이미지 다운로드, 오픈그래프 적용 등 다양한 기능들을 구현하였다. 

 

서비스 출시

추가 기능과 리팩토링을 다 마친 후, 드디어 4월 23일 우리의 서비스를 첫 출시하게 되었다. 🎉 🎉 🎉

 

나는 일단 DND 슬랙, 코드잇 스프린트 디스코드, 학교 에타에 올렸고, 그 밖에 친구들한테도 직접 홍보를 했다.

 

슬랙, 디코, 에타

 

(당장 나도 엄마한테 안 보여줬는데 어머니한테도 홍보해 주고 다른 친구들한테도 홍보해 준 칭구야 고맙다..ㅋㅋㅋㅋㅋㅋㅋㅋ)

ㅠㅠㅠㅠ

유저들 간 편지를 주고받는 서비스라 답장을 하지 않으면 서비스가 활발하게 돌아가지 않게 되는데 결국 우리 서비스는 그 당일에만 활발하고 그 이후엔... 게다가 1인당 편지를 하루에 최대 5장까지밖에 보내지 못해 한계가 있었다. 

 

하지만 직접 유저에게 배포를 하면서 완성도 있는 서비스를 만들어보게 되어 정말 의미 있었던 경험이었다.

 

회고

내가 당시 겪었던 내용을 잘 정리하지 못해 아쉽지만 이 프로젝트가 정말 내 인생에 있어서 정말 의미 있는 일 중 하나였다. 이를 통해 프론트엔드 개발 능력을 정말 많이 향상했고 배웠으며, 또 팀원들과 협업을 통해 프로젝트를 실제로 런칭해 보는 경험을 쌓았다.

 

그리고 직접 기획부터 참여하여 개발까지 모두 마치면서 단순히 개발 능력뿐만 아니라 사용자 경험 측면에서 어떻게 하면 좋을지 또한 어떤 기능이 있으면 좋을 지 1부터 100까지 고민을 하였다.

 

기술적인 부분에서는 이전에는 React Query 를 단순하게 useQuery, useMutation 을 사용하였다면 이번에는 useSuspenseQuery, 에러 바운더리 등 공식 문서에 있는 내용들을 적용해 보았다. 또한 서버 상태 관리 기능을 사용하여 mutation 요청 후에는 쿼리 초기화를 하며, stale time 을 적절하게 사용하여 캐싱된 데이터들도 사용해 보았다.

 

그리고 React Hook Form 과 Zod 를 사용하면서 입력폼 관리와 유효성 검사를 체계적으로 하였고, 공통 컴포넌트를 만들고 최대한 컴포넌트를 분리하고 좋은 코드를 만들기 위해 노력하였다.

 

사용자 활성화 부분에서는 아쉽지만 팀원들과 함께 노력한 결과물이 세상에 공개되었을 때 정말 기뻤는데 앞으로도 이러한 경험을 발판 삼아 프론트엔드 개발자로서 더욱 성장하고 싶다.