GPT와 Lovable로 혼자 3시간만에 MVP 만들기

안녕하세요! 솔로 비즈니스 나이트입니다💫

오늘은 지난번에 이어 ChatGPT와 Lovable을 활용한 바이브 코딩 체험기 2탄을 준비해봤어요. 😉

저는 뼛속까지 문과출신, 비개발자입니다. 저 같은 비개발자 출신 1인 창업가들이 Lovable로 어디까지 제품을 개발할 수 있을지, 직접 Lovable 무료 버전을 사용해 MVP 만들기에 도전했어요! 지난번에는 ChatGPT와 함께 서비스를 기획하고, 프롬프트를 만들어 Lovable에서 MVP 초안을 확인하는 단계까지 여러분께 공유드렸었죠.

(👉 지난 이야기가 궁금하신 분들은 비개발자 출신 솔비나가 직접 사용해본 Lovable 이용 후기 1탄 (30분 만에 MVP ver.01 만들기)을 확인해보세요!)

결과는… 약 2시간 반 만에 MVP 완성에 성공했습니다!🚀
작업은 퇴근 후 저녁 시간을 활용해 이틀에 걸쳐 진행했는데요, 초기 ver.01 제작에 30분이 걸렸으니, 총 3시간 정도 투자한 셈이네요.

완성된 <퇴근밥 뭐 먹지>의 MVP는 아래 링크를 통해 확인하실 수 있습니다.
👉 퇴근밥 뭐 먹지

물론 가벼운 테스트용으로 만든 서비스라 여러모로 부족한 점이 많지만, 직접 바이브 코딩에 뛰어들며 정말 많은 걸 배울 수 있었는데요, 비개발자 솔비나의 다소 험난했던 첫 바이브 코딩 체험기 2탄, 지금부터 시작합니다!

15초 미리보기 ⏰

• ChatGPT와 메뉴 추천 데이터 만들기
• 백엔드 서비스, Supabase를 Lovable에 연동하기
• 데이터 적용 & 배포 (feat. 버그 다량 출몰)
• 첫 바이브 코딩을 하며 느낀 점 - 바이브 코딩의 가능성과 한계에 대하여

비개발자 출신 솔비나의 Lovable 바이브 코딩 체험기 2탄 (3시간 만에 MVP 만들기)

[지난 이야기 요약]

STEP 01. 아이디어 떠올리기 (5분 소요) : 퇴근길 기분과 날씨, 그리고 다이어트 여부를 고려해 퇴근밥을 추천해주는 도구, <퇴근밥 뭐 먹지>를 개발하기로 결심.

STEP 02. ChatGPT와 함께 아이디어를 기획안으로! (약 10분 소요)

STEP 03. ChatGPT로 Lovable용 프롬프트 제작 후 Lovable에 입력 → MVP ver.01 확인 (약 5분 소요)

STEP 04. Lovable에서 1차 수정 보완 (약 10분) : Lovable 무료 크레딧이 5회라 수정에 제한이 있었음.

STEP 05. ChatGPT와 함께 데이터(csv 파일) 만들기 (약 30분)

앞서 Lovable에서 MVP ver.01을 확인했을 때, 추천되는 음식의 종류가 너무 제한적이었어요. 그래서 기분, 날씨, 다이어트 여부에 따라 어떤 음식을 추천할지 데이터를 정리해달라고 아래와 같이 ChatGPT에게 요청했습니다.

GPT가 데이터를 잘 만들어줬지만, 동일한 종류의 메뉴를 반복해서 추천하는 오류가 있었어요. 다양한 메뉴로 만들어 달라고 몇 차례 더 보챘습니다. 결국 원하는 수준의 데이터를 CSV 파일로 확보할 수 있었어요.

STEP 06. Supabase 가입 및 Lovable 연동 (약 15분)

