대기자 명단 페이지 만들기

입문~12 분0/4 단계

대기자 명단으로 제품을 론칭하세요

완성된 제품을 만들기 전에, 아이디어를 검증하고 기대감을 쌓아야 합니다. 대기자 명단 페이지는 관심 있는 초기 사용자를 모으고 시장 수요를 증명하는 가장 빠른 방법입니다.

이 레슨에서는 매력적인 헤드라인, 가치 제안, 이메일 수집 폼, 그리고 사회적 증거를 갖춘 완전한 대기자 명단 랜딩 페이지를 만들어 봅니다. 이 한 페이지가 여러분의 제품 전체를 위한 발사대가 될 수 있습니다—그리고 HTML과 Tailwind CSS만으로 충분합니다.

h1 제품 헤드라인과 제품의 혜택을 설명하는 p 가치 제안을 추가하세요

힌트: 이렇게 만드세요: `<h1 class="text-5xl md:text-6xl font-bold mb-4">제품 이름</h1>` 그리고 `<p class="text-xl text-blue-300 mb-8">사용자에게 어떤 도움이 되나요?</p>`

어디에 작성하나요?

12번째 줄에 작성하세요 — 그 주석 아래, 이미 추가한 코드 다음입니다.

form 요소 안에 placeholder 텍스트가 있는 이메일 입력 필드를 만드세요

폼 안에 '500+ Founders와 함께하기' 또는 '대기자 명단 참여하기' 같은 텍스트가 있는 제출 버튼을 추가하세요

폼 아래에 이미 대기 중인 사람 수를 보여주는 사회적 증거 텍스트를 추가하세요 (예: '500+ founders')

html

14 줄