SESSION 04 · FINAL

핵심 기능 구현
+ 배포

"진짜로 만들기" — Supabase 연동, 트랙별 기능, 그리고 세상에 공개하기

이준서 (쭌스) hosohere@gmail.com
SESSION 04 GOALS

오늘이 끝나면 손에 남는 것

01
작동하는 서비스
Supabase가 연동되어 데이터가 실제로 저장·조회되는 상태
02
배포된 URL
누구에게든 "이거 써봐" 하고 링크를 보낼 수 있는 상태
03
검증 지표
배포 후 "성공인지 아닌지" 판단할 기준 1-2개
AGENDA

오늘의 구조

파트내용시간
1부오늘의 로드맵5분
2부Supabase 연동 가이드15분
3부트랙별 핵심 기능 구현 실습35분
4부배포 — 웹 + 앱20분
5부마무리 + 다음 단계 + 보충 자료15분
REVIEW

세션 3 복습

오늘은 여기서 이어서 — 기능을 연결하고, 세상에 공개합니다.
PART 01 · 5분

오늘의 로드맵

디자인 완성에서 배포까지, 한 세션 안에 끝냅니다

PART 01

오늘의 로드맵

지금 상태 — 디자인 완성 + DB 설계 + Knowledge 설정
▼
[2부] Supabase 연결 — DB + Auth를 서비스에 붙이기
▼
[3부] 트랙별 핵심 기능 — 데이터가 실제로 저장·조회
▼
[4부] 배포 — URL 생성, 실제 작동 확인
▼
최종 — 배포된 URL + 실제 데이터 + 검증 지표
PART 02 · 15분

Supabase
연동 가이드

세션 3에서 개념을 배웠으니, 오늘은 실제로 연결합니다

PART 02 · ARCHITECTURE CHOICE

"Supabase 연동"의 진짜 의미

Lovable은 기본으로 Lovable Cloud(자체 백엔드)를 씁니다.
"Connect to Supabase" 버튼을 누르는 순간 → Lovable Cloud 대신 내 Supabase가 백엔드 역할을 하게 돼요.
기본값 — Lovable Cloud
Database → Lovable 관리
Auth → Lovable 관리
Storage → Lovable 관리
Edge Functions → Lovable 관리

→ Lovable 떠나면 데이터 이전 번거로움
우리 방식 — 내 Supabase ⭐
Database → 내 Supabase
Auth → 내 Supabase
Storage → 내 Supabase
Edge Functions → 내 Supabase

→ 데이터 소유권 내게 있음 ✅
핵심: Lovable은 "AI 빌더"로만 쓰고, 백엔드는 내가 소유하는 구조.
나중에 Lovable 구독을 끊어도 데이터와 서비스는 그대로 남습니다.
PART 02 · DASHBOARD SCOPE

Supabase 대시보드, 어디까지 쓸까?

Supabase 대시보드는 메뉴가 많아서 복잡해 보이지만,
수강생은 사실상 3~4개 메뉴만 쓰면 됩니다. 나머지는 Lovable이 알아서 해줘요.
메뉴수강생 용도빈도
Table Editor🔍 Lovable이 만든 테이블·데이터 구경자주 (확인용)
SQL Editor🔧 Lovable이 SQL 주면 붙여넣기 Run가끔
Authentication⚙️ 이메일 인증 끄기 설정1번만
Edge Functions📦 Secrets에 API 키 등록 (트랙 C만)1번만
Database 설정 / Storage / Realtime / Logs 등❌ 안 씀 (Lovable이 처리)—
핵심: Table Editor는 "구경용" — 테이블 직접 만들 일 거의 없습니다. Lovable에게 요청하면 자동으로 생성돼요.
PART 02

연동 4단계

01
Lovable + Supabase 연결
버튼 한 번 클릭. URL과 Key가 자동 설정됨.
02
DB 테이블 생성
세션 3에서 받은 SQL을 실행 + RLS 설정.
03
회원가입/로그인 연결
Supabase Auth 프롬프트 한 줄이면 끝.
04
데이터 저장 테스트
폼 입력 → Supabase 대시보드에서 확인.
PART 02 · STEP 01

Lovable에서 Supabase 연결

1. Lovable 프로젝트 열기 2. 왼쪽 사이드바 → "Supabase" (또는 Integrations) 3. "Connect to Supabase" 클릭 4. Supabase 로그인 → 프로젝트 선택 (또는 새로 생성) 5. 연결 완료!
이 버튼 하나로 프론트엔드와 백엔드가 연결됩니다. Supabase URL, Anon Key가 자동으로 설정됩니다.
PART 02 · STEP 02

DB 테이블 생성

