AI와 함께하는 개발 일지

Replit으로 MVP 제작: YouTube 요약 서비스 #2
1편에서 이어집니다. 개선작업 배포하기 지난 글에서는 Replit을 기반으로 MVP를 만든 과정을 소개했습니다. 이후 몇 가지 개선작업을 진행하고 배포까지의 내용을 정리했습니다. UI 수정을 통해 사용성 개선 + 페이지 구조 개선 핵심 기능 구현을 완료하고 사용자 접근성을 고려한 수정을 진행 했습니다. 기존에 내가 수집한 피드는 나만 볼 수 있는 폐쇄적인 구조였다면, 지금은 공유해서 같이 볼 수 있는 페이지를 추가했습니다. 프롬프트 요약: * 기존 Home → Feed로 변경 * 새 Home 페이지는 추천 영상 전용 - upvote 1개 이상인 video만 출력 - 최신 추천 순 정렬 * 로그인 없이도 조회 가능 * 처음 접속 시 이 페이지로 바로 이동 결과적으로, 사용자에게 보여주는 첫 화면이 피드가 아니라 선별된 추천 콘텐츠로 바뀌면서, 사이트의 성격이 한층 더 명확해졌습니다. + 채널추가 버튼 추가 공개된 페이지가 생성되니 “다른 사용자의 선택을 동의”하는 행동이 있을 것이라 생각되었습니다. Upvote가 첫 번째 기능이었고, 채널추가가 두 번째 기능이라고 결론 내렸습니다. 프롬프트 요약: * upvote 옆에 동일한 스타일로 배치 * 클릭 시 사용자의 채널목록에 추가 및 관련영상 추가 * 이미 추가된 경우 버튼 비활성화 * 삭제는 채널관리 페이지에서 수행 이 기능은 영상 큐레이션 경험을 개선하면서도, 사용자의 활동 히스토리를 자연스럽게 쌓아주는 기반이 됩니다. + 트렌드 슬라이드 추가 새로운 홈페이지 상단에는 최근 인기 있는 영상을 모은 트렌딩 영역을 추가했습니다. 프롬프트 요약: * 조건: 최근 7일 이내 + upvote 많은 순 + 동률 시 조회수 기준 * 총 8개 카드, 4개씩 슬라이드 가능 * 부족할 경우 자리 비워둠 * 4개 이하면 슬라이드 버튼 비활성화
  • Pokute
Replit으로 MVP 제작: YouTube 요약 서비스 #1
MGX.dev와 Lovable 다음으로 Replit을 사용한 기록입니다. 시작하면서 Replit 이번 프로젝트는 빠른 MVP 제작을 목표로 Replit을 사용했습니다. 과거 Replit의 창업스토리를 보고 프리티어로 간단한 프로젝트를 해본 적은 있었지만, 이번에는 꽤 본격적인 API 연동과 LLM 활용까지 진행해보게 됐습니다. Lovable을 한 번 더 결제할까 고민하다가 할인코드를 발견해서 바로 결제.. 주제 설정 기존에 했던 주제를 다시 하기는 싫어서 새로운 주제를 설정하고 시작했습니다.YouTube 요약 서비스 구축입니다. 이번 목표는 YouTube 요약 서비스 구축입니다.shortV라는 서비스를 만들었습니다. YouTube를 켜면, 본래 보려고 했던 영상은 뒤로하고 어느새 알고리즘의 늪에 빠져들곤 하죠. 저는 이런 '시간 낭비'에서 벗어나기 위해, 그리고 유익한 영상만 선별해서 빠르게 확인할 수 있도록 shortV라는 서비스를 만들었습니다. 프롬프트에 포함된 서비스 소개 "사용자가 지정한 YouTube 채널의 영상을 구독하여 AI 요약을 제공합니다. 영상을 보기 전에 프리뷰를 통해 보고 싶은 영상을 선별하고, 더 나아가 YouTube 플랫폼 자체에서 벗어날 수 있는 자유를 제공합니다." 타겟 및 목표 설정 shortV는 정보성 콘텐츠를 효율적으로 소비하고 싶은 분들을 위한 도구입니다. 영상 본문 스크립트를 기반으로 요약을 제공하며, 각 주제별 타임스탬프를 생성해 필요한 구간만 바로 확인할 수 있도록 하는 것이 목표입니다. 기존과 다르게 UI 디자인 시도
  • Pokute
MGX.dev로 바이브코딩 미완성 기록
본 글은 작업 중 GPT와 채팅을 통해 기록된 내용을 기반으로 정리된 글 입니다. 웹 서비스를 처음부터 혼자 만들려는 시도는 언제나 흥미롭지만, 동시에 복잡하고 번거로운 작업이기도 합니다. 특히 프론트엔드, 백엔드, 인프라 등 다양한 기술 스택을 모두 직접 다뤄야 한다는 점에서, 개인 개발자나 초기 기획자에게는 높은 진입장벽이 존재합니다. 이러한 고민 속에서 최근 발견한 플랫폼이 바로 MGX.dev입니다. 이곳에서는 AI 기반 멀티 에이전트들이 실제 팀처럼 역할을 분담해 사용자의 요청에 따라 웹 서비스를 개발해 줍니다. 덕분에 기획에서 설계, 구현에 이르기까지 한결 수월하게 접근할 수 있었습니다. 이번 글에서는 제가 MGX.dev를 통해 시도한 프로젝트의 개요와 개발 과정, 그리고 느낀 점을 간단히 공유해 보겠습니다. 프로젝트 개요 제가 기획한 서비스는 다음과 같은 목표를 가지고 있습니다. "인사이트를 얻을 수 있는 아티클 기반의 RSS 피드 큐레이션 서비스" 신뢰할 수 있는 블로그 및 뉴스 소스를 직접 큐레이션 LLM을 활용해 각 콘텐츠의 핵심을 한국어와 영어로 3줄 요약 주요 내용을 항목 중심의 핵심정리 형태로 제공 자동 번역을 통해 언어의 장벽을 낮춤 사용자의 비판적 사고와 주체적인 판단을 돕는 정보 제공 이 프로젝트는 기본적인 RSS 리더에 AI 요약 기능과 언어 번역 기능을 결합한 형태로, 정보 과잉 시대 속에서 사용자가 빠르게 핵심만 파악하고 선택할 수 있도록 돕는 데 중점을 두고 있습니다. 핵심 기능 정의 버전 0.1 기준으로 다음과 같은 주요 기능을 설정했습니다: RSS 수집: 특정 웹사이트에서 RSS를 수집 저장 및 처리: 수집한 피드를 데이터베이스에 저장 LLM 요약: 각 피드에 대해 한국어/영어 3줄 요약 및 핵심정리 생성
  • Pokute
Lovable로 시작하는 MVP 제작기
본 글은 작업 중 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에 피드를 저장하고, 웹 서비스에서 이를 출력하는 구조가 완성되었습니다.
  • Pokute