[KB IT's Your Life 7기] 7주차 후기, 스켈레톤 프로젝트(가계부 앱) 후기

 

 

안녕하세요!

3-4월 동안 프론트엔드 교육을 수강하고,

드디어 첫 프로젝트를 들어가게 됐습니다.

 

 

 

 

커리큘럼에서 스켈레톤 PJT만 봤을 때는 이게 뭐지? 싶었는데

지금까지 배운 걸 바탕으로 연습용 프로젝트를 하는 거더라구요

 

스켈레톤 프로젝트의 주제는 매 기수마다 바뀌는데

7기 저희 주제는 "가계부 앱 개발"이었습니다.

 

기본적인 CRUD 기능과 json.server를 이용하는 것이 주된 요구사항이었기 때문에,

다른 기수의 주제도 크게 바뀌지는 않을 것 같습니다.

 

---

 

 

 

 

1. 팀빌딩

 

우선 팀빌딩 과정입니다.

반에서 5개의 팀을 선출합니다.

 

저희 반은 우선 팀장부터 선정하였고,

팀원들이 팀장을 골라서 신청하는 방식이었습니다! (팀원은 4명~ 5명으로 구성)

근데 반 by 반이라서 팀빌딩 과정은 다 다를 것 같네요

 

저는 프론트엔드 개발 경험이 2년 정도 있기도 하고,

제가 팀장을 맡는 것이 더 쉽게 진행할 수 있을 것이라 생각해서

팀원들을 지도할 수 있는 팀장을 맡게 되었습니다.

 

 

 

 

2. 협업 전략

 

팀빌딩을 마치고 가장 먼저 노션 페이지를 팠습니다!

 

 

 

저희 팀은 두 분이 개발을 처음 하시는 거였고,

깃허브도 익숙하지 않은 분이 세 분이 계셨기 때문에

무엇보다 협업 전략을 숙지하는게 우선적이라 판단했습니다.

그래서 개발 시작 전 노션에 여러 협업 전략들을 문서화했습니다.

 

 

 

 

commit convention, issue, pr template 등등..

사전에 필요한 것들은 전부 정리해놓았습니다!

하면서 느낀건데, 시간이 정말 많이 들더라구요.. ㅠㅠ

이래서 미리 정리해놓는게 필요한가 봅니다.

 

그리고, 저는 개발을 처음 시작할 때

"이제 뭘 해야하지?" 라던가 "뭐부터 해야하지?" 라는 생각을 엄청 많이 했기 때문에,

그 부분에서 도움을 드릴 수 있는 초기 가이드라인도 필요하다고 생각했습니다.

그래서 정리하게 되었고 이런 필요한 문서들은 든든한 팀원인 승윤님이 작성해주셨습니다!!!

 

없었으면 안됐을 .... 소중한 팀원이십니다 흑흑

아무튼 이렇게 사전 준비를 다 마치고,

그 뒤부터 기획 및 디자인 단계로 넘어갔습니다.

 

 

 

 

3. 기획 & UI 디자인

 

 

 

필요한 정보들을 모아 놓아야 페이지 디자인에 더 편리하기 때문에

요구 기능 명세서로 우선 개발해야 할 기능들을 정리했습니다!

 

기획 초기 단계에서 저희의 목표는

"프로젝트 요구사항에 최대한 충족하기" 였습니다.

 

왜냐하면!!!

사실 이 프로젝트는 "연습용"이기 때문에,

결과물은 평가에 들어가지 않기 때문이었습니다... ㅎㅎ

 

가능한 범위 안에서 완성만 하면 되었어서 처음엔 독창적인 아이디어가 나오진 않았습니다.

그런데 개발하다보니... 다른 팀들이 어마무시한 아이디어를 내더라구요.

주식과 접합해서 하는 분들도 있고, 참신한 아이디어가 많았습니다.

 

그래서 개발 시간이 남기도 하고, 저희 팀도 질 수 없다... 라는 기세로

기획을 계속 추가하게 됐습니다.... ㅎㅎㅎㅎ

그래서 원래는 3일 내로 끝내는 기획이었는데,

추가 요구사항을 만들다 보니 일주일 내내 개발한 것 같아요.

 

1. AI를 활용한 스마트 거래 등록 기능
2. 앱 체류 시간 증대를 위한 게임 기능

 

 

그래서 저희 핵심 기능은 두 가지가 됐습니다!

 

첫 번째는 AI를 활용한 스마트 거래 등록 기능이었고,

두 번째는 앱 체류 시간 증대를 위한 게임 기능입니다.

 

 

 

 

기획 단계를 마무리하고 나서 바로 UI 작업에 들어갔습니다.

db.json 데이터 형식을 정의하는 것이 우선이었기 때문에,

UI 확정을 빠르게 하려고 했던 것 같습니다.

 

아무래도 디자이너가 없었기 때문에 여기서 제일 힘들었던 것 같아요 ㅜㅜ

항상 디자이너가 있는 프로젝트만 개발해왔고,

디자인 시스템이나 그 외 개발에 필요한 형식들도 디자이너들이 알잘딱으로 해줬기 때문에 ...

디자이너의 부재가 진짜 큽니다....

 

아무튼 제가 직접 Figma를 만지는건 꽤나 힘들었습니다.

지금 당장 내가 노력한다고 해도 결과물이 나아질 것 같지가 않은게 제일 고통스러웠어요!!!!!!!!

 

그래서 대부분의 UI 개발은 FigmaMake가 해준 것 같습니다.

이게 생각보다 괜찮은 결과물을 주더라구요!!!!!

좀 작업 하다가 그 뒤로는 FigmaMake를 전적으로 신뢰하게된... ^^ ㅎㅎㅎㅎ

 

근데 나중에 안 건데, FigmaMake 사용한 팀들의 UI는 대부분 비슷비슷했습니다

ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ

 

 

 

 

아무래도 화면 UI 한 장 만으로는 컴포넌트 인터렉트 등이 명확하지 않을 것 같아서,

개발에 처음인 팀원들을 위해 안내 사항도 작성해뒀습니다.

 

이후 컴포넌트 개수, 개발 난이도에 따라

팀원들의 숙련도 기반으로 담당할 개발 페이지를 분배했습니다.

 

 

 

 

저는 위 페이지를 맡게 됐습니다.

 

 

 

 

4. 개발

 

개발 단계입니다.

 

 

 

유지보수 계획이 없는 단기 프로젝트였지만,

설계 관점에서 컴포넌트의 개수를 최소화하고 재사용성을 높이는 데 집중했습니다.

비슷한 기능과 UI를 가진 요소들을 피그마 우측으로 분리하여 구조화하는 과정을 거쳤습니다.

 

특히 고민했던 지점은 '공용 버튼 컴포넌트'의 제작 여부였습니다.

브랜드 컬러가 일관적이었기에 공용 컴포넌트를 만드는 것이 기술적으로는 효율적이었으나,

결과적으로는 도입하지 않기로 결정했습니다.

 

협업하는 팀원들의 숙련도를 고려했을 때,

이미 짜여진 추상화된 컴포넌트를 이해하고 활용하는 것이

오히려 개발 속도를 늦출 수 있다고 판단했기 때문입니다.

 

이번 경험을 통해 팀장의 역할은

팀원 개개인의 실력과 배경지식에 맞춰

최적의 개발 환경을 제안하는 것임을 깨달았습니다...

역시 힘든 자리군요

 

 

 

 

개발 후에는 issue, pr 템플릿 형식에 알맞게 올리고

브런치와 연동도 했습니다!!!

 

 

 

 

아무래도 개발할 때 제일 힘들었던 건

저희 핵심 기능 중 하나였던 게이미피케이션 요소였습니다..

 

실제 결제 내역을 불러와서,

그 내역을 바탕으로 사용자가 직접 소비 내역을 확인하는 게임인데

데이터도 불러오고, 카테고리 등 다양한 아이템 세부 설정이 필요해서 어려웠던 것 같습니다.

 

Vue.js를 사용하면서 대부분의 코드들은 AI의 힘을 쓰기 보다는

스스로 이해하는 코드를 많이 작성했었는데,

게임쪽 개발은 사용하는 것들이 많이 다르다 보니 도움을 많이 받은 것 같습니다.

 

그리고 확실히 상수가 많이 필요하더라구요.

코드도 엄청 길어지고, 관심사 분리도 어려워져서 ....

브라우저 게임 개발은 더욱 더 설계를 꼼꼼하게 하는 게 중요한 것 같습니다.

 

 

576506219-5bcc2143-4acc-4b1d-91d9-3ef0dccc6382.mp4

8.50MB

 

 

AI 기능 시연 영상을 첨부하고 싶었는데

티스토리에 영상 첨부가 안 된다는 걸 처음 알았습니다 ....

 

 

 

 

아무튼..

팀원 승윤님께서 개발해주셨고,

gpt-4o-mini 모델을 사용해서 개발했습니다.

 

간단한 자연어 처리를 통해서

개발해두었던 api로 거래를 등록/삭제/수정할 수 있고

이를 통해서 복잡한 가계부 내역 등록의 depth를 타자 몇번과 클릭 한번으로 줄일 수 있었습니다!!

 

 

 

 

5. 발표

 

 

 

최종 발표는 20~30분의 분량 제한이 있었고

저희 팀 발표는 제가 맡게 됐습니다.

사실 평가에 들어가진 않아서 스트레스 받으면서까지 할 필요는 없었는데,

어느 순간 보니까 저 스스로 엄청 열심히 하고 있더라구요.. ㅋㅋㅋㅋㅎㅎ

 

아무튼 ...

발표까지 잘 마치고

성과가 잘 나온 것 같아서 뿌듯했습니다!!!!!

 

 

 

6. 후기

 

 

GitHub - kb-7th-household-account-book/vue-account-book: [KB] IT's Your Life 7기 - 1차 프로젝트, 가계부

 

저희 깃허브 리포지터리 링크 첨부하겠습니다 :D

일주일 동안 하면서 힘들기도 했지만, 그래도 결과물이 잘 나와서 뿌듯한 것 같습니다.

리드미도 잘 정리해뒀으니 관심 있으신 분들은 한번 구경해주세요 ㅎㅎ