잘나가는 서비스들을 통해 파악하는 랜딩페이지와 CTA 전략

가장 빠르고 쉬운 MVP, 랜딩페이지

요즘은 노코드로도 웹사이트를 만들 수 있는 정말 많은 서비스들이 있다. 기획했던 서비스 쿠키파킹*의 데모데이 직전에, 서비스에 대한 잠재 고객들의 반응을 확인하는 용도로 하룻밤 사이에 랜딩페이지를 Wix로 뚝딱 만들었었다. 우리 서비스는 크롬익스텐션 다운로드가 필수라, 크롬익스텐션 다운로드 페이지로 이동하는 CTA 버튼이 포함된 랜딩페이지가 이미 있었다. 하지만 웹스토어에 등록된 이후에야 유효한 페이지였다. 우리는 웹스토어 업로드 이전에 타깃고객의 반응을 확인해보고 싶었다. 만들어둔 랜딩페이지의 전체적인 웹 UI는 동일하게 가져가되, CTA 버튼을 '이메일 수집용'으로 교체하고 일부 뷰를 수정하여, '런칭 소식 받아보기용' 랜딩페이지를 노코드로 제작했다. (개발파트에서 이미 정해진 시간 내에 핸들할 부분이 많았기 때문에, 추가적인 랜딩페이지 제작 요청을 할 수 없는 상황이었다.) 일단 노코드로 뚝딱 만들어놓고, 타깃 고객이 되는 커뮤니티 몇 곳에 배포했다. 

 

 

페이스북 페이지에 올린 쿠키파킹 서비스 랜딩페이지 반응 @Cookieparking

 

일단 저지르고 몇 분께 피드백을 받았는데 개선할 지점들이 꽤 있었다. 그럼에도 우리가 타깃으로 잡았던 두 고객층 'UX 트렌드에 관심 많은 IT 서비스 기획자' , '다양한 기술블로그를 소비하는 개발자' 타깃이 모여있는 커뮤니티에서의 반응은 꽤 좋았다. 올린지 24시간도 되지 않아 몇백개의 좋아요와 댓글이 달리는 것을 보며, '어..?' 했다. 근래 해당 커뮤니티에서 이 정도의 핫한 반응을 이끌어낸 포스팅들은 그렇게 많지 않았기 때문이다. 아마 커뮤니티에 글을 올릴때, 서비스에 대한 맥락과 부가적인 설명을 포스팅에 추가했기 때문에 공감을 더 많이 얻을 수 있었던 것 같다. 우리는 추가적인 홍보 없이 랜딩페이지를 통해 하루 조금 넘는 시간만에 400명 이상의 이메일을 수집했고, 지금까지도 별도의 마케팅이나 홍보를 진행하지 않았는데 추가적인 유입을 통해 600명이 넘는 이메일을 수집할 수 있었다. 

✨성장하는 사람들을 위한 콘텐츠 파킹랏, 쿠키파킹* 서비스에 대해 좀더 알아보기

 

사실 이메일 수집을 위한 '랜딩페이지'를 하룻밤 사이 뚝딱 만들어내기까지는, 수많은 랜딩페이지에 대한 자료들과 레퍼런스를 찾아보며 기획자와 디자이너가 함께 고민했던 꽤 오랜 과정이 있었다. '랜딩페이지'는 우리 서비스의 '첫인상'이었고, 막상 기획에 들어가니 랜딩페이지는 서비스와는 다른 랜딩페이지만의 문법과 법칙들이 있었기 때문이다. 문구를 어떻게 할 것인지, 이메일 수집 CTA 버튼을 어디에 배치할 것인지, 서비스는 어떤 문체와 무게로 소개할 것인지 ... 등등 고려할 것들이 생각보다 많았다. 그리고 중요했다. 랜딩페이지는 시장 반응을 파악할 수 있는, 가장 쉽고 빠르며 강력한 MVP가 될 수 있지만, 생각보다 만들기 어렵다. 수많은 서비스들의 랜딩페이지들을 보며 판단한 것은, 서비스의 성격에 따라, 타깃에 따라 랜딩페이지의 형태와 전략도 달라야 한다는 점이었다. 고객 입장에서 이탈하기 쉬운 '별로라고 여겨지는' 랜딩페이지들도 많았다. 그럼에도, 최근 국내에서 '트렌디하다'고 일컬어지는 서비스들의 랜딩페이지에는 어떤 일관된 '흐름'이라는 것이 있었다. 우리 서비스의 랜딩페이지 개선을 위해서, 공부하고 파헤치는 과정을 기록하고자 한다. 

