[기획 실무] 누를 수밖에 없는 유혹: CTA 버튼 설계의 심리학

안녕하세요, IT UI/UX 기획자 디노에디입니다.

내비게이션을 따라 목적지에 도착한 사용자에게 우리가 원하는 마지막 행동(구매, 구독, 저장 등)을 하게 만드는 것, 그것이 기획의 최종 목적지입니다. 이때 사용자의 손가락을 움직이게 하는 결정적인 요소가 바로 CTA(Call To Action, 호출어) 버튼입니다.

 

버튼 하나에도 사용자의 뇌를 자극하는 치밀한 설계가 숨어 있습니다.

---

1. 컬러의 힘: 시각적 위계(Visual Hierarchy) 세우기

화면 안에 버튼이 여러 개 있을 때, 사용자는 어떤 것을 먼저 눌러야 할지 고민해서는 안 됩니다.

• Primary Button (주요 버튼): 서비스의 브랜드 컬러나 채도가 높은 색상을 사용하여 '이게 가장 중요한 동작'임을 암시합니다. (예: 구매하기, 확인)
• Secondary Button (보조 버튼): 테두리만 있거나(Ghost Button) 연한 회색을 사용하여 주요 버튼을 돋보이게 합니다. (예: 취소, 나중에 하기)
• Negative Button (부정 버튼): 삭제나 탈퇴처럼 돌이킬 수 없는 동작은 빨간색을 사용하여 사용자에게 '주의' 신호를 줍니다.

---

SMALL

2. 문구의 마법: '행동'을 구체적으로 지시하라

버튼 안의 텍스트를 단순히 '확인'이나 '완료'로 채우는 것은 기획자의 직무유기입니다. 사용자가 이 버튼을 눌렀을 때 얻게 될 결과를 문구에 담으세요.

• (BAD): 확인, 저장
• (GOOD): 1분 만에 가입하기, 할인 쿠폰 받기, 무료로 체험하기
• 기획 포인트: '나'를 주어로 하는 문구를 써보세요. "내 쿠폰함 확인하기"는 "쿠폰 확인"보다 훨씬 더 높은 클릭률을 기록합니다. 사용자의 소유욕을 자극하기 때문이죠.

---

3. 배치의 전략: 엄지손가락의 동선을 고려하라

모바일 기획에서 버튼의 위치는 접근성과 직결됩니다.

• 하단 고정(Sticky) 버튼: 스크롤이 긴 페이지에서도 구매 버튼이 항상 하단에 떠 있게 설계하세요. 사용자가 언제든 결심이 섰을 때 즉시 행동하게 할 수 있습니다.
• 우측 우위의 법칙: 인간의 뇌는 오른쪽으로 진행하는 것에 익숙합니다. '이전/다음' 버튼이 나란히 있다면 '다음'을 오른쪽에 배치하는 것이 자연스러운 흐름입니다.

---

4. 버튼의 상태(State) 설계: 피드백의 중요성

버튼은 살아있는 생물처럼 반응해야 합니다. 지난 디자인 시스템 편에서 배운 내용을 적용해 보세요.

• Disabled (비활성): 필수 약관에 동의하지 않았거나 정보를 다 입력하지 않았다면 버튼을 회색으로 비활성화하세요. 사용자는 "아직 할 일이 남았구나"를 직관적으로 깨닫습니다.
• Loading (로딩): 버튼을 누른 후 서버 응답을 기다리는 동안 버튼 안에 스피너(Spinner)를 보여주세요. 이 장치가 없으면 사용자는 버튼이 안 눌린 줄 알고 여러 번 클릭하게 되어 중복 결제 같은 오류를 일으킬 수 있습니다.

---

5. 마무리: 버튼은 사용자와의 마지막 악수입니다

CTA 버튼은 기획자가 설계한 모든 여정의 마침표입니다. 컬러로 시선을 끌고, 매력적인 문구로 유혹하며, 편안한 위치에서 사용자를 맞이해야 합니다.

오늘 여러분의 기획서 속 버튼들을 살펴보세요. 무미건조한 '확인' 버튼들이 있나요? 그 버튼에 사용자가 얻을 가치를 담아보세요. 버튼 하나가 바뀌는 순간, 여러분 서비스의 데이터 지표가 요동치기 시작할 것입니다.

글이 유익했다면 '공감'과 '댓글' 부탁드려요!

 

다음 편에서는 사용자의 시선을 사로잡는 레이아웃의 마법, "카드 UI vs 리스트 UI: 콘텐츠 성격에 따른 최적의 배치법"에 대해 알아보겠습니다.