행복을 담는 블로그
[TIL] 240228(수) 아웃소싱 프로젝트를 마무리하며... 본문
내일 발표를 앞두고 있는 아웃소싱 팀 프로젝트가 거의 마무리가 되어 가고 있다...
내일 발표 준비를 위해 피그마에 각자 구현한 기능들을 정리해 보았는데 블로그에도 기록해보고자 한다.
아 일단 이번 프로젝트가 어떤 프로젝트인지 먼저 간단히 소개를 하자면,
한마디로 " 유튜버 광고 분석 서비스 " 이다.
즉, 광고주가 제품을 유튜버에게 제공하기 위해서 어떤 유튜버를 고를 것인가에 대해서 고민을 할텐데, 이 서비스를 통해 유튜버의 구독자수, 최근 영상의 조회수, 댓글수, 좋아요수 등을 한 눈에 보기 쉽게 분석할 수 있는 서비스이다!
<메인 페이지>
<리스트 페이지>
<디테일 페이지>
내가 이번 프로젝트에 맡은 부분은 채널 분석을 할 수 있는 디테일 페이지를 만드는 부분이었다.
원래는 그래프 부분에서 방사형 그래프로 분석을 하면 보다 효과적으로 분석 정보를 나타내어 완벽한 "육각형 유튜버 찾기" 라는 느낌으로 해보고 싶었는데, 생각보다 원하는 api를 쉽게 얻을 수가 없었다. 처음 프로젝트 기획을 하고 회의하면서 정보를 찾아 볼 당시에는 Analytics API 또는 Reporting API를 불러오면 분석 보고서와 수익 정보 등을 알 수 있다고 하였는데, 해당 api를 불러오려면 권한이 필요하다고 하여 우리는 그냥 기본 api인 Youtube Data API v3를 이용하여 서비스를 만들었다.
그러다 보니... 불러 올 수 있는 값들이 조회수, 구독자수, 좋아요수, 댓글수 등인데 값의 편차가 너무 커서 도저히 방사형 그래프로는 그릴 수가 없었다. 막대그래프도 시도해보았는데, 구독자수나 조회수가 너무 값이 커서 댓글수나 좋아요수는 그냥 묻혀 버리는...
그래서 선택한 그래프가 바로 pie chart 그래프이다.
나는 Recharts라는 라이브러리를 사용하여 그래프를 그렸는데, 이 곳에서 엄청나게 다양한 그래프를 만들 수 있었다.
원하는 그래프를 선택하고 기본적으로 적혀있는 코드를 불러와서 내 입맛에 맞게 리팩토링을 해서 쓰면 되는거였다! 처음 보는 코드들이라 당황스러웠지만.. 공식 문서 보면서 하나씩 고치고 하다보니 나름 괜찮을지도?!
그렇게 완성된 나의 디테일페이지이다.
< 기능 >
1. 디테일 페이지 기능구현
- 리스트에서 해당 채널을 클릭하면, 채널 상세 정보를 볼 수 있는 디테일 페이지로 이동합니다.
- 상단에서는 채널의 기본 정보를 볼 수 있습니다.
- 채널 방문 버튼을 클릭하면, 해당 채널 링크로 이동합니다.
2. 채널 정보 분석하기
2- (1) 채널 분석 : Pie chart
- Recharts 라이브러리를 사용하여 채널 정보를 가시적으로 한 눈에 확인 할 수 있습니다.
- 구독자 수 대비 최근 평균 조회수와, 채널 평균 조회수를 비교합니다.
- 최근 영상의 평균 좋아요수와 평균 댓글수의 비율을 확인 할 수 있습니다.
(최근 영상 평균은 최근 50개 영상의 평균을 나타냅니다. )
2-(2) 채널 세부 정보
- 채널의 영상수, 조회수, 댓글수, 좋아요수 등 구체적인 수치를 확인 할 수 있습니다.
3. 최근 영상 불러오기
- 최근에 업로드한 영상 6개를 볼 수 있습니다.
- 영상 업로드 날짜, 조회수, 좋아요수, 댓글수를 확인 할 수 있습니다.
- 영상 썸네일을 누르면 해당 영상으로 링크가 이동합니다.
이렇게 필요한 사항들도 모두 구현해보았다.
근데 같은 조에 디자이너이셨던 분이 계시는데.. 디테일 페이지 스타일을 다시 만져 주셨는데 진짜 디자인 미쳤다...
html, css 왜 갈수록 어려운거 같냐.. 내일은 수치스러운 css 코드를 뜯어보고 어떻게 고치셨는지 공부해봐야겠다.
진짜 html, css 그거 어떻게 하는건데... 기능적인 부분을 구현하느라 css는 항상 맨 후 순위로 두고 있었는데, 정말 다시 semantic tag는 어떻게 구성되는지, flex는 어떻게 사용하는건지 다시 코드 뜯어보면서 내껄로 만들어야겠다~~
이제 내일 발표만 하면 이번 프로젝트도 끝이다!
'TIL' 카테고리의 다른 글
[TIL] 2024.03.19(화) Supabase Error 429 : Too Many Request (0) | 2024.03.20 |
---|---|
[TIL] 240304(월) 더 쉬운 전역 상태 관리 : Zustand (1) | 2024.03.05 |
[TIL] 240226(월) Youtube Data Api 불러오기 (0) | 2024.02.27 |
[TIL] 240222(목) 비동기 통신 : axios의 CRUD (1) | 2024.02.23 |
[TIL] 240220(화) Optional Chaining이란? (0) | 2024.02.20 |