실전 튜토리얼: 견적 요청과 리드 수집 페이지 만들기

견적 요청 페이지는 '살 사람'을 알아보는 입구입니다

지난 장에서는 예약·상담 신청 페이지를 만들었습니다. 예약 페이지가 "언제 만날까요?"를 묻는 페이지라면, 이번 장에서 만들 견적 요청 페이지는 한 걸음 더 들어갑니다. "무엇이 필요하고, 언제까지 필요하며, 어느 정도 예산을 생각하고 있나요?"를 묻는 페이지입니다.

프리랜서와 개인사업자에게 가장 아까운 시간은 아무 가능성 없는 문의에 오래 답장하는 시간입니다. "홈페이지 얼마예요?", "브랜딩 해주세요", "상세페이지 가능하세요?" 같은 메시지는 반갑지만, 이 상태로는 견적을 낼 수 없습니다. 어떤 서비스를 원하는지, 예산은 어느 정도인지, 일정은 급한지, 결과물은 무엇인지 다시 물어봐야 합니다. 그러다 보면 하루가 지나고, 상대는 다른 사람에게 맡겨버리기도 합니다.

그래서 견적 요청 페이지가 필요합니다. 이 페이지는 단순한 문의 폼이 아닙니다. 고객이 자신의 필요를 정리하게 만들고, 우리는 상담 전에 가능성 있는 고객인지 판단할 수 있게 해주는 작은 영업 시스템입니다.

여기서 중요한 원칙은 이것입니다.

처음부터 결제 기능을 붙이려고 하지 마세요. 그보다 먼저 연락처와 니즈를 안정적으로 모으는 것이 훨씬 중요합니다.

결제는 나중에 붙여도 됩니다. 하지만 고객의 이름, 연락처, 원하는 서비스, 예산, 일정, 기대 결과를 놓치면 아무 일도 시작되지 않습니다. Lovable은 자연어로 웹사이트와 앱을 만들 수 있고, Supabase 같은 백엔드 연결도 지원하지만, 공식 문서에서도 효율적인 작업을 위해 작게 시작하고 기능을 나눠서 만드는 방식을 권장합니다.¹ 이번 장에서도 그 원칙을 지키겠습니다. 먼저 작고 안전하게 만들고, 필요할 때 확장합니다.

리드란 무엇인가요?

마케팅에서 자주 나오는 단어 중 하나가 리드입니다. 어렵게 들리지만 뜻은 간단합니다. 리드는 내 서비스에 관심을 보이고 연락처나 정보를 남긴 잠재고객입니다.

예를 들어 이런 사람들이 리드입니다. 랜딩페이지 제작 견적을 요청한 1인 사업자, 상세페이지 디자인 비용을 문의한 쇼핑몰 운영자, 세무 상담을 받고 싶어 연락처를 남긴 개인사업자, 전자책 표지 디자인 일정과 예산을 적어 보낸 강사입니다.

모든 리드가 바로 고객이 되지는 않습니다. 어떤 사람은 예산이 맞지 않고, 어떤 사람은 일정이 너무 급하고, 어떤 사람은 아직 비교만 하는 단계입니다. 하지만 리드를 잘 모아두면 다음 행동을 할 수 있습니다. 상담을 제안하거나, 제안서를 보내거나, 작은 유료 상품으로 연결하거나, 나중에 다시 연락할 수 있습니다.

견적 요청 페이지의 목표는 단순히 "문의가 왔다!"에서 끝나지 않습니다. 목표는 상담 가능한 리드와 그렇지 않은 리드를 구분하고, 좋은 리드를 유료 고객으로 자연스럽게 연결하는 것입니다.

이번 장에서 만들 페이지의 완성 모습

이번 장에서는 프리랜서와 개인사업자가 바로 응용할 수 있는 견적 요청 페이지를 만듭니다. 예시는 "1인 사업자를 위한 웹페이지·랜딩페이지 제작 서비스"로 잡겠습니다. 여러분이 브랜드 디자인, 콘텐츠 제작, 촬영, 세무 상담, 강의 제작, 자동화 구축, 상세페이지 디자인, 인스타그램 운영 대행을 한다면 서비스명과 질문만 바꾸면 됩니다.

완성된 페이지의 흐름은 다음과 같습니다.

여기서 가장 중요한 부분은 견적 요청 폼입니다. 하지만 폼만 덩그러니 있으면 고객은 잘 작성하지 않습니다. 고객이 스스로 "아, 내가 여기 문의해도 되는 사람이구나"라고 느끼게 해야 합니다. 그래서 페이지 안에 "누구에게 적합한 서비스인지"와 "상담 전에 무엇을 준비하면 좋은지"를 함께 녹여야 합니다.

견적 요청 폼에 꼭 들어갈 항목

견적 요청 폼은 너무 짧아도 문제고, 너무 길어도 문제입니다. 이름과 이메일만 받으면 답장은 할 수 있지만 견적을 내기는 어렵습니다. 반대로 20개가 넘는 질문을 던지면 고객이 중간에 포기합니다.

초기 버전에서는 다음 항목이면 충분합니다.

여기서 예산 범위는 민감할 수 있습니다. 고객은 정확한 금액을 쓰는 것을 부담스러워합니다. 그래서 "얼마까지 쓸 수 있나요?"라고 묻기보다 범위로 선택하게 하는 편이 좋습니다.

