개발로그

다른 개인 프로젝트를 진행하다가 문득 YouTube 요약 서비스에 대해서 생각하게 되었습니다. 바이브코딩을 시작하면서 첫 번째로 진행하고 접었던 프로젝트(ShortV)가 유튜브 영상 분석 서비스였는데, 당시 공식 라이브러리나 API가 없어서 정상 서비스가 불가능하다고 판단해서 접었습니다. "지금은 지원하지 않을까?" 라는 생각이 문득 들어 리서치를 해봤습니다. 1. 다시 시작된 계기 하던 작업이 대략 마감되면서 머리도 식힐 겸 리서치를 시작했습니다. 몇 개월 전과 다르게 바로 결과를 알 수 있었습니다. Gemini API(V1beta)가 유튜브 분석을 제공한다고 합니다. 6개월 전에는 1시간 동안 리서치 해서 얻은 결과가 "결론적으로 불가능합니다" 였는데 한 번에 된다고 하니 묘한 기분 이었습니다. 그래도 yt-dlp 없이 가능하니 정말 좋은세상 입니다. 바로 Google AI Studio에 접속해서 간단한 테스트를 해보니 결과가 꽤 괜찮았습니다. 혹시나 독립배포 하면 Gemini API가 거부할 수도 있다는 불신감에 100% 확신은 하지 않았습니다. (세상엔 예상밖의 상황이 많으니까요) 빠르게 작업을 진행해보기 전에 개발과 관계없는 두 가지 큰 이슈를 먼저 검증해야 했습니다. 2. 검증해야 할 두 가지 이슈 + 이슈 1: 상품화 가능성 YouTube는 기본적으로 영상을 대체하는 목적의 서비스를 불허한다는 스탠스를 가지고 있습니다. 하지만 좀 더 리서치해보니 생각보다 크게 관여하지는 않는다는 점, 타임스탬프 처럼 영상을 보조하는 관점으로 접근해서 사용자가 영상에 직접 접근할 수 있게 하면 어느 정도 우회가 가능하다는 피드백을 얻었습니다. 생각해보니 다른 YouTube 요약 서비스들도 멀쩡히 돈 받고 서비스하고 있다는 점을 상기했습니다. 따라서 단순 영상 요약이 아닌 타임스탬프 제공을 통해 사용자가 원하는 지점에 바로 영상 플레이가 되도록 기획을 수정했습니다. 타겟 사용자는 이전과 동일하게: YouTube 사이트에서 원하지 않는 영상을 보는 것이 싫거나 정보성 영상을 주로 소비하는 사용자 + 이슈 2: 비용 문제 AI Studio에서 "gemini-2.5-flash"로 테스트했는데 막상 비용을 고려하니 만만치 않았습니다. 그래도 운영비를 충당할 수 있는지 검증해보기로 했습니다. 기준은 Google AdSense. Gemini에게 보수적인 광고 예상 수익을 기준으로 gemini-2.5-flash의 토큰사용량의 발생비용을 계산을 요청했습니다. 결과적으로 아주 높은 확률로 적자가 예상된다는 피드백을 받았습니다. 영상 하나 정리해주는 데 발생하는 비용(API, 서버 등 운영비) 대비 광고 조회 수익은 너무나도 빈약했습니다… 광고 수익 모델을 고려하면 영상 분석 외에 사용자가 조회하고 머무를 수 있는 페이지를 통해 부족한 광고 수익을 올려야 하는 문제가 발생했습니다. "자선 프로젝트로 가야 하나?" 라는 생각을 뒤로 하고 좀 더 검증을 진행했습니다. 3. 추가 테스트와 발견 + 더 나은 모델 찾기 우선 비용절감과 산출물 퀄리티 비교를 위해 LLM 모델을 낮춰봤습니다. 다른 모델들을 테스트해보니 "gemini-2.5-flash-lite" 모델로도 결과물이 나쁘지 않았고, "gemini-2.0-flash"도 비슷했습니다. "gemini-2.0-flash-lite"는 뭔가 아쉬운 결과. 그래도 "2.0-flash-lite"만 사용하던 나에게 토큰 비용 압박이 발생하긴 했지만 말이다. 비용은 동일하니 "gemini-2.5-flash-lite"를 기준점으로 결정했습니다.