이제 데이터가 준비되었으니, Lovable에 Supabase를 연결해 데이터를 백엔드에 적용하는 작업을 진행할 차례입니다. Supabase는 웹/모바일 앱 개발을 위한 백엔드 서비스인데요, Lovable과 통합 기능을 제공하기 때문에 매우 간편하게 백엔드 기능을 추가할 수 있어요.

우선 Supabase에 접속해 무료 플랜으로 회원가입하고, 다음과 같이 새로운 프로젝트를 생성했습니다.

이후 다시 Lovable로 돌아와 상단에 있는 Supabase 로고(초록색 번개 모양)를 눌러 Supabase 연결을 시도했어요. 미리 생성해둔 Supabase의 프로젝트와 조직을 선택한 뒤 연결을 승인하니, 바로 연동이 완료된 것을 확인할 수 있었습니다. 이 단계까지는 무리 없이 쉽게 따라갈 수 있었어요! 👍🏻

STEP 07. Lovable에 데이터 적용하기 (CSV → JSON 변환) (약 30분)

이 단계부터 본격적인 고난이 시작되었습니다. 😭 데이터 적용을 위해 CSV 파일을 JSON 형태로 변환한 뒤 Lovable 프롬프트에 입력하자, Lovable이 다음과 같은 두 가지 질문을 던졌어요.

1. Lovable이 제안하는 구조로 데이터를 다시 만들어줄 수 있나요?
2. 날씨와 기분 아이콘으로 어떤 이미지를 사용할지 알려주세요.

2번 질문은 어렵지 않게 답변할 수 있었고, 1번 질문은 조금 애를 먹었지만 GPT의 도움을 받아 다시 JSON을 만들어 다음과 같이 전달했습니다.

다행히도, Lovable은 날씨와 기분 아이콘을 바로 업데이트해줬습니다. 그리고 제가 전달한 JSON 데이터를 Supabase에 이전하겠다고 안내하며 DB 테이블 생성을 위한 명령어도 함께 던져줬어요!

STEP 08. Supabase를 통한 데이터 DB 연결 시도 실패 (약 1시간)

다시 Supabase로 돌아와 SQL 에디터에 Lovable이 제공한 코드를 입력하고 실행해 보았어요!

Supabase에 테이블이 잘 생성된 것은 확인했습니다.

그러나 데이터를 입력하기 위해 테이블 에디터에서 직접 만든 CSV 파일을 업로드하려고 하자 계속 오류가 발생했어요. 😭

제가 만든 CSV 파일의 구조가 Lovable에서 만들어준 테이블 형태와 맞지 않아 적용이 제대로 안 되는 느낌이었습니다. Lovable에게 해결 방법을 묻고 싶었지만, 무료 버전이라 크레딧이 제한되어 있어 충분한 대화를 하기가 어려웠어요.

지금까지 데이터를 만들고 적용하는 모든 단계(CSV 파일 생성 → JSON으로 변환 → Supabase에 테이블 생성 → 테이블에 데이터 삽입)에서 계속 오류가 있었는데요, 데이터를 만드는 초기 단계부터 Lovable과 함께 진행했다면 이런 문제는 덜하지 않았을까 싶었습니다.

STEP 09. Lovable을 통해 데이터 입력 및 배포 (약 15분)

결국, Supabase 연동 없이 진행하기로 결정했습니다.

로그인이 필요하거나 고객 데이터를 수집하는 복잡한 서비스가 아니기 때문에 굳이 백엔드를 연결할 필요는 없다고 판단했어요. Lovable로 돌아가 Supabase 없이, 기존에 입력한 데이터만으로 작동하도록 수정해 달라고 요청했습니다.

Lovable이 코드에 포함된 데이터만을 기반으로 동작하도록 바로 수정해주었고, 프리뷰 화면에서 문제없이 작동하는 것을 확인할 수 있었습니다! 이후 변경된 시스템 내에서 문제가 없도록 불필요한 기능(다른 메뉴 조합 추천)을 삭제했어요.

이제, 마지막 배포 단계만 남았네요.

