랜딩 페이지의 7가지 섹션 구조를 배우고, Claude로 와이어프레임 아이디어를 잡은 뒤 실제 HTML/CSS 코드로 완성한다. Hero부터 CTA까지 전환율 높은 랜딩 페이지를 처음부터 끝까지 만든다.
이번 강에서 배울 것
- 랜딩 페이지의 황금 구조 7단계
- Claude로 섹션별 콘텐츠 기획하기
- Hero 섹션 HTML/CSS 완성 실습
- 전체 페이지를 코드로 완성하는 프롬프트 전략
랜딩 페이지의 황금 구조
전환율이 높은 랜딩 페이지는 방문자의 심리를 따라 설계됩니다. "이게 뭔가?" → "나한테 필요한가?" → "믿을 수 있나?" → "지금 해야 하나?"의 흐름입니다.
| 순서 | 섹션 | 역할 | 핵심 질문 해소 |
|---|---|---|---|
| 1 | Hero | 첫인상 + 핵심 가치 전달 | "이게 뭔가?" |
| 2 | Problem | 타겟의 고통 공감 | "내 얘기다" |
| 3 | Solution | 제품/서비스로 해결 | "이게 답이다" |
| 4 | Features | 구체적 기능/혜택 | "어떻게 해결하나?" |
| 5 | Social Proof | 후기, 통계, 로고 | "믿을 수 있나?" |
| 6 | Pricing | 가격 투명성 | "얼마인가?" |
| 7 | CTA | 최종 행동 유도 | "지금 해야 하나?" |
1단계 — 섹션별 콘텐츠 기획
실습 프롬프트 1 — 콘텐츠 기획
FRESH:ON 랜딩 페이지 콘텐츠를 섹션별로 기획해줘. 브랜드: 직장인 대상 기능성 음료, 건강하고 에너제틱 타겟: 20~35세 직장인, 점심 후 오후 슬럼프가 문제 섹션별로 작성: 1. Hero: 헤드라인 + 서브카피 + CTA 버튼 텍스트 2. Problem: 공감 포인트 3가지 (직장인이 겪는 상황) 3. Solution: 제품이 해결하는 방식 3가지 4. Features: 핵심 기능/특징 4가지 (아이콘 설명 포함) 5. Social Proof: 가상 리뷰 3개 + 통계 2개 6. CTA: 최종 문구 2가지 (A/B 테스트용)
2단계 — Hero 섹션 구현
실습 프롬프트 2 — Hero 코드
FRESH:ON 랜딩 페이지 Hero 섹션 HTML/CSS를 만들어줘. 콘텐츠: - 헤드라인: "오후 3시, 다시 켜지는 시간" - 서브카피: "졸음을 이기는 억지보다, 몸이 원하는 에너지로. FRESH:ON." - CTA 버튼: "첫 주문 30% 할인받기" (Primary), "성분 확인하기" (Ghost) - 배경: 그라디언트 (초록 계열) + 오른쪽에 제품 이미지 placeholder 디자인: - Pretendard 폰트 - 브랜드 색상 변수 사용 - 모바일: 세로 스택, 데스크탑: 좌우 2단 - 부드러운 fade-in 애니메이션 (CSS animation)
3단계 — Features 섹션 구현
실습 프롬프트 3 — Features 섹션
Features 섹션을 만들어줘. 아이콘은 SVG 인라인으로 직접 포함해줘. 4가지 특징: 1. "카페인 없는 에너지" — 자연 성분으로 각성 효과 2. "15분 안에 효과" — 빠른 흡수 포뮬러 3. "설탕 0g" — 달지 않은 건강한 맛 4. "3가지 맛" — 민트, 자몽, 녹차 레이아웃: 2x2 그리드 (모바일 1x4) 각 카드: 아이콘(초록) + 제목(굵게) + 설명(회색)
4단계 — 전체 페이지 완성
실습 프롬프트 4 — 전체 조립
지금까지 만든 Hero, Features 섹션에 이어서 Social Proof(리뷰 3개 + 별점)와 최종 CTA 섹션을 추가해줘. Social Proof: - 리뷰어 이름, 직업, 별점(5개 중), 리뷰 텍스트 - 배경: 연한 초록 (#f0fdf4) CTA 섹션: - 배경: 브랜드 그라디언트 - 헤드라인 + 서브카피 + 버튼 2개 - 아래에 "무료 배송 | 30일 환불 보장 | 정기구독 가능" 신뢰 아이콘 3개
랜딩 페이지는 한 번에 만들려 하지 마세요. Hero로 전체 방향을 잡고, 섹션 하나씩 Claude와 대화하며 완성하는 것이 훨씬 효율적입니다. 각 섹션이 완성되면 "이전 섹션과 스타일을 맞춰줘"라고 연결하세요.
강의 핵심 요약
- 랜딩 페이지 7단계: Hero → Problem → Solution → Features → Social Proof → Pricing → CTA
- 콘텐츠 기획 먼저, 코드 구현 나중 — Claude가 둘 다 도움
- 섹션별로 나눠서 대화 → 마지막에 조립하는 방식이 효율적
- 다음 강: 만든 페이지를 모바일에서도 완벽하게 보이도록 반응형 적용
관련 검색어 · 랜딩 페이지 만들기, Hero 섹션 CSS, 전환율 높은 랜딩 페이지, Claude 웹 디자인, HTML 랜딩 페이지 구조