---

랜딩페이지의 제 1 핵심은? 

---

 

한 페이지짜리 랜딩페이지 레퍼런스 @Shopify, Newneek

 

랜딩페이지 기획을 시작하며, 빈 페이지 앞에서 한 참을 고민했다. 대체 우리 서비스의 랜딩페이지에 어떤 내용을 어떻게 담을 것인가! 처음에는 레퍼런스 리서치를 해보며, 막연하게 Shopify나 Newneek처럼 짧고 간결하지만 강력한 원페이지 링크를 뿌릴지, 간단하게나마 스크롤다운 하며 서비스에 대한 소개를 담을 것인지 고민했다. 아무리 생각해도 군더더기 없는 간결함이 생명 같았다. 랜딩페이지는 우리 서비스에 대한 첫인상이기 때문이다. 소개팅에서 자기 얘기만 장황하게 늘어놓는 상대같은 랜딩페이지는 매력이 없다. 구구절절 "우리는 이렇구요, 이것도 잘하구요, 이런 것도 있어요!, 이런 기능도 있고요, 이것도 잘해요!" 장황하게 쌓여있는 문장들을 고객들은 전부 다 소화하지 않는다. 그렇다면 무엇이 중요할까? 

 

 

"Landing Page - the 5-point punch" @Unbounce

 

중요한 것은 첫인상에서 느껴지는 강력한 '매력'이다. Unbounce에서도 랜딩페이지에서 가장 중요한 것을 "A powerful and Descriptive Headline"이라고 했다. 그리고 이어진 서비스의 핵심 베네핏이 되는 간결한 문장들을 보며, 그렇게 첫 페이지에서 소비자가 매력을 느껴야한다. 랜딩페이지 배포 이후, 2020 엔젤핵 해커톤에서 인연이 생긴 PXD 김민우 디자이너님께도 랜딩페이지를 보내드렸다. 감사하게도 모바일 zoom 화면 공유로 랜딩페이지를 같이 보면서, 빠르게 피드백을 주셨었다! 디자인스펙트럼의 김지홍 대표님께 피드백 받았을 때와 유사한 이야기들을 그때도 들었었는데, 그때 해주셨던 이야기 중 인상 깊었던 것은 "랜딩페이지는 랜딩페이지다."라는 말이었다. 랜딩페이지만의 문법이 있다는 것을 이해해야 했다. 랜딩페이지에 유입된 고객은 첫 헤드라인에서 이해하지 못하거나 매력을 느끼지 못하면 바로 이탈해버린다는 것이다. 일단 첫 헤드라인에서 이목을 끌어야, 그 다음 문장들을 읽어내려가고 CTA 버튼을 누르든지 스크롤 다운해서 랜딩페이지 내용을 좀 더 파악하든지의 행동으로 이어질 수 있다. 

 

내가 사용자의 입장에서 어떤 랜딩페이지에서 흔쾌히 '이메일'을 입력하고, 다운로드 버튼을 클릭하는 등의 행동을 했었는지 떠올려보았다. 돌이켜보면 내가  CTA 버튼을 눌렀던 페이지들은, 버튼을 누르기까지 그렇게 오래 걸리지 않았다. 강력한 매력을 서두에서 느끼면 일단 CTA 버튼을 누르고, 추후 궁금하다 싶으면 좀더 천천히 랜딩페이지를 살펴보는 등의 행동을 했었다. 내게 도움이 될 것 같다고 판단되거나 흥미를 느끼는 즉시, 일단 메일을 써서 냈다. 돈 드는 일도 아니기에. 다시 곱씹어보니, '내게 도움이 될 것 같다고 판단'되는 지점이 핵심이라고 느껴진다. 사용자가 이 서비스를 사용함으로써 얻을 수 있는 '혜택과 변화'에 대해 머릿속에 구체적으로 그려볼 수 있을수록 전환이 빨라질 것이라 생각된다.

 

---

효과적인 CTA 버튼 만들기

---

 1. 간결한 CTA 버튼 

우리 서비스 랜딩페이지의 CTA 버튼은 '이메일을 입력하고 제출하는 것'이다. 사실 수집하고 싶은 정보들이 더 많았는데, 너무 많은 입력사항은 사람들로 하여금 피로도를 높일 것 같아 이메일 하나로 일축했다. 너무 많은 개인 정보를 요구하는 등 '복잡한 CTA'는 고객의 이탈을 야기할 수 있다.

