랜딩 페이지 Above-the-Fold 설계: 첫 3초 안에 전환을 결정하는 UX

UX 디자인

랜딩 페이지Above the FoldCTA 설계전환율 최적화헤드라인 카피

이 글은 누구를 위한 것인가

  • 광고 클릭 후 전환율이 낮아 CPA가 높은 마케팅 팀
  • 랜딩 페이지를 처음 만드는 스타트업 디자이너
  • 히어로 섹션 어떻게 짜야 할지 모르는 팀

들어가며

사용자는 랜딩 페이지에서 3초 안에 "여기 있어야 하나?"를 결정한다. Above-the-Fold(스크롤 없이 보이는 영역)에서 무엇을 담느냐가 전환율을 결정한다.

이 글은 bluefoxdev.kr의 전환율 최적화 가이드 를 참고하여 작성했습니다.

1. Above-the-Fold 7가지 요소

[히어로 섹션 필수 요소]

1. 헤드라인 (H1):
   "무엇을, 누구를 위한 서비스인지" 한 문장
   ✅ "재고 없이 시작하는 이커머스, 드롭쉬핑 자동화"
   ❌ "혁신적인 솔루션으로 비즈니스를 성장시키세요"

2. 서브헤드라인:
   헤드라인을 보완하는 1-2문장
   구체적 숫자, 차별점 포함

3. 히어로 이미지/영상:
   제품 사용 장면 > 추상적 일러스트
   실제 사용자 사진 > 스톡 이미지
   
4. 주요 CTA:
   1개만 (2개 이상이면 클릭율 하락)
   동사 시작: "무료로 시작하기", "지금 신청"
   색상: 배경과 대비 명확하게

5. 신뢰 신호:
   사용자 수, 별점, 기업 로고
   "3,200개 기업이 사용 중"

6. 소셜 프루프:
   실제 사용자 얼굴 + 짧은 후기

7. 불안 해소:
   "신용카드 불필요", "무료 체험 14일"

2. 히어로 섹션 구현

function HeroSection() {
  return (
    <section className="min-h-[85vh] flex items-center bg-gradient-to-br from-blue-50 to-white">
      <div className="max-w-7xl mx-auto px-4 grid lg:grid-cols-2 gap-12 items-center">
        
        {/* 좌측: 텍스트 */}
        <div>
          {/* 소셜 프루프 배지 */}
          <div className="inline-flex items-center gap-2 bg-white border rounded-full px-4 py-2 text-sm text-gray-600 mb-6 shadow-sm">
            <span className="flex -space-x-2">
              {["user1.jpg", "user2.jpg", "user3.jpg"].map((img, i) => (
                <img key={i} src={img} className="w-6 h-6 rounded-full border-2 border-white" alt="" />
              ))}
            </span>
            <span>3,200+ 팀이 사용 중</span>
          </div>
          
          {/* 헤드라인 */}
          <h1 className="text-4xl lg:text-5xl font-bold leading-tight mb-4">
            재고 없이 시작하는
            <br />
            <span className="text-blue-600">이커머스 자동화</span>
          </h1>
          
          {/* 서브헤드라인 */}
          <p className="text-xl text-gray-600 mb-8">
            공급사 연동부터 주문 처리까지 자동화.<br />
            <strong>평균 84% 업무 시간 단축.</strong>
          </p>
          
          {/* CTA */}
          <div className="flex flex-col sm:flex-row gap-4">
            <a
              href="/signup"
              className="px-8 py-4 bg-blue-600 text-white rounded-xl font-semibold text-lg hover:bg-blue-700 transition-colors text-center"
            >
              14일 무료 체험 시작 →
            </a>
            <a
              href="/demo"
              className="px-8 py-4 border-2 border-gray-200 rounded-xl font-semibold text-lg hover:border-gray-300 transition-colors text-center"
            >
              데모 보기
            </a>
          </div>
          
          {/* 불안 해소 */}
          <p className="text-sm text-gray-400 mt-4">
            신용카드 불필요 · 언제든 취소 가능 · 설치 없음
          </p>
        </div>
        
        {/* 우측: 제품 이미지/스크린샷 */}
        <div className="relative">
          <img
            src="/product-screenshot.png"
            alt="대시보드 스크린샷"
            className="rounded-2xl shadow-2xl"
            width={600}
            height={400}
          />
          
          {/* 플로팅 지표 */}
          <div className="absolute -bottom-4 -left-4 bg-white rounded-xl shadow-lg p-4">
            <p className="text-sm text-gray-500">이번 달 처리된 주문</p>
            <p className="text-2xl font-bold text-blue-600">12,847건</p>
          </div>
        </div>
      </div>
    </section>
  );
}

마무리

Above-the-Fold에서 가장 중요한 것은 "헤드라인이 광고 메시지와 연결되는가"다. 광고에서 "재고 없이 이커머스 시작"을 봤는데 랜딩 페이지에 "혁신적인 플랫폼"이 있으면 메시지가 끊긴다. 광고 → 랜딩 페이지 → CTA의 메시지 일관성이 전환율에서 가장 큰 차이를 만든다.