이번 포스팅에서는 UX/UI 디자인의 트렌드에 대해 미리 알아보는 시간을 가지려고 합니다!
일단 2024년의 트렌드를 알아보기 전에, 2023년에는 어떤 핫한 키워드가 있었는지 한 번 정리해보고 살펴봅시다.
01 ㅣ2023 UX/UI 디자인 트렌드 Keywords
1. 챗봇의 지배 Chat bot Domination
2. 암호 없는 로그인 Passwordless Login
3. 플렛 디자인 Flat Design
4. 미니멀리즘 Minimalism
5. 뉴모피즘 Neumorphism
- 플랫디자인+스큐어모피즘으로, 입체적인 느낌. 미래적인 느낌
6. 비대칭요소 Asymmetrical Elements
7. 음성 유저 인터페이스 Voice User Interface(VUIs)
8. 사용자 생성 콘텐츠 User-Generated Contents(UGC)
9. 하단 네비게이션 Bottom Navigation
10. 증강현실 Augmented Reality(AR)
11. 다크모드 Dark Mode
12. 글래스모피즘 Glassmorphism
-투명성+유리 같은 효과, 층층이 쌓인 인터페이스, 입체감+깊이감으로 모던&세련된 느낌
2023의 모바일 앱 디자인 트렌드는 사용자 경험을 창출하는 데 초점을 맞추었다.
참고문헌 : https://m.blog.naver.com/studio-seven/223244418605
02 ㅣ2023 IT 트렌드 Keywords
1. 챗봇
2. AI기반 음성 보조장치
3. M-페이, M-커머스
4. 스마트 미러
5. AR과 VR
2023년도 트렌드에 이어서 2024년도에도 계속될 UX/UI 디자인 트렌드들은 다음과 같다.
- 미니멀리즘
- 3D 디자인
- 글래스 모피즘
- 마이크로 인터랙션
03 ㅣ2024 UX/UI 디자인 트렌드!
1. 사용자 정의 일러스트레이션과 클레이모피즘
대담하고 생생한 색상과 재미있는 스타일의 사용자 정의 일러스트레이션이 트렌드다. 통계에 따르면 다른 유형의 시각적 콘텐츠보다 7배 이상 더 우수한 효과를 보인다고 한다. 실제 세계와 유사한 시각적 연관성을 설정하여 직관적인 상호작용을 제공하고 화면을 역동적이고 활기차게 만들어 준다는 이점이 있다.
그 중에서도 일러스트레이션의 표현방법은 푹신하고 친근한 3D를 표현하는 클레이모피즘이 인기다. 클레이모피즘은 22년도부터 유행하기 시작했으며, 이름 그대로 점토로 빚은 듯한 말랑말랑한 촉감의 형태를 말한다. 메타버스에서 3D 이미지에 대한 인기가 높아지면서 플랫한 디자인과 혼합된 형태는 푹신한 3D(Flufft 3D)라 부른다.
2. 글래스모피즘(Glassmorphism)
유리와 같은 효과를 특징으로 하는 디자인 스타일로 모든 요소가 반투명 또는 투명한 모양을 가진다. 화려한 배경 위에서 효과가 더욱 강조된다. 유리 형태 디자인의 목표는 배경에 떠 있는 다양한 유리 패널처럼 보이는 인터페이스를 만드는 것이다. 글래스모피즘은 미니멀리즘, 현대성, 매끈함 및 미래 지향적인 외관을 추구하여, 인터페이스를 단순하면서 정교히 보이게 만든다. 마이크로소프트와 애플이 대표적인 예이다.
3. 대담한 색상과 그라데이션
그라데이션은 18년부터 지속적으로 사용되어 왔지만 24년에는 글래스모피즘과 더불어 더욱 대담한 색상과 그라데이션이 혼합된 그래픽이 더 가속화될 것으로 예축된다.
4. 아이소메트릭과 3D입체 애니메이션
아이소메트릭은 길이 · 폭 · 높이를 직교하는 3직선으로 나타내는 축측 투영(軸測投影) 중 교각이 120도가 되는 경우의 그림을 뜻한다. 2차원으로 3차원 객체를 그리는 방법으로 사용자가 더 쉽게 이해가능하여 최근 트렌드로 자리매김하였다. 이해하기 쉬운 방식이라 많이 사용되지만, 너무 많은 사용은 사용자의 시각을 분산시키고 혼란을 가중할 수 있기때문에 상황에 맞는 사용이 바람직하다.
3D입체 디자인은 아이소메트릭 디자인과 함께 눈에 띄는 트렌드이다. 최근 로딩화면은 로딩 시간을 지연시키며 브랜드 화면을 애니메이션으로 구현하는 추세이며, 이를 통해 콘셉트를 명확하게 제공한다. 또 팝업과 알림에도 주의환기를 위한 애니메이션이 자주 사용된다.
5. 정교하고 큰 폰트(타이포그래피)
메인 이미지를 대체하거나 페이지의 주요 요소를 제공하기도 하며 아웃라인 타이포그래피가 활용되기도 한다. 굵은 폰트의 사용이 꾸준히 늘고있으며, 최근에는 하나의 폰트로 다양한 변화가 가능한 가변 폰트가 빠르게 확산되고 있다. 이는 화면의 크기나 마우스 스크롤에 따라 다양한 변화를 줄 수 있다.
6. 마이크로 인터랙션
미묘한 시각적 효과를 내기 위해 모바일 플랫폼에서 사용되는 작은 애니메이션 형태로 구현된다. 보다 직관적인 인식을 제공하기 위해 노력하며, 플랫디자인으로 인해 디자인만으로 아이덴티티를 구별하기 어려워져 마이크로 인터랙션을 통해 차별화 하는 경향도 있다. 애니메이션 형태로 구현되면서 인터페이스를 역동적으로 보이게 해주며, 콘텐츠에 더 집중할 수 있게 만들어준다. 최근 애니메이션을 화면에 삽입하려는 시도와 함께 가장 많이 활용되고 있다.
7. 마우스 호버
디자인 트렌드가 경험 자체를 중요시하는 경향을 가지게 되면서 브랜드 경험을 독특한 추억으로 만드는데 주력하고 있다. 이 중에, 제품 이미지에 호버 효과를 사용하는 것으로 사용자의 인터랙션으로 대화형으로 유도하는 것이 가장 눈에 띈다. 호버효과 형태의 애니메이션은 제품에 대한 새로운 정보를 사용자에게 독특한 방법으로 제공함으로써 사용자가 마치 쇼룸이나 매장에 방문한 느낌을 준다.
8. 패럴렉스 디자인
내비게이션 요소를 클릭하거나 탭하면 새로운 페이지가 리로딩되는 것이 일반적이지만, 최근 제품이나 서비스는 단일 페이지 내의 요소에 대해 다양한 스크롤 속도를 사용하는 기술인 시차 스크롤을 이용해 한 페이지 내에서의 이동으로 콘텐츠를 읽어나가는 패럴렉스 디자인을 사용한다. 이는 정교한 스크롤링을 통해 독특한 이미지로 엔터테인먼트과 자극을 추가하여 레이어를 이동하는 방식으로 정보를 제공한다.
참고문헌 : https://zero-base.co.kr/event/media_insight_contents_DG_uiux_trend
2023년도와 2024년도의 트렌드를 한번 분석 요약해 보았습니다.
디자인 업계에서는 남보다 빠른 트렌드 파악이 참 중요하다 생각합니다.
빠른 변화 속에서 지나온 2023트렌드도 한번 정리해보고,
곧 다가올 2024년도 디자인의 방향성도 미리 파악해보는 좋은 시간이 되었으면 좋겠습니다.
'내일배움캠프 UXUI디자인 1기 > 사전캠프' 카테고리의 다른 글
| [UXUI 사전캠프 2주차] UX/UI디자인 2주차 WIL. (0) | 2023.12.01 |
|---|---|
| [UXUI 사전캠프 2주차] 자주 사용하는 웹/앱 서비스 홈 화면 분석 (0) | 2023.11.28 |
| [UXUI 사전캠프 2주차] UX/UI디자인 관련 용어 정리. (1) | 2023.11.27 |
| [UXUI 사전캠프 1주차] UX/UI디자인 1주차 WIL. (0) | 2023.11.24 |
| [UXUI 사전캠프 1주차] UXUI디자이너의 핵심 역량 (0) | 2023.11.23 |
