Lovable 로그인 기능 넣기_Supabase 연결 삽질기와 Lovable Cloud

 

오답 코치, 단어장 첵, 

두 가지 앱을 만들었는데, 

로컬 저장(Local Storage) 기반으로 만들었더니

기기에서는 저장이 되지만,

앱을 새로 배포하거나

브라우저 데이터가 초기화되면

저장 내용이 사라질 수 있었다.

 

결론은,

여러 기기에서 사용하기에는

로그인 기능이 꼭 필요하다는 것.

 

그래서 그 기능을 넣기위해,

1. *Supabase 가입 (1분)
   *데이터를 보관하는 클라우드
2. 프로젝트 생성 (1분)
3. Lovable와 연결 (1분)

과정을 거칠 것이며, 

아래 그 삽질의 과정이다. 

목차박스

1. Supabase 가입 2. Supabase에서 프로젝트 만들기 3. Lovable과 연결 4. Lovable 각 프로젝트를 Supabase와 연결시도 _ 여기까지 삽질. 5. Lovable 클라우드 활성화_ Supabase 기반 6. 클라우드 비교하기( Lovable vs Supabase) 7. 추후 클라우드 선택지 8. 마무리

1단계. Supabase 가입

1. https://supabase.com 에 접속
2. Start your project 클릭

 

2단계. 프로젝트 만들기

로그인하면 New Project를 누른다.

1. Project Name : kidarilight
    - 프로젝트 이름 아래 앞으로 오답코치, 단어장첵, 등등 모두 같은 Supabase계정 아래에서 관리할 수 있다. 
2. Type : Personal
3. Plan : Free

그다음 Create organization 을 누르면 된다.

1. Organization : kidarilight
2. Project name : kidarilight-edu

• ✅ Enable Data API
  Lovable가 Supabase와 통신하는 데 필요.
• ❌  Automatically expose new tables
  이 옵션은 새 테이블을 만들면 API 접근 권한을 자동으로 열어주는 기능.
  Supabase도 설명에(수동으로 관리하는 걸 권장합니다.) 라고 써 있음.
  보안을 조금 더 엄격하게 가져가는 게 좋으니 체크 해제.
• ✅  Enable automatic RLS
  학생 A가 학생 B의 데이터를 못 보게 막는 기능. 필수.

 

3단계. Lovable 연결

Supabase는 API 키를 직접 복사해서
붙여넣는 방식도 있지만,
요즘 Lovable은 대부분 OAuth 방식으로 자동 연결을 지원

Lovable에서 확인해 보자.

1. Lovable을 연다.
2. 좌측 메뉴에서 "커넥터" 에서 Supabase를 찾아 연결.
3. Manage Connected Organizations 버튼 눌러서
   Supabase에서 방금 만든 프로젝트 네임이 있는지 확인하기.

 

4단계. Lovable 각 프로젝트를 Supabase에 연동 : 여기까지 삽질.

현재 이 프로젝트가 Supabase와 어떻게 연결되는지 먼저 알려주세요. 제가 Supabase Organization(kidarilight)과 Project(kidarilight-edu)를 이미 만들었고, Lovable에도 Supabase Organization 연결은 완료했습니다. 이 프로젝트를 해당 Supabase 프로젝트에 연결하려면 어떤 방법이 맞는지 알려주세요. - 이미 연결되어 있는지 - 추가로 연결해야 하는지 - 어떤 메뉴나 버튼을 사용해야 하는지 아직 코드는 수정하지 말고, 현재 상태와 다음 단계만 설명해 주세요.

라고 러버블에 프롬프트로 물어봤다가 -1.2크레딧.

이거 찾느라 애먹었다...

결국 Supabase 따로 설정할 필요가 없었다는..

 

현재 새 프로젝트에서는
Lovable Cloud를 사용하는 방향으로
UI가 구성되어 있는 것으로 보였다.

적어도 내가 만든 프로젝트에서는
외부 Supabase 연결 버튼이 비활성화되어 있었다.

(2026년 6월 기준)

 

5. 러버블 클라우드 (수파베이스 기반)

Lovable 에서 "프로젝트"에 들어가서

→ 왼쪽 상단 프로젝트 명 클릭

→ 메뉴가 열리면  "프로젝트 커넥터" 클릭