방법 1: Lovable에 요청
"Supabase에 다음 테이블을 만들어줘. [세션 3 DB 설계 붙여넣기] 테이블 생성 후 RLS도 설정해줘"
방법 2: SQL Editor 직접 실행
1. Supabase 대시보드 → SQL Editor
2. "New query" 클릭
3. 세션 3 CREATE TABLE SQL 붙여넣기
4. "Run" 클릭
5. Table Editor에서 확인
PART 02 · STEP 02

RLS 설정은 AI에게 맡기기

이 테이블들의 RLS(Row Level Security) 정책을 설정해줘. 서비스 설명: [내 서비스 한 줄 설명] 테이블 목록: [테이블 이름들] 기본 규칙: - 공개 데이터(상품, 게시글 등)는 누구나 읽기 가능 - 개인 데이터(주문, 프로필 등)는 본인만 읽기/쓰기 - 사전등록 폼 같은 건 누구나 데이터 추가 가능
RLS는 선택이 아니라 필수. 안 하면 아무나 API로 모든 데이터에 접근 가능합니다.
PART 02 · STEP 03

회원가입/로그인 한 번에

Supabase Auth로 이메일 로그인/회원가입을 추가해줘. 요구사항: - /login 페이지에 로그인 폼 (이메일 + 비밀번호) - /signup 페이지에 회원가입 폼 - 로그인하지 않으면 /login으로 자동 이동 (Protected Route) - 로그인 후 /dashboard로 이동 - 로그아웃 버튼은 헤더에 추가 - 기존 레이아웃과 네비게이션 디자인은 수정하지 마
PART 02 · STEP 03

개발 중에는 이메일 인증 끄기

Supabase 대시보드 → Authentication → Settings → Email Auth → "Confirm email" 토글 끄기 → 테스트할 때 편합니다
⚠️ 배포할 때는 반드시 다시 켜세요! 악성 가입 방어를 위해 필수입니다.
PART 02 · TRACK C

트랙 C 전용 — OpenAI API Key 발급

트랙 C(AI형)는 OpenAI API를 호출해야 해서 개인 API 키가 필요합니다.
총 3단계 · 약 10분 소요됩니다.
Step 1. OpenAI 계정 가입 + 결제 설정 (약 3분)
▼
Step 2. API Key 생성 & 복사 (약 2분)
▼
Step 3. Usage Limit 설정 (과금 방지, 약 3분)
▼
Lovable / Supabase 환경변수에 등록 → 완료
PART 02 · TRACK C · STEP 01

Step 1 — 가입 + 결제 설정

1. https://platform.openai.com/signup 접속 2. Google 계정 또는 이메일로 가입 3. 이름 · 조직명 입력 (Personal 선택 OK) 4. 휴대폰 번호 인증 (+82 한국 번호 가능) 5. 로그인 완료 → 대시보드 진입 ─ 이어서 결제 설정 ─ 6. 좌측 메뉴 → Settings → Billing 7. "Add payment method" 클릭 8. 해외결제 가능한 카드 등록 (Visa/Master) 9. "Add to credit balance" → 최소 $5 충전
⚠️ 주의: 2024년부터 무료 크레딧이 거의 제공되지 않습니다. API 호출을 하려면 반드시 카드 등록 + 선불 충전이 필요해요. $5면 강의 실습에 충분합니다.
PART 02 · TRACK C · STEP 02

Step 2 — API Key 생성 & 복사

1. https://platform.openai.com/api-keys 이동 2. "Create new secret key" 버튼 클릭 3. Name 입력 (예: "lovable-chatbot") → 나중에 구분하기 위한 이름일 뿐 4. Permissions: "All" 선택 (초보자는 기본값) 5. "Create secret key" 클릭 6. 🔑 sk-proj-... 또는 sk-... 형태의 키 표시됨 7. "Copy" 버튼 클릭 → 안전한 곳에 붙여넣기
⚠️ 한 번만 볼 수 있습니다!
이 화면을 닫으면 키를 다시 볼 수 없어요. 놓치면 새로 만들어야 합니다. 메모장 등에 임시로 저장해뒀다가 Lovable/Supabase에 등록하세요.
PART 02 · TRACK C · STEP 03

Step 3 — Usage Limit 설정

설정 위치
Settings → Limits
(또는 Billing → Usage limits)

Monthly budget — 월 최대 청구액
예: $10

Notification threshold — 경고 기준
예: $5 도달 시 이메일
왜 반드시 설정?
API 키가 실수로 노출되면 하룻밤에 수백만 원 과금 가능

코드에 버그가 있어 무한 호출 루프가 돌면 마찬가지

→ Usage Limit이 최후의 보험
초보자 추천값: Monthly budget $10, Notification threshold $5. 강의 실습 기준 $10이면 절대 초과할 수 없는 수준이에요.
PART 02 · TRACK C · FINISH

마지막 — 키를 어디에 등록하나?

