NeuMorphism


# 촉각적 디자인
iOS7을 기점으로 전 세계 UI는 사물성을 잃고 급격히 평평해졌다. 이후 구글은 애플의 플랫한 디자인에 그림자 같은 스큐어모픽한 요소를 더해 머티리얼 디자인을 제안했고, 얼마 안 가 시대를 아우르는 강력한 디자인 이데올로기
중립적인 느낌이 없어서 글로벌한 디자인 시스템이 되기에는 한계가 있다
> ![](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2Feffabbb9-4446-4950-bf84-e117da08ee19%2FUntitled.png?table=block&id=73d0f293-4855-49cb-a485-ee99b7a5f1a4&cache=v2)

> ![](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2F18b2efee-61ae-4dd2-89c3-dc536a961a1f%2FUntitled.png?table=block&id=5cd80997-6223-4826-a8e8-58dc28613f97&cache=v2)


### UI가 촉각적이라는 것은 무엇을 의미할까?
> - 요소와 배경간 구분을 쨍한 컬러 차가 아닌 오로지 그림자와 빛으로만 구분하기 때문이다.
> - 뉴모피즘 스타일에 배경색이 사용된다면, UI 요소는 동일 계열 색의 명도 차이로만 디자인된다. 이러한 구분에도 'Drop Shadow'와 'Inner Shadow'가 꼭 필요하다.
> 

> ![](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2F640e0496-903b-447a-9b73-d6ed26c7f56e%2FUntitled.png?table=block&id=b2d53a7e-7f58-473e-967a-d7089b227e68&cache=v2)



> [뉴모피즘 트렌드에 대하여](https://brunch.co.kr/@thinkaboutlove/338)

### reference
> [뉴모피즘은 새로운 UI 트렌드가 될 수 있을까?](https://brunch.co.kr/@cliche-cliche/32)

### Neumorphism Generator
> [Neumorphism/Soft UI CSS shadow generator](https://neumorphism.io/#55b9f3)

### CSS examples
> [Neumorphism and CSS | CSS-Tricks](https://css-tricks.com/neumorphism-and-css/)

### artworks examples
> [25 neumorphism style inspiration in UI - Designbuddy](https://designbuddy.io/inspiration/25-neumorphism-style-inspiration-in-ui/)

> [Tridimensionality: skeuomorphism, flat design, and neumorphism](https://uxdesign.cc/tridimensionality-of-skeuomorphism-flat-design-and-neumorphism-bc9d705a5cc7)