나만의 IT서비스를 만들어보고 싶다는 생각을 했지만 시작이 어려웠다면 이 글은 조금 도움이 될 것입니다. 작년까지만 해도 코딩의 높은 장벽 앞에서 막막함을 느끼셨을 수도 있습니다. 하지만 이제 바이브 코딩을 통해 AI의 도움으로 누구나 자신의 아이디어를 구현할 수 있는 시대입니다. 저는 AI 기반 RSS 리더 서비스인 Hyprfeed를 직접 기획하고 개발 했습니다. Hyprfeed는 하루에도 수없이 쏟아지는 정보의 홍수 속에서 사용자가 정말 중요한 콘텐츠에만 집중할 수 있도록 AI가 핵심 내용을 요약해주는 차세대 RSS 리더입니다. 이 글에서는 제가 Hyprfeed를 개발하며 겪었던 경험을 바탕으로, 코딩을 처음 시작하는 초보자분들이 어떻게 개발 환경을 설정하고 아이디어를 실제 서비스로 만들어 나갈 수 있는지 그 구체적인 과정을 단계별로 공유하고자 합니다. Hyprfeed를 포함해서 3번의 바이브 코딩을 통해 제가 직접 부딪히고 해결하며 구축한 실전 노하우를 담았습니다. 저와 함께 여러분만의 서비스를 만드는 첫걸음을 내디뎌 봅시다. 1. 아이디어의 시작, V0로 뼈대 세우기 모든 서비스는 아이디어에서 시작하지만, 그 아이디어를 눈에 보이는 형태로 만드는 첫 단계는 막막하기만 합니다. 저는 이 첫 단추를 V0라는 AI 웹사이트 빌더로 시작했습니다. + 왜 V0를 선택했는가 초보자에게 가장 큰 장벽 중 하나는 개발 환경 설정입니다. 특히 GitHub(소스코드 관리), Vercel(배포), Supabase(데이터베이스) 같은 여러 서비스를 연결하는 과정에서 예측 불가능한 오류들이 발생하곤 합니다. V0는 이 모든 과정을 단순화시켜 줍니다. 마치 레고 블록을 조립하듯, 몇 번의 클릭만으로 이 서비스들을 손쉽게 연결할 수 있습니다. 이는 초보자가 겪을 수 있는 수많은 시행착오를 줄여주는 결정적인 장점입니다. 또한, V0는 무료 크레딧을 제공합니다. 이 크레딧은 서비스의 기본 레이아웃과 구조를 잡기에 충분한 양입니다. 아이디어를 빠르게 프로토타입으로 만들고 싶을 때, 비용 부담 없이 시작할 수 있다는 점은 매우 매력적입니다. + V0의 대안 최근 업데이트된 Lovable 같은 서비스도 V0와 유사하게 손쉬운 연결을 지원하여 좋은 대안이 될 수 있습니다. 하지만 Lovable이나 Replit 같은 서비스들은 배포 서버를 계속 유지하기 위해 정기 결제가 필요한 경우가 많습니다. 반면, V0로 기본 구조를 만든 뒤 Vercel의 무료 배포 플랜을 이용하는 방식은 장기적으로 훨씬 경제적입니다. 아래는 몇 달 전 사용 후기 입니다. 참고만하세요. 두 서비스 모두 이미 많이 발전되어 있습니다. + V0 사용의 핵심 팁 시작 전, 명확한 구조 설계: V0는 프롬프트 기반으로 작동하기 때문에, 크레딧을 효율적으로 사용하려면 최대한 구체적이고 명확한 구조를 미리 정해두는 것이 좋습니다. 종이에라도 좋으니, 만들고 싶은 서비스의 화면(예: 사이드 메뉴, 메인 콘텐츠 영역, 상세 페이지)을 명확하게 그려보고 시작하세요. 완벽주의는 금물: 무료 크레딧 내에서는 서비스의 '뼈대'를 잡는 것에만 집중하세요. Hyprfeed의 초기 버전도 사이드 메뉴, 카드 형태의 뉴스 리스트, 상세 내용 뷰 정도의 핵심 구조만 V0로 구성했습니다. 버튼의 색상, 폰트 크기 같은 세세한 디자인은 나중에 얼마든지 수정할 수 있으니, 크레딧을 낭비하지 않는 것이 중요합니다. GitHub 연동으로 소스 관리 자동화: V0에서 작업하기 전, GitHub에 새로운 저장소(Repository)를 생성하고 연결해두세요. 그러면 여러분이 V0에서 디자인을 수정하고 코드를 생성할 때마다 자동으로 변경 사항이 GitHub에 저장(Push)됩니다. 혼자 진행하는 프로젝트라면 복잡한 브랜치 전략 없이 main 브랜치 하나만으로도 충분합니다. 더 이상 소스코드가 날아갈 걱정을 할 필요가 없습니다. 클릭 한 번으로 배포: V0에서 만족스러운 결과물이 나왔다면, 'Publish' 버튼을 클릭하세요. 이 간단한 과정만으로 여러분의 프로젝트가 Vercel에 자동으로 배포되어 전 세계 어디서든 접속할 수 있는 실제 웹사이트가 됩니다. Vercel 역시 개인 프로젝트를 위한 무료 플랜이 매우 훌륭해서 비용 걱정은 잠시 잊으셔도 좋습니다.

