CTA(Call To Action) 학습

CTA는 사용자가 특정 행동(구매, 문의, 신청 등)을 하도록 유도하는 버튼/링크입니다. 랜딩 페이지의 성과는 CTA 설계에 달려 있다고 해도 과언이 아닙니다.

이미지

설명

1. CTA 핵심 원칙: 생각하게 하지 마라

시각적 대비(Visual Contrast): CTA는 페이지에서 가장 먼저 보이도록 배경과 대비되는 강조색을 사용합니다.
명확한 문구(Microcopy): "제출"보다 "무료 가이드 받기", "5분 만에 시작하기"처럼 이득이 드러나는 동사가 좋습니다.
마찰 감소(Reduce Friction): "무료 체험", "신용카드 필요 없음" 같은 안심 문구로 클릭 장벽을 낮춥니다.

2. 디자인 체크리스트

색상 브랜드 강조색(Primary) + 배경 대비를 확보해 시선을 집중시킵니다.

크기 주변 요소보다 크고, 모바일 최소 44x44px 터치 영역을 보장합니다.

모양 둥근 모서리(Radius)로 클릭 유도감을 높입니다.

위치 F/Z 시선 흐름 끝, 정보 확인 후 행동 가능한 지점에 배치합니다.

4. CTA 배치 전략

상단(Above the Fold): 스크롤 전에도 보이는 CTA를 최소 1개 둡니다.
반복 배치: 긴 페이지에서는 섹션 종료 지점마다 CTA를 반복해 결심 순간을 놓치지 않습니다.
하단(Bottom): 최종 결정을 유도하는 가장 강력한 CTA를 배치합니다.

교수님의 실전 조언

"CTA는 웹사이트의 결론입니다. 사용자가 이 페이지에서 최종적으로 무엇을 하길 원하는지 한 문장으로 먼저 정의하고, 그 문장을 버튼 문구로 만드세요."

코드

HTML

<div class="cta-section">
  <h2>당신의 비즈니스를 성장시킬 준비가 되셨나요?</h2>
  <a href="#" class="btn-cta primary">지금 무료로 시작하기</a>
</div>

<div class="fixed-cta">
  <button class="btn-cta secondary">1:1 상담하기</button>
</div>

CSS

.btn-cta {
  display: inline-block;
  padding: 18px 36px;
  font-size: 1.1rem;
  font-weight: bold;
  text-decoration: none;
  border-radius: 50px;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(0,0,0,0.1);
  border: none;
  cursor: pointer;
}

.btn-cta.primary {
  background: #ff6b00;
  color: white;
}

.btn-cta.primary:hover {
  background: #e66000;
  transform: translateY(-3px);
  box-shadow: 0 6px 20px rgba(255,107,0,0.3);
}

.fixed-cta {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 1000;
}

실행

당신의 비즈니스를 성장시킬 준비가 되셨나요?

지금 무료로 시작하기