Lovable + Supabase 연결된 상태에서 API 키는 실제로 Supabase Edge Function Secrets에 저장됩니다. Lovable은 이 Secret을 읽어서 API 호출에 사용해요.
방법 A · Lovable이 자동 (추천)
Lovable 채팅창에 요청:
"OpenAI로 챗봇 만들어줘. API 키는 Supabase Secret으로 관리해줘"

→ Lovable이 "API 키 입력해주세요" 팝업 띄움
→ 키 붙여넣기 → 자동 저장 완료

메뉴 찾아갈 필요 없음
방법 B · Supabase에서 직접
1. supabase.com 로그인 → 내 프로젝트
2. 좌측 Edge Functions
3. "Manage secrets" (또는 Project Settings → Edge Functions → Environment Variables)
4. New secret → KEY: OPENAI_API_KEY / VALUE: sk-...
5. Save
절대 금지: 코드에 직접 sk-...를 박아넣기. GitHub에 올라가는 순간 봇이 크롤링해서 몇 시간 안에 탈취됩니다.
PART 02 · STEP 04

연결 확인 — 데이터 저장 테스트

1. Lovable 프리뷰에서 폼에 데이터 입력 2. 제출 클릭 3. Supabase 대시보드 → Table Editor에서 데이터 확인 4. 데이터가 보이면 → 연동 성공!
입력한 데이터가 Supabase에 들어와 있다면, 이게 실서비스의 시작입니다.
PART 02 · TROUBLESHOOTING

연동 중 막히면

증상확인할 것
"Supabase connected"가 안 뜸Supabase 로그인 상태, 프로젝트 존재 확인
테이블이 안 만들어짐SQL Editor 에러 메시지, SQL 문법 체크
로그인이 안 됨Authentication → Settings, Email Auth 활성화
데이터가 저장 안 됨RLS 정책 확인, 에러 콘솔 확인
해결 안 되면 Lovable에게 에러 메시지를 그대로 복사해서 붙여넣고 도움 요청하세요.
PART 03 · 35분

트랙별
핵심 기능 구현

내 트랙에 맞는 프롬프트로 시작하면 빠릅니다

PART 03

내 트랙 확인

TRACK A · 랜딩형
사전등록 · 문의 수집

오늘: 폼 → Supabase 저장 연동
TRACK B · 서비스형
CRUD 필요

오늘: 목록 조회 · 등록 · 상세보기
TRACK C · AI형
AI 분석 · 챗봇

오늘: OpenAI API 연동
PART 03 · TRACK A

트랙 A — 사전등록 폼 연동

사전등록 폼을 Supabase에 연동해줘. 현재 상태: - registrations 테이블이 Supabase에 이미 있음 - 컬럼: id, name, email, message, created_at 요구사항: - 이름, 이메일, 한 줄 소개 입력 필드 - Supabase registrations 테이블에 저장 - 제출 완료 시 "등록이 완료되었습니다!" 성공 메시지 - 이미 등록된 이메일이면 중복 안내 메시지 - 제출 버튼에 로딩 상태 표시 - 기존 디자인은 수정하지 마
PART 03 · TRACK A

트랙 A — 완성 후 추가하기

사전등록 현황을 보여주는 카운터를 히어로 섹션에 추가해줘. - "현재 N명이 사전등록했습니다" 형태 - Supabase에서 registrations 테이블의 행 수를 가져와서 표시 - 실시간 업데이트는 필요 없고, 페이지 로드 시 한 번만 조회
사회적 증거(Social Proof) — "N명이 이미 등록했어요"는 전환율에 큰 영향을 줍니다.
PART 03 · TRACK B

트랙 B — CRUD 기능 구현

[서비스명]의 핵심 CRUD 기능을 Supabase에 연동해줘. 현재 상태: - [테이블명] 테이블이 Supabase에 이미 있음 - 컬럼: [세션 3에서 설계한 컬럼 목록] - Supabase 연결 완료됨 요구사항: - 목록 조회: Supabase에서 데이터 불러와서 카드 형태로 표시 - 등록: 폼으로 새 데이터 추가 → Supabase에 저장 - 상세 보기: 카드 클릭하면 상세 정보 표시 - 삭제: 본인 데이터만 삭제 가능 - 로딩 중 스켈레톤 UI 표시 - 에러 시 한국어 안내 메시지 - 기존 디자인은 수정하지 마
PART 03 · TRACK B

트랙 B — 검색 기능

검색 기능을 추가해줘. - 목록 페이지 상단에 검색 입력창 - [검색 대상 컬럼]에서 키워드 검색 - 실시간 검색 (타이핑할 때마다 결과 업데이트) - 검색 결과가 없으면 "검색 결과가 없습니다" 표시
PART 03 · TRACK C · PATTERN 1

트랙 C — 챗봇 패턴