Lovable의 좌측 상단에 있는 [Publish] 버튼을 클릭하면 바로 배포할 수 있습니다. 커스텀 도메인을 적용할 수도 있지만, 이는 유료 플랜에서만 가능하기 때문에 Lovable을 기반으로 배포했어요.

약간의 우여곡절이 있었지만, 그렇게 약 3시간 만에 <퇴근밥 뭐 먹지?>의 MVP 구축을 마칠 수 있었습니다.

테스트 용도로 시작한 프로젝트라 기획이나 기능 면에서 부족한 점이 많지만(어딘가 여전히 발견 못한 버그가 숨어있을 것 같습니다..🫠), Lovable 덕분에 코딩을 전혀 모르는 제가 혼자서 몇 시간 만에 원하는 서비스의 형태를 확인할 수 있었다는 점에서 매우 의미 있는 경험이었습니다.

그럼, 비개발자인 제가 처음으로 바이브 코딩을 경험하며 느낀 점을 에필로그를 통해 공유드리며 글을 마치겠습니다. 오늘도 읽어주셔서 감사합니다!

✏️ 에필로그 (바이브 코딩의 가능성과 한계에 대하여 with Lovable)

[가능성 😀]

📍 코딩 없이도 MVP 정도는 아주 빠르게 만들수 있어요!
서비스 구조가 복잡한 것이 아니라면, 충분히 구현 가능합니다. 첫 시작단계에서 프롬프트 작성이 어렵게 느껴진다면 ChatGPT에게 도움을 요청해 보세요. GPT가 작성해준 프롬프트를 바탕으로 Lovable이 비교적 오류 없이 잘 생성해주는 걸 확인할 수 있었습니다. 디자인 관련해서도 특별한 지시 없이도 Lovable이 적당히 UI를 구성해줘서 편리했어요. 1인 창업가들에게 바이브 코딩은 MVP 단계에서 정말 매력적인 대안이 될 수 있지 않을까 싶습니다.

📍 이제는 아이디어와 추진력의 싸움입니다.
바이브 코딩 덕분에 제품 개발의 진입장벽이 낮아지면서, '어떤 문제를 어떻게 해결할 수 있는지' 창업가의 독창적인 아이디어와 인사이트가 성공의 핵심이 되는 시대가 된 것 같아요. 제품 아이디어는 있으나 구현에서 막막함을 느끼는 분들에게, 바이브 코딩은 훌륭한 출발점이 되어줄 수 있을듯 합니다.

[한계 🫠]

📍 과연 실제 상품화 가능한 수준까지 바이브 코딩으로 구현할 수 있을까?
GPT도 Lovable도 완벽하진 않습니다. 개발 지식이 없다 보니 Lovable이나 Supabase에서 버그가 생겼을 때 해결 방법을 몰라 당황스러웠어요. MVP 수준은 괜찮지만, 결제, 로그인, 구독 시스템이 들어간 보다 정교한 서비스 개발은 아직 바이브 코딩만으로는 어려워보였습니다. 특히 데이터베이스 설계나 백엔드 연동은 비개발자에게 정말 어렵게 느껴지더라고요. 😭
결국 좀 더 본격적인 서비스를 만들기 위해서는 최소한의 개발 공부는 필요하다고 느꼈습니다. 또한 Lovable 외에도 Cursor, V0 등 다양한 도구를 비교하며 나에게 맞는 바이브 코딩 방식을 찾아가는 노력도 필요할 것 같아요. 세상에 쉬운건 없네요...🫠

📍 무료 버전에는 명확한 한계가 있어요.
무료 버전은 Lovable의 기능을 체험해보는 용도에는 충분하지만, 실제 제품 개발에는 유료 결제가 거의 필수라고 느꼈습니다.이번에 GPT와 Lovable을 넘나들며 작업했지만, GPT가 생성한 데이터가 Lovable이나 Supabase와 호환되지 않아 오류가 자주 발생했거든요. 처음부터 Lovable 유료 플랜을 사용하며 시작했다면 이런 문제는 훨씬 줄었을지도 모르겠습니다. 😢