매력적인 홈페이지는 어떻게 만들까요?

방문자를 고객으로 전환하는 홈페이지(랜딩 페이지)를 작성하고 디자인하는 방법에 대해 설명합니다.

먼저 세 가지 일반적인 랜딩 페이지를 파악하는 것부터 시작하겠습니다:

• 홈페이지 모든 방문자를 위한 종합 안내 페이지입니다.

• 페르소나 랜딩 페이지 특정 페르소나(대상)에 맞춤화된 페이지입니다.

• 제품 페이지 제품의 작동 방식을 안내하는 페이지입니다.

이러한 페이지는 다음 템플릿을 사용하여 동일하게 구성할 수 있습니다. 일반적으로 템플릿에서 벗어날수록 일반 방문자는 더 많은 혼란을 겪게 됩니다.

방문자의 구매 가능성 관점에서 랜딩 페이지를 생각하세요:

구매율 = 욕구 - (노동력 + 혼란)

방문자의 구매율을 높이려면 방문자의 수고와 혼란을 줄이면서 방문자의 구매 욕구를 높여야 합니다:

• 구매 욕구를 높이기 얼마나 많은 가치를 제공하는지 보여줌으로써 방문자의 관심을 유도하고, 흥미를 유발합니다.

• 방문자의 피로도를 줄이기 방문자가 피곤하거나 짜증을 내지 않도록 방문자가 해야하는 작업을 줄이세요. 간결하게 작성하고 모든 단어와 요소가 가치가 있는지 확인 하세요.

• 혼란 감소 모호하거나 장황한 메시지로 방문자를 혼란스럽게 하지 마세요. 모든 문장을 쉽게 이해할 수 있도록 하세요. 그리고 방문자가 다음에 취해야 할 행동(예: 가입 또는 구매)을 명확히 알 수 있도록 하세요. 그리고 액션 요소(예: 버튼)를 놓칠 수 없도록 하세요.

다음은 우리가 사용할 일반적인 구조입니다:

1. 탐색 모음: 페이지 상단 - 로고와 탐색 링크가 있는 곳입니다.

2. 히어로: 헤더 텍스트, 하위 헤더 텍스트, 매력적인 이미지가 포함된 페이지 상단의 기본 섹션입니다.

3. 사회적 증거: 언론 보도 또는 잘 알려진 고객의 로고.

4. 콜투액션(CTA): 가입 버튼과 이를 클릭하도록 유도하는 간결한 인센티브입니다.

5. 특징 및 이의 제기: 핵심 가치 제안을 완벽하게 작성합니다.

6. 콜투액션 반복하기

7. 바닥글: 기타 링크.

여기에 시각화되어 있습니다:

이러한 요소를 하나씩 살펴보겠습니다.

요소 - 히어로

'히어로'는 방문자가 스크롤을 내리기 전에 가장 먼저 보게 되는 페이지 상단의 큰 섹션을 가리키는 전문 용어입니다.

스크롤을 내리기 전에 방문자가 가장 먼저 보게 되는 부분을 가리킵니다.

히어로 섹션,

1.헤더 텍스트, 2. 하위 서브 텍스트, 그리고 3. 이미지로 구성됩니다.

이 각각 요소에 대해 많은 고민을 해야 합니다.

헤더 카피는 사람들이 계속 스크롤하여 읽을지 여부에 가장 큰 영향을 미칩니다.

고객의 집중 시간(Consideration spans)이 짧기 때문에 빠르게 관심을 끌어야 합니다.

혹시 난 랜딩페이지가 길어질거 같은데? 라고 긴 홈페이지를 작성하는 것에 대해 걱정할 필요는 없어요. 하지만 여러분의 히어로 섹션은 고객에게 최대한 매력적으로 느껴야 합니다.

히어로 - 헤더 텍스트

헤더는 판매 제품에 대해 충분히 설명해야 합니다. 방문자가 방문 즉시 무엇을 판매 하는지 정확히 이해하지 못하면 지루함으로 인해 이탈하거나 페이지의 나머지 부분을 대충 읽고 부정적인 느낌을 받을 위험이 있기 때문입니다.

