<주간 UIUX 디자인 : UIUX 트렌드>

2024 UIUX 트렌드, 가장 먼저 알아보고 미리 준비해요!

제로베이스 UIUX 디자인 취업 스쿨

00 | UIUX 디자이너, 트렌드 파악이 필수라며?

디지털 기술의 발전과 사용자 맞춤형 적용기술이 다양해짐에 따라 UIUX 디자인 또한 광범위하게 진화하고 있습니다. 특히 기술의 변화가 빠른 만큼 크게 달라지는 트렌드를 항상 주시할 필요가 있어요. 그 속에는 늘 사용자 경험이 자리하고 있음은 거부할 수 없는 현실이고요. 사용자 경험 중심 디자인은 여러 해 동안 많은 주목을 받아왔지만, 2024년에는 사용자를 위한 몰입형 경험을 만들기 위해 경쟁하면서 더욱 가속될 것으로 예상돼요.

제품이나 서비스의 각 상호작용이나 터치포인트는 모두 더욱더 사용자를 염두에 두고 설계될 것이며, 히어로 이미지나 헤드라인, 애니메이션과 비디오 및 텍스트를 통해 사용자의 관심을 끌 수 있도록 구성될 거에요. 기업은 늘 사용자의 요구사항과 선호도를 쉽게 파악하고 고객을 위한 개인화된 경험을 만들어 나가고 있어요. 특히 2024년에는 AI기반 플랫폼을 활용하여 탐색을 단순화하고 권장사항이나 솔루션을 즉시 제공하는 것이 트렌드가 될 거예요. 오늘은 본격적으로 모바일 UIUX의 최신 디자인 트렌드와 향후 2024년의 UIUX 디자인 트렌드를 소개해 보려고 해요.

01 | 2023년 IT 트렌드, 빠르게 알아보자!

모바일 UIUX의 최신 디자인 트렌드를 파악하는 것은 이 분야에 종사하고 있거나 관심을 가지고 있는 사람이라면 더없이 중요해요. 전체적인 경향의 흐름을 파악하는 것도 필요하지만, 기술적인 부분이나 디자인의 세부적인 경향을 파악하고 적용해 나갈 필요가 있어요. 최신 디자인 경향은 단순히 보기 좋고 시각적 아름다움에 집중하기보다 불필요한 요소들은 제거하여 사용자 경험에 더욱 치중하기 때문이에요. 이렇게 최근의 기술적 발전 변화는 너무나 빠르고 역동적이며, 이를 통해 새로운 트렌드에 대한 예측이 가능하기 때문에 항상 관심을 가질 필요가 있어요.

1) 챗봇

챗 GPT는 2023년 최고의 화두였다고 할 수 있죠. 많은 분야에서 챗 GPT가 인간의 영역을 대체할 것이라는 경고와 기대를 한 몸에 받으며 큰 관심을 끈 분야입니다. 이러한 인공 지능(AI)의 발전은 챗봇에 대한 사용자의 기대치를 폭발적으로 높이고 있어요. 제한적인 매뉴얼의 채팅이 전부였던 챗봇 시장은 이제 더 자연스러운 질문과 응대가 가능해졌으며, 챗 GPT를 경험해 본 사람이라면 챗봇이 더욱 자연스러운 응대를 하리라는 것에 의심이 없을 거예요. 특히 그동안의 챗봇은 매뉴얼 된 채팅에 머물렀다면 AI와 머신 러닝은 인간과 같은 챗봇 대화를 통해 고객 경험을 크게 향상시킬 거에요. 이러한 챗봇 개선 사항에는 더욱 자연스러운 언어, 향상된 문법 명령, 더욱 복잡한 어휘 및 철자 오류와 오타를 해석하는 능력까지 포함돼요.

챗봇이 사용자의 문제를 더욱 빠르고 쉽게 해결할 수 있다면 사용자는 기업의 제품이나 서비스에 더 큰 신뢰를 가지게 될 것이며, 좋은 경험을 타인과 공유하려는 경향 또한 더욱 커질 거예요. 따라서 사용자가 더 쉽게 상호작용할 수 있는 챗봇은 채팅 형태는 물론 보이스 형태를 포함하는 것이 당연해요.

