Supabase로 백엔드 통합하기
인증, 파일 스토리지, 실시간 업데이트 및 Edge Functions가 포함된 PostgreSQL 데이터베이스에 앱을 연결하세요.
Lovable의 네이티브 Supabase 통합을 통해 프론트엔드 UI와 백엔드 데이터베이스를 단일의 사용하기 쉬운 채팅 인터페이스로 관리할 수 있습니다. 즉, Lovable을 떠나지 않고 앱 화면을 디자인하고 클라우드 PostgreSQL 데이터베이스를 설정할 수 있습니다. 이러한 통합 접근 방식은 강력한 앱 개발을 모든 사람이 접근할 수 있게 합니다 – 비기술 사용자는 Lovable의 안내에 의존할 수 있고, 경험 많은 개발자는 필요에 따라 고급 Supabase 기능을 활용할 수 있습니다.
개요
Supabase는 Firebase의 오픈소스 대안으로, 실시간 기능, 사용자 인증, 파일 스토리지 및 서버리스 함수가 포함된 호스팅 PostgreSQL 데이터베이스를 제공합니다. Supabase를 Lovable 앱에 연결하면 보일러플레이트 코드를 작성하거나 서버를 수동으로 구성하지 않고도 즉시 프로덕션 준비가 된 백엔드를 얻습니다. Supabase의 직관적인 웹 대시보드를 통해 데이터와 사용자를 쉽게 관리할 수 있으며, 견고한 SQL 기반은 PostgreSQL 데이터베이스의 전체 기능과 확장성을 유지할 수 있음을 의미합니다.
Supabase 통합으로 잠금 해제되는 주요 기능:
- 데이터베이스 (PostgreSQL) – 전체 SQL 지원으로 앱 데이터를 저장하고 쿼리합니다. Lovable은 프롬프트를 기반으로 필요한 테이블과 스키마를 자동으로 생성할 수 있습니다.
- 사용자 인증 – 사용자 가입, 로그인 및 접근 제어를 안전하게 관리합니다. Lovable은 간단한 프롬프트로 앱에 사전 구축된 인증 플로우(이메일/비밀번호 등)를 추가할 수 있습니다.
- 파일 스토리지 – Supabase Storage를 통해 이미지 또는 기타 파일을 업로드하고 제공합니다. 사용자 프로필 사진, 업로드 또는 앱에서 처리해야 하는 정적 미디어에 적합합니다.
- 실시간 업데이트 – Supabase는 앱에 실시간 데이터 변경을 스트리밍할 수 있습니다. 이를 통해 모든 사용자에게 즉시 업데이트되는 실시간 채팅, 활동 피드 또는 협업 대시보드와 같은 기능을 사용할 수 있습니다.
- Edge Functions (서버리스) – Supabase의 인프라에서 커스텀 백엔드 로직(JavaScript/TypeScript)을 실행합니다. Lovable은 이메일 전송, 결제 처리 또는 외부 API 통합과 같은 작업을 위해 이러한 함수를 생성하고 배포합니다.
Lovable의 Supabase 통합을 사용하는 이유?
Lovable을 사용하면 프론트엔드 디자인과 백엔드 설정을 위해 별도의 도구를 조작할 필요가 없습니다. Lovable의 AI와 대화하기만 하면 UI를 빌드하고 기본 데이터베이스와 서버 함수가 자동으로 생성됩니다. 이는 더 빠른 개발과 적은 통합 문제를 의미합니다. 예를 들어 Lovable에 "사용자 피드백 양식을 추가하고 응답을 데이터베이스에 저장해줘"라고 프롬프트하면 Lovable은 양식 UI를 생성하고 피드백을 저장할 Supabase 테이블을 설정합니다 – 한 번에 모두. 이러한 원활한 엔드투엔드 생성이 Lovable의 고유한 강점으로, 초보자도 복잡한 앱을 빌드할 수 있게 하고 파워 유저가 더 빠르게 움직일 수 있게 합니다.
시작하기: Supabase를 Lovable에 연결
Supabase 백엔드를 Lovable 프로젝트에 연결하는 것은 간단합니다. Supabase 계정(무료 티어도 가능)과 준비된 Lovable 프로젝트가 필요합니다. 아직 Supabase 계정이 없다면 Supabase 웹사이트에서 가입할 수 있습니다 – 무료 티어에는 신용카드가 필요하지 않습니다.
Supabase에서 새 프로젝트 만들기
- New Project를 클릭하고 필요한 필드를 완성한 다음 설정이 완료될 때까지 몇 분 기다리세요.
Supabase를 Lovable에 연결
Lovable에서 Supabase 연결 시작
프로젝트 에디터에서 프로젝트 설정으로 이동합니다. Integrations 아래에서 Supabase 탭을 찾습니다. Connect Supabase를 클릭합니다. Lovable이 Supabase 계정에 로그인하라고 안내합니다. Supabase 계정에 로그인하고 Lovable을 인가합니다.
인가하고 프로젝트 선택 또는 생성
다음으로 Lovable 앱과 연결할 Supabase 조직과 프로젝트를 선택하라는 메시지가 표시됩니다. 기존 프로젝트를 선택하거나 즉석에서 새 프로젝트를 생성할 수 있습니다(필요한 경우 Lovable의 채팅이 새 Supabase 프로젝트 생성을 안내합니다).
구성이 완료될 때까지 대기
프로젝트를 선택한 후 Lovable이 자동으로 연결을 구성합니다. 몇 초 내에 채팅에서 확인 메시지(예: "✅ Supabase connected")가 표시됩니다. 이 시점에서 Lovable 앱이 Supabase 데이터베이스에 연결되어 인증, 데이터 스토리지 및 기타 백엔드 기능을 사용할 준비가 됩니다.
Lovable과 Supabase 모두 개발을 위한 넉넉한 무료 티어를 제공합니다. 앱이 성장하거나 고급 기능이 필요하면 결국 각 서비스에 대해 별도로 유료 플랜이 필요할 수 있습니다. 지금은 비용 없이 실험할 수 있습니다.
사용자 인증 추가
가장 먼저 원하는 것 중 하나는 사용자 인증입니다(사람들이 앱에 가입하고 로그인할 수 있도록). Lovable의 Supabase 통합은 채팅을 통해 이를 간단하게 설정할 수 있게 합니다.
이메일과 비밀번호 (기본 설정)
프로젝트가 Supabase에 연결되면 Lovable이 인증 페이지를 생성할 수 있습니다. 예를 들어 간단히 프롬프트할 수 있습니다: "로그인 추가". 이것은 일반적으로 앱에 기본 로그인 페이지(및 관련 가입 플로우)를 생성하고 Supabase의 인증 시스템에 연결합니다.
Lovable이 로그인 UI를 추가한 후 테스트를 위해 사용자를 생성하는 몇 가지 방법이 있습니다:
예시 프롬프트:
로그인 추가- 앱의 가입 양식 사용: 앱에 새로 추가된 인터페이스를 사용하여 사용자를 등록합니다(이것은 Supabase와 통신하여 계정을 생성합니다).
- Supabase 대시보드 사용: Supabase 프로젝트의 대시보드로 이동하여 Authentication > Users로 이동한 다음 새 사용자(이메일과 비밀번호)를 수동으로 추가합니다. 이것은 테스트 계정을 빠르게 설정하는 데 편리합니다.
개발 편의를 위해 테스트하는 동안 Supabase에서 이메일 확인을 비활성화하는 것이 좋습니다. 이렇게 하면 사용자가 이메일을 확인하지 않고도 즉시 로그인할 수 있습니다. 이를 위해 Supabase 대시보드를 열고 Authentication > Settings (또는 Providers) > Email로 이동한 다음 "Confirm email" 요구 사항을 비활성화합니다. 보안을 위해 프로덕션에서는 나중에 확인을 다시 활성화할 수 있습니다.
Lovable은 이미 Lovable 앱이 인증된 사용자를 인식하도록 구성했습니다(예: 적절한 경우 특정 페이지를 로그인한 사용자만 볼 수 있도록 제한). Lovable의 에디터나 프롬프트를 사용하여 로그인/가입 페이지의 모양과 느낌을 추가로 커스터마이즈할 수 있습니다. Supabase Integration 2.0은 가입 양식에 추가 필드를 추가하거나 브랜드에 맞게 양식을 스타일링할 수도 있습니다.
소셜 로그인 (예: Google)
Supabase는 Google, GitHub, Twitter 등과 같은 OAuth 로그인을 지원합니다. 이러한 것들도 Lovable 앱에 통합할 수 있습니다:
- Supabase에서 provider 활성화: Supabase 대시보드에서 Authentication > Providers로 이동합니다. 외부 로그인 provider 목록이 표시됩니다. Google을 켜고(예시) 지침에 따라 Google에서 필요한 OAuth Client ID와 Secret을 제공합니다. (Supabase가 Google의 개발자 콘솔에서 이러한 자격 증명을 얻는 방법을 안내합니다.) 설정을 저장하면 Supabase 프로젝트가 이제 Google 로그인을 처리하는 방법을 알게 됩니다.
- Lovable 앱의 UI 업데이트: 다음으로 Lovable에 소셜 로그인 옵션을 추가하도록 프롬프트할 수 있습니다. 예: "로그인 페이지에 'Sign in with Google' 버튼 추가." Lovable이 인증 페이지를 수정하여 Google 로그인 버튼과 Supabase를 통해 OAuth 플로우를 시작하는 데 필요한 코드를 추가합니다.
이 작업이 완료되면 앱 사용자가 "Sign in with Google"을 클릭하고, 인증을 위해 Google로 리디렉션되고, 로그인된 사용자로 앱에 돌아올 수 있습니다. 다른 provider(GitHub, Facebook 등)도 비슷한 방식으로 활성화할 수 있습니다 – 각각을 Supabase에서 구성한 다음 그에 따라 Lovable UI를 조정하면 됩니다.
Supabase로 데이터 관리
인증 외에도 대부분의 앱의 핵심은 데이터를 읽고 쓰는 것입니다. Lovable과 Supabase를 사용하면 채팅 프롬프트를 떠나지 않고 데이터베이스 테이블을 생성하고 UI에 연결할 수 있습니다.
Lovable을 통해 데이터베이스 테이블 생성
Supabase에 연결한 후 데이터를 영구적으로 저장해야 할 때마다 Lovable에 지시할 수 있으며 데이터베이스 설정을 조정해줍니다. 프로세스는 일반적으로 다음과 같습니다:
필요한 기능과 데이터 설명
Lovable의 채팅에서 데이터 스토리지가 포함된 기능을 요청합니다. 예를 들어 "피드백 양식을 추가하고 응답을 데이터베이스 테이블에 저장해줘."라고 말할 수 있습니다. 저장하려는 데이터(예: 메시지와 평점이 있는 사용자 피드백 또는 이름, 가격 등이 있는 재고 항목)를 가능한 명확하게 설명하세요. Lovable은 이 정보를 사용하여 어떤 데이터베이스 구조가 필요한지 결정합니다.
생성된 SQL 스니펫 검토
Lovable의 AI가 앱 업데이트를 제안합니다. 요청에 데이터 저장이 포함되어 있으므로 Lovable은 SQL 스키마 스니펫도 생성합니다 – 기본적으로 Supabase에 필요한 테이블이나 컬럼을 생성하는 명령입니다. 예를 들어 다음과 같이 말할 수 있습니다: _"feedback 테이블을 생성하고 _ id*, message, rating 컬럼을 만들겠습니다"*라고 하고 해당 SQL 코드를 제공합니다. 이 스니펫은 복사할 수 있도록 채팅이나 사이드바에 표시됩니다.
Supabase에서 SQL 실행
Supabase 대시보드를 열고 SQL Editor로 이동합니다. Lovable에서 SQL 스니펫을 붙여넣고 실행하면 데이터베이스에 새 테이블이 생성(또는 기존 테이블 변경)됩니다. Supabase Table Editor에서 지정된 컬럼이 있는 테이블이 이제 존재하는지 확인할 수 있습니다.
확인하고 Lovable이 통합 완료
Lovable로 돌아가서 SQL을 실행했음을 확인합니다(채팅에서 확인을 요청하거나 간단히 Lovable에 "완료"라고 말하거나 제공된 확인을 클릭할 수 있습니다). 그러면 Lovable이 통합을 완료합니다: 앱의 UI를 업데이트하여 양식 입력, 목록 또는 기타 컴포넌트를 새 Supabase 테이블에 바인딩합니다. 예시를 계속하면 앱의 피드백 양식이 이제 연결되어 사용자가 피드백을 제출하면 feedback 테이블에 저장되고 해당 항목을 검색하고 표시할 수도 있습니다.
끝입니다! 데이터베이스 스키마를 수동으로 설계하거나 백엔드 코드를 작성할 필요가 없었습니다 – Lovable과 Supabase가 설명에서 처리했습니다. 새로운 데이터 기능(블로그 게시물, 댓글, 제품 등)에 대해 이 프로세스를 반복할 수 있습니다.
예를 들어 사용자가 앱에서 글을 게시할 수 있도록 하려면 다음과 같이 프롬프트할 수 있습니다: "사용자가 제목과 내용이 있는 게시물을 생성하고 데이터베이스에 저장할 수 있게 해줘." Lovable은 posts 테이블(제목, 내용, 작성자, 타임스탬프 등의 필드 포함)을 생성하고 Supabase에 추가할 SQL을 제공한 다음 프론트엔드 양식과 페이지를 해당 테이블에 연결합니다.
Supabase의 대시보드는 데이터를 관리하기 위한 풍부한 인터페이스를 제공합니다. 스프레드시트와 같은 UI에서 테이블 행을 보고 편집하고, 테이블 간의 관계를 정의하고, CSV나 Excel에서 데이터를 가져올 수도 있습니다. 내부적으로 모두 PostgreSQL입니다 – 이는 필요에 따라 복잡한 쿼리를 수행하거나 SQL 기능을 사용할 수 있음을 의미합니다. Supabase는 SQL에 익숙하지 않은 경우 쿼리 작성을 도와주는 AI SQL Assistant도 SQL 에디터에서 제공합니다. 이것은 고급 분석이나 문제 해결에 유용할 수 있습니다.
파일 스토리지 (이미지 및 미디어)
Lovable 앱에서 파일 업로드(예: 사용자 프로필 사진, 첨부 파일 또는 모든 미디어)를 처리해야 할 때 Supabase 통합이 도움이 됩니다. Supabase에는 데이터베이스와 함께 파일(이미지, 비디오, PDF 등)을 편리하게 호스팅하기 위한 Storage 서비스가 포함되어 있습니다.
Lovable 앱에 업로드 컴포넌트나 이미지 업로드 기능을 추가하면 Lovable은 뒤에서 Supabase Storage를 활용합니다. 업로드된 파일은 Supabase 프로젝트 내의 스토리지 버킷에 저장되고 나중에 파일을 표시하거나 다운로드하는 데 사용할 URL이나 참조를 얻습니다.
기본적으로 Supabase의 무료 티어는 각각 최대 50MB의 파일 업로드를 허용합니다. 이것은 대부분의 이미지나 짧은 비디오에 충분합니다. 앱에서 더 큰 파일(긴 비디오나 큰 데이터셋 등)을 처리해야 하는 경우 Supabase의 유료 플랜은 더 큰 업로드와 재개 가능한 업로드(매우 큰 파일용)도 지원합니다. 필요에 따라 Supabase 대시보드를 통해 파일을 폴더(버킷)로 구성하고 접근 권한을 관리할 수 있습니다.
앱에 사용자 프로필이 있고 사용자가 프로필 사진을 추가할 수 있도록 하려고 한다고 가정합니다. Lovable에 다음과 같이 프롬프트할 수 있습니다: "계정 설정 페이지에 프로필 사진 업로드를 추가해줘." Lovable이 이미지 업로드를 위한 UI를 생성합니다. Supabase 통합 덕분에 사용자가 파일을 업로드하면 Supabase Storage(버킷, 예: public/avatar-images)에 저장되고 Lovable이 해당 이미지 URL을 검색하여 앱에 프로필 사진을 표시합니다. 이 모든 것이 스토리지 처리 코드를 작성하지 않고 이루어집니다.
시크릿 저장 (API 키 및 구성)
많은 애플리케이션은 타사 서비스에 연결하기 위해 시크릿 키나 API 자격 증명이 필요합니다 — 예를 들어 결제를 위한 Stripe나 AI 기능을 위한 OpenAI. Supabase가 연결되면 Lovable은 이러한 시크릿을 관리하고 사용하는 안전한 방법을 제공합니다.
Lovable은 기능에 시크릿이 필요할 때 자동으로 감지하고 필요한 값을 입력할 수 있는 UI를 표시합니다.
이러한 시크릿은 프로젝트의 Supabase Edge Function 시크릿 관리자에 안전하게 저장됩니다. 암호화되어 백엔드에서 안전하게 보관됩니다. Edge Functions를 배포하면(다음 섹션 참조) 이러한 시크릿에 접근하여 외부 서비스에 연결할 수 있습니다.
예를 들어 결제를 위해 Stripe를 통합하면 Stripe Secret Key를 시크릿으로 저장합니다. Lovable이 Supabase에 결제 처리 함수를 배포하면 함수가 Stripe와 인증할 수 있도록 시크릿 저장소에서 해당 키를 자동으로 포함합니다. 이렇게 하면 시크릿을 앱에 하드코딩할 필요가 없고 공개적으로 노출하는 것을 피할 수 있습니다.
Edge Functions로 백엔드 로직
때로는 앱에 기본 데이터 CRUD (Create, Read, Update, Delete) 이상의 커스텀 백엔드 로직이 필요합니다. Supabase Edge Functions는 이벤트나 요청에 의해 트리거되는 백엔드에서 코드를 실행할 수 있는 서버리스 함수(AWS Lambda와 유사)입니다. Lovable의 통합은 평이한 언어로 원하는 백엔드 동작을 정의하면 Lovable이 필요한 Edge Function 코드를 작성하고 Supabase에 배포한다는 것을 의미합니다.
Lovable에서 Edge Functions의 일반적인 사용 사례:
- AI 서비스 사용: 예: OpenAI 또는 Anthropic API로 일부 입력 처리 (위에서 설명한 대로 API 키가 시크릿으로 저장됨).
- 이메일 또는 알림 전송: 예: 사용자가 가입할 때 Resend와 같은 이메일 API를 통해 환영 이메일 전송.
- 결제 처리: 예: Stripe의 API를 사용하여 체크아웃 세션 생성 또는 주문 이행.
- 예약된 작업: 예: 매시간/매일 정리 또는 요약 작업 수행 (Supabase Edge Functions는 일정에 따라 트리거될 수 있음).
- 복잡한 계산 또는 타사 통합: 클라이언트 측에서 실행하고 싶지 않은 모든 코드는 Edge Function에서 수행할 수 있습니다.
백엔드 함수를 추가하려면 Lovable 채팅에서 필요한 것을 설명하기만 하면 됩니다. 예: "사용자가 피드백 양식을 제출하면 OpenAI로 텍스트를 분석하고 감정 점수를 저장해줘." Lovable은 이 로직을 위한 코드를 Supabase Edge Function으로 생성하고(이 경우 OpenAI API 호출) Supabase 프로젝트에 배포합니다. 또한 Lovable 앱을 업데이트하여 이 함수를 적절한 시간(예: 양식 제출 시)에 호출하고 응답을 처리합니다.
Supabase 대시보드의 Functions 아래에서 Edge Functions를 찾고 모니터링할 수 있습니다. 각 함수에는 최근 실행과 출력 또는 오류를 보여주는 로그가 있습니다. Lovable의 Supabase Integration 2.0은 문제가 발생했을 때 이러한 로그를 자동으로 읽어 이 경험을 개선합니다 – 함수가 오류가 발생하면 Lovable이 채팅에서 오류 메시지를 표시하여 문제 해결을 돕습니다. 물론 더 자세한 내용이나 안심을 위해 언제든지 Supabase 로그를 직접 확인할 수 있습니다.
라이브로 전환하기 전: Supabase의 기본 보안 규칙은 개발을 위해 허용적이지만 프로덕션에서 데이터를 보호하려면 Row Level Security (RLS) 정책을 설정해야 합니다. RLS를 사용하면 데이터베이스 테이블의 각 행을 읽거나 쓸 수 있는 사람을 정의할 수 있습니다(예: 사용자가 자신의 데이터만 접근할 수 있도록 보장). Lovable에 프롬프트하면 기본 RLS 정책을 생성하는 데 도움이 됩니다(예: "사용자가 자신의 피드백만 편집할 수 있도록 보안 정책 적용"). 그러나 항상 Supabase 대시보드의 Auth > Policies에서 이러한 정책을 검토하고 테스트하세요. 실제 사용자를 앱에 초대하기 전에 적절한 보안 설정이 중요합니다.