추가된 새로운 기능들 지난 편 이후로 Vibex에 몇 가지 핵심 기능들을 추가했습니다. 사용자 경험을 풍부하게 하고 초기 프로덕트 개발 시 필요한 정보를 공유할 수 있도록 하는 데 중점을 두었습니다. + 미디어 및 URL 미리보기 스레드에 이미지와 비디오를 첨부할 수 있게 되었고, URL을 붙여넣으면 미리보기가 자동으로 생성됩니다. 미리보기는 2, 3번의 프롬프트로 금방 추가되었습니다. 조금 문제가 되었던 부분은 image, video의 출력 비율 및 크기 계산이었습니다. 있는걸 참고하자는 마인드로 x.com의 규칙을 그대로 적용했습니다. + 다크/라이트 테마 설정 사용자의 취향에 맞춰 다크 모드와 라이트 모드를 오갈 수 있도록 테마 설정 기능을 추가했습니다. 처음으로 단 한번의 프롬프트로 만족스러운 결과를 제공했던 기능입니다. 물론 자잘한 색상 수정이 있긴했지만 설정페이지 까지 깔끔하게 만들어줘서 놀랐습니다. + AB 투표 기능 스레드에 AB 투표 기능을 추가하여 사용자 참여를 유도하고, 다양한 의견을 수렴할 수 있는 기반을 마련했습니다. AB vote는 AB 테스트를 생각에 두고 개발한 기능입니다. 실제 AB 테스트는 2가지 UIUX를 제공하고 통계적 결론을 도출하지만, VibeX는 짧고 빠른 선택을 위해 투표 형태의 기능으로 구현 했습니다. 기존 스레드 안에 투표폼을 추가하고 싶었기 때문에 직접 구현하다가는 AI와 사투를 벌일것 같았습니다. 그래서 V0를 통해 기본 프론트 코드를 도출했습니다. 결과적으로 매우 좋은 선택이 되었는데 V0에 이미 많은 학습데이터를 통해 제가 원하는 UI와 기능을 구현해줬습니다. 그대로 code를 복사해서 Cursor에게 연결만 부탁했고, 결과적으로 30분 만에 대부분의 기능이 구현되었습니다. 문제는 Supabase의 정책과 함수, Cursor가 작성한 러프한 형변환 코딩이 문제였습니다. 스레드 테이블에서 AB vote 테이블을 참조해야 하기 때문에 DB내 함수와 정책이 필요 했습니다. 아래 언급하겠지만 치열한 Supabase 설정이 있었기에 지속적인 오류를 잡는데 5일 정도 소모한 것 같습니다… + 다국어 지원 한국어, 영어, 일본어 등 3개국어를 지원하여 글로벌 사용자들이 Vibex를 더 편하게 이용할 수 있도록 했습니다. 다국어 기능은 현재 시점에 굳이 추가할 기능은 아니었는데 Cursor가 간단히 설정할 수 있을 거라 예상하고 진행했습니다. 그런데 Cursor가 추천해준 2가지 방법(i18next, next-intl) 중 next-intl을 선택해서 진행시켰는데 2가지를 혼용해서 작성을 해버렸습니다. 다국어 수정을 하면서 확인된 것이었는데 Cursor가 i18next 방식을 메인으로 설정하고 수정요청을 하면 next-intl을 고려하고 수정해서 문제가 발생했습니다. 최종적으로 i18next 방식으로 정리했지만 당당하게 코드가 꼬인 것도 처음이라 신비한(?) 경험이었습니다. 다들 조심하세요.. 타임라인 최적화(와 실패)

