소개
개인 랜딩페이지를 만들기 위해 PRD를 기반으로 웹사이트 프론트 디자인(Lovable), 코드 수정(Cursor), 백엔드 데이터베이스 연동(Supabase), 깃허브(Github) 저장소 업로드, 프로덕션 배포(Publish)까지 진행했습니다. 이 과정을 통해 자동화, 배포 환경 구성, 협업 문서 작성 등 다양한 경험을 쌓을 수 있었고, 동시에 여러 문제를 마주하고 해결하는 과정에서 많은 걸 배웠습니다. 💪
진행 방법
사용 도구
PRD 작성: ChatGPT
디자인 및 배포 플랫폼: Lovable
코드 편집기: Cursor
버전 관리 및 저장: GitHub
데이터베이스: Supabase
비교한 배포 플랫폼들: Vercel, Firebase Hosting, Replit, Lovable/V0
전체 흐름 요약
챗GPT에서 간단버전 PRD 작성 (by 성장피터님 gpts)
러버블 디자인 후 깃허브 저장소에 코드 연동 (.vs. v0에서는 바로 download 됨)
GitHub 저장소 코드를 로컬 터미널 (git bash)에서 클론
Cursor에서 새프로젝트를 오픈하고, 코드 수정 시작 & 개발환경 로컬서버 셋팅
SSH 키 생성 → GitHub에 등록하여 푸시/풀 가능하게 설정
Supabase와 연동:
커서에서 .env파일에 Supabase URL 및 키 저장.gitignore에.env추가해 보안 유지
코드 분석 및 관리:
prd.md작성하여 기획 정리 (.vs. 기본 버전에는 prd.md 가 없음)README.md프로젝트 내용으로 업데이트 (.vs. 기본 버전에는 lovable 내용이 써있음)
코드 수정 > Git 커밋 > Push >
러버블 대시보드에서 Refresh & Publish로 최종코드 반영 배포
주요 프롬프트/설정 예시
# .env 예시
SUPABASE_URL=https://xxx.supabase.co
SUPABASE_ANON_KEY=your-key-here
git add .
git commit -m "supabase 연동 반영"
git push origin main🙂 결과 (웹사이트와 데이터베이스)
https://ai-spark-consult.lovable.app/
문의하기 입력정보 데이터베이스
😅 시행착오 (.env 파일과 환경변수 셋팅에 관한 것)
처음엔 로컬 환경에서
.env파일을 설정하고 Supabase 연결까지 문제없이 진행됐습니다. 그러나 배포 과정에서 다음과 같은 이슈들이 발생했 습니다:첫 번째 커밋 시점에는
.env파일이 깃허브에 그대로 포함되어 올라감 😱이후
.gitignore에.env를 추가해 민감정보는 보호했지만,러버블에서
Refresh시 오류 발생원인: 프로덕션 환경에서는
.env를 사용할 수 없어서 환경변수가 존재하지 않음Supabase 연결 코드가 작동하지 않게 되어 페이지가 정상적으로 렌더링되지 않음
배포 플랫폼 특징을 비교해봄. (다음에는 vercel로 해야겠다.)
항목
Vercel
Firebase Hosting
Replit
Lovable/v0
환경변수 관리
O
△
O (Secrets)
X/△
자동 배포
O
△
X (수동)
O (제한적)
정적 사이트
O
O
O
O
서버리스/백엔드
O
O
O
X
협업/공유
△
△
O
O
무료 플랜
O
O
O
O
깨달은 점
러버블의 무료 플랜에서는 환경변수 셋팅 기능이 제공되지 않음
환경변수를 사용해야 하는 구조에서는 러버블만으로는 배포가 불가능
반대로, 단순한 정적 페이지의 경우에는 문제 없이 배포 가능
러버블은 GitHub 커밋만으로 자동 반영되지 않음 → 직접 대시보드에서 Refresh 클릭 필요
결과와 배운 점
✅ 배운 점
환경변수 관리의 중요성:
.env파일을 통해 민감정보를 노출하지 않는 구조배포플랫폼 특징의 비교 분석: 나에게 유리한 것을 선택 함.
문서화:
prd.md,README.md작성이 내용 관리 및 팀 공유에 도움.
🔜 다음 계획
배포를 쉽게 하는 플랫폼과 프로세스 실험 (vercel, replit, firebase 등)
러버블+n8n 연동
도움 받은 글 (옵션)
PRD Builder (by 성장피터 님) :
Lovable 코드 기반으로 prd.md 만들기 (by 로즈 님) :
https://www.gpters.org/dev/post/establish-vibe-coding-process-c8WZObVqHxykfVV