⏰ AI스터디 17기 사전 모집 START (7월 시작 예정) | 빠르게 합류하세요 🚀

프롬프트 / AI로 개발
sakarin9t
sakarin9t
 · 프롬프트 / AI로 개발에 게시됨

Replit으로 MVP 제작: YouTube 요약 서비스 #1

어두운 배경에 대답하기위한 로고

시작하면서

Replit

  • 이번 프로젝트는 빠른 MVP 제작을 목표로 Replit을 사용했습니다.

  • 과거 Replit의 창업스토리를 보고 프리티어로 간단한 프로젝트를 해본 적은 있었지만, 이번에는 꽤 본격적인 API 연동과 LLM 활용까지 진행해보게 됐습니다.

  • Lovable을 한 번 더 결제할까 고민하다가 할인코드를 발견해서 바로 결제..

주제 설정

  • 기존에 했던 주제를 다시 하기는 싫어서 새로운 주제를 설정하고 시작했습니다.YouTube 요약 서비스 구축입니다.

  • 이번 목표는 YouTube 요약 서비스 구축입니다.shortV라는 서비스를 만들었습니다.

  • YouTube를 켜면, 본래 보려고 했던 영상은 뒤로하고 어느새 알고리즘의 늪에 빠져들곤 하죠. 저는 이런 '시간 낭비'에서 벗어나기 위해, 그리고 유익한 영상만 선별해서 빠르게 확인할 수 있도록 shortV라는 서비스를 만들었습니다.

프롬프트에 포함된 서비스 소개

"사용자가 지정한 YouTube 채널의 영상을 구독하여 AI 요약을 제공합니다. 영상을 보기 전에 프리뷰를 통해 보고 싶은 영상을 선별하고, 더 나아가 YouTube 플랫폼 자체에서 벗어날 수 있는 자유를 제공합니다."

타겟 및 목표 설정

  • shortV는 정보성 콘텐츠를 효율적으로 소비하고 싶은 분들을 위한 도구입니다. 영상 본문 스크립트를 기반으로 요약을 제공하며, 각 주제별 타임스탬프를 생성해 필요한 구간만 바로 확인할 수 있도록 하는 것이 목표입니다.

기존과 다르게

UI 디자인 시도

  • 처음에는 Figma to Replit 플러그인을 활용해보려 했지만, 유료 티어가 필요하다는 점(Dev 모드 필요)에서 아쉽게도 이미지로 추출해서 작업을 진행했습니다. 이 또한 프로토타이핑에서는 충분히 유효한 접근이라고 생각합니다.

  • 페이지 수가 3개 밖에 없어서 1시간 정도 작업하여 레이아웃 설정을 완료했습니다. 컴포넌트 생성하고 세세한 부분 조정하는게 시간을 잡아먹었습니다.(결국엔 필요 없었지만..)

프롬프트 개선

  • 기존 약1900자에서 약1600자로 쓸데없어 보이는 부분 정리 했습니다. 프롬프트는 길어져봤자 비효율적이라 최대한 줄이는 쪽으로 작성했습니다.

  • Lovable 사용할 때 피드백 한 로직의 중요성에 기반해 로직에 관련된 내용 추가했습니다.

작업시작

YouTube 채널을 RSS 처럼 구독하는 방법 리서치

  • 이 부분은 방법론을 명확하게 제시하기 위해 선작업 했습니다.

  • 지정한 YouTube 채널에서만 영상 정보를 받아오기 위해 RSS 형식으로 데이터를 받아오는 방법을 Perplexity를 참고해 구현했습니다.

  • 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원이 안되는 금액이 사용되었습니다.

U S의 광고 수익 수를 보여주는 그래프

타임스탬프 기능 도전기 (그리고 실패)

  • 각 요약 주제에 대해 영상 내 시점을 타임스탬프로 연결하려고 했지만, 다음과 같은 문제에 부딪혔습니다:

    • 모델이 videoID조차 정확히 추출하지 못함

    • timestamp 링크 형식을 잘못 생성하거나 누락

  • Gemini 웹버전을 사용할 때는 알아서 작성해줬는데 API를 사용할 때는 어떻게 해도 정상출력이 되지 않았습니다.

  • 현재는 이 기능을 향후 개선 과제로 남겨두었습니다.

영상 스크립트 기반 요약으로 전환

  • 초기에는 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 대신 할인코드 때문에 결제했지만 지속적으로 사용할 것 같습니다.

  • 추가적으로 크래딧(토큰) 사용량이 매우 여유있습니다.(절반 이상 남음)

    월 계획에 대한 옵션이 다른 페이지의 스크린 샷

  • 다음 단계에서는 타임스탬프 추가, 같이보기 페이지 추가, 홈페이지 디자인 개선 등을 작업할 생각입니다.

👉 이 게시글도 읽어보세요