프로젝트 옐로우핑거 소개 연구실 문의하기
contact@yellow-finger.com
02.2205.4128
UX/UI Design Trends Going Into 2024
2024년 UX/UI 디자인 트렌드
UX/UI Design Trends Going Into 2024
Every year, we have a line up of new design trends that not only look good, but also stick around and influence other designers to “steal”…
매년, 우리는 아름다워 보일 뿐만 아니라, 주변에 머물며 다른 디자이너들이 "도둑질"하도록 영향을 주는 새로운 디자인 트렌드를 준비하고 있습니다…
요약 :)
올해 우리는 보기에 좋을 뿐만 아니라 계속해서 머물며 다른 디자이너들에게 영향을 주어 트렌드를 "훔치는" 새로운 디자인 트렌드 라인업을 보유하고 있습니다. 좋든 싫든 실제로 스마트하고 기능적인 디자인 물결이 있습니다. 이러한 기능은 더 적은 공간에 더 많은 정보를 포함하는 것부터 사용자와의 더 많은 참여를 구축하는 것까지 다양합니다.

계속해서 인터넷을 장악하고 있는 이러한 트렌드 중 일부를 살펴보겠습니다!
더보기→

출처.
Punit Chawla. (2023.12.13). Medium. UX/UI Design Trends Going Into 2024. 2024.01.03. https://blog.prototypr.io/ux-ui-design-trends-going-into-2024-ca43a839b541
올해 우리는 보기에 좋을 뿐만 아니라 계속해서 머물며 다른 디자이너들에게 영향을 주어 트렌드를 "훔치는" 새로운 디자인 트렌드 라인업을 보유하고 있습니다. 좋든 싫든 실제로 스마트하고 기능적인 디자인 물결이 있습니다. 이러한 기능은 더 적은 공간에 더 많은 정보를 포함하는 것부터 사용자와의 더 많은 참여를 구축하는 것까지 다양합니다. 계속해서 인터넷을 장악하고 있는 이러한 트렌드 중 일부를 살펴보겠습니다! 어린이 도시락 그 이상 — 도시락 상자 도시락은 일본의 티핀과 도시락 문화의 필수품입니다. 그들은 음식을 좀 더 체계적으로 저장 하고 물건을 깨끗하게 유지하는 것으로 잘 알려져 있습니다 . 도시락 상자 이미지 크레딧 — Freepik 누가 이런 생각을 했는지는 결코 알 수 없지만, 도시락 상자는 가방에 음식을 가득 담은 것처럼 화면에서도 디지털 방식으로 훌륭하게 표현됩니다. Bento는 수백만 명의 디자이너가 선택할 수 있도록 Dribbble 및 Behance와 같은 플랫폼에서 물결을 일으키기 시작한 또 다른 디자인 트렌드이지만 "모듈형" 디자인의 개념은 웹사이트용 대시보드에서 시작되었습니다. 여기에는 PayPal과 같은 영업 및 재무 대시보드, Google Ads와 같은 분석 등이 포함됩니다. Windows Phone과 Lumia를 기억하시나요? 글쎄, 그들이 사용한 UI는 본질적으로 Bento 디자인의 초기 반복이었습니다. 나중에 Microsoft는 Windows 8의 Windows 데스크톱 시작 메뉴에도 이 개념을 구현했습니다. Windows 8 벤토 디자인 윈도우 8 시작 메뉴 업계 전반에서 사용되던 Bento 디자인은 Apple이 처음으로 Bento 그리드를 사용하기로 결정했을 때 완전히 폭발했습니다. 처음에는 iPhone 랜딩 페이지에서 사용했지만 곧 Apple 이벤트 슬라이드 및 프레젠테이션으로 확장되었습니다. 또 다른 애플 포스터 Apple은 메가트렌드를 주도하는 것으로 널리 알려져 있으며, Bento도 그 중 하나일 뿐입니다. 모든 디자이너와 그들의 삼촌은 프레젠테이션, 웹사이트, 제품 출시 등을 위해 Bento를 사용하고 있었습니다. 기존 도시락 디자인과 새로운 트렌드의 가장 큰 차이점은 그리드의 각 섹션이 그룹의 일부가 아닌 고유한 공간을 의미한다는 것입니다. 다른 많은 UI 디자인 트렌드와 달리 Bento는 실제로 단순한 레이아웃 스타일 그 이상으로 진화하고 있습니다. 이제는 제품 데모를 포함하고 다른 독특한 레이아웃과 혼합되었으며 새로운 시각적 디자인 개념으로 양식화되도록 발전했습니다. 이것을 살펴보십시오: 다이어그램 AI 디자인 도구 — Bento 그리드 도시락 상호 작용의 라이브 데모 위의 예는 도시락 그리드를 사용하여 도구가 대화형 경험을 통해 수행할 수 있는 작업에 대한 실제 예를 보여주는 Diagram.com 에서 가져온 것입니다. 이는 도구를 훨씬 더 매력적으로 만들고 사용자에게 무엇을 기대해야 하는지 알려줍니다. 우리와 같은 디자이너를 돕기 위해 웹 전체에서 Bento 디자인 영감을 전담하는 웹사이트가 있습니다 . 그러한 웹사이트 중 하나는bentogrids.com, UI 및 그래픽 디자인을 위한 Bento 그리드의 대규모 컬렉션이 있습니다. 이 웹사이트의 제작자를 축복해주세요! 공간 디자인 동향 및 기술 도약 당신은 두 번째 작업을 진행하면서 "중요한 이메일"을 보기 위해 잠에서 깨어 휴대폰을 집어 들었고 전체 피드는 Apple의 새로운 Vision Pro로 가득 차 있습니다. 이것은 2023년 6월 5일, 전 세계 모든 기술 및 디자인 애호가들의 정확한 아침이었습니다. 이미지 크레딧 — Apple.com 다음 몇 주 동안 기술 세계에서는 이것이 전부였으며 모든 디자이너는 공간 디자인 기술을 습득하려고 노력했습니다. 디자인 트렌드 외에도 다양한 AR/VR 스타트업이 등장했고, 마침내 그들의 기술이 입소문을 타기도 했습니다. 이는 정말로 필요했던 AR과 VR에 실질적인 힘을 실어주었습니다. 뛰어난 기술로 인해 뛰어난 디자인 잠재력이 탄생합니다. 스마트워치부터 폴더블 폰까지 디자이너들은 항상 진정한 적응력을 보여주기 위해 나섰습니다. 공간 디자인도 예외는 아니었습니다. 앞으로 다가올 일에 대한 간략한 소개 이는 "Bezi"라는 인기 있는 디자이너 중심 도구의 출시와 함께 제공됩니다. Figma 및 Spline과 같은 디자인 도구와 매우 유사하지만 3차원이 추가되었습니다. 디자이너는 공간 디자인을 시작하고, 작동하는 AR/VR 헤드셋을 연결하고, 대화형 공간 경험을 만들 수 있습니다. Bezi를 통해 우리가 무엇을 만들 수 있는지 살짝 엿볼 수 있습니다. Bezi.com 의 데모 더 나은 AR/VR 경험에 크게 기여하는 것은 더 나은 UX입니다. 실제 VR 헤드셋을 사용하고 공간 환경에서 사물을 테스트하는 등 예쁜 디자인 뒤에 숨은 기술을 깊이 이해하는 것이 모두 작업의 일부가 될 것입니다. 우리가 앞으로 나아가면서 UX에 대한 현재의 이해에는 확실히 많은 새로운 교훈과 변화가 있을 것입니다. 그러나 이것은 지금 당장 쌓고 미래에 사용할 수 있는 기술 중 하나입니다. Apple의 넓은 상상력과 풍부한 주머니 외에도 안경 착용에 완전히 새로운 경험을 선사하는 기술에 정통하지 않은 회사도 있습니다. Google의 프로젝트인 'Google Glasses'는 실제 대규모 생산에 결코 영향을 미치지 않았지만 선글라스 회사인 RayBan은 새로운 Meta Wayfarer를 통해 스마트 웨어러블 경쟁에 뛰어들었습니다. 이미지 크레딧 — RayBan 일반적인 RayBan 디자인에 속지 마십시오. 내장된 카메라와 스마트 기능을 사용하면 비디오/이미지를 저장하고 소셜 미디어에 실시간 스트리밍할 수 있습니다. 이는 사용자 경험과 고객 경험에 새로운 차원을 가져옵니다. 아마도 2025년의 트렌드일 것입니다. 누가 알겠습니까! 누구나 애니메이션을 만들 수 있습니다! 더 많은 사람들이 새로운 기술에 접근할 수 있게 되면 새로운 트렌드가 탄생하는 경우가 많습니다. 이것은 LottieFiles가 가진 하나의 임무였습니다. 제가 에반젤리스트로 회사에 입사했을 때, 저는 이미 어떤 도구, UI에든 추가할 수 있는 쉬운 애니메이션에 경외감을 느꼈습니다. 로티 애니메이션에 대한 수요를 조사한 그들은 Figma 애니메이션을 내보낼 수 있는 로티 JSON 파일로 변환할 수 있는 Figma용 플러그인도 출시했습니다. LottieFiles에 대한 Figma 데모 Figma용 LottieFiles 플러그인 이는 After Effects 및 유사한 소프트웨어의 대규모 학습 곡선을 근절합니다. 따라서 더 많은 디자이너가 스스로 신속하게 애니메이션을 적용할 수 있습니다. 또한 요즘에는 모든 회사의 랜딩 페이지에서 매력적인 상호 작용을 발견하게 될 것입니다. 이는 모두 웹 사이트 방문자의 경험을 차별화해야 한다는 필요성이 점점 커지고, 제품/서비스를 판매하는 도구로서 스토리텔링에 대한 수요가 높아진 덕분입니다. 다음 랜딩 페이지 상호작용을 예로 들어보겠습니다. Apple Watch Series 9 랜딩 페이지 — 스크롤 시 더블 탭 상호 작용 스크롤 애니메이션을 사용하면 방문자는 프레젠테이션 내용에 몰입하게 됩니다. Webflow 및 Framer와 같은 코드 없는 도구는 긴 코드를 작성하는 번거로움 없이 디자이너에게 이러한 애니메이션 기능을 제공하기 위해 끊임없이 혁신하고 있습니다. 여기서 라이딩이 끝난다고 생각할 수도 있습니다. 애니메이션이 최고조에 달했을 수 있으며 더 이상 기대할 것이 없습니다. 다행스럽게도 기술 분야의 사람들은 항상 차세대 혁신을 찾고 있습니다. 또한 끝없이 많은 유능한 도구로 인해 상상할 수 있는 모든 것이 가능해집니다. 그러한 가능성 중 하나는 새로운 "애니메이션 버튼 트렌드"였습니다. 애니메이션 기술을 도입하여 간단한 버튼에 활기를 불어넣는 새로운 UI 스타일입니다. 이러한 변경 사항은 버튼 주위의 간단한 스트로크 애니메이션부터 마우스를 올리면 버튼 내부에서 움직이는 문자 그대로의 별까지 다양합니다. X의 “@learnframer” GIF 이러한 추세는 종종 도미노 효과에 의해 생성됩니다. 먼저 한 디자이너의 소셜 게시물이 인기를 얻고, 이어서 다른 저명한 디자이너들이 따라옵니다. 플랫 디자인의 종말? 최근 많은 디자이너들이 디자인 세계가 어떻게 평면 디자인(Medium에서 볼 수 있는 것과 같은)에서 보다 현실적인 시각적 스타일로 전환하고 있는지에 대해 이야기하고 있습니다. 여기에는 3D 그래픽, 깊이 효과, 뉴모피즘, 스큐어모피즘 등이 포함됩니다. 최근에는 수많은 회사에서 3D를 핵심 스타일로 구현하는 것을 보았습니다. 비록 지금은 웹과 앱 디자인에 나타나지 않을 수도 있지만, 로고는 이러한 새로운 트렌드에 맞춰 업데이트되고 있습니다. 에 의해 만들어진 새로운 3D 물결의 몇 가지 좋은 예 찬 카루나트네 다른 디자인 트렌드와 마찬가지로 사람들이 이러한 스타일을 구현하는 큰 이유는 웹 및 앱에 3D 자산을 매우 쉽게 포함할 수 있는 Spline 및 Vectary 와 같은 "사용하기 쉬운" 웹 기반 3D 도구가 도입되었기 때문입니다 . 또한 제가 경험한 학습 곡선 중 가장 짧은 학습 곡선을 통해 애니메이션을 사용하여 3D 자산에 생명을 불어넣었습니다. 기본 선형 그래디언트와 일부 그림자가 어떻게 디자인과 자산에 깊이와 3차원을 추가할 수 있는지 정말 놀랍습니다. 항상 디자인과 트렌드를 주도해 온 또 다른 회사는 Airbnb입니다. 그들은 간단하면서도 효과적인 앱 디자인과 상호작용으로 널리 알려져 있습니다. 2023년에 그들은 몇 가지 새롭고 중요한 기능을 실제로 제공할 앱 업데이트를 발표했습니다. 그들은 무엇을 했나요? 그들은 12개 이상의 3Dish 시각적 요소를 통합했으며 발표 비디오는 거의 모두 3D에 관한 것입니다. Airbnb의 동영상 출시 아이소메트릭 비주얼, 3D 캐릭터와 애니메이션, 수많은 앱 상호작용 덕분에 계속해서 보고 싶어집니다. 평면에서 3D로의 전환은 정말 느리고 꾸준하기 때문에 이러한 추세가 계속 유지될 것이라고 믿습니다. 이제 누가 이 트렌드를 시작했는지는 항상 미스터리가 될 것입니다. 그러나 현실적이고 관련성이 높은 디자인에 대한 요구는 물론 우리 자신의 이기적인 창의적인 이유와 사용자를 위한 혁신을 주도합니다. AI 디자인 도구의 홍수 – 친구인가, 적인가? 인공지능은 지난 10년 동안 기술 분야에서 가장 많이 사용되고 인식되는 단어입니다. 일부 디자이너는 이를 자신의 경력 미래에 대한 위협으로 여기지만, 우리 대부분은 최고의 디자인을 더 빠르게 만들기 위해 이 기술을 사용하고 있습니다. 비디오 조작에 사용되는 Adobe Firefly "AI 기반"이라고 광고하는 일련의 디자인 도구는 다양한 수준에서 Open AI API를 구현하려고 노력하고 있으며 자체 AI 모델도 작업하고 있습니다. 그러나 이러한 AI 기능의 대부분은 단순한 속임수일 뿐입니다. 무작위로 UI를 디자인하고, 자산을 섞고, 어려운 문제에 대한 기본적인 솔루션을 제공하기도 합니다. 이것은 많은 커뮤니티 회원들의 지지를 받는 제가 가지고 있는 비판 중 일부에 불과합니다. 이런 복잡한 속임수 속에서 세상을 구하기 위해 등장하는 영웅들이 몇 명 있습니다. 그러한 영웅 중 하나는 팬들이 가장 좋아하는 Relume입니다. Webflow에 초점을 맞춘 이 회사는 강력한 와이어 프레이밍 및 사이트 매핑 도구 인 Relume AI 라는 제품을 출시했습니다. Relume AI의 실제 작동 모습 기본적으로 프로젝트 설명인 프롬프트를 입력하면 완전하고 자세한 사이트 맵과 와이어프레임도 표시됩니다. 이 와이어프레임은 Figma 및 Webflow에 빠르게 복사할 수 있는 관련 데이터와 레이아웃으로 가득 차 있습니다. 또한, Chat-GPT가 인간의 창의성을 망치고 의존성을 구축한다고 생각하는 사람은 저뿐인가요? 더욱 세심하고 공감적인 UX 이미지 제공: Josh Calabrese 비주얼과 UI 디자인에 대해서는 충분합니다. UX는 최소한으로 진화했으며 이는 UX 연구원과 디자이너가 중점을 두는 내용으로 정당화될 수 있습니다. 이는 디자인을 접근 가능하고 포괄적으로 만들기 위해 프로세스를 축소하는 것을 의미합니다. 수많은 디자이너들이 시각적 디자인보다 유용성의 호수에 발을 담그고 있습니다. 이를 통해 더욱 단순하고 실행 가능한 디자인을 중심으로 가져왔습니다. 디자이너들은 지난 몇 년간 업계의 변화에도 불구하고 바퀴를 재발명하기보다는 효과적인 방법을 고수하고 있습니다. 2019년부터 2023년까지 'UX 접근성'에 대한 Google 트렌드 그래프 위의 Google 트렌드 그래프는 접근성이 뛰어난 디자인이 어떻게 진정한 산업 요구 사항이 되었는지 보여줍니다. 이러한 접근성 기술은 색상 대비, 읽을 수 있는 글꼴, 인식 가능한 작업 요소 부터 접근성에 초점을 맞춘 기능을 보드에 제공하기 위해 장애가 있는 사람을 그림자로 표시하는 것까지 다양합니다. 접근성이 요구되는 이유는 무엇입니까? 모든 연령층의 사람들을 위한 디자인이 필요하고 신체적 제약이 있기 때문에 접근성도 점점 더 강화되고 있습니다. 기업은 다양한 인구통계를 활용하고 모든 측면에서 포용성을 추구하고 있습니다. 점점 더 많은 사람들이 디지털 방식으로 전환함에 따라 디자이너가 접근 가능한 디자인에 집중하는 것은 거의 필수입니다. 강좌와 부트캠프는 멀리 떨어진 곳에서도 수요를 파악했으며 학생들이 접근 가능한 디자인에 대한 풍부한 지식을 바탕으로 디자인을 배울 수 있도록 준비하고 있습니다. 개인화 접근성 외에도 개인화는 사람들을 앱이나 웹사이트에 갇히게 만드는 요소입니다. 이전에 YouTube에서 이 작은 메시지를 본 적이 있을 것입니다. 더 나은 추천을 제공하기 위해 어떤 종류의 콘텐츠를 좋아하는지 평가하는 YouTube 또한 며칠 동안 다양한 앱이 새로운 기능을 실험하다가 사용자가 좋아하지 않아 철회하는 모습을 볼 수도 있습니다. 이는 UX 디자이너가 제품과 서비스의 미래를 어떻게 주도하고 있는지 직접적으로 보여줍니다.