2017년 웹 디자인의 10가지 실용적인 트렌드

 

2017년 웹 디자인의 10가지 실용적인 트렌드

 

(참조 자료: 10 sensible web design trends for 2017)

 

필자가 컨텐츠의 제목을,

좀 더 이목을 끌면서 있어 보이는 형용사를 사용하여

‘주요한 트렌드’라고 표현하지 않고,

‘실용적인 트렌드’라고 표현한 이유는

2017년의 웹 디자인 트렌드의 목적이

사용자의 니즈를 충족시키는 것이기 때문이다.

 

 

 

 

 

 

 

 

이것이 무슨 말이냐 하면,
브라우저에서 무엇을 구현할 수 있는지에 치중된,
소위 과시하는데 집중하던 트렌드는 한물가고,
이제는 디자인 형식이 기능을 따르는
적절하면서 과하지 않은 디자인이 트랜드로 자리잡았다.

 

가상현실이나 눈길을 끄는 애니메이션 효과에 집중하는 웹 디자인은 버려라.
2017년의 트렌드는 바로 공리주의이다.

 

 

 

 

 

1. 적어진 메뉴 옵션

2016년, 많은 웹사이트가 메인 네비게이션 메뉴의 개수를 줄이도록 재설계되었다.
이는 2017년 커다란 트렌드가 될 것이다.
이전에는 헤더 메뉴(header menu) 의 개수가 대부분 5-7사이였다면,
이제는 3-4개 사이로 줄어들 것이다.

이 같은 트렌드가 발생하는 이유는
최근 마이클 샌즈트롬의 (Michael Sandstrom) Econsultancy 기사내용에서
요약되어 설명된 선택 마비 완화 (mitigating choice paralysis) 때문이다.

선택지가 적을수록 사용자는 그들이 찾고자 하는 것을 더 쉽게 발견할 수 있다.
아래 이케아의 최근 재설계된 웹디자인은 이전 디자인과 비교했을 때
앞서 설명한 트렌드를 반영하는 훌륭한 사례이다.

 

 

이케아의 ‘이전’ 웹사이트

 

 

 

 

 

2016년 재설계된 이케아의 웹 디자인

 

 

 

 

 

 

2. 햄버거 메뉴 버튼의 부재

특히 모바일 환경에서 흔히 쓰던 햄버거 메뉴 버튼에 이제 작별을 고하자.
그렇다. 이 아이콘(버튼)은 메뉴 바 한 귀퉁이에 자꾸만 자리잡고 있지만
사용자들은 이게 뭐 하는 버튼인지, 뭘 의미하는 건지 잘 알아보지 못한다.

더욱 중요한 것은,
햄버거 메뉴버튼이 당신의 웹사이트가 가진 깊이나 넓이를 감춰버릴 뿐 아니라
사용자들에게는 아무런 방향도 제시하지 못할 수도 있다는 사실이다.

 

사용자의 눈에서 멀어지면, 마음에서도 멀어지게 되는 법이다.
결국 이러한 현상은 사용자의 방문을 줄어들게 만들 것이다.

 

예시로 스포티파이 (Spotify) 앱은
그들의 앱에서 햄버거 메뉴를 삭제하였으며,
이는 곧 다가올 트렌드를 명확히 보여준다.

아래 스포티파이(Spotify)는 모바일웹에서 햄버거 메뉴를 제거하였다.

 

 

 

 

 

 

 

3. 듀오톤 (컬러의 방향)

구글에 ‘듀오톤 사례 (duotone examples)’ 로 이미지 검색을 하면
이 기술이 무엇인지에 대해 알 수 있으며 그에 따른 수많은 예시 이미지도 볼 수 있을 것이다.

아래 이미지는  캐피탈 원 랩스 (Capital One Labs)의 스크린샷이며,
이 사례는 홈페이지를 더욱 돋보이게 하는 듀오톤 효과를 사용하고 있다.

