스마트폰 사용률 97% 앱 CTA 전환율 높이는 방법

CTA 전환율은 랜딩페이지의 전환율과 같습니다.
Dec 29, 2023
스마트폰 사용률 97% 앱 CTA 전환율 높이는 방법

✅Basic

  1. 랜딩페이지란?

- '전환'이라는 목표를 달성하기 위해 만들어진 사이트(ex. 구매 사이트)

  1. CTA(Call To Action) 이란?

- 고객의 행동 또는 참여를 유도하는 배너 혹은 버튼을 의미(ex. 구매 버튼)

1. 이제는 버튼 하나로 전환율이 바뀝니다.

  • CTA(Call To Action)는랜딩페이지의 최종 목표로 유도하기 위한 버튼입니다. CTA 전환율은 곧 랜딩페이지의 전환율과 같습니다. 그렇기 때문에 이 작은 CTA 버튼 하나가, 짧은 문구 한 줄이 매우 중요한 역할을 가지고 있습니다. 이런 CTA는 웹과 앱의 랜딩페이지에서 주로 사용되고 있습니다. 사실 거의 모든 페이지에 있다고 봐도 무방합니다.

    앱 CTA 전환율 높이는 방법은 정말 수도 없이 많이 있습니다. 물론 기본적으로 아는 사실들도 다양하게 많을 것입니다. 이번 글에서는 너무나 기본적인 이야기보다는 알면서도 놓치기 쉽고, 일부는 모를 수 있는 그런 방법들에 대해서 알려드리고자 합니다.

  • 고작 CTA 버튼에 이렇게까지 해야하나 싶기도 하실겁니다. 해야합니다.

    고작 이 버튼 하나로 매출이 바뀌거든요.

    이제는 CTA 버튼도 마케팅 요소 중 정말 큰 부분을 차지하는 요소입니다.

    전환율 높은 CTA 버튼은 디자인, 문구, 배치, 색상 등 다양한 항목을 고려해야 합니다. 이 글에서는 앞서 말한 4가지 항목에 대해서 어떻게 해야 전환율을 높일 수 있는지 예시들과 함께 방법을 설명드리도록 하겠습니다.

2. 디자인으로 전환율 높이기

2-1 모서리는 각진 것 보다 둥글게

  • 사람은 보편적으로 뾰족한 모서리보다 둥근 모서리에 편안함을 느낍니다.

    버튼을 바라보는 사용자는 편안한 것에 더 익숙하고 시선이 가게됩니다. 더불어 버튼 내의 텍스트에 더 집중할 수 있는 여건을 제공하게 됩니다. 사용자 기기인 휴대폰의 모서리 부분도 둥근 이유도 같습니다.

  • 시각 인지 권위자인 Jürg Nänni 교수가 '같은 크기의 직사각형과 둥근 타원에서 모서리는 추가적인 신경 이미지 처리가 필요하기 때문에 프로세스를 느려지게 한다' 라고 말한 것처럼 뾰족하게 각진 모서리 보다는 둥근 모서리가 편안함을 느끼는 이유 중 하나 입니다.

CTA 둥근 모서리 예시

2-2 적절한 여백을 두기

  • 간혹 CTA 문구에 딱 맞거나 과하게 여백을 주어 버튼을 제작하는 경우가 있습니다. 이는 사용자에게 혼동을 줄 뿐만 아니라 답답하게 보일 수 있습니다.

    적절한 여백을 주는 이유는 CTA 문구와 랜딩페이지 내의 글, 즉 그룹간의 구분을 하기 위함입니다. 또한 적절한 여백은 답답함을 해소시켜주기도 합니다.

CTA 버튼 여백 예시

3. 문구로 전환율 높이기

3-1 고객에게 혜택을 주는 문구를 사용

  • 카피의 중요성은 누구나 알고 있습니다. 버튼 문구도 카피의 일종입니다.

    고객이 행동하면 가져다주는 이익을 나타내는 문구를 사용하세요.

