하루 만에 랜딩페이지 + 문의 폼 — 코딩 없이 AI 에이전트로
제품·강의·가게를 소개하는 랜딩페이지 한 장과 방문자가 연락처를 남기는 문의 폼을 만드는 글입니다. 디자인 툴을 배우거나 외주를 맡기지 않고, 아래 요청문에 내 소개 문구만 넣으면 에이전트가 한 페이지를 완성하고 무료로 공개하는 곳까지 안내합니다.
아래 회색 박스 안 문장을 통째로 복사해서 Claude Code 같은 AI 에이전트에 붙여넣기만 하면 됩니다. 무엇을 만들지·어떻게 검증할지·막히면 어떻게 할지가 다 적혀 있어서, 프로그래밍을 전혀 몰라도 에이전트가 알아서 끝까지 진행해요. 대괄호
[ ]부분만 내 상황에 맞게 바꿔 넣으면 됩니다.
이 글로 얻는 것
- 모바일까지 대응되는 소개 페이지 한 장
- 이름·연락처를 받는 '문의하기' 폼
- 인터넷에 무료로 공개하는 방법(원하면 실제 배포까지)
Claude에게 붙여넣을 프롬프트
내 [제품/서비스/가게]를 소개하는 랜딩페이지 한 장을 만들어줘. 개발은 모르니 네가 알아서 하고, 막히면 멈춰서 설명해줘.
소개할 것: [예: '초보도 3주 만에 끝내는 온라인 드로잉 클래스']
핵심 강점 3가지: [예: 1) 왕초보 전용 2) 평생 다시보기 3) 1:1 피드백]
분위기: [예: 따뜻하고 신뢰감 있게, 사진 없이 텍스트+색으로]
행동 유도(버튼): [예: '무료 상담 신청']
진행 방식:
1. 개발 환경이 없으면 먼저 설치해줘. Next.js + TypeScript로 프로젝트를 만들어.
2. 한 페이지 구성: 상단 큰 제목(헤드라인) → 강점 3개 카드 → 후기/신뢰 요소 자리 → 하단 '문의하기' 폼(이름/연락처/문의내용). 모바일에서도 예쁘게 보이게 반응형으로.
3. 문의 폼은 우선 제출하면 화면에 "접수됐습니다"가 뜨고 내용이 로컬에 저장되게 해줘(이메일 연동은 원하면 나중에).
4. 개발 서버를 켜서 브라우저로 직접 열어보고, 폼 제출까지 동작하는지 네가 확인해줘. 결과를 보여줘.
5. 잘 되면 무료로 인터넷에 공개하는 방법(Vercel 또는 Cloudflare Pages)을 단계별로 안내하고, 원하면 그대로 올려줘.
각 단계가 끝날 때 한 줄로 요약해줘.
실전 예시
예를 들어 소개할 것에 ‘퇴근 후 배우는 홈베이킹 원데이 클래스’, 강점에 **‘① 재료 키트 제공 ② 실패해도 환불 ③ 소수정예 4명’**을 넣으면, 에이전트는 헤드라인부터 강점 카드·문의 폼까지 한 페이지를 만들고 브라우저에서 폼 제출을 직접 눌러 확인시켜 줍니다. 결과로 바로 손님에게 링크로 보낼 수 있는 소개 페이지가 남습니다.
이렇게 쓰면 좋아요
- 헤드라인(맨 위 큰 문장)이 제일 중요해요. “누구에게 어떤 이득”이 한 문장에 들어가면 좋습니다.
- 사진이 없어도 색과 여백만으로 충분히 깔끔합니다. 나중에 “여기에 이미지 넣어줘”로 추가하세요.
- 문의 내용을 이메일/문자로 받고 싶으면 “폼 제출을 내 이메일로 보내지게 해줘”라고 이어서 요청하면 됩니다.
이런 실수는 피하세요
- 강점을 5개 이상 늘어놓기 → 3개로 압축해야 읽히고 전환됩니다.
- 헤드라인에 브랜드명만 크게 쓰기 → “누구에게 어떤 이득”이 들어가야 해요.
- 문의만 받고 방치 → “문의가 오면 내 이메일로 알림 보내줘”까지 이어서 요청하세요.
📱 인스타 릴스로 만들기 (30초 대본)
이 글 하나가 곧 릴스 한 편입니다. 아래 30초 구조 그대로 찍으면 돼요 — 핵심은 ‘회색 박스를 복사해서 붙여넣는 순간’을 화면 녹화로 보여주는 것. 말솜씨가 없어도 화면만 녹화하면 콘텐츠가 됩니다.
한 줄 콘셉트: “외주 30만원 → 오늘 오후 무료”의 반전
🎞️ 세로 슬라이드(PPT) 버전 열기 — 아래 대본이 9:16 카드 5장으로 만들어져 있어요. 카드를 그대로 캡처해서 릴스 장면으로 쓰면 됩니다.
| 시간 · 구간 | 장면 | 화면 자막 |
|---|---|---|
| 0–3초 · 훅 | 얼굴 클로즈업 또는 결과물 티저 | 랜딩페이지, 외주 맡기지 마세요 |
| 3–8초 · 공감 | 고민하는 표정 / 채팅창 캡처 | 소개 페이지 하나 만들려고 며칠씩, 견적은 수십만원… |
| 8–20초 · 핵심 | 화면 녹화: 회색 박스 복사 → 에이전트에 붙여넣기 | “이 문장만 복사해서 붙여넣기” |
| 20–27초 · 결과 | 완성된 결과물 화면 스크롤 | 문의 폼까지 되는 소개 페이지 완성 ✅ |
| 27–30초 · CTA | 프로필/블로그 링크 화면 | “전체 프롬프트는 프로필 링크(유피피 블로그)” |
게시글 캡션(복사용)
제품 소개 한 줄만 있으면 랜딩페이지가 오늘 안에 나와요. 문의 폼까지요. 전체 프롬프트는 프로필 링크(유피피 블로그)에 👆
#랜딩페이지 #노코드 #1인창업 #AI마케팅 #claude #소상공인 #부업 #창업준비
촬영·편집 팁
- 세로 9:16, 첫 1초에 가장 센 문장을 자막으로 박아야 넘김을 막습니다.
- 핵심 구간(8–20초)은 말 없이 화면 녹화 + 자막만으로 충분해요. 붙여넣는 손맛이 후킹 포인트.
- 결과 공개는 ‘before→after’로 붙이면 완성도가 확 올라갑니다.
- 마지막 컷에 “프로필 링크” 화살표 스티커 → 블로그 유입.
자주 묻는 질문
Q. 도메인(주소)도 필요한가요?
처음엔 무료로 주는 주소로 충분합니다. 나중에 내 도메인을 연결하고 싶으면 그때 에이전트에게 부탁하면 돼요.
Q. 문의가 들어오면 어디서 보나요?
기본은 페이지에 저장되고, '내 이메일/구글시트로 받게 해줘'라고 요청하면 그렇게 연결해 줍니다.
AI 에이전트가 처음이라면 생성형 이미지 설치 글처럼 “복사 → 붙여넣기”만 하면 됩니다. 다른 안내서는 블로그 목록 에서 카테고리별로 볼 수 있어요.