2018년도 벌써 일주일이 채 남지 않았네요. 올해만큼은 ‘다음’으로 넘어가는 시간을 줄이고, 하루하루에 집중하자며 몇 번을 다짐하고 또 생각했는데 마음만큼 따라주지 않았던 한 해 였습니다. 이제 다시 새로운 한 해를 준비해야 할 때가 왔습니다. 작년 연말에는 미처 준비를 하지 못했지만 2016년 말에는 2017년에 대한 다양한 자료들을 살펴봤었는데요. 그 중 ‘2017년 웹디자인 트렌드 10‘ 이란 내용을 며칠 전 다시 한 번 훑어보게 되었습니다. 

마이크로인터렉션과 애니메이션, 카드, 카드, 그리고 또 카드, 그리드의 파괴 및 비대칭, 선명하고 다양한 컬러, 데이터 중심의 디자인, 색다른 요소들의 활용, 타이포그래피의 활용, 롱스크롤과 스토리텔링의 활용, UI(User Interface) 요소로서의 애니메이션 활용, 웹과 모바일의 경계까지. 재미있는 점은 오늘 소개드릴 2019년 디자인 트렌드 관련 내용 중 절반 이상이 겹친다는 것. 몇 번을 강조해도 중요한 내용이기 때문일까요, 아니면 그만큼 보수적인 영역이라는 걸까요? 지난달부터 미디엄, 브런치, 해외 디자인 블로그 등을 살펴보며 접하게된 다양한 디자인 트렌드 글들 중 몇 개를 골라 오늘 간략하게 종합, 소개하는 글을 작성하려고 하는데요! 이를 통해 그 이유를 함께 확인해보면 좋을 것 같습니다. 

2019 UI and UX Design Trends

1.Mighty browsers

브라우저는 점점 발전하고 있습니다. 특히 웹과 모바일에서의 격차가 점점 줄어들고 있죠. 웹 페이지의 로딩 속도가 느리면 사용자들의 절반 이상이 우리 서비스를 보지도 않고 떠나는 것처럼, 우리는 웹의 기초부터 개별 웹이 지원하는 기술들을 최대한 이해하고 활용할 수 있어야 합니다.

2.Purposeful animation

Cocoladas Creative Blog Artist Preview Page by Zhenya Rynzhuk

1번과 밀접하게 연관된 내용 중 하나입니다. 정적인 페이지보다 동적인 페이지가 눈길을 사로잡는다는 것은 이미 다양한 사례를 통해 알 수 있는 내용인데요. 웹의 성능이 강화되면서 다양한 웹 페이지 내 애니메이션을 더욱 효율적으로 사용할 수 있는 기회가 생겨났습니다. 아! 물론, 목적성이 뚜렷한 애니메이션이어야 사용자들에게도 설득을 이끌어낼 수 있다는 점은 우리가 꼭 기억해야 할 내용이 아닐까 싶네요.

3.3D in interfaces and deep flat

Cards 3D transition by Gleb Kuznetsov
3D flip menu by Minh Pham

프로세서의 발전에 따라 모바일 디바이스는 발전을 거듭해 왔습니다. 우리가 초기에 쓰던 스마트폰을 생각하면 10년도 채 되지 않는 시간 동안 상상 이상으로 발전해왔다는 사실을 쉽게 이해할 수 있는데요! 이에 따라 플랫 디자인이 주를 이뤘던 기존과 달리 3D 인터페이스가 대두될 가능성이 생겼습니다. 랜더링에 머물지 않고, 사용자가 접하는 실제 화면들에 적용될 수 있다는 것이죠. 이미 Principle, After Effects 등을 활용해 다양한 효과를 서비스 내 적용하는 사례들을 우린 확인할 수 있습니다.

4.Surreal design

How to stay scrappy by Justin Tran for Dropbox Design

