Lovable을 Supabase와 연결해 백엔드, 데이터베이스, 인증, 스토리지, 실시간 기능, 서버리스 함수를 설정합니다.
Supabase에 연결
Lovable을 Supabase와 연결해 백엔드, 데이터베이스, 인증, 스토리지, 실시간 기능, 서버리스 함수를 원활하게 설정합니다.
Supabase 통합은 사용자가 소유한 Supabase 프로젝트를 Lovable 프로젝트에 연결해 앱의 백엔드로 사용합니다. 연결하면 Lovable이 채팅에서 데이터베이스 스키마를 설계하고 migration을 실행하며 Edge Function을 배포하고 앱 UI를 데이터에 연결합니다. 모든 작업은 사용자의 Supabase 프로젝트에서 이루어집니다.
Supabase가 필요한가요? 아닙니다. Lovable Cloud는 기본으로 활성화되는 내장 백엔드이므로 대부분의 프로젝트에는 별도 Supabase 계정이 필요하지 않습니다. Lovable Cloud는 Supabase의 오픈 소스 기반을 활용하므로 별도 설정 없이 같은 데이터베이스, 인증, 스토리지, Edge Function 기능을 제공합니다.
자체 Supabase 계정과 요금제, Supabase 대시보드 전체 접근 권한이 필요하거나 기존 Supabase 프로젝트를 사용하려면 자체 Supabase 프로젝트를 연결하세요.
Supabase 통합은 모든 플랜에서 사용할 수 있습니다.
Supabase와 Lovable Cloud 비교
| Lovable Cloud | 자체 Supabase 프로젝트 | |
|---|---|---|
| 설정 | 자동, 추가 계정 불필요 | Supabase 계정과 프로젝트 필요 |
| 요금 | Lovable 워크스페이스 크레딧 | Supabase가 청구하는 Supabase 구독 |
| 백엔드 관리 | Lovable 안의 Cloud 뷰 | Supabase 대시보드 |
| 인증 설정 및 소셜 로그인 공급자 | Lovable에서 구성 | Supabase 대시보드에서 구성 |
| 인프라(백업, 인스턴스 크기, 일시 중지) | Lovable이 관리 | 사용자가 Supabase에서 관리 |
| 적합한 경우 | 대부분의 프로젝트, 작동하는 백엔드로 가는 가장 빠른 방법 | Supabase 계정과 인프라를 직접 소유하려는 팀 |
두 백엔드 사이의 전환은 자동으로 이루어지지 않습니다. Lovable Cloud에서 Supabase로 또는 반대로 한 번에 migration하는 기능이 없으므로 프로젝트에서 사용할 백엔드를 일찍 결정하는 것이 좋습니다. Cloud 데이터 내보내기는 Lovable Cloud 데이터 내보내기를 참조하세요.
만들 수 있는 기능
Supabase를 연결하면 Lovable에 완전한 백엔드 기능을 만들도록 요청할 수 있습니다.
- 데이터 저장 및 쿼리: 자연어 설명으로 테이블과 관계를 설계하고 UI를 연결합니다.
- 사용자 로그인: Supabase Auth 기반 이메일·비밀번호 인증, 소셜 로그인, 접근 제어를 구현합니다.
- 파일 업로드 및 제공: 이미지, 문서, 미디어를 Supabase Storage 버킷에 저장합니다.
- 서버 측 코드 실행: 결제, 이메일, AI 기능, 예약 작업, 외부 API 호출에 Supabase Edge Function을 사용합니다.
- 시크릿 보호: Stripe나 Resend 같은 서비스의 API 키를 앱 코드가 아닌 Supabase 프로젝트에 안전하게 저장합니다.
- 실시간 업데이트: Supabase 실시간 구독으로 라이브 채팅, 피드, 대시보드를 구현합니다.
Supabase 플랫폼의 전체 기능은 Supabase 문서를 참조하세요.
사전 준비 사항
Supabase를 Lovable에 연결
연결에는 서로 다른 사람이 수행할 수 있는 두 작업이 있습니다.
- Supabase 조직을 Lovable 워크스페이스에 링크합니다. 워크스페이스 owner 또는 admin이 조직별로 한 번 수행합니다.
- Lovable 프로젝트를 Supabase 프로젝트에 연결합니다. 프로젝트 편집 권한이 있는 사용자가 링크된 조직의 프로젝트를 선택합니다.
처음 연결하는 워크스페이스 owner 또는 admin에게는 연결 대화 상자가 두 작업을 하나의 흐름으로 안내합니다.
Supabase 조직 링크(workspace owner 및 admin)
다음 위치에서 조직을 링크할 수 있습니다.
- Supabase 커넥터 페이지: 대시보드 사이드바에서 Connectors를 열고 Supabase → Connect Supabase를 선택합니다. 이미 조직이 있으면 Manage Connected Organizations를 사용합니다.
- 프로젝트의 연결 대화 상자: 에디터에서 More → Cloud → Already have a Supabase project? Connect it here → Add Organization을 선택합니다.
- 프로젝트 생성 시: 대시보드 프롬프트 상자에서 + → Databases → Add Supabase organization을 선택합니다.
Supabase 창에서 로그인하고 선택한 조직에 대한 Lovable 접근을 승인합니다. 조직은 Linked Supabase organizations에 표시되며 모든 워크스페이스 멤버가 사용할 수 있습니다. 조직의 프로젝트를 연결하는 멤버에게 별도 Supabase 계정은 필요하지 않습니다.
워크스페이스 owner와 admin만 조직을 추가하거나 다시 연결할 수 있습니다. 옵션이 비활성화되어 있으면 워크스페이스 admin에게 먼저 조직을 링크해 달라고 요청하세요.
Lovable 프로젝트를 Supabase 프로젝트에 연결
조직이 링크되면 프로젝트 편집 권한이 있는 모든 사용자가 연결할 수 있습니다.
- 새 프로젝트 생성 시: 대시보드 프롬프트 상자에서 + → Databases를 열고 Supabase 제목 아래의 프로젝트를 선택합니다(메뉴 검색에 "Supabase"를 입력해도 됩니다). 새 Lovable 프로젝트가 해당 Supabase 프로젝트를 백엔드로 삼아 생성됩니다.
- 기존 프로젝트: 에디터의 Cloud 뷰에서 다음 단계를 수행합니다.
연결 대화 상자 열기
에디터에서 More → Cloud를 열고 Already have a Supabase project? Connect it here를 클릭합니다. 백엔드가 없는 프로젝트에서 Enable Cloud 옆에 이 링크가 표시됩니다. Linked Supabase organizations 대화 상자에서 Continue를 클릭합니다.
Supabase 프로젝트 선택
Connect project에 링크된 조직의 프로젝트가 표시됩니다. 사용할 프로젝트 옆의 Connect를 클릭합니다. 프로젝트가 없으면 Create Project로 Supabase 대시보드를 열어 만든 뒤 Lovable로 돌아옵니다.
연결 확인
연결하면 Cloud 뷰에 Supabase 프로젝트 이름과 상태, Supabase 대시보드 바로 가기가 표시됩니다. 이제 Lovable에 백엔드 기능을 빌드하도록 요청할 수 있습니다.
연결 링크에 Wait for Lovable to finish working이 표시되면 Lovable이 아직 요청을 처리 중입니다. 작업이 끝난 뒤 다시 시도하세요.
Lovable이 Supabase 프로젝트와 작동하는 방식
Supabase를 연결하면 Lovable이 채팅에서 백엔드를 관리합니다. SQL을 작성하거나 Supabase 대시보드에 코드를 복사할 필요가 없습니다.
데이터베이스
Supabase는 호스팅된 PostgreSQL 데이터베이스를 제공합니다. 저장할 기능을 자연어로 설명하면 Lovable이 테이블, 열, 관계를 설계합니다.
사용자가 메시지와 1~5점 평점을 남길 수 있는 피드백 폼을 추가하고 응답을 데이터베이스에 저장해줘.스키마 변경은 검토된 migration으로 실행됩니다. Lovable이 SQL을 작성해 보여주고 채팅에서 승인을 요청합니다. 승인하면 Supabase 프로젝트에서 migration을 실행하고 supabase/migrations/에 파일을 저장하며 TypeScript 타입을 다시 생성합니다. 데이터 삽입·변경도 먼저 승인을 요청하지만 디버깅을 위한 읽기는 데이터를 수정하지 않습니다.
Supabase 대시보드에서 직접 데이터를 다룰 수도 있습니다. Table Editor는 행을 스프레드시트처럼 보여 주어 레코드를 확인하고 편집할 수 있고, SQL Editor에서는 원하는 쿼리를 직접 실행할 수 있습니다.
실시간 업데이트: Supabase는 데이터베이스 변경을 앱으로 스트리밍할 수 있습니다. Lovable에 실시간 업데이트를 요청하면 구독을 연결합니다.
새 메시지가 새로 고침 없이 표시되도록 채팅을 실시간으로 업데이트해줘.인증
Lovable에 Supabase Auth 기반 가입과 로그인 흐름을 추가하도록 요청하세요.
이메일과 비밀번호 로그인을 추가하고 대시보드에 접근하려면 로그인하도록 해줘.Lovable이 페이지를 Supabase 프로젝트에 연결하므로, 앱에서 등록한 사용자는 Supabase 대시보드의 Authentication에 표시됩니다. 여기에서 테스트 사용자를 수동으로 추가할 수도 있습니다. 인증 설정은 Lovable이 아니라 Supabase 프로젝트에 있습니다. Google이나 GitHub 같은 소셜 로그인을 사용하려면 Supabase 대시보드에서 공급자를 활성화하고 OAuth 자격 증명을 입력한 뒤 Lovable에 버튼과 흐름을 추가하도록 요청하세요.
로그인 페이지에 "Sign in with Google" 버튼을 추가해줘.테스트 중에는 Supabase 대시보드의 Authentication 설정에서 이메일 확인을 꺼 테스트 계정이 바로 로그인하도록 할 수 있습니다. 실제 사용자에게 출시하기 전에 다시 켜세요.
Edge Function
Supabase Edge Function은 서버리스 함수, 즉 서버를 직접 준비하거나 관리하지 않고 Supabase 인프라에서 실행하는 작은 백엔드 코드 조각입니다. 사용자의 브라우저에서 실행할 수 없거나 실행하면 안 되는 로직이 필요할 때 적합합니다. 대표적인 용도는 다음과 같습니다.
- AI 기능: 모델 API를 호출해 요약, 분류, 대화를 처리합니다.
- 이메일·알림 전송: 예를 들어 Resend 같은 이메일 API로 가입 시 환영 메일을 보냅니다.
- 결제 처리: Stripe로 결제 세션을 만들고 webhook을 처리합니다.
- 예약 작업: 야간 정리나 일일 요약 같은 반복 작업을 실행합니다.
- 시크릿 키가 필요한 외부 API 호출: 프론트엔드 코드에 노출할 수 없는 자격 증명을 사용하는 모든 작업.
이 함수는 직접 작성하지 않습니다. 동작을 채팅으로 설명하면 Lovable이 함수를 작성하고 Supabase 프로젝트에 배포하며 앱에서 호출하도록 연결합니다.
사용자가 문의 폼을 제출하면 Resend를 사용해 메시지 내용이 포함된 이메일 알림을 보내줘.함수가 실패하면 Lovable이 로그를 읽어 채팅에 오류를 표시합니다. Supabase 대시보드의 Edge Functions에서도 함수별 로그를 확인할 수 있습니다.
시크릿
Stripe 결제나 Resend 이메일 같은 기능에는 시크릿 API 키가 필요합니다. Lovable은 필요한 키를 감지해 보안 입력으로 값을 요청합니다. 시크릿은 Edge Function이 읽을 수 있도록 Supabase 프로젝트에 저장되며 앱 코드나 저장소에는 표시되지 않습니다. Lovable도 저장된 값을 다시 읽지 않습니다.
Stripe로 결제를 처리하는 결제 버튼을 추가해줘.예를 들어 Lovable이 결제 함수를 배포하면, 그 함수는 Supabase의 시크릿 저장소에서 Stripe 시크릿 키를 읽어 Stripe에 인증합니다. 저장된 시크릿은 Supabase 대시보드의 프로젝트 Edge Functions 설정에서 관리할 수 있습니다.
스토리지
Supabase Storage는 이미지, 동영상, PDF 같은 파일을 권한별 버킷에 저장합니다. 파일 업로드를 요청하면 Lovable이 업로드 로직과 버킷을 만들고 Supabase 프로젝트의 버킷 생성·변경 전에 승인을 요청합니다.
사용자가 계정 설정 페이지에서 프로필 사진을 업로드하고 헤더에 표시할 수 있게 해줘.업로드한 파일은 Supabase 프로젝트의 버킷에 저장되며, Lovable이 파일 URL을 가져와 앱에 표시합니다. Supabase 대시보드의 Storage에서 파일을 살펴보고 버킷 권한을 관리할 수 있습니다. 업로드 크기 제한은 Supabase 플랜을 따릅니다(Supabase 무료 tier에서는 파일 하나당 50MB로 제한). 현재 제한은 Supabase 요금을 참조하세요.
보안 검사
Lovable은 Row Level Security(RLS) 적용 범위를 포함해 데이터베이스 구성을 자동 점검하고 스키마 변경 뒤 발견한 이슈를 표시합니다.
라이브 전환 전에 모든 테이블에 각 행을 읽고 쓸 수 있는 사용자를 제한하는 RLS 정책이 있는지 확인하세요. Lovable에 정책을 검토하도록 요청하고 Supabase 대시보드에서도 직접 확인하세요. 누락된 RLS 정책은 앱 데이터 노출의 가장 흔한 원인입니다.
연결 관리
연결에는 Lovable 프로젝트가 사용할 Supabase 프로젝트를 정하는 프로젝트 연결과 워크스페이스 전체가 사용할 수 있는 링크된 조직이라는 두 수준이 있습니다.
프로젝트 연결 관리
에디터에서 연결된 프로젝트의 More → Cloud를 엽니다. 여기에서 다음을 할 수 있습니다.
- 연결된 프로젝트의 이름과 상태 확인
- Supabase 대시보드로 이동: 프로젝트 개요, 사용자 관리, SQL editor, Edge Function, 시크릿
- 프로젝트 연결 해제
백엔드는 Supabase에 있으므로 데이터, 사용자, 파일의 일상적인 관리는 Supabase 대시보드에서 수행합니다.
링크된 조직 관리(workspace owner 및 admin)
대시보드 사이드바에서 Connectors를 열고 Supabase → Manage Connected Organizations에서 조직을 추가하거나 접근 권한이 만료된 조직을 다시 연결합니다. 연결된 프로젝트의 Cloud 뷰에 있는 Manage organizations도 같은 위치를 엽니다.
Supabase 연결 해제
Cloud 뷰 열기
에디터에서 More → Cloud를 엽니다. 연결된 Supabase 프로젝트가 표시됩니다.
연결 해제
Disconnect를 클릭한 뒤 Disconnect Supabase 대화 상자에서 확인합니다.
연결을 해제하면 Lovable이 Edge Function을 배포하거나 데이터베이스 스키마를 읽지 못하지만 코드와 Supabase 프로젝트의 데이터는 바뀌거나 삭제되지 않습니다. 나중에 같은 프로젝트나 다른 Supabase 프로젝트에 다시 연결할 수 있습니다.
제한 사항
- Lovable 프로젝트 하나는 한 번에 Supabase 프로젝트 하나에 연결됩니다.
- Lovable Cloud와 자체 Supabase 프로젝트 사이에는 어느 방향으로도 자동 migration이 없습니다.
- 데이터베이스 크기, 파일 업로드 크기, 대역폭 제한은 Supabase 플랜을 따릅니다. Supabase 요금을 확인하세요.
Lovable Cloud가 필요한 Lovable 기능
자체 Supabase 프로젝트에는 다음 Lovable Cloud 전용 기능이 적용되지 않습니다.
- 에디터 내 백엔드 뷰: Cloud 섹션의 Database, Users, Storage, Secrets, Jobs, Usage, Logs 대신 Supabase 대시보드를 사용합니다.
- 관리형 인프라: Lovable 안의 일일 백업·복원, 일시 중지, 인스턴스 크기 조정 대신 Supabase에서 관리합니다.
- 내장 결제: Paddle·Stripe 결제에는 webhook과 구독 데이터를 위한 Lovable Cloud가 필요합니다.
- 커스텀 이메일: 자체 도메인 이메일에는 Lovable Cloud가 필요합니다.
- Lovable에서 인증 구성: 소셜 로그인 공급자, 관리형 Google 인증, 앱 사용자용 SAML SSO는 Lovable Cloud에서만 작동합니다.
- 로그인 상태 브라우저 테스트: 자체 Supabase 프로젝트에서는 로그인이 필요 없는 페이지만 테스트합니다.
- 민감 데이터 스캐닝: PII 감지는 Lovable Cloud 데이터베이스와 스토리지를 대상으로 합니다.