2021년 UX Design Trend 下
U-Biz Consulting Div.
2021년 UX Design Trend
해당 글은 2020년 7월 2일, Tencent에서 발간한 2020-2021년 디자인 트렌트 리포트 중 UX(사용자 경험)에 대한 내용을 번역하여 옮긴 글입니다. 일부 재해석과 한국식 변형 표현이 포함되어 있습니다.
2021년 UX Design Trendㄴ
이 글은 트렌드 번역 下 편입니다.
2021년 UX Design Trend 上 편 읽으러 가기
05. Human Oriented (사람 중심)
과거에 디자이너들은 비즈니스 결과를 중심으로 한 디자인을 선보였으나, 디자인의 윤리와 책임에 대해서는 거의 고려하지 않았습니다. 그러나 인터넷 이용자가 감소하고 발전이 느려지면서 인본주의적 문제가 드러나기 시작했습니다. 일반적인 트렌드에서 UX 디자이너는 비즈니스 목표를 달성하는 것 외에도 디자인의 윤리와 사회적 책임을 고려한 "사람 중심"디자인에 더 많은 관심을 기울여야 합니다.
5-1. Inclusive Design
Inclusive design이란 유럽에서는 '모두를 위한 디자인(Design for All)', 미국ㆍ대만ㆍ일본에서는 '보편적 디자인(Universal Design)'이라고 합니다. 다양한 사용자를 포괄하는 디자인이라는 의미로, 디자인을 통해 소외된 계층을 포용한다는 것입니다. 예를 들면 장애인을 위해 욕실 캐비닛 높이를 낮춰 휠체어를 타고도 이용할 수 있도록 디자인하는 것입니다. Inclusive design은 여전히 2020년의 주요한 디자인 테마 중 하나이며, 스마트 기기가 널리 퍼지면서 기능뿐만 아니라 포용성 측면에서도 해당 디자인에 대한 새로운 니즈가 제시되고 있습니다.
장애인을 위한 설계
Good Vibes : 2019년 삼성은 동남아시아 시장에 시각/청각 장애인과 비장애인이 서로 실시간으로 소통할 수 있는 앱인 Good Vibes를 출시했습니다. 시각/청각 장애인이 화면을 탭 하여 모스 부호를 입력하면 내용이 자동적으로 텍스트 변환이 되어 연결되어있는 다른 핸드폰에 문자로 전송됩니다. 문자를 받은 비장애인이 텍스트로 답장하면 이 내용은 다시 모스 부호로 변환되어 시각/청각 장애인에게 전송됩니다.
Ele.me(배고파요) : Ele.me앱을 사용하는 배달 라이더의 약 8 %가 색맹과 색약을 앓고 있습니다. 이러한 문제를 해결하기 위해 Ele.me 디자인팀은 2019년 WCAG 배리어 프리 색상 대비, 배리어 프리* 컬러 휠, 글꼴 크기 조정, 보조 그래픽 등을 활용하여 앱을 리디자인했습니다.
*배리어 프리(barrier free) : 장애인들도 편하게 살아갈 수 있는 도시를 만들기 위해 물리적ㆍ제도적 장벽을 제거하자는 운동
배달 앱의 디자인을 위한 평등 만들기크로스 에이지 디자인
구글 어시스턴트 매너 기능 (Google Pretty Please) : 구글 어시스턴트 매너 기능이 켜진 후 사용자의 구문에 "Please"를 포함시키면 구글 어시스턴트가 감사를 표현합니다. 이 기능은 기기를 사용하는 아이의 예의 바른 언행을 길러주는 교육 효과도 있습니다.
Swift Playground : 2019년 10살이었던 초등학생 비타 군의 Swift Playground(서비스 명) 프로그래밍 수업은 큰 인기를 끌었습니다. Swift Playground는 초보자가 쉽게 프로그래밍을 배울 수 있는 소프트웨어로 4세 이상 저연령 이용자에게 재미있는 게임 방식으로 프로그래밍을 배울 수 있는 진입장벽이 낮은 서비스를 제공합니다.
성 평등을 위한 디자인
애플 이모지 : 수년의 걸친 애플 이모지의 업데이트를 돌아보면 인종 평등부터 성별, 성향 평등에 이르기까지 변화해왔고 2020년엔 장애인을 위한 디자인, 트랜스젠더를 위한 새로운 표현이 추가될 예정입니다. Inclusive Design에서 성 평등은 여전히 중요한 부분입니다.
에어비앤비 일러스트 : 에어비앤비는 피부색, 직업, 성별, 장애와 같이 사회적으로 차별을 받는 캐릭터를 표현합니다.
5-2. 사용자 개인 정보 주의
2019년은 인터넷 기술로 인한 프라이버시 침해 문제가 불거졌던 해입니다. 페이스북은 프라이버시 유출로 사상 최대의 벌금을 내야 했고, 중국에서는 '안면 인식 사건*'이 있었습니다. 개인 정보 보호 안전성이 위기에 휩싸이면서 개인 정보 및 데이터 법률이 비약적으로 발전하고 있습니다. 미국은 캘리포니아 소비자 개인 정보 보호법을 추진하고 있고, 중국은 2020년에 개인 정보 보호법과 데이터 보안법을 도입할 예정입니다.
*안면인식 사건 : 얼굴인식 회사 센스넷츠의 데이터 유출 사건
MIUI 12, 숨겨진 마스크 기능 출시
안드로이드의 개방형 생태계로 인한 개인 정보 보호 문제는 사용자들에게 계속해서 비판을 받아왔습니다. 일부 앱은 사용자가 정보에 관한 권한을 부여하지 않으면 사용할 수 없는 경우도 있습니다. 이러한 문제를 해결하고자 MIUI 12는
iOS 14 Clipboard Reminder
iOS 14 업데이트에서는 사용자 개인 정보 보호 기능이 업그레이드되었습니다. 바로 Clipboard Reminder기능입니다. Clipboard Reminder는 사용자가 애플리케이션을 열었을 때, 해당 애플리케이션이 사용자의 클립보드를 읽으면 이를 사용자에게 즉시 알림을 보내줍니다. 이를 통해 사용자는 자신의 개인 정보를 효과적으로 보호할 수 있습니다.
5-3. 건강한 디지털 라이프 스타일
과학과 기술의 발전은 양날의 검입니다. 인터넷 제품의 개발은 사용자에게 편리함과 몰입감을 경험할 수 있는 기회를 제공합니다. 하지만 한편으로는 사용자가 기술에 의해 실생활에 대한 통제력을 잃고 자극적인 것에 중독되어 기술이 아닌 사용자가 객체가 되는 현상이 일어날 수 있습니다.
최근 몇 년 동안 자주 언급되고 있는 디지털 웰빙이란, 디지털 제품이 사용자의 삶의 질을 떨어뜨리는 부정적인 현상을 방지하기 위해 디지털 제품과 실생활 간의 균형을 맞춰야 한다는 의미입니다.
Android Q Focus 모드 Google Android Q Focus 모드
Android Q는 업데이트하면서 포커스 모드를 추가했습니다. 포커스 모드에서는 사용자의 주의를 산만하게 하는 애플리케이션을 빠르게 종료할 수 있으며, 결과적으로 사용자가 더 중요한 일에 집중할 수 있게 도와줍니다.
중독 방지 시스템 업그레이드
기술과 제품 경험의 발전은 사용자들에게 즐겁고 몰입감 있는 경험을 가져다주었지만 동시에 "일렉트로닉 헤로인(electronic heroin, 인터넷 중독)"이라는 별명을 얻었습니다. 건강한 사용자 경험을 위해 게임이나 콘텐츠 관련 중독 방지 시스템은 디지털 복지에서 불가피한 추세가 될 것입니다.
King of Glory는 2020년에 중독 방지 시스템을 업그레이드하고 청소년 사용자의 이용 시간 및 쿠폰 충전 금액을 제한했습니다. 더불어 스테이션B는 2019년에 사용 시간과 콘텐츠 추천을 청소년 사용자에게 맞춘 모델을 출시했습니다.
06. Inhertance and Innovation of UI (UI의 상속과 혁신)
2020년 UI 디자인 트렌드는 이전 스타일을 개선하고 발전하는 방향으로 진행되어 왔습니다. 플랫하고 제한된 인터페이스 스타일이 유행한 이후 디자이너는 더 자유롭고 획기적인 시각적 표현을 갈망하게 되었습니다.
6-1. 다크 모드
2019년에 iOS 13 다크 모드가 뒤늦게 등장한 데에 이어 대규모의 애플리케이션에서도 이 기능을 출시했습니다. 2020년에도 다크 모드는 계속 인기를 끌 것이며 가시성 및 구현 비용 측면에서 연구는 계속될 것입니다.
6-2. 새로운 모방
디자인 트렌드는 날로 발전하고 있으며 플랫 디자인 유행 이후 다시 한번 사물을 사실적으로 표현하는 디자인 트렌드가 급부상했습니다. 새롭게 사물을 모방하는 방식은 기존의 모방 스타일을 개선하고 혁신하는 방향으로 발전합니다.
Neumorphism(뉴모피즘)은 디자이너 Alexander Plyuto가 드리블을 통해 선보인 디자인을 시작으로 유행했습니다. 평면 인터페이스는 프로젝션으로 재구성되어 부조와 유사한 시각적 효과를 모방했으며 이전에는 없었던 신선한 사물 모방 방식으로, 많은 디자이너들이 이를 모방했습니다.
실용성과 정착 가능성에 대해서는 여전히 의문의 여지가 있지만 디자이너의 마음을 사로잡은 새로운 스타일로, 다음 트렌드에 대한 영감을 주는 뮤즈로써 디자인적 의미가 있습니다.
WWDC 2020 Mac OS 업데이트는 이러한 새로운 모방 방식을 재구성한 디자인을 선보였습니다. 새로운 Mac OS 시스템인 Big Sur에서 아이콘 디자인에 약간의 그라데이션, 투영 및 하이라이트가 추가되어 아이콘 내의 요소들이 자연스러워진 것을 볼 수 있습니다.
6-3. 다채로운 색상
플랫하고 단순한 UI 스타일이 유행한 후에도 다채로운 컬러를 이용한 디자인은 여전히 트렌드 중 하나입니다. 컬러 선택지의 다양함과, 충돌하는 컬러들이 주는 강렬한 대비는 시각적 경험을 효과적으로 제공합니다.
6-4. 폰트 장식
UI 인터페이스가 점점 더 플랫 해지면서 컬러 블록 아이콘이 설자리가 점점 좁아졌습니다. 중심 콘텐츠를 다른 콘텐츠보다 더 강조하기 위해 iOS 11은 제목 폰트를 더 크게, 더 두껍게 사용합니다. 그러면서 최근 헤드 라인은 정보 전달의 역할 이외에도 장식적인 역할을 하기 시작했고, 큰 폰트를 사용하는 것은 레이아웃을 장식하는 요소 중 하나가 되었습니다.
6-5. 더 큰 필렛
큰 둥근 모서리 스타일은 계속 유행하고 있습니다. 과거보다 둥근 모서리가 더 커지고 큰 폰트를 사용하면서 여백이 많아졌습니다. 이는 통기성 있고 투명한 시각적 경험을 제공합니다.
Mac OS Big Sur의 인터페이스는 이전 버전보다 더 큰 둥근 모서리를 사용하며 시스템 아이콘 디자인을 둥근 사각형으로 통합했습니다.
6-6. 풍부한 일러스트레이션
UI 일러스트레이션의 풍부함이 스타일과 콘텐츠에 반영되기 시작했습니다. 스타일은 3D 스타일이 유행하기 시작했으며, 콘텐츠는 Narrative illustration(서술적 삽화) 방식이 유행하기 시작했습니다.
3D 일러스트레이션
지난 몇 년 동안 3D 그래픽은 움직이는 영상이나 또는 설계 디자인에서 더 많이 사용되었습니다. 그러나 3D 일러스트레이션이 유행하면서 3D 스타일의 UI 일러스트레이션이 등장하게 되었습니다. 이는 사용자에게 3차원적이고 신선한 시각적 경험을 제공하는 효과가 있습니다.
서술적 삽화 방식 / Narrative illustration
내용보다 형식 즉, 스타일에 더 집중한 지난 몇 년간의 UI 일러스트레이션보다 ‘정보 전달’ 측면에서 더 기능적인 형태의 일러스트레이션이 새로운 트렌드입니다. 쉽게 말해 각 일러스트레이션은 제품 정보나 브랜드 감성 정보를 사용자에게 전달하는 기능을 갖고 있습니다. 서술적 삽화 방식을 통해 사용자에게 시각적 경험을 제공하는 이 방식은 사용자와 제품을 정서적으로 연결하는 데에 도움을 줍니다.
일러스트레이션의 컴포넌트화
일러스트레이션의 인기로 인해 비용이 상승했습니다. 일러스트 통일성을 위해 한 명의 디자이너가 일러스트레이션 세트를 그리거나 다양한 상황을 그려야 하는 경우가 생긴 것입니다.
이러한 비용과 효율성 문제를 해결하기 위해 일러스트레이션을 컴포넌트화 방식으로 그리기 시작했습니다. 이는 일러스트레이션을 캐릭터, 장면, 사물 등 여러 요소(컴포넌트)로 나누고 필요에 따라 각 요소를 조립하고 사용하는 방식입니다. 디자이너는 필요에 따라 각 요소들을 자유롭게 결합할 수 있으며 이를 통해 일러스트 통일성 문제를 해결할 수 있습니다.
디자이너 Pablo Stanley는 벡터 일러스트레이션 구성 요소 세트를 만들고 캐릭터의 자세를 상반신, 전신 및 앉은 자세로 나누었습니다. 세 가지 자세와 다양한 표정, 헤어 스타일 및 의상의 다양한 조합을 통해 거의 60만 개의 일러스트레이션을 구성해냈습니다.
6-7. 다차원적인 애니메이션 표현
애니메이션이 새로운 트렌드로 자리 잡으면서, 이전보다 더 입체적인 애니메이션이 유행하게 되었습니다. 이에 따라 애니메이션의 프레임률은 더 높아지고(프레임률이 높을수록 부드러운 움직임을 제공합니다.) 시각적 경험은 풍부해졌습니다.
손으로 그린 애니메이션
손으로 그린 그림은 지난 몇 년 동안 인기가 많았으며, 캐주얼하고 자연스러운 붓놀림은 사용자에게 따뜻한 느낌을 줄 수 있습니다. 새로운 트렌드에 따라 애니메이션을 추가하는 것은 손그림에 흥미를 더할 수 있습니다.
3D Movement
Google Material Design은 카드 투영 계층 구조와 2 차원 애니메이션 방식을 통해 평면 인터페이스의 Z축에 깊이를 부여합니다. 3D 스타일이 유행하면서 인터페이스의 움직임도 2D에서 3D로 추세가 바뀌고 있으며, 3D 장면에서 사용자에게 원근감을 보여주고 있습니다.
움직이는 애니메이션
움직이는 애니메이션은 오프라인 영화관에서 온라인 스트리밍 미디어로 이동했습니다. 휴대폰의 프레임 화면 비율은 90Hz에서 120Hz로 업그레이드되었습니다. 화면 속 움직임은 프레임 화면이 많아짐으로 인해 부드러워지고 이에 대한 사용자 정의는 끊임없이 새로워지고 있습니다.
이에 맞게 UI 애니메이션의 프레임도 새로운 트렌드가 되고 있습니다. Telegram의 이모티콘은 높은 프레임률의 애니메이션을 사용하여 사용자에게 보다 부드러운 시각적 경험을 제공합니다.
07. More Efficient Design Collaboration Mode(보다 효율적인 설계 협업 모드)
UX를 지속적으로 업그레이드시키고 기기 상에서 이루어지는 빠른 계산의 반복은 UX 디자이너에게 효율성 상승이란 숙제를 제시합니다. 효율적인 디자인은 영원한 트렌드입니다.
7-1. 로컬 파일에서 클라우드 협업까지
전통적인 파일 전송 방법은 비효율적이며 이는 디자이너 간의 정보 비대칭으로 이어지고 궁극적으로 제품 경험에 영향을 미칩니다. 최근 몇 년 동안 온라인 디자인 협업 툴이 빠르게 발전하였고, 이는 디자이너에게 UI 디자인, 디자인 전달 및 컴포넌트 협업에서 보다 효율적인 실시간 협업 경험을 제공하였으며, 많은 UX 디자이너를 매료시켰습니다.
2019년 ux tool 디자인 툴 설문 조사에서 온라인 디자인 협업 툴의 선두주자인 Figma가 협업과 성능 우위를 앞세워 Sketch를 따라잡을 기세로 성장하고 있음을 볼 수 있었습니다.
협업에서 디자인 효율성에 대한 필요성이 커지고 있습니다. 이에 따라 디자인 문서가 로컬에서 클라우드 협업으로 이동하는 것은 거스를 수 없는 추세입니다. 그러나 디자인 툴 교체는 많은 비용을 필요로 하며, 특히 대규모 디자인팀의 경우 디자인 툴을 교체한 후 효율성과 경험의 일관성을 향상하려면 힘든 시간을 이겨내야 합니다.
7-2. 과학적이고 효과적인 디자인 시스템
초기의 정적 사양에서 현재의 동적 디자인 시스템에 이르기까지 UX 개발이 가지는 의미는 다음과 같습니다. 바로 제품의 반복적인 개선으로 인해 발생하는 디자인 효율성, 제품 경험 문제를 해결하는 것입니다. 비즈니스 주도 아래 제품이 반복적으로 개선되는 현상은 증가할 것이며, 디자인 시스템은 향후 몇 년 동안 여전히 디자인 트렌드 중 하나가 될 것입니다.
여기에 언급된 디자인 시스템은 넓은 의미의 디자인 시스템(처음부터 새롭게 만들고 기획)이 아니라 인터넷 디자인 개발에서 컴포넌트화 된 디자인(만들어진 디자인 컴포넌트들을 수정, 개선하는 방향)을 점차적으로 개선시키는 일련의 디자인 협업 방법입니다.
"디자인 시스템은 내부적으로 상호 연결된 일련의 디자인 패턴과 공동의 목표를 달성하는 여러 사람들 간의 협업 방법입니다."( "디자인 시스템"에서 인용, Alla Kholmatova, C7210 번역).
디자인 시스템 프로세스의 진화
컴포넌트 개발의 역사는 가이드라인 문서를 거쳐 UI 구성 요소로 이동한 다음 디자인 시스템으로 이동했습니다. 형태는 초기 디자인 일관성 가이드라인에서 제품 개발 프로세스 사양 및 제품 디자인 값 출력으로 이동했습니다. 현재 디자인 시스템은 통합적인 형태로, 제품 전체의 디자인 형태에 영향을 미칩니다.
디자인 시스템의 구조는 아래 그림과 같습니다.
디자인 시스템의 차이를 유지하면서 공통점을 추구
디자인 시스템은 정적이지 않습니다. 팀의 성격과 제품 특성에 따라 콘텐츠가 차별화되기 때문에 역동적으로 진화하는 시스템입니다. 예를 들어 대규모 팀의 디자인 시스템은 더 크고 포괄적이며 소규모 팀의 디자인 시스템은 작고 정교한 경향이 있습니다. 이미 완성된 제품의 디자인 시스템은 완전히 폐쇄적인 협업 프로세스를 만드는 쪽으로, 신제품 디자인 시스템은 작은 것에서 시작하여 빠른 반복으로 진행될 수 있도록 협업 프로세스를 만들어야 합니다.
디자인 시스템의 트렌드는 제품의 수직화와 세분화에 따라 같은 트렌드에서도 제품과 팀에 알맞은 방식과 리듬을 찾아 협업 프로세스를 구축하는 것입니다.
Material Design은 가이드라인, 구성 요소 및 디자인 개발 도구를 포함하는 자체 적응형 디자인 시스템입니다. 이는 플랫폼 기반 디자인 시스템으로써, 전체 디자인에 대한 가이드라인을 제시하고 디자이너가 이에 맞춰 신속하게 디자인할 수 있도록 했습니다.
Google 생태계는 거대하고 복잡하며 머티리얼 디자인은 더 포괄적입니다.B 제품에 대한 솔루션을 제공하는 플랫폼으로써 Ant Design은 디자인 가용성과 완성도를 기준으로 디자인 시스템을 구성합니다.
Ant Design은 모듈 식 솔루션을 통해 중복 생산 비용을 줄여 디자이너가 더 나은 사용자 경험에 집중할 수 있도록 합니다.QQ는 95년대 이후에 등장한 2C 소셜 제품입니다. 이 제품의 디자인 시스템 Q언어는 스타일과 톤에 대한 디자인 가이드라인을 제시하는 동시에, 디자이너에게 어느 정도의 자유를 제공했습니다. 또한 QQ내의 여러 제품과 인터페이스 테마 스타일을 고려하면서, 기본 컴포넌트는 디자인과 개발을 용이하게 하기 위해 표준화되었습니다.
Q 언어는 제품의 무료 조정 기능 외에도 테마 및 기본 구성 요소를 규제합니다각 제품과 팀마다 고유의 특성이 있고 이를 목표로 디자인 시스템도 구축되어야 합니다. 이는 제품과 팀에 알맞은 해결책을 찾아내고 효율성을 극대화하기 위해 실행 가능한 방법입니다.
과학적이고 효과적으로 최적화된 반복
컴포넌트는 디자인 시스템의 중요한 부분이지만, 과거의 정적이고 분리된 협업 방식은 컴포넌트의 업데이트 반복을 지연시키고 차단했습니다. 디자인 시스템의 개발과 디자이너 컴포넌트 개념이 보급되면서 컴포넌트를 과학적이고 효율적인 방법으로 업데이트할 필요가 생겼습니다.
2019년에 출시된 Figma의 Design System Analytics 기능을 통해 컴포넌트 디자이너는 인용 횟수, 그룹 해제 시간 등을 포함한 컴포넌트 사용 상황을 표시하고 사용량 곡선 트렌드 그래프를 데이터 형식으로 만들 수 있습니다. 이는 컴포넌트 작업이 반복적으로 이루어질 때, 팀에 최적화된 방향으로 진행될 수 있도록 합니다.
1. 분석 기간 선택 2. 구성 요소 사용 빈도 그래프 3. 팀 사용 4. 모든 구성 요소 사용추신
향후 UX에 어떤 새로운 트렌드가 나타날까요? 인공 지능과 같은 알고리즘의 발전, 5G 기술의 대중화, 새로운 형태의 스마트 기기, 새로운 정보 처리 기술, 차세대 사용자의 선호도와 취향... 이들은 향후 UX 디자인 방향에 많은 영향을 줄 것이며 앞으로 사용자의 요구 사항은 점점 더 많아질 것입니다.
UX 디자이너는 기술 트렌드에 대해 더 많이 알아야 합니다. 사용자가 사용하는 실제 상황을 바탕으로 사용하기 쉽고 효율적인 디자인을 만들어야 합니다. 또한 사용자에게 실질적인 혜택을 주어 그들에게 정서적 즐거움을 주고 가치 있는 의미를 부여해야 합니다.
위에서 사용된 이미지는 텐센트에서 발간한 디자인 트렌드 리포트 중 UX에서 발췌해 사용하였습니다.
