Lovable 완전 설치 가이드: GitHub 연동부터 Supabase 백엔드 자동 구성, 커스텀 도메인 배포까지
Lovable 완전 설치 가이드 — AI 풀스택 앱을 처음부터 배포까지
Lovable은 자연어 프롬프트만으로 풀스택 웹 애플리케이션을 생성하는 AI 개발 플랫폼입니다. React + TypeScript 프론트엔드, Supabase 백엔드, 그리고 원클릭 배포까지 하나의 워크플로우로 통합되어 있어 코드를 직접 작성하지 않아도 프로덕션급 앱을 만들 수 있습니다. 이 가이드에서는 계정 생성부터 커스텀 도메인 배포까지 전 과정을 단계별로 안내합니다.
1단계: Lovable 계정 생성 및 프로젝트 시작
- 회원가입:
lovable.dev에 접속하여 GitHub 계정 또는 Google 계정으로 로그인합니다.- 새 프로젝트 생성: 대시보드에서 “New Project” 버튼을 클릭합니다.- 프롬프트 입력: 자연어로 만들고 싶은 앱을 설명합니다.프롬프트 예시:사용자 인증이 있는 할 일 관리 앱을 만들어줘. 로그인/회원가입 페이지, 할 일 CRUD 기능, 완료 상태 토글, 그리고 다크모드를 지원해야 해. Supabase를 백엔드로 사용해줘.Lovable이 프롬프트를 분석하여 자동으로 프로젝트 구조, UI 컴포넌트, 라우팅, 데이터 모델을 생성합니다. 생성된 코드는 실시간 미리보기 창에서 즉시 확인할 수 있습니다.
2단계: GitHub 저장소 연동
생성된 코드를 GitHub에 연결하면 버전 관리와 협업이 가능해집니다.
- 프로젝트 편집 화면 상단의 GitHub 아이콘을 클릭합니다.- *“Connect to GitHub”*를 선택하고 GitHub OAuth 인증을 완료합니다.- 새 저장소 이름을 입력하거나 기존 저장소를 선택합니다.- *“Create Repository”*를 클릭하면 자동으로 코드가 푸시됩니다.연동 후 로컬 환경에서 코드를 수정할 수도 있습니다:
git clone https://github.com/YOUR_USERNAME/your-lovable-project.git cd your-lovable-project npm install npm run dev로컬에서 수정한 코드를 GitHub에 푸시하면 Lovable 에디터에도 자동 반영됩니다. 반대로 Lovable에서 프롬프트로 수정한 내용도 GitHub 저장소에 커밋됩니다.
3단계: Supabase 백엔드 자동 구성
Lovable은 Supabase와 네이티브 통합되어 있어 데이터베이스, 인증, 스토리지를 자동으로 설정합니다.
- 프로젝트 편집 화면에서 왼쪽 사이드바의 Supabase 아이콘(초록색 데이터베이스 아이콘)을 클릭합니다.- *“Connect Supabase”*를 클릭하여 Supabase 계정을 연결합니다.- 새 Supabase 프로젝트가 자동 생성되거나, 기존 프로젝트를 선택할 수 있습니다.- Lovable이 앱에 필요한 테이블, RLS(Row Level Security) 정책, Edge Function을 자동으로 생성합니다.자동 생성되는 Supabase 설정 예시:
— Lovable이 자동 생성하는 SQL 마이그레이션 예시 CREATE TABLE public.todos ( id UUID DEFAULT gen_random_uuid() PRIMARY KEY, user_id UUID REFERENCES auth.users(id) ON DELETE CASCADE, title TEXT NOT NULL, completed BOOLEAN DEFAULT false, created_at TIMESTAMPTZ DEFAULT now() );
ALTER TABLE public.todos ENABLE ROW LEVEL SECURITY;
CREATE POLICY “Users can view own todos”
ON public.todos FOR SELECT
USING (auth.uid() = user_id);
CREATE POLICY “Users can insert own todos”
ON public.todos FOR INSERT
WITH CHECK (auth.uid() = user_id);
CREATE POLICY “Users can update own todos”
ON public.todos FOR UPDATE
USING (auth.uid() = user_id);
CREATE POLICY “Users can delete own todos”
ON public.todos FOR DELETE
USING (auth.uid() = user_id);
프론트엔드 코드에서는 Supabase 클라이언트가 자동으로 구성됩니다:
// src/integrations/supabase/client.ts (자동 생성)
import { createClient } from ‘@supabase/supabase-js’;
const SUPABASE_URL = “https://YOUR_PROJECT_ID.supabase.co”;
const SUPABASE_ANON_KEY = “YOUR_ANON_KEY”;
export const supabase = createClient(SUPABASE_URL, SUPABASE_ANON_KEY);
4단계: 앱 기능 확장 및 반복 수정
Lovable의 핵심 강점은 대화형 반복 수정입니다. 채팅창에 자연어로 수정 요청을 입력하면 코드가 즉시 업데이트됩니다.
// 수정 프롬프트 예시들:
"할 일 항목에 우선순위(높음/중간/낮음) 필드를 추가해줘"
"메인 페이지에 완료율을 보여주는 대시보드 차트를 추가해줘"
"모바일 반응형 레이아웃을 개선해줘"
"Google OAuth 로그인을 추가해줘"
각 수정은 별도의 Git 커밋으로 기록되어 언제든 이전 버전으로 롤백할 수 있습니다.
5단계: 커스텀 도메인으로 배포
Lovable은 기본적으로 *.lovable.app 서브도메인으로 앱을 자동 배포합니다. 커스텀 도메인을 연결하려면 다음 단계를 따르세요:
- 프로젝트 상단 메뉴에서 **“Share” → “Custom Domain”**을 선택합니다.- 사용할 도메인을 입력합니다 (예:
app.yourdomain.com).- 표시되는 DNS 레코드를 도메인 관리자 패널에 추가합니다:
- DNS 전파를 기다립니다 (보통 수 분에서 최대 48시간).- SSL 인증서가 자동으로 프로비저닝됩니다.배포 상태는 프로젝트 대시보드의 “Deployments” 탭에서 확인할 수 있습니다.타입 호스트 값 CNAME app cname.lovable.app
Pro Tips — 파워 유저를 위한 고급 활용법
- 프롬프트 체이닝: 복잡한 기능은 한 번에 요청하지 말고 단계별로 나누어 요청하세요. 예를 들어 “먼저 데이터 모델을 설계해줘” → “이제 UI를 만들어줘” → “API 연동을 해줘” 순서로 진행합니다.- Supabase Edge Functions 활용: 서버사이드 로직이 필요하면 “Supabase Edge Function으로 이메일 발송 기능을 만들어줘”처럼 명시적으로 요청하세요.- 환경 변수 관리: 프로젝트 설정 → Environment Variables에서
STRIPE_SECRET_KEY등 민감한 값을 안전하게 관리할 수 있습니다. 코드에 직접 하드코딩하지 마세요.- 브랜치 전략: GitHub 연동 후 feature 브랜치를 생성하여 실험적 기능을 별도로 개발하고, 검증 후 main에 머지하세요.- TypeScript 타입 자동 생성: Supabase 연동 시 데이터베이스 스키마 기반 TypeScript 타입이src/integrations/supabase/types.ts에 자동 생성됩니다. 이를 활용하면 타입 안전한 쿼리를 작성할 수 있습니다.
Troubleshooting — 자주 발생하는 문제 해결
| 증상 | 원인 | 해결 방법 |
|---|---|---|
| Supabase 연결 실패 | 프로젝트 URL 또는 API 키 불일치 | Supabase 대시보드에서 Project URL과 anon key를 확인하고 Lovable 설정에서 재연결하세요. |
| GitHub 푸시 충돌 | 로컬과 Lovable에서 동시에 수정 | git pull --rebase origin main으로 원격 변경사항을 먼저 반영한 뒤 푸시하세요. |
| 커스텀 도메인 미작동 | DNS 전파 지연 또는 잘못된 레코드 | CNAME 레코드가 정확히 cname.lovable.app을 가리키는지 확인하세요. nslookup app.yourdomain.com으로 전파 상태를 확인합니다. |
| RLS 정책으로 데이터 접근 불가 | Row Level Security 정책 누락 | Supabase 대시보드 → Table Editor에서 해당 테이블의 RLS 정책을 확인하고, 필요한 SELECT/INSERT/UPDATE/DELETE 정책을 추가하세요. |
| 빌드 실패 (npm run build 에러) | TypeScript 타입 에러 또는 의존성 문제 | Lovable 채팅에서 "빌드 에러를 수정해줘"라고 요청하면 자동으로 에러를 분석하고 수정합니다. |
Q1: Lovable으로 만든 앱의 코드 소유권은 누구에게 있나요?
Lovable으로 생성된 모든 코드의 소유권은 사용자에게 있습니다. GitHub 저장소에 푸시된 코드를 자유롭게 수정, 배포, 상업적으로 사용할 수 있습니다. Lovable 구독을 해지하더라도 GitHub에 있는 코드는 그대로 유지되며, 별도의 호스팅 서비스에서 직접 배포할 수도 있습니다.
Q2: Supabase 무료 플랜으로 충분한가요?
프로토타입이나 소규모 프로젝트에는 Supabase 무료 플랜으로 충분합니다. 무료 플랜은 500MB 데이터베이스 스토리지, 1GB 파일 스토리지, 월 50,000 활성 사용자 인증을 제공합니다. 트래픽이 증가하거나 프로덕션 환경에서 안정적인 운영이 필요하다면 Supabase Pro 플랜(월 $25)으로 업그레이드를 권장합니다.
Q3: Lovable에서 생성한 앱을 Vercel이나 Netlify에 직접 배포할 수 있나요?
네, 가능합니다. Lovable 프로젝트는 표준 Vite + React 구조이므로 GitHub 저장소를 Vercel이나 Netlify에 연결하여 직접 배포할 수 있습니다. 빌드 명령어는 npm run build, 출력 디렉토리는 dist로 설정하면 됩니다. 단, Supabase 환경 변수(VITE_SUPABASE_URL, VITE_SUPABASE_ANON_KEY)를 해당 호스팅 플랫폼의 환경 변수 설정에 추가해야 합니다.