안녕하세요. 프리모아의 Mac 입니다.
정보를 뇌로 전달하는데 있어 가장 좋은 방법은 바로 시각적인 효과를 주는 것이라고 합니다.
어떠한 물체에 대해서 텍스트로 전달 하는 것 보다 눈으로 직접 보면 뇌는 그 물체에 대해서 몇만배나 빠르게 인식이 가능하다고 합니다.
바로 이것이 디자인이 중요하게 여겨지는 이유중에 하나인데요.
그런 디자인에 있어서 트렌드를 파악하는 것은 매우 중요합니다.
나날이 빠르게 발전하는 기기들만큼이나 디자인에 대한 트렌드도 점점 다양해 지고 있는데요.
오늘은 웹 디자이너분들을 위한 '2016년 웹디자인 트렌드' 를 알아보고자 합니다.
- 디자인 트렌드
디자인에 대해서 나오는 얘기중에 하나는 평가가 지극히 주관적이라는 것 입니다.
어떤 사람에게는 최고의 디자인이라고 평가받아도 어떤사람에게는 눈길이 가지 않을 수 있습니다.
이렇게 정답이 정해지지 않은것이 디자인의 매력이기도 한데요.
그런 디자인에도 시대에 따라서 흐름은 존재합니다.
흐름을 따르는 것과, 자신의 방식을 고수하는 것. 어느것도 옳고 그르다고 할 순 없는데요.
옳고 그름을 떠나 웹디자이너 분들에게 참고가 될 수 있을만한 디자인 트렌드 자료들을 모아 보았습니다.
1. Material Design(마테리얼 디자인)
마테리얼(Material)은 재료 즉 가장 기초가 되는 요소를 말합니다.
기존의 노트북과 컴퓨터에서 이용되던 웹 디자인은 보다 화려하고, 보다 예쁜 UI와 애니메이션 플래쉬등이 많이 사용되었습니다.
그러나 웹을 출력 할 수 잇는 기기들이 점점 많아지면서 방식이 바뀌게 되었는데요.
복잡하고 예쁜 디자인 보다는 간결하고 단순하게 컨텐츠의 본래 목적만을 직관적으로 표현하는 디자인이 급부상 하게 되었습니다.
마테리얼 디자인은 평면디자인이지만 2차원이 아닌 3차원의 개념을 갖고있습니다.
디자이너분들이 많이 접하시는 포토샵의 레이어와 비슷한 개념이라고 보시면 간단 할 것 같습니다.
사물(Material)을 여러 겹 겹쳐놓은 듯한 모습이며, 모든 앱들이 어떠한 기기에서도 통일한 느낌을 줄 수 있도록 기본 가이드라인을 정해놓은 것입니다.
거기에 간단하고 깔끔한 디자인에 맞게 컨텐츠에 맞는 아이콘등을 사용하며 사용자들에게 더욱 직관적인 정보 전달이 가능한 디자인 방식입니다.
2. 고화질 이미지와 시네마 그래프
앞에서도 언급한 내용이지만 사람의 감각으로 하여금 가장 큰 영향을 미치는 것은 시각적인 효과입니다.
새로운 트렌드로 자리잡고 있는 것중에 하나인 풀 스크린 배경은 사용자의 시선을 끄는 좋은 방법입니다.
고화질의 이미지를 메인 화면에 가득 채워 보여주는 것이 바로 풀 스크린 배경인데요.
디스플레이의 해상도가 높아지면서 사용자들은 더욱 선명하고 높은 화질을 원하게 되었습니다.
이에 맞춰 높은 해상도의 이미지들을 구하기도 쉬워졌는데요.
고화질의 이미지는 사용자의 시선을 사로잡기에 좋습니다.
또, 최근에는 시네마와 그래픽의 합성어인 시네마 그래프라고 불리는 이미지도 트렌드로 자리잡고 있습니다.
정적인 이미지에서 일부분만이 움직이는 독특한 형식의 이미지인데요.
풀 스크린 배경에 고화질의 이미지 혹은 시네마 그래프를 이용한 웹 디자인이 2016년에 더욱 유행 할 것이란 전망입니다.
3. 일러스트, 타이포그래피
두번째로 언급했던 고화질 이미지에 상반되는 트렌드도 있습니다.
디자인쪽에서는 꾸준히 그 강세를 이어오던 일러스트와 타이포그래피가 바로 그것인데요.
고화질 이미지의 웅장함으로 시선을 사로잡는 것과 다르게 직접 그린 일러스트도 떠오르는 트렌드중에 하나입니다.
스토리텔링이 유행을 타기 시작하면서 어울리는 그림을 직접 그려 내용을 전달하기도 용이하다는 장점을 가지고 있습니다.
또, 풍부한 표현 방식을 통해서 사진보다 다양한 의미 전달이 가능하다는 점에서도 꾸준히 사랑받는 방법입니다.
일러스트 자체만으로 만족하지 못한다면 시네마 그래프 방식도 일러스트에 포함 할 수 있으니 일러스트에 관심이 많으신분들은 참고하셔도 좋을 것 같습니다.
타이포그래피는 텍스트를 디자인하며 보다 높은 가독성을 보여주기 위해 사용되었습니다.
웹을 이용하는 사용자가 점점 증가하고, 그에 따라 사용자들에게 보다 신선한 느낌을 주는 것이 타이포그래피의 숙제라고 생각됩니다.
최근에는 웹 폰트들도 다양하게 나오고 있어서 보다 다채로운 타이포그래피가 가능해졌고, 이런 웹 폰트들을 사용하여 사용자들에게 신선하고 생기있는 디자인을 하는것이 중요해졌습니다.
- UI에 따른 변화
기기가 다양해지며 가장 많은 변화를 거쳐온 것은 UI가 아닐까 싶습니다.
기존의 4:3 비율의 모니터에서 와이드로 변화하며 웹 페이지는 보다 넓은 전체적인 관점을 보게 바뀌었고, 스마트 기기들이 나오게 되며 그 다양성은 이루 말할 수 없을만큼 많아졌습니다.
UI는 이러한 다양한 기기들에 맞춰 진화했고, 다양한 기기에 적응 할 수 있는 반응형 UI 도 나왔습니다.
그러나 반응형 UI들이 많아지며 사용자들에게는 비슷한 레이아웃으로 보여 지루함을 줄 수 있다는 단점이 생겼습니다.
2016년에는 이런 비슷하게 보일 수 있는 레이아웃을 보다 색다르게 보조해줄 디자인이 요구된다고 합니다.
어떠한 디자인들이 반응형 디자인을 보조해 줄지에 대해서 알아보았습니다.
1. 긴 스크롤
데스크탑에서 출력되는 내용을 모바일로 옮기게 되면 자연스레 스크롤이 길어지게 됩니다.
모바일을 많이 사용하는 사용자들은 이러한 이유때문에 긴 스크롤이 익숙합니다.
긴 스크롤의 UI디자인은 스토리 텔링과도 잘어울리며, 네비게이션과 접목하면 멀티페이지 사이트의 효과도 볼 수 있습니다.
2. 카드 레이아웃
핀터레스트가 사용한 이후 많은 웹디자이너 분들이 애용하고 있는 스타일입니다.
여러 정보를 가볍게 훑어보아도 내용을 어느정도 전달 할 수 있습니다.
각 카드는 저마다 다른 개념으로 이루어져 있으며, 하나의 '콘텐츠 컨테이너' 로써 그 배치가 자유롭습니다.
이러한 자유로운 배치는 디바이스마다 다른 해상도를 출력해야하는 반응형 웹사이트에 맞춰 쉽게 재배치가 가능합니다.
3. 메뉴와 네비게이터
웹페이지의 디자인이 다양해지면서 메뉴에 대한 고민도 많아졌습니다.
UX UI에서 사용자의 편의를 위해서 메뉴를 어떤 방식으로 넣을 것인지는 디자인에서도 많은 영향을 주기 시작했습니다.
햄버거 메뉴, 탭바 등의 여러 방식이 등장햇으나, 그에 따른 단점과 장점은 논쟁의 대상이 되고 있습니다.
최근 업데이트된 YouTube 는 이러한 논쟁에서 새로운 방식으로 접근하였습니다.
상단 탭으로 가장 많이 사용되는 메뉴만을 Swipe하게 만들어 놓았는데요.
주목할점은 이 방식은 YouTube를 사용하는 사용자들에게 보다 빠르고 편리하게 동영상을 찾을 수 있도록 만든 디자인 이란 점입니다.
웹디자인의 가장 중요한점은 바로 사용자라는 점이며, 사용자들로 하여금 보다 편하게, 보다 빠르게 목적에 다다를 수 있게 해주는 것이 중요합니다.
2015년에는 다양한 기기에 출력되는 디스플레이 자체의 난전이었다면, 2016년에는 이렇게 태어난 반응형 웹 페이지를 얼마나 사용자들에게 편하게, 빠르게 제공할 수 있느냐가 승부수가 될 것 같습니다.
