Lovable AI 홈페이지 무료 제작 – Lovable + Supabase + Resend 조합

자영업자에게 홈페이지가 필요한 시대지만, 외주 제작은 300~500만 원, 본인 제작은 코딩 학습 시간이 필요했습니다. 2025년부터 AI 도구가 이 진입 장벽을 거의 0원 수준으로 낮췄습니다. 프롬프트 하나로 비즈니스 홈페이지 생성 + 고객 정보 저장 + 이메일 알림까지 무료 자동화 가능한 시대.

이 글은 시리즈 네이버 블로그 지수 시대의 종말에서 다룬 “자영업자 시장의 기회”의 구체 실행 편입니다. Lovable + Supabase + Resend 조합으로 비즈니스 사이트를 셋업하는 방법을 정리합니다.

Lovable AI — 무엇이고 무엇이 아닌가

Lovable이란

프롬프트로 풀스택 웹사이트·앱을 자동 생성하는 AI 도구. 자연어로 “내 카페 홈페이지 만들어줘”라고 입력하면 디자인·코드·반응형 레이아웃이 모두 자동 생성됩니다.

무엇에 적합

• ✅ 비즈니스 랜딩 페이지 (자영업자·1인 사업자)
• ✅ 제품 소개 페이지
• ✅ 간단한 상담 신청 사이트
• ✅ 포트폴리오·이력 페이지
• ✅ 이벤트 신청 페이지

무엇에 부적합

• ❌ 블로그·콘텐츠 자산 (콘텐츠 누적·SEO·검색 노출 부족) → 시리즈 클라우드웨이즈 워드프레스 셋업 활용
• ❌ 복잡한 쇼핑몰 (결제·재고·배송 통합)
• ❌ 동영상·이미지 대량 콘텐츠 호스팅
• ❌ 빠른 도메인 SEO 누적 (Lovable 호스팅 제약)

핵심: “콘텐츠 블로그가 아닌 단순 비즈니스 사이트”의 자리에 적합.

전체 워크플로우 한눈에

총 소요 시간: 1시간 이내 (처음 해볼 때 기준)

1단계 — Gemini Deep Research로 고품질 프롬프트

Lovable 결과물의 퀄리티는 프롬프트의 수준이 결정합니다. 짧은 프롬프트 → 일반적 결과. 디테일한 프롬프트 → 차별화된 결과.

Gemini Deep Research 활용

1. Gemini 접속 → 도구 → 딥 리서치 + 사고 모드 활성화
2. 참고하고 싶은 사이트 URL과 본인 비즈니스 정보 입력
3. “이 사이트의 구조를 참고해서, [업종] 사이트를 위한 디테일한 Lovable 프롬프트를 만들어줘” 요청
4. Gemini가 분석한 결과를 그대로 Lovable에 붙여넣기

프롬프트에 들어가야 할 정보

• 비즈니스 종류 (예: 동네 카페·법률 사무소·인테리어 시공사)
• 타겟 고객 (연령·관심사·구매 결정 요소)
• 사이트 목적 (상담 신청·전화 유도·예약·구매)
• 브랜드 톤 (전문적·친근·럭셔리·실용)
• 필수 섹션 (Hero·서비스·후기·연락처)
• 참고 사이트 URL

좋은 프롬프트는 짧으면 200자, 길면 1,000자까지도 됩니다.

2단계 — Lovable에서 홈페이지 생성

1. lovable.dev 접속 → 로그인
2. 메인 검색창에 1단계에서 만든 프롬프트 붙여넣기
3. 생성 클릭 → 약 1~2분 대기
4. 결과 확인 → 마음에 안 들면 수정 요청 (“색상 더 차분하게”, “Hero 섹션 더 임팩트 있게”)

비주얼 에디터로 문구 수정

• 왼쪽 하단 비주얼 에디터 클릭
• 수정 가능한 영역이 파란색 칸으로 표시됨
• 더블 클릭 → 문구 직접 수정
• 영어 설정을 한국어로 변경하면 이해 쉬움
• 실수 시 Back 버튼으로 되돌리기

추가 기능 요청

• 검색창에 한국어로 자연어 요청 가능
• 예: “상담 신청 폼에 예산·일정 입력 칸 추가해줘”
• AI가 알아서 반영해 줌

3단계 — Supabase 연동 (고객 정보 저장)

Lovable 자체에는 데이터 저장 기능이 없습니다. 고객이 신청 폼을 제출하면 어딘가 저장돼야 하는데, Supabase가 그 역할을 합니다.

Supabase란

오픈소스 Firebase 대안. 데이터베이스 + 인증 + 스토리지를 무료로 제공.

무료 플랜 한도:

• 데이터베이스 500MB
• 인증 사용자 5만 명/월
• 스토리지 1GB

소규모 자영업 사이트에는 충분합니다.

