Backend Integration
Lovable과 Supabase 연결하기
기존 Supabase 프로젝트를 Lovable에 연결하여 데이터베이스, 로그인, 파일 저장, 서버 기능을 사용할 수 있습니다.
시작하기 전에 꼭 확인하세요
Supabase integration은 Lovable 계정만으로 자동 생성되는 기능이 아닙니다. 외부 Supabase 계정이 별도로 필요합니다. Supabase 계정이 없다면 연결 과정에서 먼저 회원가입하거나 Supabase 웹사이트에서 무료 계정을 만든 뒤 진행해야 합니다.
Lovable 계정 ≠ Supabase 계정
- ●Lovable 계정과 Supabase 계정은 서로 다른 서비스의 계정입니다.
- ●Supabase integration은 사용자가 소유한 Supabase 계정과 조직을 Lovable에 연결하는 기능입니다.
- ●Supabase 계정이 없다면 먼저 회원가입해야 합니다.
- ●Supabase에 처음 가입하면 기본 Organization이 생성됩니다.
- ●이후 Lovable에 해당 Organization의 접근 권한을 승인합니다.
Lovable Cloud vs Supabase integration
Lovable Cloud
처음 시작할 때 추천- • 별도의 Supabase 계정 없이 시작 가능
- • DB·인증·저장소·서버 기능을 Lovable 안에서 관리
- • 초보자와 빠른 MVP 제작에 적합
- • 설정 과정이 간단함
Supabase integration
직접 관리할 때 추천- • 별도의 Supabase 계정 필요
- • 기존 Supabase 조직·프로젝트를 Lovable에 연결
- • Supabase 대시보드에서 데이터·설정을 직접 관리
- • 기존 프로젝트 활용과 세밀한 관리에 적합
Supabase를 처음 사용하고 직접 관리할 필요가 없다면 Lovable Cloud가 더 간단합니다. 기존 Supabase 프로젝트가 있거나 데이터베이스를 직접 관리하려면 Supabase integration을 선택하세요.
나는 어디에 해당하나요?
프로젝트 이름 옆 화살표 열기
무엇을 눌러야 하나요
프로젝트 제목 오른쪽에 있는 ▼ 버튼
이 단계에서 일어나는 일
프로젝트 설정과 연결 기능을 선택할 수 있는 메뉴가 열립니다.
💡 초보자 팁
대시보드의 왼쪽 메뉴가 아니라, 현재 프로젝트 안에서 프로젝트 이름 옆 화살표를 누르는 단계입니다.
Connectors 메뉴 선택
무엇을 눌러야 하나요
열린 메뉴에서 “Connectors” 항목
이 단계에서 일어나는 일
Lovable과 연결할 수 있는 외부 서비스 목록으로 이동합니다.
💡 초보자 팁
Connector는 Lovable과 외부 서비스를 연결하는 통로입니다.
검색창에 Supabase 입력
무엇을 눌러야 하나요
왼쪽 위 검색창에 “supabase” 입력
이 단계에서 일어나는 일
많은 Connector 중 Supabase 항목만 빠르게 찾을 수 있습니다.
💡 초보자 팁
전체 이름을 입력하지 않아도 ‘supa’ 정도만 입력해도 검색됩니다.
Supabase Connector 선택
무엇을 눌러야 하나요
“Connect an external Supabase project”라고 적힌 Supabase 카드
이 단계에서 일어나는 일
Supabase 연결 상세 화면으로 이동합니다.
⚠️ 주의
옆에 표시되는 Cloud는 Lovable Cloud입니다. 외부 Supabase 계정을 연결하려면 Supabase 카드를 선택해야 합니다.
Connect Supabase 버튼 누르기
무엇을 눌러야 하나요
상세 화면 오른쪽의 “Connect Supabase” 버튼
이 단계에서 일어나는 일
Lovable이 Supabase의 로그인 및 권한 승인 화면으로 이동시킵니다.
⚠️ 주의
이 버튼만으로 Supabase 계정이 자동 생성되는 것은 아닙니다.
계정이 있는 경우
이미 Supabase에 로그인되어 있다면 바로 조직 선택과 승인 화면으로 이동할 수 있습니다.
계정이 없는 경우
Supabase 로그인 또는 회원가입 화면이 먼저 나타납니다. 회원가입을 완료한 뒤 연결 과정을 계속합니다.
Supabase 조직 선택 후 Authorize Lovable
무엇을 눌러야 하나요
연결할 Organization 선택 후 “Authorize Lovable” 버튼
이 단계에서 일어나는 일
Lovable이 선택한 Supabase 조직의 프로젝트와 백엔드 기능에 접근할 수 있도록 권한을 부여합니다.
표시되는 주요 권한
Database, Secrets, Auth, Edge Functions, Environment, Projects, PostgREST, Analytics, Storage / Organizations, Domains
쉽게 설명
Lovable이 Supabase에서 데이터베이스를 만들고, 로그인 기능을 설정하고, 비밀키와 서버 기능을 관리할 수 있도록 허용하는 단계입니다.
계정이 없는 사용자
이 화면이 바로 나타나지 않고 로그인/회원가입 화면이 먼저 나타나도 정상입니다. 계정을 만든 뒤 로그인하면 조직 선택 화면으로 이어집니다.
보안
본인이 관리하는 Organization에만 접근을 허용하세요. 학교나 다른 사람의 조직을 임의로 선택하지 마세요.
Authorize Lovable이란?
Supabase 비밀번호를 Lovable에 전달하는 것이 아니라, Supabase가 Lovable에 정해진 접근 권한을 부여하는 OAuth 승인입니다.
연결이 완료된 뒤 무엇을 할 수 있나요?
- ✓사용자 회원가입과 로그인 구현
- ✓데이터베이스 테이블 생성
- ✓학생 또는 사용자 기록 저장
- ✓이미지와 첨부 파일 저장
- ✓서버 함수(Edge Function) 실행
- ✓API 키와 Secret을 서버 측에서 관리
- ✓Supabase 대시보드에서 데이터·인증 상태 확인
바로 써볼 수 있는 예시 프롬프트
Supabase를 사용해 이메일 회원가입과 로그인 기능을 추가해줘.
사용자가 작성한 형성평가 기록을 Supabase 데이터베이스에 저장해줘.
교사는 전체 기록을 보고 학생은 자신의 기록만 볼 수 있도록 권한을 설정해줘.
Gemini API 키는 Supabase Secret에 저장하고 Edge Function에서만 호출해줘.
연결이 제대로 되었나요?
연결이 안 될 때
교사가 반드시 확인할 보안 사항
- ●실제 학생의 민감한 개인정보를 연습용 프로젝트에 입력하지 않기
- ●API 키를 채팅, 화면 코드, 공개 GitHub 저장소에 직접 넣지 않기
- ●Secret과 Edge Function을 사용해 서버 측에서 관리하기
- ●인증만 추가하고 끝내지 말고 사용자별 데이터 접근 권한도 설정하기
- ●교사·학생·관리자 역할에 따른 권한을 테스트하기
- ●공개 배포 전 샘플 계정으로 접근 범위를 점검하기
- ●사용하지 않는 Connector와 권한은 해제하기
⚠ Supabase 연결 자체가 데이터 보안을 자동으로 완성해 주지 않습니다. 인증, 권한, 데이터베이스 정책을 별도로 확인해야 합니다.
용어 도움말
- Organization
- Supabase에서 여러 프로젝트와 구성원을 묶어 관리하는 작업 공간
- Project
- 하나의 앱에서 사용하는 데이터베이스, 인증, 저장소, 서버 기능의 묶음
- OAuth
- 비밀번호를 직접 전달하지 않고 외부 서비스에 정해진 권한을 허용하는 연결 방식
- Authorization
- 외부 앱이 어떤 데이터와 기능에 접근할 수 있는지 허용하는 과정
- Connector
- Lovable과 외부 서비스를 연결하는 기능
- Edge Function
- API 키를 숨긴 채 서버에서 코드를 실행하는 기능