2024년을 향하는 UX/UI 디자인 트렌드
UX/UI Design Trends Going Into 2024
Punit Chawla가 Prototypr(medium)에 작성한
"UX/UI Design Trends Going Into 2024"을 국문으로 번역한 글입니다.
매년, 우리는 멋져 보일 뿐만 아니라 다른 디자이너들에게 영향을 주어 트렌드를 "도둑질" 하도록 영향을 미치는 새로운 디자인 트렌드를 준비합니다.
좋든 싫든, 실제로 스마트하고 실용적인 디자인의 흐름이 있습니다. 이러한 흐름은 더 적은 공간에 더 많은 정보를 포함하는 것부터 사용자와 더 많은 상호 작용을 형성하는 것까지 다양할 수 있습니다.
계속해서 인터넷을 장악하고 있는 트렌드 중 일부를 살펴보겠습니다!
어린이 도시락으로 더할 나위 없는 — Bento Boxes
Bento box(이하 벤토)는 일본 도시락 문화의 필수품입니다.
음식을 체계적인 형식으로 보관(의역: 예쁘게 보관)하고 위생적으로 유지할 수 있도록 도와줍니다.
누가 이런 생각을 했는지는 알 수 없지만, 음식이 가득 차 있는 벤토는 디지털에 비유해 볼 수 있을 만큼 훌륭한 소재입니다.
벤토는 드리블(Dribbble)이나 비헨스(Behance)와 같은 플랫폼에서 시작된 또 다른 디자인 트렌드로, 수백만 명의 디자이너들이 차용할 정도로 큰 인기를 얻고 있습니다. 그러나 "모듈식" 디자인의 개념은 웹사이트 대시보드에서 시작되었습니다. 여기에는 PayPal과 같은 판매 및 재무 대시 보드, Google Ads와 같은 분석 및 기타 여러 가지가 포함됩니다.
Windows Phone과 Lumia를 기억하시나요? 그들이 사용한 UI는 본질적으로 벤토 디자인의 초기 형태를 반복한 것이었습니다. 나중에 Microsoft는 이 개념을 확장해 데스크톱 시작메뉴에도 적용했습니다.
이처럼 벤토 디자인은 업계 전반에서 사용되어 왔으나 Apple이 벤토 그리드를 사용하면서 폭발적인 인기를 끌게 됩니다. 가장 먼저 iPhone 랜딩 페이지에서 사용했고, 곧이어 Apple 이벤트 슬라이드와 프레젠테이션으로 확장되었습니다.
Apple은 메가트렌드를 이끄는 것으로 널리 알려져 있고 벤토도 그중 하나일 뿐입니다. 모든 디자이너와 그들의 선임들은 프레젠테이션, 웹사이트, 제품 출시 등에 벤토를 사용해오고 있었습니다.
기존 벤토 디자인과 새로운 트렌드의 가장 큰 차이점은 그리드의 각 섹션이 그룹의 일부가 아닌 독특한 공간을 나타낸다는 것입니다.
다른 UI 디자인 트렌드와는 달리 벤토는 실제로 단순한 레이아웃 스타일 그 이상으로 진화하고 있습니다. 이제는 시제품뿐만 아니라 다른 독특한 레이아웃이 더해져 새로운 시각적 디자인 콘셉트로 진화했습니다.
이것 좀 보세요:
위 예시는 diagram.com에서 가져온 것으로, AI 기반 디자인 도구로 무엇을 할 수 있는지 벤토 그리드를 사용하여 보여줌으로써 서비스를 훨씬 더 매력적으로 만들고 사용자로 하여금 친밀감 형성과 쉬운 이해를 돕습니다.
벤토 디자인을 사용하려 하는 디자이너들을 위해 특화된 몇 가지 웹사이트가 있습니다. 그중 하나는 bentogrids.com입니다. UI와 그래픽 디자인을 위한 벤토 그리드가 한 곳에 모여져 있습니다. 이 웹사이트를 만든 분들은 꽃길만 걷기를...
공간디자인 트렌드와 기술의 도약
한때 전 세계의 모든 기술과 디자인 애호가들이 체감했던 것처럼 2023년 6월 5일 아침, "중요한 이메일"을 확인하기 위해 화장실에서 핸드폰을 든 순간 당신의 피드는 완전히 애플의 새로운 비전 프로(Vision Pro)로 가득 찼습니다.
이후 몇 주 동안 기술분야에서는 이것이 전부였으며 모든 디자이너는 공간 디자인 기술을 익히려고 노력했습니다. 디자인 트렌드 외에도 다양한 AR/VR 스타트업이 주목을 받았으며 그들의 기술이 입소문을 타기도 했습니다. 이는 정말로 AR과 VR에 실질적인 힘이 되었습니다.
우수한 기술은 창의적인 디자인 가능성을 불러일으킵니다. 스마트워치부터 폴더블 폰까지, 디자이너들은 항상 진정한 적응력을 발휘해왔습니다. 공간 디자인도 마찬가지였습니다.
인기 있는 디자이너 중심의 툴 "Bezi"의 출시와 함께 이러한 변화가 시작되었습니다. 이 툴은 Figma나 Spline과 같은 디자인 도구와 매우 유사하지만 3차원 기능을 갖추고 있습니다. 디자이너들은 공간 디자인에 참여할 수 있으며, AR/VR 헤드셋을 연결하여 인터랙티브한 공간 경험을 만들 수 있습니다.
Bezi를 통해 우리가 만들 수 있는 것들을 살펴보겠습니다:
더 나은 AR/VR 경험에 큰 영향을 미치는 요소 중 하나는 더 나은 사용자 경험(UX)입니다. 아름다운 디자인 뒤에 있는 기술을 깊이 이해하고, 실제 VR 헤드셋을 사용하여 테스트하고, 공간 환경에서 물건들을 시험해 보는 것은 모두 사용자 경험의 일부가 될 것입니다. 우리가 앞으로 나아가면서 UX에 대한 현재의 이해에 새로운 교훈과 변화가 분명히 있을 것입니다. 하지만, 이것은 지금 습득하고 나중에 가능한 경우 미래에 활용할 수 있는 기술 중 하나입니다.
Apple의 넓은 상상력과 풍부한 자본 외에도 안경 착용에 완전히 새로운 경험을 선사하는 기술에 정통하지 않은 회사도 있습니다.
Google의 프로젝트 "Google Glasses"가 실제 대량 생산에 성공하지 못했더라도, 선글라스 회사인 레이밴(RayBan)은 새로운 메타 웨이페어(Meta Wayfarer)로 스마트 웨어러블 경쟁에 뛰어들었습니다.
일반적인 RayBan 디자인에 속지 마세요. 내장된 카메라와 스마트 기능을 통해 비디오/이미지를 저장하고 소셜 미디어에 라이브 스트리밍할 수 있습니다. 이는 사용자 경험과 고객 경험에 새로운 차원을 불어넣습니다. 아마도, 2025년의 트렌드가 될지도 모릅니다!
누구나 애니메이션을 만들 수 있습니다!
더 많은 사람들이 새로운 기술에 접근할 수 있게 되면 종종 새로운 트렌드가 탄생하곤 합니다.
이것은 LottieFiles가 가진 하나의 임무였습니다. 제가 에반젤리스트로 회사에 입사했을 때, 이미 어떤 도구나 UI에 간편하게 추가할 수 있는 애니메이션에 감탄했습니다. Lottie를 활용한 애니메이션에 대한 수요를 조사한 그들은 Figma용 플러그인도 출시했는데, 이 플러그인을 사용하면 Figma로 만든 애니메이션을 Lottie에 적용가능한 JSON 파일로 변환할 수 있습니다.
이 플러그인의 등장으로 인해 After Effects과 유사한 소프트웨어를 배워야 하는 큰 허들이 없어지게 되었고, 더 많은 디자이너들은 빠르게 애니메이션을 만들 수 있게 되었습니다.
요즘에는 모든 회사의 랜딩 페이지에서 매력적인 인터랙션을 발견할 수 있습니다. 이는 모두 웹 사이트 방문자의 경험의 차별화에 대한 필요성이 점점 커지고, 제품/서비스를 판매하는 도구로서 스토리텔링에 대한 수요가 높아진 덕분입니다.
다음 랜딩 페이지의 인터랙션을 예로 들어보겠습니다:
스크롤 애니메이션이 적용되면 방문자들은 여러분이 제시하는 내용에 몰입할 것입니다. 웹플로우(Webflow)와 프레이머(Framer)와 같이 코드가 필요없는(No-code) 도구들은 디자이너들에게 코드를 길게 쓰지 않고도 이러한 애니메이션 기능을 제공하기 위해 끊임없이 혁신하고 있습니다.
누군가는 여기서 라이딩이 끝난다고 생각할 수도 있습니다. 애니메이션이 정점에 이뤘고 더 이상 기대할 것이 없습니다. 하지만 다행히 기술 분야의 사람들은 항상 차세대 혁신을 찾고 있습니다. 또한, 끊임없이 발전하는 유능한 도구들로 인해 상상할 수 있는 모든 것이 가능해집니다.
이러한 가능성 중 하나는 새로운 "애니메이션 버튼 트렌드"입니다. 애니메이션 기술을 도입해 단순한 버튼에 활기를 불어넣는 새로운 UI 스타일입니다. 버튼 주위에 간단한 외곽선 애니메이션부터 마우스 hover시 버튼 내부에서 별이 움직이는 것과 같은 변화까지 다양합니다.
이러한 트렌드는 종종 도미노 효과에 의해 생성됩니다. 먼저 한 디자이너의 소셜 미디어 게시물이 인기를 얻고, 그 후에 다른 유명한 디자이너들이 따라오게 됩니다.
플랫(Flat) 디자인의 종말?
요즘 많은 디자이너들이 플랫 디자인(예: Medium에서 볼 수 있는 것과 같은)에서 시각적으로 현실적인 스타일로 이동하고 있다고 이야기하고 있습니다. 이러한 스타일에는 3D 그래픽, 깊이 효과, 뉴모피즘(neumorphism), 스큐어모피즘(skeuomorphism) 등이 포함됩니다.
최근에는 많은 기업들이 3D를 핵심 스타일로 채택했습니다. 현재 웹 및 앱 디자인에서는 직접적으로 나타나지 않을 수 있지만, 로고는 이 새로운 트렌드로 업데이트되고 있습니다.
다른 디자인 트렌드와 마찬가지로, 이러한 스타일을 채택하는 주요 이유 중 하나는 Spline 및 Vectary와 같은 "쉽게 사용할 수 있는" 온라인 웹 기반의 3D 도구들이 도입되었기 때문입니다. 이 도구들을 사용하면 웹 및 앱에 3D 에셋을 넣는 것이 매우 쉬워집니다. 또한, 이러한 도구들은 애니메이션을 사용하여 3D 에셋을 생생하게 만들며, 제가 경험한 것 중 가장 배우기 쉽습니다.
저에게는 기본적인 선형 그라데이션(linear gradient)과 그림자(shadows)가 디자인과 에셋에 깊이와 제3차원을 더할 수 있다는 것이 얼마나 믿기 힘든 일인지 알 수 없습니다.
에어비앤비(Airbnb)는 항상 디자인과 트렌드를 주도해온 기업입니다. 그들은 간단하면서도 효과적인 앱 디자인과 인터랙션으로 널리 알려져 있습니다. 2023년에는 새로운 중요한 기능을 가져올 앱 업데이트를 발표했습니다.
그들은 12개 이상의 3D적인 시각적 요소를 통합했으며, 발표 비디오는 거의 모두 3D에 관한 것입니다.
아이소메트릭 비주얼, 3D 캐릭터와 애니메이션, 그리고 다양한 앱과의 상호 작용은 계속해서 보고 싶게 만듭니다. 플랫에서 3D로의 전환은 실제로 느리지만 꾸준하게 이뤄지고 있으며, 이것이 이 트렌드가 지속될 이유라고 생각합니다.
이 트렌드를 시작한 사람은 항상 베일에 가려지겠지만, 현실적이고 관련성이 높은 디자인에 대한 요구는 우리 자신의 창의성과 사용자를 위한 혁신을 불러 일으킵니다.
범람하는 A.I. 디자인 도구 - 아군 혹은 적?
인공지능은 지난 10년 동안 기술 분야에서 가장 많이 사용되고 인식되는 단어입니다. 일부 디자이너들은 미래에 자신의 직업에 대한 위협으로 받아들이지만, 대부분의 디자이너들은 이 기술을 사용하여 더 빠르고 퀄리티 높은 디자인을 만들고 있습니다.
"A.I. powered (인공지능으로 구현된)" 디자인 도구 세트는 다양한 수준에서 OpenAI API를 구현하려고 노력하고 있으며, 자체 인공지능 모델에도 작업 중입니다. 그러나 이러한 대부분의 인공지능 기능은 단순한 속임수에 불과합니다. 무작위로 UI를 디자인하거나 에셋을 섞어서 배치하고 심지어 어려운 문제에 기본적인 솔루션을 제공하기도 합니다. 이러한 것들은 많은 커뮤니티 회원들의 지지를 받고 있는 몇 가지 비판 중 일부에 불과합니다.
이런 복잡한 속임수 속에서도 구세주가 몇몇 있습니다. 그러한 영웅 중 하나는 팬들이 가장 좋아하는 Relume입니다. Webflow를 기반으로 한 이 회사는 Relume A.I.라는 강력한 와이어프레임 및 사이트 매핑 도구를 출시했습니다.
당신이 기본적으로 프로젝트 설명인 프롬프트를 입력하면, 완전하고 자세한 사이트 맵과 와이어프레임이 생성됩니다. 이 와이어프레임은 관련 데이터와 레이아웃으로 가득 차 있으며 빠르게 Figma나 Webflow로 복사할 수 있습니다.
저만 Chat-GPT가 인간의 창의성을 망치고 의존성만 증가시킨다고 생각하는 걸까요?
보다 세심하고 공감적인 사용자 경험(UX)
이 정도면 비주얼과 UI 디자인에 대한 이야기는 충분합니다. 최소한 사용자 경험(UX)은 발전해 왔으며, 이는 UX 연구원과 디자이너가 중점을 두는 내용으로 정당화할 수 있습니다. 이는 디자인을 접근 가능하고 포괄적으로 만들기 위해 프로세스를 간소화하는 것을 의미합니다.
많은 디자이너들이 시각 디자인보다는 사용성에 관심을 가지고 있습니다. 이로써 더욱 간결하고 실행 가능한 디자인이 중심에 올라왔습니다. 디자이너들은 지난 몇 년간 업계의 변화에도 불구하고 바퀴를 재발명하기보다는 효과적으로 작동하는 방법을 고수하고 있습니다.
위 Google 트렌드 그래프는 접근성이 뛰어난 디자인이 어떻게 산업 요구사항이 되었는지 보여줍니다.
이러한 접근성 기술은 색 대비, 가독성 있는 폰트, 인식 가능한 액션 요소부터 다양한 능력을 가진 사람들을 따라가는 것까지 다양합니다. 이를 통해 접근성에 초점을 맞춘 기능을 제공합니다.
왜 접근성이 필요한가요?
모든 연령층의 사람들을 위한 디자인이 필요하고 신체적 제약이 있기 때문에 접근성도 점점 더 강화되고 있습니다. 기업은 다양한 인구통계를 활용하고 모든 측면에서 포용성을 추구하고 있습니다. 점점 더 많은 사람들이 디지털 방식으로 전환함에 따라 디자이너가 접근 가능한 디자인을 중요시하는 것은 거의 필수입니다.
강좌와 부트캠프는 요구 사항을 멀리서도 감지하고 있으며, 학생들이 접근성 디자인에 대한 충분한 지식을 갖추고 디자인 분야에 진입할 수 있도록 준비하고 있습니다.
개인화
접근성 외에도, 개인화가 사람들을 앱이나 웹사이트에 묶어 두는 주요 요인입니다. 아마도 유튜브(Youtube)에서 이와 비슷한 메시지를 본 적이 있을 겁니다.
다양한 앱이 며칠 동안 새로운 기능을 실험하다가 사용들이 좋아하지 않아 철회하는 모습을 볼 수도 있습니다. 이는 UX 디자이너가 제품과 서비스의 미래를 어떻게 주도하고 있는지 직접적으로 보여줍니다.