연결 방법

1. supabase.com 접속 → Start your project → GitHub 또는 구글로 로그인
2. 프로젝트 이름 + 비밀번호 + 지역 설정 (한국 사용자는 Tokyo·Singapore 선택)
3. 프로젝트 생성 후, Lovable로 돌아와 좌측의 Supabase 연결 버튼 클릭
4. Authorize Lovable → Continue Connect
5. 연결 완료

4단계 — Resend 연동 (이메일 알림)

고객이 신청을 남기면 본인 이메일로 즉시 알림이 와야 빠르게 응답할 수 있습니다.

Resend란

이메일 발송 API 서비스. 무료 플랜:

• 일일 한도: 100통
• 월간 한도: 3,000통

자영업 사이트에는 차고 넘치는 한도.

연결 방법

1. resend.com 접속 → 로그인
2. API Keys 메뉴 → 상단의 API 코드 클릭
3. 브랜드 이름으로 키 생성 + 권한을 Sending Access로 설정
4. API 키 외부 노출 절대 X (코드에 직접 적지 말고 환경변수로)
5. Lovable로 돌아와 프롬프트 창에 “Resend API 키 연결” 요청 → 입력 칸 생성
6. 복사한 키 붙여넣기
7. 테스트 신청으로 본인 이메일 도착 확인

5단계 — Publish + SEO 메타 설정

사이트 공개

1. 우측 상단 Publish 버튼
2. 무료 도메인 자동 생성 (예: yourname.lovable.app)
3. 웹사이트 설정 → 공개

SEO 메타 입력

• 아이콘: 브랜드 로고
• 제목: 사이트 이름 + 한 줄 설명
• 설명: 브랜드가 무엇을 하는 곳인지 (검색 결과·SNS 공유 시 노출)
• Social Image: 링크 공유 시 썸네일. 없으면 AI 자동 생성 기능 활용

게시 → 최종 주소 생성

본인 도메인 연결 (선택)

무료 도메인(*.lovable.app)은 브랜딩에 한계. 본인 도메인을 사용하려면:

• 가비아·후이즈 등에서 도메인 구매 (연 1~3만 원)
• Lovable 설정에서 커스텀 도메인 연결
• DNS A 레코드 / CNAME 설정

크레딧 절약 팁

Lovable 무료 플랜: 하루 5크레딧.

크레딧 소모 패턴

• 이미지 생성: 1크레딧
• 문구 수정: 1크레딧
• 로고 생성: 1크레딧
• 각각 따로 요청 = 매번 차감

절약 방법

여러 수정 사항을 한 번에 모아서 하나의 프롬프트로 전달.

예) “Hero 텍스트를 ‘○○로 시작하세요’로 바꾸고, 상담 신청 폼에 예산 항목 추가하고, 색상을 더 차분하게 조정해줘” → 1 크레딧으로 3가지 수정.

Lovable vs WordPress — 언제 무엇을 쓸 것인가

시리즈 클라우드웨이즈 워드프레스 셋업과 자연 연결되는 부분입니다.

둘 다 운영하는 조합도 가능합니다. Lovable로 비즈니스 랜딩 + WordPress로 블로그 → 콘텐츠 발행 → 시리즈 어필리에이트 수익의 수명의 자산화까지 자연 흐름.

무료 플랜의 한계와 유료 전환 시점

한계

• Lovable 무료 5크레딧/일: 사이트 한 번 만든 후 큰 수정은 며칠 나눠 해야 함
• lovable.app 도메인: 브랜딩 약함
• Supabase·Resend 무료 한도: 트래픽 늘면 곧 한계
• Lovable 인프라 종속: 향후 다른 호스팅으로 이전 어려움

유료 전환 시점

다음 신호가 보이면 유료 검토:

• 일 신청 100건 이상 (Resend 무료 초과)
• 데이터베이스 500MB 초과 (Supabase 무료 초과)
• 본인 도메인 + 브랜딩 강화 필요
• 자주 수정·디벨롭 필요

각 서비스의 유료 플랜은 월 $20~25 수준에서 시작.

AI 도구가 비즈니스 사이트 진입 장벽을 거의 0원으로 만든 지금, 남는 변수는 “실행하는가 안 하는가” 뿐입니다.

자전거를 책으로만 배우면 못 탑니다. 직접 타고 넘어지고 다시 일어서야 익혀집니다. Lovable·Supabase·Resend도 마찬가지 — 1시간 투자로 1개 사이트를 직접 셋업해 보는 게 영상 10개 시청보다 훨씬 빠릅니다.

시리즈 네이버 블로그 지수 시대의 종말에서 다룬 “자영업자에게 온 가장 큰 기회”는 본인 비즈니스의 디지털 거점부터 시작합니다. 그 거점이 오늘부터 무료로 가능합니다.