Camilexx/enviosxpress-web

🚀 방문 페이지 CRO 스킬

방문자를 고객으로 전환하는 방문 페이지를 구축하세요. 모든 요소는 전환 심리학과 입증된 패턴에 기반합니다.

---

빠른 참조

전환 계층(다음 순서로 확인):
1. 5초 안에 가치 제안이 명확한가? → 히어로 헤드라인
2. CTA가 첫 화면에 보이는가? → 버튼 배치
3. 사회적 증거가 있는가? → 사용 후기, 로고, 숫자
4. 반론이 해결되었는가? → FAQ, 보증
5. 마찰이 최소화되었는가? → 양식 필드, 로딩 속도

---

섹션 구조 (위에서 아래로)

최적의 방문 페이지 흐름:
┌─────────────────────────────────────────┐
│  1. 내비게이션 바 — 로고 + 메뉴 + CTA 버튼    │
├─────────────────────────────────────────┤
│  2. 히어로 — 헤드라인 + 부제 + CTA + 이미지  │
│     (첫 화면, < 3초 이내)                     │
├─────────────────────────────────────────┤
│  3. 사회적 증거 바 — 로고 / 숫자            │
├─────────────────────────────────────────┤
│  4. 문제 — 고통점 (PAS 형식)               │
├─────────────────────────────────────────┤
│  5. 해결책 — 당신의 제품이 답입니다          │
├─────────────────────────────────────────┤
│  6. 기능 — 3-6가지 핵심 혜택                │
├─────────────────────────────────────────┤
│  7. 작동 방식 — 3단계                    │
├─────────────────────────────────────────┤
│  8. 사용 후기 — 실제 사용자 코멘트            │
├─────────────────────────────────────────┤
│  9. 가격 — 요금제 + 비교                    │
├─────────────────────────────────────────┤
│ 10. FAQ — 반론 처리                       │
├─────────────────────────────────────────┤
│ 11. 최종 CTA — 마지막 전환 유도             │
├─────────────────────────────────────────┤
│ 12. 바닥글 — 링크 + 법적 고지 + 연락처      │
└─────────────────────────────────────────┘

---

히어로 섹션 패턴

패턴 1: 분할 히어로 (왼쪽: 카피, 오른쪽: 시각 자료)

<section class="hero">
  <div class="hero-grid">
    <!-- 왼쪽: 카피 -->
    <div class="hero-content">
      <span class="hero-badge">🚀 2026년 신규</span>
      <h1 class="hero-title">
        에콰도르 전역으로 소포를 보내세요
        <span class="text-gradient">$2.50부터</span>
      </h1>
      <p class="hero-subtitle">
        가장 빠르고 믿을 수 있는 택배 서비스.
        실시간 추적과 함께 24-48시간 내 배송.
      </p>
      <div class="hero-actions">
        <a href="#cotizar" class="btn btn-primary btn-lg">
          무료 배송비 견적
          <svg><!-- 화살표 아이콘 --></svg>
        </a>
        <a href="#como-funciona" class="btn btn-secondary btn-lg">
          작동 방식 보기
        </a>
      </div>
      <div class="hero-proof">
        <div class="hero-avatars"><!-- 쌓인 아바타 --></div>
        <p><strong>2,500명</strong> 이상의 자영업자가 저희를 신뢰합니다</p>
      </div>
    </div>
    
    <!-- 오른쪽: 시각 자료 -->
    <div class="hero-visual">
      <!-- 제품 스크린샷, 일러스트레이션 또는 동영상 -->
    </div>
  </div>
</section>

.hero {
  padding: var(--space-section) 0;
  min-height: calc(100vh - 80px);
  display: flex;
  align-items: center;
}

.hero-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-16);
  align-items: center;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 var(--space-6);
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-4);
  background: var(--color-primary-light);
  color: var(--color-primary);
  font-size: var(--text-sm);
  font-weight: 600;
  border-radius: var(--radius-full);
  margin-bottom: var(--space-6);
}

.hero-title {
  font-family: var(--font-display);
  font-size: var(--text-hero);
  font-weight: 800;
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--color-text);
  margin-bottom: var(--space-6);
}

