홈페이지는 웹사이트의 디지턈 프론트 도어 역할을 합니다. 방문자를 유인하고 관심을 끌며 고객으로 전환하는 데 중요한 요소입니다. 좋은 홈페이지 레이아웃을 디자인하려면 미학과 사용성을 조화롭게 결합해야 합니다. 한 방향으로 치우침이 생기면 전환이 영향받을 수 있습니다.

저는 수백 개의 웹사이트를 조사했습니다. 많은 웹사이트를 직접 디자인하고 테스트했습니다. 방문자를 고객으로 전환하는 최상의 홈페이지 레이아웃 공식을 찾았다고 생각합니다. 숙련된 디자이너라면 이미 알고 계실지도 모릅니다. 그렇지 않다면, 이제부터 이러한 패턴을 어디서나 주목할 것입니다.

기본 레이아웃 원칙

좋은 사용자 경험 및 높은 전환율을 갖춘 모든 웹사이트는 몇 가지 기본 레이아웃 원칙을 따릅니다. 이러한 원칙을 무시하면 단순히 멋진 예술작품이 아니라 좋은 웹사이트를 만들 가능성이 높습니다.

좋은 홈페이지나 랜딩 페이지는 3가지 질문에 대답해야 합니다:

• 누구인가요?
• 무엇을 하는 곳인가요?
• 어떻게 도와주시겠어요?

당신은 누구인가요? 무엇을 하고 있나요? 어떻게 저를 도와주시겠나요? 이 모든 질문에 대답하는 것이 중요합니다. 홀더(above the fold)를 통해 모든 답변을 제시하는 것이 좋습니다. 첫 화면에서 스크롤을 내리지 않고 이러한 질문에 대한 답변을 제공할 수 있어야 합니다. 방문자가 이러한 질문에 대한 답변을 얻으면, 관심을 가질지 여부를 결정하여 더 많은 정보를 알고 싶어서 스크롤을 내리거나 다른 페이지를 방문할 것입니다.

웹사이트의 좋은 구조를 파헤쳐보면, 맨 위에 있는 내비게이션 바로 로고가 있는데, 이는 이 웹사이트가 누구의 소유인지에 대한 응답을 제공합니다.

그 아래 큰 섹션은 히어로 섹션이라고 불립니다. 일반적으로, 3가지 주요 질문에 간단히 답합니다. 큰 헤드라인이 따라서 이 회사/개인이 무엇을 하는지, 어떻게 내 문제를 해결해 줄 수 있는지를 설명하는 짧은 문장이나 단락이 이어집니다 (내가 문제가 있는 경우). 이후에는 방문자가 필요한 조치를 취할 수 있는 버튼인 호출-투-액션(CTA)이 있으면 좋습니다.

히어로 섹션에서의 짧은 소개만으로 충분하지 않기 때문에, 아래에 있는 것들은 보다 자세히 누구, 무엇, 어떻게를 보여줍니다. 제품의 특징을 설명하고 경쟁 제품과 비교하며, 다양한 영상과 이미지를 제시하고, 증언과 글 링크를 공유하여 이를 달성합니다.

모든 페이지 섹션이 사용자에게 행동을 취하도록 만드는 한 가지 목적을 제공합니다. 이것이 정확히 사용자가 필요한 것임을 설득하세요. CTAs는 무언가를 구매하도록 유도하거나 서비스나 뉴스레터를 구독하도록 유도하거나 회사에 연락하도록 유도할 수 있습니다. 따라서 훌륭한 홈페이지는 이야기를 전달합니다. 홈페이지 전체를 통해 전달되는 간단한 이야기는 다음과 같습니다:

이하 Brevo 홈페이지 예시를 살펴보겠습니다.

좋은 홈페이지가 가져야 할 모든 것이 있습니다: 히어로 섹션에 명확한 내비게이션 및 소개, 이전 고객들 및 증언을 통해 신뢰성을 높이는 정보, 제공물의 주요 기능 또는 혜택을 보여주는 섹션, 그리고 매우 중요한 것은 사용자를 원하는 동작으로 이끄는 명확한 CTAs입니다. 각 다음 섹션은 핵심 제안을 강화합니다.

화면 상단에 있는 주요 CTA는 네비게이션 바와 함께 고정되어 있어 스크롤해도 언제나 보입니다. 방문자가 확신을 가지면 쉽게 버튼을 클릭하여 가입할 수 있습니다. 그래서 전환율이 높아지는 것이죠.

