뉴모피즘은 새로운 UI 트렌드가 될 수 있을까?
Do we really need Soft UI?
최근 플랫/머티리얼* 디자인의 대안으로 떠오른 뉴모피즘에 관한 글이 자주 눈에 띈다. 돌아보면 모바일 인터페이스 디자인도 다양한 변화를 거쳐 현재에 이르렀다. iOS 초창기는 현실의 사물성을 그대로 재현하는 '스큐어모픽*'한 시대였다. 그 후 꽤 시간이 흘렀고, iOS7을 기점으로 전 세계 UI는 사물성을 잃고 급격히 평평해졌다. 이후 구글은 애플의 플랫한 디자인에 그림자 같은 스큐어모픽한 요소를 더해 머티리얼 디자인을 제안했고, 얼마 안 가 시대를 아우르는 강력한 디자인 이데올로기가 되었다.
하지만 최근 서구권에서 논의되고 있는 뉴모피즘 스타일은 머티리얼 디자인과 시각적으로 확실히 다른 지향성을 가진다. 구글의 머티리얼 디자인이 애플의 플랫디자인에 대한 반응이었다면, 뉴모피즘은 머티리얼 디자인에 대한 반응이자 초창기 스큐어모피즘에 대한 애수처럼 느껴지기도 한다. 흥미로운 점은 뉴모피즘 트렌드가 한 명의 Dribbble 사용자에 의해 출발했다는 것이다.(아래 링크 참조)
*스큐어모픽 : 사물의 모습 그대로를 표현하는 디자인 기법으로 3차원적이며 사실적인 것이 특징.
*플랫 디자인: 복잡한 그래픽을 단순한 구성과 색상을 통해 직관적으로 인식할 수 있도록 한 2D 그래픽 디자인 방식.
*머티리얼 디자인 : 구글이 개발한 시각언어로 그리드 기반의 레이아웃과 계획적인 색상 설계, 의도적인 여백으로 대담하고 그래픽적인 비주얼을 추구하는 방식.
'alexplyuto'의 뉴모피즘 스타일 목업alexplyuto의 뉴모피즘 디자인은 Dribbble에서 3,000개가 넘는 Like를 받으며 동시대 UI 디자이너들에게 새로운 스타일에 대한 가능성을 전파했다. 쿠퍼티노나 머티리얼 디자인이 구글이나 애플 같은 전 지구적 기업에서 자본의 세례를 받으며 전개되었다는 점을 생각해보면 이례적인 일이 아닐 수 없다. 어쩌면 뉴모피즘 스타일의 주목은 스타일 그 자체보다, 커다란 디자인 이데올로기를 개인이 제안을 할 수 있다는 시대적인 것에 있는 것은 아닐까?
[참조 링크]
머티리얼 디자인과의 시각적 차이점
뉴모피즘 스타일의 첫인상은 동글동글하고 부드럽다는 것이다. 요소와 배경간 구분을 쨍한 컬러 차가 아닌 오로지 그림자와 빛으로만 구분하기 때문이다. 뉴모피즘 스타일에 배경색이 사용된다면, UI 요소는 동일 계열 색의 명도 차이로만 디자인된다. 이러한 구분에도 'Drop Shadow'와 'Inner Shadow'가 꼭 필요하다.
동글동글하고 부드러운 인상의 뉴모피즘반면, 머티리얼의 그림자 체계는 물리적 세계의 사물이 작동하는 방식을 최대한 유사하게 표현한다. 이는 컴포넌트 간 시각적 위계를 정리하는데 효과적이다. 머티리얼 디자인을 살펴보면 스타일 자체가 중립적 특성이 강해 뉴모피즘처럼 특정한 정서를 주지는 않는다. 이 점이 두 스타일의 가장 큰 차이점이자 뉴모피즘이 가지는 커다란 한계일 수 있겠다는 생각이 들었다.
머티리얼 가이드에서 제안하는 그림자 스타일차갑고 이성적인 정체성을 가진 프로덕트도 뉴모피즘으로 스타일링 되면 어딘지 부드럽고 둥글둥글한 느낌이 생긴다. 물론 이런 감성이 꼭 필요한 프로덕트에는 도움이 될 것이다. 하지만 디자인 형식 자체가 특정한 정서를 지향하는 것은 생각해볼 문제다.
'미니멀리즘'이 현대의 가장 중요한 디자인 체계 중 하나일 수 있었던 까닭은 형식이 투명하다는 점이다. 미니멀리즘 형식은 스스로 드러내지 않고, 본질에 집중시킨다. 또한, 변화를 수용하는데 능동적이다. '타이포그래피는 투명한 크리스털 잔과 같아야 한다.'라는 격언처럼 시대를 대변할 수 있는 스타일은 좋은 그릇 역할을 하는 경우가 많다.
에어비앤비로 뉴모피즘 해보기
에어비앤비 Explore 페이지를 뉴모피즘 스타일로 직접 리디자인해보았다. 스터디 차원이라 시간을 많이 할애하지는 못했지만 현재 논의되고 있는 뉴모피즘 느낌을 최대한 지켜보고자 노력했다. 디자인을 마치고 왼쪽과 비교해보니 뉴모피즘 스타일이 훨씬 더 촉각적이라는 느낌이 들었다.
에어비앤비 뉴모피즘 스터디UI가 촉각적이라는 것은 무엇을 의미할까? 개인적인 생각으로 뉴모피즘으로 디자인된 페이지는 하나의 어포던스(Affordance) 덩어리처럼 느껴진다. 우리가 찰흙을 보면 말랑함을 떠올리고 이내 만지고 싶은 마음이 드는 것처럼 말이다. 화면에 존재하는 시각적 위계를 Inner Shadow와 Drop Shadow만을 활용해 디자인한 결과라고 할 수 있다. 하지만 지면 전체에 강한 행동 유도성이 부여될 때 장/단점 역시 명확하게 갈리는 것 같다.
장점은 역시 터치하고 싶은 욕구가 증가한다는 것이다. 좌측 머티리얼 스타일의 Dates와 Guests는 버튼이지만 라인으로 디자인돼 상대적으로 어포던스가 떨어진다. 물론 화면상 시각적 위계가 낮게 설계된 것이지만 누군가에게는 저 영역이 버튼처럼 느껴지지 않을지도 모른다. 반면 뉴모피즘으로 디자인된 에어비앤비 화면에서는 대부분 다 클릭 영역으로 인식된다. 다른 또 하나의 장점은 스타일적으로 확실히 다른 부분이다. 너무나 많은 프로덕트들이 플랫과 머티리얼을 채택하고 있기 때문에 뉴모피즘은 스타일 자체만으로 주목도가 생긴다.
뉴모피즘화 해본 에어비앤비 컴포넌트들단점은 뉴모피즘으로 스타일링 된다면 프로덕트가 둥글둥글하고 부드러운 인상을 가지게 된다는 것이다. 여기에 미래적인 느낌도 추가된다. 이는 프로덕트 아이덴티티가 인터페이스 스타일에 직접 영향을 받게 되는 것이다. 또한 화면의 복잡도를 제어하기 힘든 측면도 있다. 뉴모피즘 버튼의 경우 가급적 Drop Shadow를 활용해 지면에서 띄우는 것을 권장한다. 위 화면과 같이 Dates와 Guests 보다 더 높은 시각적 위계를 적용하고 싶은 카드형 콘텐츠들에게 내가 할 수 있는 현실적인 방안은 그림자를 더 넓게 주는 것이었다. 또한 자연스러운 Inner Shadow 연출을 위해 배경과 UI색이 미묘한 톤온톤으로 디자인되어야 했다. 이렇게 되면 전체적인 인상이 뿌옇게 된다. 이는 단지 시각적 혼탁도가 높아지는 것뿐 아니라 화면에서 가장 중요한 CTA(Call To Action)의 존재감이 약해지는 현상이 생긴다.
Flat UI의 간략한 연대기
빠르게 Flat UI를 채택했던 Window 8의 디자인 형식은 현재도 자주 회자된다. 그라데이션이 적용된 배경이 심도를 만들고 플랫한 컴포넌트들이 그 위에 떠다닌다. 지금 봐도 그렇게 촌스럽지 않다.
window8에 사용된 metro UI생각해보면 이 형태는 그림자를 남발하지 않아도 된다. 시각적 위계와 영역을 색으로만 구분해 준다. 이 두 가지 측면 때문에 화면이 또렷해진다. 배경과 비슷한 계열 색일수록 화면에서의 위계가 낮아진다. 반대로 보색일수록 중요도가 높아진다. 아예 별색인 경우는 특별한 기능이 주어진다. 개인적으로 window8의 평가가 그토록 혹독하지 않았다면 메트로 디자인의 평가 역시 달라지지 않았을까라는 생각을 가끔 하곤 한다.
iTunes의 디자인 발전과정플랫한 메트로 UI는 2012년 10월경에 출시됐다. 그 당시 애플 디자인의 시각 경향성을 잘 보여주는 것이 iTunes인데, 위 이미지를 보면 iOS는 2012년 경에도 스큐어모피즘을 선택하고 있다. 2013년 Flat UI와 함께 등장한 iOS7의 등장으로 모바일 디자인의 판도가 다 바뀌어버린 건 불과 1년 후의 일이었다.
이 당시 애플 iOS디자인팀에도 큰 사건이 있었다. 다름 아니라 수석 디자이너가 교체된 것이다. 스티브 잡스 사망 후, 그때까지 애플 UI를 총괄한 스콧 포스톨(Scott Forstall)이 디자인부 부사장이었던 제품 디자이너 조너선 아이브(Jonathan Ive)로 교체된 것이다. 스큐어모피즘으로 대변되는 스콧 포스톨이 iOS 초창기부터 iOS6까지 제안한 중요한 테제는, 모바일 인터페이스가 아직 익숙하지 않은 사용자에게(고령층까지 포함) 현실의 사물성을 재현해 빠르게 디지털 세상으로 온보딩 할 수 있게끔 도와주고자 하는 것이었다. 스콧 포스톨의 판단은 유효했고, 발맞춰 UI 디자이너들 역시 벡터보다 비트맵을 선호하기 시작했다. 재현성은 높아졌지만 프로덕트는 점점 더 무거워져 갔다.
ios6과 iOS7의 시각 경향성 차이조너선 아이브가 iOS7부터 채택한 플랫 디자인은 스큐어모피즘에 대한 강한 반작용이었다. 더이상 사람들은 현실 속 대상과 인터페이스가 유사하게 표현되지 않아도 기능에 대해 추측할 수 있는 충분한 내공이 쌓였다. UI는 전체적으로 평평해졌고 직관성을 추구하게 되었다. 그 결과로 비트맵보다 무게가 가벼워졌다. UI가 간결해지니 상대적으로 콘텐츠가 돋보이기 시작했다. 사실상 이후에 나온 머티리얼 디자인은 스큐어모피즘이 플랫하게 진화한 것보다는 소극적이다. 시각적 평평함은 계속해서 계승되었기 때문이다.
머티리얼 가이드로 디자인된 여행 앱, Crane그럼에도 불구하고 응원하는 까닭
최근에 발견한 아래 뉴모피즘 디자인은 상용화까지는 이루어지지 않은 목업이다. 핸드폰 같은 부차적인 시각적 장치를 제외하더라도 뉴모피즘 스타일이 가진 한계들을 충분히 인식한 절충안처럼 느껴졌다. 그래서인지 디자인 스타일이 도드라지지 않고 콘텐츠에 쉽게 눈이 간다. 시각적 위계도 또렷한 편이다. 프로덕트의 책과 관련된 주제의식과 뉴모피즘 형식 또한 충돌하지 않는다.
뉴모피즘의 절충안처럼 보이는 디자인하지만 아래 뉴모피즘 스타일의 경우 아름답긴 하지만 현실 가능성을 검토해보면 여러모로 한계가 느껴진다. Dribbble 사이트는 디자이너가 시각적 영감을 받기에는 더할 나위 없지만, 아직 경험이 부족한 디자이너들에게는 UI에 대한 왜곡된 생각을 심어주기 쉬운 것 같다. 부분적으로 받아들이고 적당히 경계할 필요가 있다.
UI/UX를 다루고 디자인한다는 것은 낱장의 페이지를 예술적으로 만드는 것과는 거리가 멀기 때문이다. 조금 더 UI/UX에 대한 깊은 사고를 하고 싶다면 dribbble 보다는, 아래 mobbin 같이 '상용화'되었고, 전체 페이지의 흐름을 알 수 있는 사이트를 참고하는 것을 추천한다. UI 디자인은 영화로 따지면 '쇼트'보다 '시퀀스'가 훨씬 더 중요한 장르기 때문이다.
여러 가지 한계점에도 불구하고 뉴모피즘이 흥미로웠던 것은, 이 트렌드가 글로벌 기업이 아닌 한 사람의 디자이너로부터 출발했다는 점이다. 이는 앞으로 더 다채로운 스타일의 발생 가능성을 예견한다. 프로덕트들은 지금보다 더 고도화될 것이고, 고유한 자기만의 영역을 개척해나갈 것이다. 한 두 개의 거대한 디자인 체계로는 이러한 수요를 감당할 수 없을 것 같다. 최근 의식 있는 기업들이 각자 고유한 디자인 시스템을 만들고 있는 이유도 여기에 있다. 그래서인지 꼭 자본을 등에 엎지 않고도, 개인의 반짝이는 아이디어에서 출발한 디자인 형식의 제안은 어딘지 모르게 혁명적인 측면이 있다.
끝으로 아래 제너레이터를 활용해 현재 본인이 진행하고 있는 프로덕트를 뉴모피즘화 해보는 것도 재미있는 공부가 될 것 같아 링크를 남긴다.
https://neumorphism.io/#55b9f3
'뉴모피즘은 새로운 UI 트렌드가 될 수 있을까?' 끝.
