Lovable 시리즈 - (2) 세팅/연동하기

🔧 본격 셋업하기

• Lovable에 기대할 수 있는 기능 범위는 어디까지인가?

• 해당 기능을 온전히 활용하려면 어떤 세팅이 필요할까?

• 러버블에서 노코드 기반 연동으로 기대할 수 있는 범위는
• 프론트엔드 구현, 데이터 저장/검색, 사용자 로그인/계정관리, API endpoint 관리, 배포 관리, 공동 협업 환경

• 러버블이 아직 미흡한 범위는,
• 실시간 연동

📏 비용, 도메인, 언어, 문서

• Lovable의 요금 구조는 아래와 같다. 기본적으로는 사용량 기반(Usage-Based) 과금이다.
• 사용한 만큼 지불하는 합리적인 구조

• 프로젝트 정보를 확인하면, 현재까지 사용량을 상세히 확인할 수 있다.

• 개발화면에서도 프로젝트명을 펼치면 현재 Credit이 얼마나 남았는지 계속 확인할 수 있다.

• 언제든 Custom 도메인을 등록할 수 있다.
• 도메인이 없어도, 누구나 접속가능한 임의 URL을 제공해준다.

• Knowledge 메뉴에서 프롬프트 작업에 대한 공통 지시사항을 등록할 수 있다.
• 예를들어, “무조건 한글로 답변을 제공해줘”
• 참고자료: Knowledge 이용가이드

• 그래도 기획문서는 필요하다. 역시, 노션으로 기획서나 User Story는 정리하는게 가장 무난할 것

개발환경: 소스코드, 데이터베이스, LLM

• Native로 온전한 연동이 가능한 서비스는 아래와 같다.
• Github, Supabase, Stripe, Custom domain

• Native 연동는 아니지만 검증된 연동 서비스는 대략 아래와 같다.
• Verified Integrations: Builder.io, Resend, OpenAI, Anthropic, ElevenLabs, Make 등

• 참고: Lovable의 연동서비스 종류 및 방법
 

• Supabase를 연동하여 Database를 사용한다.

• Supabase 연동의 주요 기능은 아래와 같다.
데이터베이스 (PostgreSQL)
• 완벽한 SQL 지원으로 앱 데이터를 저장하고 쿼리. Lovable은 프롬프트에 따라 필요한 테이블과 스키마를 자동으로 생성할 수 있다.
사용자 인증
• 사용자 가입, 로그인 및 접근 제어를 안전하게 관리해라. Lovable은 간단한 프롬프트만으로 앱에 미리 구축된 인증 흐름(이메일/비밀번호 등)을 추가할 수 있다.
파일 저장소
• Supabase Storage를 통해 이미지 또는 기타 파일을 업로드하고 제공해라. 사용자 프로필 사진, 업로드 또는 앱에서 처리해야 하는 모든 정적 미디어에 적합.
실시간 업데이트
• Supabase는 앱으로 실시간 데이터 변경 사항을 스트리밍할 수 있다. 이를 통해 모든 사용자를 위해 즉시 업데이트되는 실시간 채팅, 활동 피드 또는 공동 작업 대시보드와 같은 기능을 사용할 수 있다.
Edge Functions (서버리스)
• Supabase 인프라에서 사용자 지정 백엔드 로직(JavaScript/TypeScript)을 실행. Lovable은 이메일 보내기, 결제 처리 또는 외부 API와 통합과 같은 작업을 위해 이러한 기능을 생성하고 배포한다.

• 참고: supabase 연동 가이드
 

• Editcode 메뉴를 선택하면 Github 연동을 할 수 있다.

• Github를 연동하면, Lovable 편집 화면에서 “소스코드”를 직접 수정할 수 있다.

• Github 연동시 주요 기능
버전 기록 및 백업:
모든 코드는 Git으로 추적되므로 변경 사항을 검토하거나 이전 상태로 롤백할 수 있다. 모든 커밋은 GitHub에 저장되어 프로젝트의 외부 백업을 제공.
팀 협업:
코드는 GitHub에 보관되어 다른 개발자, 기여자가 쉽게 보고, 주석을 달고, 풀 리퀘스트를 통해 기여할 수 있다. 비기술적인 팀 구성원도 투명성을 위해 코드 기록을 볼 수 있다.
실시간 동기화:
Lovable은 GitHub 저장소와 자동으로 동기화. GitHub에 코드를 푸시하면 Lovable은 거의 즉시 해당 코드를 가져온다. Lovable에서 코드를 편집하면 해당 변경 사항을 GitHub에 푸시한다. 수동 복사 없이 항상 양쪽 모두에서 최신 코드를 유지할 수 있다.
워크플로 통합:
Lovable과 함께 GitHub의 도구(브랜치, 풀 리퀘스트, 이슈, CI/CD 등)를 사용. 예를 들어 코드가 병합되면 GitHub Actions를 통해 테스트를 실행하거나 앱을 배포하는 동시에 Lovable의 편집기 및 AI를 사용하여 기능을 계속 개발할 수 있다.
배포 유연성:
GitHub에 연결하면 자체 인프라 또는 원하는 플랫폼에서 앱을 호스팅할 수 있습니다. Lovable의 호스팅에 종속되지 않고 코드를 내보내 어디든 배포할 수 있다. (Lovable은 여전히 GitHub와 변경 사항을 동기화하므로 다른 곳에서 앱을 호스팅하더라도 Lovable에서 계속 편집할 수 있다)

• 참고: Github 연동 가이드

• Lovable 개발자문서

• Lovable AI: A Guide With Demo Project
 

마치며

• Lovable은 “the last piece of software”를 지향한다.
• 소프트웨어를 만드는 유일한 도구가 되고자 한다.

• v0, Replit, Blot, Cursor가 건재함에도, Lovable이 ‘가장 빠르게 성장하는 스타트업’으로 주목받는 이유는 무엇일까?
• 단순 텍스트 프롬프트(마치 chatgpt와 대화하듯이) + 시각적 에디팅만으로도 완결성 있는 앱을 만들 수 있음.
• GitHub 연동: 전문 개발자가 필요하면 GitHub에 접속해 세부 코드를 직접 볼 수 있고, 수정 사항이 실시간으로 Lovable에 반영됨.
• 오류 없이 끝까지: 로그인·결제·배포 등 서비스 운영에 필수적인 기능을 “AI가 알아서 완성해주고, 막힘이 최소화되도록” 튜닝.

즉, 비개발자에게 가장 친화적인 서비스이면서도 개발자에게도 가장 효율적으로 비개발자와 협업 할 수 있는 도구가 아닐지. 가장 효과적인 연동(supabase+github+figma)으로 최적의 웹빌드 환경을 제공한다.

Lovable

Build software products, using only a chat interface

https://lovable.dev/?via=proagent