brunch

You can make anything
by writing

C.S.Lewis

by X PLEAT Dec 15. 2017

2018 UX/UI 디자인 트렌드

서비스디자인 랩 육제민 연구원

유플리트 SDLab은 2018년 UX/UI 디자인 트렌드를 살펴보고자 국내외 UX/UI 트렌드 리포트를 분석하여 주요 키워드를 도출하였습니다. 도출된 키워드를 바탕으로 주요 트렌드를 UX, UI 측면으로 나누어 정리하였습니다.

1. 2018 UX 디자인 트렌드

콘텐츠에 대한 집중도를 높이는 UX

브런치나 비헨스와 같이 개인작가의 글과 작품을 구독하고 공유하는 플랫폼이 성장하고 있습니다. 블로그를 활용한 인플루언서 마케팅 또한 그 효용성을 인정받으며 성장하고 있습니다. 이처럼 웹상에 다양한 콘텐츠가 생산되고 그것을 소비하는 사용자도 증가하면서 콘텐츠를 보다 쉽고 편하게 소비할 수 있는 UX/UI가 발전하는 추세입니다. 더불어 모션, 사운드, 일러스트레이션과 같이 콘텐츠의 주목도를 높이고, 내용을 보다 효과적으로 전달하기 위한 방법들이 적극적으로 활용되고 있습니다.

- 콘텐츠 이외의 내비게이션이나, 기능키 등을 최소화시키는 인터페이스

한눈에 전체 화면이 들어오는 모바일 디바이스 특성상 화면의 상단 또는 하단에 고정되어 있는 헤더와 내비게이션 요소는 사용자의 시선을 분산시키게 됩니다. 이와 같은 이슈로 사용자가 스크롤을 이동할 때 헤더와 내비게이션의 크기가 줄거나, 역방향 스크롤 시에만 해당 요소가 등장하는 식의 인터페이스가 적극적으로 활용되고 있습니다.

Brunch App | 역방향 스크롤 시에만 네비게이션이 노출 됨으로써 컨텐츠의 집중도를 높여줍니다.

- 콘텐츠를 보다 효과적으로 전달할 수 있는 인터랙션 활용

ABC Net, Interactive Digital Story Telling | 마우스 스크롤 이벤트를 활용하여 기사 내용을 효과적으로 전달해 줍니다.

http://www.abc.net.au/news/2017-10-16/north-korea-missile-range-map/8880894

일상에 녹아든 AR, 한걸음 더 가까워진 VR

AR(Augmented Reality)과 VR(Virtual Reality) 기술이 접목된 제품과 콘텐츠/서비스 시장이 지속적인 성장을 이루고 있습니다. AR 기술을 활용한 다양한 애플리케이션이 삶의 편의를 높여주고 있으며, 게임산업을 중심으로 VR 체험장이 등장하기도 하였습니다. AR 콘텐츠 생산을 위한 API가 등장하고, 360도 카메라와, 3D 스캐닝 장비가 보급되면서 보다 쉽게 AR/VR 콘텐츠를 제작하고 공유할 수 있게 되었습니다. 우리의 일상에 AR/VR 기술과 콘텐츠가 완전히 녹아들기 위해서는 조금 더 시간이 필요할 것이라는 의견이 많은 편이지만, 우리 삶에 한걸음 더 가까워진 기술로써 지속적인 성장을 이룰 것으로 예상됩니다.

잉크헌터 | 마커인식 기반 타투 시뮬레이션 기능

VR 모바일 생중계 | KT 위즈파크 GIGA VR 을 이용한 야구 생중계 서비스

'야구장이 통째로 스마트폰에'...수원 케이티위즈파크 'VR 생중계'

‘가상현실의 꿈이 이뤄졌다’ 5일 수원 케이티 위즈파크에서 가상현실 시대가 개막(開幕)했다. 손(스마트폰)안에 야구장이 담기는 꿈이 현실이 됐다. 중계 카메라가 비춰주는 ...

www.joongboo.com

AI, 딥러닝 기반 맞춤형 콘텐츠와 서비스의 증진

