친숙함을 위해
처음 아이폰이 출시했을 때, 작은 디바이스를 멀티터치 제스처를 이용해 조작하는 것은 매우 새로운 시도였다. 사용자가 더 편리하게 인터페이스를 사용할 수 있게 하기 위해, 초기의 디자인은 UI에 스큐몰피즘을 적용했다.
스큐몰피즘은 기본적으로 사용자에게 디지털 세상을 제공하기 위해 나무 책장, 노트의 재봉된 가죽, 손으로 넘기는 CD커버 등 “현실 세계”의 요소들을 사용하는 것을 의미한다. 친숙한 사물들을 이용함으로써 새로운 사용자가 디지털 제품을 사용하는데 마주치는 장벽을 낮출 수 있었다. 그러한 인터페이스는 전에 본 적이 없었지만, 친숙한 느낌을 주었다.
사람들은 터치 디바이스에 익숙해지기 시작했다.
그러나 사람들은 스마트폰을 사용하는데 익숙해지면서, 나무, 철, 가죽처럼 보이는 인터페이스가 촌스럽거나 지루하게 느껴졌다. 그래서 뭔가 새롭고 신선하고 세련된 것을 만들기 시작했다. 더 디지털과 같은 것이 나오기 시작했다.
플랫한 디자인?
스큐몰피즘은 실제로는 평평한 폰 스크린과는 잘 어울리지 않았다. 가짜로 만든 3차원 요소와 실제 스크린의 평평한 느낌이 불협화음을 내는 것 같았다.
플랫으로 가자!
2013년에 iOS7의 등장과 함께 애플은 플랫 디자인으로 가기로 결정했다. 그림자들은 사라지고 버튼들은 텍스트 버튼으로 바뀌었다. 3D는 사라지고 모든 것들은 2차원에 존재했다.
그리고 사람들은 그것을 싫어했다!
인터페이스는 “평평한 표면에 보이는 픽셀들”이라는 것이 플랫 디자인의 개념이다. 정밀하고 모던해 보이지만, 사람들은 뭔가가 빠진 느낌을 가졌다. 평평한 표면을 터치하는 것 대신 실제로 버튼을 “누르는” 재미가 없어진 것이다.
Windows phone도 플랫 디자인을 아름다운 모습으로 과감하게 적용하였지만 재미가 없는 UI와 부족한 앱으로 주목을 끌지는 못했다.
사람들은 “Material”이 실제처럼 느껴지길 원했다.
Google은 2014년에 소개한 “Material Design”은 사람들의 기대에 부응하였다. 안드로이드 기반의 기기에 적용된 디자인 시스템의 기본 원칙은 레이어를 사용하는 것이었다. 순수하게 X, Y 축에서만 디자인하는 것 대신, Z 축을 다시 적용하였다.
버튼과 폼과 같은 인터페이스 요소가 쌓여있는 듯한 카드 콘셉트는 iOS7의 생명력 없는 플랫 디자인을 잘 업그레이드한 것이었다. 깊이감은 인터페이스 요소에 계층 구조와 목적을 잘 드러나게 해 주었다. 그리고 요소의 속성도 빨리 인지될 수 있게 해 주었다. 그림자를 가진 버튼은 플랫한 형태보다 버튼임을 훨씬 쉽게 드러내어 주었다.
간단하게 말하면 Material design은 flat, minimal과 스큐몰피즘의 깊이감 있는 콘셉트를 합친 것이다. 디자이너들은 더 이상 인터페이스가 나무, 가죽이나 금속으로 만든 물체로 만들어진 것처럼 흉내 내지 않아도 되었다. 인터페이스는 “digital” 카드로 만들어졌고, 그것은 공간과 깊이를 가지고 있었다.
두 가지 이전의 스타일을 합치는 방식을 적용하면서도 미니멀리즘과 명확함을 유지하고 있었고, “fun”한 요소도 더해졌다.
처음에는 안드로이드에서만 적용했지만, 현재는 잘 적용된 트랜지션이 안드로이드만의 트렌드가 아닌 디자인 전체의 트렌드로 되었다.
Material Design은 빨리 지루해졌다.
Material Design의 가이드는 쉽게 따라 할 수 있도록 자세하게 잘 쓰여 있어서 안드로이드 앱에 전반적으로 빨리 적용이 되었다.
그러나 디자인에 선택의 여지가 별로 없다는 사실은 사람들을 금세 지루하게 만들었다. 2년 만에 구글은 약간의 “fun”한 요소와 차별화되는 요소를 적용할 수 있도록 가이드라인을 업데이트하였다. 이제는 가이드라인 안에서 여러 가지 장식과 컨트롤의 모서리를 다르게 처리하여 제품을 좀 더 “당신만의 것”으로 만들 수 있게 되었다.
그러나 지루함을 없애는데 그다지 도움이 되지는 않았다…
Dribble(디자이너 포트폴리오 사이트)이 구해줬다.
이제 2016년경에 어떤 dribble 디자이너가 “modern”디자인을 시작했는지 찾기가 거의 불가능해졌다(modern 디자인 트렌드는 어떤 dribble 디자이너의 포트폴리오 작품으로부터 시작했음).
모두들 좋아요와 구독을 더 받으려고 했던 것이었지만, 이제는 모두가 똑같은 디자인을 하게 된 것이다.
부드럽고 컬러풀한 그림자와 곡선으로 앱의 새로운 스타일을 만들어 냈다. 오브젝트가 레이어로 층을 이루는 기본적인 방식은 Material design으로부터 영향을 많이 받았지만, 완전히 플랫 한 요소와 대비가 되도록 중요한 요소를 눈에 띄게 만드는 방식을 적용하였다. 지루한 느낌으로 카드가 쌓인 형태의 Material 디자인보다 미적으로도 더 아름다운 모습이었다.
다음 트렌드는 무엇인가?
모던 디자인이 등장한 지 거의 3년이 되었고, 이제 다시 변화가 필요한 시점이 된 것 같다. Dribble에서 “app”을 검색하면 99% 디자인이 똑같은 결과들을 볼 수 있을 것이다.
이 모던 트렌드는 괜찮아 보이지만 이제 다시 똑같은 덫에 걸린 것이다.
사람들이 모던 디자인을 좋아하기 때문에 부드럽고 컬러풀한 그림자와 밝은 그라데이션에 굵은 폰트가 우리의 모든 디자인에 적용되었다. 그리고 모두 똑같아 보이게 되었다.
실제 프로덕트에도 트렌드를 그대로 적용하기는 어렵기 때문에 Dribble에서 보이는 디자인이 실제 제품에 적용되기까지는 시간이 좀 걸린다. 그러나 결국 실제 제품에도 점점 모던 디자인이 적용되기 시작했고, 이제는 많은 앱들이 색상 외에는 스타일이 똑같아 보이기 시작했다.
새로운 스큐몰피즘?
차별화할 가능성이 있는 새로운 트렌드를 New-Skeumorphism이라고 부르도록 하겠다. 모던 디자인에서 한걸음 나간 것이고, 이전처럼 텍스쳐와 현실세계를 그대로 반영하지는 않았지만 3D의 느낌이 있는 스큐몰피즘으로 회기 한 것이기도 하다.
3D를 약간 반영하는 것으로 다시 앱이 돋보이며 “fresh”해 보인다.
카드를 두르고 있는 가격표와 버튼의 미묘한 텍스쳐에 주목해 보자. 좀 더 깊이감이 있으면서도, 과한 텍스쳐는 찾아볼 수 없다.
나는 이러한 스타일이 UI 디자인이 가야 할 방향이라고 생각한다. 다시 100% 플랫한 디자인으로 돌아가지는 않을 것이다.
하지만 또 다른 스타일이 트렌드가 될 가능성은 여전히 열려있다고 본다.
Morphing devices? (스크린의 물리적 표면이 유동적으로 변화하는)
인터페이스가 평평한 유리 패널 아래에서 3D를 흉내 내고 있는 것이기 때문에 인터페이스가 자연스럽게 느껴지지 않을 수도 있다.
만약 3D 오브젝트를 실제로 형성해서 튀어나올 수 있게 할 수 있는 유동적인 형태의 유리를 만들 수 있다면 어떨까? 버튼이 실제처럼 그림자를 드리우며 입체로 튀어나올 수 있을 것이다. 버튼을 누르면 유리가 아래로 눌리는 것이 느껴지며 실제 동작의 감각을 느낄 수 있을 것이다.
평평한 스크린의 키보드보다 “physical”키를 가지고 있는 키보드로 타이핑의 사용성을 확실히 개선할 수 있을 것이다.
그러나 이런 것이 나오기 전에, 우리는 완전히 새로운 트렌드(또는 익숙한 트렌드)를 몇 번 더 경험하게 될 것이다.
미래의 UI는 무엇이 될 것이라고 생각하는가?
김준범님이 브런치에 게재한 글을 편집한 뒤 모비인사이드에서 한 번 더 소개합니다.