다음은 헤더가 충분히 설명적인지 확인하는 리트머스 테스트입니다:

방문자가 페이지에서 이 텍스트만 읽으면 무엇을 판매하는지 정확히 알 수 있어야 합니다.

웹에서 흔히 볼 수 있는 나쁜 헤더는 설명이 아닌 슬로건처럼 읽히는 헤더입니다. 예를 들어, "워크플로우를 개선하세요!" 또는 "협업을 강화하세요!"와 같은 문구는 쓸모가 없습니다. 페이지에서 그런 문구만 읽었다면 제품이 실제로 어떤 것인지 전혀 알 수 없습니다. 그리고 아마 떠날 겁니다.

설명이 잘 된 좋은 헤더는 어떤 모습일까요? 다음과 같습니다:

• 웹사이트 디자인 도구의 경우 "처음부터 사이트를 디자인하고 개발하세요. 코딩이 필요 없습니다."

• 식료품 배달 서비스의 경우 "1시간 안에 식료품을 배달합니다. 교통체증, 주차, 긴 줄과는 이제 이별이죠."

• 주택 임대 서비스의 경우 "다른 사람의 집을 빌려보세요. 진정한 현지인처럼 도시를 경험할 수 있습니다."

이러한 정보는 판매자가 판매하는 제품을 이해하는 데 도움이 됩니다. 또한 판매자가 판매하는 제품을 실제로 원하는 사람이라는 것을 즉시 알 수 있으므로 인내심을 갖고 사이트의 나머지 부분을 읽어 자세한 내용을 파악할 수 있습니다.

몇 가지 예를 더 살펴보겠습니다.

왼쪽에는 잘못된 헤더가 있습니다. 무엇이 올바른 예시를 더 좋게 만드는지 주목하세요.

올바른 것이 더 나은 이유는 다음과 같습니다:

• 더 이상 회사에서 하는 말처럼 들리지 않습니다.

• 제품의 구체적인 이점을 설명합니다.

다시 말하지만, 올바른 것이 더 나은 이유는 다음과 같습니다:

• 더 이상 모호한 문구를 사용하지 않습니다.

• 제품의 구체적인 이점을 설명합니다.

또 다른 예:

올바른 것이 더 나은 이유는 다음과 같습니다:

• 자기자랑이나 자신감을 표현하는 용어로 이야기하는 것은 좋지 않습니다. 방문자에게 주는 혜택을 중심으로 이야기합니다.

• 제품 사용의 구체적인 결과가 명확해야 합니다.

• 이러한 개선 사례의 공통점은 구체성이 높아졌다는 점입니다.

• 구체성은 강력한 헤더 작성을 위한 첫 번째 단계입니다.

헤더 작성 프로세스

헤더 및 하위 헤더 텍스트를 작성하려면 두 단계를 따릅니다:

1. 사용자가 제품에서 가치를 얻는 방법 파악

2. 계속 읽도록 유도하는 후크 추가

1 사용자가 가치를 얻는 방법 파악

가치 소품(Value props)은 사람들이 제품에서 '가치를 얻는' 방법입니다.

다음은 제품의 가치 소품을 찾기 위한 연습 문제입니다:

1. 사람들이 제품이 부족할 때 어떤 나쁜 대안에 의지하나요?

2. 귀사의 제품이 저급한 대안보다 어떻게 더 나은가요?

3. 이제 마지막 단계를 실행 문장으로 바꾸면 가치 제안이 됩니다.

무료 언어 학습 앱인 듀오링고를 예로 들어 보겠습니다. 이 앱은 짧은 형식의 대화형 수업을 제공합니다.

몇 가지 예를 더 들어보겠습니다:

2 후크 추가

헤더에 후크를 추가하는 방식은 두 가지가 있습니다:

• 과감한 주장

• 회의적인 시각에 대한 대응

후크 옵션 #1: 대담하고 구체적인 클레임 추가하기

왼쪽에는 모호한 문구가 있습니다. 오른쪽에는 사용자가 받게 될 혜택에 대한 구체적이고 과감한 주장이 있습니다.

