디자인 트렌드, UI의 정석 뉴모피즘

디자인 트렌드, UI의 정석 뉴모피즘

 

뉴모피즘(Neumorphism), 또는 네오 스큐어모피즘(Neo-skeuomorphism)은 웹의 구성요소, 프레임, 화면 등을 디자인할 때 사용하는 스큐어모피즘(Skeuomorphism)이라는 기법을 현대적으로 변형한 방식입니다. 그래서 뉴모피즘은 새롭다는 뜻의 "뉴(New)"와 "스큐어모피즘"을 섞어서 아주 재치 있게 만들어낸 용어입니다.

 

 

뉴모피즘의 배경

 

2019년에 등장한 Dribbble에서 시작된 미니멀리즘 디자인의 대안으로 떠오른 디자인 용어입니다.

UI의 발전을 알아보자면, 초창기에는 현실의 사물성을 그대로 재현하는 스큐어모픽 시대였습니다. 그 후 플랫하고 단순한 구성과 색상을 아이콘으로 사용하는 플랫 디자인이 인기를 끌었습니다. 현재는 '스큐어모픽'과 '플랫 디자인'을 결합한 뉴모피즘 디자인이 뜨고 있으며, Windows나 macOS 등지에서 점점 상용화되어 가고 있습니다.

 

쉽게 말하면, 2010년대 초반까지 최대한 실사에 가까운 스큐어모피즘(스큐어모픽)적인 디자인이 대세였다가, 2010년대 중반부터는 Windows 8의 Modern UI, iOS 7, 안드로이드 롤리팝 같은 미니멀리즘 디자인이 새로운 추세를 이끌었고, 2010년대 후반부터 스큐어모피즘과 미니멀리즘의 적절한 중간 타협점인 뉴모피즘이 주목을 받고 있습니다. 그러나 아직까지는 기존의 미니멀리즘에서 그림자로 살짝 입체감을 주는 디자인을 선호합니다.

 

뉴모피즘의 정의

 

뉴모피즘 디자인이란 객체(Object)와 배경간의 구분을 오직 그림자로 함으로 볼륨감 있고 생생하게 살아있는 듯한 느낌을 받게 하는 디자인 언어입니다. 뉴모피즘 스타일에 배경색이 사용된다면, UI 요소는 동일 계열 색의 명도 차이로만 디자인됩니다. 이러한 구분에도 'Drop Shadow'와 'Inner Shadow'가 꼭 필요합니다. 뉴모피즘으로 디자인된 페이지는 하나의 어포던스(Affordance) 덩어리처럼 느껴집니다.

 

뉴모피즘의 특징

뉴모피즘은 부드럽고 가벼운 느낌을 특징으로 하는 미니멀리즘의 한 형태로, 종종 대비가 낮은 파스텔 색상을 사용합니다. 

요소는 일반적으로 배경과 같은 색상이며 요소를 둘러싼 그림자와 하이라이트 로만 구별됩니다. 이렇게 하면 요소가 배경에서 "돌출"되거나 움푹 들어간 것처럼 보입니다.

 

디자이너는 스큐어모피즘과 플랫 디자인 사이의 중간 지점을 제공하기 때문에 뉴모피즘의 모양과 느낌을 좋아할 수 있습니다. 특히, 그럴듯하게 사실적으로 보이면서도 여전히 깨끗하고 미니멀리즘을 고수하는 것을 목표로 합니다.

 

팔레트

배경 색상으로는 채도가 낮고 거의 흰색에 가까운 베이지나 부드러운 회색 등의 대부분 연한 컬러를 사용합니다. 그리고 그라데이션은 가까이에 있는 색상을 서로 구분하거나 디자인 안에서의 특정한 영역에 대한 흥미를 유발하기 위한 용도로만 사용됩니다.

 

형태

쉽게 인식할 수 있는 형태가 사용되며, 필요하다면 다시 사용해서 동일한 요소들이 반복되는 인터페이스가 만들어집니다.

 

표현

이전 세대의 디자인들과는 다르게, 뉴모피즘은 매우 부드럽고 은근한 효과를 사용하며, 개체를 너무 튀어 보이지 않게 하려고 노력합니다. 그러면서 예전에는 대부분 아날로그적인 요소였으며 3D 디자이너들이 표면의 질감을 살리기 위해 사용했던 클레이(clay, 점토) 렌더링 효과를 낸 것 같은 새로운 형태가 만들어집니다.

 

효과

뉴모피즘에서는 사실감을 최대치로 끌어올리는 것이 아니라, 이중 그림자(Double Drop shadow), 그라데이션, 채우기, 테두리 등 매우 간단한 효과를 사용합니다. 그리고 극단적인 경우에는 개체의 안쪽에 그림자 효과를 넣기도 하는데, 이것은 일반적인 개발자들이라면 코드를 작성해서 구현할 수도 있는 효과입니다.

 

중복 요소를 없애지 않음

디자인에서 중복된 요소들을 전부 없애려면 혼자서도 거뜬히 10명의 일을 할 수 있는 개발자가 필요할 수도 있습니다. 그리고 만약에 스케일러블 벡터 그래픽스(SVG) 이미지가 없다면, 각각의 구성요소마다 일일이 다른 이미지를 찾아야 하는데, 그러다 보면 결국엔 퀄리티가 형편없는 PNG, GIF, JPG 이미지만 찾게 되는 경우가 많습니다.

 

뉴모피즘의 장단점

 

디자인이 부드러운 인상을 가지게 되며, 미래적인 느낌도 추가 된다는 점이 장점입니다. 

하지만 그만큼 인터페이스 스타일에 직접 영향을 받게 되며, 화면의 복잡도를 제어하기 힘듭니다. 접근성 부족, 구현 어려움, 낮은 대비 및 특정 브랜드와의 비호환성으로 인한 단점 등이 있습니다. 

 

뉴모피즘 디자인은 고유의 디자인 시스템을 만들어내어 많은 사람들이 사용하고 있습니다. 개인의 아이디어가 고유의 디자인 시스템을 만들어 낸다는 건 대단한 일인 거 같습니다.