최근 수정 시각 : 2024-03-25 19:04:35

뉴모피즘

1. 개요2. 배경3. 특징
3.1. 장점3.2. 단점

1. 개요

파일:뉴모피즘.png

Neumorphism

2019년에 등장한 Dribbble에서 시작된 미니멀리즘 디자인의 대안으로 떠오른 디자인 용어이다. 객체(Object)와 배경간의 구분을 오직 그림자로 함으로 볼륨감 있고 생생하게 살아있는 듯한 느낌을 받게하는 디자인 언어이다. 뉴모피즘 스타일에 배경색이 사용된다면, UI 요소는 동일 계열 색의 명도 차이로만 디자인된다. 이러한 구분에도 'Drop Shadow'와 'Inner Shadow'가 꼭 필요하다.

2. 배경

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

쉽게 말하면, 2010년대 초반까지 최대한 실사에 가까운 스큐어모피즘(스큐어모픽)적인 디자인이 대세였다가, 2010년대 중반부터는 Windows 8, iOS 7, 안드로이드 롤리팝 같은 미니멀리즘 디자인이 새로운 추세를 이끌었고, 2020년대부터 Windows 11, macOS 11처럼[1] 스큐어모피즘과 미니멀리즘의 적절한 중간 타협점인 뉴모피즘이 주목을 받고 있다. 그러나 아직까지는 기존의 미니멀리즘에서 그라데이션이나 그림자로 살짝 입체감을 주는 디자인이 대세이며, 대표적으로는 반투명 질감을 통해 입체감을 주는 글래스모피즘이 있다.

3. 특징

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

뉴모피즘으로 디자인된 페이지는 하나의 어포던스(Affordance) 덩어리처럼 느껴진다.

3.1. 장점

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

3.2. 단점

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



[1] 다만 macOS 11은 UI 요소와의 경계가 여전히 뚜렷하고 내부 그림자가 사용되지 않는 등 뉴모피즘과는 약간 차이가 있다. 다른 건 대강 비슷한데, 객체와 배경을 오직 명암만으로 구분해야 한다는 점을 만족하지 못했다. Apple 역시 뉴모피즘을 차용했다는 말을 부정하고 있으나, 설명하기로는 "미니멀리즘적인 아이콘 디자인에서 옛 macOS의 전통적인 사실적 모습을 적절히 타협해 재창조해 갖추었다"고 하는데, 이거 완전... [2] 검은 배경은 눈 건강에 좋지 않다는 말도 있지만 눈의 피로감을 줄여주며, 기종에 따라 배터리를 아껴주기도 하기 때문에 모바일 기기에서 유용할 때가 있다. 완전한 해결책은 아니지만 명도가 약간 높은 짙은 회색의 배경을 대신 사용하는 식으로 검은 배경을 대체하기도 한다. 예시