OpenAI API를 사용한 챗봇 기능을 만들어줘. 요구사항: - 화면 하단에 채팅 입력창 - 사용자가 메시지 입력 → AI가 응답 - 시스템 프롬프트: "당신은 [역할]입니다. [규칙]에 따라 답변하세요." - API 키는 환경변수(OPENAI_API_KEY)로 관리 - Edge Function을 통해 호출 (API 키 노출 방지) - 대화 내역 유지 (같은 세션 동안) - 로딩 중 "생각 중..." 표시 - 에러 시 "다시 시도해주세요" 안내 - 기존 디자인은 수정하지 마
PART 03 · TRACK C · PATTERN 2

트랙 C — 분석/추천 패턴

사용자 입력을 받아 AI가 분석/추천해주는 기능을 만들어줘. 예시 use case: - 고민 입력 → 맞춤 책 추천 - 성향 질문 답변 → 직무 추천 - 보험 내역 붙여넣기 → 보장 분석 - 작성한 글 → 개선 제안 요구사항: - 입력 폼 (텍스트 필드 또는 질문 몇 개) - "분석하기" 버튼 클릭 → OpenAI API 호출 - 시스템 프롬프트: "당신은 [역할]입니다. 사용자의 입력을 보고 [결과 형식]으로 답변하세요." - 응답을 카드/리스트 형태로 예쁘게 표시 - API 키는 환경변수(OPENAI_API_KEY)로 관리 - Edge Function을 통해 호출 (API 키 노출 방지) - 로딩 중 "분석 중..." 표시 - 기존 디자인은 수정하지 마
PART 03 · TRACK C · SECURITY

트랙 C 보안 주의사항

실제 사례: 프론트엔드에 API 키 노출 → 하룻밤 사이 수백만 원 과금된 개발자가 많습니다.
PART 03 · DEBUGGING

막혔을 때 디버깅 프롬프트

[화면명]에서 [증상] 문제가 발생했습니다. 상황: - 컴포넌트: [어떤 부분] - 작업: [뭘 하려고 했는지] - 관련 테이블: [Supabase 테이블명] - 지금 상황: [현재 어떤 상태인지] - 원래대로면: [어떻게 돼야 하는지] - 콘솔 에러 메시지: [있다면 복사] 추가로 문제 원인을 5-7개 정도 가정해보고, 가장 가능성 높은 원인 1-2개로 추린 뒤, 로그를 추가하며 가설을 검증하고 원인이 확인되면 수정 방향을 제시하세요.
PART 03 · COMMON ERRORS

자주 발생하는 에러

에러원인해결
"Permission denied"RLS 정책 미설정해당 테이블 RLS 정책 추가
"relation does not exist"테이블이 없음SQL Editor에서 CREATE TABLE 실행
"Invalid API key"환경변수 미설정Lovable 환경변수에 키 입력 확인
데이터가 안 보임RLS가 너무 엄격필요한 SELECT 정책 추가
"Failed to fetch"Supabase 연결 끊김Lovable에서 재연결
로그인 후 데이터 안 보임user_id 매칭 문제RLS의 auth.uid() 확인
완성 못 해도 괜찮습니다.

어디서 막혔는지 파악하는 것도 큰 성과입니다.

세션 이후 디스코드에서 이어서 도움을 받을 수 있습니다

PART 04 · 20분

배포
웹 + 앱

웹은 URL로, 앱 서비스는 홈 화면 추가 또는 앱스토어로 공개

PART 04 · CHECKLIST

배포 전 체크리스트

기능
□ 모든 페이지가 에러 없이 작동
□ 핵심 기능이 실제 작동
□ Supabase 연동 정상
□ 로그인/회원가입 작동 (B/C)
디자인
□ 모바일 레이아웃 OK
□ 버튼·링크 모두 클릭 가능
□ 빈 상태 화면 정상
보안
□ 환경변수 설정됨
□ RLS 활성화
□ API 키 프론트 노출 없음
콘텐츠
□ Lorem ipsum 없음
□ 서비스명·설명 정확
□ 연락처 올바름
PART 04 · WEB DEPLOY

웹 배포 — Lovable Publish

1. Lovable 프로젝트 우상단 "Publish" (또는 "Share") 클릭 2. 도메인 선택: - Lovable 기본: [프로젝트명].lovable.app (무료) - 커스텀 도메인: 내가 산 도메인 (유료 플랜) 3. "Publish" 클릭 4. 1-2분 대기 5. URL이 생성되면 → 브라우저에서 접속 확인!
PART 04 · WHAT IS DEPLOYMENT

"이거 어떻게 배포해요?"

배포 = 내 컴퓨터가 아니라
인터넷에 올려서 누구나 접속하게 하는 것

URL이 생기면 배포 끝난 겁니다.

Lovable Publish 외에도 나중에 코드를 Export하면
Vercel, Netlify 같은 플랫폼으로도 배포할 수 있어요

PART 04 · WEB HOSTING

웹앱 배포 플랫폼 3종

Vercel
무료 · 가장 쉬움