예산 선택지는 이렇게 만들 수 있습니다.

희망 일정도 마찬가지입니다. "언제까지 필요하세요?"라고만 쓰면 고객이 애매하게 적습니다. 선택지를 주면 응답이 좋아집니다.

예를 들어 다음처럼 받을 수 있습니다.

원하는 결과물은 서비스에 따라 바꾸면 됩니다. 웹페이지 제작자라면 "랜딩페이지, 포트폴리오, 예약 페이지, 문의 폼, 관리자 페이지, 도메인 연결"처럼 받을 수 있습니다. 디자이너라면 "로고, 색상 팔레트, 카드뉴스 템플릿, 상세페이지, 브랜드 가이드"처럼 바꾸면 됩니다. 콘텐츠 제작자라면 "블로그 글, 뉴스레터, 전자책 원고, 강의안, 상세페이지 문구"가 될 수 있습니다.

너무 많이 묻지 않는 것도 실력입니다

견적을 정확히 내고 싶다는 마음은 이해됩니다. 하지만 첫 문의 단계에서 모든 것을 물어보려고 하면 고객이 부담을 느낍니다. 특히 아직 신뢰가 쌓이지 않은 상태에서 회사 내부 자료, 매출, 고객 리스트, 상세 전략까지 요구하면 이탈할 수 있습니다.

처음 견적 요청 폼에서는 "상담 여부를 판단할 수 있는 최소 정보"만 받으세요. 자세한 자료는 상담 확정 후 별도 질문지로 받아도 됩니다. 무료 사용자라면 더더욱 폼을 간단히 유지하는 편이 좋습니다. 질문이 많아질수록 폼 설계, 검증, 저장, 관리자 화면까지 복잡해지기 때문입니다.

또 하나의 원칙이 있습니다. 지금 당장 필요 없는 민감정보는 받지 않는다. 주민등록번호, 카드번호, 계좌 비밀번호 같은 정보는 절대 받으면 안 됩니다. 의료, 심리, 법률, 세무처럼 민감한 상담 영역이라면 더 조심해야 합니다. 첫 문의 폼에는 "자세한 민감 정보는 상담 확정 후 안전한 방식으로 안내드립니다" 정도로 충분합니다.

'누구에게 적합한 서비스인지'를 페이지에 녹이기

견적 요청 페이지에서 의외로 강력한 섹션이 "이런 분께 적합합니다"입니다. 이 섹션은 고객을 설득하는 동시에, 맞지 않는 문의를 줄이는 역할을 합니다.

예를 들어 웹페이지 제작 프리랜서라면 이렇게 쓸 수 있습니다.

이런 분께 적합합니다
- 인스타그램이나 블로그는 있지만, 내 서비스를 한눈에 설명하는 웹페이지가 없는 분
- 상담, 강의, 전자책, 서비스 상품을 판매하기 위한 랜딩페이지가 필요한 분
- 개발자를 고용하기 전, 작은 MVP 페이지로 시장 반응을 먼저 보고 싶은 분
- 포트폴리오, 문의 폼, 예약 신청, 리드 수집 페이지를 빠르게 만들고 싶은 분

반대로 "이런 경우에는 아직 맞지 않을 수 있어요"도 부드럽게 넣을 수 있습니다.

아직 이런 경우라면 상담부터 추천드려요
서비스 내용이 전혀 정리되지 않았거나, 고객이 누구인지 아직 정하지 못한 상태라면 바로 제작보다 기획 상담이 먼저 필요할 수 있습니다. 이 경우 견적 요청서에 현재 고민을 적어주시면 적합한 진행 방식을 안내드릴게요.

이 문구는 고객을 거절하는 말이 아닙니다. 오히려 고객에게 친절합니다. "내가 아직 준비가 덜 됐는데 문의해도 되나?"라는 불안을 줄여주기 때문입니다. 동시에 우리도 프로젝트 범위를 더 정확히 볼 수 있습니다.

이 섹션을 만들 때는 너무 날카롭게 쓰지 마세요. "예산 없는 분은 문의하지 마세요" 같은 문장은 차갑습니다. 대신 "예산이 아직 정해지지 않았다면 '예산 미정'을 선택해 주세요. 가능한 범위와 우선순위를 함께 안내드릴게요"라고 쓰면 훨씬 부드럽습니다.

상담 전 준비해야 할 정보를 알려주기

견적 요청 페이지에는 "상담 전에 준비하면 좋은 정보"를 넣어야 합니다. 이 섹션은 고객에게 숙제를 주는 것이 아닙니다. 좋은 상담이 되도록 길을 깔아주는 것입니다.

웹페이지 제작 서비스라면 상담 전 준비 정보는 다음 정도가 좋습니다.

페이지에는 이렇게 자연스럽게 녹이면 됩니다.

정확한 견적을 위해 이런 정보를 함께 알려주세요
완벽하게 정리되어 있지 않아도 괜찮습니다. 현재 판매하려는 서비스, 원하는 페이지의 역할, 참고하고 싶은 사이트, 희망 일정과 예산 범위만 알려주셔도 첫 검토가 가능합니다.

이 문구 하나만 있어도 폼 응답의 질이 좋아집니다. 고객이 "문의 내용" 칸에 무엇을 써야 할지 알게 되기 때문입니다.

외부 AI에서 견적 요청 페이지 기획하기

