첫인상의 94%가 디자인과 관련이 있습니다. 즉, 잠재고객이 혼란스러운 랜딩 페이지에서 여러분의 브랜드를 처음 접하게 되면, 관심을 잃고 떠날 가능성이 큽니다. 실제로 사용자 중 48%는 기업의 웹사이트 디자인을 신뢰도를 판단하는 가장 중요한 요소로 꼽았으며, 사람들은 단 0.05초 만에 그러한 판단을 내릴 수 있습니다.사실, 세계 최대 브랜드들 중 일부도 비효율적인 랜딩 페이지 디자인을 가지고 있습니다. 이러한 문제는 흔하지만, 타겟 고객에 대한 깊은 이해를 바탕으로 한 웹사이트 디자인을 통해 충분히 해결할 수 있습니다
효과적인 랜딩 페이지의 요소는 무엇인가요?
랜딩 페이지는 대개 비슷한 구조를 따르지만, 성과가 높은 페이지는 특정 요소에 특히 신경을 씁니다.
스크롤 없이 보이는 콘텐츠
스크롤 없이 보이는 영역을 '폴드(fold)'라고 하며, 이는 사용자가 사용하는 기기에 따라 다릅니다. 데스크탑, 태블릿, 모바일 기기 모두 모델에 따라 화면 크기가 다릅니다. 일반적으로 폴드는 브라우저 창의 상단에서 600픽셀 정도입니다.
랜딩 페이지 방문자 모두가 데스크탑이나 모바일 기기에서 페이지의 폴드를 넘겨 스크롤하지는 않습니다. 사실, 대부분의 사이트 방문자는 아예 페이지를 스크롤하지 않을 가능성이 높습니다.
페이지의 위아래를 디자인하는 것보다 사용자가 스크롤하지 않고도 볼 수 있는 모든 것을 포함한 정보 흐름에 집중하세요.
랜딩 페이지 문구
좋은 랜딩 페이지 문구는 페이지에 있는 단어들로 구성됩니다. 여기에는 제품 설명, 행동 유도 문구(CTA), 헤드라인, 메타 제목 및 설명이 포함됩니다. 문제 중심의 대담한 헤드라인으로 랜딩 페이지를 시작하세요.
랜딩 페이지 문구를 작성할 때 고객의 목소리를 고려하세요. 리뷰와 소셜 미디어를 분석하고, 대중이 사용하는 단어와 문구를 랜딩 페이지 문구 포함시키세요.
기능보다는 이점을 강조하는 것을 잊지 마세요. 예를 들어, 랜딩 페이지가 휴대폰 방수 케이스를 홍보하는 경우, IP 방수 등급 강조 시에 사람들이 수영 중에 사진을 찍을 수 있다는 점을 언급하세요.
마지막으로, 매력적인 광고 문구는 브랜드 목소리를 염두에 두고 작성되어야 합니다. 일관성이 핵심이며, 이는 타겟 프로모션과 캠페인에서도 마찬가지입니다.
이미지와 색상 조합
랜딩 페이지 디자인은 색상과 글꼴을 고려하고 이미지를 잘 배치할 수 있는 공간을 확보해야 합니다. 많은 사람들이 랜딩 페이지 문구로 시작한 다음 시각적 자산을 개발하여 두 요소의 시너지를 확보합니다. 이미지에는 제품 사진 외에 일러스트레이션과 동영상도 포함될 수 있다는 점을 기억하세요.
고객 리뷰
Smart Marketer의 창립자이자 BOOM! by Cindy Joseph의 CEO인 Ezra Firestone이 자신의 Shopify 스토어에서 구매 박스에 추가한 가장 작은 변화 중 하나는 아이템 이름 대신 고객 리뷰를 박스 상단에 배치한 것입니다.
다음은 그 예시입니다.
상단에 인용문을 포함하면 신뢰를 구축하고, 사람들이 리뷰를 찾는 데 시간을 낭비하지 않으며, 고객이 직접 여러분을 대신해 말할 수 있게 합니다. 각 제품이 해결하는 이점이나 문제점에 직접적으로 언급하는 인용문을 선택하세요.
또한, 고객 리뷰 전용 섹션을 포함하여 쇼핑객이 실제로 제품을 구매한 사람들의 리뷰를 읽을 수 있도록 하세요. 사람들이 좋아하는 점과 그렇지 않은 점을 완전히 이해할 수 있도록 평점이 낮은 리뷰와 중간 정도인 리뷰도 몇 가지 보여주세요.
행동 유도 문구(CTA)
모든 랜딩 페이지가 효과가 있으려면 행동 유도 문구(CTA)가 필요합니다. CTA는 사용자가 원하는 행동을 취하도록 유도해야 합니다. 랜딩 페이지에 따라 CTA는 "자세히 알아보기", "지금 구매하기", "구독하기"와 같은 문구일 수 있습니다. 관련이 있다면 행동 유도 문구에 가격 정보를 포함할 수도 있습니다.
CTA 배치는 잠재고객이 무엇을 필요로 하는지에 따라 달라집니다. 더 나은 전환율을 유도하는 배치를 테스트하여 결정하세요. 일반적으로, 랜딩 페이지의 길이에 따라 폴드 위와 페이지 전반에 걸쳐 CTA를 배치하는 것이 좋습니다.
랜딩 페이지 디자인 예시 20가지
- Brightland
- Olipop
- Path
- LUSH Cosmetics
- Netflix
- Grind
- Creatorpreneur Academy
- Jolie
- Ahrefs
- Tabs
- Peepers
- ConvertKit
- Jones Road Beauty
- BEAM Content
- Basecamp
- Maev
- Money with Katie
- Creator Wizard
- Descript
- Shopify POS
1. Brightland
뉴스 매체에 소개된 적이 있나요? 그런 로고를 랜딩 페이지에 배치하고 기사에서 인용한 내용을 포함하는 것은 Sharma Brands의 CEO인 Nik Sharma가 "브랑 바(Brag Bar)"라고 부르는 것입니다. 이러한 매체는 브랜드에 신뢰성을 더하며, 이를 언급하는 것은 더 많은 정보를 찾는 쇼핑객에게 큰 도움이 됩니다. 예를 들어, Brightland는 캘리포니아의 엑스트라 버진 올리브 오일을 판매합니다. 이 업체는 뉴욕 타임스와 월스트리트 저널과 같은 매체로부터 긍정적인 평가를 받았으며, 이를 랜딩 페이지 디자인에 활용합니다.
2. Olipop
Olipop는 식물성 성분과 프리바이오틱스가 가득한 건강한 탄산음료를 판매합니다. 이 브랜드는 이점을 중점적으로 홍보하는 문구를 사용하여 반대 의견("그런데 이 탄산음료에 설탕이 얼마나 들어있나요?")에 직접 대응하고 탄산음료를 끊을 방법을 찾는 열렬한 탄산음료 마니아들에게 갈증을 해소하는 음료로 포지셔닝합니다.
명확하고 대담한 텍스트, 상세한 제품 정보(스크롤하여 볼 수 있음), 실제 리뷰 수가 포함된 별점, 페이지를 지배하지 않는 작은 헤더, 직관적이고 탐색하기 쉬운 레이아웃, 훌륭한 제품 사진과 같은 다른 랜딩 페이지 아이디어를 참고할 수 있습니다.
3. Path
Path는 Shopify 스토어를 운영하는 가상 사진 편집 스튜디오입니다. 이 스토어의 핵심 서비스는 제품 사진 편집입니다. 이들은 잠재 고객과 연결하고 마케팅하기 위해 이메일을 사용하는 채널 중 하나입니다. Path는 이메일 뉴스레터 가입을 유도하기 위한 전용 랜딩 페이지를 가지고 있습니다.
이 페이지는 목표인 구독 유도에 명확하게 집중하며, 그 목표를 방해하는 요소가 거의 없습니다. 이 페이지는 회사 웹사이트에서 쉽게 접근할 수 없지만, 뉴스레터 가입을 홍보하는 타겟 캠페인을 통해 이 랜딩 페이지로 유도할 수 있습니다.
4. LUSH Cosmetics
인증은 소비자의 구매 결정에 큰 영향을 미치며, 일부는 인증 없이는 구매하지 않습니다. Leaping Bunny, 비유전자 변형(non-GMO), B Corp 인증 등이 그 예시입니다. 인증을 받은 경우, 이를 랜딩 페이지에 표시하세요.
LUSH Cosmetics는 랜딩 페이지 디자인에서 이 접근 방식을 취합니다. 이 업체의 “플라스틱 프리” 페이지 하단에서 고객은 브랜드의 핵심 가치를 볼 수 있습니다. 이를 통해 제품이 100% 채식주의자, 수제, 동물 실험을 하지 않는다는 등의 브랜드의 핵심 가치를 고객에게 전달합니다.
5. 넷플릭스
넷플릭스는 구독 산업의 선구자로 꼽힙니다. 190개국 이상에서 2억 6천만 명 이상의 유료 구독자를 보유하고 있으며, 사람들을 구독하도록 설득하는 랜딩 페이지 디자인에 대한 노하우가 있습니다.
넷플릭스의 기프트 카드 랜딩 페이지 디자인을 예로 들어보겠습니다. 여기에는 두 가지 간단한 행동 유도 문구가 있습니다(넷플릭스에서 카드 구매 또는 아마존에서 구매)와 기프트 카드 작동 방식에 대한 간단한 설명이 포함되어 있습니다. 짧고 간결하여 고객이 구매하기 전에 알아야 할 모든 정보를 제공합니다.
6. Grind
Grind는 온라인 스토어와 커피 전문점을 통해 판매되는 커피 브랜드입니다. 이들은 지속 가능성에 대한 모든 것을 이야기하는 랜딩 페이지를 가지고 있습니다. 이는 브랜드의 핵심 가치이자 차별화 요소입니다.
이 랜딩 페이지 디자인의 특히 훌륭한 점은 시각적 요소의 사용 방법입니다. 폴드 바로 위에 스크롤 바가 있으며, 사람들이 가장 관심 있는 섹션으로 탐색할 수 있도록 색상 코드가 있는 버튼이 있습니다. "우리는 커피에 진심입니다" 와 같은 매력적인 부제목이 눈길을 끕니다.
7. Creatorpreneur Academy
디지털 제품은 고가일 수 있으며, 사람들은 구매를 결심하기 전에 많은 정보를 필요로 합니다.. Ali Abdaal는 이를 고려한 이상적인 랜딩 페이지를 디자인했습니다. 방문자에게 부담스럽지 않은 방식으로 필요한 정보를 제공합니다.
이 랜딩 페이지를 방문하면 가장 먼저 보이는 것은 헤드라인입니다: “당신의 창의적인 부업을 다음 단계로 확장하세요.” 이는 대상 고객과 공감할 수 있는 과제와 목표를 제시합니다. 텍스트를 읽지 않고도 과정에 대해 더 알고 싶다면, 더 자세한 설명을 제공하는 유튜브 비디오 링크를 클릭할 수 있습니다.
8. Jolie
랜딩 페이지의 주요 목표는 잠재고객이 행동을 완료하도록 하는 것입니다. 전자상거래의 경우, 랜딩 페이지 디자인이 판매하는 제품의 기능과 이점에만 집중해야 하는 것은 아닙니다.
샤워 필터 시스템을 판매하는 소비자 직접 판매 브랜드인 Jolie를 예로 들어 보겠습니다.
Jolie는 물 보고서를 위한 랜딩 페이지를 구축했습니다. 이를 통해 사람들은 물에 어떤 화학 물질이 포함되어 있는지 확인할 수 있습니다.
이 페이지는 특정 화학 물질의 위험성과 그것이 사람의 피부와 머리에 미치는 영향을 설명합니다. 사람들이 이 정보를 접하면, 문제의 긴급성과 시급성을 느끼고 이메일 가입 양식을 통해 보고서를 작성할 가능성이 높아집니다.
9. Ahrefs
전문적인 디자인 기술이 없어도 전환율이 높은 랜딩 페이지를 맞춤 설정할 수 있습니다. 각 주요 기능과 사용 사례에 대한 랜딩 페이지가 있는 SEO 도구인 Ahrefs를 예로 들어 보겠습니다.
키워드 조사 기능을 위한 랜딩 페이지 디자인에는 핵심 사항을 텍스트 블록으로 구분하는 작은 그래픽이 있습니다. 또한 줄 바꿈에 작은 Ahrefs 로고가 있어 정식 버전을 삽입하지 않고도 브랜드 일관성과 로고 인지도를 강화할 수 있는 현명한 방법입니다.
10. Tabs
Tabs의 성분 페이지는 랜딩 페이지 디자인에 사회적 증거를 통합하는 방법의 마스터 클래스입니다.단색 디자인과 대비되는 분홍색 알림 표시줄을 통해 환불 보장, 수천 개의 별 5개 리뷰, 20만 명 이상의 만족스러운 고객을 어떻게 제공하는지 보여줍니다.
또한 메인 CTA 버튼 아래에 별 다섯 개짜리 리뷰 섹션을 배치하여 초콜릿을 구매하면 좋은 평가를 받을 수 있다는 점을 강조합니다. 이 배치는 전략적으로 배치한 것으로, 사용자가 CTA 버튼을 클릭하기 전에 마지막으로 보게 될 가능성이 높습니다.
11. Peepers
랜딩 페이지 디자인에 통합할 수 있는 제품 설명은 제품이 실제로 무엇인지 즉시 전달하는 간결한 광고 문구입니다. 페이지 아래에 더 많은 공간을 확보하여 고객의 구매 완료를 방해할 수 있는 이의 제기에 직접 대응할 수 있는 세부 정보를 제공할 수 있습니다.
안경 브랜드 Peepers는 이 전략을 사용합니다. 폴드 위에는 다양한 제품 이미지가 있으며, 아래에는 Peepers 렌즈를 선택하는 이점을 나열한 세부 정보와 설명이 있습니다.
12. ConvertKit
랜딩 페이지에서 보색을 적게 사용하는 것이 모범 사례이지만, ConvertKit는 스타일 가이드에서 너무 멀리 벗어나지 않으면서도 색조와 음영을 사용하여 더 많은 차이를 얻을 수 있는 방법을 보여줍니다.
이 랜딩 페이지 디자인의 장점은 여백의 활용입니다. 부제목 위의 섹션을 비워두는 대신 ConvertKit의 디자이너는 방문자가 볼 수 있는 손글씨 메모를 추가했습니다. 이는 마이크로카피를 스마트하게 활용하는 방법이며, 랜딩 페이지 방문자에게 브랜드의 개성을 전달하는 디자인 영감을 제공합니다.
13. Jones Road Beauty
일부 뷰티 브랜드는 온라인에서 화장품을 판매할 때 반품에 어려움을 겪습니다. 화면에서 제품 색상이 실제와 다르게 보이기 때문입니다. Jones Road Beauty는 사람들이 올바른 색상을 찾을 수 있도록 돕는 퀴즈를 통해 이 문제를 해결합니다.
Jones Road Beauty의 퀴즈 랜딩 페이지 디자인은 간단하고 직관적입니다. CTA를 하나만 포함하는 것은 모범 사례에 어긋나지만, 퀴즈의 종류와 사용 방법, 응시 방법을 설명하는 데는 매우 효과적입니다. 퀴즈 소제목 아래에 작은 별점도 표시하여 퀴즈가 색조 불일치 문제를 잘 해결하고 있음을 강조합니다.
14. BEAM Content
광고 문구가 브랜드에 부합해야 하는 것처럼 이미지, 글꼴, 색상도 브랜드에 부합해야 합니다. 랜딩 페이지 디자인에 창의성을 발휘할 수 있는 여지가 더 많지만, 모든 접점에서 일관된 브랜드 경험을 제공하는 것이 여전히 중요합니다.
BEAM Content는 영감을 얻기 좋은 랜딩 페이지 예시입니다. 이 에이전시는 그래픽 요소와 일치하는 세련된 색상 팔레트를 사용합니다. 글꼴 선택은 간단하고 우아하며, 마이크로카피에 손으로 쓴 글꼴을 사용하여 중요한 광고 문구에 주목을 끌고 합니다. 이 랜딩 페이지의 주요 서비스인 "브랜드 소셜"과 같은 문구가 그 예입니다.
15. Basecamp
추천글은 모든 랜딩 페이지 디자인의 중요한 부분입니다. 한 연구에 따르면, 고가 제품에 대한 리뷰를 보여주는 페이지는 전환율이 최대 380%까지 증가할 수 있다고 합니다.
추천글의 문제는 누군가가 한 말을 변경할 수 없다는 것입니다. 다른 사람의 말을 줄이거나 왜곡하는 것은 나쁜 관행입니다. 그러나 Basecamp는 가장 강력한 추천글의 일부를 강조하여 눈에 띄게 만드는 방법을 보여줍니다.
16. Maev
Maev는 시각적으로 보기 쉬운 방식으로 많은 정보를 제공해야 할 때 랜딩 페이지에 영감을 주는 방법을 잘 보여주는 좋은 예입니다.
이 소매업체는 반려견 사료의 성분을 단순히 나열하는 대신 이미지를 활용했습니다. 이를 통해 소비자가 블루베리나 케일 같은 성분을 즉시 알아볼 수 있어, 온라인에서 반려동물 사료를 구매할 때 흔히 겪는 문제인 "내 반려견이 무엇을 먹는가?”라는 문제를 시각적으로 정확히 해결합니다.
17. Money with Katie
뉴스레터 랜딩 페이지의 목표는 명확합니다. 바로 잠재고객이 이메일 목록에 가입하도록 만드는 것입니다. Money with Katie는 전체 랜딩 페이지 디자인에 투자하지 않고도 이를 완벽하게 실행하고 있습니다.
Money with Katie의 전체 랜딩 페이지는 스크롤 위로 보이는 부분만 표시됩니다. 스크롤할 필요도 없고 너무 많은 정보로 방문자를 부담스럽게 할 필요도 없습니다. 헤드라인은 고객이 무엇을 얻을 수 있는지 정확히 약속하고, 사진은 고객이 무엇에 가입하는지를 보여줍니다. 방문자가 해야 할 일은 구독 양식을 작성하는 것뿐입니다.
18. Creator Wizard
Justin Moore는 디지털 제품을 판매하는 스폰서십 코치입니다. Gifted to Paid는 크리에이터가 스폰서십 계약을 확보하고 온라인 콘텐츠에서 수익을 창출하는 방법을 안내하는 프리미엄 온라인 과정입니다.
Gifted to Paid는 이 두 가지 목표를 랜딩 페이지 전반에 걸쳐 다룹니다. 이 섹션은 방문자에게 과정의 튜토리얼에 대한 정보를 제공합니다. 머릿속에 한 번에 들어가기에는 정보의 양이 많아, Justin은 중요한 텍스트를 강조하고 GIF를 사용하여 이해를 돕는 스마트한 디자인 선택을 했습니다.
19. Descript
헤드라인은 랜딩 페이지에서 더 많은 공간을 차지하므로 디자인할 때 집중해야 할 중요한 요소입니다. 예를 들어, Descript의 랜딩 페이지의 헤드라인은 스마트하며 전환을 유도하는 데 방해가 될 수 있는 장애물을 미묘하게 해결합니다. 즉, 비용은 얼마인가요? 그리고 “무료” 요금제에는 실제로 무엇이 포함되어 있나요? 이러한 정보를 직관적으로 제공합니다.
가격 변수가 너무 많기 때문에 사람들이 동영상 편집 소프트웨어의 비용을 파악하는 데 도움이 되는 대화형 가격 계산기도 있습니다. 정적인 콘텐츠보다 훨씬 더 매력적이며 브랜드가 규모에 맞게 개인화할 수 있도록 도와줍니다.
20. Shopify POS
Shopify 디자이너는 판매 시점(POS) 랜딩 페이지를 구축하는 어려운 작업을 수행했습니다. 여기에는 다음과 같은 세 가지 다른 CTA를 모두 충족해야 했습니다.
- 무료 체험 시작하기
- 영업팀과 대화하기
- 기존 Shopify POS 계정에 로그인하기
버튼 색상은 여기서 큰 차이를 만듭니다. 고대비 버튼(어두운 배경에 흰색 텍스트)은 무채색 디자인에서 가장 눈에 띄기 때문에 가장 선호되고 가장 중요한 CTA인 무료 체험 시작을 위한 옵션이 되었습니다.
영업팀과 대화하기에는 동일한 크기의 버튼 상자에 반대 색상을 적용했습니다. 세 번째이자 가장 중요도가 낮은 것은 각 버튼 아래에 링크된 작은 텍스트 스니펫입니다.
랜딩 페이지 디자인 모범 사례
잠재 고객의 관심을 끌었다면 이제 몇 초 동안 브랜드와 제품의 고유한 특징을 공유해야 합니다. 몇 개의 단어나 이미지로 이를 전달하기란 꽤 어려운 일이며, 잠재 고객이 브랜드에 대한 배경 지식이 거의 없는 경우에는 더욱 어렵습니다
성과는 여러 요인에 따라 달라지겠지만, 전반적으로 랜딩 페이지 디자인을 간결하게 유지하면 사람들이 가장 중요하게 전달하고 싶은 정보로 유도할 수 있습니다. 만약 다른 것은 전혀 기억하지 못한다면, 여러분이 꼭 전달하고 싶은 핵심 메시지는 무엇인가요?
- 정보 흐름 고려하기
- 전환율을 최적화하는 바이 박스
- 시각적 요소에 집중하기
- 반응형 디자인 사용하기
- 반응형 디자인 사용하기
- 랜딩 페이지 디자인 테스트하기
- 사용자 경험(UX) 조사를 우선적으로 고려하기
1. 정보 흐름 고려하기
고객에게 가장 잘 맞는 것이 무엇이든, 랜딩 페이지의 상단에 어떤 문구와 콘텐츠를 배치할지 신중하게 고려해야 합니다. 하지만 첫 화면에 콘텐츠를 너무 많이 넣으려고 하면 오히려 역효과가 발생하여 사용자가 혼란스러워할 수도 있습니다.
“마케터는 ‘폴드 위’에 대한 생각보다는 랜딩 페이지의 전체 정보 계층 구조와 콘텐츠 흐름을 더 많이 고려해야 합니다.”라고 CRO 컨설턴트 Michael Aagaard가 말합니다.
랜딩 페이지를 구축할 때 다음 질문을 생각해 보세요. 답은 타겟 고객의 전반적인 사용자 여정과 랜딩 페이지의 역할에 대한 이해에 따라 달라집니다.
- 올바른 질문에 답하고 연관 있는 문제를 해결하고 있나요?
- 기대치를 관리하고 광고 내용에서 “약속”한 사항을 지키고 있나요?
- 콘텐츠를 올바른 순서로 전달하고 전환 목표를 향한 모멘텀을 구축하고 있나요??
2. 전환율을 최적화하는 바이 박스
바이 박스(buy-box)는 각 랜딩 페이지의 작은 섹션이지만, 큰 영향을 미쳐야 합니다. Ezra는 이를 제품 랜딩 페이지에서 가장 중요한 부분이라고 부릅니다. 이는 말 그대로 페이지 위에 표시되는 상자로, 구매 버튼을 포함한 구매 전환 유도 내용을 최적화한 것입니다.
일반적으로 데스크탑에서 볼 때, 바이 박스에는 왼쪽에 제품 사진이 있는 이미지 캐러셀과 오른쪽에 요약, 판매 문구, 가격, 리뷰 별점, 구매 버튼 또는 Shop Pay 버튼, 버튼 아래에 고유한 판매 제안 내용이 포함됩니다.
“대부분의 기업은 바이 박스에 판매 문구와 사회적 증거 내용이 없으며, 고유한 판매 제안과 이미지 형식이 ‘장바구니에 추가’ 버튼 아래에 없습니다. 또한 제품 캐러셀은 보기 좋지 않은 이미지를 특징으로 합니다. 바이 박스는 그 무엇보다 중요한 요소입니다.”라고 Ezra는 말합니다.
광고 문구와 이미지가 빛날 수 있도록 공간을 만드는 몇 가지 템플릿 요소가 있습니다. 고도로 최적화된 바이 박스는 Ezra가 “구매 전환율을 높이기 위한 정보 배치”라고 부르는 것을 포함합니다. 데스크탑에서 어떻게 보이는지 아래 예를 참고하세요.
3. 시각적 요소에 집중하기
제품의 이미지는 잠재 구매자가 원하는 행동을 완료할 때 고려하는 유일한 요소일 가능성이 높습니다. 랜딩 페이지 디자인의 정보를 다음과 같은 다른 요소로 나누세요.
- 글머리 기호 또는 번호 매기기 목록
- 로고나 그래픽
- 이미지
- CTA 버튼
- 리뷰
- 동영상 추천 후기
전자상거래의 경우, 이미지는 구매자가 물건을 직접 만져보지 않고도 제품을 상상하는 방법입니다. 여러분의 제품 사진에 제품의 멋진 모습을 제대로 담지 못한다면, 고객이 구매를 결정하기가 쉽지 않습니다.
4. 반응형 디자인 사용하기
랜딩 페이지를 노트북이나 컴퓨터 화면에 맞춰 디자인하고 있을 가능성이 높지만, 실제로는 모든 사람이 데스크탑에서 랜딩 페이지에 방문하지 않습니다. 전체 인터넷 트래픽의 절반 정도가 모바일 기기에서 발생합니다. 반응형 디자인은 랜딩 페이지를 모든 기기에 적합하게 만듭니다.
웹사이트 빌더를 사용하여 이미지 캐러셀과 CTA가 데스크탑과 모바일에서 어떻게 렌더링되는지 확인하여 최적화되었는지 확인하세요. 반응형 웹사이트 디자인에 대한 다른 팁은 다음과 같습니다.
- 접이식 메뉴 사용하기
- 더 원활한 경험을 보장하기 위해 작은 세부 사항 다듬기
- 로딩 시간을 단축을 위한 TinyPNG와 같은 이미지 압축기로 이미지 크기 줄이기
- 동영상 자동 재생 피하기
- 누르기 쉬운 큰 버튼 사용하기
5. 트래픽 및 기기 출처 분석하기
고객이 쇼핑하는 기기를 기반으로 랜딩 페이지를 디자인하는 것은 전환율 조사를 시작하는 한 가지 방법입니다.
대부분의 고객이 모바일 기기를 통해 웹사이트를 방문하는 경우 훌륭한 모바일 경험을 위해 랜딩 페이지를 최적화하는 것이 좋습니다. 또는 쇼핑객이 데스크톱을 선호한다는 사실을 파악하면 데스크톱 환경을 개선하는 랜딩 페이지를 구축하는 것이 좋습니다.
Sharma Brands의 Nik SharmaNik Sharma는 사람들이 어떤 플랫폼에서 유입되었는지(TikTok, Facebook, 블로그 게시물 또는 다른 채널 등)를 이해하기 위해 해당 트래픽을 더욱 자세히 살펴볼 것을 권장합니다. “페이지가 제공된 플랫폼과 맥락을 같이하지 않으면 이탈률이 급증하고 전체 플랫폼 광고 지출 대비 수익률은 계속 낮게 됩니다.”라고 그는 말합니다.
6. 랜딩 페이지 디자인 테스트하기
랜딩 페이지를 라이브로 만들고 사이트에 의미 있는 트래픽이 유입되면, 랜딩 페이지 디자인의 다양한 부분을 분할 테스트하여 어디서 전환율이 가장 높은지 확인할 수 있습니다.
분할 테스트를 통해 단순히 가장 실적이 좋은 태그 라인이나 CTA 배치를 찾는 것만이 아닙니다. Speero의 전무 이사인 Ben은 다음과 같이 말합니다. “테스트는 의견을 증명하기 위한 것이 아니라 전략에 도전하거나 고객 문제 또는 비즈니스 기회와 직결된 가설을 테스트하는 데 목적이 있습니다.”
그는 테스트가 비즈니스 성장 모델과 관련된 요소에 비례해야 한다고 말합니다. 더 많은 고객을 확보하고 싶거나 Instagram을 수익화하거나 기존 고객을 유지하고 싶다면, 랜딩 페이지 경험과 테스트 가설이 그에 따라 변경되어야 합니다.
7. 사용자 경험(UX) 조사를 우선적으로 고려하기
본 블로그에 소개된 랜딩 페이지 디자인 팁은 전문가들이 테스트하고 반복하여 성공한 것입니다. 그러나 이러한 디자인 요소를 구현할 때, 전체 목표와의 연관성을 이해하지 못한 상태에서 디자인 작업을 하는 것을 주의해야 합니다.
대상 고객의 니즈를 파악하는 것은 전환율이 높은 랜딩 페이지를 구축하는 기반입니다.
“대상 고객을 더 잘 이해할수록 더 나은 랜딩 페이지를 구축할 수 있습니다. 최신 디자인 트렌드에 눈이 멀지 마세요.”라고 Michael이 말합니다. “대신 모든 기본 사항을 정리하고 심층 사용자 조사를 수행하여 행동에 영향을 미치는 정보에 입각한 결정을 내리도록 하세요. 단순히 페이지 레이아웃을 조정하는 것이 아닙니다.”
아름다운 랜딩 페이지 디자인 구축하기
Shopify는 랜딩 페이지 디자인을 시작하는 데 필요한 모든 도구, 앱, 통합 및 테마를 제공합니다. 처음부터 시작하거나 템플릿으로 여러분의 독특한 브랜드에 맞게 사용자 정의하고 어디서나 모든 것을 관리하세요.
또한 수천 개의 Shopify 앱을 탐색하여 랜딩 페이지 기능과 기능을 추가하여 전환율을 높이고 투자 효과를 극대화할 수 있습니다.
랜딩 페이지 디자인 FAQ
랜딩 페이지 디자인이란 무엇인가요?
랜딩 페이지 디자인은 새로운 고객을 전환하고 반복 구매를 유도하기 위해 최적화된 웹페이지를 구성하는 시각적 및 문자 요소로 구성됩니다. 시각적 레이아웃의 간결성, 이점 중심의 광고 문구, 고품질 제품 이미지는 매력적인 랜딩 페이지 디자인을 위한 세 가지 핵심 요소입니다.
랜딩 페이지를 어떻게 만드나요?
- 랜딩 페이지를 만들기 위해 Shopify와 같은 플랫폼을 선택합니다.
- 헤드라인, 행동 유도 문구 및 필요한 다른 요소로 페이지를 디자인합니다.
- 효과적인 헤드라인을 사용합니다. 헤드라인은 간결하고 눈에 띄어야 합니다.
- 이미지, 비디오 및 추천글과 같은 콘텐츠를 페이지에 추가합니다.
- 키워드 및 기타 SEO 모범 사례를 사용하여 랜딩 페이지가 검색 엔진에 노출될 수 있도록 합니다.
- 랜딩 페이지를 테스트하고 결과에 따라 개선합니다.
랜딩 페이지는 어떤 요소로 구성되어야 하나요?
랜딩 페이지는 일반적으로 헤드라인, 간단한 소개, 행동 유도 문구, 방문자가 연락처 정보를 제공할 수 있는 양식으로 구성됩니다. 동영상, 이미지, 고객 추천글, 사회적 증거 및 제품 데모와 같은 추가 요소도 포함될 수 있습니다.
랜딩 페이지 디자인이 전환율에 미치는 영향은 무엇인가요?
랜딩 페이지의 평균 전환율은 5.89%이지만, 랜딩 페이지 디자인은 여러분의 전환율이 이 기준에 얼마나 가까운지에 영향을 미칠 수 있습니다. 최고의 랜딩 페이지 디자인은 반응형이며, 시각적 요소를 사용하여 텍스트를 나누고, 분할 테스트를 통해 최상의 결과를 얻을 수 있습니다.
랜딩 페이지 디자인을 분할 테스트해야 하나요?
분할 테스트는 랜딩 페이지 디자인의 두 가지 버전을 생성하고(한 번에 하나씩 조금씩 변경해 나감), 어떤 것이 가장 높은 전환율을 보이는지 모니터링하는 것을 의미합니다. 이는 다른 랜딩 페이지를 디자인하는 방법에 대한 데이터 기반 결정을 내리는 데 도움이 됩니다.