Big Data 기반의 딥러닝, AI 기술은 사용자의 개인정보와 히스토리, 라이프 스타일 등 다양한 정보를 분석하여 사용자가 선호하는 콘텐츠를 찾아주거나, 개인 맞춤형 서비스를 제공할 수 있습니다. 이러한 AI 기술의 발전은 언텍트 마케팅 트렌드를 바탕으로 금융, 커머셜 분야에서 적극적으로 도입되고 있는 추세입니다. 특히 언제, 어디서나 사용자의 문의나 요구사항에 대응할 수 있는 챗봇이 다양한 분야에서 적극적으로 활용될 전망입니다.

Spring | Chatbot 을 이용한 마케팅 사례

Fashion brands embrace bots as modern concierges - Digiday

Facebook Messenger's chatbot could become a critical commerce tool for luxury brands looking to digitize their customer service practices.

digiday.com

https://www.nanorep.com/services/support-chat-bot-solution

콘텐츠와 서비스 소비를 보다 쉽고 빠르게 해주는 UX

- Cashless Payment 기술의 발달

좀 더 빠르고 쉽게 온/오프라인 결제를 가능하게 해주는 다양한 기술이 생활 속에 자리 잡아가고 있습니다. 국내 온라인 간편 결제 서비스는 상위 4개사 중심으로 성장 가도를 달리고 있으며, 앱카드의 보급률도 지속적으로 증가하고 있습니다. NFC를 이용해 별도의 결제 과정 없이 물품 구매가 가능한 아마존 고 서비스나, 스마트폰을 이용해 바코드를 스캔하면 결제가 되는 바클레이 그랩 고 카드는 오프라인 매장에서 계산대 앞에 줄을 서는 시간까지 줄여주고 있습니다. 이와 같은 서비스들은 온/오프라인 상의 다양한 콘텐츠와 상품에 대한 소비를 원활하게 해주지만, 사용자의 개인정보를 보다 안전하게 관리, 유지해야 하는 이슈를 내재합니다. 이러한 문제를 해결하기 위해 다수의 기업들은 블록체인 기술이나 생채 인증 등의 기술을 적극 활용하고 있는 추세입니다.

Barclay Grab + Go

- 쉽고 빠른 Sign In과 UX Flow

다수의 애플리케이션과 웹사이트가 회원가입이나 로그인 과정을 단순화시키고, SNS 계정 연동을 통해 대체하고 있습니다. 또한, 핵심 기능을 메인 화면에서 바로 접근할 수 있도록 개편하는 추세입니다. 이처럼 콘텐츠와 서비스의 소비 프로세스 전반에 걸쳐 보다 쉽고 빠른 UX 제공이 중요해지고 있습니다. 지문인식이나 Face ID 등의 기술은 안전성과 함께 이러한 목표를 만족시킬 수 있는 수단으로 주목받으며 보편화되고 있는 추세입니다.

핵심 기능을 메인 화면에 노출시키는 카카오뱅크와 카카오택시

쉽고 빠른 로그인과 인증을 돕는 다양한 기술

IoT 기술과 함께 성장하는 옴니채널

IoT에 대한 지속적인 투자와 관심을 바탕으로 다양한 제품이나 서비스를 원격으로 관리할 수 있게 되었습니다. 이러한 IoT 네트워크의 형성은 딥러닝, AI, 블록체인 기술의 발전과 함께 새로운 가능성을 열어줄 것으로 예상됩니다. 더불어 다양한 디바이스 간의 통합 서비스 플랫폼과 옴니채널 시장의 성장을 이끌어 낼 것으로 예상됩니다.

블록체인 기술의 IoT 연계 가능성

How to Secure the Internet of Things (IoT) with Blockchain

The Internet of Things offers tremendous opportunities for organizations and with Blockchain it now becomes possible to secure the IoT as well.

datafloq.com

5 IoT trends that will define 2018

Consumers and corporations alike are embracing the IoT for global commerce and lifestyle. This is how the technology will develop over the next year.

www.networkworld.com

음성인식 기술의 발전과 VUI 확산