비효율적인 뷰티

안타깝게도, 멋지고 숨막히는 웹사이트는 많지만 가치를 제공하는 측면에서는 전혀 쓸모가 없는 경우가 많습니다. Awwwards를 방문하면 그런 사이트가 많이 있습니다.

웹 개발 능력으로 누군가를 감명시키는 것이 목표이면, 전혀 문제가 없습니다. 아름다운 웹사이트와 예술에 반대하지 않습니다. 나는 자아 표현을 사랑합니다. 그러나 그 모든 것이 사용성과 높은 전환율과는 아무 상관이 없다는 점을 명심해야 합니다.

사용자들이 전혀 흔치 않은 네비게이션에 갇혀 있어요. 페이지가 가로로 스크롤되다가 갑자기 세로로 스크롤링으로 변경되기도 해요. 버튼들은 곳곳에 흩어져 있고 거대한 폰트 크기가 여기저기 나타나요. 그런 웹사이트에서 무언가를 찾으려고 하면 마치 건초더미 속에서 바늘을 찾는 것 같아요. 사람들은 이 눈부신 아름다움을 한동안 바라보다가 탭을 닫아버려요.

또 다른 것으로 언제나 눈에 띄는 것은 슬라이더나 캐러셀의 많은 사용입니다. 캐러셀은 종종 사용자를 효과적으로 끌어들이지 못해요. 캐러셀의 클릭률(CTR)은 극히 낮아요. 연구에 따르면 대부분의 사용자가 캐러셀과 상호작용을 하지 않고 중요한 콘텐츠가 쉽게 놓칠 수 있어요.

최고의 레이아웃

이제 함께 최고의 홈페이지 레이아웃을 만들어보면서 레이아웃 실수를 피하고 이야기를 전달해 보죠.

우선, 네비게이션 바로 시작해보겠습니다. 왼쪽 상단에 로고, 사이트 메뉴, 그리고 CTA를 포함해야 합니다.

다음 요소는 이미 이야기한 히어로 섹션입니다. 여기에는 누구인지, 무엇을 하는지, 그리고 어떻게 도와줄 수 있는지 간략히 설명할 것입니다. 끝에 두드러진 CTA와 우측에 이미지도 있을 것입니다.

이후에는 기능이나 서비스에 대해 자세히 이야기하는 것이 좋습니다. 이 섹션에서는 회사가 무엇을 하는지와 제공하는 것을 알려줍니다.

다음 단계는 회사에 대해 더 자세히 알려주는 '회사 소개' 섹션입니다. 여기서 3시간 동안 이야기할 필요는 없습니다. 관심 있는 사람들을 위해 별도의 페이지로 연결될 수 있습니다.

다음 중지는 추천사례나 사례 연구입니다. 여기서 그들의 주된 목적은 서비스를 사용하고 사랑하는 사람들을 보여 신뢰성을 높이는 것입니다. 유명 회사가 사용 중이라면 그들의 로고를 여기에 추가하는 것이 좋은 아이디어입니다.

이야기를 전달할 때 명확한 연락처 양식으로 마무리하는 것이 중요합니다. 10가지 다른 항목을 추가할 필요가 없습니다. 추가 필드를 더하면 양식을 채우는 사람 수가 줄어들 것입니다.

마지막으로 사이트맵과 소셜 링크가 있는 푸터가 있어요. 그렇게 어려운 건 아니죠? 이제 최종 모형을 확인해 볼게요.

최종 생각

방금 읽은 이 간단한 레이아웃 규칙들은 절대적인 것이 아닙니다. 몇 가지 창의성, 요소 추가, 재배열할 수 있는 여지가 항상 있습니다. 사람들이 웹사이트를 방문할 때 익숙해지는 것이 중요합니다. 일관성과 익숙함은 홈페이지 레이아웃의 중요 요소이며 훌륭한 전환율을 위한 핵심입니다. 웹사이트가 비즈니스를 대상으로 한다면 비즈니스 목표를 이루게 하고 예술은 예술가들에게 맡기세요.

독서보다는 시청을 좋아하신다면, 저의 유튜브 채널에서 홈페이지 레이아웃에 관한 비디오도 보실 수 있습니다.