특히 이메일 수집을 위한 CTA 버튼은 여타 버튼과 달리 textarea가 있기 때문에 모든 뷰에 있기 어렵다고 여겨졌다. 너무 부담스럽고 부자연스럽게 여겨졌다. 그래서 우리는 자칫 부담스러운 Textarea 없는 간단한 CTA 버튼을 만들고, 해당 버튼을 클릭시 최하단 이메일 입력창으로 이동시키는 방법을 택했다. ( 플로팅 버튼으로 교체하는 것도 고려해볼만 하다.)

 

CTA 버튼에 마우스 호버 시 컬러가 채워진다.(사진 1,2)/ 클릭시 웹 최하단에 위치한 그림3으로 이동 @Cookieparking

 

 

 2. CTA 버튼은 가급적 최상단에 , 혹은 플로팅(Floating)으로 

많은 글들이 공통적으로 말하는 것이 있었다. CTA 버튼은 웬만하면 최상단에 위치시키는 것이 좋다는 것이다. 앞서서 본 Ubounce의 'The 5 Point Punch'에서도 첫 뷰에 CTA 버튼을 배치하도록 장려하는데, CTA를 상단에 배치했을 때 전환율이 41%나 증가했다고 한다. 첫 뷰에서 결판을 지어야 하는 것 같다. 

 

PC에서 확인한 쿠팡이츠, 배달의 민족, 에이블리, 틴더, 토스의 랜딩페이지 첫 화면에 위치한 CTA 버튼

 

혹은 CTA 버튼을 플로팅으로 만드는 방법도 있다. 스크롤 다운과 상관없이 모든 페이지를 따라다니는 것이다. 아래의 토스 랜딩페이지를 봐도 그렇다. 당근마켓, 뱅크샐러드, 지그재그 등 대부분의 앱 기반의 서비스들은 모바일 상에서 랜딩페이지를 확인할 때, 모든 뷰에서 곧바로 CTA 버튼을 누를수 있도록 하단에 고정시키고 있었다.

 

Toss 랜딩페이지 CTA버튼 플로팅 @Toss

 

모바일 환경에 최적화 된 서비스인지, PC 환경에 최적화된 웹서비스인지에 따라서도 랜딩페이지 전략에는 차이가 있을 수 있다. 예컨대 웹 기반 서비스의 경우, 랜딩페이지를 모바일 환경에서 볼 때와 PC에서 볼 때 CTA 버튼 구성을 다르게 하기도 한다. 하단 화면녹화 영상은 PC에 최적화된 웹서비스인 '서핏'의 랜딩페이지를 모바일로 확인했을 때이다. PC 상으로 확인할 때는 보이지 않던, '데스크탑 앱으로 더 편리하게 사용할 수 있어요!' 와 같은 카피가 하단에 일정 시간 고정되어 있다. 스크롤다운하자 '시작하기 '버튼이 하단의 플로팅 CTA 버튼으로 교체된다. 이처럼 동일한 랜딩페이지에 대해서도, PC에서 확인할 때와 모바일로 확인할 때 디테일한 구성이 다르다! 각각의 기기에 최적화된 형태로 구성되어야 하는 것 같다. 

 

모바일에서 확인한 서핏의 랜딩페이지 @Surfit

PC 기반인 우리 서비스도 추후, 랜딩페이지를 모바일에서 확인할 때와 pc에서 확인할 때 CTA버튼 위치 및 카피를 다르게 하는 장치들이 필요하겠다는 생각을 했다. 

 

 3. CTA 버튼의 카피로 버튼 클릭률 높이기 

• 소비자의 행동을 유도할 수 있는 강력한 카피!
  - 고객이 얻을 수 있는 "혜택"을 강조: 버튼을 클릭했을 때 고객이 얻을 수 있는 혜택을 적어준다. 또는 '한정 판매'를 내세우는 카피도 고객의 행동을 자극하는 CTA. 
  - 명령형 카피 :  '~하라!', '~하세요!' 등의 명령형 카피는 대표적인 CTA 기법 중 하나

• 구체적으로 작성해 의심을 해소시킨다! (안심해도 된다는 것을 분명하게 드러내기)
  사용자들의 예측 범위를 벗어난 잘 모르는 것, 새로운 것은 무서울 수 있다는 사실을 기억하자. 특히 사용자를 현재 페이지에서 벗어나는 통로는 더 신경쓰도록 한다. 버튼을 클릭 시, 어떤 일이 발생하는지 정확하게 설명해주는 CTA 버튼이 좋다.