최근 무료 일러스트레이션을 다룰 수 있는 서비스가 많아졌습니다. 이 흐름은 서비스 내 다양한 공간에서 일러스트가 사용되는 경우가 많아졌다는 것을 의미하는데요! 일러스트를 사용했을 시 장점은 이미지와 텍스트로 표현할 수 없는, 상상력을 자극할 수 있는 메시지를 전달할 수 있다는 점입니다. 서비스만의 독특한 매력을 전달할 수 있으며, 신선하게 비춰질 수 있다는 점도 포함될 수 있죠. 초현실적이라는 키워드가 포함되어 있지만, 이는 결국 기존에 우리가 주로 활용하던 콘텐츠를 대체할 수 있는 무언가를 의미하기도 하며, 그 중 우리 주변에서 이미 변화의 대표적인 사례로 언급되는 일러스트레이션이 있는 것 같습니다.

(함께 보세요) 서비스의 분위기를 바꿀 수 있는, 무료 일러스트 모음 ‘OUCH!’

5.Gradient 2.0, blazing colors, and darkness

Grabient 2.0 by Eddie Lobanovskiy
Valley Illustration by J.HUA for Tunan

얼마전 masOS가 ‘Mojave’로 업데이트 되면서 가장 반가웠던 것은 ‘다크 모드’가 추가된 점이었습니다. 뒤이어 MS Office에도 편집 시 다크모드를 지원하기 시작하는 등, 이제 다크모드는 사용성에 중요한 영향을 끼치는 요소 중 하나가 되었습니다. 피로한 눈을 보호하는 것을 넘어, 가독성이 높아지는 등의 장점이 동반되기 때문입니다. 이러한 ‘darkness’는 그라데이션에도 큰 영향을 끼치게 될 것 같은데요. 기존에는 서로 상충되는 컬러를 주로 활용했다면, 이제는 선명하지만 눈에 띄고, 어둡지만 짙은 컬러들을 자주 보게 되지 않을까 싶습니다.

(함께 보세요) CSS-GRADIENT, 웹상에서 매력적인 조합을 만들어낼 수 있다면?

6.Variable fonts

Marvin Visions

지금까지의 폰트는 매우 제한된 크기로 사용이 가능했습니다. 사이즈로만 표현할 수 있었던 것이 대표적이라 할 수 있는데요. 지금까지 설명한 트렌드 중, 아직 가장 많은 연구가 필요한 내용이긴 하지만 디바이스에 따라 최적화 되고, 상황에 따라 바뀌는 폰트의 활용도는 점점 높이지지 않을까 싶습니다.

(함께 보세요) 몇 단계만 거치면, 나만을 위한 맞춤형 폰트를 제작할 수 있는 곳 ‘UNIQUE’

7.Voice UIs

Organic Artificial Intelligence design by Gleb Kuznetsov

시리가 처음 나왔을 때의 달콤함을 아직도 잊을 수 없습니다. 여전히 공부중인 시리이고, 한국어에는 약한 시리지만 운전 중에, 요리 중에, 손을 쓸 수 없는 다양한 상황에 목소리만으로 디바이스를 일정 부분 활용할 수 있다는 점은 분명 매력적이었고 앞으로 그 중요성이 더 커질 것이라 생각합니다. 이로 인해 ‘Voice UI’ 역시 더 중요해질 수 밖에 없는데요. 단순히 목소리를 통해 검색을 하는 것에 그치지 않고, 맥락에 따라 다음 단계로 이동할 수 있는 UI등이 고려되어야 합니다. 이쁘면 다야! 이 말이 Vocie UI에서는 절대 먹힐리 없죠.

8.UX Writing & UX Editing

개인적으로 가장 관심을 갖고 있는 분야이며, 그 중요성이 더욱 커질 것으로 예상하는 내용입니다. 텍스트를 표현하는데 있어 배경 컬러도, 서체 컬러도 중요하지만 무엇보다 그 내용 자체가 사용자들에게 깊게 닿을 수 있어야 하며, 맥락에 맞는 내용이어야 하는데요. 서비스 입장에서 쓴 글, 지나친 과장이나 자신감이 묻어 있는 글 등은 사용자들에게 외면받을 가능성이 높기 때문입니다. 창의적인 글쓰기가 우리 모두에게 필요한 시점이 아닐까 싶네요.

(함께 보세요) ‘UX WRITING’이란 무엇일까요?

