모바일/웹 디자인 트렌드 2017
서비스디자인랩 김성동 선임
모바일 디자인 트렌드는 스큐어모피즘에서 플랫디자인으로의 큰 전환 이후로는 몇 년간 비슷한 형태를 보이고 있습니다.
유플리트 디자인팀과 SDLab에서 공동으로 진행한 모바일/웹 디자인 트렌드 리서치는 아래와 같은 단계를 거쳐 진행하면서 왜 이런 트렌드가 나타나는지 UX/UI 관점에서 고민해 봤습니다.
1. 거시적 키워드 도출
2. 내부 리서치 분석(확장)
3. 시사점 도출
1. 거시적 키워드 도출
우선 디자인팀과 SDLab에서 아래 명시된 디자인 트렌드 칼럼을 분석하여 키워드를 분류했습니다. 공통적으로 언급되는, 같거나 비슷한 부류의 내용을 그룹핑하여 일차적으로 거시적인 키워드를 도출합니다.
거시적 맥락에서의 키워드 도출2.DesignTrendsPredictions for 2017
3.Webdesign trends we can expect to see in 2017
4.DesignTrends in 2016 & What to Expect in 2017
5.6 WebDesign Style Predictions for 2017
2. 내부 리서치 분석, "확장"
이후 아래의 프로세스를 통해 분석을 진행합니다. 같은 디자인이라도 접근하는 형식에 따라 다른 뷰포인트를 가질 수 있습니다. 같은 형태를 보고도 다른 의미를 이끌어 낼 수 있기에 생각을 조금 더 확장해 보기로 했습니다.
여러 가지 키워드가 도출되었습니다.
우리는 각각의 키워드가 어떤 점에서 트렌드를 이끌고 있는지 이유를 파악하고자 했습니다.
1) 대화형 UI/챗봇(AI)
보다 자연스럽고 흐름을 끊지 않는 UX/UI의 필요성에 따라 메신저를 통한 검색/결제/예약 등의 활용이 점차 증대될 것으로 보입니다. 작은 화면 안에서의 인터랙션과 요소의 사용이 무엇보다 중요해질 것입니다.
mcDonalds facebook messenger bot prototype in FramerJS
메신저를 통해 모든 이커머스 및 금융 서비스도 진행될 가능성이 높아졌다.2) 감성적인 스타일 요소의 증가
페이스북은 '좋아요'버튼과 함께 이모지를 추가했습니다. 이전부터 유저들은 더 많은 공감을 위한 장치를 필요로 했습니다.
핸드드로잉 아이콘처럼 독특한 스타일도 증가하고 있습니다. 더 단순해지고 선명해지면서도 따뜻한 느낌을 줄 수 있으며 개성을 나타낼 수도 있습니다.
https://dribbble.com/shots/3060990-Halloween-Reactions
다양한 이모지로 감정을 표현할 수 있다.
3) 작은 공간의 활용, 연결성을 갖는 모션
마이크로 인터랙션 = 모션이라는 생각이 들 정도로 점점 더 많은 상호작용 모션의 등장이 진행되고 있습니다. (마이크로 인터랙션이 단지 모션을 뜻하는 것은 아닙니다)
작은 디스플레이로 인한 UI Flow 단절에 대한 대안으로 점차 더 증가될 것으로 보입니다.
구글 머터리얼 디자인에서는 Material Motion 가이드를 내려주고 있습니다.
연속성과 일관성이 향상되며 유저 플로우 감소에도 도움이 되고 시각적 피드백 및 행동유도(어포던스)부분도 향상됩니다.
적절한 마이크로 인터랙션을 통해 유저플로우를 감소시킬 수 있으며 시각적 피드백도 향상된다.4) 백그라운드 비디오, 듀오톤 이미지
풀 이미지&비디오, 시네마그래프(움짤)등을 통한 비주얼 이미지에서 브랜드 무드를 조성합니다.
비디오는 이미지보다 더 감정적이고 몰입에 도움이 되기 때문에 스토리텔링에 더 적합합니다.
https://www.airbnb.co.kr/experiences/58?source=p1
http://cinemagraphs.com/lifestyle/
Airbnb웹사이트, 모바일에 최적화 하기 위해 데스크탑웹에서도 세로 영상을 사용한다.
듀오톤을 사용하여 개성을 부여한 Spotify
시네마그래프를 이용하면 사용자의 몰입을 높일 수 있다.5) 단순하지만 직관적인 도형의 사용
이미지와 내용을 강조하고 프레임 화하여 정보를 효과적으로 전달할 수 있습니다.
도형의 크기만으로 정보의 중요도를 쉽게 파악할 수 있습니다.
디지털과 모바일에 맞추어 도형의 선명함과 단순함을 표현하는데 집중합니다.
https://dribbble.com/shots/2988440-Favorite-People
애플뮤직 세팅화면.
즐겨찾기나 사용량이 많은 부분을 도형으로 표현하면 인지하기가 쉽다.
디지털과 모바일에 맞추어 새롭게 BI를 발표했다(2016). 선명함과 단순함에 집중했다.6) 쉐도우/반투명 블러 - depth의 활용
공간감을 통한 버튼, 아이콘, 텍스트 등 UI 기능 정의 부분에서 최초의 flat디자인 보다 우수해졌습니다.
구글 머터리얼 디자인의 등장으로 인해 더욱 증가되는 추세입니다.
https://design.google.com/articles/airbnb/#hero
https://dribbble.com/shots/3180130-Animation-of-Collocation-Channel
구글머터리얼 디자인을 적용한 Airbnb
iOS의 Depth of field 가 적용된 디자인7) 단순한 컬러스킴
단순한 컬러스킴이 더 좋은 사용자 경험을 개선합니다.
콘텐츠와 탐색에 중점을 둔 명확하고 단순한 인터페이스, 가볍고 여백이 많은 디자인이 가독성 높은 사용자 경험을 지원합니다.
특정 포인트에 시각적 아이덴티티를 부여합니다.
3. 시사점
위에 나열된 키워드를 묶어서 큰 흐름을 살펴보았습니다.
모바일에 더 가까워지고 이제는 모바일에서만(only mobile) 필요한 디자인을 고민해야 합니다.
작은 화면에서의 사용자 경험을 높이기 위해 더 좋은 아이디어가 필요하고 어떻게, 무엇으로 구현할지 찾아야 합니다.
정보전달에 적합하게 더 단순해지고 더 직관적인 형태를 추구합니다. 반대로, 인게이지먼트를 높일 수 있는 요소를 찾아내어 적절히 사용해야 합니다.
참여
SDLab : 김성동
Design Team : 김정탁, 황수진, 이수진, 이근주
