# Lovable로 시작하는 MVP 제작기

![SRC From: [https://lovable.dev/](https://lovable.dev/)](https://upload.cafenono.com/image/slashpagePost/20250606/215128_v0zaSJt9d0NqTFFNDM?q=80&s=1280x180&t=outside&f=webp)

> 본 글은 작업 중 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설정까지 해결해주기 때문에 초보자에게 매우 큰 도움이 됩니다.

![DB의 CRUD가 필요할 때 자동으로 SQL을 작성해주는 모습](https://upload.cafenono.com/image/slashpagePost/20250606/215401_caHDgtD7zH8XHTrQkS?q=80&s=1280x180&t=outside&f=webp)

### 3. RSS 피드 연동

첫 프롬프트 요청으로 이미 기본 RSS 파싱 로직이 이미 준비되어 있었기 때문에, 단지 웹사이트 URL 3개만 입력하면 바로 피드를 가져올 수 있었습니다.

- 샘플 웹사이트: [Paul Graham 블로그](https://www.paulgraham.com/articles.html) , [Sam Altman 블로그](https://blog.samaltman.com/) , [Flarup 블로그](https://www.flarup.email/)

여기서부터 실시간으로 Supabase에 피드를 저장하고, 웹 서비스에서 이를 출력하는 구조가 완성되었습니다.

### 4. 최신 글만 필터링

데이터 양이 많아지면서 최근 3개의 피드만 출력하도록 로직을 요청했고, Lovable이 자동으로 ORDER BY 및 LIMIT 조건을 포함한 쿼리를 적용해 업데이트했습니다.

> 여기에서 부터 로직의 중요성을 인지하게 되었습니다. 새로운 소스를 추가할 때 샘플로 최근 3개 피드만 추가하길 바랬는데 “전달 오류+러프한 로직”으로 자동 수집도 3개씩 가져오게 된 것 입니다.

## 예외 처리와 디버깅

3개의 웹사이트 중 2곳에서 피드를 제대로 불러오지 못하는 문제가 발생했는데, 이는 각 사이트의 RSS 구조 차이 때문이었습니다. 특히 .html로 끝나는 URL이 RSS가 아닌 일반 HTML 페이지인 경우가 많아, Lovable이 이를 RSS로 인식하지 못하는 경우도 있었습니다.

Lovable은 이 상황에서 오류 로그와 수정 옵션을 함께 제공해 디버깅을 도왔으며, 일부 URL은 수동 조정이 필요했습니다. 이런 점은 완전 자동화 도구라도 여전히 사람이 개입해야 하는 부분이 존재함을 보여주는 좋은 예였습니다.

> 하지만 아직까지 모든 웹사이트를 모두 해결하지 못했습니다..

## OpenAI API 연동으로 자동 요약 기능까지

추가 기능으로 OpenAI API를 활용한 피드 자동 요약 기능도 구현했습니다.Lovable 내부에서 API 키를 입력하면 Supabase에 자동 저장되고, 이후 RSS 피드 본문을 요약하는 AI 기능까지 연동이 완료되었습니다.

> 개선 작업 도중 API를 중복으로 호출하게 된다거나 리프레시 할 때 마다 호출하는 구조가 되어 DB에 요약 결과를 업데이트 하고 웹페이지 출력 시 항상 DB에서만 가져오게 변경했습니다. 또한 프롬프트를 코드 상에서 수정하기 불편해서 DB에 프롬프트용 테이블을 생성하여 직접 수정하기 편하게 변경했습니다.

![개선 전 후의 극적인 토큰 사용량 변화..](https://upload.cafenono.com/image/slashpagePost/20250606/215641_TVlK3Ov2yYg4Py7f2B?q=80&s=1280x180&t=outside&f=webp)

---

## 중간 결산

### 1. 자원사용량

현재까지 산출물: [https://digest-chair.lovable.app/](https://digest-chair.lovable.app/)

- 1일 차 소모자원: 5시간, 87크래딧(Pro 기본이 100크래딧/월)

- 이후 13+10 크래딧(매일 무료 5크래딧 제공)을 사용해서 디버깅 중

- 아직도 피드를 못가져오는 웹사이트가 많음

- Hacker News는 피드를 제대로 가져오지 못함

### 2. 인사이트

이 프로젝트는 AI 개발도구가 얼마나 실질적인 개발 생산성을 높일 수 있는지를 실감하게 해줬지만, 다른 LLM 서비스와 동일한 이슈를 확인했습니다.

Lovable을 통해 얻은 가장 큰 인사이트는 다음과 같습니다:

- **아이디어 구현 속도가 비약적으로 빨라진다.** MVP 수준 구축은 1~8시간 이내로 가능할 것으로 예상됩니다. 디자인, DB 구성도 직접 제어해주기 때문에 더 시간을 단축할 수 있습니다.

- **개발의 난이도보다 기획과 콘텐츠의 중요성이 커진다.** 저는 첫 프롬프트에서 꽤나 상세하게(1920자) 작업내용을 요청했습니다. 대부분 UI와 주요기능, 웹페이지 구조에 대한 것이었습니다. 덕분에 첫 요청 후 2분 만에 기본적인 서비스 구조를 완성할 수 있었습니다.

- **잘 요청해야 잘 만들어 준다.** GPT와 대화와 동일하지만 명확한 요구사항 전달이 필수입니다. 앞서 언급한 로직 부분은 비개발자가 알기에는 어려운 부분입니다. 버튼을 클릭하면 안보이는 것에서 어떤 일이 일어나는지 알 필요가 없기 때문이죠. 저는 비개발자이지만 전공자 이기 때문에 기본적인 구조와 로직을 알고 있습니다. 이 차이는 기능 하나를 구현할 때 10크래딧 이상의 차이를 발생시킵니다.

### 3. 사용 후 생각

- 약 3-5만원에 MVP를 제작한다고 하면 기존에 비해 매우 저렴한 비용이라고 생각합니다. 이 강력한 도구는 앱스토어가 열리면서 수많은 앱이 제작되었던 것 처럼, 다양한 애플리케이션이 생산되는 시작점이라고 생각됩니다. 

- 제가 개발에 대한 공부를 좀 더 한다면 Lovable로 프로젝트를 시작하고 Github에서 코드를 가져와 Cursor나 Windsurf로 작업할 것 같습니다.

For the site tree, see the [root Markdown](https://slashpage.com/dogma13.md).