올해 블랙프라이데이(Black Friday)를 통해 미국인들은 소매점을 방문하는 것보다 온라인 쇼핑을 더 자주 찾는 소비행태를 보여줬다. 올 초 시행한 한 연구 결과에 따르면, 약 30%의 소비자들이 1주일에 한 번 이상 온라인쇼핑을 즐기는 것으로 나타났다. 나날이 늘어가는 소비자들의 온라인쇼핑 선호도는 이커머스(E-Commerce), 즉 전자상거래 시장의 경쟁률을 부추겼다. 그럼 이 치열한 시장에서 버티기 위해 전자상거래 업체들은 어떤 전략을 취해야 할까?

 

이 경쟁에서 살아남기 위한 한 가지 중요한 요소로 꼽히는 것이 바로 ‘웹디자인’이다.

 

다음은 2016년 이커머스 시장을 이끌 웹디자인 트렌드 8가지다.

 

 

시차 효과(Parallax Effect)

 

시차 효과는 마우스를 움직이거나 스크롤을 내릴 때, 배경 이미지들과 오브젝트 이미지들 간에 시차를 두고 스크롤 되도록 하는 기법이다. 시차 효과는 올해의 주요 웹트렌드로 꼽힐 정도로 이미 여러 이커머스 사이트에서 사용되고 있지만, 그 인기가 내년에도 지속될 것으로 보인다.

 

이 테크닉은 플래시를 사용하지 않고도 역동적인 효과를 내고, 웹사이트를 마치 3D로 보는 것 같은 효과를 줘 사용자들에게 멋진 시각적 경험을 선사해 준다. 또한, 스크롤에 대한 즉각적인 피드백을 제공함은 물론 사용자들의 호기심을 자극해 다음 액션을 유도함으로써 사용자들의 주의를 지속해서 끌고, 계속해서 웹사이트에 머무를 수 있게 만드는 효과가 있다.

 

아래는 시차 효과를 도입한 웹사이트이다.

 