프로젝트 시작 Vibe Coding 2번 째 프로젝트 개발로그를 시작합니다. 이번 프로젝트의 주제는 초기 아이디어 단계부터 사용자들과 함께 만들어 갈 수 있는 커뮤니티 플랫폼을 제작하는 것입니다. 개발환경 설정 + Replit과의 이별, 그리고 새로운 시작 이전 프로젝트(ShortV 제작 훑어보기)에서 Replit 자체 서버와 내부 Neon DB를 사용하면서 3-4번의 서비스 이슈를 겪었고, 이를 해결할 방법이 마땅치 않아 많은 어려움이 있었습니다. 이 경험을 통해 이번 프로젝트에서는 Vercel 배포를 최우선으로 설정했습니다. Replit으로 프로젝트를 생성하고 Vercel 배포를 시도했지만, 예상치 못한 문제에 부딪혔습니다. Replit의 가격 정책 변경으로 토큰 소모가 빨라졌음에도 불구하고 여전히 비효율적인 점이 많았습니다. 특히 정기 구독을 하지 않으면 서비스 운영이 어렵다는 점(현재 ShortV는 사망상태..)이 가장 큰 부담으로 다가왔습니다. Source: Reddit, Replit's new pricing is completely unreasonable Replit 관련 커뮤니티에서도 이러한 가격 정책에 대한 불만이 많다는 것을 확인할 수 있었습니다. (참고: Replit의 새로운 가격 정책, Replit 새 가격 모델 논란) + Vercel, Supabase, Github 연동을 위한 여정 Replit으로 시작하면 Vercel 배포 시 다양한 설정 문제가 발생한다는 것을 알게 되었습니다. 기존 ShortV도 Vercel에 배포하기 위해 열심히 에러로그를 복붙했지만 Replit은 해결해주시 못했습니다. 이번에도 새 프로젝트를 Vercel에 import, 배포하면서 발생한 에러를 Replit에 수정 요청을 했지만 결국 해결되지 않았고, 비전문가로서 우회 방안을 모색해야 했습니다. Vercel에 안정적으로 배포하는 환경을 구축하기 위한 가장 확실한 방법은 V0로 시작하여 Vercel, Supabase, GitHub를 자동으로 연결하고 최초 배포를 시도하는 것이었습니다. V0에서 프롬프트로 기본 페이지를 생성하고 더 진행해보았지만, 생각보다 만족스럽지 못한 결과물에 프로젝트를 삭제해야 했습니다. 그 다음으로 V0로 대충 생성된 GitHub 코드를 Replit에서 import하는 방법을 시도했습니다. 이 과정에서 Replit으로 시작한 프로젝트가 아니면 'agent'를 사용할 수 없다는 사실을 처음 알게 되었습니다. 다행히 'assistant'는 사용 가능했지만, 기능 완성도나 비용 문제로 결국 포기하게 되었습니다. 이후 Lovable, MGX 등 다른 대안들도 시도했지만 완성도 문제로 폐기했습니다. + V0.dev와 Figma의 시너지, 그리고 Cursor로의 전환 시행착오 끝에 Figma로 기본 레이아웃을 제작해서 프롬프트에 첨부 이미지로 V0에게 제공하니, 매우 만족스럽게 프론트를 생성해주는 것을 발견했습니다. 프롬프트만으로 시작하는 것보다 이미지를 제공하는 것이 훨씬 효과적이었습니다.

