많은 사람들이 웹사이트의 디자인을 통해 기업의 신뢰성을 판단한다. 웹사이트에 방문해서 받는 첫 인상에는 디자인이 큰 영향을 미친다. 요즘 웹사이트의 트렌드는 무엇인지 살펴보고 인사이트를 얻어보자.

고객 호감 이끌 Peak-End 효과

미국 대형 유통 업체 코스트코에 가면 1.5달러짜리 쇠고기 핫도그 세트를 만날 수 있다. 길이 20㎝, 무게 113.4g인 핫도그와 탄산음료 한 컵(567g)을 제공하는 이 세트의 가격은 1985년 출시 이후 지난 38년간 단 한 번도 오른 적이 없다. 한국 매장에서도 핫도그 세트 가격은 2,000원으로 유지되고 있다. 미 월스트리트저널은 물가상승률을 반영할 경우 이 세트가 적어도 현재 가격의 2.8배인 4.13달러(약 5,420원)는 받아야 한다고 분석하기도 했다. 그런데도 왜 코스트코는 이 핫도그 세트의 가격을 올리지 않는 것일까?

38년째 가격이 오르지 않은 이 저렴한 핫도그 세트를 먹으면서 고객은 ‘오늘도 저렴하게 쇼핑을 잘했다’라는 기분을 느낄 수 있다. 이처럼 고객의 경험 곡선에서는 절정(Peak)과 마지막(End)에 대한 경험이 매우 중요하다. 이를 피크 엔드(Peak-End) 효과라고 한다.

이제 기업의 홈페이지를 이야기해보자. 홈페이지에 방문하는 사람들은 그 기업에 대한 정보를 찾기 위해 방문한다. 이때 방문자들은 현재의 고객일 수도 있고, 미래의 고객이 될 사람일 수도 있다. 또는 그 기업의 주주나 관련 기사를 작성하려는 미디어 종사자, 그 기업에서 일하고 싶어 하는 구직자일 수도 있다. 이 방문자들이 홈페이지를 둘러볼 때도 절정(Peak)과 마지막(End)에 대한 경험이 매우 중요하다. 이를 통해 이후 고객과 기업 사이의 수많은 접점(고객 경험에서는 Touch Point라고 부른다)에서 고객이 그 기업의 모든 활동에 대해 지속적인 호감을 갖게 될 확률이 높기 때문이다.

과감하고 돋보이는 시각적 효과

그러나 아쉽게도 모든 방문자가 우리가 준비한 홈페이지를 우리의 의도대로 둘러보지 않는다. 그 때문에 홈페이지 주소를 입력하고 고객이 만나게 되는 첫 페이지, 즉 랜딩 페이지(Landing page)의 이탈률이 중요하다. 이탈률이란 홈페이지를 방문해서 그 어떤 정보나 메뉴, 버튼도 클릭하지 않고 홈페이지를 떠나는 비율을 말한다. 현재 운영 중인 홈페이지의 랜딩 페이지 이탈률이 30~50%이라면 랜딩 페이지의 정보구조와 디자인이 매우 잘 되어 있다고 말할 수 있다. 50~70%의 이탈률을 기록하고 있다면 평균은 된다. 그러나 70% 이상의 이탈률을 보여준다면 이는 문제가 있다고 볼 수 있다.

랜딩 페이지의 이탈 요인은 다양하지만 크게 정보 구조와 시각 요소에서 찾을 수 있다. 쉽게 말해 방문자가 원하는 정보를 찾기 어렵고시각적으로 매력을 느끼지 못한다면 방문자들이 그 홈페이지를 바로 떠난다는 것이다. 어떤 요소들이 우리가 만든 홈페이지의 방문자들을 더 오래 머무를 수 있게 할 수 있을까? 그리고 더 많은 정보를 얻기 위해 한 번이라도 더 클릭을 하게 만들 수 있을까? 최근 홈페이지 디자인에서 보이는 트렌드를 통해 이에 대한 실마리를 찾아볼 수 있을 것이다.

❶ 대담한 타이포그래피

랜딩 페이지 방문자들이 가장 먼저 접하는 영역, 즉 최상단 영역을 일반적으로 히어로 섹션(Hero section)이라고 부른다. 히어로 섹션이 제대로 디자인되어 있지 않다면 방문자들은 스크롤조차 하지 않고 랜딩 페이지를 떠난다. 그래서 많은 기업이 어떻게 하면 히어로 섹션을 통해 방문자들의 눈길을 사로잡을 수 있을지 고민한다. 이 해결 방향에 대한 트렌드 중 하나가 바로 대담한 타이포그래피의 사용이다.

일본의 크리에이티브 컴퍼니 kirifuda inc. 홈페이지를 방문해보자. 방문자는 먼저 거대한 서체 크기에 압도된다. 이는 곧 홈페이지에 대한 호기심으로 연결되고 자연스럽게 스크롤하게 만든다. 이러한 대담함은 ZiKD 2022 홈페이지 등 다양한 웹사이트에서 확인할 수 있다.

❷ 상호작용 하는 타이포그래피

더 나아가 홈페이지 방문자와 상호작용하는 타이포그래피도 하나의 큰 트렌드로 볼 수 있다.

방문자는 작은 마우스 움직임에도 반응하는 홈페이지를 보면서 호기심과 더불어 친근함도 느끼게 된다. 한 번이라도 더 마우스를 움직이고 이것저것 클릭하게 된다. 방문자의 마우스 포인터를 상호작용 요소로 활용하는 것도 하나의 트렌드다. dillinger.tv의 홈페이지를 방문해 살펴보면 마우스 포인터의 모양이 단순한 화살표에서 상호작용하는 원으로 바뀐다. 이 작은 변화만으로도 방문자는 홈페이지에 호기심을 갖게 된다.