(웹사이트: http://www.dangersoffracking.com/)

 

 

 

지연 초기화(Lazy Loading) 

 

지연 초기화 기법은 웹페이지를 호출했을 때 눈에 보이는 곳의 이미지를 먼저 로딩하고, 스크롤 해야만 볼 수 있는 영역의 이미지는 스크롤을 하면 그때 로딩해주는 기법을 말한다.

 

이 기법은 모든 이미지를 한꺼번에 로딩하지 않고 필요한 이미지만 순서대로 로딩하기 때문에 로딩 속도가 빠르다는 장점이 있다. 따라서 고객들의 편의성을 높여 재방문율을 높일 수 있다.

 

 

플랫디자인 (Flat Design)

 

지난 몇 년간, 종이의 질감이나 가죽 지갑의 박음질, 책 넘김의 효과 등 실제 사물을 있는 그대로 표현하는 스큐어모피즘(Skeuomorphism)이 유행했다. 하지만 이젠 아무 효과도 들어가지 않고 심플함과 깔끔함을 추구하는 플랫디자인(Flat Design)이 인기를 끌고 있다.

 

플랫디자인을 도입한 웹사이트는 사용자가 쉽게 이해하고 편리하게 사용할 수 있도록 군더더기 없이 깔끔하고 딱 필요한 내용만 담는다. 이 디자인은 작은 스크린을 통해 봐야 하는 모바일 환경에서 특히 유용하게 사용할 수 있다. 주의할 점은 심플하지만 사람들이 이목을 이끄는 디자인을 채택해야 한다는 점이다. 즉, 아이콘이나 버튼에 과감한 컬러를 입혀 사용자가 클릭하고 싶어지도록 만들어야 한다.

 

아래 그림은 밝은 빨간색으로 포인트를 준 플랫디자인 웹페이지이다.

 

 

 

화면 분할(Split Screen)

 

화면 분할은 한 페이지에 여러 가지 이미지를 동시에 띄우는 기법이다. 이 기법은 고객들에게 여러 가지의 이미지를 한 번에 보여주고 싶을 때 사용하기 적절하다.

 

아래 이미지처럼 오른쪽에는 방수 가능한 여권 케이스 이미지를 디스플레이하고, 오른쪽에는 방수 가능한 여행용 가죽가방을 보여줘, 고객들에게 우리가 여러 가지 제품들을 제공한다는 것을 한눈에 알아보게 할 수 있다. 

 

 

 

호버 효과(Hover Effect)

 

호버 효과는 웹사이트 이미지에 마우스 커서를 대면 이미지가 커지거나 혹은 색상이 바뀌는 효과를 제공해 고객들의 이목을 집중시키고 웹사이트를 좀 더 효율적으로 사용할 수 있도록 도와준다.

 

예를 들어, 아래 그림처럼 옷을 판매하는 이커머스 웹페이지에서 고객이 맘에 드는 옷에 마우스 커서를 갖다 대면, 그 옆에 여러 앵글에서 찍은 옷 이미지를 나타내 사용자의 편의를 도모할 수 있다.

 

 

이는 UI(사용자 인터페이스) 요소들을 마우스 커서를 이용해 필요시에만 나오게 할 수 있기 때문에 웹페이지 레이아웃을 깔끔하게 유지할 수 있다.

 

 

자신의 브랜드를 나타내는 일러스트레이션

 

자사가 판매하는 물품이나 서비스, 혹은 특징적인 이미지를 일러스트레이션으로 표현해 웹페이지에 삽입하는 것도 내년에 주목할 만한 웹디자인 트렌드중 하나다. 이 기법을 사용하는 방식은 큰 이미지를 그려 홈페이지 배경으로 사용하거나, 작은 이미지를 여러 개 그려 아이콘으로 사용하는 방법 등 다양하다.

 

온라인 티(Tea) 스토어인 루쉐티(Luhse Tea) 홈페이지를 보면 메뉴아이콘, 쇼핑카트, 로고, 검색창 등 모든 레이아웃에 직접 제작한 일러스트레이션을 삽입해 유니크하게 디자인함과 동시에 자사가 판매하는 물품을 효과적으로 소개했다. 

 

 

 

여백의 미 (White Space)

 

온라인 쇼핑객들은 대체로 깔끔하고 쉽게 알아볼 수 있는 웹사이트 레이아웃을 선호한다. 그렇기 때문에, 웹사이트를 여러 요소들로 꽉꽉 채우기보다는 여백을 남겨 보기 편한 디자인으로 구성하는 것이 좋다.

 

여백의 가장 큰 장점은 제품을 더욱 돋보이게 해주는 것이다. 예를 들어, 꽃무늬로 가득한 배경에 티셔츠 하나가 디스플레이 된다면 고객들의 시선이 꽃무늬로 분산돼 티셔츠에 집중하지 못할 것이다. 반면, 흰 여백에 티셔츠 하나가 디스플레이 돼 있다면, 시선이 분산되지 않아 티셔츠에 집중할 수 있게 된다.

 

스토리텔링

 

웹디자인에서 스토리텔링은 웹사이트의 레이아웃을 잘 짜여진 스토리를 이야기하듯 효과적으로 구성하라는 것을 의미한다. 이 기법에는 오디오나 비디오 같은 멀티미디어적 요소를 사용하면 사용자의 흥미를 끌어 몰입도를 높이고 좀 더 효과적으로 웹사이트를 보여줄 수 있다.

 

아래는 스토리텔링을 웹디자인에 잘 적용한 홈페이지다.

 

(웹사이트: http://www.moma.org/interactives/exhibitions/2012/centuryofthechild/)

 

 

 

출처

8 eCommerce Design Trends For 2016 To Ignite The Selling Potential Of Your Store (business2community, 12/5)

www.dangersoffracking.com

www.moma.org

 

본 콘텐츠는 해외 매체의 기사를 번역한 2차 저작물로, 영리 목적의 무단 도용을 금지합니다. 이외 개인홈페이지, 블로그 등에 재게재하실 때에는 반드시 출처를 밝혀주시기 바랍니다.