• 피식할 수 있는 적절한 유머로 무장해제 시키기!
  적절한 유머를 써서 사용자들이 더 잘 받아들이고, CTA을 할 수 있도록 이끈다. 
  

해당 법칙들을 잘 적용한 토스의 랜딩페이지 버튼 카피를 잘 분석해준 글이 있어 공유한다. 

 

 

---

'요즘 서비스'들의 대체적인 랜딩페이지 특징

---

1) 4-5개의 뷰 + 좌측/우측 정렬

 

당근 마켓, 토스, 쿠팡이츠 랜딩페이지 

 

 

잘나가는 요즘 서비스들의 랜딩페이지를 보면, 전체적으로 어떤 일관된 느낌이라는 게 있다. 대부분 4-5페이지 뷰로 구성되어 있으며(일부 제외), '간결하지만 핵심이 담긴 헤드라인' + '간결한 서브 텍스트' + '(CTA 버튼)' 으로 구성되어 있다. 대개 백그라운드 컬러도 브랜드 메인 컬러를 기반으로, 뷰마다 교차해서 사용하고 있다. 중앙 정렬도 있지만, 텍스트가 좀더 필요한 경우에는 좌측/우측 교차 정렬이 대세인 듯 하다.

 

 

지그재그, 카카오뱅크, 왓챠 랜딩페이지

 

 

2) 숫자와 데이터로 서비스를 증명하기

또한 서비스를 증명할 만한 '숫자'가 있다면, 서비스의 데이터를 가지고 믿을만한 기업이라는 이미지를 제공한다. 아무나 따라할 수 없는 강력함이다. 대세에는 그만한 이유가 있을테니..!

 

수치로 성과를 증명하는 토스와 지그재그의 랜딩페이지

 

 

3) 한번 둘러보기 CTA 제공

당근마켓 랜딩페이지에는 중간과 끝에 '인기 매물 보기'와 같이 서비스를 맛볼 수 있는 방법을 제공하고 있다. 앱을 다운받거나 회원가입을 하지 않더라도, 추후 당근마켓앱을 설치하면 어떤 매물들을 살펴볼 수 있는지 체험할 기회를 주는 것이다. 우리 팀이 애정하는 비디오 협업툴 Gather.town 랜딩페이지에도, 회원가입이나 설치 없이도 누구나 쉽게 체험해볼 수 있는 "Try out demo" CTA 버튼이 있다. '회원가입' 혹은 '설치'와 같은 귀찮은 절차 없이도, 무슨 서비스인지 알 수 있다니! 서비스를 처음 마주한 고객에게 서비스로 향하는 장벽을 확 허무는 역할을 해준다. 우리 쿠키파킹 서비스처럼 회원가입과 설치를 무조건적으로 필요로 하는 서비스는 이러한 사례에 주목할 필요가 있겠다. 

 

 

서비스 간접 체험을 유도하는 CTA 버튼이 있는 '당근마켓'과 요즘 뜨는 중인 'Gather.Town'의 랜딩페이지

 

 

4) 카피라이터가 누구니.. 잘 뽑은 카피

당근마켓, 토스, 쿠팡이츠, 지그재그, 카카오뱅크, 왓챠의 랜딩페이지를 보며, 각각의 헤드 카피들에 감탄하지 않을 수 없었다. 간결하면서도 어필 포인트를 잘 담아낸 핵심 문장들이다. 우리 서비스의 랜딩페이지의 카피들을 작성하기 위해 정말 많은 고민이 필요했다.

1. 고객이 원하는 우리 서비스의 핵심기능은 무엇인가? 
2. 고객에게 전하고자 하는 서비스의 핵심 '키워드'는 무엇인가?
3. 우리가 고객에게 남기고 싶은 브랜드 이미지는 무엇인가? 

이런 고민들을 했던 기억이 난다. (유효한 질문이었는지는 ... 싶다. 써놓고 보니 좀더 고객 중심적인 사고가 필요하겠다는 생각이 든다.) 랜딩페이지에서 어떤 무게감으로 어떤 이야기를 풀어낼지, 특히 첫 헤드라인 뽑아내고자, 기획과 디자인 파트원들이 피그마에 옹기종기 모여 별의별 문장들을 다 써봤던 거 같다. 한정된 시간 때문에, 그나마 가장 괜찮았던 안으로 택했으나, 추후 업계 선배님들로부터 피드백을 받으며 개선할 필요를 많이 느꼈다. 카피라이팅의 어려움에 대해 뼈져리게 느꼈다.

 