.text-gradient {
  background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.hero-subtitle {
  font-size: var(--text-xl);
  color: var(--color-text-secondary);
  line-height: var(--leading-relaxed);
  max-width: 540px;
  margin-bottom: var(--space-8);
}

.hero-actions {
  display: flex;
  gap: var(--space-4);
  margin-bottom: var(--space-8);
}

.hero-proof {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

.hero-avatars {
  display: flex;
}
.hero-avatars img {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 2px solid var(--color-surface);
  margin-left: -8px;
}
.hero-avatars img:first-child {
  margin-left: 0;
}

/* 모바일 */
@media (max-width: 768px) {
  .hero-grid {
    grid-template-columns: 1fr;
    text-align: center;
  }
  .hero-subtitle { max-width: 100%; }
  .hero-actions { flex-direction: column; }
  .hero-proof { justify-content: center; }
  .hero-visual { order: -1; }
}

---

사회적 증거 패턴

로고 바

<section class="social-proof-bar">
  <p class="social-proof-label">저희를 신뢰하는 기업들</p>
  <div class="logo-scroll">
    <div class="logo-track">
      <!-- 무한 스크롤을 위해 로고 2회 반복 -->
      <img src="/logos/brand1.svg" alt="Brand 1" />
      <img src="/logos/brand2.svg" alt="Brand 2" />
      <!-- ... -->
    </div>
  </div>
</section>

.social-proof-bar {
  padding: var(--space-12) 0;
  border-top: 1px solid var(--color-border-subtle);
  border-bottom: 1px solid var(--color-border-subtle);
  text-align: center;
}

.social-proof-label {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  margin-bottom: var(--space-8);
}

.logo-scroll {
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, white 10%, white 90%, transparent);
}

.logo-track {
  display: flex;
  gap: var(--space-12);
  animation: scroll 30s linear infinite;
}

.logo-track img {
  height: 28px;
  opacity: 0.4;
  filter: grayscale(100%);
  transition: all var(--duration-normal) var(--ease-out);
}

.logo-track img:hover {
  opacity: 1;
  filter: grayscale(0%);
}

@keyframes scroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

통계 바

<div class="stats-bar">
  <div class="stat">
    <span class="stat-value" data-count="15000">15,000+</span>
    <span class="stat-label">배송 완료</span>
  </div>
  <div class="stat">
    <span class="stat-value">98.5%</span>
    <span class="stat-label">배송 성공률</span>
  </div>
  <div class="stat">
    <span class="stat-value">24시간</span>
    <span class="stat-label">평균 배송 시간</span>
  </div>
  <div class="stat">
    <span class="stat-value">4.9★</span>
    <span class="stat-label">평점</span>
  </div>
</div>

---

가격 섹션

토글 포함 3단계 요금제 레이아웃

<section class="pricing" id="pricing">
  <div class="container">
    <div class="section-header">
      <h2>간단하고 투명한 요금제</h2>
      <p>숨은 비용 없음. 원할 때 언제든지 취소 가능.</p>
    </div>
    
    <!-- 토글 -->
    <div class="pricing-toggle">
      <span class="toggle-label" data-active="monthly">월간</span>
      <button class="toggle-switch" role="switch" aria-checked="false">
        <span class="toggle-thumb"></span>
      </button>
      <span class="toggle-label" data-active="yearly">
        연간 <span class="toggle-badge">-20%</span>
      </span>
    </div>
    
    <!-- 요금제 그리드 -->
    <div class="plans-grid">
      <!-- 기본 -->
      <div class="plan-card">
        <div class="plan-header">
          <h3>기본</h3>
          <p class="plan-desc">시작하는 자영업자용</p>
        </div>
        <div class="plan-price">
          <span class="price-amount" data-monthly="$19" data-yearly="$15">$19</span>
          <span class="price-period">/월</span>
        </div>
        <ul class="plan-features">
          <li class="feature-included">✓ 월 100회 배송</li>
          <li class="feature-included">✓ 기본 추적</li>
          <li class="feature-included">✓ 이메일 지원</li>
          <li class="feature-excluded">✗ API 액세스</li>
          <li class="feature-excluded">✗ 우선 지원</li>
        </ul>
        <button class="btn btn-secondary btn-lg btn-full">무료로 시작하기</button>
      </div>
      
      <!-- 프로 (추천) -->
      <div class="plan-card plan-featured">
        <div class="plan-badge">가장 인기</div>
        <div class="plan-header">
          <h3>프로페셔널</h3>
          <p class="plan-desc">성장 중인 비즈니스용</p>
        </div>
        <div class="plan-price">
          <span class="price-amount" data-monthly="$49" data-yearly="$39">$49</span>
          <span class="price-period">/월</span>
        </div>
        <ul class="plan-features">
          <li class="feature-included">✓ 월 500회 배송</li>
          <li class="feature-included">✓ 실시간 추적</li>
          <li class="feature-included">✓ 우선 지원</li>
          <li class="feature-included">✓ API 액세스</li>
          <li class="feature-included">✓ 대시보드 분석</li>
        </ul>
        <button class="btn btn-primary btn-lg btn-full">지금 시작하기</button>
      </div>
      
      <!-- 엔터프라이즈 -->
      <div class="plan-card">
        <div class="plan-header">
          <h3>엔터프라이즈</h3>
          <p class="plan-desc">맞춤형 솔루션</p>
        </div>
        <div class="plan-price">
          <span class="price-amount">문의</span>
        </div>
        <ul class="plan-features">
          <li class="feature-included">✓ 무제한 배송</li>
          <li class="feature-included">✓ 전담 계정 관리자</li>
          <li class="feature-included">✓ 보장된 SLA</li>
          <li class="feature-included">✓ 맞춤형 통합</li>
          <li class="feature-included">✓ 법인 청구</li>
        </ul>
        <button class="btn btn-secondary btn-lg btn-full">영업팀 문의</button>
      </div>
    </div>
    
    <!-- 보증 -->
    <div class="guarantee">
      <span class="guarantee-icon">🛡️</span>
      <p>30일 만족 보장. 만족하지 않으시면 전액 환불해 드립니다.</p>
    </div>
  </div>
</section>

.plans-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
  max-width: 1100px;
  margin: var(--space-12) auto;
}

