brunch

매거진 디자인 그리고 프로덕트

라이킷 127 댓글 2

You can make anything
by writing

C.S.Lewis

계정을 잊어버리셨나요?

by eric Mar 08. 2021

랜딩 페이지를 잘 디자인하기 위해 내가 고려하는 것들

오늘은 웹사이트에서 중요한 개념인 랜딩 페이지를 디자인할 때에 제가 고려하는 것들을 말씀드려보려고 합니다.

웹사이트를 디자인하는가, 또는 앱을 디자인하는가에 따라 UX/UI디자인을 하는 전략이 달라질 수 있어요.

웹사이트가 앱과 다른 점 중 하나는 사용자가 브라우저를 통해 한 웹사이트의 특정 페이지를 다이렉트로 방문할 수 있는 부분이에요.

이렇게 바로 방문하는 페이지를 랜딩페이지라고 하는데요. 랜딩 페이지(landing page)의 사전적 의미는 검색 엔진, 광고 등을 경유하여 접속하는 이용자가 최초로 보게 되는 페이지라고 합니다.

제가 강의를 하고 있는 인프런 플래폼을 예시로 조금 더 설명해보겠습니다.

사용자는 위와 같이 제 강의 상세페이지를 가기 위해 인프런 홈페이지로 접속한 후 인프런 내에서 검색을 통해 갈 수도 있겠지만...

구글 검색 또는 인프런이 아닌 다른 경로를 통해 바로 강의 상세페이지로 접속을 하게 될 수도 있습니다.

위 사례는 강의 상세 페이지를 랜딩 페이지라고 볼 수 있는데요. 이 경우, 사용자에 따라 인프런이라는 회사가 어떤 곳인지 모른 상태로 오는 경우일 수도 있고 약간의 지식을 알고 오는 경우도 있을 수 있어요. 그래서 UX/UI디자이너는 다양한 경우의 수를 고려해서 기획 및 디자인을 해야 합니다. 그리고 이것은 비단 디자이너만의 영역이 아니고 마케터, PM 등 다른 직군에 계신 분들도 직접 또는 간접적으로 고민을 하게 되는 부분입니다.

그렇다면 무엇을 고려해야 할까요? 제가 실무에서 고려하는 것들을 알려드릴게요.

.

고려사항 1. 사용자는 아주 짧은 시간 안에 랜딩페이지에 대한 첫인상을 형성한다.

사용자가 랜딩 페이지에 방문해 더 알아볼 지 또는 이 페이지를 떠날 지 결정하기까지 걸리는 평균 시간이 2.6초라는 연구결과가 있어요. (참고 글 1, 참고 글 2)

이 말은 핵심적인 정보를 그렇지 않은 정보 대비 보기 쉽게 더 크게 만들거나, 페이지 상단에 배치하면 좋다는 뜻이 될 수 있습니다.

위 인프런의 강의 상세페이지의 경우 최상단에 메인 썸네일 이미지, 별점 후기, 제목, 총 수강생 등 가장 중요한 정보들을 요약해서 보여주고 있는데요. 사용자가 스크롤을 하지 않고 처음 보게 되는 화면은 웹페이지에서도 가장 비싼 골든 스팟이라고 볼 수 있어요. 그래서 이렇게 중요한 영역은 특별히 신경을 써서 디자인하는 것이 중요합니다. 예쁘게 디자인을 잘하는 것만 중요한 게 아니라 비즈니스적인 측면도 함께 고려를 해야 한다는 겁니다.

.

고려사항 2. 웹사이트에 대한 사용자의 학습

앞서 말씀드린대로 랜딩 페이지는 해당 웹사이트의 홈페이지를 거치지 않고 오는 경우가 많기 때문에 사용자에 따라 이 웹사이트가 어떤 성격의 제품을 파는 곳인지, 무엇을 위한 곳인지 모르는 상태에서 올 수 있어요. 그래서 사용자가 이를 학습할 수 있도록 돕는 것이 중요할 수 있습니다.

아래는 제가 구글 검색을 통해 "중고 신발"을 검색해봤고, 최상단에 뜨는 당근 마켓에 접속을 해봤는데요.

당근 마켓의 해당 랜딩페이지를 들어가보니, 최상단에 "중고거래"라고 되어 있어서 당근마켓에서는 내가 신발을 거래할 수 있는 곳이구나라고 학습을 할 수 있었습니다. 그리고 제품 리스트를 보여주고, 실거래가도 보여주고 있어서 어떤 제품을 파는 곳인지, 가격이 어떻게 되어 있는지 등을 배울 수 있어요. 당근 마켓을 모르는 입장이더라도 어느 정도 감을 잡을 수 있게 학습을 도와주는 것 같습니다.

만약, 여기서 조금 더 나아간다면, 당근 마켓은 어떤 형태로 거래가 진행되는 지 How it works같은 도표를 보여준다든지, 당근 마켓 서비스의 컨셉을 알 수 있는 핵심 한 문장 같은 것이 있다면 더 도움이 될 수도 있을 것 같습니다.