Figma에서 랜딩 UI를 함께보며 헤드 카피를 고민했던 흔적 @Cookieparking 

 

---

스크롤다운할 수밖에 없는 매력적인 인터랙션 (a.k.a 애플st)

---

 

마지막으로, 이것도 전략이라면 전략일 수 있겠다는 생각이 들었다. 애플의 iPad Pro 페이지가 처음 공개됐을 때 가히 충격적이었다. 당시 인프런이나 여타 강의 플랫폼에서 애플 웹페이지 느낌의 인터랙션을 구현할 수 있는 유료 강의 콘텐츠들이 꽤 여기저기서 눈에 많이 띄곤했다. 차이카드 랜딩페이지를 보며, 애플의 제품 페이지에서 느꼈던 감각이 확 떠올랐다. 화려하고 매력적인 인터랙션 그 자체만으로도 스크롤 다운을 지속시키며 이탈을 방지하는 강력한 요인이 될 수 있겠다는 것을 느꼈다. 차이앱은 워낙 앱 상에서도 다양한 인터랙션이 많기로 유명하다. 랜딩페이지에서도 기대를 져버리지 않았는데, 이같은 인터랙션을 일관된 브랜드 경험으로 만들어가고 있는 것 같다. 차이 랜딩페이지는 앞에서 살펴본 어떠한 랜딩페이지들보다 인터랙션의 측면에서 가장 매력적이었다. 뭐에 홀린듯이 끝까지 스크롤다운해서 봤다. 오로지 깔쌈한 '인터랙션' 때문에! 만약 차이앱을 처음 마주한 고객이라면, 이 랜딩페이지를 보면서 정확히 뭔지는 모르겠지만 '간지가 난다', '흥미롭다'는 감정을 느끼며 플로팅 CTA버튼을 클릭할 법 하다. 

 

 

인터랙션이 매력적인 CHAI 랜딩페이지 일부/ 차이의 플로팅 CTA버튼에도 '매일 최대 50%!'라는 고객의 받게될 혜택을 명확히 명시해주고 있다. @CHAI

 

 

기술적으로 받쳐준다면 이런 인터랙션 만들고 싶다. 하지만, 이 또한 많은 서비스들이 굳이 택하지 않은 이유가 있을 것이다. 서비스마다 어필하고자 하는 부분이나 브랜드 이미지에 따라 이같은 인터랙션이 필요하지 않을 수 있겠다. 

 

👉ipad Pro 제품 페이지 인터랙션 확인하기

iPad Pro

👉CHAI 랜딩페이지 인터랙션 확인하기 

CHAI - 차이나는 간편결제

 

---

랜딩페이지 공부를 마치며

오늘의 공부와 고민들을 바탕으로, 랜딩페이지의 카피와 CTA버튼를 앞으로 좀더 효과적이게 개선하고자 한다. 지금까지는 이메일 수집을 위한 랜딩페이지 였다면, 웹스토어 승인 이후에는 웹스토어로 이어지는 CTA 버튼이 포함된 랜딩페이지 개선이 필요하다. 좀더 고객에 대한 고민을 담은 카피와 버튼을 만들고 싶다.

 

---

협업을 진행한, 쿠키파킹 서비스를 런칭했어요!

www.cookieparking.com/landing

쿠키파킹 | 성장하는 사람들의 가장 간편한 콘텐츠 파킹랏

*크롬 웹스토어에서 쿠키파킹 크롬익스텐션으로 만나볼 수 있습니다.

 

 

 

 

 

 

 

 

 

읽어주셔서 감사합니다.

🙌언제든 부족한 부분에 대한 피드백이나 새로운 인사이트는 대환영입니다. 🙌

.

.

.

.

.

DEEP WIDE STUDIO

스피노자는 말했습니다. "나는 깊게 파기 위해 넓게 파기 시작했다."

저는 '철학'을 전공하며 인간의 근본에 대해 탐구했고, 

인간의 일상을 기술적으로 혁신하는  'IT 업계'에 관심을 갖게 되었습니다.

깊어지기 위해, 천천히 넓은 물로 나아가는 중입니다. 

인스타그램으로 더 가까이 소통해요!

Instagram @skyblueyekk

Github: https://github.com/yekyung2

Gmail skybluee2014@gmail.com