2017 UX Design Trend 7
UX 디자인 배우기 #57
Today UX 아티클
※ 이 글은 INKONIQ에 올라온 Pankaj가 작성한 「7UX Design Trends to Watch out for in 2017」를 원작자의 동의하에 전문 번역 및 게시한 글입니다.
2016년도는 사용자 경험 분야에 있어서 과격한 한 해였습니다! 일시적인 유행처럼 시작되었던 트렌드가 올해 급부상하는 현실이 되었습니다. 하지만 이런 트렌드는 여러분이 생각하는 것 보다 빠르게 바뀌고 있습니다. 그러면 여러분과 여러분의 비즈니스는 계속해서 바뀌는 웹과 모바일 경험의 세계에서 발생하는 사건들에 어떻게 대처하시나요?여러분 비즈니스의 미래 전략을 제대로 진행하기 위해서는 새롭게 부상하는 UX 디자인 트렌드를계속해서 업데이트 해야 합니다.
크게 힘들일 필요 없습니다. 다음은 저희가 생각하기에 모바일 앱 경험 분야에서 웹 디자인의 중심을 뒤흔들고 있다고 느끼는 가장 핫한 트렌드입니다. 여러분을 위해 저희가 전부 모아봤습니다.
#1 카드, 스크롤링, 패럴랙스 … 사라지지 않을 것
올해 머티리얼 디자인의 길을 터주느라 미니멀리스틱 디자인이 바쁘긴 했지만, 2017년에 “스큐어모피즘”이 어느 정도 돌아올 것으로 예상됩니다. 하지만 과시하는 식으로는 아니고, 컬러풀하고 아름다운 머티리얼 디자인 인터페이스에서 은은하게 스며든 스큐어모픽 요소, 메타포, 에스테틱스등을 찾을 수 있게 될 것입니다.
카드 UI 레이아웃은 머티리얼 디자인이라는 메인스트림과 모던 오디언스가 가지고 있는 반응형 디자인 니즈에 정확히 매칭되는덕을 다시 한 번 보게 될 것입니다. 이런 점들이 함께 합쳐져서 많은 양의 내용을 작은 덩어리로 묶어서보여줄 수 있게 되는데, 오디언스는 더 쉽게 이해할 수 있고 빠르게 스캔할 수 있게 됩니다. 콘텐츠를 필터링하고, 커스터마이즈하고, 분류할 수 있는 더 나은 옵션을 유저에게 주기 때문에 개인화에도 딱 적합합니다.
스크롤링은‘유저의 스크롤링에 따라 재생되고 일시 정지되는 비디오 기반 콘텐츠’와 ‘유저의 인풋에 따라 움직이고 변하는 애니메이션’의 부상덕분에 2017년도에 메인 스트림이 될 것입니다. 스크롤링은 UX 전문가들이 절대 좋아하는 요소가 아니긴 하지만, 2017년도에는 인터페이스에서 스크롤링을 사용하는 혁신적인 방법이 부상할 것이며, 이미 애플이 자사 웹사이트에 적용하면서 시동을 걸었습니다.
부상할 것으로 예상되는 또 다른 효과는 바로 패럴랙스(parallax) 효과로, 2017년도에는 영리한 패럴랙스 효과를 많이 보게 되실 것입니다. 패럴랙스는 제대로 적용하기만 하면, 스크린에있는 요소가 끌려 올라가면서, 배경보다 전경이 빠르게 움직이는 역동적인 3D 효과를 만들어주는 볼거리가 될 것입니다.
인터랙션 안의 인터랙션
마이크로인터랙션은 2015년도엔 많은 사람들이 또 다른 현란한 용어로 남을 것이라고 조롱했지만, 2016년도가 되면서 생각하는 사람들이 아닌 행동하는 사람들 사이에서 인기를 얻기 시작하는 것을 보았습니다.
태스크 기반의 인터랙션은 훨씬 더 작은 태스크로 쪼개졌고 이런 작은 태스크들은 다시 훨씬 더 작은 인터랙션으로 쪼개집니다. 마이크로인터랙션은 와이파이 네트워크에 기기를 연결해야 하지만, 훨씬 더 작은 인터랙션들은 빠른 세팅 메뉴를 이용해서 와이파이가 켜졌다가 꺼졌다 하는 상황에 대처할 것입니다. 2017년도에는 애니메이션과 제스쳐가 인터랙션의 성장을 견인하며 엄청나게 발전할 것입니다.
UX의 중요한 측면인 스토리텔링은 2017년도엔 애니메이션에 의해 발전할 것입니다. 애니메이션은 스토리를 쇼케이스 해주는 고화질의 이미지에서부터 시작해서, 콘텐츠가 로딩되기를 기다리거나 인터페이스를 탐색하는 유저를 즐겁게 해줄 작은 호버/로딩 아이콘까지 다양할 것입니다.
하지만 이게다가 아닙니다. 눈길을 끄는 인터페이스를 만들기 위해 만들어진 풍부한 애니메이션와 혼합된 ‘제스쳐’도 보게 될 것입니다. 모바일디바이스는 점점 더 주류가 되고 있는데, 제스쳐도 이런 흐름과 함께 더 이상 밋밋한 스크롤, 터치, 핀치, 줌 등에국한되지 않고 더블 터치 드래그, 투 핑거 프레스, 포스터치, 회전 등으로 발전하고 있습니다. 애니메이션은 제스쳐에의해 움직여질 것이며, UX 담당자들이 유저를 위해 시각적으로 강력한 정보 구조와 즐거운 경험을 만들어내는 데 도움을 줄 것입니다.
반응형의 부상, 프로그레시브 웹앱 및 엑셀러레이티드 웹 페이지의 도움
스마트폰 매출은 매년 기록을 갱신하고 있으며, 모바일에서의 속도와 경험은 2017년도에도 계속해서 결정적 요소가 될 것입니다. “반응형” 디자인은 CSS, 미디어 쿼리, 가변 그리드의 도움으로 디바이스의 사이즈에 따라 콘텐츠와 룩(looks)을 조정해주는 효과를 뜻하는데, 웹 디자인에서 계속해서 그 입지를 굳혀갈 것입니다.
많은 회사에서 지속적으로 ‘모바일 우선’ 접근법을 취하려고 하겠지만, 그들의 선택지는 모바일 앱에만 국한되지 않고, 프로그레시브 웹 앱(progressive web apps)와 엑셀러레이티드 웹 페이지(accelerated web page)도 옵션이 되게 될 것입니다.
프로그레시브웹 앱은 앱과 같은 모양과 앱에서 쓰는 모든 기능을 웹으로 제공해서 모바일 앱에서의 경험을 유저에게 전달해주는 데 도움을 줄 것입니다. 그래서 일부 혁신가들은 따로 반응형 웹사이트 및 모바일 앱을 만드는 대신, 모바일앱과 같은 경험과 몰입을 주면서도 발견가능성(discoverability), 링크가능성(linkability), 공유가능성(shareability) 등의 이점을 제공해주는 프로그레시브 웹 앱을 선택할 것입니다.
구글의 또 다른 무기인 엘셀러레이티드 웹 페이지도 모바일 유저에게 가볍고 빠른 사이트를 제공해주어, 느리게 로딩되는 모바일 사이트를 다루는 데 도움이될 것입니다.
비디오는 지금도 대단하지만, 앞으로더 거대해질 것
고품질의 큰 비주얼들이 여전히 웹사이트 이미지를 장악하고 있지만, 2017년도에는 지금은 많이 쓰이고 있는 스톡이미지(stock images) 대신 오리지널 이미지를 많이 보게 될 것입니다. 브랜드에서는 제품의 오리지널 샷을 찍기 위해 전문 사진가들을 고용할 것입니다.
하지만 정적인 이미지는 2017년도에 뒤로 물러나 ‘비디오’에게 길을 내주게 될 것입니다. 페이지에서 움직이는 이미지는 즉시 유저의 관심을 끌고 브랜드 메시지를 보다 효과적으로 전달하는 데 도움이 됩니다. 비디오는 유저에게 보다 역동적인 경험을 전달해줄 것이며 콘텐츠 전달의 성공적인 매개체로서 부상할 것입니다. 점점 더 많은 소셜미디어 플랫폼에서 짧은 비디오와 라이브 스트리밍 서비스를 선보이면서 이미 마케팅적으로 주류의 관심을 얻고 있습니다.
독특한 컬러와 굵은 서체
매우 풍부한 컬러 톤이 이미 유저 인터페이스를 밝히고 있으며, 2017년도에는 대담한 컬러와 선명한 색감이 유저인터페이스를 더 밝게 만들어줄 것입니다. UX 전문가들은 이미 웹 안전색을 떠나 채도가 지나치게 높은색이나 선명한 색감 등을 실험해보고 있습니다. 모니터, 태블릿, 스마트폰 스크린의 밝은 디스플레이는 풍부한 색감을 재생산하게 될 것이며, 그에 따라 보다 선명한 색상 팔레트, 듀오톤, 볼드 그라데이션등이 들어간 UI를 많이 보게 될 것입니다.
서체는 웹사이트의톤과 스타일을 설정해주고, 감정을 불러일으키고, 웹사이트에 개성을 만들어주는 수단으로 떠오르고 있습니다. 이미지에서의 독창성과 마찬가지로, 역동적이고 아름답고 독특한 타입은 늘 그랬듯 일시적으로 유행하겠지만, UX 담당자들은굵고 큰 사이즈의 폰트를 가지고 많은 실험을 하게 될 것입니다. 수제(handcrafted)타입을 디자인에 적용하는 트렌드 역시 2017년도에 강해질 것입니다.
프로토타이핑을 대체하기 시작한 레피드 프로토타이핑
제품 아이디어가 정말 빠르게 낡아지는 요즘 시대에 워터폴(waterfall) 모델로 작업하기에는 약간의 어려움이 있습니다. 지금 UX 는 애자일 방법론을 따르며 프로토타입을 발전시켜 완벽한 아이디어를 만들고, 노련한 디자인을 해내고, 초반 피드백으로 문제를 더 잘 해결할 방법을 찾는 것을 더 선호합니다.
프로토타이핑은 애자일 UX에서 일반적이지만, 곧 레피드 프로토타이핑(rapid prototyping)으로 중심이 옮겨갈 것입니다. 복잡한인터랙션, 주요 기능, 워크플로우 변화 등이 포함된 빠른프로토타입을 만드는 것입니다.
한 번에 모든 특색을 만들어내는 대신,기술과 디자인이 여러 번 반복 작업을 거치면서, 피드백 중에 찾게 된 사용자 여정(user journey)의 빈틈을 채워 넣게 해줄 것입니다. 또한 한 줄의 코드도 쓰지 않고 전체 경험을 만들고 테스트 해볼 수 있게 해주는 빠른 프로토타이핑 툴이 풍부해지는 것을 보게 될 것입니다.
현대적 방식으로 유저 피드백 포착하기
서베이와 설문지를 통한 기존의 데이터 수집 방법은 유저의 생각, 반응, 요구사항, 좋아하는 것, 싫어하는 것을 포착해내는 차세대 테크닉으로 대체 될것입니다.
뇌파 전위기록술(Electroencephalography, EEG)은 유저의 감정과 피드백을 실시간으로 측정하는데 자주 사용되는 효율적인 방법 중 하나로 발전하고 있습니다. EEG는 얼굴의 감정에 의존하는 반면, 전기 피부 반응(Galvanic Skin Responses, GSR)은모공에서 나오는 땀을 기반으로 감정의 강도를 측정합니다. 그 외에는 눈의 움직임을 추적하여 히트맵을만들어주는 등의 피드백 캡쳐링 테크닉이 있습니다.
2017년도에는 이런 기존 피드백 캡쳐링 테크닉과 함께 섞여서 사용되는 생체 측정 기기 및 신경 측정 기기를 보게 될 것입니다.
더 나은 미래를 위한 디자인
저희가 지금까지 살펴본 것은 이미 디자인 골목에 들어선 트렌드 들이고, 향후 몇 년 안에 분명히 미래의 UX를 결정지을 만한 더 많은 트렌드들이 있습니다. 알람 설정, 응답 검색, 스케줄링 리마인더 혹은 심지어 스마트폰 어플리케이션컨트롤 등과 같은 극소 태스크(minuscule tasks)를 관리해주는 AI와 가상 비서의 베터리를 디자인하는 방식을 만들어내고 있는 UX를발견하게 될 것입니다. IoT 디바이스가 정박하는 보물섬도 생길 것이며, 결국 훨씬 더 똑똑한 인터랙션을 낳게 도리 것입니다.
세상은 매우더 빠른 속도로 움직이고 있으며, 회사는 계속 변화하는 소비자의 방식과 새로운 시대의 고객들이 생각하고 행동하는 방식에 적응해야만 합니다. UX는 웹 모바일의 디자인 및 개발 세계 구석 구석에서 역할을 해왔으며 이러한 디자인 트렌드들은 분명 엄청난 속도로 모든 산업에 혁신을 촉진할 것입니다.
전민수 UX 컨설턴트 소개
(UX 실무 경력: 27년차 UX 전문가: LG전자, 서울시청 등 약 300회 이상 UX 컨설팅 수행)
(UX 강사 경력: 23년차: 삼성, SK, KT 등 약 1,000회 이상 UX 강의 진행)
https://brunch.co.kr/@ebprux/1332
[실시간 Live 강좌] (PM/PO/UI/UX/리서치) 수강생 모집 중
(이비피알유엑스 라이브클래스에서 매월 최소 1개에서 최대 4개 강좌 (온라인) 줌 Live 강좌 진행) (PM/PO/UI/UX/리서치/UX 방법론&프로세스 프레임웍)
[VOD 강좌] (PM/PO/UI/UX/리서치) 수강생 모집 중
(인프런에서 총 20개 VOD UX 강좌를 오픈했습니다)
(PM/PO/UI/UX/리서치/UX 방법론&프로세스 프레임웍)
https://www.inflearn.com/users/196290