❸ 단일 페이지 디자인

홈페이지가 제공해야 할 정보를 하나의 페이지로 디자인하여 전달하는 것도 최근의 큰 트렌드 중 하나다. 방문자는 홈페이지 내 모든 메뉴를 클릭해야 하는 노력을 하지 않아도 된다. 특히 이러한 디자인은 모바일 기기를 통해 홈페이지를 방문했을 때 빛을 발한다. 일반적으로 모바일 환경이 데스크탑 환경에 비해 스크롤에 대한 저항감이 훨씬 낮은 것으로 알려져 있기 때문이다.

자율주행 차량을 개발하는 Zoox 홈페이지에서 보는 것처럼 단일 페이지 디자인을 활용하는 홈페이지들은 스크롤을 하는 과정에서 브랜드에 대한 스토리텔링을 전달한다. 그 때문에 방문자들은 스크롤이 끝날 때쯤 브랜드의 비전과 핵심 가치 등을 자연스럽게경험하게 된다.

스크롤을 할 때 세로가 긴 페이지만 있는 것은 아니다. 스크롤 시 가로 페이지 단위로 정보를 전달하는 경우도 있다. 가로든 세로든 스크롤만으로 방문자에게 정보를 제공할 수 있는 것이다.

❹ 메가 푸터 디자인

랜딩 페이지를 끝까지 스크롤 했을 때 보게 되는 맨 마지막 섹션을 푸터(Footer)라고 부른다. 보통 홈페이지의 사이트맵, 소셜 미디어 링크, 공지사항, 검색, 문의하기 같은 정보들을 담고 있다. 랜딩 페이지 전체 디자인에서 푸터는 상대적으로 많은 크리에이티브를 보여줄 수 없는 영역이라는 인식이 강했지만 최근 이런 경향을 탈피한 디자인을 만날 수 있다. 아래 링크를 통해 파격적인 푸터를 꼭 한번 확인해보자.

❺ 3D 오브젝트

웹 기술의 발전으로 기존에 불가능했던 표현들이 가능해지면서 다양한 시도가 랜딩 페이지 디자인에서도 적용되고 있다. 그 중 대표적인 것이 바로 3D 요소의 활용이다. 이 홈페이지에서는 3D로 만들어진 건물의 음영이 방문자의 마우스 커서에 맞춰 영향 받는 것을 볼 수 있다.

사전에 렌더링 된 이미지를 활용하는 이런 방식 외에 처음부터 웹에서 3D 환경을 실시간 렌더링해서 보여주는 홈페이지도 있다. 보통 이런 기술을 WebGL이라고 부른다. 하드웨어의 성능이 높아지고, 네트워크의 속도가 빨라지면서, 3D 환경을 활용한 다양한 크리에이티브를 더 많이 만나게 될 것이다.

❻ 글래스모피즘

글래스모피즘은 유리라는 재질이 가진 투명하거나 반투명한 특성을 디자인에 반영하는 경향을 이야기한다. 이를 통해 강조하고자 하는 정보 콘텐츠에 시선을 집중시킬 수 있다. 여기에 그라데이션 효과까지 더해지면서 독특한 분위기를 연출할 수 있다.

©tricks

❼ 즐거움을 주는 디자인

마지막으로 이야기하고 싶은 트렌드는 바로 ‘즐거움’에 대한 것이다. 지난 몇 년간 세계적인 질병의 대유행에 대한 반작용으로 많은 홈페이지에서 위트와 재미 요소 등을 활용해 홈페이지 방문자들에게 긍정적인 메시지를 전달하려고 시도하고 있다.

아래 홈페이지에서 방문자들은 펑키한 모양과 색깔, 그리고 언뜻 보이는 얼굴에서 재미를, 행복해질 것만 같은 기대감마저 느끼게 된다. 최근 유행하고 있는 손으로 그린 듯한 타이포그래피나 일러스트레이션 역시 같은 맥락으로 볼 수 있다. 방문자들은 디지털 환경에서 만들어진 이미지보다 손으로 직접 작업한 듯한 이미지를 통해 지난 몇 년간 재택근무와 격리로 잊고 지냈던 휴머니티를 발견하게 된다.

방문 목적 세분화 해 디자인 하기

홈페이지 이탈률을 낮추기 위한 랜딩 페이지 디자인 트렌드를 살펴봤다. 우리가 해야 할 것은 이러한 트렌드를 그대로 반영하는 것이 아니다. 이런 트렌드에 대한 원인을 분석하고 이를 어떤 방식으로 해결했는지에 대한 맥락을 이해해야 한다. 맥락을 이해하지 못하면 그저 트렌드에 편승한 홈페이지를 디자인하는 데 그칠 수 있다. 우리에게 중요한 것은 기업의 브랜드 철학과 가치를 전달하는 데 있어 가장 효과적인 디자인 트렌드를 파악하고 이를 적절하게 활용하는 안목을 가지는 것이다.

국내 프로스포츠 단체나 구단의 웹사이트는 대체로 정보를 전달하는 데에 초점이 맞춰져 있다. 앞서 언급한 것처럼 다양한 방문자들의 방문목적을 세분화하여 디자인적으로 해결하려는 노력이 따른다면 이탈률을 낮추고 더 많은 관심을 모으는 데 도움이 될 것이다.

“중요한 것은 기업의 브랜드 철학과 가치를 전달하는 데 있어
가장 효과적인 디자인 트렌드를 파악하고
이를 적절하게 활용하는 안목을 가지는 것이다.”