Lovable + Supabase 백엔드 설정부터 커스텀 도메인 배포까지 완벽 가이드
Lovable과 Supabase를 활용한 풀스택 앱 배포 완벽 가이드
Lovable은 자연어 프롬프트만으로 풀스택 웹 애플리케이션을 생성할 수 있는 AI 기반 앱 빌더입니다. Supabase 백엔드와 연동하면 인증, 데이터베이스, 스토리지까지 갖춘 프로덕션급 앱을 빠르게 구축할 수 있습니다. 이 가이드에서는 프로젝트 생성부터 커스텀 도메인 배포까지 전 과정을 단계별로 안내합니다.
사전 준비사항
- Lovable 계정 (무료 또는 Pro 플랜)- Supabase 계정 (supabase.com)- 커스텀 도메인 (선택사항, 배포 단계에서 필요)- 기본적인 SQL 및 웹 개발 이해
Step 1: Lovable 프로젝트 생성
Lovable 대시보드에서 새 프로젝트를 생성합니다. 효과적인 프롬프트 작성이 핵심입니다.
프롬프트 작성 예시
SaaS 대시보드 앱을 만들어줘.
- 사용자 인증 (이메일/비밀번호 로그인, 회원가입)
- 대시보드에 프로젝트 목록 표시 (CRUD)
- 각 프로젝트에 제목, 설명, 상태(진행중/완료) 필드
- 반응형 디자인, 사이드바 네비게이션
Supabase를 백엔드로 사용프롬프트를 입력하면 Lovable이 React + TypeScript + Tailwind CSS 기반의 프론트엔드 코드를 자동 생성합니다. 생성된 코드는 실시간 미리보기로 확인할 수 있습니다.
Step 2: Supabase 프로젝트 설정
- Supabase 대시보드에서 New Project 클릭- 프로젝트명, 데이터베이스 비밀번호, 리전(Northeast Asia - ap-northeast-1 권장) 설정- 프로젝트 생성 후 Settings > API에서 키 확인
필수 환경 변수 확인
VITE_SUPABASE_URL=https://YOUR_PROJECT_ID.supabase.co
VITE_SUPABASE_ANON_KEY=YOUR_ANON_KEY
Step 3: Lovable에서 Supabase 연동
Lovable 에디터에서 Supabase 통합 기능을 활성화합니다.
- Lovable 프로젝트 설정에서 **Supabase** 섹션으로 이동- **Connect to Supabase** 버튼 클릭- Supabase 프로젝트 URL과 Anon Key 입력- 연결 상태가 **Connected**로 변경되는지 확인
### Supabase 클라이언트 설정 코드
// src/integrations/supabase/client.ts
import { createClient } from '@supabase/supabase-js';
const supabaseUrl = import.meta.env.VITE_SUPABASE_URL;
const supabaseAnonKey = import.meta.env.VITE_SUPABASE_ANON_KEY;
export const supabase = createClient(supabaseUrl, supabaseAnonKey);
Step 4: 데이터베이스 테이블 생성
Supabase SQL Editor에서 필요한 테이블을 생성합니다.
-- projects 테이블 생성
CREATE TABLE projects (
id UUID DEFAULT gen_random_uuid() PRIMARY KEY,
user_id UUID REFERENCES auth.users(id) ON DELETE CASCADE,
title TEXT NOT NULL,
description TEXT,
status TEXT DEFAULT 'in_progress' CHECK (status IN ('in_progress', 'completed')),
created_at TIMESTAMPTZ DEFAULT now(),
updated_at TIMESTAMPTZ DEFAULT now()
);
— RLS(Row Level Security) 활성화
ALTER TABLE projects ENABLE ROW LEVEL SECURITY;
— 사용자 본인 데이터만 접근 가능하도록 정책 설정
CREATE POLICY “Users can view own projects”
ON projects FOR SELECT
USING (auth.uid() = user_id);
CREATE POLICY “Users can insert own projects”
ON projects FOR INSERT
WITH CHECK (auth.uid() = user_id);
CREATE POLICY “Users can update own projects”
ON projects FOR UPDATE
USING (auth.uid() = user_id);
CREATE POLICY “Users can delete own projects”
ON projects FOR DELETE
USING (auth.uid() = user_id);
Step 5: 인증 기능 구현
Lovable에서 다음 프롬프트로 인증 페이지를 추가합니다.
로그인/회원가입 페이지를 추가해줘.
Supabase Auth를 사용하고,
이메일/비밀번호 방식으로 구현해줘.
로그인 후 /dashboard로 리디렉트해줘.
### 인증 상태 관리 코드 예시
// src/hooks/useAuth.ts import { useEffect, useState } from 'react'; import { supabase } from '@/integrations/supabase/client'; import type { User } from '@supabase/supabase-js';export function useAuth() { const [user, setUser] = useState<User | null>(null); const [loading, setLoading] = useState(true);
useEffect(() => { supabase.auth.getSession().then(({ data: { session } }) => { setUser(session?.user ?? null); setLoading(false); });
const { data: { subscription } } = supabase.auth.onAuthStateChange( (_event, session) => setUser(session?.user ?? null) ); return () => subscription.unsubscribe();}, []);
return { user, loading }; }
Step 6: 데이터 CRUD 연동
// 프로젝트 목록 조회
const { data, error } = await supabase
.from('projects')
.select('*')
.order('created_at', { ascending: false });
// 프로젝트 생성
const { error } = await supabase
.from('projects')
.insert({ title: '새 프로젝트', description: '설명', user_id: user.id });
// 프로젝트 상태 업데이트
const { error } = await supabase
.from('projects')
.update({ status: 'completed' })
.eq('id', projectId);Step 7: 커스텀 도메인 배포
- Lovable 프로젝트에서 Publish 버튼 클릭- 기본 배포 URL(예:
your-app.lovable.app)에서 정상 동작 확인- Settings > Custom Domain으로 이동- 커스텀 도메인 입력 (예:app.yourdomain.com)- DNS 설정에서 CNAME 레코드 추가
DNS 설정
| 타입 | 호스트 | 값 | TTL |
|---|---|---|---|
| CNAME | app | cname.lovable.app | 3600 |
DNS 전파에는 최대 48시간이 소요될 수 있으며, 일반적으로 몇 분에서 수 시간 내에 완료됩니다. SSL 인증서는 자동으로 발급됩니다.
Step 8: 환경 변수 및 프로덕션 설정
배포 환경에서 Supabase 환경 변수가 올바르게 설정되어 있는지 확인합니다.
| 설정 항목 | 개발 환경 | 프로덕션 환경 |
|---|---|---|
| Supabase URL | 로컬/스테이징 프로젝트 | 프로덕션 프로젝트 |
| Anon Key | 개발용 키 | 프로덕션 키 |
| RLS 정책 | 테스트용 완화 가능 | 반드시 엄격 적용 |
| 이메일 인증 | 비활성화 가능 | 활성화 권장 |
Settings > GitHub에서 레포지토리를 연결하세요.- **Edge Functions 활용:** 서버 사이드 로직이 필요하면 Supabase Edge Functions를 사용하세요. Lovable에서 Supabase Edge Function을 만들어서 외부 API를 호출해줘라고 프롬프트하면 자동 생성됩니다.- **타입 자동 생성:** Supabase CLI로 TypeScript 타입을 자동 생성하면 타입 안전성을 확보할 수 있습니다: npx supabase gen types typescript --project-id YOUR_PROJECT_ID > src/integrations/supabase/types.ts- **반복 프롬프트 패턴:** 기능 추가 시 기존 코드 구조를 유지하면서라는 접두사를 붙이면 일관된 코드 스타일을 유지할 수 있습니다.- **Realtime 구독:** 실시간 데이터 동기화가 필요하면 Supabase Realtime을 활용하세요. 대시보드에서 해당 테이블의 Realtime 기능을 활성화한 뒤 프롬프트에 실시간 업데이트를 요청하면 됩니다.
## Troubleshooting: 자주 발생하는 오류
| 오류 | 원인 | 해결 방법 |
|---|---|---|
Invalid API key | Supabase Anon Key가 잘못되었거나 누락됨 | Supabase 대시보드 > Settings > API에서 키를 재확인하고 Lovable 환경 변수에 정확히 입력 |
new row violates RLS policy | RLS 정책이 INSERT를 허용하지 않음 | WITH CHECK 절이 포함된 INSERT 정책을 추가하고 auth.uid()가 올바르게 매핑되는지 확인 |
relation does not exist | 테이블이 생성되지 않았거나 스키마가 다름 | SQL Editor에서 테이블 존재 여부를 확인하고 public 스키마에 생성되었는지 점검 |
| 커스텀 도메인 SSL 오류 | DNS 전파가 완료되지 않음 | DNS 설정 후 최대 48시간 대기. dig app.yourdomain.com 명령으로 전파 상태 확인 |
| 배포 후 빈 화면 | 환경 변수 미설정 또는 빌드 오류 | Lovable 배포 로그를 확인하고 모든 환경 변수가 프로덕션 설정에 등록되었는지 점검 |
Q1: Lovable 무료 플랜으로 Supabase 연동이 가능한가요?
네, Lovable 무료 플랜에서도 Supabase 연동이 가능합니다. 다만 무료 플랜은 월별 AI 편집 횟수에 제한이 있으므로, 복잡한 기능을 반복적으로 수정해야 하는 경우 Pro 플랜을 고려하세요. Supabase 역시 무료 티어에서 2개의 프로젝트, 500MB 데이터베이스, 50,000 월간 활성 사용자를 제공합니다.
Q2: Lovable로 만든 앱의 코드를 직접 수정할 수 있나요?
네, GitHub 연동 기능을 사용하면 가능합니다. Lovable 프로젝트를 GitHub 레포지토리에 연결한 후 로컬에서 코드를 수정하고 푸시하면 Lovable에 반영됩니다. 반대로 Lovable에서 AI로 수정한 내용도 GitHub에 커밋됩니다. VS Code나 Cursor 같은 로컬 에디터에서 세밀한 코드 수정이 필요할 때 유용합니다.
Q3: 커스텀 도메인 없이도 앱을 공개적으로 배포할 수 있나요?
네, Lovable은 기본적으로 your-project.lovable.app 형태의 무료 서브도메인을 제공합니다. Publish 버튼만 클릭하면 즉시 공개 URL이 생성되며, SSL도 자동 적용됩니다. 커스텀 도메인은 브랜딩이 필요하거나 프로덕션 서비스를 운영할 때 설정하면 됩니다.