랜딩 페이지, 고객에게 남기는 첫 인상

💡 10분 안에 이런 걸 알려드려요!

  • 고객을 첫눈에 사로잡는 매력적인 이커머스 랜딩 페이지 구성 노하우
  • 고객의 다음 행동을 유도하는 고객 여정 기반 랜딩 페이지 만드는 법
  • 체류 시간을 늘리고 이탈률, 종료율을 낮추는 랜딩 페이지 개선 솔루션

연사 레이첼

채널코퍼레이션 마케팅팀 리드

Editor's Comment

채널톡이 주관한 웨비나를 10분 안에 읽을 수 있는 글로 큐레이션 했습니다. 채널톡은 채팅상담부터, CRM, 마케팅까지 하나의 툴에서 모두 관리할 수 있는 '채팅 CRM 솔루션'인데요. 

 

채널톡은 스타트업을 위한 스타트업이 되겠다는 목표로, 주기적으로 웨비나를 진행하며 그간 쌓아온 많은 비즈니스 팁을 나눠주고 있습니다. 

 

이번 아티클의 주제는 '자사몰 마케팅 랜딩페이지 노하우'입니다. 랜딩페이지는 고객과 브랜드가 만나는 최초의 웹페이지이니만큼, 한눈에 매력적인 구성을 갖추어야겠죠. 매끄러운 구매 여정을 위한 랜딩페이지 구성 노하우를 속속들이 알려드립니다. 

* 채널톡의 온라인 세션 '자사몰 마케팅 랜딩페이지 노하우'을 퍼블리의 시선으로 큐레이션한 콘텐츠입니다. 채널톡 회원가입 후 다시보기를 할 수 있습니다. 

 

랜딩 페이지란 무엇일까요? 

  • 검색 엔진, 광고 등을 경유해 접속하는 이용자가 최초로 보게 되는 웹페이지
  • 기획자가 의도한 행위를 하도록 만든 웹페이지

이처럼 랜딩 페이지는 광고 효율을 높이고, 구매까지 이어지게 하는 효과가 있습니다. 그러다 보니 '채널톡'에서 운영 중인 '이커머스 마케팅 커뮤니티'에서도 랜딩 페이지에 관련된 질문하시는 분들이 많은데요.

 

이번 아티클에서는 광고로 유입된 고객이 이탈하지 않게 만드는 비법, 랜딩 페이지 제작 노하우를 소개하려고 합니다. 이 콘텐츠를 보시고 궁금한 점이 생긴 분들은 언제든 커뮤니티에 들어오셔서 요청 글을 남겨주세요.

고객 관점으로 랜딩 페이지 새로 만들기

랜딩 페이지는 고객이 각각의 다음 퍼널로 갈 수 있도록 하기 위한 첫 단추를 끼우는 것과 같습니다. 랜딩 페이지를 통해 다음 퍼널인 회원가입 페이지나 장바구니, 상세 페이지 한 번 더 보기, 동영상 시청 등등으로 차근차근 단추를 채워나가는 것이죠.

 

바꿔 말하면 랜딩 페이지에서 바로 구매 전환이나 회원 가입, 영상 시청 등이 일어나게 만드는 것은 쉽지 않습니다. 오히려 랜딩 페이지는 고객의 온도를 점점 더 높여 전환까지 끌고 가는 첫 번째 과정에 가까우니까요.

 

그렇기에 이 과정에서 마케터는 랜딩 페이지 기획 과정에서 고객 중심의 접근법과 고객 행동 플로우를 파악해 다음 전환으로 끌고 가는 게 중요합니다. 이러한 관점을 바탕으로 랜딩 페이지를 새롭게 설계하는 방법에 관해 알아봅시다.

 

[STEP 1] 고객 여정 만들기

랜딩 페이지를 새로 만들기 전에 가장 먼저 해야 할 일은 고객 여정을 만드는 것입니다.

고객 여정 만들기 ©레이첼

광고를 기획한 다음 광고 이미지를 클릭해 랜딩 페이지로 연결된 후, 어떤 형태의 CTA* 버튼을 눌러 어떤 페이지로 연결되게 해야 할지 등의 과정을 그려보는 것입니다. 이렇게 미리 여정을 계산해야 훨씬 더 매끄러운 랜딩 페이지를 만들 수 있습니다.

* Call To Action 행동 유도 버튼

 

[STEP 2] 랜딩 페이지의 기본 구성 파악하기

랜딩 페이지의 기본 구성 ©레이첼

위의 이미지는 보편적으로 널리 사용하는 랜딩 페이지 형태입니다. 가장 상단에 가장 큰 이미지와 상품의 특징과 장점 키워드 정도로 정리해 넣은 히어로 섹션과 포인트 섹션이 들어갑니다.

 

그다음으로는 상품에 관한 디테일한 설명을 나타내는 디테일 섹션이 있고요. 마지막으로 하단에 고객의 액션을 유도하는 섹션으로 구성됩니다.

 

[STEP 3] 이탈률 낮은 여정 설계를 위한 와이어프레이밍

앞 단계에서 고객 여정을 그려보고, 랜딩 페이지의 기본 구성을 알아보았습니다. 이제 이를 쪼개 더 디테일한 '와이어프레임(Wireframe)'*을 그려봅시다.

* 사이트, 앱 개발 기획 과정에서 설계를 위한 레이아웃 및 뼈대를 그린 이미지

리소스를 줄이고 속도를 높이는 와이어 프레이밍 단계 ©레이첼

이렇게 우리 사이트에 맞는 프레이밍을 한번 잡아놓으면 새로운 랜딩 페이지를 기획할 때 적은 리소스를 들여 훨신 더 빠른 속도로 여러 랜딩 페이지를 기획할 수 있습니다. 고객의 전환을 이끄는 마지막 페이지인 파이널 페이지까지의 와이어프레임을 잘 만들어두면 더 좋겠죠.

 

[STEP 4] 완성한 랜딩 페이지 체크, 실험, 개선하기

고객 여정 설계를 기반으로 만든 랜딩 페이지 ©레이첼

제가 예시로 만든 페이지를 통해 설명해볼게요. 위 이미지는 굉장히 보편적인 버전의 랜딩 페이지입니다. 소셜 커머스가 대유행할 당시, 수많은 형식의 랜딩 페이지가 생겨났습니다. 저 역시 위메프에서 근무할 때 여러 시행착오를 거쳐보니, 나름의 인사이트가 생겨 위와 같은 이미지로 구성하게 됐습니다.

 

간혹 '요즘 랜딩 페이지의 트렌드는 무엇인가요?'라고 질문해주시는 분들도 계세요. 만드는 방식에 따라 액션 유도 섹션을 중간에 몇 개 더 넣을 수도 있고, 포인트 섹션 없이 바로 디테일 섹션으로 들어갈 수도 있거든요.

 

이처럼 랜딩 페이지의 형식이 정형화되었다기보다는, 브랜드가 추구하는 방향에 따라 다르기 때문에 실험을 거쳐 자사몰에 가장 잘 맞는 형태를 찾아보는 게 좋을 것 같아요.

 

자, 다시 랜딩 페이지 체크 단계로 돌아가 각 단계에서 주의해야 할 점을 살펴볼게요.

 

1) 히어로 섹션과 포인트 섹션