AI와 함께하는 개발 일지

추가 개선사항 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에 피드를 저장하고, 웹 서비스에서 이를 출력하는 구조가 완성되었습니다.