→ 그러면 오른쪽 화면에 구름모양 "클라우드" 여기서 하단의 파란색 "활성화 버튼"을 누른다.

 

러버블 클라우드는 수파베이스의 오픈 소스 기반을 활용하므로, 수파베이스를 별도로 설정할 필요 없이 첫날부터 바로 운영 가능한 환경을 구축할 수 있습니다.

라는 내용도 뒤늦게 찾아볼 수 있었다...

 

기존 사용자의 기존 프로젝트는

아마도 Supabase에 직접 연결해서 사용한 듯 한데,

 

현재 새 프로젝트에서는
Lovable Cloud를 사용하는 방향으로
UI가 구성되어 있는 것으로 보였다.

적어도 내가 만든 프로젝트에서는
외부 Supabase 연결 버튼이 비활성화되어 있었다.

(2026년 6월 기준)

 

그래서 "일단 개발을 진행하자" 싶어서

일단 러버블 클라우드 사용.

 

6. 클라우드 비교

1. Lovable Cloud

최근(2026년 기준) Lovable Cloud 정책이 크게 바뀌었습니다.

예전처럼 "Supabase 무료 플랜" 개념이 아니라

Lovable Cloud 크레딧으로 운영됩니다.

1. 무료 Cloud 크레딧 : 매월 20 Cloud 크레딧 지급
   - 20크레딧은 프로젝트마다 20씩이 아니라, 워크스페이스 전체에 매달 20크레딧.
   - 이미지·미디어 업로드, 다운로드 및 보관이 Cloud 사용량을 늘리는 핵심 요인.

2. Supabase

Supabase는 요금이 훨씬 명확하다.

 

1. 무료 플랜은 아래를 제공한다. 

1. 월 활성 사용자 50,000명
2. 데이터베이스 500MB
3. 파일 저장 1GB

2. Pro 플랜

1. 월 25달러부터
2. 월 활성 사용자 100,000명
3. 데이터베이스 8GB
4. 파일 저장 100GB

 

Lovable Cloud	Supabase
설정이 매우 쉬움	설정이 조금 더 필요
초기 개발에 유리	장기 운여에 유리
비용 예측이 어려움	비용 예측이 쉬움
Lovable에 의존	데이터와 설정을 직접 관리

 

7. 추후 클라우드 선택지

1. 계속 Lovable Cloud 사용 (가장 쉬움)
   장점 : 설정 거의 없고 유지보수 쉬움
   단점 : 러버블에 의존하면서 클라우드 크레딧 계속 사용
   
   
2. Lovable없이 독립
   GitHub→ Vercel → Supabase
   
   
3. 처음엔 1번으로 해도 되고,
   사용자가 많아져 Cloud 비용이 부담되거나
   직접 서버를 관리하고 싶다면
   클라우드 사용량을 확인하여,
   2번으로 이전할 수도 있다.

 

러버블 공식문서에 "이전"에 관한 문서가 자세히 나와있다.
→ [Lovable 이전과정]

 

최근에는 Cloud 데이터 내보내기 기능과

이전 기능이 개선되고 있다고

공식 FAQ와 커뮤니티에서 안내되고 있는 중임.

 

1. 자동으로 이전되는 것 :
데이터베이스 구조(테이블), 컬럼, 인덱스, RLS 권한, 함수(Function), Trigger, Storage Bucket 구조 이런 건 SQL Migration으로 옮길 수 있게 되어 있음.

2. 수동으로 이전되는 것 :

1. 구글, 애플 로그인 재설정 (Google OAuth 설정을 새 Supabase에 연결하는 작업)
2. 데이터 : 단어장, 학습기록, 오답기록 등 CSV Export → Import방식으로 옮기면 된다.
3. 이미지 : 오답코치의 이미지들은 다운로드 → 업로드과정이 필요
4. 환경변수 : Lovable URL → Supabase URL로 바꾸는 작업.

 

8. 마무리

결국 삽질을 좀 했지만,

오히려 Lovable Cloud와 Supabase의 차이를
정리하는 계기가 되었다.

처음 시작하는 사람이라면
일단 Lovable Cloud로 시작한 뒤,

서비스가 성장하면
Supabase 이전을 고민하는 것도
충분히 현실적인 선택이라고 생각한다.