추가 개선사항 3부 이후 개선 작업들을 기록했습니다. 데이터베이스 구조 개선 배포 후 가장 먼저 체감한 문제는 확장성 부족이었습니다. 처음에는 채널에 카테고리 값을 enum으로 직접 넣었는데, 카테고리를 추가하거나 변경할 때마다 불편함이 컸습니다. 카테고리 테이블을 별도로 분리하면서 관리가 훨씬 수월해졌습니다. 영상 수집 로직의 함정 영상 수집 부분을 개선하려고 에이전트에게 계속 요청했더니 오히려 오류가 발생하는 상황이 반복됐습니다. 특히 사람처럼 불완전한 개선을 시도하다가 특정 채널의 최근 영상을 빼먹는 일이 자주 발생했습니다. 결국 모든 채널을 정상적으로 가져오는지 직접 검토하고 수정하는 과정을 거쳤습니다. 잘 안되는걸 파고들다가 코드가 꼬이는 쓸데 없이 사람이랑 비슷한 부분이 있다는걸 알게 되었습니다. 비용 최적화: Gemini로 전환 오디오 파일에서 스크립트를 추출하는 작업을 기존 서비스에서 Gemini로 변경했습니다. OpenAI만 API로 제공하는줄 알았는데 Gemini도 기본으로 제공해주고 있었습니다. 빠르게 Perplexity로 가격비교 요청 후 Gemini로 교체했습니다. 가격은 좀 더 저렴했고, 교체 과정도 생각보다 빨랐습니다. 속도도 조금 더 빨라진 것 같아(기분?) 만족스러운 결정이었습니다. 첫 공개와 반응 geeknews에서의 성과 감사하게도 geeknews에 공유했을 때 긍정적인 반응을 받았습니다. 하루 만에 1,300건의 방문과 60건의 가입이 있었습니다. 이후 다음날에는 400건 이상 방문해 마음속의 목표인 DAU 100을 2일간 만끽했습니다. 댓글에서 RSS XML 기능 추가 요청을 받았는데, 즉시 rss.xml 파일을 생성하고 새로운 피드가 추가될 때마다 자동 업데이트 되도록 설정 했습니다. https://shortv.replit.app/rss.xml 많은 응원 보내주신 geeknews 분들에게 감사 드립니다 :) Replit에서 제공하는 analytics는 간단히보기는 좋지만 분석할만큼 데이터를 제공하지 않습니다. 차후에 GA를 붙여야하지 않을까 생각됩니다.