이제 더 흥미진진해졌습니다. 독자들은 그것이 어떻게 가능한지 알고 싶어합니다. 그래서 계속 읽게 됩니다.

또 다른 예입니다:

한마디로 과감한 클레임이 필요합니다:

• 매우 구체적으로

• "와, 이런 일이 가능한지 몰랐어요."라는 도파민을 유발합니다.

후크 옵션 #2: 이의 제기 해결

대담한 주장을 포함하는 대신 헤더에 주요 반대 의견을 제시하여 훅을 만드는 또 다른 방법이 있습니다.

웹사이트 디자인 도구인 Webflow를 예로 들어 보겠습니다. 아래는 아직 훅과 페어링되지 않은 헤더 카피입니다:

"나만의 웹사이트를 구축하세요."

이를 본 독자들은 다음과 같은 궁금증을 제기할 수 있습니다:

• 하지만 코딩을 할 줄 몰라요. 웹사이트에는 코딩 기술이 필요하지 않나요?

• 너무 오래 걸립니다. 시간이 없어요. 저는 숙련된 디자이너가 아니에요.

• 다른 사이트 디자인 도구처럼 기능이 낮고 제약이 많습니다.

여러분의 임무는 이 중 어떤 것이 주요 구매 반대 사항인지 파악하고, 이를 적극적으로 해결하는 것입니다. 방문자가 해결되지 않은 우려 사항으로 인해 스크롤하기 전에 이탈하는 일이 없도록 하세요. 아래를 참조하세요:

위의 예에서는 헤더의 첫 번째 문장을 확장하고 두 번째 문장을 추가하여 궁금한점을 해결해주고 있습니다.

여기에는 균형이 필요합니다. 불필요한 세부 정보로 헤더를 과장하면 읽기가 어려워집니다.

모든 클레임을 해결하려고 하지 나머지 부분에서 해결할 수 있도록 합니다.

그렇다면 고객의 가장 큰 클레임을을 어떻게 파악할 수 있을까요? 설문조사를 실시하세요:

• "무엇이 구매를 망설이게 했나요?" 그건 이의 제기입니다.

• "왜 예비 고객이 아직 우리 회사에서 구매하지 않았다고 생각하나요?" 그건 이의 제기입니다.

이번에는 이의 제기 처리에 대한 이전 예제를 다시 살펴보겠습니다:

요약하자면, 가치 제안을 구분한 후에는 과감한 주장을 포함하거나 이의를 적극적으로 해결하는 등 Hook을 추가하세요.

제품이 여러 주요 페르소나를 타깃으로 하는 경우 페이지 상단에서 방문자가 어떤 페르소나에 해당하는지 선택하라는 메시지를 표시할 수 있습니다. 그런 다음 방문자를 사이트의 적절한 섹션으로 안내합니다. 저는 이를 "나만의 어드벤처 선택"이라고 부릅니다. 아래 예시에서 xealenergy.com은 아파트와 직장 오너를 위한 서로 다른 경로를 만듭니다:

히어로 - 하위 헤더

이제 헤더를 서브헤더로 보완하여 제품을 특별하게 만드는 내용을 확대해 보겠습니다.

서브헤더는 일반적으로 두 가지 생각을 확장하는 데 사용됩니다:

1. 제품은 정확히 어떻게 작동하나요?

2. 헤더의 대담한 주장을 믿을 수 있게 만들어주는 기능은 무엇일가요?

예를 들어

위의 예에서는 플랫폼이 무엇인지(녹색)를 언급한 다음, 플랫폼의 주장("스타트업을 성장시키는 새로운 방법")이 어떻게 가능한지(파란색)를 설명합니다.

마찬가지로 jupiter.co의 첫 문장은 제품이 무엇인지 설명합니다(녹색). 그런 다음 "단 5분 만에"라는 주장이 어떻게 가능한지 설명합니다(파란색).

일반적으로 서브헤더는 한두 문장으로만 작성하는 것이 좋습니다. 에세이처럼 만들지 마세요. 방문자가 흥미를 유지할 수 있도록 간결하게 작성하세요.

몇 가지 예를 더 살펴보겠습니다:

