CTA Button 이란?

최근 모 기업의 과제전형 피드백에서

'UI/UX를 고려해서 CTA Button 컴포넌트를 사용했다면 더 좋았을 것 같다'는 피드백을 받았다. 

(나는 특정 장소의 세부정보를 담은 url을 해당 장소 이름 자체를 link로 만들어 진입하도록 했으나, 피드백대로 '더 알아보기' 등과 같은 CTA 버튼이 더 나은 사용경험을 제공했을 것 같다. )

 

솔직히 CTA Button 이 무엇인지 몰랐기 때문에 이번 기회에 공부해보고자 한다. 

 

CTA는 Call To Action의 약자로, 고객에게 행동을 유도하는 버튼이나 배너를 뜻한다. 

대표적으로 회원가입, 구매하기, 다운로드 , 더 알아보기, 문의하기 등이 있으며 사이트 별 목적에 따라 형태와 종류가 달라진다고 한다. 

 

검색해보니 더 나은 CTA 버튼을 만들기 위한 체크리스트 10개가 있었다. 

아래 링크에서 참고했다. 

 

✅ 더 나은 CTA 버튼을 만들기 위한 체크리스트 10

 

CTA(목표 달성 버튼) 디자인을 위한 체크리스트 10

1. 서비스나 웹 사이트의 목적에 맞는가?
2. 시선을 끄는 디자인인가?
3. 방문자가 얻을 수 있는 가치가 명확한가?  ( ~한 가치를 얻으세요 등의 어떤 프로세스가 진행될지 정보가 명확해야함)
4. 버튼의 위치는 적절한가?
5. 선택할 수 있는 버튼이 너무 많지 않은가?
6. Average Fold의 상단에 있나 하단에 있나?  (서비스가 이해하기 쉽다면 Average Fold의 상단, 아니라면 하단에 위치)
7. 행동을 촉구하는 구어체 문구인가?
8. 1인칭 시점에서 소구하는가?  ( '여러분'보다 '당신' , '나', '너' 추천함)
9. 프로세스가 이어진다는 느낌을 받는가?  (CTA 버튼 한 번으로 모든 프로세스가 끝나지 않기에 화살표, 아이콘 등을 통해 알려줘야함)
10. SEO를 실행하기 위해 마케터와의 협업이 가능한가?

 

위 링크에는 더 상세한 설명과 예시가 있으니 참고하면 좋다.

 

✅ 매력적인 CTA 버튼의 예시 모음 

아래 링크에서는 매력적인 CTA 버튼의 예시를 모아놓았다. 

 

보고 지나칠 수 없는 20가지 강력한 CTA(콜투액션) 예시와 버튼

둘러보면 역시 매력적인 CTA 버튼들은 위의 10가지 수칙을 잘 지키고 있음을 확인할 수 있다. 

 

 

 

개발자는 단순히 새로운 서비스를 만드는 사람이기도 하지만 

그 안에 한 번 더 생각하면 사용자의 행동을 유도하는 버튼 하나하나에도 의도와 전략이 들어가있음을 확인할 수 있었다.  

 

UX/UI에 대한 관심과 공부를 놓지 말아야겠다는 자극을 받았다. 

 

 

 

 

참고 링크 

Average Fold란? 

 

전환율을 높이기 위해 응용하면 좋은 24가지 심리학