IoT 기술의 발전으로 다양한 제품들이 인터넷에 연결되고, AI 스피커의 보급률이 높아지면서 VUI(Voice User Interface)를 사용하는 제품과 서비스가 증가하고 있습니다. 특히 AI 스피커의 경우 스마트홈과 옴니채널 플랫폼의 새로운 커멘드센터로 주목받고 있습니다. 이러한 변화를 바탕으로 대화형 인터페이스에 대한 이해와 VUI 환경에서의 내비게이션 설계가 중요해질 전망입니다.

Kakao i AI 스피커

Kakao I

카카오의 첫 번째 스마트 스피커, 카카오미니를 소개합니다

kakao.ai

2. 2018 UI 디자인 트렌드

플랫디자인의 심플함을 넘어 각자의 개성과 차별성을 드러내기 위해 탈그리드, 셰리프 서체와 같은 키워드들이 매년 새로운 디자인 트렌드로 거론되어 왔습니다. 하지만, 플랫 디자인과 구글 머테리얼 디자인은 사용성과 보편성을 바탕으로 수년간 UX/UI 디자인을 주도하고 있습니다. 이러한 흐름이 크게 뒤바뀌지는 않을 것으로 보이지만, 콘텐츠와 서비스가 다양해짐에 따라 개성을 드러내고 사용자의 주목을 끌기 위한 시도들이 계속될 것으로 보입니다.

카드 UI의 사용성을 높이는 다양한 UI

디자인 트렌드의 변화에 맞춰 카드의 디자인은 조금씩 변해 오고 있지만 다량의 정보를 효과적으로 전달할 수 있는 카드 UI의 효용성을 대체하는 새로운 UI가 도입되긴 어렵지 않을까 생각됩니다. 이미지와 제목, 간략한 디스크립션뿐만이 아니라 작성자의 정보나, 조회수, 카테고리 등의 다양한 메타데이터를 동일한 포맷에 담음으로써 정보탐색의 효율을 높여줄 수 있기 때문이라 생각됩니다. 최근에는 한 화면 내에 두 개 이상의 카드 UI를 적용하거나 가로 스크롤을 기반으로 하는 카드 UI가 사용되기도 합니다.

두개 이상의 카드 UI 를 사용하는 Melon / 가로 스크롤을 이용하여 한 화면에 복수 카테고리를 노출하는 Netflix

스캐닝을 돕는 타이포그래피

모바일과 스낵 컬처 트렌드에 따라 짧아지던 텍스트 비중이 점점 증가하는 추세입니다. 콘텐츠를 읽는데 몇 분 정도의 시간이 필요한지가 썸네일 상에 함께 표시되기도 합니다. 페이지 내의 콘텐츠가 많아질수록 정보 탐색의 편의성과 효율성을 높이는 데 있어 헤드라인과 서브 타이틀, 언더라인 등이 중요한 요소로 작용하게 됩니다. 특히, 빠르게 화면을 스크롤하는 모바일 환경에서는 콘텐츠 스캐닝을 도와주는 효과적인 타이포그래피와 편집디자인이 중요합니다. 이를 위해, 정보의 하이라키에 맞춰 텍스트 스타일에 차이를 주거나, 인용구/주요 내용, 요약글 등을 본문 내에서 효과적으로 전달하는 디자인이 중요해질 전망입니다.

http://inspiredesign.me/2017/02/10/mdls-website-design/

눈에 잘 보이는 GNB, 이해하기 쉬운 메뉴 구조

다수의 애플리케이션과 웹사이트들이 서비스의 핵심기능을 메인 화면과 GNB에 노출시키고 있는 추세입니다. 메뉴의 구조를 단순화시키고, 주요 메뉴가 아닌 경우 Footer 영역에 사이트 맵을 노출시켜 접근하게 하거나 메뉴를 통합, 제거하기도 합니다. 이를 통해 사용자가 서비스를 보다 쉽고 빠르게 이용할 수 있게 해줍니다.

https://asana.com/

https://www.airbnb.co.kr/

햄버거 메뉴보다는 탭 메뉴, 상단보다는 하단

