뉴모피즘

 

Neumorphism
1. 개요
2. 정의
3. 특징
4. 장점
5. 단점
6. 적용


1. 개요


Dribbble이 제시한 디자인 언어로 최근 플랫 / 머티리얼 디자인의 대안으로 떠오른 디자인 언어이다.

UI의 발전을 알아보자면, 초창기에는 현실의 사물성을 그대로 재현하는 스큐어모픽 시대였다. 그 후 플랫하고 단순한 구성과 색상을 아이콘으로 사용하는 플랫 디자인이 인기를 끌었다. 현재는 '스큐어모픽'과 '플랫 디자인'을 결합한 뉴모피즘 디자인이 뜨고 있으며, WindowsmacOS 등지에서 점점 상용화되어 가고 있다.
쉽게 말하면, 2010년 초반까지 최대한 실사에 가까운 스큐어모피즘(스큐어모픽)적인 디자인이 대세였다가, 2010년 중후반부터는 미니멀리즘적인 디자인이 새로운 추세를 이끌었고, 2020년 전후로 스큐어모피즘과 미니멀리즘의 적절한 중간 타협점이 뉴모피즘을 통해 이루어지고 있다.

2. 정의


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

3. 특징


뉴모피즘 스타일은 객체(Object)와 배경간의 구분을 컬러 차가 아닌 오로지 그림자와 빛만으로 구분함으로 둥글둥글하고 부드러운 인상을 준다. 전체적으로 UI가 생동감 넘치며, 단순 그래픽을 넘어 UI가 촉각적으로 다가온다.

4. 장점


  • 프로덕트가 둥글둥글하고 부드러운 인상을 가지게 되며, 미래적인 느낌도 추가된다. (이는 프로덕트 아이덴티가 인터페이스 스타일에 직접 영향을 받게 된다)

5. 단점


  • 화면의 복잡도를 제어하기 힘들다.
  • 전체적인 인상이 뿌옇게 되어 가독성이 좋지 않다.
  • 그림자와 하이라이트를 넣기 위해 흰 배경을 못 쓴다.
  • 시각적 위계가 명확하지 않아 디자인을 해칠 수 있다.
  • 위의 문제점들을 커버하기 위해 각 오브젝트의 구분을 위해 그림자 처리된 영역이 다른 디자인보다 커지는 경향이 생기는데 그림자 부분이 너무 커져버리다 보면 인터페이스 개체들의 효율적 배치가 방해를 받는 수준까지 이를 수 있다.

6. 적용


macOS Big Sur의 많은 새로운 디자인 언어도 뉴모피즘에서 차용했다. 그러나 흔히 볼 수 있는 뉴모피즘에서 다소 개선된 형태라고 할 수 있다.

분류