Lovable 시리즈 - (1) Lovable, The Beginning

Proagent팀이 여러 AI 웹빌더를 검토한 과정, 그리고 Lovable을 선택하게된 배경을 상세히 설명합니다.

Agent Pro

Apr 30, 2025

Lovable 시리즈 - (1) Lovable, The Beginning

Contents

바이브코딩, 여정의 시작 선택, Lovable 💓📚Lovable 알아가기 ➡️다음 단계로..참고

💡

Lovable 시리즈! 첫번째 에피소드로, Proagent팀이 Lovable과 함께 MVP Product를 만든 과정을 생생하게 공유

바이브코딩, 여정의 시작

Proagent라는 “제품팀을 위한 AI 코칭 서비스”를 만들기로 하면서, Engineer인 Joon님과 바이브코딩이 가능한 AI tool 기반으로 웹서비스를 만들어보기로 하였다. 비즈니스를 책임질 웹서비스를 만들것도 아니었고, 각잡고 기획/디자인/개발을 할 상황도 아니었기 때문에, “알잘딱깔센” 웹빌더가 필요하던 참이었다.

당시 Joon은 Cursor와 같은 도구로 바이브코딩에 익숙해져 있었고, Product Manager인 나는 한창 쏟아지는 AI Prototyping 툴 소개 자료들을 보며, 직접 만들고 싶다는 생각이 차오르던 때였다.

Production까지 생각하면서 Product Manager와 Engineer가 함께 작업할 수 있는 바이브코딩 툴은 무엇이 있을까? 그렇게 우리는 Lovable, v0, Bolt, Replit과 같은 서비스를 살펴보기 시작했다.

선택, Lovable 💓

대표적인 AI 웹사이트 빌더 4총사 Blot/v0/Replit/Lovable 모두 아래와 같은 특징이 있다.

모두 비개발자도 사용 가능

결과물은 대부분 전문적이지만 다소 단조로움. 더 구체적인 프롬프트를 주면 나아질 가능성 있음

AI 환각 없음, 생성된 내용은 모두 논리적이고 적절함

모든 플랫폼에서 코드 확인 및 수정 가능, 개발 협업에 유리

비개발자가 간단히 웹사이트 프로토타입을 만드는 데는 모두 손색없는 것으로 평가받고 있다. 실제로 Bolt/v0/Lovable은 직접 사용해 봤을 때, 비개발자도 쉽게 시작할 수 있었고, 첫 결과물의 퀄리티도 대동소이하게 우수했다. 전문가들의 의견을 종합해보면, 장단점은 아래와 같다.

구분	Bolt	v0	Replit	Lovable
특징	유연한 디자인으로 빠른 프로토타입 제작	가장 우수한 사용자 경험과 기능 제공	코드 편집, 백엔드 개발 장점	쉬운 인터페이스, 콘텐츠 생성 탁월
단점	가장 간단하지만 결과물은 가장 미흡	화면 직접 수정이나 백엔드 연동 단점	UI 아쉽	개발환경 제한적

가장 참고가 되는 글은 A guide to AI prototyping for product managers인데(동일 프롬프트로 어떤 결과물이 나오는지도 다 비교), 그외 여러 전문가분들의 상세한 레퍼런스 자료들은 하단의 Reference 섹션을 참고하기를

ProAgent 팀이 나름의 기준을 가지고 검토한 멘탈모델은 아래와 같다.

1. 메인 사용자

Proagent를 만들어갈 메인 사용자는, 코드를 한번도 짜본적 없는 Jin이다. 노코드 툴로서 기본적인 웹사이트 최적화는 Jin이 할 수 있어야 한다. 개발자인 Joon보다는 Jin의 선택이 중요하다.

2. Production 환경 고려

인증, 회원관리 등을 위해 DB를 관리해야한다. 그리고 서비스내 LLM을 연동하는 등의 작업이 있기 때문에 백엔드/API 환경을 어느정도 고려해야한다.

추후에 정말 서비스 운영을 제대로 하기 위해(언젠가 AI 웹빌더는 버려야(?)할 것이기 때문에) 소스코드 관리도 Github으로 연동이 잘 되어야한다.

3. 컨셉

마치 개밥먹기처럼, Proagent 사이트를 만드는 과정 또한 Proagent의 메인 콘텐츠이다.

창업자, Product Manager들이 충분히 활용가능한 “Nocode” 플랫폼으로서 확실한 컨셉을 가져야한다.

4. 기타

비개발자, 창업자들에게 가장 핫하고 잘나가는 서비스

💬 참고로 우리가 나눴던 대화들의 일부다

“똑같은 프롬프트로 했는데 v0도 괜찮네요ㅎㅎ 프로토타입으로는 Lovable이 조금 더 정교하게 만들어지는것 같고, 개발로 바로이어지는건 v0가 확실히 유리하겠네요. 낼 한번 논의해보시죵” “일반적으로 채팅창 열고 그냥 시작하는데 v0도 prd 나 instruction 외부에서 정리하고 넣고 시작하니까 훨씬 결과가 좋네요. 이건 커서도 마찬가지에요” “네 근데 lovable 이 supabase 를 워낙 잘 붙여놨네요. 인증이나 디비 연동을 노코드로 쉽게 했어요. 다만 nextjs 가 아니라 bolt.new 같은것도 보긴해야할 듯” “네 근데 lovable 은 그냥 코드를 리액트로 만들고 있네요. 반면 볼트는 개발스택을 고르고 시작할 수 있고.. 둘 다 피그마 임포트도 지원하고 ㅎㅎ 좋은 세상이에요” “러버블은 메시지당 20센트에요. 길거나 짧거나 상관없이, 역시 프롬프트 … PRD가 중요하네요”

결론

결과적으로 Proagent팀은 Lovable을 선택했다.

AI로 비개발자가 가장 빠르게 풀스택 개발을 할수있는 도구라고 판단하였다.

무엇보다 비개발자가 바이브코딩을 잘 하기 위한, 쉬운 인터페이스와 콘텐츠를 잘 잡아주는 기능(만들어갈 화면들이 대부분 정보성 페이지 이므로)이 장점이었다.

supabase, github, figma 등 우리에게 꼭 필요한 연동은 굉장히 매끄럽게 구현이 되어 있었다.

Next.js 지원이 안되거나, DB/백엔드 연동에 한계가 있었지만 다행히 우리팀에는 큰 문제가 없었다.

그외 Lovable은 가장 최근에 출시된 핫한 서비스로서, 특이하게 유럽에서 가장 빠르게 성장하는 스타트업이라는 점도 흥미롭다.

📚Lovable 알아가기

그렇게 Lovable에 프로젝트를 생성하여 웹사이트 제작을 시작하였다.

첫 프롬프트는 아래와 같다.


Please create a website for AI Agents designed for Product Managers.

Webpage Title: Proagent
Sub-title: AI Professional Agent for Product Teams

The user stories for each feature are as follows:

- Users can view prompt guides tailored to specific goals or situations.
- Users can chat with the agent to get the desired output.
- Logged-in users can save their results and continue to reuse and improve them.
- Includes quality validation and feedback features.
- Users can explore templates and galleries for workflow automation.
- Users can check out real use cases like Vibe-code within internal SaaS tools and the MCP environment.

Feature List:

- Market Research Agent, Customer VOC Analysis Agent, Competitor Benchmarking Agent, 
PRD Writing Agent, Prototyping Agent, Backlog (User Story) Agent, Design Agent, UX Writing Agent

Please refer to the structure of the following site as a reference:
https://www.chatprd.ai/

The tone and style should feel professional, with a blue-toned color palette.