CTA 문구는 행동을 요청하는 버튼이나 링크의 텍스트입니다. '확인'처럼 모호한 동사보다 다음 화면과 기대 결과가 짐작되는 문구가 결정하기 쉽습니다.
데모는 버튼 문구가 바뀔 때 이어지는 경로도 바뀌는 모습을 보여줍니다. 실제 화면에서는 버튼을 누른 뒤 약속한 단계가 이어져야 합니다.
언제 쓰나
가입·다운로드·상담 요청 버튼의 문구와 실제 도착 화면을 함께 검토하세요.
행동 유도 문구
CTA copy
버튼을 누른 다음 무엇이 일어나는지 분명히 씁니다.
···
<div class="flow"><button>Submit</button><span>→</span><div class="destination">Unknown next step</div><div class="better"><button>Preview my plan</button><span>→</span><div>Plan preview</div></div></div>.flow{width:84%;max-width:600px;display:flex;align-items:center;gap:clamp(5px,1.5vmin,15px);flex-wrap:wrap;font-family:sans-serif}.flow button{border:0;padding:clamp(8px,2vmin,17px);background:var(--muted);color:var(--bg);font:900 clamp(10px,max(2.4vmin,1vw),22px) sans-serif}.flow span{color:var(--accent);font-size:clamp(15px,3vmin,28px)}.destination,.better div{padding:clamp(8px,2vmin,17px);border:1px solid var(--line);font:700 clamp(10px,max(2.1vmin,1vw),20px) sans-serif}.flow>.destination{color:var(--muted)}.better{display:flex;align-items:center;gap:clamp(5px,1.5vmin,15px);width:100%;margin-top:clamp(7px,2vmin,18px);animation:choose 4s infinite}.better button{background:var(--accent);color:white}.better div{border-color:var(--accent)}@keyframes choose{0%,20%{opacity:.3;transform:translateY(5px)}40%,85%{opacity:1;transform:none}100%{opacity:.3;transform:translateY(5px)}}@media(min-width:700px){body > *{transform:scale(1.4)}.lines p,.branches div,.cards div{cursor:pointer}}