듀오톤은 텅 빈 웹사이트와 내용이 많고
산만한 웹사이트 간의 균형을 맞추는 데 사용되는데,
이 방법을 사용하면 주요 메시지나 네비게이션 메뉴에 대한 방문자의 집중을 흐트러트리지 않고도
여전히 이미지를 포함시킬 수 있다.
더욱 높은 해상도의 테마 이미지나 여러 가지 이미지가 동시에 사용될 시
일관성을 갖기 위해서 듀오톤 기술이 더 많이 사용될 것이다.

 

 

 

 

 

 

 

4. ‘촉각’ 디자인

구글은 올해 매터리얼 디자인 (Material Design)을 더 명확히 규정하였으며
(구글을 매터리얼 디자인 지침서를 ‘살아있는 문서’라고 지칭한다),
2017년에는 많은 웹 디자이너들이 이와 같은 구글의 트렌드를 따르게 될 것이다.

요약하자면, 매터리얼 디자인은 평면 디자인이 가진 특성도 다수 가지고 있지만 (다채로운 색을 가진 화려하고 그래픽적인 디자인),
매터리얼의 느낌을 사용하여 표면이나 모서리의 구분, 재구성된 공간과 같은 촉각적 요소도 지니고 있다.
이 디자인의 궁극적인 목적은 ‘플랫폼의 종류나 디바이스의 크기와 관계없는 단일화된 경험’을 제공하는 것이다.
즉 이는 UX에 관한 것이다.
매터리얼 디자인 페이지에 방문하여 이 프로젝트에 관한 구글의 배경설명을 읽거나
materialup 을 방문하여 매터리얼 디자인을 사용한 다수의 웹사이트 및 앱 사례를 살펴보라.

 

 

 

 

 

 

5. 패럴랙스 스크롤(parallax scrolling)에게 작별을.

패럴랙스 스크롤은 (Parallax scrolling) 실용적 기능이라기 보다는
강한 인상을 남기기 위한 디자인 트렌드를 반영한 전형적인 방법 중 하나이다.
이는 배경과 전면 내용이 다른 속도로 스크롤되어 페이지에 깊이를 더해준다.

페이지 맨 위에 있는 테마 이미지에만 패럴랙스 스크롤을 사용
Firewatchgame.com에서 상대적으로 부분적인 사용 효과를 확인할 수 있다.

더욱 이 효과를 배가시킨 사례를 보고 싶다면, AlfredService.com을 방문하라.
이러한 사이트 대부분은 사용자들을 짜증나게 하거나 당황시키는
‘스크롤재킹(Scrolljacking)’을 유발한다.
(스크롤 재킹 : 페이지의 움직임과 마우스의 스크롤이 정확하게 일치하지 않는 상황)

이러한 시차 경험이 가진 단점은 사용자들을 당황시킬 뿐 아니라 로딩 시간이 늘어나고
사이트의 대부분이 그래픽일 시, 검색엔진 최적화 (SEO)에도 치명적일 수 있다.

2016년, 필자는 애니메이션이 대다수의 웹사이트들 중 단연 돋보일 요소라고 주장했지만
실용적 성능에 집중하게 된 올해 트렌드를 볼 때, 패럴랙스 스크롤은 너무도 거슬리는 기능이다.

 

 

 

 

 

 

 

6. 의미있는 모션

매터리얼 디자인이 가진 원칙 중 하나는 ‘모션이 의미를 제공한다’는 것이다.
여기서 모션이 의미를 제공한다는 것은 앞서 말했던
패럴랙스 스크롤과 같은 애니메이션 효과를 말하는 것이 아니라,
웹 페이지와 앱에서의 모션을 개선시키는 사례를 들어 설명하겠다.

구글은 모션이
‘- 의미있고 적합하며, 주의를 끌고 지속적이어야 한다.
- 피드백은 미묘하지만 명확해야 한다.
- 이동은 효율적이지만 일관적이어 한다’
라고 유려하게 설명한다.