.plan-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-xl);
  padding: var(--space-8);
  position: relative;
  transition: all var(--duration-normal) var(--ease-out);
}

.plan-featured {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 1px var(--color-primary), var(--shadow-xl);
  transform: scale(1.05);
}

.plan-badge {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--color-primary);
  color: white;
  padding: var(--space-1) var(--space-4);
  border-radius: var(--radius-full);
  font-size: var(--text-sm);
  font-weight: 600;
}

.price-amount {
  font-family: var(--font-display);
  font-size: var(--text-5xl);
  font-weight: 800;
  color: var(--color-text);
}

.plan-features {
  list-style: none;
  padding: 0;
  margin: var(--space-8) 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.feature-included {
  color: var(--color-text);
}

.feature-excluded {
  color: var(--color-text-muted);
  text-decoration: line-through;
}

.btn-full {
  width: 100%;
}

@media (max-width: 768px) {
  .plans-grid {
    grid-template-columns: 1fr;
  }
  .plan-featured {
    transform: none;
    order: -1;
  }
}

---

FAQ 섹션

<section class="faq">
  <div class="container">
    <h2>자주 묻는 질문</h2>
    <div class="faq-grid">
      <details class="faq-item">
        <summary class="faq-question">
          배송에는 얼마나 걸리나요?
          <svg class="faq-arrow"><!-- chevron --></svg>
        </summary>
        <div class="faq-answer">
          <p>주요 도시의 경우 평균 배송 시간은 24-48시간이며,
          농촌 지역의 경우 48-72시간입니다.</p>
        </div>
      </details>
      <!-- 추가 항목... -->
    </div>
  </div>
</section>

.faq-item {
  border-bottom: 1px solid var(--color-border-subtle);
}

.faq-question {
  padding: var(--space-5) 0;
  cursor: pointer;
  font-size: var(--text-lg);
  font-weight: 600;
  display: flex;
  justify-content: space-between;
  align-items: center;
  list-style: none;
}

.faq-question::-webkit-details-marker { display: none; }

.faq-arrow {
  transition: transform var(--duration-normal) var(--ease-out);
}

details[open] .faq-arrow {
  transform: rotate(180deg);
}

.faq-answer {
  padding-bottom: var(--space-5);
  color: var(--color-text-secondary);
  line-height: var(--leading-relaxed);
  animation: slideDown 0.3s var(--ease-out);
}

@keyframes slideDown {
  from { opacity: 0; max-height: 0; }
  to { opacity: 1; max-height: 200px; }
}

---

카피라이팅 공식

히어로 헤드라인 (PAS: 문제 → 동요 → 해결)

공식: [원하는 결과] + [특정 시간 내] + [주요 반론 없이]

예시:
✅ "에콰도르 전역으로 소포 보내기 $2.50부터 — 24시간 내 배송"
✅ "프로그래밍 몰라도 48시간 안에 온라인 스토어 오픈"
✅ "자동 이메일 마케팅으로 30일 만에 매출 두 배"