2편에서 이어집니다. 추가 개선 사항 2부 이후에 자잘한 개선 작업들을 기록했습니다. 사용성 개선 및 기능 추가 + 모바일뷰 대응 배포 후 테스트를 하다 보니 모바일에서의 사용성 문제가 눈에 띄기 시작했습니다. 어짜피 모바일 웹브라우저에서 봐야 하기 때문에 간단한 모바일 사파리 PWA용 검색창 숨김 처리만 했습니다. + 슬라이드 스윕 액션 모션 추가 트랜딩 섹션의 슬라이드뷰(Carousel) 기능을 개선하는 과정에서 예상보다 세세한 부분을 잡아주지 못하는 Replit의 한계를 체감했습니다. 주요 이슈들: * 슬라이드 버튼에 영향을 받아 아이템 카드의 너비가 변경되는 문제 * 슬라이드 모션 후 카드가 정지하는 위치가 어긋나는 문제 7-8회 정도 수정 후에야 현재 상태로 합의할 수 있었습니다. 모바일뷰에서의 스윕 액션 모션 수정도 생각보다 만족스럽지 못했습니다. + 슬라이드 필터 추가 참고할 웹사이트와 코드를 첨부해서 요청했더니 이 부분은 의외로 쉽게 해결됐습니다. 기존 서비스를 레퍼런스로 제시하는 것의 효과를 다시 한 번 확인했습니다. 프롬프트 요약: * Substack의 슬라이드 필터 버튼과 동일하게 제작 * 슬라이드 필터 버튼 부분의 코드를 첨부 + 라이브 영상 배제 로직 추가 운영하다 보니 XML에 라이브 영상, 공개예정 영상 정보도 포함된다는 사실을 알게 됐습니다. 이런 영상들은 요약 대상이 아니기 때문에 필터링이 필요했습니다. Perplexity에게 물어보니 YouTube Data API를 통해 해결이 가능한 것으로 확인했고, YouTube Data API를 사용해서 등록된 일반 영상만 가져오도록 로직을 개선했습니다. + 채널 42개 추가 개인적으로 주로 시청하던 채널 외에 검색과 추천을 통해 다양한 분야를 고려해 채널을 추가했습니다. 이 과정에서 YouTube에서는 생각보다 '정보성'이라는 것이 애매모호한 경계라는 점을 깨달았습니다. 채널을 추가했다가 삭제하는 상황도 많았고, 지속적인 큐레이팅이 필요함을 느꼈습니다.

1편에서 이어집니다. 개선작업 배포하기 지난 글에서는 Replit을 기반으로 MVP를 만든 과정을 소개했습니다. 이후 몇 가지 개선작업을 진행하고 배포까지의 내용을 정리했습니다. UI 수정을 통해 사용성 개선 + 페이지 구조 개선 핵심 기능 구현을 완료하고 사용자 접근성을 고려한 수정을 진행 했습니다. 기존에 내가 수집한 피드는 나만 볼 수 있는 폐쇄적인 구조였다면, 지금은 공유해서 같이 볼 수 있는 페이지를 추가했습니다. 프롬프트 요약: * 기존 Home → Feed로 변경 * 새 Home 페이지는 추천 영상 전용 - upvote 1개 이상인 video만 출력 - 최신 추천 순 정렬 * 로그인 없이도 조회 가능 * 처음 접속 시 이 페이지로 바로 이동 결과적으로, 사용자에게 보여주는 첫 화면이 피드가 아니라 선별된 추천 콘텐츠로 바뀌면서, 사이트의 성격이 한층 더 명확해졌습니다. + 채널추가 버튼 추가 공개된 페이지가 생성되니 “다른 사용자의 선택을 동의”하는 행동이 있을 것이라 생각되었습니다. Upvote가 첫 번째 기능이었고, 채널추가가 두 번째 기능이라고 결론 내렸습니다. 프롬프트 요약: * upvote 옆에 동일한 스타일로 배치 * 클릭 시 사용자의 채널목록에 추가 및 관련영상 추가 * 이미 추가된 경우 버튼 비활성화 * 삭제는 채널관리 페이지에서 수행 이 기능은 영상 큐레이션 경험을 개선하면서도, 사용자의 활동 히스토리를 자연스럽게 쌓아주는 기반이 됩니다. + 트렌드 슬라이드 추가 새로운 홈페이지 상단에는 최근 인기 있는 영상을 모은 트렌딩 영역을 추가했습니다. 프롬프트 요약: * 조건: 최근 7일 이내 + upvote 많은 순 + 동률 시 조회수 기준 * 총 8개 카드, 4개씩 슬라이드 가능 * 부족할 경우 자리 비워둠 * 4개 이하면 슬라이드 버튼 비활성화

