고객 관점으로 랜딩 페이지 제작하기
[STEP 1] 고객 여정 만들기
랜딩 페이지를 새로 만들기 전에 가장 먼저 해야 할 일은 고객 여정을 만드는 것입니다.
광고를 기획한 다음 광고 이미지를 클릭해 랜딩 페이지로 연결된 후, 어떤 형태의 CTA* 버튼을 눌러 어떤 페이지로 연결되게 해야 할지 등의 과정을 그려보는 것입니다. 이렇게 미리 여정을 계산해야 훨씬 더 매끄러운 랜딩 페이지를 만들 수 있습니다.
*Call To Action 행동 유도 버튼
[STEP 2] 랜딩 페이지의 기본 구성 파악하기
위의 이미지는 보편적으로 널리 사용하는 랜딩 페이지 형태입니다. 가장 상단에 가장 큰 이미지와 상품의 특징과 장점 키워드 정도로 정리해 넣은 히어로 섹션과 포인트 섹션이 들어갑니다.
그다음으로는 상품에 관한 디테일한 설명을 나타내는 디테일 섹션이 있고요. 마지막으로 하단에 고객의 액션을 유도하는 섹션으로 구성됩니다.
[STEP 3] 이탈률 낮은 여정 설계를 위한 와이어프레이밍
앞 단계에서 고객 여정을 그려보고, 랜딩 페이지의 기본 구성을 알아보았습니다. 이제 이를 쪼개 더 디테일한 '와이어프레임(Wireframe)'*을 그려봅시다.
*사이트, 앱 개발 기획 과정에서 설계를 위한 레이아웃 및 뼈대를 그린 이미지
리소스를 줄이고 속도를 높이는 와이어 프레이밍 단계 
레이첼
레이첼이렇게 우리 사이트에 맞는 프레이밍을 한번 잡아놓으면 새로운 랜딩 페이지를 기획할 때 적은 리소스를 들여 훨신 더 빠른 속도로 여러 랜딩 페이지를 기획할 수 있습니다. 고객의 전환을 이끄는 마지막 페이지인 파이널 페이지까지의 와이어프레임을 잘 만들어두면 더 좋겠죠.
[STEP 4] 완성한 랜딩 페이지 체크, 실험, 개선하기
고객 여정 설계를 기반으로 만든 랜딩 페이지 레이첼
레이첼제가 예시로 만든 페이지를 통해 설명해볼게요. 위 이미지는 굉장히 보편적인 버전의 랜딩 페이지입니다. 소셜 커머스가 대유행할 당시, 수많은 형식의 랜딩 페이지가 생겨났습니다. 저 역시 위메프에서 근무할 때 여러 시행착오를 거쳐보니, 나름의 인사이트가 생겨 위와 같은 이미지로 구성하게 됐습니다.
간혹 '요즘 랜딩 페이지의 트렌드는 무엇인가요?'라고 질문해주시는 분들도 계세요. 만드는 방식에 따라 액션 유도 섹션을 중간에 몇 개 더 넣을 수도 있고, 포인트 섹션 없이 바로 디테일 섹션으로 들어갈 수도 있거든요.
이처럼 랜딩 페이지의 형식이 정형화되었다기보다는, 브랜드가 추구하는 방향에 따라 다르기 때문에 실험을 거쳐 자사몰에 가장 잘 맞는 형태를 찾아보는 게 좋을 것 같아요.
자, 다시 랜딩 페이지 체크 단계로 돌아가 각 단계에서 주의해야 할 점을 살펴볼게요.
1) 히어로 섹션과 포인트 섹션
광고에서 가장 중요한 포인트는 히어로 섹션의 '60% OFF 신혼부부 가구할인' 정보인데요. 광고를 클릭하면 랜딩 페이지의 히어로 섹션에 바로 광고와 톤 앤 매너 등 얼라인(align)을 맞춘 이미지가 등장합니다. 광고의 내용처럼 '신혼부부를 위한 가구 특별전 60% 할인' 문구도 명확히 표기되어 있어요.
간혹 감각적인 면을 어필해야 하는 쇼핑몰에서는 랜딩 페이지의 히어로 섹션을 되게 아무 문구 없이 이미지만 사용하는 경우가 있는데요. 고객이 정보를 바로 캐치할 수 없다는 단점이 있는 방향입니다.
고객이 얻을 수 있는 이익을 명확하게 전달하는 방향을 마케팅적으로 더 우선해야 전환율을 높일 수 있거든요. 만약 문구를 쓰는 게 어색하다면 '60% OFF' 정도만이라도 강조해주면 좋아요.
2) 디테일 섹션
디테일 섹션을 꾸릴 때에는 고객이 진짜 원하는 것이 무엇인지를 어필하는 게 가장 중요합니다. 이 단계에서 브랜딩 요소를 녹이려고 하시는 분들도 많을 거예요.
그런데 브랜딩은 각 상품의 상세 페이지에서 더 자세히 녹일 수 있습니다. 고객이 상세 페이지까지 도달하는 경우 이미 앞선 랜딩 페이지에서 후킹이 된 상태일 거예요. 랜딩 페이지는 광고를 통해 고객이 처음 만나는 웹사이트인 만큼, 고객의 니즈에 집중하는 것이 좋습니다.
3) 액션 유도 섹션
CTA 버튼은 하나의 랜딩 페이지 당 2개 이하로 제작하는 것이 좋습니다. 고객의 니즈를 쫓다 보면 여러 가설이 생겨나고, 마케터라면 이 가설을 검증해보고 싶은 욕심이 생기기도 하는데요. 버튼과 이미지를 점점 늘리다 보면 분석 자체가 몹시 까다로워집니다.
만약 사용하는 분석 툴이 다양하고, 추적의 과정이 잘 세팅되어 있다면 CTA 버튼에 각기 다른 텍스트를 적어 3개 이상으로 버튼 개수를 늘려볼 수도 있습니다. '지금 보러 가기', '지금 바로 구매하기', '할인받아보기', '더 알아보기' 등등을 조합해 어떤 버튼의 클릭율이 높은지, 효과적인 텍스트가 무엇인지 가설 검증도 해볼 수 있고요.
랜딩 페이지의 설계 목표는 하나의 광고에서 하나의 랜딩 페이지로 연결됐을 때, CTA 버튼으로 고객을 다음 퍼널까지 보내 전환율을 높이는 것입니다. 사실 이 과정을 정확히 추적하는 데는 버튼 하나로도 충분해요. 특히 실험이나 분석이 초창기 단계일수록 분산을 막을 수 있도록 버튼의 개수를 최소화하는 게 좋습니다. 그래야 고객도 니즈에 맞는 답을 찾을 수 있습니다.
[TIP] 디폴트 페이지를 랜딩 페이지로 설정할 때
회사 여건상, 광고 전용 랜딩 페이지를 제작할 수 없는 경우도 있습니다. 이 경우에는 디폴트 페이지를 랜딩 페이지로 사용하는데요.
이때는 역으로 기존 페이지를 랜딩 페이지로 활용할 수 있는 광고를 기획하면 좋습니다. 쇼핑몰에 이미 구성된 페이지 중 하나를 골라 해당 페이지로 랜딩 될 수 있게 하는 거죠.
상품을 판매하기 위한 목적이라면 사이트 안의 '판매랑 TOP 5'가 정리된 페이지가 있다면, 해당 페이지의 정보와 톤 앤 매너를 녹여 광고를 만들 수 있습니다. 마찬가지로 브랜딩이 목적이라면 회사 소개나 조직 문화 페이지에 도달할 수 있는 광고를 만들 수도 있습니다.
페이스북 슬라이드 광고로 여러 버전을 제작하고, 디폴트 페이지 링크를 걸어 어떤 광고가 효과적인 반응을 이끌어내는지 테스트해 보세요. 마케터라면 우리 웹사이트의 어떤 부분이 무기가 되는지 잘 알고 있고, 잘 알아야 하기 때문에 충분히 활용할 수 있습니다.
랜딩 페이지 개선 솔루션 3단계
우리 회사 랜딩 페이지, 도대체 무엇이 문제일까?
마케터, 기획자, 대표님 등등 많은 분들이 자사몰 유입을 위해 마케팅 예산을 쓰면서도, 효율이 나지 않아 고민하고 계십니다. 그런데 기존 랜딩 페이지를 살펴보면, 기획자의 의도대로 설계해 제작한 것이 아닌 경우가 대부분입니다. 랜딩 페이지가 기획자의 의도대로 제작되어 있지 않다면 어떤 문제점이 생길까요?
광고로 들어온 고객이 이탈할 가능성이 굉장히 높습니다. ROI*, ROAS**뿐 아니라 방문자 수 대비 구매 전환율이 낮아지는 것이죠.
*ROI : Return On Investment, 투자자본수익률
*ROAS : Return On Ad Spend, 광고비 대비 매출액
[STEP 1] 분석하기
웹사이트 분석을 위해서는 중요한 지표를 확인할 수 있는 'GA(Google Analytics, 구글 애널리틱스)'를 보편적으로 많이 사용합니다. 본격적인 이야기에 앞서 랜딩 페이지 분석에 활용할 수 있는 주요 지표를 소개할게요.
1) 이탈률
이탈은 고객이 랜딩 페이지에 도착했을 때, 스크롤, 클릭, 오래 머물기 등등의 아무런 액션을 하지 않고 그냥 사이트를 나갔을 때를 말합니다.
2) 종료율
종료율은 이탈률과 다르게 고객이 앞선 페이지를 살펴본 후 웹사이트를 떠나는 마지막 시점에 계산됩니다.
3) 체류시간
체류 시간은 말 그대로 고객이 어떤 광고를 보고 후킹이 돼서 웹사이트에 접속한 후 머무는 시간을 말합니다.
참고로 2023년 7월, GA의 현재 버전인 UA가 종료되고 상위 버전인 GA4로 전환된다고 하는데요. 검색해보면 '앰플리튜드(Amplitude)', '풀스토리(FullStory)', '핫자(Hotjar)' 등등 GA 말고도 고객 행동 분석을 위한 툴이 무궁무진하게 많이 있습니다.
[STEP 2] 이탈률 개선하기
평균 랜딩 페이지 이탈률은 얼마나 될까요? 아래의 이미지를 보시면 랜딩 페이지의 이탈률이 60~90%로 다른 유형에 비해 폭과 정도가 월등하게 높은 것을 확인하실 수 있습니다.
그렇다면 랜딩 페이지 이탈률이 높아지는 원인은 무엇일까요? 그 원인을 5가지 정도로 요약할 수 있습니다.
•
모바일로 접속했는데 PC 버전 페이지로 랜딩될 때
•
고객의 행동을 유도하는 버튼 없이 단일한 페이지로만 구성되었을 때
•
페이지 로드 속도가 느릴 때
•
가독성이 떨어지거나 디자인적으로 좋지 않은 페이지 구성
•
사이트를 방문한 목적과 랜딩 페이지의 콘텐츠 내용이 다를 때
여기서 가장 마지막에 해당하는 '방문 목적과 콘텐츠 내용이 다를 때'를 살펴볼게요. 만약 청바지를 더 보고 싶어 광고 이미지를 클릭했는데 치마 이미지가 섞여 있다면 어떨까요? 사이트에 더 머물 이유가 없어집니다.
이러한 이유로 저는 광고를 기획한 사람이 광고 전용 랜딩 페이지 기획도 같이 하는 것이 베스트라고 생각합니다. 광고와 랜딩 페이지의 얼라인이 맞아야 클릭한 고객의 니즈를 채워줄 수 있기 때문입니다.
[TIP] 이탈률이 낮아야만 꼭 좋은 걸까?
랜딩 페이지의 목적이 다르기 때문에 이탈률이 주요 지표가 아닌 경우도 있습니다. 예시로 SSG의 선물서비스 랜딩 페이지를 살펴볼게요.
SSG 선물서비스 홍보를 위한 랜딩 페이지
위 페이지는 새로운 서비스를 알리기 위한 목적으로 설계된 서비스입니다. 그렇기 때문에 이 페이지를 기획한 기획자는 고객이 정보를 얼마나 읽었는지를 확인하는 '스크롤 뎁스(Scroll Depth)', 체류시간 등을 주요 지표로 보고 이 페이지를 설계했을 거예요.
[STEP 3] 종료율 개선하기
마지막 페이지에서 종료율이 높은 경우, 고객이 상품을 구매하고 사이트를 나가는 일은 당연하니까 어쩔 수 없다고 생각하는 분들도 있을 수 있습니다.
하지만 이 경우에도 '구매 감사 쿠폰 발행' 등 여러 마케팅을 통해 고객을 붙잡아 종료율을 낮출 수 있습니다. 목표한 대로 이탈률이 개선됐고, 랜딩 페이지에서 다음 퍼널로 유도하는 일까지 마친 다음에도 고객을 한 번 더 태핑(고객과 한번 더 컨택)하는 단계가 남아있는 것이죠. 이렇게 해봅시다.
•
상품을 장바구니에 담게끔 유도하기
•
장바구니에 담은 상품 구매 유도하기
•
재구매 유도하기
[STEP 4] 효율적으로 랜딩 페이지 수정하기
랜딩 페이지 수정 단계에서 가장 중요한 것은 한 번에 여러 곳을 수정하지 않는 것입니다. 아예 전체를 갈아엎는다고 드라마틱하게 이탈률이 떨어지지 않습니다. 발견과 실험, 수정이라는 단계를 반복적으로 거쳐 필요한 부분을 수정하는 것이 효율적입니다.
효율적으로 랜딩 페이지 수정하기
먼저 진행 중인 배너 광고 1개를 정하고, 해당 배너 랜딩 페이지의 이탈률을 확인합니다. 미리 이탈률을 파악하지 않으면 추후 개선 여부를 확인할 수 없기 때문입니다. 다음으로 목표를 세웁니다. 예를 들어 지금 랜딩 페이지의 이탈률이 95%라면, '이를 3주 안에 92%로 3% 줄이겠다'는 목표를 세울 수 있습니다.
랜딩페이지의 중심이 되는 '히어로 이미지(hero image)'*와 배너의 톤 앤 매너를 맞춥니다. 클릭 전후의 시각적인 이질감을 줄이기 위해서입니다.
•
이런 형태로 2~3주 정도 테스트해 보고, 이탈률을 체크하고, 만약 달라지지 않았다면 다른 부분을 수정하는 식으로 반복해 랜딩 페이지를 구성하는 것이죠. 랜딩 페이지 수정을 완료했다면 최소 3일이 지난 후에 이탈률을 체크하는 것이 좋습니다. 변화를 체크하려면 어느 정도의 누적 수치가 필요하기 때문입니다.
또, 랜딩 페이지 수정 과정에서 지속적으로 경쟁사 혹은 비슷한 업종의 랜딩 페이지를 모니터링해나가며 효과적인 부분이 있다면 우리 사이트에 벤치마킹해보는 것도 좋습니다.
[Q&A] 랜딩 페이지를 통해 고객 호감도를 높이려면?
Q. 앞서 랜딩 페이지 테스트에 2~3주 정도가 필요하다는 말씀을 해주셨는데요. 그렇다면 이 과정을 몇 번 정도 반복하는 게 좋을까요? 물론 산업군마다 다르겠지만, 대략적인 권장 횟수가 있는지 궁금합니다.
앞서 랜딩 페이지의 구성을 히어로 섹션 및 포인트 섹션, 디테일 섹션, 액션 유도 섹션 이렇게 크게 3가지 정도로 나누어 설명했습니다. 각 영역을 순차적으로 테스트한다면 하나의 랜딩 페이지에 적어도 3번의 테스트가 필요하다고 볼 수 있어요.
하지만 발견하고 정의하는 문제에 따라 테스트해야 하는 총 경우의 수가 달라지기 때문에, 사실 횟수를 명확하게 정리하기는 어려울 것 같아요. 횟수보다도 정답을 찾을 때까지 계속해서 빠르게 실험하는 것이 가장 중요한 것 같아요.
Q. 랜딩 페이지는 컬러풀한 게 좋을까요?
고객의 행동을 유도하기 위해 설계한 중요한 부분은 눈에 띄는 컬러를 사용하면 좋아요. 이러한 정보를 파악할 때는 앞서 소개한 고객 행동 분석 툴을 활용해보시면 좋습니다.
풀스토리, 핫자 등등을 활용하면 '히트 맵(Heat Map)'*, 스크롤 뎁스 중 멈추는 구간, 클릭을 위한 CTA 버튼이 아닌데 자꾸 클릭하는 구간 등등을 확인할 수 있거든요. 이 구간을 자세히 들여다보면 눈에 띄게 만들어 놓은 섹션이어서 클릭한다는 것을 알 수 있습니다. 글보다는 눈에 띄는 이미지를 더 많이 눌러보는 거죠.
•
주로 웹사이트의 방문자를 분석하는 웹로그 분석에 많이 사용하는 분석 기법으로 웹페이지에서 발생하는 방문자의 마우스 클릭을 열분포 형태의 이미지로 변환하여 사이트 이미지 위에 겹쳐서 보여주며, 클릭이 많이 발생하는 영역은 붉은색으로 클릭이 적게 발생하는 영역은 푸른색으로 표현한다. (출처: 위키백과)
Q. 앞선 예시를 활용할 수 있는 제품은 비교적 저관여 제품인 것 같은데요. 만약 고관여 제품이라면, 어떤 행동 퍼널로 유도하는 것을 목표로 랜딩 페이지를 구성하면 좋을까요?
고관여 제품이라고 하면 객단가가 높거나, 구매 텀이 길거나 견적이나 상담이 필요한 제품 등 여러 종류가 있을 수 있을 것 같은데요. 이 경우에도 고객의 온도를 높이는 작업은 무조건 필요합니다.
제가 일하고 있는 채널톡 역시 고관여 제품이라고 할 수 있는데요. SasS 기반의 B2B 서비스이자 정기 구독 서비스이기 때문에 본격적인 실행에 앞서 고객 행동을 고려하는 단계가 길고, 주로 콘텐츠를 통해 고객의 온도를 높이려고 시도하려고 하는 편입니다.
랜딩 페이지에 들어오자마자 "빨리 써주세요!"라고 조르는 게 아니라, 왜 이 제품이 필요한지 콘텐츠적으로 우리의 가치를 잘 전달하는 거죠.
Q. 결제 전환까지의 퍼널별 효율을 어떻게 올리는 게 좋을까요? 고객 유입은 보장이 되는 상황인데 유저 활동을 트래킹하는 과정이 어렵습니다.
계속 강조했듯 랜딩 페이지의 유일한 목적은 광고를 클릭했을 때 랜딩 페이지에 들어가 있는 CTA 버튼을 누르게 만드는 것입니다. 그렇게 전환을 유도한 페이지가 제품 상세 페이지라면, 그 페이지의 목표는 상품 구매 전환이라는 다음 퍼널로 넘어가게 만드는 게 목표일 테고요.
이처럼 하나의 퍼널에서 모든 효과를 기대하기보다는, 해당 퍼널에서 다음 퍼널로 가는 것을 하나의 목표로 잡고 이 목표에 집중하는 게 좋아요.
또 하나 팁을 드리자면 랜딩 페이지에 도착하면 바로 보인 히어로 섹션 특장점에 담긴 스토리텔링이 중요해요. 위메프, 옐로모바일에서 일할 때 텍스트의 길이로 테스트를 해본 적이 있었는데요. 사실 전환율에 큰 차이는 없었어요. 길든, 짧든 고객은 텍스트를 잘 읽지 않는다는 것을 확인한 사례였는데요.
강조하고 싶은 말도 많고, 전하고 싶은 메시지도 많겠지만 이 부분에서는 가급적 간략하고 명확하게 전달하는 게 좋습니다. 대제목과 대제목을 뒷받침하는 1~3번까지의 소제목을 꾸려, 자세한 설명 없이도 자연스럽게 읽힌다면 가장 좋은 스토리텔링이라고 할 수 있을 것 같아요.
만약 이러한 과정을 거쳤음에도 고객 분석에 어려움이 있다면 유저 인터뷰를 시도해보셔도 좋습니다. 채널톡에서도 꾸준히 진행하고 있는데요. 저희가 했던 테스트 방법 중 하나를 소개할게요.
고객을 '줌(Zoom)' 콜로 만나 저희 사이트를 돌아다녀 달라고 부탁한 후, 고객이 사이트를 구경하는 모습을 화면 공유로 살펴보면서 중간중간 고객이 커서를 머뭇거리거나, 클릭하거나 갑자기 뒤로 가거나 했던 지점들을 체크했어요. 그다음 각 행동의 이유를 묻는 본격적인 인터뷰를 진행하면서 필요한 답을 찾았던 경험도 있습니다.