학부생 졸업작품으로 진행했던 프로젝트 기브미콘에 대해서 회고 하려고 한다.
실질적인 개발기간은 4주정도 되었다.
프로젝트 간략 소개
1인 크리에이터들이 증가함에 따라 영상소재가 고갈되어 콘텐츠를 정하지 못하는 크리에이터들이 많이 있음을 알게되었고, 이러한 문제를 해결해보고자 기브미콘이라는 프로젝트를 기획하게 되었다.
기브미콘은 이러한 크리에이터들에게 최신 트렌드에 맞춰 컨텐츠들을 순위별로 제공하는 "컨텐츠 추천 및 순위 서비스 기능"과 시청자들이 컨텐츠 제작 방향에 대한 아이디어를 공유할 수 있는 "컨텐츠 프로듀싱 서비스 기능"을 제공한다.
결과물 : 기브미콘 Github
기술 스택
프론트엔드 : React, Redux, Styled-Components
백엔드 : Django, DRF, YoutubeAPI
좋았던 점
- 백엔드 개발 경험
이전 프로젝트들과는 다르게 백엔드의 일정 부분을 담당하여 개발을 하였다. 콘텐츠 프로듀싱 API와 JWT를 활용한 인증 API를 개발함으로써, RESTful API와 인증 관련 지식을 배울 수 있었다. 클라이언트와 서버와의 통신의 전 과정을 직접 경험할 수 있어 좋았다.
- 빠른 피드백
잘못된 코드를 빠르게 피드백 받을 수 있었던 점이 가장 좋았다. 혼자 개발할 때에는 어디가 잘못된 부분인지를 모를 때가 많았고, 발견하더라도 삽질하는 시간이 많았다. 또한, 내가 어느 부분이 약한지를 알 수 있었다. 피드백 덕분에 단시간안에 빠르게 성장할 수 있었다.
- 프로젝트의 전과정을 경험
기획부터 배포까지 프로젝트의 전 과정을 경험할 수 있어서 좋았다. 이러한 경험을 통해 향후 실무에서도 의사소통에 있어서 이해하고 원활하게 소통할 수 있을 것 같다.
아쉬웠던 점
-
UI / UX
디자인을 전공으로 하는 학우 없이 개발을 진행하다보니 디자인 부분이 많이 부족하였다. 특히 레이아웃을 배치하는 과정에서 일관성없이 콘텐츠가 배치되는 경우가 허다했다. 프론트엔드를 담당했던 나로써는 이러한 점을 조금이나마 극복하기 위해 AdobeXD 프로그램에서 제공하는 12 그리드 시스템을 활용하였다.12 그리드 시스템을 활용함으로써 일관성있는 레이아웃과 가독성 부분을 향상시킬 수 있었고, 빠르게 프로젝트의 프로토타입의 디자인을 확인할 수 있어서 좋았다. 향후에 개발을 할 때에 디자인을 담당하는 분이 없어 내가 맡아야한다면 AdobeXD와 12 그리드 시스템을 적극적으로 활용해야겠다. AdobeXD는 그리드 시스템말고도 다양한 기능을 제공하는데 적절하게 사용할 수 있도록 공부할 계획이다.
-
Redux
컴포넌트의 깊이가 깊어질수록 props를 전달하기 위한 불필요한 코드가 작성되었고, props가 어디서 왔는지 헷갈릴 때가 많았다. 그래서 동료들에게 전역에서 상태를 관리를 위해 Redux를 적용하자고 의견을 내었고 협의 끝에 적용하게 되었다.Redux를 작성하면서 가장 아쉬웠던 부분은 props driling이 일어나는 상태를 전부 스토어(Store)에서 관리했다는 것이 아쉽다. 이러한 형식은 컴포넌트가 Redux를 의존할 수 밖에 없는 상황을 만들었다. 앞으로 Redux를 사용하게 된다면 컴포넌트와 스토어에서 관리해야하는 상태를 구분지어 관리해야겠다. Redux에 관련된 지식은 리액트를 다루는 기술 책을 읽으면서 공부할 계획이다.
-
TypeScript
타입스크립트는 관심을 가지고 있었던 언어였음에도 불구하고 이번 프로젝트에는 적용하지 않았던 점이 아쉬웠다. 자바스크립트의 특성인 동적 타입 변환으로 인해 결과값이 false가 나와야하는 상황인데도 true가 나올때가 있었고, 그로인해 반환값이 어떠한 형태인지 빈번하게 디버깅을 했었다. 향후에는 타입스크립트를 활용한 토이프로젝트를 진행함으로써 공부할 계획이다. -
프로젝트 진행상황 파악
Task에 우선순위를 매기고, 번아웃 차트를 통해 실시간으로 확인함으로써 프로젝트의 진행상황을 알고자 Azure DevOps를 도입하였다. 사전에 작성하고 기능을 개발하자고 했었지만 학업과 마감 시간에 쫓겨 중반부터는 제대로 관리되지 않았다. 작성하는데 그리 오래걸리지 않으니 꼭 작성하고 기능 개발을 해야겠다.
참조