Next.js 만든 회사
바이브코딩 기본 추천
한국에서도 속도 빠름
Netlify
무료

정적 사이트에 강함
빌드 설정이 직관적
커뮤니티 활발
Cloudflare Pages
무료 · 전세계 빠름

Cloudflare CDN 기반
무제한 대역폭
개발자에게 인기
공통 — GitHub 연결하면 자동 배포. 코드 푸시할 때마다 알아서 업데이트됩니다.
PART 04 · BACKEND HOSTING

백엔드가 필요하면

Railway
월 $5부터

서버 배포 직관적
DB도 함께 호스팅 가능
Render
무료 티어 있음

유료 Railway 대안
슬립 모드 있음(무료)
Supabase ⭐
DB + 인증 무료

우리가 이미 쓰는 것
별도 서버 필요 X
프론트만 있으면 Vercel로 충분. 서버/DB 필요하면 Supabase(이 강의 기준) 또는 Railway/Render 선택.
PART 04 · COMMON QUESTION

"Lovable 프로젝트는 Lovable로만 배포되나요?"

아니요! Lovable은 GitHub 연동 기능을 내장하고 있어서, GitHub에 한 번 올려두면 어디든 배포 가능합니다.
Lovable 프로젝트
▼ GitHub 연동 버튼 클릭
GitHub 레포지토리 (자동 생성)
▼ 연결
Vercel / Netlify / Cloudflare Pages
▼
배포된 URL 🚀 · 커스텀 도메인도 자유롭게
양방향 싱크: Lovable에서 수정하면 GitHub에도 자동 반영. GitHub에서 수정해도 Lovable로 돌아옴.
PART 04 · GITHUB UPLOAD

GitHub에 올리는 법

걱정 마세요. git 명령어 하나도 몰라도 됩니다. Lovable 버튼 한 번이면 끝이에요.
01
GitHub 계정 만들기
github.com 가입
이메일 인증 + 사용자명 설정

※ 무료. 신용카드 불필요.
02
Lovable에서 연결
프로젝트 우상단 GitHub 아이콘
(또는 Project Settings → GitHub)
→ "Connect to GitHub"
→ OAuth 로그인 승인
03
레포 자동 생성
"Create Repository" 클릭
→ Lovable이 자동으로 레포 생성
→ 코드 자동 업로드
→ 완료 ✅
이후 Lovable에서 수정할 때마다 자동으로 GitHub에 반영됩니다.
이제 Vercel/Netlify에서 이 레포를 선택해서 배포만 누르면 끝!
PART 04 · QUICK SUMMARY

진짜 10분이면 끝

1. 코드 GitHub에 올리기 (Lovable → Export to GitHub)
▼
2. Vercel / Netlify 가입 → GitHub 계정 연결
▼
3. 내 저장소 선택 → "Deploy" 버튼 클릭
▼
4. URL 받아서 공유 — 배포 완료 ✅
GitHub에 코드만 올라가 있으면 Vercel이 자동으로 빌드하고 배포까지 해줍니다. 진짜 10분입니다.
PART 04 · COMMON MISTAKES

배포 시 자주 하는 실수

