CTA, 발가벗겨주마
CTA를 능가하는 플러팅 장인이 또 있을까.
만일 누군가 당신에게 'CTA를 디자인해달라'고 하면, 우리는 어떤 디자인 솔루션을 상대방에게 주어야 할까?
토스 앱처럼, 친근하고 대화형의 간결한 문구가 담긴 버튼 디자인? 아니면 배너 디자인?
둘 다, 말이 된다. 하지만 만약 '누군가 당신에게 CTA 디자인이란 뭐예요?'라고 물었을 때 당신이 생각해낼 수 있는 것이 위의 것 뿐이라면, 이 글은 당신이 실무환경에서 CTA라는 용어를 좀더 적합한 맥락에서 정확히 쓸 수 있도록 도와줄 것이라고 생각한다.
목차
1. CTA(call to action)이란?
2. CTA의 대표적 사례들
3. 좋은 CTA와 나쁜 CTA
4. 혼동하지 마세요!
1. CTA(call to action)란?
CTA 컴포넌트 디자인, CTA, CTA 버튼이 어쩌구 저쩌구...
아니 무슨 ETA도 아니고(자꾸 맴돌아서 내 업무 금지곡으로 정했다)... UX/UI디자이너로 일하면서 한번쯤은 꼭 듣게 되는, 대체 그놈의 CTA라는게 뭘까?
용어 자체를 먼저 풀어서 살펴보면, CTA는 Call to Action의 줄임말이다.
(한국어도 별의별 줄임말이 다 있듯이, 영어는 특히나 가로로 긴~ 특성이 있는 언어이기에 여러 군데에서 저렇게 알파벳 모음집처럼 줄여쓰는 경향을 많이 볼 수 있다.)
그럼 call to action은 무슨 뜻일까?
너무 어렵게 갈 필요 없다. 물론 명확한 사전적 정의가 존재하지만, 어쨌든 핵심은 '어떤 행위를 의도적으로 유도해서 발생시키는 것'이다. 좀 재치를 더해보면, 말 그대로 Action을 call 하고 있는 거다. (Call은 아마 토익 700 이상 찍은 사람이면 알겠지만, 비단 '전화/연락'의 의미만 가지고 있지는 않다. 그러한 의미를 바탕으로, 무언가를 '요청' 하거나 '부르는' 뉘앙스의 의미들을 갖고있기도 하다.)
가장 본질이 되는 CTA의 핵심은 '의도하는 행위를 유도해내는 것'에 있기 때문에, 사실상 그것을 두고 IT에서만 쓰이는 것이라고 보기는 어렵다. 내가 알기론 마케팅 분야에서 이미 활발하게 사용되어온 개념으로도 알고 있다.
2. CTA의 대표적 사례들
그럼 위에서 말한 정의를 바탕으로 할 때, CTA의 사례는 어떤 것이 있을까?
a. 이벤트 배너디자인
이는 가장 대표적으로 떠올릴 수 있는 예시중 하나다. 아래 이미지들은 자극적이면서도 높은 가시성을 바탕으로 보는 이들을 혹하게 해, 이벤트에 대해 더 자세하게 알아보도록 유도하거나, 혹은 이벤트에 참여하게 만드는 CTA의 케이스들이라고 볼 수 있다.
https://www.pinterest.co.kr/pin/211174968989446/
https://www.pinterest.co.kr/pin/633387439232105/
https://webflow.com/made-in-webflow/website/CTA-Component-22광고배너나 이벤트 페이지 등에서는 대체로 텍스트, 이미지, 버튼 등 여러 요소들의 결합을 통해 비즈니스가 의도하는 CTA를 만들어낸다.
b. 버튼 컴포넌트
다른 예시로는, 우리가 '컴포넌트'라는 말을 듣는 순간 가장 쉽게 떠올릴 수 있는 '버튼'컴포넌트 디자인도 사례로 들 수 있다. 단일 버튼 컴포넌트 디자인에서는 UX라이팅, 버튼의 색상, 톤, 형태 등 여러 시각적 스타일요소를 고려해 CTA를 유도하는 컴포넌트 디자인을 만들어 낼 수 있다.
https://webdevstudios.com/2020/01/23/call-to-action-buttons/
https://www.boucherco.com/effective-cta-buttons/사실 2번째 예시를 보고 이미 얼굴을 찌푸린 몇몇(꽤많은) 디자이너들이 있을 것이다. 물론 이중에는 내 기준에서 봤을 때, 좀 더 좋은 CTA디자인과 좀 덜 좋은 CTA 디자인도 섞여있기는 하다.
하지만 비주얼이 구려보인다고 해서, 올드스쿨이라고 해서 반드시 나쁜 디자인이라고 볼수는 없다. 트렌디한 디자인은 아니라고 말할 수 있으나, '틀린' 것은 아닐 수 있다.
c. 홍보 카피
또다른 예시로는 '말'이 있다.
연말 펜션 마감임박
오늘은 저희가 쏩니다!
오늘 딱 하루, 무료입장 이벤트 해요~!
만약에 왜 이것이 예시가 될 수있는지 이해가되지 않는다면, CTA라는 개념에 대해 앞서 정리한 기본적 정의에 대해 다시한번 읽어보길 권한다. CTA는 역할/기능과 관련된 정의이지, 어떤 특정요소의 유형에 대한 정의가 아니기 때문이다. 소비자들의 눈길과 귀를 사로잡는 말과 글은, 아주 좋은 CTA의 사례 중 하나다. 잘 디자인 된 말/글은, 사람들로 하여금 무시하는게 아니라, 추가적인 '액션'을 취하게 만든다. 그 액션의 예로는 아마도 구매나 이벤트 참여, 가입 등이 있을 것이다.
3. 좋은 CTA와 나쁜 CTA
그럼 CTA에도, 좋은 것과 나쁜 것이 있을까? 물론, CTA라는 것은 다분히 목적지향적인 것이기 때문에, 아주 쉽게 이를 판별해낼 수 있다. 의도한 것이 있는데, 소비자/사용자가 좀처럼 우리 의도에 잘 함께해주지 않는다면, 그래서 목표한 성과를 내지 못하고 있다면, 그는 실패한 CTA 디자인이다. 그리고 그 목표성과는 지극히 케바케다.
말로만 끝내면 심심하니, 실제 예시를 몇가지 퍼와서 얘기해보자.
https://www.pinterest.co.kr/pin/551268810653180034/위 사례는 좋은 CTA일까, 나쁜 CTA 디자인일까?
목적이 무엇이었느냐에 따라 다르게 볼 수 있을것 같다. 만일 이 배너의 목적이 사람들로 하여금 '올리브영 브랜드의 소식을 구독하는 버튼을 클릭하게 하는 것'이라고 한다면, 이 CTA디자인은 어쩌면 목표한 바를 이루기 힘들 수도 있다. 내가 짐작하는 이유는 아래와 같다.
1. 동기부여가 되지 않는 문구
확실히, 카피는 굉장히 간결하며, 이 배너의 목적에 대한 핵심을 아주 정확히 짚어주고 있다. 그리고 시각적으로도 굉장히 강렬하다. 하지만 어떤 행위, 특히나 사용자로 하여금 '오... 나도 이거 해볼까..?'라는 마음을 들게 하기에는 개인적으로는 조금 역부족이 아니었나 싶다. 왜냐하면 어찌됐든 사람은 내용을 보고 정보를 판단하기 때문에, 주변 배경부에서 '사용자가 이것에 동참하면 무슨 베네핏을 받는지'가 명확하게 나와있지 않다면, 그 베네핏을 메리트라고 여기는 사람을 포함해 큰 관심 없는 사람들도 별로 클릭하지 않을수도 있겠다는 생각이 든다.
2. 누락된 흥미요소
사실 이건, 한국 문화권 내에서는 크게 문제되지 않을 것이라고 짐작하는데, 왜냐하면 내 경험상 한국에 비해 영미권에서 무언가를 만들 때는 그걸 명확하게 드러내주어야 하기 때문이다.
한국사람들끼리는(대부분) 저 내용을 봤을 때 쉽게 알 수 있다. 물론 '성공'이 대체 무슨 '성공'인지는 모르나, 여튼 소식을 구독하면 뭔가 줄거라는 기대감은 갖게 만든다.
그러나 영미권의 기준에서 볼 경우, 빙빙 둘러 말하고, 교묘히 숨기며 그래서 뭐 어쩌라는 건지, 소비자가 무엇을 어떻게 하길 원하는지가 명확하게 드러나지 않으면, 사람들은 저게 뭔지 모르기 때문에 함부로 클릭하지 않을 가능성이 높다.
물론 무엇에 대한 것인지는 알 수 있다. 하지만 이 배너가 정확하게 '소식구독'을 권유하는 건지, 아니면 어떤 제3의 미션같은게 존재하는데 그걸 성공하기 위해서는 '소식 구독'이 수단이 되는 건지, 내가 소식구독을 추가로 해서 얻는게 뭔지 등, 배너에서 얻을 수 있는 흥미를 끄는 정보가 많지 않기 때문에 결과적으로 CTA 측면에서는 역효과가 날 수도 있다.
3. 구독 버튼의 실종
더군다나 저 카피를 보고 구독을 하고싶은 마음을 느꼈다고 해도, 영미권 시점에서 봤을 때는 '구독 버튼이 없다'라고 느낄 가능성이 크다. 한국의 경우 굳이 버튼같아보이는 요소가 없어도, 대충 배너를 클릭하면 그거 자체가 버튼같은 역할을 한다는 걸 아는 사람이 많다. 하지만 내가 사는 이곳에서는 최소한 화살표, 아니면 짤막한 텍스트 버튼이라도 반드시 포함시켜두어야 저 영역 자체가 clickable한 요소라는 걸 알아채곤 했다. 그런 문화권의 관점에서 보면, 저건 가게는 열어놓고 진열된 제품은 없는, 그런 이상한 경우로 인식될 수도 있어 반드시 모든 경우에서 좋은 CTA디자인이 아닐 수도 있다.
4. CTA, 혼동하지 마세요!
이렇게 여기까지 그 명확한 정의와 예시를 보고 나면, 어느정도 머릿속에 선명히 남는 것이 생길 것이다.
이건 실제 업무 중 우리팀 주니어 UX디자이너가 했던 실수인데, 혹시 CTA를 일부 오인하는 경우가 있을까 싶어 마지막으로 공유해보고자 한다.
현재 우리 회사의 디자인 시스템에서는 밝은 진홍빛의 레드를 CTA 컬러로 쓰고있다. (아직 명확한 에러 컬러가 없는데, 이놈의 진홍빛 색상이 참 골칫거리다.) 때문에, 버튼 등 clickable한 컴포넌트에 이러한 컬러를 종종 사용하곤 한다.
얼마전, 저널리스트들을 위한 프로필 화면을 위해 UX디자이너가 작업했던 hero-block 컴포넌트를 업데이트하다가, 그 cta 색상을 저널리스트의 이름에 적용한 점을 발견했다.
(사실 처음봤을 때 빨간색으로 사람이름을 써놔서 좀 흠칫했다. 한국이었다면 어불성설이었겠지?)
이 디자이너의 의도는 그 작가의 프로필 정보(Bio)가 해당 화면에서 가장 제목격에 해당되는 정보이기 때문에, 리포터의 이름을 부각시켜주기 위해 사용했을 가능성이 크다. 과연 올바른 선택이었을까?
아니다. 이유는 다음과 같다.
디자인 의도를 떠나, 우리는 모두 그 레드 색상을 cta 컬러중 하나로 지정하는데 동의했었다. 앞서 공부했듯 CTA란, 제품을 만든사람의 입장에서 어떠한 의도를 가지고 소비자로부터 무언가 행동을 유도하는 것이다. 따라서 그 레드 컬러가 cta 색상으로 지정되었다면, 그 저널리스트의 프로필 상 이름은 그저 '이름'이라는 하나의 구성요소일 뿐, 그 데이터 자체로 어떤 것도 유발하고자 하는 목적이 없으며, 유발하지 않는 성격의 정보다. 따라서 cta의 목적이 없는 요소에 cta컬러를 지정했다면, 이는 잘못 적용한 사례가 되는 것이다.
가끔 보면, 정확하게 어떤 개념이 무엇인지 모르고 남용되거나 오용되는 경우를 볼 때가 있다.
물론 나도 그랬던 것들이 몇몇 있다. 지금도 아직 더 있을지 모르지.
모르는 건 잘못이 아니다. 모르면, 배워서 알면 된다.
사실 회사생활을 하면서, 두려움없이 꼬치꼬치 물어볼 수 있을 정도로 친절한 선배는 만나기 드문게 사실이다. (그건 외국회사도 똑같다.) 비록 cta의 A-Z를 다룬 글은 아니지만, 적어도 기본을 다지는 데는 도움이 되길 바라며 글을 마친다.
