이 가이드는 코딩 지식이 없는 초보자가 AI 툴인 Lovable을 사용하여 데크 시공 견적 계산기가 포함된 전문가 웹사이트를 만들고, 실제 이메일 문의까지 받을 수 있도록 구현하는 과정을 다룹니다.
1. 준비 및 기본 사이트 생성
ChatGPT를 활용하여 구체적인 프롬프트를 작성하고 Lovable에서 사이트 초안을 생성합니다.
- Lovable 가입: Lovable 웹사이트(lovable.dev)에 접속하여 구글 계정 등으로 가입 및 로그인합니다.
- ChatGPT로 프롬프트 작성: ChatGPT에게 만들고 싶은 사이트(예: 데크 시공 전문가 사이트)에 대해 설명하고 Lovable용 영문 프롬프트를 작성해달라고 요청합니다.
- 사이트 생성: ChatGPT가 생성한 영문 프롬프트를 Lovable 입력창에 붙여넣고 실행하여 사이트 초안을 만듭니다.
2. 사이트 편집 (수동 및 AI)
생성된 사이트의 텍스트, 레이아웃, 이미지를 수정합니다.
- 텍스트 편집 모드: 왼쪽 하단 Edit 버튼을 눌러 요소를 선택합니다. 텍스트 수정, 마진(Margin)/패딩(Padding) 조절, 폰트 스타일 변경이 가능합니다.
- AI 편집 (채팅): 수정하고 싶은 이미지를 업로드하고 "배경 이미지를 이걸로 바꿔줘"라고 요청하거나, 특정 섹션을 선택 후 "내용을 ~게 변경해줘"라고 채팅으로 요청합니다.
- 팁: AI 크레딧 절약을 위해 한 번의 메시지에 여러 수정 요청사항(이미지 변경 + 텍스트 변경 등)을 묶어서 보냅니다.
3. 고급 기능: 견적 계산기 추가
단순 정보 제공을 넘어, 사용자 인터랙션이 가능한 기능을 추가합니다.
- 기능 기획: ChatGPT에게 "Lovable에서 사용할 기능 추가 프롬프트를 작성해줘"라고 요청합니다. (예: 색상 선택 시 이미지 변경, 면적 입력 시 가격 자동 계산, 견적 요청 버튼 클릭 시 폼에 데이터 자동 입력 등)
- 기능 구현: 완성된 프롬프트를 Lovable 채팅창에 입력하여 계산기 섹션을 생성합니다.
- 동작 확인: 색상 변경에 따른 이미지 변화, 면적에 따른 가격 계산, '견적 요청' 버튼 클릭 시 하단 문의 폼으로 데이터가 이동하는지 확인합니다.
4. 데이터베이스 연동 (Supabase)
회원가입, 데이터 저장, 추후 이메일 기능을 위한 백엔드 데이터베이스를 연결합니다.
- Supabase 설정: 구글에서 Supabase 검색 후 가입합니다. 'New Project'를 생성하고 이름, 비밀번호, Region(한국 근처)을 설정합니다.
- Lovable 연동: Lovable에서 왼쪽 상단 아이콘 -> Settings -> Supabase -> Connect Supabase를 클릭하여 방금 만든 프로젝트를 연결합니다.
5. 이메일 발송 기능 연동 (Resend)
고객이 견적 요청 폼을 제출하면 관리자에게 이메일이 오도록 설정합니다.
- Resend API 발급: Resend 사이트에 가입 후 API Keys 메뉴에서 'Create API Key'를 클릭합니다. 권한은 'Sending access'로 설정하고 생성된 키를 복사합니다.
- 이메일 기능 구현: Lovable 채팅창에 "견적 요청 폼 제출 시 관리자 이메일로 발송되게 해줘. Resend 기능을 써줘"라고 입력합니다.
- API 키 입력: Lovable이 API 키를 요청하면 복사한 Resend 키를 붙여넣습니다. (무료 플랜은 본인 계정 이메일로만 발송 가능)
6. 테스트 및 배포
- 최종 테스트: 웹사이트에서 실제 고객처럼 색상을 고르고, 면적을 입력한 뒤 견적 요청 버튼을 누릅니다.
- 이메일 확인: 설정한 관리자 이메일로 고객의 요청 정보가 들어왔는지 확인합니다.
- 배포 (Publish): 우측 상단 Publish 버튼을 눌러 사이트를 웹에 공개합니다. 메타데이터(아이콘, 제목, 썸네일)를 설정할 수 있습니다.
#Lovable
#AI웹사이트빌더
#노코드
#Supabase
#Resend
#웹개발
#자동견적산출