안드로이드 웹사이트를 통해 검색하면 몇 가지 예시를 보게 될 것이다:
• 상단 메인 Carousel 헤더 배너에 있는 텍스트들이 휘어지는 방식
• 전반적으로 Carousel 이미지 뷰어들이 완전히 한 바퀴를 도는 방식
• 동적 메뉴 (OS 디바이스) 선택 시, 이미지가 슬라이드 되는 방식
2015년에 출시되었지만, 작년 매터리얼 디자인 상을 수상한 텀블러(Tumblr) 앱도 좋은 사례라고 볼 수 있다.

 

 

 

 

 

 

 

 

7. 스탁 (stock)이미지는 이제 끝.

고화질 이미지가 넘쳐나고
디지털 변환 과정을 겪고 있는 사용자 중심의 회사들이 즐비한 현재,
형편 없고 대표성도 없으며 창의적이지도 않은 스탁 이미지는 더이상 설 자리가 없다.

회사 웹사이트는 눈길을 끌고 그 비즈니스의 가치를 반영해야 하는데,
아래와 같은 특색도 의미도 없는 이미지로는 그 목적을 달성하기 어려울 것이다.

 

 

스탁 이미지

 

 

 

 

8. 적은 어플리케이션, 더 많은 PWA

2016에는 몇 가지 고급 PWA(Progressive Web Apps)의 개발과 함께
어플리케이션으로부터 영감을 받은 웹 디자인이 주목을 받았다.

PWA는 HTML5와 JavaScript 기술을 기반으로 하며
첫 방문에 모든 중요 데이터를 캐싱하고,
푸시 알림 및 홈 스크린 아이콘과 같은 오프라인 기능도 제공한다.

길이가 긴 앱 개발에 있어서는 PWA가 유리하며
워싱턴 포스트, 에어버린 (Airberlin), 플립카트(Flipkart) 등이 이 디자인을 사용하고 있다.

 

 

 

 

 

 

 

 

9. 구글 폰트

2010년 구글은 오픈 소스 글꼴 라이브러리를 만들었다.
그리고 2016년, 매터리얼 디자인을 연구하면서
구글 폰트 서비스 또한 개편했다.(Google Fonts service)

더 빠르고 간편한 글꼴 미리보기가 가능해진 이 서비스는
다양한 배경 색상에서의 글꼴을 미리볼 수 있는 기능을 지니고 있다.

글꼴을 설정하는 것도 더욱 간편해졌으며
매터리얼 디자인에 가장 적합해 보이는 글꼴들을 강조해주기도 한다.

흥미롭게도 구글은 노토(Noto)라는 무료 글꼴을 개발하여
800여 가지의 다른 언어로 응집된 시각적 언어를 제공함으로써
언어 설정을 변경하거나 스크립트를 병렬시킬 때 연속성을 유지할 수 있도록 하였다.

2017년에는 더욱 많은 디자이너들이 구글 폰트를 사용할 것으로 예상된다.

 

 

 

 

 

 

 

10. 미니멀리즘

 

 

이 트렌드는

 

현재 언급되었던 리스트에 올라 있는

 

다른 트렌드들의 특성을 모두 압축하여 지니고 있다.

 

 

 

미니멀리즘은 성능 (속도)와 깔끔한 UX에 중점을 둔다는 의미이다.

 

 

 

이 트렌드는 사용자들이 모든 컨텐츠들이

 

화면 위쪽에 빽빽이 모여 있을 것이라 기대하지 않기에

 

모바일 스크린에서도 명확해야 할 뿐 아니라

 

사용자에게 스크롤링을 권장하는 반응형 웹사이트로 움직이려는 흐름으로부터 시작되었다.

 

 

 

타이포그래픽, 명암 및 공간 또한 중요하다.