전환형 랜딩 페이지 만들기
전환율 높은 랜딩 페이지 만들기
전환형 랜딩 페이지는 강력한 메시지, 명확한 혜택, 사회적 증거(social proof), 그리고 강한 행동 유도 문구(CTA)를 결합해 방문자가 행동하도록 설득합니다 — 가입이든, 다운로드든, 구매든 말이죠.
이 레슨에서는 헤드라인, 가치 제안, 3개의 혜택 카드, 고객 후기, CTA 섹션을 갖춘 완성형 마케팅 랜딩 페이지를 만듭니다. 레슨이 끝나면 실제 전환을 이끌어낼 준비가 된 전문적인 페이지를 갖게 됩니다.
안내
배경 그라디언트가 있는 색상 컨테이너(section 태그) 안에 h1 헤드라인과 서브헤드라인이 있는 히어로 섹션을 만드세요
힌트: 사용 예: `<section class="py-20 px-4 bg-gradient-to-r from-indigo-600 to-blue-600 text-white text-center"><h1 class="text-5xl font-bold mb-4">헤드라인</h1><p class="text-xl">서브헤드라인</p></section>`
그리드 레이아웃으로 3개의 혜택 카드를 추가하세요. 각 카드에는 이모지, 혜택 제목, 설명이 들어갑니다
blockquote와 고객 이름/직함이 담긴 후기(테스티모니얼) 섹션을 추가하세요
페이지 하단에 h2 헤드라인, 설명, 큼직한 버튼이 있는 CTA 섹션을 추가하세요
그리드와 텍스트 크기에 md: 브레이크포인트를 사용해 레이아웃이 반응형이 되도록 하세요
내 코드
이 단계에서 만들고 싶은 것을 설명해 주시면 코드를 작성해 드릴게요 — 그다음 적용을 클릭하면 에디터에 바로 들어갑니다. 이 단계: 배경 그라디언트가 있는 색상 컨테이너(section 태그) 안에 h1 헤드라인과 서브헤드라인이 있는 히어로 섹션을 만드세요