상세 컨텐츠

본문 제목

시선 끄는 완벽한 랜딩 페이지 디자인 팁 11가지

Design News/Design Trend

by 김현욱 a.k.a. 마루 2021. 6. 15. 07:00

본문

시선 끄는 완벽한 랜딩 페이지 디자인 팁 11가지

방문자를 웹 사이트의 특정 페이지로 안내할 때 눈에 띄기를 원한다. 랜딩 페이지는 브랜드를 반영하며 신규 가입, 판매 및 팔로워를 확보할 수 있는 기회다. 좋은 인상을 남기고 청중이 원하는 것을 정확하게 제공하고 싶어 한다.

하지만 좋은 랜딩 페이지는 무엇일까? 답변은 여러분이 속한 비즈니스 유형과 원하는 결과에 따라 약간씩 다를 수 있지만 모든 사람이 따라야 할 몇 가지 디자인 팁이 있다.

시작하는 데 도움이 되도록 랜당 페이지 디자인 팁이 포함된 유용한 가이드를 만들었다. 자세한 내용은 아래 내용을 참고하면 많은 도움이 될 것이다.

 

랜딩 페이지(방문 페이지)란 무엇인가?

기본부터 시작하자. 랜딩 페이지는 익명의 방문자를 양질의 잠재고객으로 전환하도록 디자인된 대화형 웹 페이지다. 여기에는 가입 양식 또는 무료 평가판 다운로드와 같은 클릭 유도 문안(CTA : call to action)이 포함된다.

디지털 광고 캠페인을 만들 때 랜딩 페이지에 연결하는 것이 좋다. 홈페이지보다 타겟이 더 정교하며 제대로 이해하면 브랜드가 성장할 것이다.

 

랜딩 페이지 디자인을 위한 11가지 팁(Tips)

랜딩 페이지가 필요하거나 기존 전략이 제대로 작동하지 않는 경우 창의력을 발휘할 때다. 몇 가지 주요 전략을 통해 전환하는 랜딩 페이지를 얻을 수 있다. 11 가지 주요 랜딩 페이지 디자인 팁으로 데이터베이스를 확장할 준비를 하길 바란다.

 

1. 브랜드에 충실

랜딩 페이지는 브랜드 주제와 일치해야 한다. 웹 사이트의 나머지 부분과 동일한 색상, 로고 및 폰트를 사용해야 한다.

성공적인 기업은 브랜드 인지도가 고객 충성도에 영향을 미친다는 것을 알고 있다. 예를 들어 코카콜라는 빨간색과 흰색으로 쉽게 알아볼 수 있는 반면 나이키(Nike)는 상징적인 스우시(swoosh)로 유명하다. 브랜드 친숙도는 신뢰와 구매 결정에 영향을 미칠 수 있으므로 스타일을 선택하고 고수해야 한다.

이메일 검증 도구의 다른 두 개의 페이지를 살펴보자. 보시다시피 페이지는 브랜드 스타일과 일치한다. 같은 회사에서 제작되었다는 것을 즉시 알 수 있다.

https://breadcrumbs.io/email-verification/#/
https://breadcrumbs.io/product/

두 페이지 모두 보라색의 힌트가 있는 굵은 노란색을 특징으로 하는 색 구성표가 있다. 디자인에는 흰색과 둥근 버튼이 있다. 누군가가 처음 방문하든 100회 방문하든 이 웹 사이트는 기억에 남고 전문적이며 신뢰할 수 있는 것으로 보인다.

대담한 색상 선택 외에도 Breadcrumbs는 웹 사이트 및 소셜 미디어 계정에서 브랜드 만화를 제공한다.

시간이 지남에 따라 반복적으로 볼 때 사용자는 이 테마를 이동 경로와 연결한다.

 

2. 단순성 유지

방문자가 랜딩 페이지에 도달하면 관심을 끌 수 있는 작은 창만 있다. 콘텐츠를 단순하게 유지하고 개성을 보여 주며 메시지를 명확하게 만든다.

랜딩 페이지는 브랜드에 익숙한 사람들과 처음 방문하는 사람들에게 의미가 있어야 한다.