Lovable을 열기 전에 이번에도 외부 AI에서 기획을 먼저 끝내겠습니다. Lovable 안에서 "폼 항목은 뭘로 하지?", "예산 선택지는 어떻게 하지?", "FAQ는 뭐가 필요하지?"를 계속 물어보면 크레딧을 쓰게 됩니다. ChatGPT나 Gemini에서 미리 정리하고, Lovable에는 구현만 맡기는 방식이 무료 사용자에게 가장 안전합니다.

아래 프롬프트를 외부 AI에 붙여넣으세요.

나는 개인사업자/프리랜서이고, Lovable에서 견적 요청과 리드 수집 페이지를 만들려고 한다.
Lovable에서는 구현만 할 예정이므로, 너는 지금 웹 기획자이자 세일즈 카피라이터 역할을 해줘.

내 서비스 정보는 다음과 같다.
- 서비스명: [예: 1인 사업자를 위한 랜딩페이지 제작]
- 주요 고객: [예: 강사, 코치, 컨설턴트, 프리랜서]
- 고객의 문제: [예: 서비스는 있는데 문의를 받을 수 있는 웹페이지가 없음]
- 내가 제공하는 결과: [예: 상담 신청과 견적 요청을 받을 수 있는 모바일 최적화 웹페이지]
- 평균 작업 기간: [예: 1~3주]
- 대략적인 예산 범위: [예: 50만~300만 원]
- 피하고 싶은 고객 또는 프로젝트: [예: 당장 오늘 완성해야 하는 긴급 작업, 요구사항이 불명확한 대형 플랫폼]
- 원하는 톤: [예: 친절하지만 전문적인 톤]

다음 항목을 작성해줘.
1. 견적 요청 페이지의 한 문장 목표
2. 첫 화면 헤드라인 5개
3. 서브 헤드라인 5개
4. '이런 분께 적합합니다' 섹션 문구
5. '상담 전 준비하면 좋은 정보' 섹션 문구
6. 견적 요청 폼 입력 항목과 각 항목의 필수/선택 여부
7. 예산 범위 선택지
8. 희망 일정 선택지
9. 제출 완료 메시지 3개
10. FAQ 6개
11. Lovable에 넣을 최종 구현 프롬프트 초안

초보 고객이 읽어도 이해하기 쉬운 한국어로 작성해줘.

외부 AI가 답을 주면 그대로 쓰지 말고 한 번 더 다듬으세요. 특히 견적 요청 폼은 내 실제 운영 방식에 맞아야 합니다. 예를 들어 전화 상담을 하지 않는 사람이라면 전화번호를 필수로 받을 필요가 없습니다. 이메일로만 운영한다면 이메일을 필수로 두고, 전화번호는 선택으로 두면 됩니다.

무료 사용자 추천: 구글폼 또는 이메일 연결로 시작하기

무료 사용자라면 첫 번째 버전에서 Lovable 안에 데이터 저장 기능을 만들지 않는 편이 좋습니다. 이유는 단순합니다. 데이터 저장을 붙이면 테이블, 권한, 오류 처리, 관리자 화면, 보안 확인까지 챙겨야 합니다. 초보자에게는 갑자기 난이도가 올라갑니다.

처음에는 Lovable로 견적 요청 페이지를 만들고, 실제 응답 수집은 Google Forms, Tally, Typeform, 네이버 폼, 이메일 링크 같은 외부 도구에 맡기면 됩니다. 랜딩페이지의 폼은 Supabase 같은 데이터베이스에 연결하거나 외부 폼 도구로 처리할 수 있다는 점은 Lovable 관련 랜딩페이지 제작 가이드에서도 자주 언급됩니다.² 우리의 첫 목표는 멋진 백엔드가 아니라 견적 요청을 실제로 놓치지 않는 것입니다.

가장 쉬운 흐름은 다음과 같습니다.

1. Google Forms나 네이버 폼에서 견적 요청서를 먼저 만든다.

2. 응답 알림을 내 이메일로 받도록 설정한다.

3. Lovable에서는 견적 요청 페이지와 CTA 버튼을 만든다.

4. CTA 버튼을 외부 폼 링크로 연결한다.

5. 고객이 외부 폼을 작성하면 이메일 알림으로 확인한다.

6. 응답은 Google Sheets나 폼 응답 화면에서 관리한다.

이 방식은 화려하지 않지만 강력합니다. Lovable 크레딧을 거의 구현과 디자인에만 쓰고, 데이터 수집은 이미 검증된 도구에 맡길 수 있습니다. 특히 무료 사용자는 이 방식으로 먼저 시장 반응을 보는 것이 좋습니다.

구글폼에 넣을 견적 요청 질문

구글폼이나 네이버 폼을 만든다면 질문은 페이지의 견적 요청 폼과 거의 같게 구성하면 됩니다. 다만 외부 폼에서는 조금 더 자세히 받을 수 있습니다. 고객이 이미 "견적 요청하기" 버튼을 눌렀기 때문에 입력 의지가 어느 정도 있기 때문입니다.

추천 질문은 다음과 같습니다.

개인정보 동의 문구는 어렵게 쓰지 않아도 됩니다. 초기 문의 폼에서는 다음 정도의 문장으로 시작할 수 있습니다.

입력하신 정보는 견적 검토와 상담 안내를 위해서만 사용됩니다. 제출 전 연락처와 요청 내용을 확인해 주세요.