2019 UI and UX Design Trends (Shakuro) 원문 보기

Top 19 Trends Of Web Design In 2019

1.Personalized UX

사용자 경험은 사용자를 확보하는데 있어 가장 중요한 요소 중 하나! 라는 사실을..모르는 분들은 이제 없을 것 같습니다. 실제 서비스에 녹여내는 것이 고통스러울뿐. 이제 한발 더 나아가 개인화된 사용자 경험을 제공해야 할 시점이 온 것 같네요. 인공지능은 개인화된 경험을 제공하는데 있어 필수 요소!

2.Content-Centered UX

apple.

UX와 콘텐츠를 별개로 바라보던 시대는 지난 것 같습니다. 콘텐츠 중심의 사용자 경험을 구축하는데 우리는 더 힘써야 합니다. 애플의 사례를 예로 들어볼까요. 애플은 자사 웹사이트 내 신제품을 소개하는 데 있어 제품이라는 콘텐츠와 이를 사용자에게 전달하는 방법에 대해 늘 발전된 모습을 보여주었습니다. (추가 내용 : 아마존이 제품 사진을 여러장 촬영하여 3D 포토 형태로 만들어주는 것, 페이스북이 사진 2장을 촬영해 3D 포토를 만들어주는 것 역시 사용자 경험과 콘텐츠를 어떻게 하면 일관되게 보여줄 수 있을까, 라는 질문에서 출발했습니다.)

3.Minimalism And Bold Typography Designs

미니멀리즘이 몇 년 동안 큰 흐름 중 하나였던 이유는 ‘선택과 집중’을 할 수 있기 때문입니다. 불필요한 요소를 걷어내고 전달하고자 하는 메시지에 초점을 맞춰 디자인을 할 수 있었기 때문이죠. 불필요한 요소들은 사용자로 하여금 필요한 정보를 찾는데 방해가 되며, 접하는 정보가 점점 많아지면서 필요한 내용만 빠르게 찾길 바라는 마음이 투영된 것입니다. 이는 2019년을 준비하는 우리에게도 다시 한 번 짚고 넘어가야 할 내용이 아닐까 싶네요!

4.Augmented Reality (AR)

애플 앱스토어에 최근 들어가본 적 있으신가요? 애플은 이미 AR을 활용한 앱을 사용자들에게 여럿 푸시하고 있으며, 여러번 중요성에 대해 강조한 바 있습니다. AR은 사용자로 하여금 상상력을 발휘할 수 있는 기회를 제공하며 기존 환경에 비해 더 독창적인 사용자 경험을 제공할 수 있습니다. ‘Creativity’와 ‘Reality’의 간격을 좁히는 AR을 우리는 내년에 더욱 주목해야 합니다.

5.GIFs

GIF(Graphics Interchange Format)는 상호작용이 가능한 UI를 제공해준다는 점에서 우리에게 중요합니다. 텔레그램에서 스티커가 아닌 GIF로 소통하는 것 이상의 사용성이 존재한다는 것이죠. 또한, 튜토리얼 등 사용자를 서비스에 안착시키는 과정에서도 중요한 요소로 사용될 수 있습니다. 영상은 길어질 수 있고, 텍스트와 이미지는 지나치게 정적이기 때문입니다. 서비스를 어떻게 사용하면 좋을지에 대한 팁을 GIF로 제공할 경우 눈길을 사로잡을 수 있는 것은 물론, 사용자로 하여금 특정 행동을 유도하는 중요한 장치가 될 수 있습니다.

6.CSS3 Animations

CSS3는 우리에게 많은 자유(?)를 가져다 주었습니다. 특히 애니메이션의 활용도가 높아진 것이 사실이죠. 비주얼을 한층 업그레이드 시켜줄 뿐만아니라, 기존의 정적인 화면에 생동감을 불어 넣어주는 것도 가능합니다. 우리가 애니메이션에 여전히 주목해야 할 이유!

7.Sticky Elements

