UI 변화의 흐름을 보면 현실을 그대로 재현하는 스큐어모픽(사실주의)에서, 플랫하고 단순한 구성, 색상을 아이콘으로 사용하는 플랫 디자인, 그 둘을 결합한 뉴 모피즘 디자인이 뜨고 있다.
뉴모피즘은 flat 디자인, material 디자인의 대안으로 등장한 시류로 스큐어모피즘과 미니멀리즘이 섞여 새로워진 것이다.
객체, 배경의 구분을 그림자로 나누어 볼륨감을 주는 것이 특징이다. 둥글둥글하고 부드러운 인상을 주며, 촉각이 있는 듯한 착각을 주는 디자인이다. 미래적인 느낌도 추가된다. 부분적으로만 뉴모피즘 요소를 사용할 수도 있다.
머터리얼 디자인과 차이점은 머터리얼이 배경위에 떠 있으면서 아래에 그림자를 만드는 느낌이라면 뉴모피즘은 배경에서 붙어서 반쯤 튀어나와 있는 듯한 느낌이다.
장점은 사용자에 어포던스(행동 유도성)를 자극하는 것이 뛰어나다.
단점은 화면의 복잡도를 제어하기 힘들며, 전체적인 인상이 뿌옇다고 느낄 수 있다. 명암을 활용한 그림자 효과에 입체감의 처리를 치중하다보니 시인성, 가독성이 떨어질 수 있다. 또한 밝은색 그림자와 어두운색 그림자를 동시에 사용해야 해서 배경을 완전한 흰색으로 사용하기 어려울 수 있다.
한줄로 요약하면 공간감이 있는 미니멀리즘 디자인 정도이며, 그 예는 macOS Big Sur에서 많이 찾을 수 있다.
뉴모피즘 바로 적용하기
Neumorphism/Soft UI CSS shadow generator
CSS code generator that will help with colors, gradients and shadows to adapt this new design trend or discover its posibilities.
neumorphism.io
'Markup Language > HTML, CSS' 카테고리의 다른 글
| 쿠키를 사용자별로 저장할 때 형식.. (0) | 2021.04.09 |
|---|---|
| html hr 세로선 세로줄 긋는 법 (0) | 2021.03.05 |
| 특정 그래픽 요소의 이벤트 비활성화 : pointer-events와 off (0) | 2021.02.02 |
| html 메타태그로 캐시 초기화(삭제) (1) | 2020.11.26 |
| position이 absolute인 요소 중앙 정렬 (0) | 2020.11.20 |
coding-restaurant
코딩 맛집에 방문해주셔서 감사합니다.