법적으로 더 정확한 개인정보 처리방침이 필요한 업종이나 규모라면 별도 문서를 준비해야 합니다. 하지만 첫 번째 MVP에서는 최소한 "왜 정보를 받는지"와 "어디에 쓰는지"를 고객에게 알려주는 것부터 시작하세요.

간단 버전 Lovable 프롬프트: 외부 폼으로 연결하기

이제 Lovable에 넣을 첫 번째 프롬프트를 작성하겠습니다. 이 버전은 무료 사용자에게 가장 추천하는 방식입니다. 웹페이지 안에는 견적 요청 흐름을 잘 설명하고, 실제 제출은 외부 폼 링크로 보냅니다.

대괄호 안은 자신의 정보로 바꾸세요.

Create a Korean quote request landing page for a freelancer/service business.
All visible copy must be in Korean.

Goal:
The page should help potential clients understand whether my service is right for them and guide them to submit a quote request through an external form.
This is an MVP for lead generation, not a full web app.

Business information:
- Service name: [1인 사업자를 위한 랜딩페이지 제작]
- Target customers: [강사, 코치, 컨설턴트, 프리랜서, 소규모 브랜드]
- Main problem: [서비스를 판매하고 싶지만 문의와 상담 신청을 받을 웹페이지가 없음]
- Main outcome: [모바일에서 이해하기 쉽고 견적 요청을 받을 수 있는 웹페이지 제작]
- Tone: [친절하지만 전문적인 톤]
- External quote request form URL: [여기에 Google Forms 또는 네이버 폼 링크 입력]

Page sections:
1. Hero section
   - Clear headline about getting a quote for a service website or landing page
   - Short subheadline explaining who this is for
   - Primary CTA button: "견적 요청서 작성하기"
   - Secondary CTA button: "진행 방식 먼저 보기"

2. Who this is for section
   - Explain 4 types of customers who are a good fit
   - Include people who need a portfolio page, landing page, booking page, or lead capture page

3. Service type section
   - Show cards for these service types:
     a. 포트폴리오/소개 페이지
     b. 상담·예약 신청 페이지
     c. 견적 요청/리드 수집 페이지
     d. 전자책·강의 랜딩 페이지
   - Each card should explain what the client gets

4. Process section
   - Show a simple 5-step process:
     견적 요청서 작성 → 요청 내용 검토 → 1차 상담 → 제안서/견적 안내 → 제작 진행

5. Preparation section
   - Explain what clients should prepare before requesting a quote:
     desired result, budget range, timeline, reference links, existing materials
   - Make the tone reassuring: "완벽히 정리되어 있지 않아도 괜찮습니다."

6. Quote request CTA section
   - Do not build an internal database form in this version.
   - Show a clean form-like preview with fields people will answer:
     서비스 유형, 예산 범위, 희망 일정, 원하는 결과물, 연락처
   - Add a large CTA button that opens the external quote request form URL in a new tab.
   - Button text: "외부 견적 요청서 작성하기"

7. FAQ section
   - Add 6 FAQ items about price, timeline, materials, revisions, consultation, and next steps.

8. Footer
   - Include email contact and a short privacy note.

Design:
- Mobile-first responsive design
- Clean, trustworthy, business-friendly style
- Background: warm off-white
- Text: dark navy or charcoal
- Accent color: professional blue or deep green
- Large CTA buttons with clear labels
- Avoid flashy animations, login, payment, dashboard, blog, AI chatbot, or complex backend features

Important:
- Keep this as a simple MVP.
- All CTA buttons for quote request should open the external form URL.
- Do not create Supabase, authentication, admin pages, or payment features in this version.

이 프롬프트의 핵심은 "form-like preview"입니다. 실제 입력 폼을 만들지 않더라도, 고객이 어떤 질문을 받게 될지 미리 보여줍니다. 그러면 외부 폼으로 이동하기 전에 마음의 준비가 됩니다.

또한 "Do not create Supabase, authentication, admin pages, or payment features"라고 명확히 적었습니다. 만들지 않을 것을 적어야 Lovable이 프로젝트를 과하게 키우지 않습니다.

첫 결과물에서 확인할 것

Lovable이 페이지를 만들면 바로 색감부터 보지 말고, 고객의 행동 흐름을 먼저 확인하세요. 견적 요청 페이지는 예쁜 명함이 아니라 고객 정보를 받는 입구입니다.

먼저 휴대폰 화면으로 첫 화면을 봅니다. 3초 안에 어떤 서비스의 견적 요청 페이지인지 이해되어야 합니다. "당신의 비즈니스를 성장시킵니다"처럼 넓은 말보다 "1인 사업자를 위한 랜딩페이지 제작 견적 요청"이 훨씬 좋습니다.

그다음 CTA 버튼을 눌러 외부 폼이 새 창으로 열리는지 확인합니다. 링크가 틀렸거나 현재 창에서 열려 페이지를 잃어버리면 고객 경험이 나빠집니다. 외부 폼에 들어가 실제 테스트 응답을 제출하고, 이메일 알림이 오는지도 확인합니다.

마지막으로 페이지 안의 "적합한 고객"과 "준비할 정보" 섹션을 읽어보세요. 고객이 읽었을 때 부담이 줄어드는지 봐야 합니다. 문구가 너무 딱딱하거나 심문처럼 느껴지면 수정해야 합니다.

작은 수정은 Visual Editor로 끝내기