고려사항 3. 사용자의 첫인상 최적화시키기 (Optimizing for the users' eyes)

미국에서 그로스 마케터로 일하고 있는 Angie Schottmuller는 Optimizing for the users' eyes라는 개념을 소개하고 있는데요. 사용자가 랜딩페이지에 대한 첫인상을 짧은 시간 안에 형성하는 만큼 다음 4가지를 만족시켜야 한다고 이야기합니다.

1. 이 회사/서비스의 이름은 무엇인가?

회사/서비스의 이름이 아무래도 판매하는, 또는 제공하는 제품과 연결이 되면 좋습니다. 위 당근마켓의 경우 서비스 이름에 "마켓"이 들어간 것이 좋은 예시라고 볼 수 있겠네요.

2. 이 서비스는 무엇을 파는 곳인가? 무엇을 제공하는 곳인가?

랜딩 페이지를 들어갔을 때 무엇을 판매하는 지 바로 알 수 있는 것이 좋습니다. 아래 인프런 페이지의 경우, 어떤 카테고리가 있는지 알 수 있고, 어떤 구체적인 강의들이 있는지 알 수 있어서 가져온 사례입니다.

3. 이 곳은 신뢰할 만한 곳인가?

이 서비스에 대해 신뢰할 만한 어떤 정보가 제공되면 좋습니다. 이 서비스를 사용하는 명망 있는 회사가 될 수 있고, 누군가의 후기가 신뢰성을 올려줄 수도 있습니다.

아래는 미국의 의료 매칭 서비스로 유명한 Zocdoc이란 서비스인데요. Thousands of providers라는 표현을 써서 이곳에 많은 의료 관련 셀러/서비스 제공자가 있다는 것을 강조하고 있습니다.

아래 크몽의 검색 결과 랜딩페이지 사례에서는 별점과 리뷰 개수가 신뢰성을 올리는 역할을 하는 것 같아요. 별점은 서비스를 구매한 사람이 올리는 것이기 때문에 그런 역할을 하지요.

4. Call To Action은 무엇인가? (다음 행동 유도)

기획자/디자이너의 중요한 역할은 사용자로 하여금 랜딩페이지에 대해 설득이 되었다면 다음 액션이 무엇인지 명확히 알려줘야 한다는 것입니다. 아래 인프런 강의 상세 페이지의 경우 여러 버튼과 링크들이 있지만 가장 큰 메인 CTA버튼으로 "수강신청"을 두었어요. 강의를 듣고 싶다고 느낀다면 수강신청을 할 수 있으며, 이 버튼을 누르면 원하는 행동을 할 수 있다는 것을 알려주는 것입니다.

만약 이 버튼이 두드러지는 초록색이 아니라 옅은 회색이라면 어떨까요? 만약 문구 "수강신청"이 덜 명확하면 어떨까요? 예를 들어 "수강 신청"이 아니라 "수강"이라고 써있었다면 어땠을까요?

사용자는 다음 스텝으로 넘어가고 싶어도 CTA버튼을 잘 찾기 어려울 수 있고, 찾더라도 이걸 누르면 어떤 다음 동작이 나올 지 예상이 되지 않아 어려움에 빠질 수 있습니다. 그런만큼 CTA는 아주 명확한 문구와 잘 보이는 버튼을 사용해야 합니다.

정리하며..

랜딩 페이지는 UX/UI디자인에 있어서 정말 중요한 부분이라고 생각해요. 비즈니스와 직접적으로 영향을 주는 페이지이기도 하고, 사용자와 많은 인터렉션이 일어나는 곳이기 때문입니다. 그래서 실무에서는 랜딩페이지에 대해 많은 A/B 테스트, 사용자 테스트를 통해 사용자가 편하게 사용하고 정보를 잘 습득할 수 있는지 검증을 하고 최적화시키는 과정을 거칩니다.

[UX디자인 개론 강의 무료 쿠폰 안내]

UX디자인 공부를 이제 막 시작하셨나요? UX디자인 입문을 하려고 하는데 어디서부터 어떻게 해야 할지 고민중이신가요? 인프런에 개설한 '비전공자/입문자를 위한, 쉽게 이해하는 UX디자인 개론' 강의 "무료 수강 쿠폰"을 드립니다. (강의 원가: 7만 5천원)

UX를 전공하지 않은 분들, 학교에서 UX를 막 공부하기 시작한 분들이 쉽고 재미있게 UX분야에 입문할 수 있도록 첫 걸음을 안내해 드립니다. UX와 UX디자인의 본질에 대해서, 10년 동안 이 업계에 있으면서 기업, 스타트업, 테크 회사, 프리랜서 등 다양한 곳에서 실무를 하며 얻은 노하우를 알려드리고 있습니다. UX디자이너가 어떻게 사용자에 대해서 배우고, 문제를 발견하며 솔루션을 만들어나가는지, 개발자, PM과는 어떻게 협업을 하는지 경험들을 대방출합니다. 이 강의는 평점 4.8, 수강평 115개, 1004명이 신청한 강의(2024년 5월 기준)로 많은 수강생 분들로부터 좋은 평가를 받은 강의입니다. 강의를 통해서 보다 빠른 UX입문과 커리어 목표 달성을 응원합니다.

아래 설문을 참여하시면 강의를 무료로 들을 수 있는 쿠폰을 바로 확인하실 수 있습니다 .

"UX디자인 개론" 강의 무료 쿠폰 받으러 가기>>