프론트엔드 개발 블로그

[Ottichu] 데이터 분석 프로젝트를 마치고

by heeji_

(2021.10.27) 

엘리스 AI트랙 2기 데이터 분석 프로젝트를 마친 후, 느낀점들을 정리했다. 지워져서 다시 씀

🚀 첫 팀 프로젝트

  • 학부 때는 혼자 혹은 최대 3명까지 함께 과제, 프로젝트를 수행해왔다. 이번엔 총 5명으로 프론트엔드, 백엔드, 데이터분석 파트로 역할을 나눴는데 이렇게 많은 인원과 프로젝트를 한 건 처음이라 설레기도 했고 걱정이 되기도 했다.
  • 기존 알고리즘 스터디를 같이해왔던 두 분, 새로 알고리즘 스터디에 들어오신 분, 그리고 프로젝트를 시작하면서 모집한 한 분. 이렇게 팀원이 구성되었다. 알고리즘 스터디장을 맡고 있었던 내가 팀장을 이어서 맡게 되었다.
  • 주제는 OTT와 배달 두 개가 있었는데 평소에 OTT를 4개나 쓰고 있었어서.. 이들의 차이점이 있다는 것을 알고 있었고 흥미로운 주제라 생각해 선택했다.

✅ 프로젝트 소개

주제 및 개발 진행

  • 엘리스에서 코로나와 OTT서비스를 주제로 한 데이터분석을 이번 프로젝트의 목표로 던져줬다.
  • 팀원들끼리 관련해서 브레인스토밍으로 아이디어를 내고 그 중에서 OTT플랫폼 추천을 가지고 기획안을 작성하게 되었다.
  • 가지고 있는 데이터가 없는 상태에서 어떤 방식으로 OTT를 추천할지, 어떻게 추천 결과를 납득할 수 있게할지 조금 막막했다.
  • 처음부터 많은 기능들을 기획하지 않고 OTT 플랫폼 추천 기능에 초점을 두고 개발을 진행했다.

와이어프레임

  • 링크
  • 이 사이트의 디자인을 참고해 와이어프레임을 작성했다.
  • fullPage 라이브러리가 우리 서비스에 잘 어울릴 것이라 판단해 이를 고려해 와이어프레임을 작성했다.
  • 이쁘고 눈에 잘 띄는 색을 고르는게 어려웠는데 figma 커뮤니티에 사람들이 공개해둔 디자인들을 보며 색을 선정할 수 있었다. 감사합니다..

협업을 위한 도구들

  • postman으로 API 스펙 문서를 작성했다. 이전엔 Swagger를 사용했는데 postman이 사용하기도 편하고 팀원이랑 같이 수정하기에 용이했다.
  • Git commit 규칙, Git branch 전략을 미리 세워 GitLab wiki에 정리해두었다.
  • API 스펙을 정하고 FE, BE, 데이터 분석에서 해야할 것들을 GitLab Issue를 활용해 정리해두었다.
  • 매일 오전 스크럼을 진행하며 진행상황을 같이 공유하고 발생한 문제에 대해 이야기했다.

👩‍💻 나

내가 한 것

  • 기획서와 와이어프레임을 정규님이랑 작성했다. 둘 다 기획이란 걸 처음해봐서 정말 힘들었다. 머리를 쥐어짜냈다 진짜로.
  • 기획서가 완성되고 필요한 API들을 postman으로 문서화했다. 이 때 url은 어떻게 할지 데이터는 어떤 형식으로 주고받을지 이야기를 많이 했다. 이렇게 미리 정해놓아도 서버에서 데이터의 형식이 바뀌는 경우가 있었는데 이에 대응하는 능력을 기를 수 있었다.
  • 원래 데이터 분석 시각화 결과를 이미지로 전달받아서 웹에 보여줄까 생각했는데 인터랙션과 애니메이션을 위해 프론트쪽에서 구현하기로 했다. 가장 유명한 Chart.js를 사용해 여러 차트들을 구현했다. 역시나 커스터마이징에 많은 어려움을 겪었다. React에서 차트를 사용해본 것도 처음이라 많이 헤맸다.
  • 어떻게 데이터 분석 결과를 보여주면 좋을지 지윤님과 대화를 많이 했다. 이렇게 보여주는 거 어떻냐.. 저렇게는 어떻냐.. 제일 아쉬웠던 점은 OTT 추천 결과의 근거를 더 많이 보여주지 못한 것이다. 만약 우리가 데이터를 수집했다면 결과페이지에 MBTI 결과 화면처럼 여러 문구들을 넣을 수 있었을텐데!!

내가 잘한 것

  • 팀장으로 스크럼을 꼬박꼬박 열고 정리해둔 것. 하루를 시작할 때 오늘 무엇을 할지 목표를 뚜렷하게 정할 수 있었고 다른 팀원의 진행상황을 들으면서 프로젝트 진행을 계획할 수 있었다.
  • 중간중간 팀원에게 진행이 어떻게 되가냐고 물은 거?.. 생각보다 내 말이 제대로 전달되지 않은 경우도 있었고 메인 기능에서 조금 벗어난 것을 찾는 경우도 있었다. 중간에 물어보고 그 길을 바로 잡았기 때문에 서비스를 완성할 수 있었다고 생각한다.
  • 시각화 라이브러리를 커스터마이징한 것?.. 우리는 OTT별 1위 연관검색어를 플랫폼 검색량과 함께 차트로 띄우고 싶었는데 Chart.js 자체에선 그게 안되어서 datalabel 플러그인을 찾아 적용했다. 미리 알고있었으면 검색에 시간을 더 줄일 수 있었을텐데!

내가 못한 것

  • 리덕스로 상태관리를 하지 못한 부분이 아쉬웠다. 내가 맡은 부분에서 복잡한 상태 관리가 없어서 다행이었지만 같이 협업할 때 못 따라가는 것 같아서 아쉬웠다.
  • 차트들을 선정할 때 깊게 생각하지 못한 것. 일단 차트를 그리는 데 집중해서 어떤 라이브러리가 좋고 어떤 식으로 표현하면 좋을지 많이 생각해보지 못했다.

🧶 우리

힘들었던 점

  • 데이터를 크롤링하고 합치고 정제하는 과정이 힘들었다. 영어로 된 데이터를 구글에 쿼리를 던져서 한글로 변환하는 과정도 거쳤었다. 다른 팀원들이 많이 수고해주셨다 이 부분에서는
  • 백 / 프론트가 따로 작업했고 합쳐지는 작업이 좀 늦어졌었어서 서로 힘들었던 것 같다. 막바지에 연동하고 이것저것 고치느라 조금 고생했다!

그럼에도 불구하고

하나의 서비스를 완성했다 💡 어려운 주제를 선정한 만큼 걱정도 많았고 우리가 이런 팀프로젝트를 처음해봤기 때문에 자잘자잘하게 어려운 걸 많이 겪었는데 다들 열심히 잘해줘서 그래도 끝까지 할 수 있었다. 다음 번엔 PM분이랑 함께 해보고 싶다는 생각이 들었다. 기획부분에서 부족한 부분이 정말 많았어서..

블로그의 정보

아자아자

heeji_

활동하기