이번 장의 프로젝트에서도 작은 수정은 Visual Editor로 처리하는 것이 좋습니다. 버튼 문구, 섹션 제목, FAQ 답변, 이메일 주소, 색상 정도는 프롬프트를 쓰지 않고 직접 고치는 편이 크레딧을 아낍니다. Lovable 문서에서도 텍스트나 색상 같은 수동 편집은 Visual Edits로 가능하다고 안내합니다.³

프롬프트를 써야 하는 경우는 구조나 기능을 바꿀 때입니다. 예를 들어 외부 폼 링크 연결이 잘못되었거나, CTA 버튼을 여러 곳에 추가해야 하거나, 서비스 유형 카드를 새로 구성해야 할 때는 Lovable에게 요청하는 것이 좋습니다.

수정 프롬프트는 이렇게 짧고 정확하게 씁니다.

견적 요청 CTA 버튼 동작만 수정해줘.

- 페이지 안의 모든 "견적 요청서 작성하기" 버튼을 [외부 폼 링크]로 연결해줘.
- 링크는 새 탭에서 열리게 해줘.
- 버튼 문구와 디자인은 유지해줘.
- 다른 섹션의 내용과 레이아웃은 변경하지 마.

서비스 유형 카드를 바꾸고 싶다면 이렇게 요청합니다.

Service type section만 수정해줘.

현재 카드들을 아래 4개 서비스로 바꿔줘.
1. [서비스명 1] - [짧은 설명]
2. [서비스명 2] - [짧은 설명]
3. [서비스명 3] - [짧은 설명]
4. [서비스명 4] - [짧은 설명]

각 카드에는 "이 유형으로 견적 요청하기"라는 작은 버튼을 넣고, 버튼은 모두 외부 견적 요청 폼 링크로 연결해줘.
다른 섹션은 변경하지 마.

마지막 문장, "다른 섹션은 변경하지 마"가 중요합니다. 수정 범위를 좁혀야 예상치 못한 변경을 줄일 수 있습니다.

내부 폼 버전: 폼 검증과 제출 완료 화면 만들기

외부 폼으로 몇 번 문의를 받아보면 이런 생각이 들 수 있습니다.

"이제 내 웹사이트 안에서 바로 견적 요청을 받고 싶다."

이때부터 내부 폼 버전을 고려할 수 있습니다. 다만 주의해야 합니다. 웹사이트 안에 폼이 보인다고 해서 입력 내용이 자동으로 저장되는 것은 아닙니다. 저장할 곳이 필요합니다. Lovable은 백엔드 기능을 위해 Lovable Cloud나 Supabase 연결을 사용할 수 있다고 안내하지만, 데이터 저장이 들어가는 순간 권한과 보안도 함께 고려해야 합니다.⁴

먼저 내부 폼의 사용자 경험부터 정리해봅시다. 폼은 고객이 실수를 줄이도록 도와야 합니다. 필수 항목을 비워두면 친절하게 알려주고, 이메일 형식이 이상하면 다시 확인하게 하고, 제출 중에는 버튼을 잠시 비활성화해야 합니다. 제출이 끝나면 "접수되었습니다"만 보여주는 것이 아니라 다음 단계를 알려줘야 합니다.

내부 폼에 필요한 기본 동작은 다음과 같습니다.

여기까지는 사용자 경험입니다. 하지만 실제 저장까지 하려면 Supabase 같은 데이터베이스가 필요합니다. Supabase는 쉽게 말해 "온라인에 있는 똑똑한 표"라고 생각하면 됩니다. 엑셀이나 구글시트처럼 행과 열이 있지만, 웹사이트와 연결해서 데이터를 저장하고 읽을 수 있습니다. 자세한 내용은 14장에서 다시 다룰 예정이니, 지금은 구조만 이해하면 됩니다.

Supabase 확장용 데이터 구조

견적 요청 데이터를 저장한다면 테이블 이름은 quote_requests처럼 정할 수 있습니다. 영어 이름을 쓰는 이유는 개발 도구들이 영어 필드명을 더 안정적으로 다루는 경우가 많기 때문입니다. 화면에는 한국어로 보여주면 됩니다.

초기 테이블 구조는 다음 정도면 충분합니다.

quote_requests
- id
- name
- email
- phone
- company_or_brand
- service_type
- budget_range
- timeline
- desired_deliverables
- project_description
- reference_url
- status
- internal_notes
- created_at

여기서 status는 리드의 상태입니다. 처음 들어온 요청은 "new" 또는 "신규"로 저장합니다. 검토 후에는 "검토중", "상담제안", "제안서발송", "계약완료", "보류", "탈락" 같은 상태로 바꿀 수 있습니다. internal_notes는 고객에게 보이지 않는 내부 메모입니다. 예를 들어 "예산 100만 원 이하, 2주 내 희망, 랜딩페이지 1장" 같은 식으로 적을 수 있습니다.

초기에는 관리자 페이지를 만들지 않고 Supabase 대시보드에서 직접 확인해도 됩니다. 이 방식이 가장 안전하고 간단합니다. 그러나 리드가 늘어나면 Lovable로 관리자 확인용 목록 페이지를 만들 수 있습니다. 다만 관리자 목록 페이지는 개인정보를 보여주므로 절대 공개 페이지처럼 만들면 안 됩니다. 로그인이나 접근 제한 없이 /admin 주소만 숨겨두는 것은 보안이 아닙니다.

