대기자 명단 페이지 만들기
beginner~12 분0/4 단계
대기자 명단으로 제품을 론칭하세요
완성된 제품을 만들기 전에, 아이디어를 검증하고 기대감을 쌓아야 합니다. 대기자 명단 페이지는 관심 있는 초기 사용자를 모으고 시장 수요를 증명하는 가장 빠른 방법입니다.
이 레슨에서는 매력적인 헤드라인, 가치 제안, 이메일 수집 폼, 그리고 사회적 증거를 갖춘 완전한 대기자 명단 랜딩 페이지를 만들어 봅니다. 이 한 페이지가 여러분의 제품 전체를 위한 발사대가 될 수 있습니다—그리고 HTML과 Tailwind CSS만으로 충분합니다.
안내
1
h1 제품 헤드라인과 제품의 혜택을 설명하는 p 가치 제안을 추가하세요
힌트: 이렇게 만드세요: `<h1 class="text-5xl md:text-6xl font-bold mb-4">제품 이름</h1>` 그리고 `<p class="text-xl text-blue-300 mb-8">사용자에게 어떤 도움이 되나요?</p>`
2
form 요소 안에 placeholder 텍스트가 있는 이메일 입력 필드를 만드세요
3
폼 안에 '500+ Founders와 함께하기' 또는 '대기자 명단 참여하기' 같은 텍스트가 있는 제출 버튼을 추가하세요
4
폼 아래에 이미 대기 중인 사람 수를 보여주는 사회적 증거 텍스트를 추가하세요 (예: '500+ founders')
내 코드
html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
ViBot과 함께 바이브로 만들기무료 메시지 0 / 12개
이 단계에서 만들고 싶은 것을 설명해 주시면 코드를 작성해 드릴게요 — 그다음 적용을 클릭하면 에디터에 바로 들어갑니다. 이 단계: h1 제품 헤드라인과 제품의 혜택을 설명하는 p 가치 제안을 추가하세요
실시간 미리보기
실시간 미리보기