사용자를 끌어당기는 방법에 꼭 시간이 많이 소요되는 것들만 포함되는 것은 아닙니다. 스크롤링을 하는 도중에 주요 정보를 제공할 수도 있고, 페이지 하단에 최상단으로 바로 이동 가능한 버튼을 추가하는 것도 가능합니다. 이렇듯 작지만 사용자들이 우리 서비스를 더 이용할 수 있도록 도와주는 고정된 요소들은 앞으로 그 중요성이 더 커지지 않을까 싶네요!

8.Chatbots

지금 써보러 갑니다 페이지 메시지를 통해 가장 많이 문의를 받는 내용은, 지써갑의 콘텐츠를 활용한 챗봇을 만들어보는 것이 어떻겠냐는 내용입니다. 챗봇을 적용할 경우 블로그 내 검색, 카테고리 분류 등에 비해 더 빠르게 원하는 콘텐츠로 도달 가능하다는 장점이 존재하죠.(물론 우선순위에 밀려 아직 적용을 하진 못했지만…) 이런 챗봇은 더 나은 사용자 경험을 제공할 수 있는 수단이 될 수 있습니다. 사용자의 피드백을 바로 받아볼 수 있고, 앞서 말씀드렸던 것처럼 원하는 콘텐츠를 바로바로 추천, 닿을 수 있도록 돕는 것도 가능합니다.

(함께 보세요) 이런 챗봇은 어때요? Y-COMBINATOR의 스타트업 스쿨을 통해 알려진 7개의 챗봇서비스

9.Progress Spectrum

udemy

너는 지금 이 지점에 있어. 너가 작업을 하려면 이 정도의 시간이 추가로 필요해. 진행 상태는 사용자에게 아주 중요한 정보이자 과정 중 하나입니다. 사진을 다운로드 받는데, 로딩바만 계속 돌고 얼마나 남았는지를 시각적 또는 구체적인 정보로 제공하지 않을 경우 앱이나 서비스를 그대로 종료할 가능성은 높아질 수밖에 없죠. 사용자의 특정 행동과 서비스 내 정해진 과정에 따른 상태를 제공해주지 않으면 사용자 경험에 악영향을 줄테니, 우린 이 지점을 잘 활용해야 합니다. 내년에는 더더욱!

10.Asymmetrical Layout

patterntap

대칭 레이아웃은 이제 사용자들에게 뒤쳐진 트렌드로 받아들여질 가능성이 높습니다. 비대칭 레이아웃이나 기존의 틀을 벗어난 그리드는 2019년 우리가 주목할 가장 중요한 디자인 트렌드 중 하나입니다. 대칭 레이아웃은 사용자가 ‘지루함’을 느끼는 시간이 짧은 반면, 비대칭 레이아웃은 사용자로 하여금 주목도를 높이고 더 많은 콘텐츠를 살펴볼 수 있는 기회를 제공합니다.

11.Single Page Design

단일 페이지로 구성된 웹페이지는 로딩이 빠르며, 사용자 경험을 다양하게 제공해줄 수 있다는 장점을 지니고 있습니다. 무엇보다 ‘간결함’을 중심으로 하기에 사용자자에게 원하는 정보를 압축해서 제공하고, 우리가 전달하고자 하는 메시지를 읽기 전 다른 페이지로 빠져나가는 것을 방지할 수 있죠.

12.Micro Animations

이제는, 애니메이션이 적용되지 않은 서비스를 찾아보는게 더 힘들만큼 애니메이션은 서비스에 있어 중요한 디자인적 요소로 자리잡았습니다. 이제 우리가 더 신경써야 할 것은, 예상치 못한 곳에서 놀라운 사용자 경험을 제공해줄 수 있는 마이크로 인터렉션입니다. 이는 사용자의 특정 행동을 유도하는데 있어 도움이 되며, 사용자가 일정 상황을 쉽게 이해하고 기억할 수 있도록 하는데 많은 도움을 줄 수 있습니다.

13.Card Layout

카드형 UI가 효율적이라는 것은, 우리 주변에서도 쉽게 확인해볼 수 있습니다. 사실 모바일 시대 이전에 카드 형태의 단어장(앞에는 그림 뒤에는 키워드와 설명이 있는)을 썼던 것에서도 확인할 수 있죠. 카드 레이아웃은 전체 정보를 사용자들의 선택 범위에 노출할 수 있으면서, 정보를 나눠줄 수 있다는 장점이 존재합니다. 사용자 입장에서는 페이지 내 스크롤이 길게 적용된 것에 비해 원하는 내용을 선택, 집중해서 확인할 수 있기에 더 편리하게 느껴질 수 있죠.

