UI 디자인의 진화 - 스큐어모피즘에서 머티리얼 디자인까지

TREND/트렌드 Pick!


 

스마트폰이 나날이 발전하면서 UI 디자인 또한 다양한 컨셉으로 변화하고 있습니다. 특히 PC가 아닌 스마트폰을 통해 인터넷을 이용하게 되면서 작은 화면에서도 PC에서 하던 일을 그대로 구현하고 효율적으로 처리하게 위해 UI 디자인이 더욱 중요해졌는데요. 많은 기업들이 왜 UI 디자인을 개선에 노력하는 것인지 어떻게 변화되어 왔는지에 대해 영하이라이터와 함께 알아보도록 하겠습니다.

 

 

 

_ UI 디자인, 심미성 편의성 두마리 토끼를 잡다

 

‘UI’의 정확한 뜻은 User Interface, 사용자가 프로그램을 편리하게 사용할 수 있는 환경을 제공하는 설계 내용을 뜻하는 용어입니다. 컴퓨터를 조작할 때 나타나는 아이콘이나 텍스트 형태 구동화면도 포함되고요. 스마트폰의 경우 앱 아이콘 형태 및 화면 구성을 가리킬 때가 많죠.

 

UI 디자인의 궁극적인 목표는 서비스를 이용하는 사용자의 편의성 증대입니다.  소프트웨어의 미적 요소뿐만 아니라 한정된 화면에서 효과적으로 정보를 전달해야 하는 것이 UI 디자인의 임무랍니다. 이는 UI 디자인이 다른 소프트웨어와 차별화 할 수 있는 중요한 요소이자 소프트웨어의 정체성을 드러낼 수 있기 때문이죠. 또한 좋은 UI 디자인은 사용자들의 쉽게 사용할 수 있도록 도와줄 뿐더러 미적 요소를 통해 소프트웨어의 정체성을 나타내기도 하여, 사용자가 만족스러운 경험을 할 수 있도록 합니다.

 

이렇게 소프트웨어에서 중요한 UI 디자인은 시대에 맞춰 다양한 모습으로 발전했는데요. 이번에는 영하이라이터와 함께 스마트폰 등장 이후 트렌드를 선도했던 UI 디자인들을 알아보겠습니다. 

 

 

 

  

_  실제 사물에서 영감을 받다, 스큐어모피즘(Skeuomorphism) 디자인


브라운(Braun) 계산기를 모티브로 제작한 애플(Apple) 계산기 (출처 : 브라운 홈페이지) /

넘기는 종이 달력을 모티브로 제작한 구글 안드로이드(Google Android)의 달력 UI (출처: Drall Consultoria)

 

 

스큐어모피즘(Skeuomorphism)은 그리스어로 도구(Tool), 그릇(Vessel)를 뜻하는 단어 ‘Skeuos’와 형태(Shape)를 뜻하는 ‘Morphe’의 합성어로, ‘도구의 형태’라는 뜻인데요. 현실에 존재하는 도구의 형태를 그대로 반영한 UI 디자인인 것이죠. 많은 사람들이 사용하는 아이폰 역시 출시되었을 때부터 iOS6까지 스큐어모피즘 디자인으로 구성된 UI를 사용한 것으로 유명합니다. 실제 물건을 그대로 가져와 디자인했기 때문에 사용자가 사용 방법을 직관적으로 알 수 있다는 장점이 있습니다. 또한 기존의 사용감을 그대로 적용하여 제품에 대한 친밀감을 가질 수 있습니다.


 책장 넘기는 애니메이션을 담은 애플 iOS의 아이북스(iBooks) 앱 (출처: The Digital Reader) /

가죽 바느질 자국과 왼쪽 하단 메모꽂이가 디자인되어 있는 애플 iOS6 의 메모 앱 (출처: appleinsider)

  

  

하지만 불필요한 장식적 요소까지 그대로 가져와 UI가 디자인 되는 경우, 디자인이 복잡하고 난해할 수 있습니다. 또한 실제 사용했을 때 편했던 조작이 스마트폰으로 옮겨올 경우 불편할 수 있고, 쓸데없이 화면을 차지할 수 있습니다.

 


 