2) AI기반 음성 보조장치

“지니야”, “하이 빅스비”와 같은 호출은 최근 몇 년 동안 음성 보조장치의 유행을 불러왔지만, 사람과 같은 자연어 처리는 완벽하지 않아 한때의 유행으로 끝나는 듯했어요. 하지만 최근 AI의 발전과 함께 AI 기반의 음성 보조 장치의 문맥 이해는 음성 기반의 운영체제를 제공하는 계기가 될 것으로 예상돼요. 인간과 기계 간의 대화를 통한 상호작용 세대는 Eliza가 1세대, 구글 어시스턴트가 2세대라면 챗 GPT와 같은 생성형 인공지능(GenAI)를 3세대로 볼 수 있죠. 2세대에 속하는 아마존(Amazon)의 알렉사(Alexa)는 이미 우버(Uber)와 도미노 피자의 주문에도 사용되고 있으며, 포드 자동차에 포함되어 안전한 운전을 돕고 있어요. 사용자는 운전대에서 손을 떼지 않고 방향을 묻거나 음악을 바꾸는 것이 가능하여, 스마트 카 시스템의 서비스를 향상시켜요.

이러한 기술은 스마트 홈에서의 제어도 가능하게 해요. 조명을 켜고 자동 온도 조절이나 공기 정화 등을 실행할 수 있어요. 게다가 집 안에서 음악을 재생하거나 전화, 음식 주문, 그리고 인터넷 검색까지 수행할 수 있어요. 단순히 스마트 폰에서 리모컨과 같은 역할로 전자 제품을 제어하기만 했던 IOT기술은 이제 더 자연스러워진 음성을 통해 제어되면서 주춤했던 보이스 분야의 제품이 더욱 가속화될 것으로 기대됩니다.

3) M-페이, M-커머스

2023년 현대카드는 그동안 아이폰 유저의 큰 바람이었던 애플페이를 국내에 도입했어요. 삼성 유저들은 이미 사용하고 있던 기능이지만, 아이폰 유저들은 애플 페이를 오랫동안 기다려 왔죠.

M-커머스(M-Commerce)는 무선 데이터 장비를 이용하여 정보, 서비스, 상품 등을 교환해요. 구매 및 판매를 목적으로 인터넷을 사용하는 것은 E-커머스와 같지만, 모바일이라는 특성 면에서 매우 달라요. 안전한 지불 업무는 M-커머스의 핵심 중의 하나로 즉시성, 편의성, 개인성, 위치 인지성 등의 특징이 있어요. 최근 몇 년간 모바일 사용의 급증으로 M-커머스 시장은 E-커머스 시장을 넘어선 지 오래며, M-커머스 애플리케이션은 시간이 중요하고 이동이 많은 사람에게 어필되고 있어요.

M-커머스는 더욱 효율적으로 업무를 수행할 수 있는 서비스를 위해 확장되어 2012년 이후에는 NFC(Near Field Communication) 칩을 통해 일반 카드처럼 단말기에서 수신하는 방법으로 결제가 이루어지는 시스템이 서비스되고 있어요. 물론 망막 스캔, 얼굴 인식 또는 지문을 통해 수행되는 생체 인증도 가능해요. 애플페이, 삼성페이는 물론 네이버 페이와 같이 거의 모든 쇼핑몰은 자신들만의 페이 방식을 사용하면서 사용자를 유치하고 있어요. 이러한 다양한 모바일 페이 방식은 실물 카드 없이 몇 번의 탭만으로 거래를 가능하게 하여 M-커머스 시장은 지속적으로 확대될 예정이에요.

4) 스마트 미러

최근 산업 분야는 스마트 미러를 통해 다양한 시도를 하고 있어요. 스마트 미러는 주로 스마트 홈, 자동차, 상점 및 의료분야에서 주로 사용되며 자동차에서의 스마트 미러는 이미 상용화됐어요. 자동차 내부에서 다양한 정보의 습득이 가능하고, 사이드미러의 센서 기능을 통해 전후방은 물론 차량 좌우의 상태, 교통상황이나 사각지대 등의 정보를 즉각적으로 확인이 가능하답니다.