Supabase 내부 폼 버전 Lovable 프롬프트

이제 Supabase에 저장하는 내부 폼 버전 프롬프트를 보겠습니다. 이 프롬프트는 지금 바로 사용해도 되지만, Supabase가 낯설다면 14장을 읽은 뒤 다시 돌아와 실행하는 것을 추천합니다.

현재 견적 요청 랜딩 페이지를 확장해서, 페이지 안에서 직접 견적 요청을 제출할 수 있는 내부 폼을 만들어줘.
Supabase를 사용해서 제출 데이터를 저장하는 구조로 설계해줘.

중요:
- 이것은 결제 기능이 아니라 리드 수집 기능이야.
- 로그인, 결제, 복잡한 CRM, 자동 이메일 발송은 아직 만들지 마.
- 기존 랜딩 페이지 디자인과 섹션 구조는 최대한 유지해줘.
- 고객 개인정보가 공개되지 않도록 주의해줘.

Supabase table name: quote_requests
Fields:
- id: uuid
- name: text
- email: text
- phone: text
- company_or_brand: text
- service_type: text
- budget_range: text
- timeline: text
- desired_deliverables: text
- project_description: text
- reference_url: text
- status: text, default "new"
- internal_notes: text
- created_at: timestamp

Form fields:
1. 이름 또는 브랜드명 - required
2. 이메일 - required, validate email format
3. 전화번호 또는 카카오톡 ID - optional
4. 회사명/브랜드명 - optional
5. 필요한 서비스 유형 - required, dropdown or radio
   options: 포트폴리오/소개 페이지, 상담·예약 신청 페이지, 견적 요청/리드 수집 페이지, 전자책·강의 랜딩 페이지, 기타
6. 예산 범위 - required, dropdown
   options: 아직 미정, 50만 원 이하, 50만~100만 원, 100만~300만 원, 300만 원 이상, 상담 후 결정
7. 희망 일정 - required, dropdown
   options: 가능한 빨리, 2주 안, 1개월 안, 2~3개월 안, 아직 미정
8. 원하는 결과물 - required, textarea
9. 현재 상황과 요청 내용 - required, textarea
10. 참고 링크 - optional
11. 개인정보 수집 및 연락 동의 checkbox - required

Form behavior:
- If required fields are empty, show friendly Korean validation messages.
- If email format is invalid, show "이메일 형식을 다시 확인해 주세요."
- While submitting, disable the submit button and show "견적 요청 접수 중..."
- On success, show a dedicated success state or success section:
  "견적 요청이 접수되었습니다. 보내주신 내용을 검토한 뒤 영업일 기준 24~48시간 안에 이메일로 답변드릴게요."
- On failure, show:
  "일시적인 오류가 발생했습니다. 급한 문의라면 [email protected] 으로 직접 연락해 주세요."

Do not create payment, public customer list, AI chatbot, blog, or complex dashboard in this step.

이 프롬프트에서는 관리자 페이지를 아직 만들지 않았습니다. 먼저 고객 입력과 저장이 안정적으로 되는지 확인해야 합니다. 폼 저장이 제대로 되는지 확인하기 전부터 관리자 화면까지 붙이면 문제가 생겼을 때 원인을 찾기 어려워집니다.

관리자 확인용 목록 페이지 만들기

데이터 저장이 잘 된다면 다음 단계로 관리자 확인용 목록 페이지를 만들 수 있습니다. 이 페이지는 들어온 견적 요청을 한눈에 보는 화면입니다. 일종의 작은 CRM입니다. CRM은 Customer Relationship Management의 줄임말로, 고객 정보를 관리하고 후속 행동을 기록하는 도구라고 생각하면 됩니다.

관리자 목록 페이지에는 처음부터 많은 기능이 필요하지 않습니다. 다음 정도면 충분합니다.

하지만 다시 강조합니다. 관리자 페이지는 개인정보를 보여줍니다. 절대 공개되어서는 안 됩니다. 처음에는 Supabase 대시보드나 구글폼 응답 시트를 관리자 화면으로 쓰는 것이 더 안전합니다. Lovable에서 관리자 페이지를 만든다면 Supabase Auth 같은 로그인 기능으로 보호하는 방향을 선택해야 합니다.

관리자 페이지를 요청할 때는 아래처럼 말합니다.

견적 요청 데이터를 확인할 수 있는 관리자용 리드 목록 페이지를 추가해줘.
단, 개인정보가 포함되므로 공개 페이지가 되면 안 돼.
Supabase Auth 기반 관리자 로그인으로 보호되는 구조로 만들어줘.

Admin page route:
- /admin/leads

Requirements:
1. Only authenticated admin users can view the page.
2. If a user is not logged in, show a simple admin login screen.
3. After login, show quote_requests data from Supabase.
4. Show columns:
   - 접수일
   - 이름/브랜드명
   - 이메일
   - 서비스 유형
   - 예산 범위
   - 희망 일정
   - 상태
5. Add filters:
   - 상태별 필터: new, reviewing, consultation, proposal_sent, won, lost, paused
   - 서비스 유형 필터
6. Add a detail panel or modal when clicking a lead.
   The detail view should show all submitted fields and internal notes.
7. Allow admin to update status and internal_notes.
8. Do not expose this data on any public page.
9. Keep the UI simple, mobile-friendly, and easy to scan.
10. Do not add payment, email automation, or complex analytics yet.

