2편에서 이어집니다.
https://www.gpters.org/dev/post/mvp-production-replit-youtube-psf5uRG4u6GUPoX
YouTube vs YouTube vs YouTube vs YouTube vs YouTube vs YouTube vs
추가 개선 사항
2부 이후에 자잘한 개선 작업들을 기록했습니다.
사용성 개선 및 기능 추가
+ 모바일뷰 대응
배포 후 테스트를 하다 보니 모바일에서의 사용성 문제가 눈에 띄기 시작했습니다. 어짜피 모바일 웹브라우저에서 봐야 하기 때문에 간단한 모바일 사파리 PWA용 검색창 숨김 처리만 했습니다.
+ 슬라이드 스윕 액션 모션 추가
트랜딩 섹션의 슬라이드뷰(Carousel) 기능을 개선하는 과정에서 예상보다 세세한 부분을 잡아주지 못하는 Replit의 한계를 체감했습니다.
주요 이슈들:
슬라이드 버튼에 영향을 받아 아이템 카드의 너비가 변경되는 문제
슬라이드 모션 후 카드가 정지하는 위치가 어긋나는 문제
7-8회 정도 수정 후에야 현재 상태로 합의할 수 있었습니다. 모바일뷰에서의 스윕 액션 모션 수정도 생각보다 만족스럽지 못했습니다.
+ 슬라이드 필터 추가
참고할 웹사이트와 코드를 첨부해서 요청했더니 이 부분은 의외로 쉽게 해결됐습니다. 기존 서비스를 레퍼런스로 제시하는 것의 효과를 다시 한 번 확인했습니다.
한자는 흰색 배경에 표시됩니다
+ 슬라이드 필터
프롬프트 요약:
Substack의 슬라이드 필터 버튼과 동일하게 제작
슬라이드 필터 버튼 부분의 코드를 첨부
+ 라이브 영상 배제 로직 추가
운영하다 보니 XML에 라이브 영상, 공개예정 영상 정보도 포함된다는 사실을 알게 됐습니다. 이런 영상들은 요약 대상이 아니기 때문에 필터링이 필요했습니다.
Perplexity에게 물어보니 YouTube Data API를 통해 해결이 가능한 것으로 확인했고, YouTube Data API를 사용해서 등록된 일반 영상만 가져오도록 로직을 개선했습니다.
+ 채널 42개 추가
개인적으로 주로 시청하던 채널 외에 검색과 추천을 통해 다양한 분야를 고려해 채널을 추가했습니다. 이 과정에서 YouTube에서는 생각보다 '정보성'이라는 것이 애매모호한 경계라는 점을 깨달았습니다. 채널을 추가했다가 삭제하는 상황도 많았고, 지속적인 큐레이팅이 필요함을 느꼈습니다.
되돌아보기
이쯤이 ver0.1 이라고 생각하면서 현재까지 과정을 회고해봅니다.
서비스 구현 배경
저는 YouTube에서 정보성 콘텐츠를 중점적으로 보는 성향인데, 보다 보면 다른 자극적인 영상에 빠져 많은 시간을 소비하는 상황이 자주 생겼습니다. 개인적으로 정보수집에 집착이 있는 편이라 뉴스나 블로그 외에 YouTube에서만 얻을 수 있는 정보를 놓치기 싫어 바이브코딩 스터디 겸 만들어보게 되었습니다.
이 주제는 장단점이 명확합니다.
장점:
이미 있는 콘텐츠를 재가공하기 때문에 시작하기 쉬움
콘텐츠 생산이 그렇게 빠르지 않아서 감당 가능한 속도(채널이 많이 추가되면 모르겠지만..)
단점:
외부 콘텐츠와 라이브러리에 의존적
수익모델 적용하기가 어려움
작업 통계
작업기간: 7일
Replit 크래딧 사용량: Monthly $25 + Additional $50
OpenAI API 토큰 사용량: 150,115 token($39.67) $5 정도는 다른 개발에 사용되었습니다.
Gemini API 토큰 사용량: ₩335 (단순 텍스트 요약정리는 매우 저렴한 편입니다.)
Azure Analytics 대시 보드의 스크린 샷
서비스 소개
ShortV는 정보를 얻을 수 있는 다양한 YouTube 채널의 RSS를 제공합니다.
사용자는 정리된 텍스트로 빠르게 영상의 주요내용을 파악하거나, 영상을 시청하기 전에 꼭 볼만한 콘텐츠를 골라낼 수 있습니다.
차별점:
YouTube 영상을 소스로 사용
큐레이션한 채널 기반으로 분야의 다양성 제공 *** LLM을 통해 소개, 핵심정리를 제공하여 사용자에게 빠른 인지와 선택권 제공 *** 다국어(지금은 한글만) 번역을 통해 언어의 장벽 없이 정보 습득 가능
정제된 정보를 통해 사용자는 인사이트, 비판적 사고, 자주적 판단 가능
현재 상태:
아직 MVP 수준
약간의 오류가 남아 있으나 사용하는데 큰 문제는 없음
영상 업데이트는 하루에 2-3회
사용자 반응을 알아보고 싶음
채널을 계속 검토해서 추가할 예정
+ 웹페이지 구성
Home: 최근 7일간 인기있는 피드, 최근에 Upvote 받은 모든 피드
Feed: 사용자가 구독중인 채널의 최근 피드
Channel: 사용자가 구독중인 채널
+ 사용방법
Home에서 다양한 피드를 둘러보시고 본인에게 정보가 된다고 생각하는 채널을 추가하고 피드에 Upvote 해주시면 됩니다.
추가된 채널의 새로운 영상은 피드로 정리되서 사용자의 Feed 페이지에 자동으로 출력됩니다.
+ 타겟 사용자
YouTube 개미지옥에 빠지기 싫으신 분
영상보다 텍스트로 정보만 빨리 읽고 싶으신 분
꼭 봐야할 영상을 골라내고 싶으신 분
+ 요청사항
하루에 한 번만 방문하세요. YouTube는 계속 보거나 몇 시간씩 봐야할 정보성 콘텐츠가 많지 않습니다!
사용해보시고 피드백 남겨주시면 감사하겠습니다.
접속주소: https://shortv.replit.app/
후기
기존에 2-3가지 바이브코딩 툴을 사용해봤지만 Replit은 만족도가 상대적으로 높았습니다. 특히 제가 비개발자이기 때문에 느끼는 허들을 대부분 해결해주었습니다.
본업 중 하나인 서비스 기획자로써 새로운 프로젝트를 시작할 때 가장 큰 어려움 중 하나가 개발자를 설득하는 것 이었습니다. 서비스의 가능성을 설득해서 프로젝트를 같이 진행하기 위해 많은 시간과 노력이 필요했습니다. 하지만 바이브 코딩을 통해 MVP 수준까지 빠르게 구축해서 사용자의 반응을 확인할 수 있다는 점에서 저 같은 포지션의 사람들에게는 Replit은 매우 유용한 도구라고 볼 수 있습니다.
여러 문제가 있었지만 바이브코딩으로 어느 수준까지 가능한지 가늠할 수 있었습니다.
