TWIP CLIP

트위치 실시간 클립 생성/시청이 가능한 영상 기반 커뮤니티

개요

https://vod.twip.krvod.twip.kr

트윕 클립 웹사이트 (vod.twip.kr)

https://www.cast.help/update/twip-clip-230427www.cast.help

트윕 클립 리뉴얼 업데이트 공지

트윕 클립 메인 (2023.10.30 캡쳐)

트윕 클립 스트리머 페이지 (2023.10.30 캡쳐)

트윕 클립 시청 페이지 (2023.10.30 캡쳐)

트윕 클립 마이페이지 (2023.10.30 캡쳐)

트윕 클립 검색 Spotlight (2023.10.30 캡쳐)

트위치 채팅 봇 '싹둑' 웹사이트에서 트윕 클립 설정 기능

트위치 생방송 중에 1분 이내의 클립을 따고, 이를 시청/공유/다운로드할 수 있는 클립 서비스

• 기간 : 2023년 3월 ~ 2023년 4월

• 회사 : 이제이엔

• 담당 범위 : Product Owner (프로덕트 로드맵 설계, 프로젝트 관리), 프론트엔드 전체, 백엔드 일부

주요 기술 스택

Frontend

• Next.js

• Mantine UI

• Tailwind CSS

• SWR

Backend

• NestJS

• Sequelize

• MariaDB, Redis

• Cloudflare R2

• ffmpeg

상세 개발 과정

배경

기존에 다시보기 서비스로 운영하던 TWIP VOD & CLIP가 다시보기 기능을 포기하고 클립 기능을 확대, 개선하여 TWIP CLIP 서비스로 리뉴얼 출시하였습니다.

TWIP CLIP 서비스로의 전환 이전 준비 과정에서, 프로덕트를 제일 잘 이해하고 있는 제가 직접 제품의 방향성을 결정하고, 프로젝트의 주도권을 쥐고 진행할 수 있도록 Product Owner 역할을 경험할 기회를 제공받았습니다.

리뉴얼 프로젝트 설계

우선 아직 정식 프로덕트는 아니었기 때문에 많은 리소스를 투입할 수 없었고, 대신 신입급 백엔드개발자 한 명 리소스를 지원받아 프로젝트를 시작하였습니다.

먼저 기존 코드에서 리팩토링이 필요한 부분과 해결해야 할 각종 버그들이 많이 남아있었고, 클립 서비스로의 전환을 위해 백엔드의 많은 부분도 변경이 필요했습니다. 여기에 다양한 아이디어와 VoC들까지. 그냥 봐도 요구사항이 너무 많아서, 일단 하나의 문서에 모든 요구사항들을 나열하고 그 중에 우선순위를 정하는 과정을 진행했습니다.

그렇게 정해진 우선순위와 요구사항들을 바탕으로 2~4분기가 포함된 연간 로드맵, 2분기 내에 진행할 3차례 스프린트, 마지막으로 이를 위한 첫번째 스프린트 계획까지. 총 3개의 로드맵 문서를 만들고 디렉터급 이상의 리뷰를 받았습니다. 그렇게 3주짜리 첫 번째 스프린트를 시작했습니다.

첫 번째이자 마지막 스프린트

정말 3주간 미친듯이 달렸던 것 같습니다. 백엔드에서 변경되어야 할 주요 API와 DB구조 등 수정을 진행하고, 그 중 일부 작업은 백엔드개발자분과 함께 진행했습니다. (일종의 온보딩 프로젝트 역할까지 겸해서 진행) 이 과정에서 백엔드 개발자분이 코드를 이해하고 개선해나가는 과정에서 발전이 느껴져 기쁘기도 했습니다.

Frontend쪽도 많은 개선을 이뤘습니다. 일단 전체 페이지의 UI 구조를 모두 변경했습니다. 기존에도 디자이너 리소스 없이 프로젝트를 진행했지만, 이번에는 회사에서 예전에 핫클립 관련하여 기획해뒀던 디자인 리소스가 있어 이를 일부 참고하여 UI 구조를 짰습니다. 다행히 레퍼런스가 있었기 때문에 UI 짜는 건 어렵지 않았으나, 리팩토링 과정에서의 시간은 예상보다 꽤 오래 걸렸습니다. 기존에는 useEffect 내에서 api 호출을 하는 부분이 많았으나, 이를 모두 SWR 기반으로 변경하여 data fetching 시의 여러 문제들을 개선하였습니다. 이외에도 컴포넌트 분리, 누락된 타입 보충 등 리팩토링에 필요한 주요 작업들을 진행했습니다.

기능적인 면에서도 다크모드, PWA 지원, SEO 개선 등 다양한 발전이 이뤄졌습니다. 특히 다크모드는 VoC 가운데 1위를 차지할 정도로 유저의 요구도가 높은 부분이었는데, 디자인 시스템에서 제공하는 기능을 이용해 빠르게 구현했습니다.

이외에도 마이페이지 전면 개선, 트위치 채팅봇 '싹둑이'로 클립 생성하기 기능 등 다양한 피쳐를 스프린트 기간 내에 진행된 3번의 스프린트에서 모두 소화해냈습니다.

스프린트 종료 이후

비록 모든 기능을 출시해내기 위해 1주의 시간이 추가되어 총 4주가 들어갔지만, 산적했던 코드상의 문제점들을 리팩토링을 통해 일시에 해소했고, UI적인 개선도 대폭 이뤄냈으며, 비용 역시 크게 절감할 수 있었습니다. (신입 개발자의 실력 성장은 덤)

안타깝게도 회사 내의 리소스 분배와 여러 사정으로 인해, 스프린트 종료 이후 저는 PO의 자리를 다른 전문 PM분께 넘기고 TWIP 빙빙도네 프로젝트에 투입되었습니다.

성과

• MAU 최대 4.2만명 달성

• 지표가 매월 최소 20~30% 이상씩 성장 중

  • 4월 28일 출시 이후, 5월 클립 생성 수 2,000여개에서, 매월 꾸준히 성장하여 10월에는 25,000여개까지 급성장 (5개월만에 1250% 성장)

  • 클립 조회수 역시 5월 대비 10월에 5배 이상 성장

• 2023년 10월 기준 매일 평균 800~1,000여개의 클립 생성

• 클립을 이용한 영상 후원 사용금액도 지속적으로 성장 중