UI 디자인의 새로운 트렌드: 뉴모피즘의 개요

게시 됨: 2022-03-11

뉴모픽 디자인은 UI 디자이너들 사이에서 주목을 받아 현대 소프트웨어, 웹사이트, 모바일 앱에서 인기 있는 미학적 선택이 된 시각적 트렌드입니다. 포토리얼리즘과 3D 디자인의 측면을 기반으로 하는 뉴모피즘은 그림자 및 질감과 같은 시뮬레이션된 물리적 속성을 디지털 인터페이스에 제공합니다. 뉴모픽 디자인의 영향을 완전히 이해하기 위해 그 기원을 살펴보겠습니다.

뉴모픽 디자인의 기원

Apple이 1984년에 매킨토시를 출시했을 때, 그것은 그래픽 사용자 인터페이스를 갖춘 최초의 개인용 컴퓨터였습니다. 당시 Apple의 공동 창립자인 Steve Jobs는 휴지통이나 폴더와 같은 친숙한 아이콘과 기호가 컴퓨터를 처음 사용하는 사용자가 매킨토시 인터페이스를 탐색하는 방법을 더 잘 이해하는 데 도움이 될 것이라고 믿었습니다. Jobs는 1985년에 Apple을 떠났지만 1997년에 복귀한 후 회사의 UI 미학을 스큐어모피즘(인터페이스 구성 요소가 실제 세계의 구성 요소를 마지막 세부 사항까지 반영하는 스타일)으로 전환했습니다. 2001년 Mac OS X이 출시되었을 때 Apple은 반짝이는 아이콘, 버튼 및 드롭다운 메뉴가 있는 물 테마 디자인 언어인 Aqua라는 본격적인 스큐어모픽 시스템을 개발했습니다.

2007년 iPhone이 출시되면서 Apple의 스큐어모피즘 브랜드는 더욱 생생해졌습니다. 2010년대 초까지 스큐어모픽 디자인은 디지털 인터페이스에 대한 사실상의 선택이었습니다. 그러나 세상이 모바일 장치에 점점 더 의존하게 되면서 스큐어모피즘의 한계가 분명해졌습니다. 스큐어모픽 디자인 구성 요소를 만드는 것은 시간이 많이 걸리고 고도의 기술적 능력이 필요합니다. 스큐어모픽 구성 요소는 데스크탑과 홈 화면에서 멋지게 보이지만 작은 크기로 확장하면 더 미세한 세부 사항이 사라지는 경향이 있습니다.

스큐어모피즘의 사실적인 그라디언트 및 텍스처와 극명한 대조를 이루는 2010년대 중반에는 1960년대 미니멀리즘의 디지털 시대 재부팅인 플랫 디자인이 널리 채택되었습니다. 평면 디자인은 가장 필수적인 요소(선, 모양, 색상)를 제외한 모든 인터페이스 구성 요소를 제거하여 빠르고 유연한 스타일로 설계 언어를 체계화하려는 대기업에 적합했습니다.

몇 년 동안 스큐어모피즘은 디자이너들에게 저주였지만 그 잿더미에서 새로운 트렌드가 눈에 띄게 되었습니다. 2019년 말에 뉴모피즘("new skeuomorphism"의 줄임말)이 등장하여 이전 모델 중 최고를 제공하는 것으로 나타났습니다. 하이퍼리얼리즘과 미니멀리즘 사이의 균형을 유지하는 뉴모피즘은 색상, 질감 및 그림자를 과도하게 디테일하지 않으면서 실제처럼 느껴지는 방식으로 사용합니다.

뉴모피즘 101

뉴모픽 디자인에는 단색 색 구성표, 낮은 대비 및 미묘한 그림자의 세 가지 공통된 특성이 있습니다. UI 디자이너는 이러한 특성을 뉴모피즘의 부드러운 미학을 나타내는 광범위한 디자인 구성 요소에 적용할 수 있습니다. 뉴모픽 디자인이 어떻게 작동하는지 알아보기 위해 계산기 앱을 살펴보겠습니다.

