Neumorphism(뉴모피즘)이라고 들어보셨나요?
디자인에 관심있으신 분들은 쵝근에 한번쯤을 들어보셨을만한 단어라고 생각이 듭니다.
스큐어모피즘 > 플랫디자인 > 머티리얼 디자인 > 뉴모피즘(?)
스큐어모피즘
＊ 사물의 모습 그대로를 표현하는 디자인 기법으로 3차원적이며 사실적인 것이 특징
플랫 디자인
* 복잡한 그래픽을 단순한 구성과 색상을 통해 직관적으로 인식할 수 있도록 2D 그래픽 디자인 방식
머티리얼 디자인
* 구글이 개발한 시각 언어로 그리드 기반의 레이아웃과 계획적인 색상 설계, 의도적인 여백으로 대담하고 그래픽적인 비주얼을 추구하는 방식
뉴모피즘은 New(새로운)와 Skeuomorphism(스큐어모피즘)이 결합된 뉴스큐어모피즘을 줄여 말하는 것으로,
Drribble이라는 사이트에서 Alexplauto의 작업물이 5000개 넘는 like를 받으면서 플랫/머티리얼 디자인의 대안으로 제시 되고 있습니다.
가장 먼저 등장한 스큐어모피즘은 대상의 형태를 사실주의적으로 표현하는 기법입니다.이는 초기 애플 디자인에서 쉽게 찾아볼 수 있는데,
IOS7이전화면(좌측이미지)를 확인하게 되면 최대한 현실과의 경계를 최대한 줄일려는 모습을 보여 주고 있습니다. 디지털이 보편화 되기 전에는 해당 아이콘이 어떤 역활을 하는지 보여주어야 하기 때문에 이는 매우 필수적인 사항이었습니다.
하지만 디지털이 보편화가 되버리자 사람들은 해당 버튼이 어떤 역활을 하는지 이미 익히게 되었으며 스큐어모피즘은 사용자들로 하여금 일관성 없는 UI를 제공하여 주의를 분산시키는 역활만 가진 디자인으로 변하고 있었습니다. 이때 때마침 미니멀리즘의 유행과 맞물리며서 자연스럽게 Flat 디자인이 새로운 트렌드로 자리 잡게 됩니다.
플랫 디자인은 복잡한 그래픽 효과를 배제하고, 단순한 색상과 구성을 통해 직관적인 인식이 가능하도록 구성하는 2차원 디자인 방식을 말합니다. 실제로 애플은 IOS7, 마이크로소프트는 window8부터 플랫디자인을 적용하게 되었습니다.
플랫 디자인은 웹과 앱에서 매우 효과적으로 활용 되었으며 스큐어모피즘과 비교하면 훨씬 심플하고 가독성이 뛰어났습니다.
하지만 심플함을 제공하는 Flat 디자인의 특성상 시간이 지날수록 접근성 문제가 제기되고 디자인 간의 개성이 사라지는 문제점이 생겼습니다.
이러한 단점을 개선한 것이 머티리얼 디자인입니다. 머티리얼 디자인은 빛과 그림자를 이용한 입체효과를 추가해 플랫 디자인에 공간감과 입체감을 추가한 디자인입니다. 구글은 안드로이드 5.0 롤리팝에서부터 머티리얼 디자인을 적극 활용하고 있습니다.
이렇게 디자인 트렌드가 진행되고 있을때 나오게 된 것이 바로 뉴모피즘이었습니다.
Material Design
Build beautiful, usable products faster. Material Design is an adaptable system—backed by open-source code—that helps teams build high quality digital experiences.
material.io
위의 링크에 들어가게 되면 구체적인 머티리얼 디자인에 대한 자료를 확인 할 수 있습니다.
→ 뉴모피즘이 디지털 금융에서 어떠한 장점이 될 수 있을까?
뉴모피즘 디자인을 사용할 때 가장 좋은 점은 '신선함'입니다. 이런 스타일은 인터페이스에 '새로운 분위기'를 형성해주고 두드러져 보이게 합니다. 게다가 다른 스타일과도 잘 섞일 수 있기 때문에 모든 것을 뉴모피즘 스타일로 전부 도배하지 않아도 됩니다.
버튼을 버튼답게라는 말과 어울리게 터치하고 싶은 욕구가 증가하는 것 역시 뉴모피즘의 장점이라고 할 수 있습니다. 머티리얼 스타일을 확인하게 되면 사용자로 하여금 전체적 분위기를 가독성 높게 깔끔하게 분위기를 형성하고 있지만 어포던스부분에서는 부족한 모습을 보여주고 있다 하지만 뉴모피즘의 경우 대부분 다 클릭 영역으로 인식할 수 있습니다.
하지만 단점도 존재를 하게 됩니다. 어쩌면 장점이 될 수 있지만 디지털 금융 환경에서는 크게 동조할 수 없는 의견일 것 같습니다.
바로 부드러움(Soft UI)입니다. 오직 그림자만을 이용하여 돌출된 영역을 표현하고, 이를 바탕으로 레이아웃을 구성하기에 마치 매끈한 도자기의 표면을 보는 듯한 느낌을 받을 수 있습니다.
이러한 이미지는 부드러운 이미지를 통하여 사용자와의 거리를 좁히는 것은 좋은 일이지만 너무 거리가 가까워지게 된다면 디지털 금융에서 중요한 요소인 신뢰성이 떨어지는 결과로 오게 될 수 있습니다.
게다가 배경과 영역 간의 대비가 낮아 풍부한 UI 요소들을 표현하기에는 적합하지 않기 때문에 접근성이 낮아 진다는 점과 그림자로 인해 전반적으로 흐릿해지기에 금융앱에서 가장 중요한 데이터를 확인하는데 불편함을 느낀다는 점은 심각하게 고려를 해야 할 점입니다.
→ 실질적인 구축은 힘들지 않을까?
기존과 다른 형식의 디자인으로 퍼블리싱에 걱정하는 분들이 생기지 않을까 생각이 듭니다. 하지만 CSS에서는 배경과 일체화 된 모습 처럼 보이는 것은 생각보다 어렵지 않은 작업입니다. 해외의 한 웹개발자가 뉴모피즘에 관한 사이트를 만들었습니다. 아래의 링크를 통해 확인 해보세요.
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
스타일을 적용하는 것은 생각보다 쉽게 작업이 됩니다. 그러나 이것을 금융앱 프로젝트에 적용을 하게 된다면 연산처리로 인해서 늦어 질 수 있습니다.
코딩 작업 중 CPU 연산을 많이 잡아먹는 작업인 box shadow, border radius 가 적용되었기 때문에 이러한 견해를 가지게 된 것인데,
어쩌면 디바이스가 하루가 다르게 발전하는 지금, 어쩌면 바로 이러한 CSS 작업이 가볍게 될 수 도 있습니다 :D
그러한 면에서는 뉴모피즘은 미래를 이야기 해주는 디자인이 아닐까 하는 생각이 들기도 합니다.
다만 웹 문서 접근성 지침(WCAG)에 따르지 않는다는 사실은 생각을 많이 해볼 필요가 있는 사항이네요.
위 영상을 확인하게 되면 XD를 이용해서 디자인을 진행한 다음 HTML/CSS로 웹에서 구현하는 과정까지 볼 수 있습니다.
→ 그럼에도 Neumporphism을 응원하는 이유는?
디지털 금융에서 더욱 다양한 디자인 패러다임을 제시 할 수 있기 때문입니다.
물론 현재 디지털 금융은 매우 빠르게 변화하고 있습니다. IT 기업들의 금융사업 진출과 더불어 오픈뱅킹, 마이데이터 등을 시행하면서 기존의 금융 디지털의 틀을 깨 빠르게 변화되고 있습니다. 하지만 서로 앱을 비교해서 보았을때 과연 기업을 대표하는 앱이 되었을까? 기업의 아이덴티티를 잘 살렸을까? 하는 의문이 듭니다.
대표적인 예로 IBK 기업은행의 i-OneBank 사례가 있습니다. 2019년 최근에 리뉴얼이 되었을 때 많은 사용자들은 큰 집중을 하게 되었습니다.
기존 SpringBoard Type 레이아웃이 보편적이었던 금융앱에서 심플하고 간편한 Off-Canvas Type을 선택하여 사용자들에게 카카오뱅크, 토스와 비슷하지만 IBK 기업은행만의 아이덴티티를 구축하는 모습을 보여주었죠. 그 여파로 인해 많은 사람들이 모이기도 했습니다.
한번 성공한 케이스를 확인해서 였을까요? 타 은행에서도 디자인 개편을 하려는 모습을 보였습니다. 사용자들에게는 더욱 발전된 디자인을 확인하면서 사용할 수 있기에 좋은 현상이었습니다. 하지만 같은 디자인 패턴으로 디자인으로 진행되는 경우가 많았습니다.
만일 이름을 빼고 금융앱을 이용해보지 않은 이들이 비교를 한다면 어느 앱이 어디 은행 앱인지 구분을 쉽게 할 수 없을 수 있습니다. :D
(IBK 기업은행 i-OneBank 이후 여러 금융 앱 디자인을 확인 했을때 '원형' 을 기준으로 나오는 디자인들이 많이 보였습니다.)
개인적인 생각으로 뉴모피즘이 실제로 적용하는 것은 현실적으로는 어렵다고 생각이 들지만 여러 문제를 개선하여서 디지털 금융의 새로운 바람이 되었으면 하는 바램을 가지고 있습니다.
→ 이글을 마치며
유명 브랜드에서 제시했던 기존의 디자인 방법과 다르게 뉴모피즘은 dribble에서 나왔다는 점과 실제로 운영이 되었을때 어떠한 문제가 있는지 확인 되지 않았던 것을 통해 뉴모피즘을 실제 프로젝트에 적용하는 경우는 드물지 않을까 생각이 듭니다.
다만 개인적인 생각으로는 앞서 이야기 했던 문제점들을 보안하여 이러한 디자인으로 사용자들에게 서비스를 제공하게 된다면 그것은 큰 혁명이 될 수 있으며 도전을 했던 기업의 새로운 아이덴티티를 사용자들에게 인식시켜줄 수 있지 않을까 조심스럽게 생각해봅니다.
실제 업무에 종사하시는 분들이나 앞으로 종사하실 분들.... 그리고 디지털 금융에 관심있는 분들에게
제 글이 작은 도움이 되었으면 좋겠습니다.
※ 참고자료
Wishket - 2020년 한 획을 그을 UI 디자인 트렌드 뉴모피즘
Neumorphism in user interfaces - Michal Malewicz
'Thinking' 카테고리의 다른 글
| 코로나19로 인해 생각하게 된 UX 다크 패턴 (0) | 2020.06.17 |
|---|