Security reminder:
- Do not hard-code secret keys in frontend code.
- Use proper Supabase client configuration and row-level security policies appropriate for admin-only access.
- If anything is uncertain, explain what I need to configure in Supabase before publishing.

이 프롬프트는 조금 어렵게 보일 수 있습니다. 괜찮습니다. 지금은 "관리자 페이지를 만들 때는 반드시 로그인과 권한을 함께 생각해야 한다"는 점만 기억해도 충분합니다. 초보자에게 가장 안전한 순서는 외부 폼 → Supabase 저장 → 관리자 목록 순서입니다.

제출 완료 화면은 작은 세일즈 페이지입니다

많은 사람이 제출 완료 화면을 대충 만듭니다. "접수되었습니다" 한 줄이면 끝이라고 생각합니다. 하지만 제출 완료 화면은 생각보다 중요합니다. 고객이 가장 따뜻한 상태이기 때문입니다. 방금 시간을 들여 견적 요청서를 작성했습니다. 이 순간에 다음 행동을 잘 안내하면 상담과 계약으로 이어질 가능성이 높아집니다.

좋은 제출 완료 화면에는 네 가지가 들어갑니다.

첫째, 접수되었다는 확신을 줍니다. "견적 요청이 접수되었습니다"라고 분명히 말해야 합니다. 둘째, 답변 예상 시간을 알려줍니다. "영업일 기준 24~48시간 안에 답변드립니다"처럼 구체적이어야 합니다. 셋째, 급한 경우의 연락 수단을 알려줍니다. 이메일, 카카오채널, 전화 중 실제로 운영 가능한 채널만 넣습니다. 넷째, 다음 단계의 흐름을 보여줍니다.

예시는 이렇습니다.

견적 요청이 접수되었습니다.
보내주신 내용을 검토한 뒤 영업일 기준 24~48시간 안에 이메일로 답변드릴게요.

다음 단계
1. 요청 내용과 일정, 예산 범위를 검토합니다.
2. 추가 확인이 필요하면 짧은 질문을 이메일로 보내드립니다.
3. 진행 가능성이 높다면 상담 일정 또는 제안서를 안내드립니다.

급한 일정이라면 [email protected] 으로 "견적 요청 완료"라고 적어 보내주세요.

이 화면은 고객을 안심시키고, 동시에 우리 일을 줄여줍니다. "언제 답장 오나요?"라는 추가 문의를 줄일 수 있기 때문입니다.

리드를 상담, 제안서, 유료 상품으로 연결하기

견적 요청을 받았다면 이제 운영이 중요합니다. 리드를 모으기만 하고 답장이 늦으면 아무 의미가 없습니다. 특히 서비스 구매 의도가 높은 고객은 여러 사람에게 동시에 문의하는 경우가 많습니다. 빠른 응답은 그 자체로 신뢰입니다.

초기에는 복잡한 CRM이 없어도 됩니다. 구글시트, 노션, Supabase 테이블, 또는 관리자 목록 페이지에 상태만 잘 기록해도 충분합니다. 추천 상태는 다음과 같습니다.

견적 요청이 들어오면 먼저 세 가지를 봅니다. 서비스가 내가 제공하는 범위와 맞는지, 예산이 최소 진행 기준에 맞는지, 일정이 현실적인지입니다. 이 세 가지가 맞으면 상담으로 연결합니다. 하나가 애매하면 추가 질문을 보냅니다. 두 개 이상 맞지 않으면 정중히 거절하거나 더 적합한 대안을 안내합니다.

답장 템플릿을 미리 만들어두면 훨씬 편합니다.

안녕하세요, [이름]님.
견적 요청서 보내주셔서 감사합니다.
남겨주신 내용을 확인해보니 [서비스 유형] 방향으로 검토할 수 있을 것 같습니다.

정확한 범위와 일정을 확인하기 위해 20분 정도 짧은 상담을 제안드립니다.
가능하신 시간대를 2~3개 알려주시면 일정 조율 후 안내드릴게요.

상담 전에는 참고하고 싶은 사이트나 현재 사용 중인 소개 자료가 있다면 함께 보내주세요.
감사합니다.

정보가 부족한 경우에는 이렇게 보낼 수 있습니다.

안녕하세요, [이름]님.
견적 요청서 확인했습니다.
정확한 안내를 위해 아래 두 가지만 추가로 확인 부탁드립니다.

1. 이번 페이지에서 가장 원하는 행동은 문의, 예약, 결제, 다운로드 중 무엇인가요?
2. 완성 희망 일정은 언제쯤인가요?

답변 주시면 가능 범위와 예상 견적을 정리해서 안내드리겠습니다.

예산이나 일정이 맞지 않는 경우에도 차갑게 끊지 마세요. 미래 고객이 될 수 있습니다.

안녕하세요, [이름]님.
요청 주신 내용을 확인했습니다.
현재 희망 일정과 예산 범위에서는 전체 제작을 바로 진행하기는 어려울 수 있습니다.

다만 우선순위를 줄여 1페이지 MVP로 시작하거나, 외부 폼을 연결한 간단한 버전으로 시작하는 방법은 가능합니다.
원하시면 가능한 범위의 대안을 간단히 안내드리겠습니다.

이렇게 하면 견적 요청 페이지는 단순한 폼이 아니라 세일즈 흐름의 시작점이 됩니다.

나중에 붙일 수 있는 자동화