MGX.dev와 Lovable 다음으로 Replit을 사용한 기록입니다. 시작하면서 Replit 이번 프로젝트는 빠른 MVP 제작을 목표로 Replit을 사용했습니다. 과거 Replit의 창업스토리를 보고 프리티어로 간단한 프로젝트를 해본 적은 있었지만, 이번에는 꽤 본격적인 API 연동과 LLM 활용까지 진행해보게 됐습니다. Lovable을 한 번 더 결제할까 고민하다가 할인코드를 발견해서 바로 결제.. 주제 설정 기존에 했던 주제를 다시 하기는 싫어서 새로운 주제를 설정하고 시작했습니다.YouTube 요약 서비스 구축입니다. 이번 목표는 YouTube 요약 서비스 구축입니다.shortV라는 서비스를 만들었습니다. YouTube를 켜면, 본래 보려고 했던 영상은 뒤로하고 어느새 알고리즘의 늪에 빠져들곤 하죠. 저는 이런 '시간 낭비'에서 벗어나기 위해, 그리고 유익한 영상만 선별해서 빠르게 확인할 수 있도록 shortV라는 서비스를 만들었습니다. 프롬프트에 포함된 서비스 소개 "사용자가 지정한 YouTube 채널의 영상을 구독하여 AI 요약을 제공합니다. 영상을 보기 전에 프리뷰를 통해 보고 싶은 영상을 선별하고, 더 나아가 YouTube 플랫폼 자체에서 벗어날 수 있는 자유를 제공합니다." 타겟 및 목표 설정 shortV는 정보성 콘텐츠를 효율적으로 소비하고 싶은 분들을 위한 도구입니다. 영상 본문 스크립트를 기반으로 요약을 제공하며, 각 주제별 타임스탬프를 생성해 필요한 구간만 바로 확인할 수 있도록 하는 것이 목표입니다. 기존과 다르게 UI 디자인 시도

본 글은 작업 중 GPT와 채팅을 통해 기록된 내용을 기반으로 정리된 글 입니다. 웹 서비스를 처음부터 혼자 만들려는 시도는 언제나 흥미롭지만, 동시에 복잡하고 번거로운 작업이기도 합니다. 특히 프론트엔드, 백엔드, 인프라 등 다양한 기술 스택을 모두 직접 다뤄야 한다는 점에서, 개인 개발자나 초기 기획자에게는 높은 진입장벽이 존재합니다. 이러한 고민 속에서 최근 발견한 플랫폼이 바로 MGX.dev입니다. 이곳에서는 AI 기반 멀티 에이전트들이 실제 팀처럼 역할을 분담해 사용자의 요청에 따라 웹 서비스를 개발해 줍니다. 덕분에 기획에서 설계, 구현에 이르기까지 한결 수월하게 접근할 수 있었습니다. 이번 글에서는 제가 MGX.dev를 통해 시도한 프로젝트의 개요와 개발 과정, 그리고 느낀 점을 간단히 공유해 보겠습니다. 프로젝트 개요 제가 기획한 서비스는 다음과 같은 목표를 가지고 있습니다. "인사이트를 얻을 수 있는 아티클 기반의 RSS 피드 큐레이션 서비스" 신뢰할 수 있는 블로그 및 뉴스 소스를 직접 큐레이션 LLM을 활용해 각 콘텐츠의 핵심을 한국어와 영어로 3줄 요약 주요 내용을 항목 중심의 핵심정리 형태로 제공 자동 번역을 통해 언어의 장벽을 낮춤 사용자의 비판적 사고와 주체적인 판단을 돕는 정보 제공 이 프로젝트는 기본적인 RSS 리더에 AI 요약 기능과 언어 번역 기능을 결합한 형태로, 정보 과잉 시대 속에서 사용자가 빠르게 핵심만 파악하고 선택할 수 있도록 돕는 데 중점을 두고 있습니다. 핵심 기능 정의 버전 0.1 기준으로 다음과 같은 주요 기능을 설정했습니다: RSS 수집: 특정 웹사이트에서 RSS를 수집 저장 및 처리: 수집한 피드를 데이터베이스에 저장 LLM 요약: 각 피드에 대해 한국어/영어 3줄 요약 및 핵심정리 생성