이 블로그는 독자와 연결하고 그들이 기대하는 바를 제공하는 좋은 예다. Massimo Chieruzzi는 독자가 접근하기 쉽고 자신이 지식이 풍부하며 직설적이라는 것을 알기를 원한다.

https://divbyzero.io/

빠른 소개, 재치 있는 태그라인, 명확한 클릭 유도 문안이 있다. 방문자는 정보, 광고 또는 과중한 판매 홍보로 폭격을 받지 않는다.

 

3. 새로운 것을 일깨운다

방문자가 여러분의 사이트를 방문할 때, 그들이 아직 모르는 것을 새로운 것을 알게 해 주면 머무를 가능성이 더 크다. 여러분 해당 분야의 전문가임을 보여주기 때문에 지식을 공유하는 데 시간을 할애할 가치가 있다.

교육용 랜딩 페이지는 eBook, 온라인 과정 및 기타 리소스가 있는 사용자에게 특히 유용할 수 있다.

예를 들어, 이 페이지는 에지 컴퓨팅에 대해 배우고자 하는 모든 사이트 방문자에게 유용한 정보를 제공한다.

https://www.nlyte.com/faqs/edge-computing/

이 정보 페이지에는 관련 정보, 통계 및 견적이 포함되어 있다. Nlyte는 이 공간을 최대한 활용하여 잠재고객 생성 기회를 창출했다.

오른쪽에는 사용자가 무료 HDIM for Dummies eBook을 받기 위해 제출할 수 있는 양식이 있다. 이 eBook을 다운로드하려면 방문자는 이메일 마케팅, 전화 통화 및 DM에 동의해야 한다.

 

4. 모바일 친화적으로 만들기

미국에는 2억 4,700만 명 이상의 휴대폰 사용자가 있다. 웹 사용자의 50% 이상이 스마트폰을 통해 인터넷에 액세스 한다.

이것은 랜딩 페이지에 어떤 의미일까? 웹 페이지가 모바일 친화적이지 않으면 잠재 고객의 절반을 잃을 수 있다.

랜딩 페이지를 공유하기 전에 다양한 기기에서 명확하고 읽기 쉬운지 확인한다. 이미지는 선명하고 늘어나거나 픽셀화 되지 않아야 하며 부드럽게 스크롤할 수 있어야 한다.

https://www.adaoncloud.com/en/features/mobile-landing-page/

가입 양식을 작성하여 스마트폰과 컴퓨터에서 원활하게 작동하는지 확인하는 것을 잊지 말아야 한다.

 

5. 사용자 정의

목표는 전환하는 랜딩 페이지를 만드는 것이다. 랜딩 페이지에 대해 진지하게 생각하는 경우 자동화, 채팅 및 개인화된 양식으로 사용자 정의하는 것을 고려한다.

다양한 도구를 사용할 수 있지만 우리는 Active Campaign을 좋아한다. 랜딩 페이지를 간단하게 디자인할 수 있는 플랫폼이다.

사용자 정의 가능한 템플릿과 드래그 앤 드롭 인터페이스가 제공된다. 디자이너가 아닌 일반인도 전문적으로 보이는 것을 만들 수 있다.

https://www.activecampaign.com/landing-pages

독자에게 고유한 경험을 제공하기 위해 여러 랜딩 페이지를 만들고 후속 조치를 취하고 판매를 확보할 컨설턴트를 할당할 수 있다.

사용자가 도착하자마자 사용자의 의도에 대해 자세히 알아볼 수도 있다. 예를 들어, 회사에서 양초 및 양초 만들기 용품을 판매할 수 있다. 여러분의 광고 캠페인은 여러분의 지역에서 촛불을 검색하는 모든 사람을 대상으로 광범위할 수 있다.

랜딩 페이지에는 '초를 사고 싶다'와 '초를 만들고 싶다'라는 두 가지 옵션이 있을 수 있다.

그들이 선택한 옵션은 선호하는 쇼핑 카테고리로 연결된다.

양질의 리드와 높은 전환을 원하면 개인화의 힘을 과소평가하지 말아야 한다.

 

6. 이탈률 감소

방문자가 사이트를 둘러보고 탐색하도록 하려면 이탈률을 줄여야 한다. 그러나 어떻게 랜딩 페이지를 더 매력적으로 만들고 청중의 참여를 유지할 수 있을까?