위와 같이 볼륨을 조절하는 컨트롤러를 스큐어모피즘 디자인으로 구현할 경우, 둥근 손잡이 형태의 볼륨 조절기 작동 방식을 그대로 가져와 UI 디자인을 하게 될 텐데요. 하지만 보통 엄지 손가락 하나로 조작하는 스마트폰에서는 사람이 실제 스피커의 볼륨 조절기를 두 손가락으로 잡고 돌리는 동작을 할 수 없습니다. 이와 같은 경우처럼 실제 사물 그대로 UI에 이식하는 것은 비효율적일 수 있습니다.

 

이 밖에도 하나의 OS 안에서 앱 모두 실제 물건에 맞춰 그래픽화 되어 있다면 전체적인 디자인 일관성을 갖기 힘들 수밖에 없습니다. 또한 도구를 사용해보지 못한 사용자에게는 오히려 사용 방법이 직관적이지 못하고 어렵게 느껴질 수 있습니다.

 

이처럼 스큐어모피즘 디자인은 실제로 사용자의 편의성을 저해한다는 의견이 있고, 과한 디테일이 미적 요소를 해친다는 단점이 있었습니다. 이러한 문제들이 대두될 쯤, 스큐어모피즘의 특징과는 완전히 다른, 새로운 UI 디자인 트렌드가 등장하게 됩니다.

 

 

 

_ 단순한 게 최고의 미덕이다, 플랫(Flat) 디자인

 

▲ MS Windows 8에 등장한 플랫 디자인 (출처: Windows 유튜브)

 

 

플랫 디자인은 앞서 설명 드린 스큐어모피즘 디자인과는 반대로, 입체적인 요소를 배제한 평면적인(Flat) 디자인입니다. 플랫 디자인은 스큐어모피즘에서 흔히 사용되는 그림자, 질감, 반사효과, 엠보싱 등 입체감을 부여하는 요소와 기능과는 상관 없는 장식적인 요소를 제거해 가독성을 높여주고, 속도도 빠르게 만들어 줍니다. 단순한 아이콘, 명료한 화면 구성, 빠른 전송속도를 앞세워 널리 퍼져나가게 되었습니다. 스큐어모피즘 디자인을 주도한 브랜드 애플 또한 아이폰의 운영체제 iOS7에서부터 플랫 디자인을 선보이기 시작합니다.


▲ 적응형(Adaptive) UI (출처 :Thomas Mueller Linked in)

 

 

또한 스마트폰이 아닌 웨어러블 디바이스나 태블릿 같은 다양한 화면 크기를 지닌 기기가 등장하면서 어느 기기에서도 어색하지 않게 작동하는 적응성(Adaptivity)이 중요해졌습니다. 기존의 스큐어모피즘 디자인은 그림자나 텍스처 등 디테일과 고정된 이미지 사이즈를 가지고 있어 다양한 디바이스의 화면에 적절하게 대응하기가 힘들었습니다. 하지만 플랫 디자인은 웹과 모바일에서 디자인을 재배치하기 쉬워 일관성을 유지할 수 있습니다. 따라서 플랫폼이나 디바이스 크기에 상관없이 단일화된 경험을 제공할 수 있습니다.

 

하지만 플랫 디자인 역시 과하게 적용하면 너무 단순해져서 편의성이 떨어지는 경우가 발생하게 됩니다.


▲ 플랫 디자인을 과도하게 사용한 퓨처 인사이트 리브(future insights live) 홈페이지 (출처: 퓨처 인사이트 리브 홈페이지) /

어느 쪽 시프트(Shift)키가 눌린 키인지 구별하기 어려웠던 플랫디자인의 예정 애플의 쿼티 키보드

 

 

플랫 디자인을 과하게 사용한 예입니다. 사용자는 어떤 걸 클릭해야 할 지 직관적으로 알아차리기 힘듭니다. 또한, 입체감이 없기 때문에 색으로 대상을 구분하게 되는데, 이는 간혹 사용자에게 직관적으로 다가오지 않을 수 있습니다. 그리고 플랫 디자인으로 디자인된 UI는 대체로 유사한 디자인 형태를 보여 디자이너의 독창성이 떨어진다는 지적을 받기도 합니다.

 