스마트 미러는 매장에서 물리적 피팅 룸이 필요 없게 만들어요. 소비자는 그저 거울에 원하는 제품을 가져다 대는 것만으로 스스로에게 피팅 된 라이브 뷰를 볼 수 있습니다.

5) AR과 VR

피지털 디자인은 사용자에게 새로운 유형의 경험을 제공하기 위해 물리적 개체와 디지털 개체를 결합한 ‘Physical’과 ‘Digital’을 합성한 단어입니다. 피지털 디자인은 대중화뿐 아니라 필수 요소로 자리 잡아 가고 있으며, 그 중심에는 AR과 VR이 있어요. 증강현실 AR(Augmented Real)과 가상현실 VR(Virtual Reality)은 대역폭 요구량이 많은 기술이지만 5G로 인해 피지털 디자인 분야와 몰입형 게임 산업 시장이 커질 것으로 예상돼요. 증강 현실은 현실 세계와의 접점을 디바이스로 확인하기 때문에 실제 처음 가는 곳의 여행자라도 정보 습득이 용이하며 다양한 분야에서 확장도 가능해요. 문자나 메일을 주위의 공간으로 투영하는 것은 물론, 클라우드에 즉시 접속 가능한 방식의 5G 기술은 디바이스의 한계를 뛰어넘을 가능성도 있다고 해요. 현실 세계와의 접점이 없는 가상현실은 미각, 시각, 촉각, 후각, 청각의 오감을 포함하여 몰입을 높여줘요.

DIY가구로 유명한 이케아는 이케아 플레이스를 통해 사용자가 증강 현실 속에서 가구나 기타 이케아의 제품을 배치하거나 시험해 볼 수 있도록 해요. 이케아 플레이스는 방과 가구의 크기를 비교하여 98% 정확도로 사용자가 최상의 결정을 내릴 수 있도록 도와주며 사용자의 환경에 이케아의 제품이 잘 어울릴 수 있는지 확인할 수 있죠. 사용자는 피지털 디자인 경험을 통해 디지털매체와 물리적 환경을 경험할 수 있어요.

02 | 남들보다 빠르게 캐치하는 2024 UIUX 디자인 트렌드!

사용자 정의 일러스트레이션과 클레이모피즘

몇 년 전까지 평평하고 끊긴 선으로 이루어진 일러스트레이션은 대담하고 생생한 색상과 재미있는 스타일의 사용자 정의 일러스트레이션으로 변화했어요. 통계에 따르면 이러한 유형의 맞춤형 일러스트레이션은 다른 유형의 시각적 콘텐츠보다 7배 이상 더 우수한 효과를 보인다고 해요. 특히 맞춤형 일러스트레이션은 웹 사이트와 모바일 앱의 스토리를 보여주거나 플랫폼의 분위기를 설정하여 시각적 스토리텔링을 만들고 앱의 기능과 이점을 제시해요. 이러한 일러스트레이션은 실제 세계와 유사한 시각적 연관성을 설정하여 직관적인 상호작용을 제공하고 화면을 역동적이고 활기차게 만들어줘요.

그중에서도 일러스트레이션의 표현 방법은 단연코 푹신하고 친근한 3D를 표현하는 클레이모피즘에 있어요. 클래이모피즘은 2022년부터 유행하기 시작하였으며, 점토로 빚은 듯한 말랑말랑한 촉감을 생각나게 하는 형태에요. 메타버스에서 3d 이미지에 대한 인기가 높아지면서 플랫한 디자인과 혼합되기도 하였는데 이를 푹신한 3D(Fluffy 3D)라 불러요.

글래스모피즘(glassmorphism)

글래스모피즘(Glassmorphism)은 이름에서 알 수 있듯이 유리와 같은 효과를 특징으로 하는 디자인 스타일로 모든 요소가 반투명 또는 투명한 모양을 가져요. 이러한 요소들을 화려한 배경 위에 배치하면 유리 효과가 더욱 강조되는 효과가 있어요. 유리 형태 디자인의 목표는 배경 공간에 떠 있는 다양한 유리 패널처럼 보이는 인터페이스를 만드는 것이에요. 글래스모피즘은 미니멀리즘, 현대성, 매끈함 및 미래 지향적인 외관을 추구하여 인터페이스를 단순하면서도 정교하게 보이게 해요. 글래스 모피즘은 디자이너가 창작물에 시각적 계층구조를 추가하고 강조하려는 콘텐츠를 제작하는 데 도움을 줘요. 바로 이러한 이유로 마이크로소프트와 애플이 글래스모피즘 디자인 스타일을 채택했어요.

