디자인
2021년의 UX 디자인 트렌드
10분
2021.01.08.5.0K
음성 인터페이스
저희는 2020년의 UX를 예상하며 올렸던 글에서 이미 음성 사용자 인터페이스(VUI)에 대해서 이야기했습니다. 올해 볼 수 있었듯이, 음성을 통한 명령은 UX 디자인에서 여전히 가장 뜨거운 트렌드 중의 하나로 존재하고 있습니다. 다가오는 새해에도 절대로 무시할 수 없을 정도라고 말할 수도 있습니다. 2021년에는 음성 챗봇(chatbot)과 가상 비서들이 계속해서 인기를 끌 것이라는 데는 의심의 여지가 없습니다. 사용자들은 디지털 환경에 있어서는 계속해서 단순함과 효율성을 원하고 있습니다. 시장의 수요, 높은 기대, 그리고 인공지능 기술이 급속도로 발전하면서, 수많은 브랜드들도 자신들의 제품에 음성 기반의 기능들을 포함시킬 수 밖에 없게 되었습니다. 이미 수많은 기업들이 VUI를 광범위한 분야에서 구현하기 위해서 기반을 다지고 있습니다. 예를 들자면 스타벅스(Starbucks)에서는 이미 마이 스타벅스 바리스타(My Starbucks Barista)라는 AI 기반의 챗봇을 선보이기도 했습니다. 이 챗봇의 목표는 사용자들이 음성 명령을 통해서 좋아하는 음료를 살 수 있게 함으로써 커피를 주문하는 경험을 향상시키는 것입니다.
미니멀리즘 UI
미니멀리즘은 아마도 요즘의 시각 디자인에서 가장 눈에 띄는 트렌드 중의 하나일 것입니다. 사용자들은 웹사이트 운영자들이 전달하고자 하는 중요한 메시지들이 점점 더 계속해서 증가하고 있다는 것을 알고 있습니다. 쿠키 팝업과 할인 광고 등을 비롯한 다양한 알림 메시지들이 나타나서 웹사이트 방문자들의 참여율을 높이고 고객으로 전환하려고 노력하지만, 그것이 지나치게 되면 오히려 우리를 지치게 만듭니다. 그래서 미니멀리즘이라는 사용자 중심의 디자인이 전면에 등장하게 된 것입니다. 하지만 “미니멀리즘”이 “밋밋하다”거나 “아무것도 없는 상태”를 말하는 것은 아닙니다. 오히려 그것은 “우아하면서도 효율적인” 디자인 입니다. 비록 색상의 수와 디자인 요소의 사용이 제한되고, 밝은 분위기를 내는 것이 필수적이지만, UX 디자이너들은 여전히 비례와 구성을 통해서 많은 일을 할 수 있습니다. 게다가 각 구성요소들의 기능성이 전면에 부각되며, 제품의 특징을 적절히 강조하고 메시지를 제대로 전달하기 위해서는 상당한 창의력이 요구됩니다. 반면에 단지 장식을 위해서 구성요소들을 배치하는 디자인은 점점 더 설 자리를 잃고 있습니다.
이미지 출처: 튜빅스튜디오(tubikstudio.com)
컨텐츠와 메시지, 네비게이션을 명확하게 보여주는 것이 UX 디자인에 대한 미니멀리즘적인 접근법의 또 다른 중요한 측면입니다. 정보의 과부하는 요즘의 사용자들에게는 짜증을 유발할 수도 있습니다. 즉, 웹사이트 운영자들은 UX 디자인을 명확하고 깔끔하게 만들기 위해 노력해야 한다는 것입니다.여백의 미
여백(negative space)은 미니멀리즘 UI에 대한 시장의 수요에서부터 파생된 UX 디자인의 중요한 트렌드입니다. 간단히 말하자면, 여백이란 페이지의 레이아웃에서 개체 주변(매크로 공간)이나 개체의 내부(마이크로 공간)에 있는 빈 공간을 말합니다. 이것은 이미 별도의 디자인 요소가 되었으며, 시각적인 아름다움과 사용자 경험의 최적화에 있어서 중요한 역할을 하고 있습니다. 구글의 홈페이지나 애플의 공식 스토어를 비롯해서 웹플로우(Webflow)로 만든 몇 개의 웹사이트들이 대표적인 사례입니다.
일부 공간을 비워두는 것은, 즉 디자인에 “침묵”을 추가하는 것은, 언제나 의미를 가진 것이어야 합니다. 그렇지 않으면, 사용자들은 정보가 부족하다고 생각할 것입니다. 여백의 주된 기능은 웹 페이지를 깔끔하게 정리해서 사용자들이 중요한 개체와 메시지에 집중할 수 있게 관심을 끄는 것입니다. 콘텐츠의 우선순위 계층을 이렇게 깔끔하게 정리하면, 사용자들이 중요한 내용에 좀 더 쉽게 집중할 수 있습니다.
이미지 출처: 드리머유엑스(dreamerux.com)
여백은 때로는 “빈 공간”이나 “공백”이라고 부르기도 합니다. 이런 용어들은 모두 서로 바꿔서 사용할 수 있습니다. 어떤 공간에 다른 구성요소가 굳이 필요 없다면, 다크 모드는 물론이고 다른 색상에서도 이러한 사용자 경험을 활용할 수 있습니다.불완전한 구성요소
코로나19 이후의 온라인 경험은 그 전까지 우리가 익숙했던 것들과는 다를 것입니다. UX 디자인도 이처럼 불확실한 상황을 반영할 수밖에 없습니다. 디지털 공간에서도 브랜드의 이미지에 이처럼 불확실한 분위기를 연결시키기 위해서, 디자이너들은 의도적으로 레이아웃에 “불완전함”을 구현하고 있습니다. 이러한 요소들로는 손으로 그린 개체에서부터 구성이나 비율에서 특별한 요소를 가미하는 것까지 다양한 방식이 있습니다.
이미지 출처: 메일침프(mailchimp.com)
일반적으로 불완전한 디자인은 브랜드의 정체성을 보여주고 자신들의 개성을 강조하기 위한 훌륭한 방법이 될 수 있습니다. 그러나 이러한 UX 트렌드를 적용하려면, 한 가지 중요한 원칙을 기억해야 합니다. 즉, 균형감이 있어야 한다는 것입니다. 그리고 뭔가를 과도하게 사용하면 전혀 효과가 없을 것입니다.뉴모피즘(neumorphism)
뉴모피즘 스타일은 UI 디자인에 있어서 중요한 두 가지 접근법인 스큐어모피즘(skeuomorphism)과 평면 디자인(flat design)을 조합한 것입니다. 이들 두 가지 접근법은 서로 반대되는 성격을 가진 것으로 여겨지는 경우가 많습니다. 스큐어모피즘은 현실 세계의 사물은 물론이고, 우리가 그런 사물들과 상호작용하는 방식까지 모방하는 것이 전부라고 할 수 있습니다. 스큐어모피즘은 초현실적인 구성요소들이 직관적이며 사용자 친화적인 UI를 만드는 데 있어서 필수적이었던 몇 십 년 전에 인기가 많았습니다. 컴퓨터 바탕화면의 휴지통 아이콘이 대표적인 사례입니다. 반면에 평면 디자인은 좀 더 최근에 나타난 것으로, 2차원적이며 미니멀하면서도 밝은 색을 위주로 하는 단순한 개념입니다. 뉴모피즘은 이 두 가지 접근법에서 최고만을 활용합니다. 뉴모피즘은 그래픽이 강한 요소와 그림자, 그라데이션을 활용해서 현실 세계의 물체를 똑같이 재창조하는 것이 아니라 그것을 연상시키는 방식으로 버튼과 카드를 만들어 냅니다. 뉴모피즘 스타일에서는 사실주의를 극한으로 밀어붙이지 않습니다. 대신에 옅은 색과 미묘한 대비를 가진 “부드러운” 모습을 표현하기 위해서 노력합니다.
이미지 출처: 저스트인마인드(justinmind.com)
뉴모피즘은 최근 몇 년 동안 UX/UI 전문가들 사이에서 가장 논쟁적인 주제의 하나가 되어 왔습니다. 사용자 인터페이스에서 실제로 이런 접근방식을 채택한 디지털 제품이 아직까지 많은 것은 아니지만, 뉴모피즘의 개념에 열광하는 디자이너들은 많이 있습니다. 비핸스(Behance)나 드리블(Dribbble)과 같은 전문 플랫폼에서는 이미 뉴모피즘과 관련한 다수의 예시들이 올라오고 있습니다. 따라서 우리는 2021년에는 이러한 추세가 휴대전화와 노트북 화면에서 결국 자리를 잡을 것이라고 충분히 예상할 수 있습니다.
이미지 출처: 드리블(dribbble.com) 이미지 제작: 바르샤 싱(Varsha Singh)
3D 요소와 패럴랙스
패럴랙스(parallax) 효과와 3D 요소들은 UI 디자인에서 전혀 새로운 것은 아닙니다. 우리는 그런 요소들이 수많은 웹 디자인 솔루션에서 어떻게 구현되어 있는지에 대해서 이미 살펴 봤습니다. 그러나 우리는 이러한 사용자 경험 트렌드의 인기가 여전히 커지고 있다는 것을 볼 수 있습니다. 첫째, 이를 활용하는 사례가 크게 늘어났습니다. 요즘에는 3D 요소와 패럴랙스 효과가 더 이상 화려하면서도 이국적인 것이 아닙니다. 이런 효과는 점점 더 흔하게 볼 수 있는데, 특히 사람들의 눈에 띄고 싶어하는 패션과 전자상거래 브랜드 분야의 웹사이트와 앱에서 이런 경향이 많이 나타나고 있습니다.
이미지 출처: 유엑스디자인(uxdesign.cc)
또 다른 트렌드는 하나의 인터페이스 안에서 패럴랙스 효과와 3D 그래픽을 조합하는 것입니다. 패럴랙스 스크롤을 사용하면, 웹 페이지의 배경에 있는 요소와 전면에 있는 것들이 서로 다른 속도로 움직입니다. 그것만으로도 깊이감이 만들어집니다. 이러한 효과에 3D 개체를 추가하게 되면, 사용자의 기억 속에 오래 남을 수 있는 진정으로 몰입감을 주는 경험을 만들 수 있습니다.
이미지 제작: 토이파이트(toyfight.co)
비대칭
우리가 사용하는 기기의 화면이 점점 더 넓어지면서, UI/UX 디자인에서도 비대칭이라는 트렌드가 상승세를 타고 있습니다. 일반적으로 비대칭이라는 속성은 예술과 웹 디자인에서 미니멀리즘과는 반대되는 양식인 브루탈리즘(brutalism)에서 나온 것입니다. 하지만 이런 기법을 다른 브루탈리즘적인 요소들과는 별개로 사용하면, 은근하면서도 우아한 분위기는 유지하면서 웹사이트를 흥미로워 보이게 만들 수 있습니다.
이미지 출처: 아이핀이미지(i.pinimg.com)
비대칭 레이아웃에 대한 UI/UX의 트렌드는 부서진 그리드나 겹치는 구성요소, 분할된 화면 등과 같은 웹 디자인의 다른 창의적인 기법들과 함께 구현되는 경우가 많습니다. 그리고 타이포그래피에서도 이러한 비대칭을 적용할 수 있습니다. 제대로만 된다면 브랜드의 메시지를 더욱 눈에 띄게 하고 기억에 남게 만들 수 있습니다.
이미지 출처: 드리블(dribbble.com)
하지만 비대칭 디자인이 “UI 구성요소들을 아무렇게나 배치하는 것”을 의미하는 게 아니라는 사실을 명심해야 합니다. 레이아웃에서 개체들을 배치하는 방식은 사용자들의 시선을 올바른 방향으로 유도하고, 브랜드가 중요한 정보를 강조할 수 있게 도와주어야 합니다.애니메이션
요즘에는 인터넷에서 아무 웹사이트에나 들어가면, 우리는 GIF나 마이크로 애니메이션, 애니메이션 일러스트, 그 외에도 모션 디자인을 이용한 요소들을 많이 볼 수 있습니다. 애니메이션은 사용자 경험 디자인에서 여전히 인기를 누리고 있으며, 지금도 계속해서 많이 사용되고 있습니다. 시각적으로 매력적인 것 이외에도, 움직이는 개체는 사용자의 참여를 이끌어내고 내비게이션을 단순하게 만들어줍니다. 그리고 디지털 제품이나 서비스에 생기를 불어넣기 때문에, 좀 더 인간적인 느낌으로 만들어 줍니다.
이미지 출처: 저스트인마인드(justinmind.com)
이러한 소프트웨어 개발 트렌드를 사용자 인터페이스 디자인에서 사용하고 싶다면, 신중하게 활용하는 것이 중요합니다. 특별한 의미 없이 화면 위에서 떠다니는 개체는 혼란을 일으키며, 사용자들은 원래 생각했던 것보다 훨씬 더 빨리 웹 페이지를 떠나게 만들 수도 있습니다. 애니메이션 요소들도 사용자 인터페이스를 불필요하게 복잡하게 만들어서는 안 됩니다. 이러한 요소들은 언제나 페이지의 내용과 관련이 있어야 하고, 구현할 만한 가치가 있어야 하며, 부드럽게 동작해야 합니다.정보 구조
정보 구조(information architecture)는 다양한 정보들이 한 페이지 내에서 체계적으로 구성되는 방식을 말합니다. 이것은 사용자 중심 디자인(UCD)의 핵심 요소이며, 사용자들을 위해서 디지털 환경을 보다 편안하게 만드는 것이 목적입니다. 효과적이고, 유용하며, 일관성 있는 정보 구조를 만드는 것은 사용자 연구와 사용성 테스트와 함께 UCD 프로세스에 있어서는 필수적인 단계이다.
이미지 출처: 엑스디 아이디어(XD Ideas)
적절한 정보 구조를 만들려면, UX 디자이너들은 제품의 대상 고객층이 누구인지, 그리고 그들의 행동과 디지털 솔루션을 사용하는 이유가 무엇인지에 대한 확고한 이해가 필요합니다. 사용자들은 많은 노력을 들이지 않고도 원하는 결과를 얻을 수 있어야 합니다. 그렇기 때문에 사용자의 목표와 명확한 내비게이션, 그리고 (사각지대에 대한 모니터링을 포함해서) 콘텐츠의 표현까지도 디자인 프로세스의 와이어프레임 단계에서 언제나 고려되어야 하는 것입니다.결론
이번 글은 요즘과 같은 초협력(hyper-competitive) 디지털 세상에서 도움을 주기 위해 작성된 것입니다. 여기에서 언급한 모든 UX 트렌드는 어떠한 소프트웨어 솔루션이나 웹사이트에서도 사용자의 실질적인 경험을 확실하게 개선할 수 있습니다. 또한 사용자의 기대치가 높은 경우에도 자신의 제품을 대상 고객층에게 더욱 매력적으로 보이게 만들어 줄 수 있습니다. 그럼에도 불구하고, 지난 한 해를 돌이켜보면, 우리는 모든 것을 예상하는 것이 불가능하다는 것을 알 수 있었습니다. 그래서 우리는 UX 분야에서 일어나고 있는 동향과 최신 소식에 대해서도 여러분에게 계속해서 정보를 제공해 드리겠습니다.로그인하고 자유롭게 의견을 남겨주세요.