#Example

(1) 구매하기 → 무료배송 구매하기

(2) 다운받기 → 적립금 받고 다운받기

(3) 시작하기 → 배너광고 시작하기

CTA 버튼 혜택 문구 예시

3-2 고객에게 행동 경험을 명확하게 제시하기

  • 어떻게 보면 정말 기본적인 내용이지만 실수도 자주하는 부분 중 하나 입니다.

    고객에게 무엇을 행동하게 되는지 명확하게 제시하는 문구를 사용해야하는데, 모호한 문구를 사용하는 경우가 있습니다.

CTA 행동 경험 예시

4. 배치로 전환율 높이기

4-1 버튼이 사용자의 시선에서 벗어나지 않도록

  • 앱의 경우 보이는 지면이나 요소들이 웹에 비해서 많이 적습니다. 웹보다 시선처리가 더 빠르기도 하고 놓치는 경우가 빈번합니다. 때문에 버튼 배치도 정말 중요한데요. 버튼이 사용자의 시선에서 벗어나지 않도록 계속 보이도록 유지시켜주는게 좋습니다. 예를 들면 모바일 기기의 경우 스크롤을 아래로 내리게 되면 버튼이 사라지는 것보다 계속 보여주는게 좋습니다.

CTA 버튼 시선 처리예시

4-2 일관성 있는 배치로 혼동을 주지 않기

  • 이 부분은 조금 이해가 잘 안되실 수 있습니다. 정말 사소하지만 중요한 부분이기도 합니다. 예를 들어 설명드리겠습니다. 커머스에서 의류를 구매하려는 경우 버튼이 우측에 배치되어 있는가, 왼쪽에 배치되어 있는가를 의미합니다.

    아래 그림처럼 최종적으로 유도해야하는 버튼은 '구매' 버튼입니다. 최종적으로 유도해야 하는 버튼이 꼭 우측에 위치해야할 이유는 없지만 많은 앱들을 생각해보면 대다수가 우측에 배치되어 있고 고객들은 이미 우측에 있는 것에 익숙해져 있기 때문에 우측에 배치해주시는게 좋습니다. 단일 버튼이라도 좌측에 배치하는 것보다 우측에 배치하는 것이 자연스럽게 느껴질 수 있습니다.

CTA 버튼 일관성 예시

5. 색상으로 전환율 높이기

5-1 눈에 띄는 색상으로 전환율 높이기

  • 버튼의 색상도 전환율에 큰 기여를 하고 있습니다. 버튼의 색상이 배경 또는 컨텐츠 색깔들과 비슷하다면 버튼인지 구분하기 어려울 수 있습니다.

    색의 조화를 잘 모르더라도 CTA 버튼이 있는 화면이 전체적인 지면에서 구분이 확실하게 되고, 눈에 띄도록 설정해주시는 것이 좋습니다.

CTA 버튼 색깔 예시

6. 결론

  • 지금까지 기본적이지만 잘 놓치거나, 잘 모르는 CTA 버튼 전환율 높이는 방법을 소개해 드렸습니다. 랜딩페이지를 잘 만든다 하더라도 CTA 버튼을 잘 만들지 못한다면 기대하는 전환율보다 적게 나올 수 밖에 없습니다.

    현재 많은 고객들은 기기를 사용함에 있어서 컴퓨터보다 모바일을 사용하는 경우가 80~90%가 넘습니다. 때문에 웹도 중요하지만 모바일에서 최적화된 UI/UX가 더욱 중요해지고 있습니다.

    CTA 전환율을 높이는데 어려움이 있어 도움이 필요하신 경우 저희 스케일업스쿼드에 문의주세요.


궁금한 점 있으시면 언제든 문의 주세요.

H : https://www.scaleupsquad.io/

E : contact@scaleupsquad.io

Share article
RSSPowered by inblog