Replit으로 MVP 제작: YouTube 요약 서비스 #1
Pokute
개발로그
카테고리
비어 있음
MGX.dev와 Lovable 다음으로 Replit을 사용한 기록입니다.
시작하면서
1.
Replit
•
•
과거 Replit의 창업스토리를 보고 프리티어로 간단한 프로젝트를 해본 적은 있었지만, 이번에는 꽤 본격적인 API 연동과 LLM 활용까지 진행해보게 됐습니다.
•
2.
주제 설정
•
기존에 했던 주제를 다시 하기는 싫어서 새로운 주제를 설정하고 시작했습니다.YouTube 요약 서비스 구축입니다.
•
이번 목표는 YouTube 요약 서비스 구축입니다.shortV라는 서비스를 만들었습니다.
•
YouTube를 켜면, 본래 보려고 했던 영상은 뒤로하고 어느새 알고리즘의 늪에 빠져들곤 하죠. 저는 이런 '시간 낭비'에서 벗어나기 위해, 그리고 유익한 영상만 선별해서 빠르게 확인할 수 있도록 shortV라는 서비스를 만들었습니다.
프롬프트에 포함된 서비스 소개
"사용자가 지정한 YouTube 채널의 영상을 구독하여 AI 요약을 제공합니다. 영상을 보기 전에 프리뷰를 통해 보고 싶은 영상을 선별하고, 더 나아가 YouTube 플랫폼 자체에서 벗어날 수 있는 자유를 제공합니다."
3.
타겟 및 목표 설정
•
shortV는 정보성 콘텐츠를 효율적으로 소비하고 싶은 분들을 위한 도구입니다. 영상 본문 스크립트를 기반으로 요약을 제공하며, 각 주제별 타임스탬프를 생성해 필요한 구간만 바로 확인할 수 있도록 하는 것이 목표입니다.
기존과 다르게
1.
UI 디자인 시도
•
처음에는 Figma to Replit 플러그인을 활용해보려 했지만, 유료 티어가 필요하다는 점(Dev 모드 필요)에서 아쉽게도 이미지로 추출해서 작업을 진행했습니다. 이 또한 프로토타이핑에서는 충분히 유효한 접근이라고 생각합니다.
•
페이지 수가 3개 밖에 없어서 1시간 정도 작업하여 레이아웃 설정을 완료했습니다. 컴포넌트 생성하고 세세한 부분 조정하는게 시간을 잡아먹었습니다.(결국엔 필요 없었지만..)
2.
프롬프트 개선
•
기존 약1900자에서 약1600자로 쓸데없어 보이는 부분 정리 했습니다. 프롬프트는 길어져봤자 비효율적이라 최대한 줄이는 쪽으로 작성했습니다.
•
Lovable 사용할 때 피드백 한 로직의 중요성에 기반해 로직에 관련된 내용 추가했습니다.
작업시작
YouTube 채널을 RSS 처럼 구독하는 방법 리서치
•
이 부분은 방법론을 명확하게 제시하기 위해 선작업 했습니다.
•
•
XML로 정리해 백엔드에서 파싱하고, 필요 항목(제목, 썸네일, 영상 ID 등)을 추출합니다.
최초 프롬프트 작성
•
프로젝트 시작을 위해 프롬프트를 입력 했습니다.
•
초기 프로젝트 설정 및 웹사이트, DB 구축에 3-4분 정도의 시간이 소요 되었습니다.
•
첨부파일의 UI 구성은 다르게 제작했지만 기본 레이아웃(Sidebar 구조), 주요기능 등은 잘 구현 했습니다.
수정수정수정..
채널 썸네일 처리
•
핵심기능은 구현되었지만 자잘한 이슈가 있었고 채널정보는 정상적으로 출력되고 있지 않았습니다.
•
채널 썸네일을 가져와야 하는데 첫 영상의 썸네일을 채널 이미지로 착각해버리는 문제 때문에, 별도로 채널의 이미지 URL을 추출하는 방법을 찾아 해결했습니다. [참고: 채널 이미지 주소 추출 방법]
Shorts 영상 제외하기
•
주요 콘텐츠가 정보제공 영상이기 때문에 Shorts는 제외하기로 했습니다.
•
Shorts는 요약의 대상이 되지 않도록 영상 길이를 기준으로 필터링했습니다.
•
이를 위해 YouTube Data API를 활용, 영상 duration 정보를 가져오는 방법을 참고했습니다. [참고: 영상 길이 확인 방법]
LLM 선택과 요약 품질 개선
•
요약은 Google의 Gemini 모델을 사용했습니다.
•
자동 설정은 1.5로 되어있었으나 2.0-flash-lite로 변경했습니다. 가격이 좀 있지만 퀄리티의 차이가 좀 있었습니다.
•
2.5-flash-preview-05-20 을 테스트 했지만 2.0-flash-lite와 큰 차이가 없어 되돌렸습니다.
•
API 가격 비교는 공식 문서를 참고했습니다. [참고: Gemini API 가격표]
•
사용량에 비해 100원이 안되는 금액이 사용되었습니다.
타임스탬프 기능 도전기 (그리고 실패)
•
각 요약 주제에 대해 영상 내 시점을 타임스탬프로 연결하려고 했지만, 다음과 같은 문제에 부딪혔습니다:
◦
모델이 videoID조차 정확히 추출하지 못함
◦
timestamp 링크 형식을 잘못 생성하거나 누락
•
Gemini 웹버전을 사용할 때는 알아서 작성해줬는데 API를 사용할 때는 어떻게 해도 정상출력이 되지 않았습니다.
◦
출력서식 지정, 타임스탬프 도출 규칙 제공, 변수 추가 등 모든 방법 실패..[참고: YouTube 타임스탬프 링크 생성 규칙]
◦
가끔 정상같이 보이지만 시간도 링크도 맞지 않았다
•
현재는 이 기능을 향후 개선 과제로 남겨두었습니다.
영상 스크립트 기반 요약으로 전환
•
초기에는 LLM이 영상을 직접 분석할 수 있을 것이라 기대했으나, 실제 API 호출에서는 불가능하다는 것을 확인했습니다.[참고 검색: Gemini 영상 요약 가능 여부]
•
따라서 YouTube 자막(스크립트)을 추출해 요약하는 방식으로 전환했습니다. 이 방식은 정보성 콘텐츠를 타겟으로 한 서비스 목적과도 부합하며, 향후 요약 정제 로직을 개선해 퀄리티를 높일 계획입니다.
•
기존에 100%는 아니지만 왠지 5분 내외로만 타임스탬프가 찍히는 등 심증이 있었는데, 스크립트 방식으로 변경하고 전체내용을 더 확실하게 요약하게 되었습니다.
Replit 기능활용
Database
•
Replit은 기본적으로 PostgreSQL 기반의 Neon과 연동됩니다. Lovable과 다르게 별도 설정 없이 에이전트가 알아서 설정, 관리 해줍니다. [참고: https://neon.com/guides/replit-neon ]
•
그외 환경변수 설정 등은 자동으로 해줍니다.
API
•
외부 API 사용을 위한 키 추가만 신경쓰면 됩니다. 저는 Gemini API만 추가 해줬습니다.
Deployments
•
Replit은 기본적으로 Dev 모드로 개발된다고 볼 수 있는데 Deployments를 통해 배포할 수 있습니다.
•
4개 타입 중 하나를 선택할 수 있는데 Autoscale 모델을 권장해서 그대로 사용했습니다. [참고: https://docs.replit.com/category/replit-deployments#what-is-replit-deployments%3F ]
•
Autoscale 설정은 어느정도 커스텀이 가능하다.
Git
•
github 계정을 연결하고 Repository만 생성해주면 이후 알아서 commit - push를 진행해줍니다. 수정할 때 마다 하는 것이 아니고 특정 시점에 해주는 것 같습니다.
•
본인이 직접하는 것도 가능합니다. 솔직히 아예 신경을 안써도 됩니다.
Auth
•
기본적으로 Google, GitHub, X, Apple, Email 계정관리를 제공해줍니다. [참고: https://docs.replit.com/replit-workspace/replit-auth ]
•
처음에 로그인 뷰가 있어서 Lovable 처럼 UI만 있는줄 알았는데 실제 Login, Logout이 가능했습니다.
•
배포 후 테스트 해봤을 때 로그인 요청 시 위 5개 방식을 선택할 수 있는 뷰가 출력되고, 하나를 선택해서 로그인 하고 나면 Replit allow 프로세스가 하나 더 끼어듭니다.
•
이 부분이 어색했는데 막상 버튼 한 번만 더 누르면 되는 것에 비해 자동으로 구현해주니 매우 만족스러웠습니다.
Agent
•
대화형 코딩을 해결해주는 에이전트는 대부분 한글을 할 줄 모릅니다. 하다보니 딱히 한글로 요청할 필요를 느끼지 못해 익숙해져 버렸습니다; (왠지 모르게 딱 1번 한글로 답변해준적이 있습니다)
•
만족스러운 부분은 에이전트가 작업할 때 출력되는 내용을 통해 작업내용을 이해하기 좋은편이었습니다.
•
또한 저는 뭔가 기능이 불명확하다고 생각될 때 "검토 후 수정"을 종종 요청하는데, 이 검토를 충실히 수행한다는 점 입니다. Lovable은 검토과정과 결과에 대한 신뢰가 낮았는데 Replit은 높은 편 입니다.
마무리
•
shortV 프로젝트는 Replit 기반의 빠른 MVP 제작 및 경험, YouTube 영상을 LLM로 재가공이라는 목적이 있었습니다.
•
대부분의 핵심기능을 구현할 수 있었고 그 과정이 크게 어렵지 않아 Replit이 매우 만족스러웠습니다.
•
특히 Lovable이 매우 쉬운 사용성에 만족도가 높았다면, (프로그래밍 지식만 조금 있는)저의 경우에는 Replit의 구현 안정성, Auth 자동구현, 수정작업 시 신뢰성 있는 구현 퀄리티 등이 만족도를 높여줬습니다.
•
앞서 Lovable 대신 할인코드 때문에 결제했지만 지속적으로 사용할 것 같습니다.
•
추가적으로 크래딧(토큰) 사용량이 매우 여유있습니다.(절반 이상 남음)
•
다음 단계에서는 타임스탬프 추가, 같이보기 페이지 추가, 홈페이지 디자인 개선 등을 작업할 생각입니다.
Do
'Dogma13' 구독하기
사이트를 구독하면 새 포스트 등 최신 업데이트를 알림과 메일로 가장 먼저 받아보실 수 있습니다.
Slashpage에 가입하고 'Dogma13'을 구독하세요!
Slashpage에 가입하고 'Dogma13'을 구독하세요!