❌ API 키를 코드에 박기
GitHub에 올라가면 누구나 훔쳐감
→ 반드시 환경변수(.env)로 빼기
→ 배포 플랫폼 설정에 입력
❌ HTTPS 안 켜기
HTTP만 쓰면 브라우저 경고
→ Vercel/Netlify/Lovable 자동 HTTPS
→ 무료 (Let's Encrypt 기반)
→ 커스텀 도메인 연결해도 자동
❌ 404/500 페이지 없음
잘못된 URL 접속 시 하얀 화면
→ 404, 500 페이지 만들어두기
→ "홈으로 돌아가기" 버튼 필수
PART 04 · POST-DEPLOY

배포 후 바로 할 것

지금 여러분이 만든 서비스에 실제 사용자 데이터가 들어옵니다.
PART 04 · MOBILE APP

"저는 앱을 만드는데,
앱스토어에 올려야 하지 않나요?"

Lovable로 만든 것은 웹앱입니다.
하지만 웹앱도 앱처럼 사용할 수 있습니다.

PART 04 · PWA

PWA — Progressive Web App

웹사이트인데 앱처럼 동작하는 기술
PART 04 · PWA

웹 vs PWA vs 네이티브

비교일반 웹사이트PWA네이티브 앱
설치 방법URL 접속"홈 화면에 추가"앱스토어 다운로드
주소창있음없음 (앱처럼)없음
앱스토어XX (가능)O
심사없음없음1~7일
업데이트즉시즉시심사 후
개발 난이도쉬움쉬움 (설정 추가)어려움
PART 04 · PWA

PWA 설정 프롬프트

이 프로젝트를 PWA(Progressive Web App)로 설정해줘. 요구사항: - manifest.json 생성 (앱 이름, 아이콘, 테마 색상) - 앱 이름: [서비스명] - 테마 색상: [메인 색상] - Service Worker 등록 (기본 캐싱) - 모바일에서 "홈 화면에 추가" 시 앱처럼 전체 화면으로 실행 - 아이콘은 기존 로고 사용
PART 04 · PWA

사용자에게 안내할 설치 방법

🍎 아이폰 (Safari)
1. Safari에서 서비스 URL 접속
2. 하단 공유 버튼 (□↑) 탭
3. "홈 화면에 추가" 선택
4. "추가" 탭
→ 홈 화면에 앱 아이콘!
🤖 안드로이드 (Chrome)
1. Chrome에서 서비스 URL 접속
2. 주소창 옆 ⋮ → "앱 설치"
3. "설치" 탭
→ 홈 화면에 앱 아이콘!
MVP 단계에서는 PWA가 최선의 선택. 심사 없이 바로 배포, 업데이트도 즉시 반영.
PART 04 · APP STORE

앱스토어가 정말 필요한가?

✅ 앱스토어가 필요한 경우
푸시 알림이 핵심 기능
카메라·GPS 등 기기 기능 깊게 사용
"앱스토어에 있어야 신뢰감" B2C
앱스토어 검색 유입 필요
❌ 불필요한 경우
B2B/내부 도구 (URL 공유면 충분)
랜딩 + 사전등록 (웹이 훨씬 효율)
아직 사용자 10명 이하 (검증 먼저)
PART 04 · APP STORE

웹앱을 앱스토어로

방법난이도비용설명
PWABuilder쉬움무료Microsoft 도구. PWA를 앱스토어 패키지로 변환
Capacitor보통무료Ionic 팀의 도구. 웹앱을 네이티브 껍데기로
Expo (React Native)어려움무료처음부터 네이티브로 다시 만들 때
가장 쉬운 길: https://pwabuilder.com → 배포 URL 입력 → "Package for stores" 클릭 → 패키지 다운로드 → 스토어 제출
PART 04 · APP STORE

Google Play vs App Store

항목Google Play (Android)App Store (iOS)
개발자 계정 비용$25 (1회)$99/년
심사 기간최소 14일 + 1~3일 심사1~7일 (더 까다로움)
심사 난이도⚠️ 2023.11~ 까다로워짐엄격
PWA 래핑 앱상대적으로 관대⚠️ 거절 가능성 있음
⚠️ Apple 주의사항: "단순히 웹사이트를 감싼 앱"은 거절될 수 있습니다. 최소한 일부 네이티브 기능이 있어야 함.
PART 04 · ANDROID REALITY

안드로이드도 더 이상 쉽지 않다

한동안 "Android는 바로 올리면 된다"가 정설이었지만, 2023년 11월부터 정책이 바뀌었습니다. 앱만 만들어 올린다고 끝이 아닙니다.
14D
최소 14일 대기
정식 출시 전 Closed Testing을 14일 연속 통과해야 함
12
테스터 12명 필수
12명이 14일 동안 꾸준히 앱을 써야 함. 이탈 시 불이익
↑
업데이트 꾸준히
"방치된 앱"으로 보이면 심사가 지연되거나 반려됨
PART 04 · GOOGLE PLAY POLICY

Closed Testing 의무 요건

Google Play 정책 변경 (2023년 11월~)
개인 개발자 계정은 정식 출시 전에 Closed Testing을 반드시 통과해야 합니다.
12
테스터 12명 이상
이메일 또는 Google 그룹으로 opt-in한 테스터 12명 이상이
앱을 설치하고 사용해야 함
14D
14일 연속 참여
12명 전원이 14일 동안 꾸준히 앱을 사용해야 함.
중간에 이탈하면 카운트 리셋될 수 있음
↑
업데이트 꾸준히
14일 동안 앱 업데이트를 계속 올려야 "활발한 개발" 증빙.
방치하면 심사 지연
✓
심사 신청
14일 이후 Production 액세스 신청 →
Google 추가 심사 1~3일
PART 04 · BACKGROUND

왜 이렇게 까다로워졌나?

배경
구글 플레이에 스팸·저품질·사기 앱이 너무 많아짐

개인 계정을 통한 악성 앱 유포 증가

Apple과의 품질 격차 줄이기 위한 대응
영향
2023년 11월 13일 이후 생성된 개인 계정이 대상

법인(Organization) 계정은 면제
→ 대신 DUNS 번호 필요 ($300+)

인디 개발자 진입 장벽 상승
비개발자에게 시사점: "앱스토어 = 쉬운 옵션"이라는 인식은 옛말. 지금은 PWA로 시작 → 검증 완료 후 앱스토어가 훨씬 현실적입니다.
PART 04 · PRACTICAL TIP

테스터 12명 구하는 법

현실 팁: 12명이 "14일 연속 사용"이라 이탈 위험 큼. 15~20명을 미리 모집해 버퍼를 두세요.
PART 04 · STRATEGY

추천 배포 전략

1단계 — PWA로 배포 (지금 바로)
▼
2단계 — 사용자 100명+ 되면 Google Play에 올리기
▼
3단계 — 필요하면 App Store 도전 (네이티브 기능 추가 후)
핵심: "앱스토어가 있어야 시작"이라는 환상을 버리세요.
Google Play도 개인 계정은 14일 Closed Testing 필수 → PWA로 먼저 검증하면서 그 사이 테스터 모집하는 게 현실적입니다.
PART 04 · COMMON ISSUES

배포 후 흔한 문제

문제원인해결
빈 화면빌드 에러Lovable 콘솔 에러 메시지 확인
로컬만 됨, 배포 X환경변수 미설정배포 환경에 환경변수 추가 (다음 장 참고)
Supabase 연동 XURL/Key 문제Supabase 연결 상태 재확인
"연결할 수 없음"배포 미완료/DNS1-2분 대기 후 재시도
모바일 깨짐반응형 미적용"모바일 수정해줘" 요청
배포 후 가장 흔한 범인은 환경변수입니다. 로컬에선 되는데 배포하면 안 되면 환경변수부터 확인.
PART 04 · DEEP DIVE · OPTIONAL

왜 로컬은 되고 배포는 안 될까?

환경변수는 "환경마다 따로 보관되는 주소록"입니다. 한 환경에 등록한다고 다른 환경이 자동으로 알진 않아요.
🏠 로컬 (Lovable)
코드 + 값 모두 있음

Supabase URL ✅
Anon Key ✅
OpenAI Key ✅

→ 잘 작동
📦 GitHub (이삿짐)
코드만 이동

값(.env)은 제외
(.gitignore 보안 정책)

→ 귀중품은 따로 챙겨야
🏢 배포 (Vercel)
코드 있음 + 값 없음

Supabase URL ❌
Anon Key ❌

→ "연결 실패" 에러
해결: 배포 플랫폼(Vercel/Netlify) 대시보드에서 환경변수를 직접 등록 → Redeploy. ※ Lovable Publish만 쓰면 이 문제는 거의 안 생김
PART 04 · ENV SETUP

환경변수 어디에 추가?

Lovable
프로젝트 → Integrations / Supabase 패널
→ Edge Function Secrets
→ KEY · VALUE 입력 후 저장

※ Supabase URL/Key는 자동 설정됨
Vercel
프로젝트 → Settings
→ Environment Variables
→ Name · Value 입력

⚠️ 저장 후 Redeploy 눌러야 반영
Netlify
Site settings
→ Build & deploy
→ Environment variables

저장 후 재배포하면 반영
⚠️ 헷갈리기 쉬운 규칙:
NEXT_PUBLIC_ / VITE_ 접두사 = "공개해도 OK" 표시 (브라우저에 노출됨)
접두사 없음 = "절대 비밀" (서버에서만 사용, OpenAI·Service Role 키 등)
PART 04 · DOMAIN

커스텀 도메인 연결

기본은 xxx.vercel.app 또는 xxx.lovable.app 같은 주소가 발급됩니다. 내 도메인을 쓰려면 아래 순서:
1. 도메인 구매 (연 1~3만원)
Namecheap — 해외, 저렴
Cloudflare — 원가 수준, DNS 관리 편리
가비아 — 한국 1위, .kr 도메인

팁: 원하는 도메인은 개발 시작 전 미리 확보!
2. 배포 플랫폼에 연결
Vercel → Settings → Domains → Add
Lovable → Project Settings → Custom Domain

3. DNS 설정 (안내대로 따라하면 됨)
→ A 레코드, CNAME 입력
→ 몇 분~몇 시간 후 연결 완료
PART 04 · VERIFY

트랙별 작동 확인

Track A
폼 입력 → 제출
"등록 완료" 메시지
Supabase Table Editor에서 데이터 확인
→ 데이터 보이면 성공!
Track B
회원가입 → 로그인
데이터 등록
목록에서 조회 확인
상세 보기 클릭 확인
Track C
로그인 (필요시)
AI 기능 테스트
응답 품질·속도 확인
에러 시 콘솔 확인
PART 05 · 15분

마무리
+ 다음 단계

배포는 끝이 아니라 시작입니다

PART 05 · METRICS

뭘 봐야 성공인가?

트랙핵심 지표측정 방법
A · 랜딩사전등록 전환율방문자 중 폼 제출한 비율
B · 서비스가입 후 첫 액션 비율가입자 중 데이터 1개 이상 등록한 비율
C · AI형AI 기능 사용 횟수사용자 1인당 평균 AI 호출 횟수
"뭘 봐야 성공인지" 모르면 만들어도 의미 없습니다. PRD의 가설과 연결되는 지표 1-2개를 정하세요.
PART 05 · GOALS

현실적인 초기 목표

1W
1주일 목표
지인/지인의 지인 10명에게 공유
실제 사용 데이터 5건+
2W
2주일 목표
SNS/커뮤니티에 공유
Supabase에 실제 사용자 20명+
1M
1개월 목표
유료 전환 또는 재방문율 확인
피드백 기반 개선 1-2회
PART 05 · BML LOOP

Build — Measure — Learn

만들기 (Build) — 오늘 여기까지 했습니다
▼
측정하기 (Measure) — Supabase 데이터, 사용자 반응 확인
▼
배우기 (Learn) — 뭐가 통했고 뭐가 안 통했는지
▼
다시 만들기 — 개선해서 반복
바이브코딩의 가장 큰 장점은 이 루프를 혼자서도 빠르게 돌릴 수 있다는 겁니다.
PART 05 · NEXT STEPS

다음 주에 당장 할 일

PART 05 · ROADMAP

서비스 확장 로드맵

Phase 1 · 검증
지금 ~ 2주

지인에게 공유, 반응 수집
핵심 기능 1-2개 개선
초기 사용자 확보
Phase 2 · 확장
2주 ~ 1개월

소셜 로그인 추가
이미지 업로드
결제 연동
반응형 완성
Phase 3 · 성장
1개월 ~ 3개월

SEO 최적화
마케팅 시작
피드백 기반 개선
필요 시 개발자 협업
PART 05 · HANDOFF

Lovable을 넘어서 — 개발자 협업

코드 Export 방법: 1. Lovable → Project Settings → Export to GitHub 2. GitHub 리포지토리 생성됨 3. 이 코드를 개발자에게 전달 4. 개발자가 Cursor, VS Code 등으로 이어서 개발
알아두면 좋은 점: Lovable은 React + TypeScript + Tailwind로 만듭니다. "React 할 줄 아는 분"을 찾으면 됩니다. PRD + DB 설계 문서가 있으니 인수인계도 수월합니다.
PART 05 · TIPS

Lovable 잘 쓰는 팁

Undo/Redo 적극 활용
망가지면 바로 되돌리기. 여러 단계 전으로도 가능
브랜치 활용
큰 변경 전에 브랜치 만들어두면 안전
Plan Mode
바로 코드 작성하지 않고 먼저 계획을 세우는 모드
Security Scan
배포 전 보안 취약점 자동 검사
Screenshot 첨부
문제를 말로 설명하기 어려울 때 캡처 첨부
한 번에 하나씩
프롬프트 하나에 기능 하나. 몰아서 요청하면 꼬임
KEY TAKEAWAYS · 1/2

오늘의 핵심 10가지 (1/2)

#핵심 메시지
01Supabase 연결은 버튼 하나 — Lovable 클릭 한 번이면 DB + Auth 연결
02RLS는 선택이 아니라 필수 — 안 하면 아무나 모든 데이터 접근
03트랙별로 시작 프롬프트가 다름 — 자기 트랙 프롬프트로 시작
04AI API 키는 Edge Function으로 — 프론트 노출 시 과금 폭탄
05배포 전 체크리스트 — 기능·디자인·보안·콘텐츠 4가지
KEY TAKEAWAYS · 2/2

오늘의 핵심 10가지 (2/2)

#핵심 메시지
06배포는 Lovable Publish 한 번 — 클릭 한 번으로 URL 생성
07환경변수가 가장 흔한 문제 — 배포 후 안 되면 환경변수부터
08앱은 PWA부터 — 앱스토어 전에 PWA로 검증
09Build-Measure-Learn 루프 — 빠르게 돌리는 게 핵심
10완성 못 해도 괜찮음 — 어디서 막혔는지 아는 것도 성과
DELIVERABLES

세션 4 산출물 체크리스트

여러분은 4세션 만에 아이디어 → 기획 → 디자인 → 구현 → 배포까지 해냈습니다. 이제 시작입니다!
JOURNEY RECAP

4세션 전체 여정

세션 1 — "뭘 만들지" · 프로덕트 씽킹 + 문제 정의
▼
세션 2 — "어떻게 만들지" · PRD 작성
▼
세션 3 — "어떻게 보일지" · 디자인 + 데이터 구조
▼
세션 4 — "진짜로 만들기" · 기능 구현 + 배포 ✅
중요한 건 완성도가 아닙니다.

"아이디어를 실체로 만들어서
사람들에게 보여줄 수 있는 능력"

이게 바이브코딩의 진짜 가치입니다.
SESSION 04 · COMPLETE

4세션 모두
완주하셨습니다!

배포한 URL을 세상에 보여주세요.
이제 시작입니다.

Thank you! hosohere@gmail.com
01 / --
← → 키로 이동 · P 프레젠터 뷰