애플은 불투명 유리 같은 외관과 반투명 요소를 갖춘 앱 창을 수용했으며 아이폰이나 아이패드의 홈 화면 위젯도 반투명 요소의 흐린 유리 효과를 가지는 것을 알 수 있어요. 글래스모피즘은 특히나 화려한 배경 위에서 더 강조되어 보여 최근의 컬러 사용 트랜드에도 맞는 디자인 시스템으로 자리 잡아 가고 있어요.

대담한 색상과 그라데이션

인스타그램은 최근 로고 디자인에 그라데이션을 다시 도입했어요. 인스타그램은 새로운 앱 아이콘에 대한 사용자의 영향과 반응을 관찰하고 그라데이션이 웹사이트나 이미지 및 로고에 더욱 매력적이라는 것을 깨달았거든요. 그라데이션은 2018년부터 지속적으로 사용되어 왔지만 2024년에는 글래스모피즘과 더불어 더욱 대담한 색상과 그라데이션이 혼합된 그래픽이 더 가속화될 것으로 예측되고 있어요. 과감한 색상이나 그라디언트의 사용과 함께 겹치는 효과로 공간감과 구조화된 인터페이스를 생성해요. 특히 그라디언트는 우리가 현실 세계에서 보는 방식과 같이 플랫폼에 현실감과 깊이를 더하므로 자연스러운 구성이 가능하며 극한의 색상 사용을 통해 시선의 분산을 막아 필요한 요소에만 집중할 수 있도록 해 줘요.

아이소메트릭과 3D입체 애니메이션

아이소매트릭 디자인은 2차원으로 3차원의 객체를 그리는 방법으로 평면 디자인에 넓이와 깊이 그리고 높이가 더해져 각 요소가 시각적으로 매력적으로 보이고 사용자가 더 쉽게 이해하는 것이 가능해요. 이런 이유로 아이소메트릭 디자인은 인포그래픽 분야에서 빠르게 퍼져나가며 최근의 트랜드로 자리 잡게 됐어요. 다른 3D와는 달리 소실점 없이 물체를 입체로 묘사하며 원근감이 없기 때문에 거리에 따른 크기의 변화는 일어나지 않는 특징을 가지고 있어요. 아이소메트릭 디자인은 시각적 호소력과 아이콘의 터치 영역이나 이미지에 대한 인식을 향상해 사용자 경험을 자연스럽게 유도해요. 지도에서 건물과 거리, 자동차 등의 표현은 평면적인 방식보다 이해하기 쉬워요. 하지만 트렌드라는 이유로 꼭 사용해야 하는 것은 아니며, 너무 많은 아이소매트릭 디자인의 사용은 오히려 사용자의 시각을 분산시키고 혼란을 가중할 수가 있기 때문에 상황에 맞게 사용하는 것이 바람직해요.

3D 입체 디자인은 아이소메트릭 디자인과 함께 또 하나의 눈에 띄는 트렌드에요. 3D는 구현을 위한 시간이 2D보다 오래 걸리지만 사실적으로 보이며 사진으로 구현하기 어려운 기술까지 표현할 수 있어요. 이는 정적인 디자인뿐 아니라 동적인 애니메이션으로도 사용되며 화면을 가득 채운 3D 영상이나 애니메이션으로 다양한 시뮬레이션을 통해 사용자의 흥미를 자극해요. 애니메이션은 비단 3D로만 구현되는 것은 아니에요. 최근 로딩 화면은 로딩 시간을 지연시키며 브랜드 화면을 애니메이션으로 구현하는 추세이며, 이를 통해 브랜드 콘셉트를 명확하게 제공하며 사용자 경험을 개인화해요. 또 작은 팝업과 알림에도 사용자의 주의를 환기하기 위한 애니메이션이 사용돼요.

정교하고 큰 폰트