(함께 보세요) 카드UI, 이렇게 구성해보는건 어떨까? 카드UI 사례 16

14.Drop Shadows And Depth

기존에 우리는 버튼 등 사용자의 행동을 유도하는 데 있어 컬러를 주요 내용으로 활용했습니다. 하지만 최근에는 버튼 아래로 떨어지는 그림자(Drop Shadows) 등을 활용해 주목도를 높이는 사례가 많아지고 있습니다. 예를 들면 SaaS 서비스의 가격 정보 페이지에 업그레이드 버튼 등에 그림자를 녹여내는 것이죠. 강조를 다른 의미로 표현할 수 있기에 앞으로도 그 사례가 많아질 것 같습니다.

15.Custom Illustrations

slack

일러스트! UX Writing와 함께 제가 주목하는 또 하나의 트렌드 중 하나인데요. 친숙한 브랜드의 모습을 보여줄 수 있는(아무래도 사진과 텍스트에 비해 더 부드럽고 따뜻한 느낌을 제공해줄 수 있기에) 일러스트는 서비스의 첫인상을 더 강렬하게 만들어주는 역할도 하게 됩니다.

(함께 보세요) 서비스의 분위기를 바꿀 수 있는, 무료 일러스트 모음 ‘OUCH!’

16.Colorful White

intercom

웹사이트 또는 모바일 앱 배경을 흰색으로 유지하는 서비스들이 늘어나고 있습니다. 강조하고 싶은 내용에 특정 컬러를 사용하면서 말이죠. 이는 사용자가 페이지 내 정보를 더 쉽게 읽고 이해할 수 있도록 도와줍니다. Asana, Slack, Intercom 등이 흰색 배경을 사용하는 이유! 서비스의 성격에 따라 달라질 수 있겠지만, 시각적인 피로도를 줄이면서 더 많은 정보를 접하는 등 체류 시간에도 긍정적인 영향을 끼칠 수 있습니다.

17.Responsive Design

웹과 모바일을 구분 짓는 건 이제 오래된 이야기. 사용자가 활용하는 다양한 디바이스에 따라 서비스를 디자인하고 개발하는 것은 필수 요소가 되었습니다. 사용자로 하여금 원활하고 유연한 서비스로 인정 받기 위해서는 내년에도 반응형 디자인을 우리는 꼭 고려해야 합니다.

(함께 보세요) 반응형 그리드 레이아웃을 확인할 수 있는 오픈소스 라이브러리 ‘MUURI’

Top 19 Trends Of Web Design In 2019 원문 보기

6 Mobile Design Trends to Watch in 2019

1.Full Integration of In-App Gestures

아이폰에서 홈 물리 버튼이 처음 사라졌을 때를 기억하시나요? 아이폰X 이후로부터 많이 익숙(?)해지긴 했지만, 종종 지난 습관에 익숙해져 홈버튼을 찾는 경우가 있습니다. 애플 아이폰 뿐만아니라 삼성, LG 등 주요 제조사들 역시 물리버튼에 대한 인식을 바꿔나가는 것 같은데요. 이는 우리에게 물리버튼을 대체할 사용자 경험을 제공해야 함을 의미하기도 합니다. 대표적인 것으로 ‘제스쳐’가 있는데요. 페이지를 아래로 당겨 새로고침을 한다던지, 메시지나 메일을 삭제하기 위해 왼쪽으로 밀어내는 것과 같은 물리버튼을 대체할 행동을 우리는 2019년에도 진지하게 고민해야 되지 않을까 싶습니다!

2.Face ID

