디자인따라하기 UI/UX 트랜드 뉴모피즘 뭔데 핫해?

디자인연습 (5)

디자인따라하기 UI/UX 트랜드 뉴모피즘 Neumorphism

새로운 스큐어모피즘 | 플랫 > 머티리얼 > 뉴모피즘

 

 

이번 디따는 일어나서 잠들기까지 하루에도 수백번씩 접하게 되는 유저인터페이스의 영역에서 살펴볼까 합니다. 작년부터 올초, 지금까지도 많은 주목을 받고 있는 뉴스큐어모피즘(뉴모피즘) 들어보셨나요? 생소한 단어라 처음들어보시는 분들도 계실텐데요, 쉽게 말해 APP아이콘으로 예를 들어드릴게요. 초기 애플의 아이콘은 스큐어모피즘이라고 하는 리얼한 형태의 디자인들이 주를 이루었습니다. 이후에 윈도우와 함께 플랫한 디자인이 대세를 이었고, 여기에 질감이 표현된 머티리얼이 주를 이루는 앱스타일이었는데요. 한마디로 점점 단순화 되었다는 의미입니다. 

 

여기에서 한 발자국 나아가 새로운 스타일을 제시한 디자이너가 있었는데요.

 

뉴스큐어모피즘이 등장하게 된 dribbble

 

dribbble이란 사이트에서 처음 선보이면서 주목을 이끌었습니다. 폴란드의 UX/UI 디자이너 Filip Legierski은 빛과 그림자, 최소한의 색만으로 레이아웃과 버튼의 형태를 구분한 소프트한 스타일을 제시했습니다. 

 

 

Filip Legiersky >

☀️ Light Mode ☀️ Simple Music Player

편안하고 부드러운 느낌의 인터페이스는 감성적인 부분을 건들면서 기존과는 다른 느낌을 주었기에 많은 드리블 이용자들이 따라하면서 화제가 되었어요. 이러한 움직임에 힘입어 새로운 스타일로 극부상하는 듯 싶었으나,

개발자들 사이에서는 사실상 웹문서에서의 접근성이 떨어진다는 이유로 실제 기기에 접목되는 경우는 흔치 않았습니다. 보기에는 좋을지 몰라도 기술적으로 적용시키기에는 아쉬운 부분들이 있어 아직은 찬반이 팽팽한데요. 

 

하지만, 이 뉴모피즘 스타일을 활용해서 컨텐츠제작에는 응용할 수는 있겠죠. 디따 시작해볼까요?

 

 

---

 

완성작

 

Neumorphism을 말로 풀면, 

하나의 색상을 사용하여 빛과 그림자만으로 입체적인 느낌을 살려주는 스타일입니다. 아무래도 한가지 컬러만 사용하기 때문에 익숙하지 않은 UI에서는 버튼이 눌러져있는지, 눌러야하는 버튼인지 한눈에 알아채기 어려운 부분이 있죠. 시각적으로 인지가 쉽지 않다는 측면에서 바로 논란이 되는 쟁점 중 하나입니다. 그래서 위 이미지에서도 버튼의 상태를 알려주기 위해 부가적으로 Button과 Pressed라는 텍스트를 적어보았습니다.

 

 

 

---

 

쉐도우의 블러정도나 깊이, 방향 그리고 쉐입의 모양에 따라 다양한 느낌을 낼 수 있어요.

 

 

 

특히나 버튼 역할을 하는 부분에서는 다양하게 연출이 가능합니다.

 

 

 

기본 도형에서 인포그래픽적인 요소를 추가하여 변형시킬 수도 있고요.

 

 

스트로크와 색을 이용해 응용해보았는데요. 많은 색이 들어가지 않고 최대한 심플하게 디자인되어 정보에 집중할 수 있게 만드는 부분도 있는 것 같습니다.

 

 

 

 

이런식으로 기본적인 도형에서 시작하여 하나둘 추가하는 방법은 스킬을 늘려갈 수 있는 연습 중 하나예요. 스쳐가는 디자인이 될지라도 새로운 스타일에 대해서 연구해보고 적용해보는 것이 디자이너로서의 노력 중 하나가 아닐까요. 새로운 것은 물론이고 익숙한 것들도 관찰하고 다시 보면서 자신의 것으로 만들어보는 습관은 중요합니다.