이와 같은 플랫 디자인의 단점을 개선하기 위해, 디자이너들은 플랫 디자인에도 입체적 요소를 부여하기 시작합니다. 그렇게 탄생한 디자인이 머티리얼(Marterial) 디자인입니다.

 

 

 

_ 플랫 디자인에 입체감을 더하다, 머티리얼(Marterial) 디자인 


▲ 머티리얼 디자인의 예 (출처 : Google Developers 한국 블로그)

 


2014년 6월, 구글은 자사의 서비스와 안드로이드 앱에 적용할 진화된 형태의 UI 디자인 '머티리얼 디자인'을 발표했습니다. 머티리얼 디자인은 마치 납작한 카드를 겹겹이 쌓아 올린 것처럼 입체감을 부여한 디자인입니다. 각 표면 뒤에는 그림자 효과를 두어 깊이감을 느낄 수 있습니다. 그래서 얇은 카드가 화면 안에서 움직이는 듯한 느낌을 주는 것이죠. 즉, 플랫 디자인과 스큐어모피즘 디자인 특징을 동시에 취하고 있는 셈입니다.

 

또한 카드 형태의 레이어와 그림자에 의해 표면과 가장자리가 구분되어, 사용자들이 화면의 어떤 부분을 터치할 수 있고 움직일 수 있는지를 쉽게 이해할 수 있어 플랫 디자인의 단점이었던 경계의 모호성을 해결했습니다.

  

▲ 머티리얼 디자인의 역동적인 애니메이션 (출처: Google Developers 유튜브)

 

 

머터리얼 디자인은 플랫 디자인에 비해 더 역동적인 애니메이션 표현이 가능합니다. 다양한 장식 디테일을 이용해 물리적 세계를 표현하는 스큐어모피즘 디자인과 물리적 세계가 없는 플랫 디자인과는 달리 그림자를 통해 물리적인 세계를 구현했습니다. 따라서 카드가 실제로 움직이는 것 같은 애니메이션으로 사용자는 현재 앱의 상태와 일어나는 일에 대해 직관적으로 인지할 수 있습니다.

  

▲ 구글 머티리얼 가이드의 머티리얼이란 무엇인가? (출처: 구글 머티리얼 디자인 사이트)

 

 

구글은 자사의 머티리얼 디자인이 어떤 것인지 상세히 설명하는 가이드를 만들어 디자이너에게 설명하고 있습니다. 그 속에는 ‘머티리얼은 다른 머티리얼을 통과할 수 없다’ ‘여러 머티리얼 요소는 동시에 같은 공간에 위치할 수 없다’ 같은 다양한 규칙이 있는데, 이는 마치 디지털 세상에서 나름의 물리법칙을 만들어 놓은 듯 합니다. 그렇게 해서 사용자들이 최대한 직관적으로, 편리하게 서비스를 이용할 수 있도록 안내하고 있답니다.



지금까지 대표적인 UI 디자인 트렌드에 대해 알아보았습니다. 각 UI 디자인의 장단점을 분석하긴 했지만 디자인은 어느 것이 좋고 나쁘고의 문제가 아닙니다. 어떤 요소를 적절하게 사용하였는지, 어떤 표현이 사용자의 경험을 좋게 하느냐의 문제인 것이죠. 즉, 디자인의 장단점과 기기의 특징을 반영하여 사용자에게 아름다우면서 사용하기에 편리하게끔 도움을 주는 게 좋은 UI 디자인의 목표랍니다. 이제 UI 디자인을 보는 눈이 좀 뜨이셨나요? 지금 바로 스마트폰 화면을 보면 어떨까요? 평소에는 아무 생각 없이 바라보았던 UI의 아름다움을 느껴 보아요!



저작자 표시 비영리 변경 금지
신고
< 공유하기
첫 댓글을 남겨보세요
1 ··· 155 156 157 158 159 160 161 162 163 ··· 2326


티스토리 툴바