처음부터 자동화를 붙일 필요는 없습니다. 하지만 리드가 늘어나면 자동화가 큰 도움이 됩니다. 예를 들어 견적 요청이 들어오면 Slack 채널에 알림을 보내거나, 이메일로 요약을 받거나, 관리자 페이지에 상태를 자동으로 표시할 수 있습니다.

Lovable의 Slack 연동 문서에서도 견적 요청 폼이 제출되면 데이터를 저장하고 #new-deals 같은 채널에 요약을 보내는 예시가 소개됩니다.⁵ 혼자 일하는 프리랜서라면 Slack 대신 이메일이나 카카오 알림을 선호할 수 있습니다. 중요한 것은 도구가 아니라 속도입니다. 좋은 리드가 들어왔을 때 빨리 확인하고 답장할 수 있어야 합니다.

자동화는 다음 순서로 붙이면 좋습니다.

1. 외부 폼 응답을 이메일로 받는다.

2. 응답을 구글시트나 Supabase에 쌓는다.

3. 신규 리드 알림을 이메일, Slack, 카카오워크 등으로 받는다.

4. 답장 템플릿을 만들어 빠르게 회신한다.

5. 리드 상태를 관리한다.

6. 반복이 많아지면 제안서 발송, 상담 일정, 계약 안내를 자동화한다.

처음부터 6번까지 가려고 하지 마세요. 무료 사용자에게는 1번과 2번만 되어도 충분히 강력합니다.

완성 후 반드시 테스트할 시나리오

페이지를 Publish하기 전에 테스트용 고객이 되어 전체 흐름을 밟아보세요. 테스트는 "보이네"로 끝나면 안 됩니다. 실제로 제출해봐야 합니다.

먼저 스마트폰에서 페이지를 엽니다. 첫 화면에서 어떤 견적을 요청하는 페이지인지 이해되는지 봅니다. "견적 요청서 작성하기" 버튼을 누릅니다. 외부 폼이 새 탭에서 열리는지 확인합니다. 테스트 응답을 제출합니다. 이메일 알림이 오는지 확인합니다. 응답이 구글시트나 폼 응답 화면에 남는지 봅니다.

내부 폼 버전이라면 필수 항목을 비워두고 제출해보세요. 오류 메시지가 친절하게 나와야 합니다. 이메일을 이상한 형식으로 넣어보세요. 검증이 작동해야 합니다. 제출 버튼을 빠르게 두 번 눌러보세요. 중복 제출이 막히는지 봐야 합니다. 제출 후 성공 메시지가 나오는지, 실패했을 때 대체 연락처가 보이는지도 확인합니다.

관리자 목록 페이지가 있다면 로그인하지 않은 상태로 접근해보세요. 개인정보가 보이면 안 됩니다. 로그인 후에는 최신 요청이 위에 보이는지, 상태 변경과 내부 메모가 저장되는지 확인합니다.

테스트 질문은 하나로 요약할 수 있습니다.

고객은 막힘없이 견적을 요청할 수 있고, 나는 그 요청을 놓치지 않고 확인할 수 있는가?

이 질문에 "그렇다"라고 답할 수 있으면 첫 버전은 성공입니다.

이번 장의 완성 기준

이번 장에서 만든 것은 결제 시스템도 아니고, 거대한 CRM도 아닙니다. 부업과 서비스 판매에 필요한 잠재고객 정보를 모으는 견적 요청 페이지입니다. 이 페이지가 있으면 "관심 있는 사람"과 "실제로 구매 가능성이 있는 사람"을 구분할 수 있습니다.

완성 기준은 다음과 같습니다.

• 첫 화면에서 어떤 서비스의 견적 요청 페이지인지 바로 이해된다.

• 이 서비스가 누구에게 적합한지 설명되어 있다.

• 상담 전 준비하면 좋은 정보가 페이지 안에 안내되어 있다.

• 서비스 유형, 예산, 일정, 원하는 결과물, 연락처를 받을 수 있다.

• 무료 사용자 버전에서는 외부 폼이나 이메일 링크로 실제 요청을 놓치지 않는다.

• 내부 폼 버전에서는 필수 입력 검증, 제출 중 상태, 성공/실패 안내가 작동한다.

• 관리자 확인 방식이 있다. 처음에는 구글시트나 Supabase 대시보드여도 충분하다.

• 수집한 리드를 상담, 제안서, 유료 상품으로 연결하는 후속 흐름이 있다.

여기까지 만들었다면 여러분은 단순한 웹페이지를 만든 것이 아닙니다. 작은 영업 파이프라인을 만든 것입니다. 고객이 들어오고, 정보를 남기고, 내가 검토하고, 상담과 제안서로 이어지는 흐름이 생겼습니다.

다음 장에서는 이 흐름을 디지털 상품 판매에 적용해보겠습니다. 전자책, 강의, 템플릿, 자료집처럼 한 번 만들어 여러 번 팔 수 있는 상품의 랜딩 페이지를 만드는 방법입니다. 지금 만든 견적 요청 페이지가 맞춤형 서비스 판매의 입구라면, 다음 장의 디지털 상품 랜딩 페이지는 반복 판매 가능한 부업의 입구가 될 수 있습니다.

참고

¹FAQ - Lovable Documentation

²How to Build a Landing Page With Lovable Easily

³FAQ - Lovable Documentation

⁴FAQ - Lovable Documentation

⁵Connect your app to Slack