출처: JustInMind

스큐어모픽 디자인에서 계산기는 그라디언트와 하이라이트로 렌더링되며 색상 팔레트는 배경에서 전경을 분리하는 데 도움이 됩니다. 사무실에서 흔히 볼 수 있는 계산기와 같은 모양과 기능을 제공합니다. 동일한 계산기의 평면 디자인 버전은 스큐모피즘의 표현 렌더링 기술을 포기하고 다양한 섹션을 구별하기 위해 모양과 색상 블록에 의존합니다.

Neumorphic 디자인은 단색 색상 팔레트와 계산기의 버튼이 촉각적으로 보이도록 하는 미묘한 그림자를 결합하여 스큐모피즘과 평면 디자인 모두를 활용합니다. 전경과 배경의 대비를 낮추어 계산기를 부드럽게 마무리하고 전체적인 효과는 단순화된 사실감을 줍니다.

뉴모픽 디자인의 예

이제 고유한 특성을 알았으므로 여기저기서 뉴모피즘을 알 수 있습니다. 실제로 자동차, 엔터테인먼트, 의료 및 금융과 같은 다양한 산업의 UI 디자이너는 뉴모피즘의 시그니처 모양으로 인터페이스 구성 요소를 재구상하고 있습니다.

출처: Gavrisov Dmitri, Tesla Concept

출처: Alexander Plyuto, 라디오 플레이어 컨셉

출처: Vadim Demenko, Kettle App Concept

출처: Filip Legierski, Bank App Concept

뉴모픽 디자인의 장단점

모든 디자인 트렌드에는 장점과 단점이 있습니다. 신중하게 사용하면 트렌드는 예측 가능한 디자인 패턴에 새로운 생명을 불어넣을 수 있지만, 트렌드가 사용자에게 도움이 되지 않는 애플리케이션에 강제로 적용될 때 어려움이 발생합니다. 뉴모픽 디자인의 유용성을 더 잘 이해하기 위해 뉴모픽 디자인의 장단점을 살펴보겠습니다.

장점

뉴모피즘은 시각적으로 단순하기 때문에 수백은 아니더라도 수십 개의 화면과 디자인 구성 요소로 구성된 디지털 제품에 이상적입니다. 디지털 제품 디자인에서 단순성은 다음과 같은 몇 가지 이점이 있습니다. 제품의 화면 수에 관계없이 디자이너가 미학적으로 응집력 있는 경험을 더 쉽게 만들 수 있습니다. 새로운 화면을 개념화, 구축, 테스트 및 반복하는 프로세스를 가속화합니다. 또한 디자이너가 제품이 발전함에 따라 시각적으로 일관성을 유지할 수 있도록 도와줍니다.

단순성 외에도 뉴모피즘의 사실적인 특성은 UI 구성 요소를 더 촉각적으로 보이게 하고 사용자에게 상호 작용성을 나타내는 데 도움이 될 수 있습니다.

단점

뉴모피즘은 대중적이고 널리 사용되는 추세이지만 접근성 문제가 있습니다. 디자이너가 완전히 단색인 뉴모픽 요소를 사용하도록 선택하면 색맹과 같은 시각 장애가 있는 사람들에게 문제가 발생할 수 있습니다. 또한 부드러운 모양을 구현하기 위해 낮은 대비에 의존하는 뉴모피즘은 가독성을 저해하고 사용자가 버튼, 아이콘, 양식 및 기타 중요한 인터페이스 기능을 식별하기 어렵게 만들 수 있습니다.

뉴모픽 디자인은 시대를 초월합니다

사용자의 요구(및 접근성)를 염두에 두고 구현하면 뉴모피즘은 앱과 웹사이트를 위한 시각적으로 매력적인 UI 디자인 옵션입니다. 절제된 그림자와 부드러운 질감은 UI 구성 요소에 상호 작용을 초대하는 따뜻함을 제공합니다. 디자인 세계에서 스타일은 왔다가 사라지지만 뉴모피즘의 단순성과 촉감은 시간의 시험을 견디기에 매우 적합합니다.