전환율을 120% 올리는 랜딩 페이지 설계 방법

사람들이 인터넷 서핑을 할 때, 해당 페이지에 계속 머물 것 인지, ‘뒤로’ 버튼을 누를 것인지를 결정하는 데는 얼마나 시간이 걸릴까요? 『린 스타트업』의 저자 애시 모리아Ash Maurya에 따르면 최초 방문자가 랜딩 페이지에 방문하여 머무는 시간은 약 8초라고 합니다. 그녀는 랜딩 페이지의 UVP(Unique Value Propsition – 제품이 가진 차별점은 무엇이며 구입할 관심을 끌 가치가 있는 이유)가 훌륭하다면 방문자들은 웹 사이트의 나머지 부분도 둘러보면서 더 머물 수 있지만 UVP가 훌륭하지 않다면 바로 떠나버릴 것이라 말합니다.

그럼 애시 모리아의 말처럼 사람들을 8초 이상 머물게 만들면서 원하는 페이지로 클릭을 유도하기 위해서는 어떻게 해야 할까요? 사람들은 정보를 확인할 때 보통 눈을 통해 들어온 ‘시각’ 정보에  먼저 의존하게 됩니다. 따라서 방문자들이 처음 사이트에 접속했을 때 만나게 되는 랜딩 페이지를 구성할 때는 방문자의 시각을 먼저 공략해야 합니다.

따라서 복잡한 화면 설정보다는 최대한 직관적인 디자인으로 무장한 첫인상으로 사람들의 시선을 사로잡는 것이 가장 중요합니다. 웹 디자인은 이런 디자이너들의 오랜 고민을 거쳐 발전해 왔습니다. 다음에 소개해드릴 패턴들은 직관적이면서도 브랜드의 메시지를 빠르게 전달할 수 있는 대표적인 UI입니다.

F 패턴

F패턴은 글을 왼쪽에서 오른쪽으로 읽는 대부분의 문화권에서 자연스럽게 나타나는 디자인입니다. 주로 제목 아래 간단한 설명을 붙인 사진을 넣고, 그 밑으로 콘텐츠를 소개하는 형식을 취하고 있습니다

Z 패턴

흔히 ‘갈지(之)자 구도’라고 불리는 패턴으로 대부분의 온라인 랜딩 페이지에 가장 많이 쓰이고 있습니다. 비교적 단순한 구도에 한눈에 페이지 내용이 눈에 들어오기 때문에 사용자의 반응을 빠르게 이끌어 낼 수 있다는 장점이 있습니다.

소개해드린 대표적인 패턴인 F와 Z 말고도 해당 기업의 특성이나 전달하려는 가치에 따라 웹 디자인은 여러 형태로 나타날 수 있습니다. 연구에 따르면 우리의 눈은 색채가 강하거나, 글씨가 굵거나, 배치가 대조적일 때 더욱 민감하게 반응한다고 합니다. 만약 당신이 사용자에게 원하는 경험을 만들기 위한 전략을 세운다면 특정 위치에 굵은 글씨를 활용하거나 중요도에 따른 공간을 활용하여 시선을 묶어둘 수 있을 것입니다.

콘텐츠 내 메인 보디에 위치한 클릭 유도 문안이 위에 위치한 것보다 훨씬 효과적인 것을 볼 수 있습니다

그러나 복잡하고 여러 경험을 만들어내야 하는 웹사이트의 환경은 늘 정석적인 패턴을 따라하기만 해서는 안 됩니다. 사용자는 웹 페이지 안에서 하나의 경험만 하는 것이 아니기 때문입니다. 예를 들어 당신이 뉴스레터의 구독을 유도하고 싶다면 클릭 유도 문안을 페이지의 상단보다는 하단에 위치하는 것이 좋습니다. 사이트를 방문한 사람이 콘텐츠를 다 보기도 전에 구독 배너가 상단에 노출이 된다면 사용자는 이를 지나쳐버릴 확률이 더 높아지기 때문입니다.

사용자가 처음 방문하게 되는 랜딩 페이지는 이미지 사용에 더욱 주의를 기울여야 합니다. 이미지는 글보다 더욱 직관적이고 집중하기 편하다는 장점이 있습니다. 흥미로운 사실은 이미지에 사람의 얼굴이 포함된 경우에 사람들은 더욱 이미지에 집중하게 됩니다. 콘텐츠 마케팅 전문가인 폴 보그Paul Boag는 사람의 얼굴을 사용하는 경우 사용자들이 다른 요소들을 건너뛰는 경향이 있기 때문에 이미지와 클릭 유도 문안을 가까이에 위치시켜야 한다고 주장합니다.

가장 큰 이미지의 얼굴 중앙에 시선이 집중된 것을 볼 수 있습니다. 이렇듯 사람의 우선적으로 받아들이는 지각 능력은 매우 강력해서 클릭 유도 문안이 왼쪽에 위치하고 이미지가 오른쪽에 위치한다 하더라도, 우리의 눈은 오른쪽으로 건너뛰어 버립니다.

유저의 시선이 머물기 바라는 방향을 주변 이미지들과 연관시키는 것은 효과적인 UX 설계가 될 수 있습니다

한가지 명심해야 할 점은 당신의 UI는 사용자가 페이지를 이탈할 때까지 ‘긍정 강화’를 위해 설계되어야 한다는 것입니다. 여기에는 두 가지 이유가 있습니다.

1.  사람들은 이전의 행동을 유지하려는 특성을 갖고 있습니다. 만약 방문자가 페이지에 좋은 느낌을 지속적으로 받게 되면 그들은 이후에도 지속적으로 비슷한 느낌을 받을 확률이 높습니다. 이는 높은 재방문율로 이어지게 됩니다.

2.  ‘구매하기’나 ‘결제 화면’과 같은 결제 전환을 유도하는 UX에 사람들은 높은 피로감을 호소합니다. 이들은 감정적인 비용을 한 번 더 지불하는 느낌을 받기 때문에 자신이 웹에서 경험하는 행동이 호스트의 제품 판매 등의 목적보다는 훨씬 안전한 느낌이 들게 만들어줘야 합니다.

잘 구성된 랜딩페이지는 좋은 콘텐츠 만큼 사용자에게 좋은 경험을 제공해줍니다. 좋은 랜딩 페이지를 설계하는 데 정답은 없습니다. 그러나 명확한 UVP와 사이트를 방문하는 고객의 특성에 따른 전략적 UX구성이 가능하다면 보다 나은 효율을 만들어낼 수 있을 것입니다.