요소 - 소셜 프루프 (후기 확인)

페이지 구조의 현재 위치를 다시 살펴봅시다:

이제 세 번째 줄은 소셜 프루프 입니다.

소셜 증명 섹션은 언론 보도 및/또는 가장 잘 알려진 고객을 보여주는 로고의 콜라주입니다. 또는 전자 상거래 제품인 경우 고객 수가 얼마나 많은지(인상적인 수치인 경우) 설명할 수 있습니다.

전 세계 모든 사람들이 이미 여러분에 대해 알고 있는 것처럼 보이게 하고, 방문자가 이 모든 흥분되는 분위기에 소외감을 느끼지 않도록 하는 것이 목표입니다.

FOMO 족을 만드세요.

사람들이 엘리트 클럽의 일원이 되고 싶어하도록 유도하여 흥미를 유발하는 것, 이것이 바로 소셜 프루프의 목표입니다.

아직 주목할 만한 고객이 없는 경우, 잘 알려진 회사의 사람들에게 제품을 무료로 제공할 수 있습니다. 그런 다음 해당 고객이 귀사를 사용하게 되면 사이트에 회사 로고를 배치하세요.

요소 - 기능 및 이의 제기

기능 및 이의 제기 섹션은 페이지의 대부분을 차지합니다. 이 섹션의 역할은 제품의 전체 판매 정보를 전달하는 것입니다.

이를 다시 맥락에 맞게 설명하려면 아래의 '기능'을 참조하세요:

이 섹션에는 보통 3개에서 6개까지 여러 개의 기능이 포함되어 있습니다. 각 기능에는 해당 기능에 대한 이의 제기를 처리하는 카피와 함께 프로퍼티가 짝을 이룹니다:

• 가치 소품(Value Prop)을 나타내는 헤더

• 단락은 값 소품을 설명하고 이의를 처리합니다.

• 가치 있는 소품을 강화하는 이미지

예를 들어

최고의 기능 섹션에는 내러티브가 흐르고 있습니다: 각 기능은 히어로 섹션에서 제시된 주요 가치 소품과 다시 연결됩니다.

예를 들어, "휴대폰을 내려놓고 남은 삶에 집중할 수 있도록 도와드립니다."라는 히어로의 가치 소품이 있다면 푸시 알림 차단 기능에 대한 설명에 헤더에 다음과 같은 콜백을 포함할 수 있습니다: "... 휴대폰을 계속 들여다보며 업데이트를 확인하는 습관을 끝낼 수 있도록 도와줍니다."

어떤 가치 소품과 반대 의견을 강조할지 결정하는 데 어려움을 겪고 있다면 경쟁사 사이트를 연구하여 사람들이 이미 알고 있는 공간과 차별화하는 방법을 알아보세요.

기능 - 헤더

기능 헤더의 경우, 가치 있는 카피를 짧게 작성하세요. "영업 역량 강화" 또는 "워크플로 혁신"과 같은 모호한 표현은 사용하지 마세요. 방문자가 가치 제안이 자신과 관련이 있는지, 그리고 기능 단락을 읽어야 하는지 여부를 빠르게 결정할 수 있도록 가치 제안을 직설적으로 하세요.

예를 들어 다음은 휴대용 그릴에 대한 기능 헤더입니다:

• 요리 및 Sear

• 정리 안 함

• 고기 그 이상의 요리

기능 - 단락

기능의 단락에 기능을 간결하게 설명하고, 사람들이 구매를 망설 이게하는 중요한 클레임 일경우 선택 사항으로 클레임을 해결합니다.

복잡하거나 직관적이지 않은 기능에 대해 지나치게 자세히 설명하는 것은 고객의 불만과 불안감을 높이게 됩니다. 이럴 경우 방문자가 자세히 알아볼 수 있는 별도의 페이지로 연결하거나 버튼을 클릭하여 추가 세부 정보를 확인할 수 있도록 하세요.

후자는 사용자가 현재 페이지의 머물 수 있으므로 더 좋습니다.

기능 - 이미지