HotJar와 같은 웹 사이트 추적 도구를 설치해 보길 바란다. 이를 통해 사용자의 행동에 대한 통찰력을 얻을 수 있다. 그런 다음 레이아웃을 살펴본다. 탐색이 쉬운가?

팝업 양식을 사용하는 경우, 디자인을 의식하고 랜딩 페이지가 어수선하지 않도록 한다. 반대로 사용자가 웹 사이트를 떠나려고 할 때만 팝업을 표시하기 위해 종료 의도 팝업 소프트웨어를 사용할 수도 있다.

이 페이지의 목표는 전환하는 것이다. 유익하면서도 단순하기를 원한다. 사용하는 모든 콘텐츠는 항상 관련이 있어야 한다.

Buzzsprout의 “ 팟 캐스트 시작 방법 ”랜딩 페이지는 정보에 부담을 주지 않고 액세스 할 수 있는 방법을 보여주는 좋은 예다.

https://www.buzzsprout.com/how-to-make-a-podcast

이 페이지는 교육용으로 설계되었으므로 많은 콘텐츠가 제공된다. 랜딩 페이지를 정리하기 위해 Buzzsprout은 페이지 상단에 편리한 북마크를 추가했다. 이렇게 하면 사용자가 관련 콘텐츠로 건너뛰어 이탈률을 줄일 수 있다.

독자는 원하는 정보를 찾기 위해 방대한 콘텐츠를 살펴볼 필요가 없다.

 

7. 페이지 속도 확인

인간으로서 우리의 인내심은 제한적이다. 방문 페이지를 로드하는 데 너무 오래 걸리면 방문자가 인내심을 잃고 브랜드가 존재했다는 사실을 잊게 된다.

Google에는 Google Analytics 및 PageSpeed를 포함한 제품군이 있다. 페이지가 예상보다 빠르지 않은 이유를 이해하는 데 도움이 될 수 있다.

https://unsplash.com/photos/hGV2TfOh0ns

그래픽을 최적화하면 페이지 속도에 영향을 미칠 수 있다. 예를 들어 파일 크기를 줄이고 PNG 및 GIF 대신 JPEG를 선택하면 페이지 로드 시간이 향상될 수 있다.

광고, 자동 재생 동영상 , 자바, 플래시 및 팝업도 방문 페이지를 느리게 만들 수 있다. 코드에 오류가 없는지 확인하고 성능과 보안을 개선하기 위해 모든 소프트웨어를 정기적으로 업데이트한다.

 

8. 연결하기 쉽게 만들기

모든 랜딩 페이지에는 명확한 목적이 있어야 하며 방문자는 방문한 이유를 이해해야 한다.

그리고 그들이 다음 단계를 밟기 쉬울 것이다. 예를 들어 소셜 미디어에서 브랜드를 팔로우하거나 이메일 목록에 가입하거나 매장에서 제품을 구매하기를 원할 수 있다.

좋은 랜딩 페이지는 방문자가 기대하는 바를 정확하게 제공해야 한다는 것을 알고 있다. 또한 쉽게 변환할 수 있어야 한다.

이제 Preply를 살펴보도록 하자. 온라인 이탈리아어 튜터용 랜딩 페이지는 양질의 랜딩 페이지가 어떤 모습이어야 하는지 보여주는 좋은 예다.

https://preply.com/en/online/italian-tutors

방문자가 도착하면 가장 먼저 볼 수 있는 것은 사용 가능한 교사 목록이다. 시작하려면 Facebook 또는 Google을 통해 빠른 가입만 하면 연락을 시작할 수 있다.

탐색은 매끄럽게 검색 창과 함께 교사와 강사에 초점을 맞췄다.

 

9. 구글 광고(Google Ads) 최적화

원하는 랜딩 페이지 유형에 따라 더 많은 방문자를 웹 사이트로 유도하는 수단으로 Google Ads(구글 광고)에 투자하는 것이 현명할 수 있다.

이것이 여러분이 생각하는 것이라면 랜딩 페이지를 최적화해야 할 수도 있다.

Google Ads의 랜딩 페이지를 최적화할 때, 최상의 디자인을 찾기 위해 성능 테스트를 실행해야 한다. 이는 다른 URL을 통해 광고를 실행하거나 Google 최적화 도구를 사용하거나 타사 플랫폼을 사용하여 수행할 수 있다.

