전환률 높이는 랜딩페이지 구조

랜딩페이지는 sales funnel중 사이트 방문자들이 실제 사용자 혹은 고객으로 전환되게 하는데 가장 중요한 부분이다. 내가 만든 서비스가 아무리 좋다고 하더라도 랜딩페이지에서 어떻게 보여주는지에 따라 전환이 되고 안되고가 결정된다. 이런 점 때문에 랜딩페이지는 내 아이디어를 검증하는 MVP의 기본이 된다. 제품 개발 전 나의 아이디어를 랜딩페이지에 설명을 한 후 사이트 방문자들이 실제 전환이 되는지 안되는지 측정을 한다.

근데 이렇게 중요한 랜딩페이지를 잘 만드는 것이 쉽지 않다. 사이트들을 돌아다녀 보면 잘 만들어져 있는 랜딩페이지를 찾는 것도 쉽지 않다.

랜딩페이지에서 중요한 3가지 질문

내 경험상 잘 만들어진 랜딩페이지를 찾는 것이 어려운 이유는 창업자들 혹은 기획자들이 자신의 아이디어를 피칭할 때 흔히 하는 실수와 동일하다. 자신의 제품이 무엇인지 쉽고 심플하게 설명을 안하고 어려운 전문 용어를 써가면서 너무 복잡하게 장황하게 부풀려서 설명을 한다. 유저 입장에서는 이런 장황한 설명들이 아무 의미가 없다. 유저 입장에서 궁금한 것은

  1. 이 사이트에서 제공하는 제품은 무엇(what)이고
  2. 제품이 나의 문제를 어떻게 해결해 주는지(왜 내가 이 제품을 써야 되는지, why)
  3. 그리고 그 해결책을 쓰려면 나는 뭘해야 되는지(how)가 가장 궁금하다.

그외 비젼이 뭐고 꿈이 뭐고 이 회사가 어떻게 세상을 바꿀건지는 관심이 없다. 그런데 너무 많은 랜딩페이지들이 장황한 마케팅 문구를 써가면서 내가 이 사이트에서 얻는게 뭔지 파악하는 것을 더 어렵게 만든다.

좋은 랜딩페이지는 Knowledge Gap을 줄여준다.

이런 함정에 빠지는 창업자들이 너무 많아 Ycombinator에서는 Jared Spool의 knowledge gap (https://articles.uie.com/design_intuitive/)이라고 하는 개념을 인용해 가면서 랜딩페이지를 제발 장황하게 만들지 말라고 설명한다.

Knowledge gap은 사용자가 현재 갖고 있는 지식과 사용자의 문제를 해결하기 위해 필요한 지식 간의 차이이다. 저 차이를 메워주는 것이 UX 디자인이 좋은 제품이다. 기획자, 디자이너는 저 차이를 메워주는 UX 및 문구에만 집중하면 된다. 사용자가 이미 알고 있는 지식(아래 그래프에서 빨간색 선 왼쪽으로 있는 것)과 사용자가 문제를 해결하는 것에 불필요한 지식(아래 그래프에서 초록색 선 오른쪽)은 있을수록 오히려 방해가 된다.

Jared Spool의 Knowledge Gap

이를 랜딩페이지에 적용을 해보면 좋은 랜딩페이지는 특정 문제의식을 갖고 사이트에 들어온 방문자에게 이 사이에서 제공하는 제품이 어떻게 방문자의 문제를 해결해주는지를 쉽고 빠르게 전달 해줘야된다.

랜딩페이지 구조

Ycombinator의 How to Improve Conversion Rates(https://www.youtube.com/watch?v=PGqX9fpweyc&t=658s) 영상을 보면 전환이 잘되는 랜딩페이지를 만들때 아래와 같은 질문을 하라고 한다.

  1. What is call-to-action? (이 서비스를 쓰기 위해서 내가 랜딩페이지에서 해야 될 액션이 무엇인가?)
  2. What is your magic moment? (이 서비스는 어떤 서비스인가? 엄마가 쉽게 이해할 수 있을 정도의 문장!)
  3. Is it legit? (실제 존재하는 서비스처럼 보이는지 아니면 스팸 사이트 처럼 보이는지?)
  4. Who else it using it? (현재 어떤 사람들이 사용하고 있는지를 보여주는지?)
  5. How much does it cost? (서비스를 사용하는 가격은?)
  6. What's the catch? (만약 무료이거나 혹시 가격이 너무 싸면 왜 그런건지? 어떻게 돈을 버는지 투명히 설명!)
  7. Where can I get help? (궁금한 점이 있을 때 어디에 연락을 하면 되는지?)

이를 구조화 해보면 다음과 같다.

  1. 제공 가치(Value Proposition )와 Call-to-action ('내 제품은 뭘 하는가?', '제품을 얻으려면 뭘 해야 되는가?'에 대한 답)
  2. Benefit ('왜 내가 이 제품을 사용해야 되는가?'에 대한 답)
  3. Feature ('위의 benefit을 어떻게 제공하는가'에 대한 답)
  4. Social Proof ('현재 어떤 사람들이 사용하고 있는가?'에 대한 답)
  5. Price (얼마인지?)
  6. Contact (문의하고 싶으면 어디에 연락해야 되는지?)
  7. Call-to-action (CTA 다시 한번 강조)

랜딩페이지 구조

(위의 이미지가 보기 어려 우신 분들을 위해 웹페이지로 만들어 봤으니 옆의 링크를 통해 한번 확인해 보세요 ~ https://test-page-b1c34d.webflow.io/)

여기서 benefit과 feature에 대한 차이점에 대해 보충 설명을 하자면 아래 이미지에서 benefit은 마리오가 불덩어리를 던질 수 있게 된 것이고 feature는 불덩어리를 던질 수 있게 능력을 준 꽃이라고 생각을 하면 된다.

Feature와 Benefit의 차이점

이렇게 정리를 하면 막막하게 느껴지던 랜딩페이지가 사실 그렇게 어렵지 않다. 오히려 너무 과도하게 마케팅을 하려고 하면 어려워진다.

마지막으로 랜딩페이지 Inspiration 사이트 몇 개 소개하자면:

  1. https://www.lapa.ninja/
  2. https://onepagelove.com/
  3. https://saaslandingpage.com/

그럼 이제 모두 랜딩페이지를 만들어서 빠르게 자신의 가설 검증을 해보시길~!

🤩 디스콰이엇은 현재 같이 만들어나갈 팀원을 모시고 있습니다. 이에 대해 더 자세히 알고 싶은 분들은 팀원 모집글을 읽어주세요~
저희와 함께 디스콰이엇을 만들어 나가는데 관심이 있으신 메이커 분께서는 info@disquiet.io으로 간단한 이력서나 LinkedIn 링크와 함께 이메일을 보내주세요! 온라인 혹은 오프라인으로 편하게 커피챗을 하고 싶어요 :)