# Replit으로 MVP 제작: YouTube 요약 서비스 #1 > MGX.dev와 Lovable 다음으로 Replit을 사용한 기록입니다. [Lovable·Supabase로 빠르게 MVP 만들기: AI 개발 자동화 경험기 – East Chair - East Chair](https://slashpage.com/east-chair/93nzyxmdeedxn2wk6r45) --- ## 시작하면서 1. **Replit** - 이번 프로젝트는 빠른 MVP 제작을 목표로 [Replit](https://replit.com/)을 사용했습니다. - 과거 Replit의 창업스토리를 보고 프리티어로 간단한 프로젝트를 해본 적은 있었지만, 이번에는 꽤 본격적인 API 연동과 LLM 활용까지 진행해보게 됐습니다. - Lovable을 한 번 더 결제할까 고민하다가 [할인코드](https://www.gpters.org/nocode/post/mini-mbti-made-30-WkVjqzrSU59ykyi)를 발견해서 바로 결제.. 1. **주제 설정** - 기존에 했던 주제를 다시 하기는 싫어서 새로운 주제를 설정하고 시작했습니다.**YouTube 요약 서비스 구축**입니다. - 이번 목표는 **YouTube 요약 서비스 구축**입니다.**shortV**라는 서비스를 만들었습니다. - YouTube를 켜면, 본래 보려고 했던 영상은 뒤로하고 어느새 알고리즘의 늪에 빠져들곤 하죠. 저는 이런 '시간 낭비'에서 벗어나기 위해, 그리고 유익한 영상만 선별해서 빠르게 확인할 수 있도록 **shortV**라는 서비스를 만들었습니다. **프롬프트에 포함된 서비스 소개** > **"사용자가 지정한 YouTube 채널의 영상을 구독하여 AI 요약을 제공합니다. 영상을 보기 전에 프리뷰를 통해 보고 싶은 영상을 선별하고, 더 나아가 YouTube 플랫폼 자체에서 벗어날 수 있는 자유를 제공합니다."** 1. **타겟 및 목표 설정** - shortV는 정보성 콘텐츠를 효율적으로 소비하고 싶은 분들을 위한 도구입니다. 영상 본문 스크립트를 기반으로 요약을 제공하며, 각 주제별 타임스탬프를 생성해 필요한 구간만 바로 확인할 수 있도록 하는 것이 목표입니다. --- ## 기존과 다르게 1. **UI 디자인 시도** - 처음에는 [Figma to Replit 플러그인](https://blog.replit.com/figma-to-replit)을 활용해보려 했지만, 유료 티어가 필요하다는 점(Dev 모드 필요)에서 아쉽게도 이미지로 추출해서 작업을 진행했습니다. 이 또한 프로토타이핑에서는 충분히 유효한 접근이라고 생각합니다. - 페이지 수가 3개 밖에 없어서 1시간 정도 작업하여 레이아웃 설정을 완료했습니다. 컴포넌트 생성하고 세세한 부분 조정하는게 시간을 잡아먹었습니다.(결국엔 필요 없었지만..) 1. **프롬프트 개선** - 기존 약1900자에서 약1600자로 쓸데없어 보이는 부분 정리 했습니다. 프롬프트는 길어져봤자 비효율적이라 최대한 줄이는 쪽으로 작성했습니다. - Lovable 사용할 때 피드백 한 로직의 중요성에 기반해 로직에 관련된 내용 추가했습니다. --- ## 작업시작 **YouTube 채널을 RSS 처럼 구독하는 방법 리서치** - 이 부분은 방법론을 명확하게 제시하기 위해 선작업 했습니다. - 지정한 YouTube 채널에서만 영상 정보를 받아오기 위해 RSS 형식으로 데이터를 받아오는 방법을 [Perplexity](https://www.perplexity.ai/search/youtubeeseo-jijeong-caeneolyi-00..rVkTRY._QQar3u59hw#1)를 참고해 구현했습니다. - XML로 정리해 백엔드에서 파싱하고, 필요 항목(제목, 썸네일, 영상 ID 등)을 추출합니다. **최초 프롬프트 작성** - 프로젝트 시작을 위해 프롬프트를 입력 했습니다. - 초기 프로젝트 설정 및 웹사이트, DB 구축에 3-4분 정도의 시간이 소요 되었습니다. - 첨부파일의 UI 구성은 다르게 제작했지만 기본 레이아웃(Sidebar 구조), 주요기능 등은 잘 구현 했습니다. --- ## 수정수정수정.. **채널 썸네일 처리** - 핵심기능은 구현되었지만 자잘한 이슈가 있었고 채널정보는 정상적으로 출력되고 있지 않았습니다. - 채널 썸네일을 가져와야 하는데 첫 영상의 썸네일을 채널 이미지로 착각해버리는 문제 때문에, 별도로 채널의 이미지 URL을 추출하는 방법을 찾아 해결했습니다. [참고: [채널 이미지 주소 추출 방법]](https://www.perplexity.ai/search/youtube-caeneolyi-imiji-juso-c-.NDULP_vS9mUmxEmQB809A#0) ![Image](https://upload.cafenono.com/image/slashpagePost/20250609/205456_tYTBnTHuYnHVXCJ32S?q=80&s=1280x180&t=outside&f=webp) **Shorts 영상 제외하기** - 주요 콘텐츠가 정보제공 영상이기 때문에 Shorts는 제외하기로 했습니다. - Shorts는 요약의 대상이 되지 않도록 영상 길이를 기준으로 필터링했습니다. - 이를 위해 YouTube Data API를 활용, 영상 duration 정보를 가져오는 방법을 참고했습니다. [참고: [영상 길이 확인 방법]](https://www.perplexity.ai/search/youtube-videoyi-yeongsanggilir-JqpmtwV4TcSnTQwj8nms7g#0) **LLM 선택과 요약 품질 개선** - 요약은 Google의 Gemini 모델을 사용했습니다. - 자동 설정은 `1.5`로 되어있었으나 `2.0-flash-lite`로 변경했습니다. 가격이 좀 있지만 퀄리티의 차이가 좀 있었습니다. - `2.5-flash-preview-05-20` 을 테스트 했지만 `2.0-flash-lite`와 큰 차이가 없어 되돌렸습니다. - API 가격 비교는 공식 문서를 참고했습니다. [참고: [Gemini API 가격표]](https://ai.google.dev/gemini-api/docs/pricing?hl=ko) - 사용량에 비해 100원이 안되는 금액이 사용되었습니다. ![Image](https://upload.cafenono.com/image/slashpagePost/20250609/213821_mb7HOFlKSPpMEBe9vx?q=80&s=1280x180&t=outside&f=webp) **타임스탬프 기능 도전기 (그리고 실패)** - 각 요약 주제에 대해 영상 내 시점을 타임스탬프로 연결하려고 했지만, 다음과 같은 문제에 부딪혔습니다: - 모델이 `videoID`조차 정확히 추출하지 못함 - timestamp 링크 형식을 잘못 생성하거나 누락 - Gemini 웹버전을 사용할 때는 알아서 작성해줬는데 API를 사용할 때는 어떻게 해도 정상출력이 되지 않았습니다. - 출력서식 지정, 타임스탬프 도출 규칙 제공, 변수 추가 등 모든 방법 실패..[참고: [YouTube 타임스탬프 링크 생성 규칙]](https://www.perplexity.ai/search/youtube-timestamp-link-saengse-3mwTE0TFT7m2lVtK.DaV4w#0) - 가끔 정상같이 보이지만 시간도 링크도 맞지 않았다 ![Image](https://upload.cafenono.com/image/slashpagePost/20250609/214325_y8pqq50cqpU5oLsEcv?q=80&s=1280x180&t=outside&f=webp) - 현재는 이 기능을 **향후 개선 과제**로 남겨두었습니다. **영상 스크립트 기반 요약으로 전환** - 초기에는 LLM이 영상을 직접 분석할 수 있을 것이라 기대했으나, 실제 API 호출에서는 불가능하다는 것을 확인했습니다.[참고 검색: [Gemini 영상 요약 가능 여부]](https://g.co/gemini/share/444cc6c45e44) - 따라서 YouTube 자막(스크립트)을 추출해 요약하는 방식으로 전환했습니다. 이 방식은 정보성 콘텐츠를 타겟으로 한 서비스 목적과도 부합하며, 향후 요약 정제 로직을 개선해 퀄리티를 높일 계획입니다. - 기존에 100%는 아니지만 왠지 5분 내외로만 타임스탬프가 찍히는 등 심증이 있었는데, 스크립트 방식으로 변경하고 전체내용을 더 확실하게 요약하게 되었습니다. --- ## Replit 기능활용 **Database** - Replit은 기본적으로 PostgreSQL 기반의 Neon과 연동됩니다. Lovable과 다르게 별도 설정 없이 에이전트가 알아서 설정, 관리 해줍니다. [참고: [https://neon.com/guides/replit-neon](https://neon.com/guides/replit-neon) ] [Building AI-powered applications with Replit Agent - Neon Guides](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](https://docs.replit.com/category/replit-deployments#what-is-replit-deployments%253F) ] [Replit Docs](https://docs.replit.com/category/replit-deployments#what-is-replit-deployments%3F) - Autoscale 설정은 어느정도 커스텀이 가능하다. ![Image](https://upload.cafenono.com/image/slashpagePost/20250609/220508_AruYjcTEH7Pe7Ejc9C?q=80&s=1280x180&t=outside&f=webp) **Git** - github 계정을 연결하고 Repository만 생성해주면 이후 알아서 commit - push를 진행해줍니다. 수정할 때 마다 하는 것이 아니고 특정 시점에 해주는 것 같습니다. - 본인이 직접하는 것도 가능합니다. 솔직히 아예 신경을 안써도 됩니다. **Auth** - 기본적으로 Google, GitHub, X, Apple, Email 계정관리를 제공해줍니다. [참고: [https://docs.replit.com/replit-workspace/replit-auth](https://docs.replit.com/replit-workspace/replit-auth) ] [Replit Docs](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 대신 할인코드 때문에 결제했지만 지속적으로 사용할 것 같습니다. - 추가적으로 크래딧(토큰) 사용량이 매우 여유있습니다.(절반 이상 남음) ![Image](https://upload.cafenono.com/image/slashpagePost/20250609/223318_KE4qW5amTyJ6v9PZqg?q=80&s=1280x180&t=outside&f=webp) - 다음 단계에서는 타임스탬프 추가, 같이보기 페이지 추가, 홈페이지 디자인 개선 등을 작업할 생각입니다. For the site tree, see the [root Markdown](https://slashpage.com/dogma13.md).