[5분 UI/UX] iOS7의 플랫 디자인
by
Dec 30. 2024
[5분 UI/UX] iPhone의 스큐어모피즘에서 이어지는 글입니다
스큐어모피즘은 오랫동안 생명력을 유지했지만 동시에 강한 비판을 받기도 했다.
실제 사물을 재현한 디자인은 스마트폰에 익숙하지 않은 사람들에게 주효했지만 사람들이 스마트폰에 점점 익숙해지면서 과도한 장식이 사용성을 저해한다는 비판을 받았다. 대충 계산기 모양이어도 사람들은 다 알아볼 텐데 계산기 모양을 똑같이 모방하는 게 무슨 의미가 있겠냐는 거다.
스큐어모피즘 디자인은 앱을 만드는 사람들에게도 상당한 피로감을 불러왔는데 디자이너들은 오브젝트를 실제와 비슷하게 구현하기 위해 그림자와 장식 요소를 넣느라 많은 시간을 쏟아야 했고 개발자들은 디자인 용량을 어떻게 하면 줄일 수 있을까, 스마트폰의 리소스를 어떻게 하면 덜 잡아먹을까를 고민해야 했다. 업계에서 스큐어모피즘 무용론이 슬슬 등장하던 것도 이즈음이다.
외부적인 비판과 별개로 내부적인 변화도 있었다.
애플의 최고책임자였던 잡스는 소프트웨어는 스큐어모피즘, 하드웨어는 미니멀리즘이라는 디자인 철학을 가지고 있었고 자신과 스큐어모피즘 철학을 공유하는 스콧 포스톨(Scott Forstall)에게 소프트웨어 디자인을 미니멀리즘 철학을 공유하는 조너선 아이브(Jonathan Ive)에게 하드웨어 디자인을 맡겼다. 이 체계에서 아이맥과 아이팟, 아이폰 등 애플을 대표할만한 희대의 명작들이 탄생했다. 이 구도는 잡스가 타계하면서 균형추가 흔들리기 시작했고 소프트웨어 디자인을 담당하던 스콧 포스톨이 애플에서 퇴사하며 조너선 아이브가 하드웨어, 소프트웨어 디자인을 총괄 관리하는 최고 책임자가 되었다.
디터 람스의 영향을 받은 iOS7의 플랫 디자인¹조너선 아이브는 미니멀리즘의 아버지라 불리는 디터 람스(Dieter Rams)의 열렬한 추종자였다. 조너선 아이브는 디자인 문제로 스콧 포스톨과 대립했는데 스콧 포스톨이 사라지자 스큐어모피즘을 버리고 소프트웨어에도 자신의 디자인 철학인 미니멀리즘을 도입한다.
이러한 배경하에 탄생한 것이 애플이 iOS7에서 처음 선보인 플랫 디자인(Flat Design)이다.
(좌)스큐어모피즘기반의 iOS6 / (우)플랫기반의 iOS7²플랫 디자인의 핵심은 미니멀리즘, 심플함이다. 사용자가 기능에 집중할 수 있도록 그림자 효과, 입체적인 반사 효과 등을 배제하고 이차원적 그리드와 색상의 대조, 그리고 컬러풀한 색조로 시각적 요소를 강조해 사용자가 색상만으로 기능을 인식할 수 있도록 설계했다. 조너선 아이브는 그래픽 요소를 제거함으로써 로고와 심볼이 더욱 강조되고 이를 통해 사용자가 기능과 콘텐츠에 더 집중할 수 있을 것이라 생각했다.
(좌)윈도우폰의 메트로 UI³ / (우)iOS의 플랫디자인⁴동일한 플랫 베이스 디자인이라도 MS 메트로 UI와 애플의 플랫 디자인은 큰 차이가 있다. 메트로 UI가 픽토그램을 활용해 아이콘을 심플하게 만들고 타이포그라피로 기능을 설명했다면 iOS의 플랫 디자인은 기존 스큐어모피즘 기반 디자인에 그림자와 반사광 같은 디자인 요소를 제거하고 오브젝트를 평면으로 구성한 것이 특징이다.
두 UI의 공통점도 있는데 색상만으로 기능을 인식할 수 있도록 원색의 컬러를 적극 활용했다는 점이다. 컬러를 적극 사용했다는 것은 동일하지만 사용법에서는 약간 차이를 보이는데 메트로 UI가 배경 타일에 컬러를 넣어 기능을 구분하려 했다면 플랫 디자인은 아이콘 자체에 컬러를 강조해 기능을 구분하려 했다.
애플이 선보인 새로운 디자인에 대한 평가는 엇갈렸다. 21세기 디지털 모더니즘, 잡스 사후에도 애플의 혁신은 계속된다라는 긍정적인 평가도 있었던 반면 혁신에 매몰된 조너선 아이브의 잡스 색채 지우기, 시각적인 면만 중시하고 사용성은 고려하지 않은 디자인이라는 비판도 이어졌다.
국내 한 연구에 따르면 사용자는 스큐어모피즘보다 플랫 디자인이 타이포그라피와 아이콘 디자인면에서 더 예쁘고 미적 만족감을 주지만 아이콘을 보고 앱의 기능을 연상하거나 표현하는데 있어서는 플랫 디자인보다 스큐어모피즘이 더 낫다고 응답했다.
애플의 변화는 업계에 큰 파장을 일으켰고 iOS7 이후 많은 회사가 속속 플랫 디자인을 도입하면서 플랫 디자인은 스마트폰 UI의 대세가 되었다.
[3부에서 계속]
✔️ 핵심 3줄 요약
1️⃣ 스큐어모피즘은 오랜 생명력을 유지했지만 동시에 강한 비판을 받았다.
2️⃣ 스큐어모피즘의 한계를 극복하기 위해 iOS7에서 미니멀리즘 기반의 플랫 디자인이 도입되었다.
3️⃣ 플랫 디자인은 그리드와 색상의 대조만으로 사용자가 기능에 집중할 수 있도록 설계된것이 특징이다.
각주1)
http://www.uxdesign.cc
각주2)
https://www.cultofmac.com/244414/ios-7-interface-review/
각주3)
http://www.neowin.net
각주4)
http://www.cultofmac.com
