CatBow Project 회고록

 

CatBow Project 란?

 

 

 

👇 CatBow-Library 공식문서

Catbow scrollview | Catbow Tutorial

 

👇 CatBow Git

catbow

 

 

---

🌈🤗 Check these sites and try them out

 

Video Converter Site
Catbow Doc
CatBow ScrollView Tutorial
NPM Library Site
YARN Library Site

---

 

 

 

팀원 

 

🌈😺Catbow

 

🌈 라이브러리 팀

• FRONTEND : 김준호(PM), 최슬기

 

🎥 동영상-이미지 변환 사이트 팀

• FRONTEND : 조은지
• BACKEND : 이상우

 

 

 

개발 기간

 

2022-11-21 ~ 2022-12-12 (22일)

 

 

 

기술 스택

 

FE : javaScript, Styled-components, contextAPI, AWS-S3, CI/CD

BE : Python, Django, Nginx, Gunicorn, MySQL, Certbot(SSL), Freenom(domain), AWS-EC2, AWS-RDS, AWS-VPC

 

 

 

 

프로젝트 설명

 

 

$ npm i react-catbow-scrollview

 

 

위코드 36기 수료생으로 이루어진 팀을 구성해 구현한 CatBow Library는 프레임 단위로 추출한 이미지 파일들을 이용해 화면 스크롤시 동영상 재생 효과를 주는 인터랙티브 UI 라이브러리입니다. observer API 를 사용해 해당 기능을 구현하였고 이에 필요한 동영상을 프레임 단위로 잘라주는 사이트도 함께 개발했습니다.

 

CatBow Library는 배포 후 홍보 없이 npm, yarn package 누적 다운로드 수 2000건을 달성했고 계속 유지 보수를 이어갈 예정입니다. 

 

 

 

 

 

구현 맡은 페이지

 

 

Video Converter Site

 

 

🌈😺Catbow 에서 동영상 업로드 후 zip파일로 변환해 자동 다운로드하는 convert 사이트 개발했습니다.

 

 

 

 

 

 

협업 툴

 

Notion

 

캣보우 팀은 월요일 15시마다 정기 회의를 가져 간단히 진행 상황을 공유했습니다. 슬랙으로 매일 작업 상황을 공유했지만 라이브러리팀 (FE:2), 영상팀(FE:1, BE:1) 로 나누어 작업했기에 팀간의 블로커와 진행 속도, 진행 방향 등을 논의하기 위해선 주 정기 회의가 필요했습니다. 회의는 30분 이내로 이루어졌으며 한 주간 작업 상황을 정리해 공유했고, 프로젝트 방향과 속도를 함께 논의했습니다.

 

 

 

 

Slack

 

 

 

캣보우 팀은 오프라인으로 함께 작업했지만 슬랙을 매일 적극적으로 활용해 작업 상황을 공유했습니다. 라이브러리, todo, 랜덤, 일반 카테고리를 이용해 작업물 뿐만 아니라 서로 작업의 도움이 될만한 정보들을 공유해 원활한 커뮤니케이션을 할 수 있었습니다.

 

 

 

 

 

 

 

느낀 점

 

위코드 36기 수료 후 실 사용에 쓰이는 서비스를 개발해보고 싶었는데 이렇게 구현해내어 뿌듯하면서도 뜻깊다. 캣보우 팀의 영상팀에서 라이브러리의 부속 페이지인, 사진 편집 사이트 구현(프론트 엔드)을 맡았는데 실제로 에러가 없는 페이지를 만들어야했고 유저의 사용성 또한 고려해야하기 때문에 여러 가능성을 열어두고 최대한 세심하게 코드를 작성하려 노력했다.

 

기능 구현을 마친 후, 준호 pm님께 코드 리뷰를 부탁드렸고 팀 내의 프론트 엔드 개발자 3명이 모여 코드를 리뷰했는데 이 또한 크게 기억이 남는다. 잘한 점으로는 contextAPI를 잘 분리한 점, 폴더 구조를 직관적으로 짠 점이 있었고 부족한 점으론 모달 재사용성과 관련된 변수명이 추상적이라 알아보기 힘들었다는 점이었다. css 관련해서도 반응형 사이트가 아니라 아쉽다는 평이 있었다.

 

개발, 배포 후에는 서버 비용에 조금이나마 보탬이 되기 위해 카카오 애드센스 광고를 넣었는데 (이때 코드를 다시 리뷰하며 팀원과 함께 에러를 수정했다) 창을 줄이면 헤더에 넣었던 광고가 로고에 가린다는 이유로 한번 반려되었다. 이는 간단히 z-index 속성을 넣어 해결했고 다음날 바로 승인이 나 무사히 광고를 달 수 있었다.  

 

개발을 마친 지금, 아직 코드에 부족한 점이 많아 다음주부터는 계속 리팩토링을 진행할 예정(모달, 동영상 유효성 로직 관련)이다. 매일 다운로드 횟수와 convert 페이지의 방문자 수 그리고 수익을 체크하는데 큰 숫자가 찍혀있지 않더라도 처음으로 실 사용자에게 배포한 프로젝트인만큼 매우 뜻깊다 느낀다. 요즘 내가 쓴 코드가 회사의 실무 코드가 되어 서비스되는 상상을 많이 하는데 생각만으로도 설레고 즐겁다.

 

내 코드에 책임감을 느낄 수 있었던 프로젝트였고 여러모로 기억에 오랜 시간 남을 거 같다.

 

 

 

 

 

 

👇 관련 포스팅

 

 

https://0119eunji.tistory.com/74

Catbow 이미지 변환 사이트 구현