다른 저작물들에 의해 영감을 받고 이를 팀에 공유하는 것은 팀 전체의 작업물을 보다 신선하게 하고, 디자인 수준을 더 높은 단계로 높이는 데에 긍정적인 역할을 한다고 합니다. SQUARE 205라는 디자인 에이전시는 그러한 작업의 일환으로 꾸준히 디자인 트렌드가 무엇인지 찾아보고 이를 정리하는 작업을 진행하고 있습니다.
SQUARE 205가 바라보는 2016년의 웹디자인 & UI디자인 트렌드는, 전반적으로 2013~5년에 걸쳐 꾸준히 진행되온 디자인 트렌드가 보다 확장되는 개념이라고 합니다. 예를 들면 반응형 디자인이나, 모바일 기반 디자인은 이제는 표준으로 까지 자리를 잡았다고 할 수 있습니다. 헤더 이미지는 계속해서 크게 자리 잡게 될 것이고, 비디오와 애니메이션 또한 지속적으로 쉽게 이용될 수 있는 형태로 변화해 갈 것이며, 메테리얼디자인 기반의 UI 또한 계속해서 그 인기를 높아져 갈 것입니다.
2016년 SQUARE 205 팀원들이 선정한 웹디자인 & UI디자인 트렌드는 다음과 같습니다.
1. 모바일과 반응형 디자인은 계속될 것입니다.
최근 연구 결과에 따르면 2017년까지 전체 모바일 사용자의 90%가 모바일을 통해서 인터넷에 접속하게 될 것이라고 합니다. 구글이 발표한 모바일 사이트 인기 순위가 보여준 결과처럼, 반응형 또는 모바일에 최적화된 웹사이트가 압도적으로 검색엔진 결과에서 상위를 차지하고 있는 것을 확인할 수 있습니다.
하지만 워드프레스나 스퀘어스페이스 등을 활용해서 모바일에 최적화되어 구축된 웹사이트들이 구글의 표준검색환경에서 매우 잘 작동하긴 하지만, 때로는 이러한 웹사이트들이 때때로 지나치게 경직되거나 지루한 디자인을 지니고 있어 실 사용자들 보다 검색 엔진을 더 고려하는 것처럼 보여지기도 합니다.
2016년에는 데스크톱 환경에서의 UX만큼 모바일에서의 UX의 중요도 또한 더욱 증가할 것으로 보이므로, 모바일 사용자들의 입맛을 보다 잘 맞춰줄 수 있는 디자인들이 많이 등장하기를 기대해 봅니다.
예시) 댈럭스 메버릭스의 새로운 반응형 웹사이트 디자인은 스마트폰에서 접속했을 때에는 모바일 환경에 최적화되어 가장 주요한 메뉴로 볼 수 있는 전체메뉴, 티켓, 스케쥴이 상단에 좁아진 채로 위치하게 되며, 여러 콘텐츠를 복잡하게 보여주는 것이 아닌 가장 주요한 콘텐츠인 콘텐츠슬라이드쇼만을 모바일 최적화 인터페이스를 고려하여 배치된 것을 확인할 수 있습니다.
2. 헤더 이미지는 더 크고 아름답게...
헤더 이미지와 텍스트를 혼합해서 배치하는 것은 일종의 표준처럼 자리 잡기 시작했습니다. 디자이너들은 이제 보다 직접적으로 사용자들과 커뮤니케이션하기를 원하며 이를 위해 보다 과감한 레이아웃을 사용하고 있습니다. 이와 동시에 작은 헤더 이미지의 사용을 자제하고, 상징적으로 시선을 끌 수 있는 큰 이미지를 전체 배경으로 배치하여 행동 유도성을 높이는 방향으로 디자인을 진행하고 있습니다.
큰 상징적 이미지는 더 크고 두꺼운 타이포그래피와 함께 합니다. Typekit, MyFonts, Google Fonts와 같은 서비스는 특별한 폰트 사용에 매우 큰 도움을 주고 있습니다. 이러한 텍스트들은 아름다운 타이포그래피와 검색엔진최적화에 유리하다는 두 가지 강점을 가지고 있습니다. 드라마틱하게 들어가는 타이포그래피는 앞으로도 매우 중요한 역할을 할 것으로 보입니다.
2016년에는 보다 많은 아름다운 첫인상을 가진 커스텀 사진, 일러스트, 애니메이션, 그리고 비디오들을 볼 수 잇을 것으로 생각됩니다.
예시) Spotify의 2015년의 음악 웹사이트는 매우 큰 서체와 이미지를 사용하며 이와 함께 애니메이션을 적용하여 인상적으로 시선을 이끄는 인트로 페이지를 보여주고 있습니다.
3. 원 페이지에서 첫 화면(Abvoe the fold)이 이제는 그렇게 중요하지 않다.
웹페이지들은 이제 갈수록 길어지는 경향을 보이고 있으며, 사용자들은 이것에 매우 익숙해지기 시작했습니다. 첫 화면(Above the fold : 스크롤 하지 않아도 보이는 화면, below the fold : 스크롤해야만 보이는 화면)은 모든 정보 전달 미디어에 있어서 전통적으로 가장 중요한 영역으로 인식되어 왔고, 지금도 일정 부분 그러한 측면이 있지만 웹사이트에 있어서는 그러한 측면에 퇴색하고 있는 현상이 보이고 있습니다. (과거 첫 화면에서는 가장 중요한 정보를 전달하는 것이 미덕처럼 여겨진 측면이 있으나, 현재에는 단순히 사용자 시선만을 끄는 데에 이용하고 중요한 정보는 스크롤을 내렸을 때 보여주는 형식의 웹사이트들이 많아지고 있습니다.)
그것은 최근 웹사이트들은 모바일에 최적화된 형태로 디자인이 많이 되고 있으며, 사용자들은 스크롤을 내리는 것에 매우 익숙해진 상황이며, 때로는 스크롤을 내릴 때 볼 수 있는 특이한 콘텐츠들을 기대하기도 합니다. 이러한 추세에 맞춰 앞으로 첫 화면은 웹사이트의 가장 중요한 요소로서의 위치는 희석되어 갈 것이며 다른 콘텐츠 영역과의 구분 또한 희미해져 갈 것입니다. 모든 디자이너들이 가장 사랑하는 것 중에 하나는 '형식' 보다는 '흐름'이기 때문입니다.
예시) 프랑스의 이 사이트는 원페이지 최상단에서 사용자의 관심을 끄는 역할을 할 뿐 직접적 정보 제공의 역할을 하지는 않습니다. 오히려 스크롤 내리면서 반전의 요소들로 인해 더 큰 재미와 흥미를 느끼게 됩니다.
4. 매테리얼디자인은 이제 Flat 2.0으로 불릴 정도로 인기 많지만, 조금씩 덜 Flat해지고 있다.
2014년 구글이 처음으로 매테리얼 디자인을 선보였습니다.
메테리얼 디자인의 디자인 언어는 모바일을 중심으로 맞춰져 있으며, 사용자들이 콘텐츠들 사이에서의 이동과 콘텐츠 접근을 보다 직관적으로 할 수 있도록 인터렉티브한 UX를 제공하기 위해 만들어졌습니다. 이러한 내용의 사례로 약간의 그림자들을 더함으로서 버튼들에 보다 실제적으로 존재하는 느낌을 주었으며, 가장 중요한 버튼에 대해서는 더욱 큰 그림자를 줌으로써 직관적으로 다른 UI요소 보다 눈에 띄게 만드는 등을 들 수 있습니다.
구글은 안드로이드 모바일 앱용으로 매테리얼디자인의 가이드를 만들었지만, 디자이너들은 이를 최대한 활용해 웹사이트 디자인에서 활용하고 있는 형국이며 최근에는 웹디자이너들이 매테리얼디자인LITE라는 웹디자인용 디자인 가이드(디자인 언어)를 만들기도 했습니다.
예시) 클라우드 기반 조명 회사인 Numbus 9은 매테리얼디자인을 매우 잘 활용했습니다.
5. 카드레이아웃은 여전히 훌륭합니다.
핀터레스트는 정보들을 카드 안에 통합해서 배치하고 빠르게 자신의 흥미에 맞는 카드들을 스캔하게 함으로써 콘텐츠에 대한 접근성을 높였다고 할 수 있습니다. 핀터레스트의 그리드 시스템 안에서 정돈된 사이트의 룩은 이미지와 헤드라인 텍스트가 매우 중요한 역할을 한다고 볼 수 있습니다.
카드를 활용한 인터페이스의 컨셉은 매텔리얼 디자인의 시작과 그 괘를 같이 하고 있다고 볼 수 있습니다. 아주 약간의 그림자와 경계선을 통해서 깊이감과 콘텐츠, 배경, 다른 페이지와의 경계를 분명히 합니다. 기능을 정돈하거나 이벤트를 별도로 표시, 미디어를 보여주는 데에 있어서 아주 효과적인 역할을 합니다.
대부분의 사용자들이 7초라는 짧은 시간 동안만 관심을 나타내는 것으로 나타났는데, 이 카드레이아웃 트렌드는 사용자들이 보다 쉽게 콘텐츠에 매료될 수 있게 도와주는 역할을 합니다. 우리는 2016년에도 이러한 역할을 하는 것을 보다 자주 보고, 더욱 확장된 방식으로 카드레이아웃이 활용되는 것을 보게 될 것이라고 생각합니다.
예시) 디자이너라면 드리블을 영감을 받기 위해 이용하는 경우가 있을 것입니다. 드리블의 카드 중심의 UI는 최신과 가장 좋은 컨텐츠를 보여주는 역할을 합니다. 그나저나 우리 SQUARE506의 디자이너 Helen Oldham의 드리블에서 라이크를 좀 주세요
6. 인터렉티브 요소는 사용자들의 관심을 이끕니다.
앱과 웹 상에서 우리는 사용자로서 하루에도 수도 없이 인터렉션합니다. 페이스북에서 지구본 위에 빨간색 동그라미로 읽지 않은 메시지들이 표시되어 있는 아이콘을 클릭하는 행위나 인스타그램에서 스크롤을 하면서 다른 이들의 사진을 감상하는 것을 생각해 보십시오. 사용자들은 단순히 콘텐츠를 보는 것이 아니라 동작을 통해서 콘텐츠를 소비하고, 좋아요를 누르고 댓글을 달기도 합니다.
인터렉티브 요소들은 수동적으로 정보를 받아들이는 것이 아니라 사용자들이 보다 적극적으로 웹사이트 경험에 참여할 수 있게 해줍니다. 일상 생활의 일부가 된 인터렉션들이 있으며 그러한 것들은 사용자 경험을 보다 개인화시켜줌과 함께 중독성을 가미시켜 주기도 합니다.
이러한 이유로 여러가지 액션에 대한 트리거를 배치하고, 슬라이드아웃 네비게이션 바를 배치하는 등의 다양한 인터페이스를 구현해 놓는 것입니다. 인터렉티브 요소들이 이미 모바일과 웹 상에서 많이 이용되고 있다고 하더라도, 이러한 인터렉티브 선호 추세는 앞으로도 계속 이어질 것으로 전망됩니다.
예시) 구글의 Inside Abbey Road는 인터렉션에 기반해서 콘텐츠를 보여줍니다. 비디오와, 세세한 애니메이션, 인테릭티브 지도, 360도 뷰, 온클릭이벤트들은 매우 집중도 높은 인터렉티브 경험을 만들어냅니다.
7. 일러스트와 애니메이션은 웃음과 흥분을 더합니다.
스크롤 애니메이션과 일러스트화된 배경 이미지는 지난 몇 년간 큰 인기를 끌고 있고 이것은 변하지 않고 있습니다. 디테일을 더하고 몰입도를 높이기 위한 섬세한 일러스트와 애니메이션의 사용은 모든 스크롤 사이트에서 인기를 끌고 있는 트렌드입니다.
일러스트는 사진으로는 전달하기 힘든 시각적으로 흥미로운 방법으로 메시지를 전달하는 매우 효과적인 수단이 될 수 있습니다. 애니메이션 또한 이러한 차원에서 바라볼 때, 인터랙션과 합쳐졌을 때 매우 유니크하면서 몰입도가 굉장히 높은 사용자 경험을 만들어낼 수 있습니다.
애니메이션은 크게 두가지 타입이 있다고 볼 수 있습니다. 하나는 콘텐츠로서의 애니메이션이고, 다른 하나는 UI요소로서의 애니메이션입니다. 콘텐츠로서의 애니메이션은 패럴럭스 웹페이지나 화려한 콘텐츠 트렌지션 효과 등을 예로 들 수 있습니다. UI요소로서의 애니메이션이 보다 미묘하고 섬세하게 적용되는 면이 이ㅆ으며, 이러한 예로 햄버거 메뉴나 마우스오버 애니메이션, 드롭다운, 슬라이드아웃, 로딩바 등의 작은 효과 등을 예로 들 수 있습니다.
일러스트와 이러한 애니메이션 효과들은 과감하면서도 이해가 쉬운 UI를 구성하기 위해 함께 적용될 수 있으나, 모든 일이 그렇듯 남용되면 안 좋은 면이 발생하기도 하는 측면이 있기도 합니다. 애니메이션과 일러스트를 배치할 때는 목적성을 잃지 않고, 사용자 중심적 사고를 바탕으로 이를 구성하는 것을 잊지 말아야 할 것입니다.
예시) SQUARE205에서 만든 이 사이트는 원페이지 웹사이트인 이 예시는, 다양한 스크롤 이벤트를 내재하고 있습니다.
트렌드는 어디까지나 '활용'을 잘 해야 합니다.
사실 지금까지 말한 트렌드들을 머리 속에서 바로 지우는 것이 당신의 크리에이티브한 작업을 위해서는 더 좋을 지도 모릅니다. 트렌드는 실용적이고 가이드를 제시해주는 역할을 합니다만, 일종의 법칙이나 항상 통용되는 최적의 수단으로 보는 것은 잘못된 생각입니다.
언제나 그렇듯 사용자에게 집중하세요. 언제나 그렇듯 그것이 가장 중요합니다.
2016.01
Paul Echols, Square 205
저작권 관련 정보 (License Info.)
|
'UX 리서치 > 디자인 이론과 리서치' 카테고리의 다른 글
| 좋은 인터페이스 디자인(UI디자인)의 8가지 법칙 (0) | 2019.03.02 |
|---|---|
| UI디자인 패턴 파악에 도움을 주는 10개의 사이트 (0) | 2019.03.02 |
| 웹디자인(HTMl/CSS/JS)을 온라인으로 배우는 방법 소개 (2016년 기준) (0) | 2019.03.02 |
| 디터람스의 '좋은 디자인의 10가지 원칙' (0) | 2019.03.02 |
| 사용자를 사로잡는 B2B 소프트웨어를 디자인하는 4가지 방법 (0) | 2019.03.02 |