본 글은 작업 중 Gemini와 채팅을 통해 기록된 내용을 기반으로 정리된 글 입니다. 최근 AI 개발 플랫폼인 Lovable을 활용해 RSS 기반 웹서비스를 제작한 경험을 공유합니다. Supabase, GitHub, OpenAI API까지 연동된 이 프로젝트는 단순한 사이드 프로젝트 그 이상으로, 최신 툴을 활용한 개발 자동화의 가능성을 보여주는 좋은 사례였습니다. 왜 Lovable인가? Lovable은 최신 AI 기반 개발도구로, 기존의 Cursor나 Windsurf에 비해 다음과 같은 강점을 갖습니다: Supabase·GitHub 직접 연동: 설정 과정을 자동화하여 개발자가 직접 복잡한 연결을 하지 않아도 됩니다. API 키, 테이블 설정, 배포 과정 모두 자동화됩니다. 낮은 진입장벽: 별도의 백엔드 지식 없이도 프로토타입 수준의 웹 서비스를 손쉽게 만들 수 있습니다. 최신 정보 기반의 자동 셋업: 이전 도구들이 갖고 있던 문서 부족 문제를 해결하며, Supabase 같은 플랫폼과의 통합을 원활하게 제공합니다. 개발 흐름 요약 1. 프로젝트 시작: 2분 만에 기본 웹서비스 UI 구현 Lovable을 실행하고 GitHub를 연결한 뒤, 프로젝트 생성과 동시에 기본적인 UI 구조가 자동으로 구성됩니다. 게시물 리스트 형태의 홈 화면이 설정되었고, 여기까지 걸린 시간은 단 2분이었습니다. 2. Supabase 연동 및 데이터 구조 생성 Supabase 프로젝트가 자동으로 생성되고, Lovable이 이를 자동으로 연결(기본적인 계정생성은 필요)합니다. 이후 Lovable이 자체적으로 RSS 데이터 저장용 테이블(SQL 기반)과 샘플 데이터를 자동 삽입하면서, 데이터베이스 구성까지 완료되었습니다. 이 부분이 저에게는 매우 매력적인 부분이었습니다. 기존에 Cursor, Windsurf를 사용할 때는 직접 설정을 진행해야 하는데 개발자가 아닌 저에게는 생각보다 허들이 있었습니다. 하지만 Lovable은 채팅만으로 Supabase와 DB설정까지 해결해주기 때문에 초보자에게 매우 큰 도움이 됩니다. 3. RSS 피드 연동 첫 프롬프트 요청으로 이미 기본 RSS 파싱 로직이 이미 준비되어 있었기 때문에, 단지 웹사이트 URL 3개만 입력하면 바로 피드를 가져올 수 있었습니다. 샘플 웹사이트: Paul Graham 블로그 , Sam Altman 블로그 , Flarup 블로그 여기서부터 실시간으로 Supabase에 피드를 저장하고, 웹 서비스에서 이를 출력하는 구조가 완성되었습니다.