모바일 First 트렌드의 영향과 조작 편의성에 대한 이슈로 Bottom Tab Menu 가 유행할 것이라는 전망을 보이고 있습니다. 하지만 디바이스 하단의 기능 버튼과 붙어 있어 사용성을 떨어뜨린다는 지적도 있습니다. 그러나 갤럭시 S8과 아이폰X에서 물리 버튼이 사라지면서 설득력을 얻고 있는 상황입니다. 이와 함께 데스크톱 화면에서도 Bottom Tab Menu를 활용하는 사례가 증가하고 있습니다.

하단 Tab Menu 로 리뉴얼한 Youtube / 상단 Tab Menu 를 유지한 Youtube REd

사용성을 높이는 감성적인 인터랙션

태스크 수행이나 화면 전환 시, 감성을 자극하는 마이크로 인터랙션을 적절히 사용할 경우 사용자에게 긍정적인 인상을 남길 수 있습니다. 특히 챗봇이나 음성인식 기술을 사용한 CUI(Conversational User Interface) 기반의 서비스에서는 인터랙션 과정 전반에 걸쳐 보다 감성적이고 디테일한 피드백 제공이 필요합니다.

https://pin.it/upwjpmkiisalyt

https://medium.com/thinking-design/10-ux-design-predictions-for-2018-54bebb8d9767

주목을 끄는 메인 화면, 스토리가 느껴지는 사이트

플랫디자인의 유행으로 서로 다른 사이트가 유사한 디자인을 가짐에 따라 개별 서비스는 각자의 개성을 드러내기 위해 다양한 시도를 하고 있습니다. Full Screen Image와 Video를 활용하거나, 오토플레이 사운드를 적용할 경우 방문자에게 강한 인상을 남길 수 있습니다. 특히 서비스의 스토리를 반영한 일러스트레이션이나 애니메이션이 적극적으로 활용되는 추세입니다. 이처럼 이미지와 비디오를 전면에 내세우는 사이트가 많아지면서, 단색 배경 위에 텍스트와 라인을 이용해 구성한 사이트가 오히려 독특한 인상을 남기기도 합니다.

https://slack.com/

https://wonderlandindustry.com/home

http://margauxlallart.com/

http://www.variousways.com/#home

https://spectral.prototypo.io/

http://britt.digital/

사이트의 개성이 담긴 독특하고 강렬한 서체

SEO와 웹 접근성 등의 이슈로 시스템 폰트의 사용이 중요해지고 있지만 메인 화면이나 일부 콘텐츠에 사용한 개성 있고 독특한 타이포그래피는 사이트의 개성을 드러내며 강한 인상을 남길 수 있습니다.

http://www.monsieurcaillou.com/#!/

https://www.beoplay.com/landingpages/ss17#intro

https://dribbble.com/shots/3233411-Landingpage-For-a-Adventure-Travel-website/attachments/692460

https://www.behance.net/gallery/25120993/Surreal

비비드하고 강렬한 색상의 사용

보다 강렬하고 비비드한 듀오톤 그라데이션이 유행할 것으로 보입니다.

http://elje-group.com/

https://theoutline.com/

개성 있는 그리드 시스템

모던하고 심플한 그리드는 정돈된 느낌을 줌으로써 정보탐색의 효율을 높여줄 수 있습니다. 하지만 원 페이지 구성의 사이트나, 마이크로 사이트, 서브페이지 등의 경우 내용을 보다 효과적이고 심미적으로 전달할 필요성이 있습니다. 그에 따라 개성 있는 그리드 시스템이 사용된 사이트가 증가할 것으로 보입니다.

http://vanderlanth.io/

http://thefotonaut.com/en/

https://www.adidas.co.uk/speedfactory

https://vp-brands.com/

단순히 키워드를 비교할 때 2018년 UX/UI 디자인 트렌드는 Minimalism, Personalization, Flat 2.0 과 같은 그동안의 흐름을 크게 벗어나지 않는것 같습니다. 하지만 VR/AR, VUI 등의 새로운 기술들이 점차 우리 삶에 일부로 성장하면서 새로운 고민 거리와 트렌드가 성행할 것으로 예상됩니다.