대담하고 커다란 타이포그래피는 2015년 이후 꾸준히 사용되고 있어요. 타이포그래피로 메인 이미지를 대체하거나 페이지의 주요 요소를 제공하기도 하며 아웃라인 타이포그래피가 활용되기도 해요. 이를 위해 더 볼드나 블랙과 같은 굵은 폰트의 사용이 꾸준히 늘고 있으며, 이에 맞춰 가변 폰트가 빠르게 제공되고 있어요. 기존에는 폰트의 크기나 두께의 변화가 어려워 이미지 처리를 하거나 사용된 모든 폰트를 제공해야 했었다면, 최근에는 하나의 폰트로 다양한 변화가 가능한 가변 폰트가 빠르게 확산되고 있어요. 가변 폰트는 화면의 크기나 마우스 스크롤에 따라 다양한 변화를 확인할 수 있습니다.

마이크로 인터랙션

마이크로 인터랙션은 미묘한 시각적 효과를 내기 위해 모바일 플랫폼에서 사용되는 작은 애니메이션 형태로 구현돼요. 인터페이스에 대해 보다 직관적인 인식을 제공하기 위해 노력하고 있어요. 플랫 디자인으로 인해 디자인만으로 아이덴티티를 구별하기 어렵게 되자 마이크로 인터랙션을 통해 서비스를 차별화하는 경향도 있습니다. 애니메이션 형태로 구현되면서 인터페이스를 역동적으로 보이게 해주며 콘텐츠에 더 집중할 수 있게 만들어 주는 마이크로 인터랙션은 최근 애니메이션을 화면에 삽입하려는 시도와 함께 가장 많이 활용되고 있어요.

마우스 호버

마이크로 인터랙션과 함께 디자인 트랜드는 사용 편의성이나 속도보다 경험 자체를 중요시하는 경향을 가지게 되면서 사용자 여정을 통해 브랜드 경험을 독특한 추억으로 만드는 데 주력하고 있어요. 이 중에, 눈에 띄는 부분은 바로 제품 이미지에 호버 효과를 사용하는 것으로 사용자의 인터랙션으로 대화형으로 유도하는 것이에요. 호버효과 형태의 애니메이션은 제푸멩 대한 새로운 정보를 사용자에게 독특한 방법으로 제공함으로써 사용자가 마치 쇼품이나 매장을 방문한 듯한 느낌을 줘요.

패럴렉스 디자인

내비게이션 요소를 클릭하거나 탭 하면 새로운 페이지가 리로딩되는 것이 일반적이죠. 하지만 최근 제품이나 서비스는 단일 페이지 내의 요소에 대해 다양한 스크롤 속도를 사용하는 기술인 시차 스크롤을 이용해 한 페지이 내에서의 이동으로 콘텐츠를 읽어나가는 패럴렉스 디자인을 사용해요. 패럴랙스 디자인은 정교한 스크롤링을 통해 독특한 이미지로 엔터테인먼트와 자극을 추가하여 레이어를 이동하는 방식으로 정보를 제공합니다.

마무리하며.

2024년 UIUX 디자인 트렌드, 잘 파악하셨나요? 트렌디한 UIUX 디자인을 위해서 항상 발 빠르게 움직여야 한다고요~ 하지만 혼자서 UIUX 디자이너를 준비하시는 분들이라면 아무래도 어려운 감이 있는데요. 그래서 부트캠프를 알아보시는 분들도 많을 거라 생각해요. 강사진, 가격 등 모두 중요하지만 그중에서도 가장 중요한 건 커리큘럼이 아닐까 싶어요. 잘못하면 이미 트렌드 한~참 지난 UIUX 디자인을 배워서 취업 경쟁력에 뒤처질 수도 있어요.

하지만 걱정마세요! 빠르게 변화하는 UIUX 트렌드만큼이나 취업 교육에도 변화가 필요하니까. 제로베이스 UIUX 디자인 취업 스쿨 커리큘럼은 지금도 업데이트되고 있어요. 트렌드에 맞춰 계속 업데이트되는 커리큘럼, 제로베이스 UIUX 디자인 취업 스쿨과 함께하세요!

UIUX 디자인 스쿨은 '취업'까지 단 4개월,
새로운 여정을 함께할 분들을 기다립니다.

추천 컨텐츠