홈버튼이 사라지고 보안에 대한 인식기 강화되면서 제스쳐와 함께 강조되는 기능이 있다면 바로 안면 인식입니다. 이미 아이폰과 갤럭시 시리즈에 적용이 되어 있기도 하죠. 홈화면이 있었던 때(전 아직 아이폰7 플러스를 쓰지만) 지문 인식이 기본 옵션 중 하나였지만, 홈버튼이 사라져 지문인식이 어려워지자 얼굴 인식이 부각된 것! 커머스에서의 구매 시, 핀테크에서의 송금 및 결제 시 얼굴인식이 플로우에 추가될 경우 우린 그만큼 줄어든 과정을 더 나은 사용자 경험을 위해 사용할 수 있습니다.

3.Augmented Reality

다시 등장한 AR! 이미 수년 전부터 증강현실은 모바일이 이식되어 왔는데요. 2016년 포켓몬 고의 등장으로 우리에게 더 가까이 다가온 AR이기도 합니다. 앞서 언급한 애플이 ‘ARKit2’ 등을 지속적으로 출시하고 개발자들을 독려하는 이유 역시 이와 맞닿아 있는 부분이죠. 사진으로만 보던 제품 사진을, AR로 더 핏하게 확인할 수 있다면? 이런 질문들을 우리는 이제 기획과 디자인 단계에서부터 진행해야 할 때가 온 것 같습니다.

4.Motion: Video and Animations

우리의 집중력은 점점 떨어지고 있습니다. 최근 몇 년 동안 인간의 평균 집중 시간은 12초에서 8초로 감소했으며 이는..금붕어의 평균 집중 시간보다 짧다고 합니다.(물론 이 실험은 특정 상황을 가정해 진행된거지만) 이는 모바일 앱 서비스에도 동일하게 적용될 수 있는데요. 앱을 실행해서 10초 내 사용자들을 사로잡지 못하면, 집중력이 떨어지고 자연스레 앱의 삭제로 이어진다는 가정입니다. 이를 위해 일반적으로 많이 사용되는 방법은 집중력이 떨어지기 전 애니메이션과 영상을 활용하는 것! 앱의 성능을 떨어뜨리지 않고, 사용자의 주목도를 높일 수 있는 영상과 애니메이션을 어떻게 활용하면 좋을지, 고민해봐야 할 때입니다.

5.Chatbots: Conversational Design

AR, 애니메이션과 함께 2019년을 위한 디자인 트렌드에 있어 빠지지 않고 등장하는 주제가 바로 ‘챗봇’입니다. 이미 페이스북은 2017년 메신저 앱 내 채팅봇을 사용할 수 있는 기능을 공개했으며, 국내에서도 챗봇을 쉽게 제작할 수 있는 빌더 서비스들이 등장한 바 있습니다. 띵스플로우와 같이 챗봇 전문 서비스를 다루는 스타트업도 생겨났죠. 다양한 기능을 제공하는 앱 내, 중요한 행동을 유도하는데 있어 챗봇은 사용자 경험을 강화시키는데 분명 큰 도움이 될 것 같습니다.

(함께 보세요) 이런 챗봇은 어때요? Y-COMBINATOR의 스타트업 스쿨을 통해 알려진 7개의 챗봇서비스

6 Mobile Design Trends to Watch in 2019 원문 보기

지금 써보러 갑니다가 ’00:00’이란 이름의 뉴스레터를 발행하기 시작했어요! 아직 구독하지 않으셨다면 격주로 발행되는 뉴스레터를 신청 후, 편하게 받아보세요!

00:00 뉴스레터를 구독하세요! 🤗

격주 화요일과 수요일 사이, 밤열두시!
앱/웹 서비스를 구성하는 요소들에 대한 편집자의 생각과 노하우, 함께 활용하기 좋은 서비스를 정리하여 보내드립니다. 후회하지 않으실 거예요 😉

🐳재그마스터 : 어제와 오늘이 만나는 밤 열두시처럼, 생각과 생각이 자연스레 연결 될 수 있는 재료들을 가져올게요.

🐥동동 : 여행지에서 만난 초가을의 바람처럼 기분 좋은 생각과 이야기를 담아볼게요.

지난 뉴스레터는 링크를 통해 확인해보실 수 있어요! : https://www.notion.so/zagmaster/00-00-a0da3d80633f4554b0c9599ea4261084