디자인 아틀라스
EN
⌘ UX 용어·법칙

콜투액션

Call to Action

사용자가 다음에 취해야 할 행동을 명확히 가리키는 버튼·문구. 약한 CTA는 눈에 안 띄고, 강한 CTA는 시선을 끕니다.

다른 이름: CTA
···
html
<div class="stage">
  <div class="pane">
    <div class="tag">✗</div>
    <button class="weak">submit</button>
    <div class="cur" id="c1">➤</div>
  </div>
  <div class="pane">
    <div class="tag">✓</div>
    <button class="strong">Get started →</button>
    <div class="cur" id="c2">➤</div>
  </div>
</div>
css
.stage{width:94%;height:88%;display:flex;gap:6%;align-items:center}
.pane{position:relative;flex:1;height:100%;border-radius:14px;border:1px solid var(--line);background:var(--surface);display:grid;place-items:center;overflow:hidden}
.tag{position:absolute;top:8px;left:10px;font:700 11px/1 monospace;color:var(--muted)}
.weak{border:1px solid var(--line);background:var(--line);color:var(--muted);padding:7px 12px;border-radius:6px;font-size:11px}
.strong{border:0;background:var(--accent);color:#fff;padding:11px 20px;border-radius:10px;font-weight:800;font-size:13px;box-shadow:0 8px 20px color-mix(in srgb,var(--accent) 45%,transparent);animation:pulse 1.8s ease-in-out infinite}
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}
.cur{position:absolute;font-size:16px;color:var(--fg);transform:rotate(-45deg)}
#c1{animation:pass 2.4s ease-in-out infinite}
#c2{animation:magnet 2.4s ease-in-out infinite}
@keyframes pass{0%{left:14%;top:80%}50%{left:52%;top:48%}100%{left:88%;top:20%}}
@keyframes magnet{0%{left:14%;top:80%}70%{left:50%;top:47%}100%{left:50%;top:47%}}

마케팅·광고 카피라이팅에서 온 개념으로, 명령형 동사("시작하기", "무료로 받기")로 행동을 구체적으로 지시하는 게 핵심입니다. "제출"·"확인" 같은 모호한 라벨보다 "무료 체험 시작하기"처럼 결과를 구체적으로 약속하는 라벨이 클릭률이 높습니다.

시각적으로는 대비색·충분한 크기·주변 여백으로 시그니파이어(→ signifier) 역할을 하고, 한 화면엔 주 CTA를 하나만 두는 게 원칙입니다 — 버튼 2개가 똑같이 강조되면 결정 마비(→ hicks-law)가 옵니다.

데모의 약한 CTA는 회색에 묻혀 커서가 못 찾고 지나치지만, 강한 CTA는 색·펄스 애니메이션으로 커서를 곧장 끌어당깁니다.

언제 쓰나

한 화면에 주 CTA는 하나만 강조하세요. 라벨은 동사로 시작하고 결과를 구체적으로 약속하세요("제출" 대신 "주문 완료하기").