뉴모피즘 디자인이 첫 시작이라면 (I think it's going to be a good Button)

(New Morphism Yellow)

 

(New Morphism White)

 

 

 

뉴모피즘. 그림자와 명암 차로 배경과 UI를 구분하는 디자인 방식이다.

뉴모피즘은 디자인 커뮤니티 Dribbble의 사용자 알렉산더 플라이로 가

자신의 작품을 올리면서 많은 호응을 얻으며 뉴모피즘 트렌드가 시작되었다

“하나의 색상을 사용하여 빛과 그림자만으로 입체적인 느낌을 살려주는 스타일
기 좀의 플랫 디자인과 머티리얼 디자인의 방식이 양방향에서 빛을 적용시켜
공중에 떠있는 느낌으로 대상을 강조했다면,

뉴모피즘은 버튼이나 대상 자체가 바닥에서 자연스럽게 돌출된 느낌을 제공한다

때문에 사용자들로 하여금 눌러보고 싶다는 충동이 들도록 욕구를 자극하는
디자인이기도 한데요

어포던스(행동 유도성)을 잘 전달한다고도 할 수 있는데,
어포던스란 특정 행동을 하게끔 유도한다는 의미를 지녔습니다

 

뉴모피즘으로 디자인된 페이지는 사용자들의 터치나 클릭을 보다 쉽게 이끌어 낼 수 있습니다

부드러우면서 미래적인 느낌을 주는 뉴모피즘 디자인은 ui가 생동감이 넘치며,
단순 그래픽적인 요소를 넘어 현실적인 입체감을 촉각으로 자극합니다

또한 대부분의 dnpq, ui/ux가 플랫과 머티리얼 스타일이기 때문에
뉴모피즘은 스타일 자체만으로도 차별성과 주목도가 생깁니다

하지만 뉴모피즘은 그 단점이 명확하기에 실무에서 많이 사용되지는 않습니다

뉴모피즘은 밝게 반사되는 빛과 어두운 그림자 단 두 가지만으로 입체감을 표현하고 있는데,

자연스러운 그림자 연출을 위해 배경과 ui 색이 미묘한 톤으로
디자인되어야 합니다

 

이렇게 되면 전체적인 디자인의 인상이 뿌옇게 되고,
CTA(사용자 클릭 유도)의 존재감이 약해지는 현상이 생기죠
즉, 사용자에게 각 요소들의 중요도 차이를 주지 못합니다

시인성이 다소 떨어지는 부분이 있고,
웹 환경에서 중요하게 다루는 접근성에서도 색 대비의 구분이
힘든 시각 장애인을 고려하지 않은 디자인이라고도 할 수 있습니다

웹디자인과 ux/ui 디자인은 모든 사용자가
최대한 동일한 결과물을 볼 수 있도록 해야 합니다

뉴모피즘 디자인을 만들 수는 있지만, 권장하지 않는 이유

뉴묘피즘 디자인의 문제는 ui 자체가 거의 의미가 없다는 것입니다
특히 버튼, 스위치, 고글 및 진행 상태 바 (progress bar)에는 적절하지 않습니다

따라서 많은 ui 요소들에 적정하지 않은 디자인이라는 것에 의문의 여지가 없습니다

 

이를 해결하기 위해 배경색과의 대비를 늘리면, 뉴모피즘의 특징인 부드러운 느낌이 사라지므로 도움이 되지 않습니다.
따라서 뉴모피즘 디자인이 제대로 작동하는 방법은 카드형 ui가 올바른 구조를 가지고 있고,
뉴모 이즘의 돌출된 이펙트가 레이아웃 상 계층을 잡는데 필요하지 않은 경우입니다

즉, 뉴모피즘 ui는 제품에서 없어지더라도
전혀 문제가 없는 곳에 사용해야 합니다

뉴모피즘 버튼은 바쁜 접근성을 가지고 있습니다


꼭 뉴모피즘을 디자인에 적용해 보고 싶다면 아래와 같은 조건이 맞춰졌는지 확인해 봐야 합니다

*인터페이스가 이미 잘 구성되어 있는지
*레이아웃 간의 계층 관계가 명확한지
*핵심 요소들을 구분하기 위한 색 대비가 충분히 높은지

이 모든 조건에 부합된다면 이미 디자인의 완성도가 충분히 높기 때문에 장식적인 효과로 뉴모피즘 스타일을 도입할 수 있습니다