본문 바로가기
웹과 모바일

앞으로의 UI 디자인 트렌드는?

by mindfree 2019. 12. 18.

스큐어모피즘에서부터 현대적인 디자인까지

디자인 트렌드는 변하기 마련이다. 특히 스마트폰 OS의 디자인 트렌드와 맞물려서 변해온 과정을 설명한 글이 있어 소개한다. 

원문 링크 https://uxdesign.cc/whats-the-next-ui-design-trend-75c8b61f5c7c

아이폰이 처음 런칭했을 때, 작은 기기를 다양한 터치 제스쳐로 작동시킨다는 개념 자체가 상당히 새로운 것이었다. 이렇게 새로운 인터페이스를 사람들에게 쉽게 소개하기 위해 사용한 개념이 바로 스큐어모피즘이다.

구식으로 보일지는 몰라도 분명 귀엽다

스큐어모피즘은 실제로 우리가 보고 만지는 사물들의 모습을 차용하는 디자인을 말한다. 굳이 아이폰이 아니더라도, 월드 와이드 웹의 초창기 시절 디자인은 모두 기본적으로 이런 개념을 반영하고 있었다. 현실 속의 버튼이 두께를 갖고 표면에서 볼록 튀어나와 있으므로, 웹사이트의 버튼들도 당연히 두께감이 있어 보이도록 디자인 했다.

 

우리 휴대폰의 유리는 완전한 평면이지만 마치 요철이 있는 것 처럼 디자인했다

사람들은 점점 터치 디바이스에 익숙해져 갔다. 그러다보니 꼭 눈으로 보기에 볼록 튀어나와 보이지 않아도 버튼이 있어야할 것 같은 느낌적인 느낌이 드는 곳에 버튼이 있고, 그게 단색 사각형이고 그 위에 적절한 단어가 적혀 있다면 충분히 버튼인 줄 알고 꾹 누르는 때가 왔다.

납작하게 가보자!

2013년 iOS7이 소개될 때 애플은 납작한 디자인을 적용하기로 결정했다. 대부분의 그림자, 입체 효과가 이 때 사라졌다. 버튼은 그냥 텍스트에 링크로 바뀌었고, 모든 것은 2차원의 세계로 변했다.

지금은 이게 당연해 보일지 모르지만, 아마 당시를 기억하는 분들은 애플이 플랫 디자인 개념을 내놓은 직후 사람들의 반응을 기억할 것이다. 입체적으로, 실제 사물처럼 보이도록 디자인했던 아이콘들이 싹 사라지고 선과 면으로 만든 아이콘이 그 자리를 대체했다.

평면화는 인터페이스를 유리 표면에 가깝게 붙였지만 재미는 앗아갔다

머터리얼이 필요하다

구글은 2014년 Meterial Design이라는 개념을 내놨다. 안드로이드 기반의 제품은 레이어(다층)를 사용한다는 원칙이다. X축과 Y축에 더해 Z축이 나타났다.

각각 다른 인터페이스를 카드처럼 위로 쌓는 개념은 애플의 iOS7에서 보다 향상된 형태였다. 버튼이 음영 효과를 갖게 되면서 단순히 평면인 것 보다는 훨씬 알아보기 쉬워졌다.

각각의 요소는 Z축에 공간을 차지하고 있다

머터리얼 디자인은 플랫 디자인과 스큐어모피즘 시대를 섞고, 단순화시킨 개념이다. 디자이너는 더이상 인터페이스를 나무 재질이나 가죽이나 금속처럼 보이게 만들 필요가 없다. 공간과 깊이가 있는 디지털 카드로 만들기만 하면 된다. 따라서 미니멀리즘을 유지하면서도 재미 요소도 갖고 있다.

근데 머터리얼 디자인은 더 빨리 지루해졌다

잘 정리된 문서와 함께 따라하기 쉬운 규칙을 갖고 있었기 때문에 안드로이드 전반에 걸쳐 빨리 퍼져나갔다. 제한적으로 선택해야 한다는 조건 탓에 더 빨리 지루해졌고, 2년 남짓 지나고 나서는 구글도 좀 더 새롭고 뭔가 재밌는 걸로 업데이트를 했다. 별 도움은 되지 않았지만.

머터리얼 디자인을 친숙하게 보이도록 하는 모던 디자인

드리블(Dribbble)을 끼얹다

2016년 즈음, 정확히 누가 모던 디자인 유행을 시작한 것인지는 알기 어렵다. 단지 더 많은 좋아요를 받고 팔로어를 얻으려고 했을텐데, 유행으로 퍼졌다. 

부드럽고, 다양한 색상을 가진 그림자와 곡선으로 뭔가 긍정적인 느낌을 주고, 머터리얼 디자인에서 레이어를 차용했지만 분명 플랫 디자인에 보다 중요한 것은 돋보이도록 만든다. 이로 인해 따분한 머터리얼 디자인보다는 훨씬 시각적으로 즐거움을 주게 됐다.

그럼 다음은? 새로운 스큐어모피즘일까?

(새로운 스큐어모피즘(New-Skeuomorphism)이라는 용어는 원문의 저자가 만든 용어이다.) 이건 모던 디자인에서 한 발자국 나가서 약간의 '모조 3D' 효과를 다시 불러오긴 하지만 예전처럼 질감을 되살리는 정도는 아닌 개념이다. 앱 디자인에 아주 약간의 3D 리얼리즘을 더하면 뭔가 새로워 보인다.

가격표가 카드를 감고 있는 것과 버튼의 미묘한 질감에 주목하라. 약간의 두께감을 더했지만, 확연히 튀어나와 보이는 질감은 없다. 저자는 100% 평면으로는 다시 돌아가지 않을 것이라고 주장하고, 나도 여기에 동의한다. 

이제 한 발 더 나가서

저자는 T-1000 유형의 액체 금속 같은 유리가 개발되면 어떻게 될 것 같냐고 얘기한다. 평면이 아니라 실제로 3D 오브젝트가 생성이 된다면? 버튼이 정말로 3D로 튀어나오고, 그림자 효과를 갖고 있다면?

평면 스크린에 실제로 물리적인 키보드가 튀어나온다면 당연히 타이핑에도 도움을 줄 것이다. 

하지만 여기까지 가기 전에는, 우리는 아마도 몇 번의 완전히 새로운 (하지만 약간은 익숙한) 유행을 맞이하게 될 것이다.