https://ads.google.com/home/

이러한 도구는 콘텐츠를 개선하는 데 도움이 되며 포함해야 하는 키워드에 대한 통찰력을 제공한다.

사이트는 전문적으로 보여야 하며 제목은 Google Ads의 헤드라인과 유사해야 한다.

 

10. 전환 독려

관심이 있을 수 있지만 잠재 리드를 고객으로 전환하는 방법은 무엇일까? 수입을 창출하기 위해 제3자 회사와 협력하는 제휴 사이트라면 어떻게 해야 할까?

항상 투명해야 하며 독자를 혼동하지 말아야 한다. 그들은 여러분을 신뢰한다면 여러분의 파트너를 더 신뢰하게 될 것이다. 유익한 콘텐츠 또는 비교를 작성하고 가격, 약관 및 조건에 대해 미리 알려 주도록 한다.

다음은 Simple Money Lyfe의 예다. 최고의 신용 회복 회사에서 이 제휴 마케팅 랜딩 페이지의 목표는 고객이 파트너 사이트 중 하나에 등록하는 것이다.

https://simplemoneylyfe.com/best-credit-repair-companies/

이 페이지는 좋은 신용 회 회사를 찾는 사람들을 대상으로 한다. 그들은 서로 다른 브랜드를 나란히 비교하기 위해 리뷰를 사용했다. 각 목록 아래의 링크는 방문자를 회사의 가입 페이지로 직접 연결한다.

둥근 파란색 클릭 유도 문안 버튼은 텍스트를 나누고 쉽게 찾을 수 있다. 연구를 수행했음을 보여주는 로고, 통계 및 혜택을 포함했다.

 

11. 텍스트에 유의한다

방문자가 읽을 수 없으면 클릭하지 않는다.

랜딩 페이지는 웹 사이트의 나머지 부분과 동일한 규칙을 사용해야 하며, 읽기 쉬운 색상의 읽기 쉬운 폰트를 사용해야 한다.

산세리프(Sans-Serif) 서체를 고수하는 것이 좋다. 세리프(serif) 대안만큼 화려하지는 않지만 더 사용자 친화적이다.

산세리프는 무엇인가? 문자 그대로 추가 펜 스트로크가 없음을 의미한다. 미니멀하고 깨끗하며 현대적이다.

https://unsplash.com/photos/6Uf-1Ozbvho

산세리프 서체의 예로는 Arial, Montserrat, Roboto, Helvetica 및 Verdana가 있다. Google 문서에서 작업하는 경우 Google 문서에 폰트를 추가할 수도 있다.

주의해야 할 것은 서체만이 아니다. 너무 밝거나, 너무 어둡거나, 배경에 비해 너무 큰 텍스트는 독자의 관심을 끌지 못하게 할 수 있다. 정렬 상태를 확인하고 철자 또는 문법 오류가 없는지 확인해야 한다.

 

알아야 할 주요 랜딩 페이지 디자인 팁

최고의 디자인 팁으로 고품질 랜딩 페이지를 만들 준비를 하라. 집중해야 할 11가지 영역 목록을 제공하고 작동하는 랜딩 페이지의 예를 보여 주었다.

브랜드에 충실하고 일관된 테마를 사용하고, 간단하게 유지하고, 방문자에게 새로운 것을 가르치고 페이지가 모바일 친화적인지 테스트한다.

세분화로 랜딩 페이지를 사용자 정의하고 사용자 친화적인 디자인으로 이탈률을 줄인다. 페이지 속도를 확인하고 광고를 최적화하고 연결하기 쉽게 만든다.

변환을 권장하고 명확하고 선명하며 읽기 쉬운 sans serif 폰트를 사용하는 것을 잊지 말아야 한다.

이 간단한 팁을 사용하면 랜딩 페이지가 타겟 고객의 관심을 끌고 잠재고객 생성 또는 판매를 늘려 줄 가능성이 높아진다.

여러분은 무엇을 기다리고 있는가? 상황을 뒤섞어 랜딩 페이지를 다음 단계로 끌어올릴 때이다.

원문 링크. 11 Landing Page Design Tips You Should Follow Today

 

관련글 더보기

댓글 영역