랜딩 페이지가 텍스트의 거대한 방해가 되지 않고 설명하는 내용을 강조할 수 있도록 기능을 이미지와 결합합니다.

기능 이미지의 경우 두 가지 목표를 고려하세요:

• 모던하고 선명하며 예쁜 이미지를 시각적으로 매력적으로 만드세요. 디자이너가 없다면 비용을 지불하세요.

• 이미지가 제품의 가치를 보여줄 수 있도록 하세요. 이는 종종 제품이 실제로 작동하는 모습을 보여줌으로써 이루어집니다.

아래 예시에서 HelloSign은 제품이 작동하는 모습을 담은 GIF를 포함하고 있습니다. 가입하려는 상품이 무엇인지 보여줍니다.

이를 통해 시간 투자에 대한 위험을 줄이고 불확실성을 제거합니다.

또한 방문자가 작은 텍스트를 읽게 하는 대신 텍스트를 흐리게 처리하여 중요한 내용, 즉 제품의 작동 방식에 집중할 수 있도록 합니다.

또 다른 예입니다: 실물 상품을 판매하는 경우, (1) 다양한 사용 사례를 보여주고 (2) 제작 품질을 클로즈업하여 보여주는 두 가지 방법을 고려하세요. 이렇게 하면 방문자가 제품의 특징을 더 잘 이해할 수 있습니다.

요소 - CTA

페이지의 '콜투액션'(CTA) 버튼에 대해 알아보겠습니다.

CTA는 헤더의 클레임을 이행하기 위한 실행 가능한 다음 단계라고 생각하세요.

아래에는 두 가지 강력한 예가 있습니다. "음식 찾기"와 "학습 시작"은 헤더 카피에 매우 효과적인 방법입니다.

이러한 CTA는 방문자가 히어로가 시작한 스토리를 계속 이어갈 수 있도록 도와주기 때문에 자연스럽게 클릭하게 됩니다.

반면, 아래는 약한 CTA입니다.

카피가 모호하고 제품이 무엇인지 명확하지 않은데 왜 미팅을 요청해야 하나요?

CTA 예시

페이지에 대한 피드백 받기

랜딩 페이지 초안이 완성되면 두 가지 유형의 검토자에게 전달합니다:

• 해당 시장에 속하지 않는 사람들 - 해당 시장이나 제품에 대해 잘 모르는 사람들에게 카피가 얼마나 매력적이고 이해하기 쉬운지 알아보세요. 더 알고 싶을 만큼 충분한 맥락을 제공하고 있나요? 이는 사이트가 잠재 고객을 대신하여 기본 수준의 지식을 과도하게 가정하는 일반적인 문제를 해결하는 데 도움이 됩니다. 시장의 가장자리에 있는 사람들 중에도 고객이 되어야 하는 이유만 더 잘 이해한다면 고객이 될 수 있는 사람들이 많을 수 있습니다.

• 시장의 사람들 메시지가 경쟁사보다 나를 선택할 의향이 높은 사람들을 설득할 수 있을 만큼 충분히 독특하고 설명적인지 알아보세요.

두 유형의 리뷰어에게 모두 6가지 기준을 평가해 달라고 요청합니다:

• 전환 - 지금 바로 신용카드를 결제하고 가입하시겠습니까? 그렇지 않다면 필요한 것은 무엇인가요?

• 관심도 - 랜딩 페이지가 귀하의 관심을 끌 수 있었는지 1~10점 척도로 평가하세요. 관심을 더 가지려면 어떤 부분을 다시 작성하거나 재설계해야 한다고 생각하시나요?

• 명확성 - 무엇이 불분명한가요? 답하지 못한 질문에는 어떤 것이 있나요?

• 확장팩 - 더 자세히 알고 싶은 멋진 콘텐츠를 발견하셨나요?

• 간결성 - 페이지의 이미지와 문구 중 절반을 삭제해야 한다면 어떤 것을 삭제하시겠습니까?

• 불신 - 무엇이 "사실이 아니에요! 그건 사기성 세일즈 문구야!"라는 반사가 떠오른 이유는 무엇인가요?

추가 리소스는 화면 하단의 메뉴를 참조하세요.