#Intro
GUI에 관심이 있으셨던 분들은 스큐어 모피즘, 플랫디자인 혹은 머티리얼 디자인이라는 용어를 들어보신 적 있을 겁니다.
애플의 아이폰에 들어가는 OS (operation System)는 대략 1년 단위로 버전업을 진행하는데요
그중 2013년 6월 10일에 발표한 업데이트 내용에는 기존보다 더 극적인 변화가 있었습니다.
IOS 기존 버전(iOS 6)에서 iOS 7 버전으로 업데이트를 진행하면서 전체적인 디자인의 스타일이 다 바뀌게 되었습니다. 기존 모양들은 마치 실물을 축소해서 저기다가 집어넣은 것처럼 사실적인 묘사와 형태로 아이콘이 표현되어 있는데 반해, 새로운 디자인을 보면 상대적으로 평평하고 추상화된 형태들을 보이고 있는데요, (현재 아이폰에서 보이는 모양들이지요) 사실적인 질감이 다 없어지고 평평한 모양에 색상이 많이 강조되는 쪽으로 업데이트가 진행되었습니다.
이 업데이트에 대해서 사람들의 초기 반응은 많이 안 좋았었어요 그래서 이것저것 패러디하는 짤도 많이 나오고 비판하는 글도 많이 올라왔었지요.
당시 사용자들이 받아들이기에 색감이 너무 화려했고 기존에 유려하게 묘사되던 질감을 특정한 예고 없이 한 순간에 다 없애버리고 상대적으로 지나치게 화려한 색상, 과감한 형태에 대해 적응을 할 시간이 필요했지요.
그렇다면 과연 왜 바꾸었을까요? 무엇을 위해서 바꿔야 했을까요 단지 그냥 새로운 디자인을 적용해서 새로운 느낌을 주고 싶었을까요? 사용자들의 반응을 어느 정도는 예상했을 법도 한데, 그럼에도 이렇게 극단적인 변화를 준 이유는 무엇이 었을까요? 전 세계인들이 사용하는 제품인 만큼 위와 같은 큰 변화는 파장이 클 줄 알았을 테고 그만큼 결정에도 신중했을 겁니다. 누군가는 조롱을 할 것이고 받아들이지 못하는 사람들도 있을 것이라 생각했겠지요. 위에서 보셨던 것처럼 실제로 사람들은 상당히 격할 정도로 조롱해댔고, 애플은 그럼에도 당연히 이전의 디자인으로 되돌리지도 않았습니다.
그렇다면 왜 애플은 이렇게 한순간에 GUI의 방향을 확 바꿔 버렸을까요?
<Scott Forstall and Jony Ive refused to attend each other’s meetings>
위의 글처럼 스캇 포스탈과 조나단 아이브의 회사 내의 정치싸움에 관한 이야기들도 전해집니다만, 우선 배제하고 그 변화의 이유와 과정을 디자인 관점 그리고 사용성의 관점에서 접근해보려 합니다.
#어포던스
UI 디자인을 하면서 가끔 접하는 단어 중 ‘어포던스’라는 용어가 있습니다. 제임스 깁슨이라는 사람이 1977년에 처음 사용한 단어인데요 사전적인 의미로 해석하자면 ‘행동 유도성’이라고 풀이할 수 있습니다.
> 어포던스 (Affordance)는 어떤 행동을 유도한다는 뜻으로 행동 유도성이라고도 한다. 뿌리말 어포드(Afford)는 원래 ‘~할 여유가 있다, ~하여도 된다, ~을 공급하다, 산출하다’라는 뜻을 가지고 있으나 보통 사전에 없는 뜻으로 인간 컴퓨터 상호작용, 인지 심리학, 산업 디자인, 인터렉션 디자인, 환경 심리학 그리고 인공지능학 분야에서는 ‘서로 다른 개념을 연결하는 것’이란 뜻으로 쓰이기도 한다. 다시 말해 물건(object)과 생물(organism, 주로 사람) 사이의 특정한 관계에 따라서 제시되는 것이 가능한 사용(uses), 동작(actions), 기능(functions)의 연계 가능성을 의미한다.
(https://ko.wikipedia.org/wiki/어포던스)
어떤 물건, 서비스, 시스템을 만들기 위한 디자이너, 설계자, 엔지니어들은 사용자가 물건을 직관적으로 보기만 해도 어떻게 사용할지 대략 짐작하여 사용하게 끔 하는 것이 편리한 디자인이라고 여기며 이때 어포던스가 잘 되어 있다면 그 쓰임새를 디자이너의 의도대로 제시된 사용법으로 이용하게 되며 이런 경우에 “디자인이 잘 되었다, 직관적이다, 설계가 잘 되어있다.”라고 표현합니다.
1955년에 유나이티드 항공의 비행기에는 우체통 구멍처럼 생긴 에어컨 구멍이 있었다고 해요. 그런데 문제는, 사람들이 이 에어컨 구멍을 보고 우체통으로 착각하여 편지를 적어서 이 구멍 안으로 자꾸 넣었다고 합니다. 지금이야 상상할 수 없겠지만 당시만 해도 비행기를 처음 타본 사람들도 많았을 것이고 승객들은 당시 익숙하지 않았던 여객기 환경에서 새로운 환경을 인지하는 데에 기존의 비슷한 경험을 연상시키는 형태의 디자인의 사용법을 새로운 사물에 적용하고자 하여 생긴 실수였습니다. 에어컨 구멍의 어포던스가 혼동되어서 자신의 기존 지식에 이미 포함되어있던 우체통과의 연관성을 더 우선시한 거죠. 이것을 단순히 탑승객들이 무지하다거나, 아직 비행기 탑승 경험이 없어서 라고 치부하기보다는 에어컨 구멍의 특정 쉐입이 탐승객들로 하여금 우체통의 어포던스를 갖게 만들었다고 분석해볼 수도 있겠습니다.
그렇다면 올바른 어포던스 가지게 하려면 어떻게 해야 할까요? 인지과학과 사용성 공학의 권위자 도널드 노먼(1935년 12월 25일 ~) 은 이 어포던스를 개선하기 위해 필요한 4가지를 제시했습니다. (위키백과 : https://ko.wikipedia.org/wiki/어포던스)
1. 이미지들의 선택과 허용 가능한 상호 작용 양쪽에서 일반적인 사용법을 따르라.
2. 원하는 행동을 묘사하는 단어를 사용하라. 예를 들어 마우스로 클릭 가능한 링크가 연결된 그래픽 오브젝트에 여기를 클릭이라고 표시하는 것.
3. 메타포(Metaphor, 은유)를 사용하라.
4. 인터페이스를 학습한 이후 이것을 다른 부분에 활용할 수 있도록 지속적으로 같은 컨셉 모델을 따르도록 하라.
(도널드 노먼의 위 네 가지는 현재 UI들에서도 통용되는 방법들입니다. 다음에 구체적인 방법론들을 다루는 글에서 더 살펴볼게요)
그중에 3번 항목에 메타포를 사용하라는 말이 나와있죠 — 메타포는 은유 혹은 비유라는 용어로 국어시간에 배웠던 그 의미인데요. 이 메타포가 이제부터 배우려는 스큐어모피즘과 매우 밀접한 연관이 있습니다.
#스큐어모피즘?
스큐어 모프라는 뜻은 도구를 뜻하는 그리스어 skeuos와 형태를 뜻하는 morphê의 합성어입니다. 일반적인 의미로 : 실재하는 물질의 겉모습을 흉내 낸 장식 내지는 디자인을 일컫는데요.
자동차들 중 중고가의 차들을 보면, 원목 무늬 패턴의 센터페시아를 본 적 있죠? 실제 나무가 아니더라도 어느 정도는 고급스러운 느낌을 내주기도 하죠. 요즘 많이 구매하는 이케아 가구들을 봐도 가격이 좀 저렴한 책상들을 보면, 그게 실제 원목이 아니라 나무 패턴의 시트지를 붙인 경우도 많아요. 이런 것들도 스큐어모피즘의 일종이라 할 수 있습니다. 생각하기 따라서는 눈속임이라고도 생각할 수가 있겠지만. 이미 대량생산 체제 이후 보편화된 기법이기도 합니다.
자동차, 가구 등 실존하는 물질이 아닌, 디스플레이 내부에 존재하는 GUI에서도 그것을 설계한 사람은 가능하다면 조금이라도 더 인간 친화적으로 만들어 주고 싶었어요. 그래서 도널드 노먼의 방향과 동일하게 메타포를 사용해서 사용자들에게 도움을 주려고 했습니다.
이런 이유로 사용자용 프로그램을 만들고 윈도우나 맥에 프로그램을 구동 시 우리 주변에서 보이는 조형감과 질감을 생각하면서 만들게 되었어요. 왼쪽 것은 그냥 구글에서 찾은 이미지인데 전화 걸어주는 프로그램 같죠? 일반 사무실에 놓여있는 전화기의 형태랑도 유사하게 생겼네요. 그리고 오른쪽 것은 퀵타임이라는 애플의 영상 재생 프로그램인데, 재생 버튼이랑 Pause버튼들이 실제 오프라인에서 누르면 들어갈 것 같이 생겼죠. 그리고 왼쪽 하단에 볼륨 버튼 보면 마우스로 돌리는 것이 훨씬 더 불편할 텐데도 굳이 돌려서 볼륨을 조절하는 형태로 만들어놨어요
더 극단적인 것은 이것입니다.
webpagesthatsuck.com에서 찾은 건데요 과거에 Southwest Airlines라는 항공사의 홈페이지를 가면 메인이 저렇게 되어 있었다고 합니다. 사이트 제작을 의뢰한 사장님은 저 사이트를 들어오면 손님이 직접 항공사 문을 열고 들어온 느낌을 주길 원했나 봐요. 신문도 있고 전화 기능도 있고 이력서 넣는 통도 보여요. 사실 이 정도 되면 이건 메타포라기보다는 실사 조형에 가깝겠지요 ㅎㅎ
스캇 포스탈의 스큐어모피즘도 일부 이런 부작용을 안고 있었다고 생각됩니다. 윈도우OS와 경쟁하면서 디자인적인 업그레이드를 추구하다 보니 직관성을 넘어서는 고차원적인 아름다운과 실사 같은 그래픽적 완성도를 만들어 내기 위해 치밀한 시도를 했을 것으로 보입니다. 그래서 2012년도 스큐어모피즘이 슬슬 사라지려고 할 때쯤 스큐어모피즘에 대하여 과잉친절이라 오히려 더 불편하다. 그리고 개발하기도 손이 많이 간다는 의견들이 많았어요.
#스큐어모피즘 VS 플랫 디자인
실제로 한 번 비교하면서 볼까요?
왼쪽이 스큐어모피즘 사조(?) 로 만들어진 계산기 앱이에요 버튼들 하나하나가 다 살아있고 실제 디지털 계산기랑 모양이 똑같죠? 그리고 오른쪽은 플랫 디자인계열로 디자인된 계산기예요. 자판이나 숫자의 배열은 같은데 버튼의 형태가 많이 사라진 것이 보일 거예요. 뭔가 많이 덜어낸 느낌이죠. 디자인적인 완성도는 둘 다 비슷하다고 생각하는데. 사용자들의 스타일 선호도는 차이가 있을 듯합니다.
왼쪽은 맥의 기본 캘린더 앱입니다. 자세히 보시면 가죽으로 바느질 한 흔적과, 달력을 찢어낼 때 남는 종이의 흔적까지 구현하려고 노력했어요 그리고 오른쪽이 바뀐 캘린더 앱이에요 뭔가 상대적으로 심심한 느낌이 들기도 하지만 필요한 부분만 남기려고 노력한 것처럼 보이기도 하네요
위 두 가지 예에서 보는 경우처럼 스큐어모피즘은 실제 존재하는 사물을 가능하면 비슷하게 표현하여, 디지털기기를 잘 모르는 사람들이 보더라도 그것을 쉽게 인지할 수 있게 만들어 줍니다. 반대로 플랫한 디자인은 상대적으로 그 기능을 깔끔하고 단순화하여 표현할 수 있지만 경우에 따라서는 해당 UI가 어떤 역할을 수행하는지 인지하지 못하는 경우도 발생할 수 있습니다.
사실은 이런 시도는 마이크로소프트가 가장 먼저 주도적으로 했었어요.
매트로 UI (Metro UI)라고 해서 원도우가 시도한 이 GUI는 타이포그래피와 단순한 조형으로 컨텐츠에 집중하고자 만든 스타일인데요. 너무 의식적으로 스큐어모피즘과 차별화되는 그래픽 스타일을 강조하다 보니까 사용성을 해칠 정도로 지나치게 미니멀한 결과물이 나와버렸어요. 사용자들이 그 커다란 격차를 적응하기 힘들 정도로 말이지요. 그리고 터치 인터페이스에 모든 역량을 쏟아부어서 집중한 나머지, 마우스와 키보드를 사용하는 데스크탑 사용자에게 무게중심이 실리지 않아 기존 주요 사용자 타겟들의 사용성을 해치게 되었어요.
사용자들은 자연스럽게 이 매트로 UI가 처음 탑재된 Windows 8을 외면하게 되었고, 매트로 UI가 적용된 Windows Phone도 나왔었는데 여러 가지 이유로 폭싹 망했었죠.. 그래서 지금 윈도우 10에도 여전히 메트로 UI가 있긴 한데 전면에 나서지는 않고 한 뎁스 아래에 조용히 잘 있게 되었습니다.
구글에서 만드는 OS의 UI는 플랫디자인이라고 부르지 않고 머티리얼 디자인이라고 불러요 큰 방향성에서 보자면 같은 계열이라고 생각되긴 하지만 일정 부분 다름을 추구하려고 노력하는 모습들도 보입니다. 구글의 개발자 페이지에 가 보시면 세세한 디자인 가이드들도 잘 나와 있어서 실제 제품 제작을 하실 때 많은 도움이 됩니다.
#사용자의 인식 개선 -> 스큐어모피즘 -> 플랫디자인으로 변화
지금은 아기들도 태어나면서부터 아이패드를 만지고 사용하면서 커오고 있어요. 예전에 사람들이 카메라나 LP플레이어, 전자레인지 같은 기계장치를 어려워해서 다이얼을 돌려가며 메뉴얼을 보고 배웠었다면 이미 사람들이 GUI 기반 인터페이스에 익숙해 있기 때문에 디스플레이에 표시되는 여러 기능들에 대한 어포던스가 많이 확보된 상태입니다. — 이제는 설명을 위해 계산기 앱에 플라스틱 질감을 넣거나 노트 앱에 종이 질감을 넣는 것이 오히려 거추장스럽고 일반적이지 않은 시도가 되어버린 거예요. 노트가 기존 아날로그 시대에서는 종이에 펜으로 쓰는 것이 일반적이었다면 당장 한 두 세대만 지나도, 어쩌면 저 사진에 있는 저 애기는 노트란 것은 키보드로 텍스트를 타이핑해서 넣는 것이 더 일반적이라고 생각할지도 모르겠습니다. 아까 어포던스 설명하면서 1955년에 비행기 에어컨 구멍에 편지봉투를 집어넣었던 예시 있었죠? 그걸 보면서 아까 우리는 어떻게 저럴 수 있지 하고 생각했을 텐데 그 당시 사람들은 에어컨 구멍보단 우체통 구멍이 더 익숙했던 것과 비슷하다고 느껴집니다.
이렇게 점차 GUI기기에 대한 어포던스가 확보되어가면서 형태적인 직관성보다는 상징적인, 시퀀스적인 어포던스를 확보하려는 시도가 많이 나오고 있습니다. 그리고 동시에 스큐어모피즘을 지양하려는 시도들도 당연시되고 있고요 지금의 인식으로는 스큐어모피즘은 사용자의 편의를 위해 나왔던 디자인 사조이지만 그 원래의 목적이 없어지고 나니 그냥 하나의 장식에 불과한 것이 되어버린 거죠
#장식과 범죄
아돌프 로스라는 작가가 쓴 장식과 범죄라는 책이 있습니다.
아돌프 로스는 산업혁명시대의 작가인데요 오스트리아의 건축가이기도 했어요. ‘장식과 범죄’는 근대 이전의 장식예술, 특히 아르누보 양식을 비판하면서 건축과 공예에서는 근대라는 새 시대에 맞게 장식 요소를 배제하고 간결한 단순성을 추구해야 한다고 주장을 했어요. 그리고 이 책은 당대 사회에 큰 반향을 일으키며 모더니즘의 기표(記標)가 되어 건축과 공예에 많은 영향을 미치게 되는데…… 사실 저도 아직 이 책을 읽어보지는 못했지만 그런 좋은…. 내용이 담겨있다고 합니다. 스큐어모피즘과 플랫 디자인의 구도가 이 ‘장식과 범죄’와 비슷한 구석이 있어 저도 나중에 읽어보려고 미리 내용에 넣어보았습니다.
#플랫 디자인의 요소
마지막으로, 이번에는 플랫 디자인이 가져야 하는 조건들을 잠시 살펴보겠습니다.
플랫디자인을 사용하게 되면서 디자이너들 입장에서는 스큐어모피즘을 구현하는데 들어가는 공력을 애니메이션 혹은 아름다운 색채 효과 등 다른 분야로 쏟을 수 있게 되었습니다. 그렇기 때문에 플랫디자인은 나중에 UX를 본격적으로 이야기할 때에도 연관이 많이 생기기 때문에 지금은 플랫디자인이 가져야 하는 덕목들만 짚어보고 넘어가겠습니다.
— — — — — —
인터넷 글들을 보던 중 2013년에 쓰인 에스코토스 이승은 디자이너의 글이 쉽게 정리되어있는 것 같아 내용을 그대로 가져와봤습니다. http://scotoss.tistory.com/m/153
첫째, 심플한 아이콘
플랫디자인에서 주로 차지하는 버튼 및 아이콘은 가장 단순하고 간단한 모양으로 이루어져 있다. 최소한의 아이콘으로 심플한 디자인을 연출해야 한다. 하지만 단순한 요소를 사용한다고 해서 기획이 쉬운 것은 절대 아니다. 오히려 최대한 배제된 아이콘을 활용해서 디자인을 구사하는 것이 더 어렵다.
둘째, 배제된 효과
플랫디자인은 아이콘에 화려한 디자인 효과를 뺀 콘셉트로 되어있다. 그래서 이미지 프레임이나 아이콘 등 모든 요소에 그림자, 입체감, 그라데이션 등 깊이감을 나타내는 디자인 효과를 쓰지 않는다. 이 점이 현실감 있어 보이게 하는 3D처럼 보이는 스큐모픽디자인과의 큰 차이점이라고 생각한다.
셋째, 타이포그래피
심플함이 특징인 플랫디자인에서 타이포그래피는 매우 중요한 위치를 차지한다.
넷째, 단순한 컬러
색상은 플랫디자인에서 가장 중요한 요소라고 할 수 있다. 다른 디자인과 비교했을 때 2~3가지의 색을 활용해 단순함을 줄 수도 있지만 5~6가지 색상 등을 활용해 다양한 색을 연출할 수도 있다.
다섯째, 미니멀리즘
플랫디자인의 본질이 미니멀리즘과 부합한다고 볼 수 있다. 플랫디자인은 본질적으로 간단하고 심플할 때 더 잘 표현되기 때문이다.
덧, 지금은 이 당시보다 플랫 디자인이 많이 개량되어 조금은 다른 행태를 보이지만, 플랫디자인의 최소한의 요건은 갖춘 내용이라고 생각합니다. 지금은 플랫디자인 자체가 고정적이기보다는 다양성을 추구하는 입장에서 더 확작되서 표현되고 있긴 합니다.
— — — — — —
오른쪽의 그림은 추상화로 유명한 몬드리안의 나무 연작입니다. 처음에는 구체적인 형상을 띄다가 점차 추상화되어가는 과정을 보여주고 있죠. 추상미술을 가지고 기능을 논할 수는 없지만 만약 플랫 디자인도 일정 부문 추상화가 된다면 어느 정도선 까지가 추상화의 마지노선일까 궁금해지기도 했습니다.
#마무리
이 정도 살펴보면 애플이 스큐어모피즘을 버리고, 윈도우가 메트로 UI를 만들고 구글이 머티리얼 디자인을 만들고 하는 변화들이 단순한 시각적인, 디자인 트렌드가 바뀌어서 발생하는 변화들은 아닌 것으로 보입니다. 하지만 그렇다고 의도적으로 스큐어모피즘을 배제할 필요 또한 없다고 생각합니다. 스큐어모피즘을 사용함으로써 사용자로 하여금 낯선 인터페이스에 친숙성을 느끼게 하여 해당 기능에 쉽게 접근할 수 있게 하는 부분 역시 사실이기 때문이기 때문입니다. 예전에 했던 무조건 적인 스큐어모피즘의 사용이 문제지 스큐어모피즘 자체가 효과가 없는 건 아니니까요.
모든 프로젝트는 유니크하고 각자 자기 프로젝트마다 갖는 고유의 특성이 있습니다. 물론 전체를 아우르는 접근도 필요하지만 단일한 그래픽 스타일보다는 각 상황에 맞는 그래픽 스타일을 사용하는 게 유효할 때도 있을 것입니다. 그래픽 스타일을 어떤 것으로 선택할 것인지 논의하기 이전에 서비스 사용의 흐름을 잘 설계하여 자연스러운 맥락을 만드는 것이 우선적으로 정립되어야 합니다. 이러한 흐름을 자연스러운 맥락을 통해 사용자의 행동을 이끌어내는 것이 그래픽 스타일을 통해 어포던스를 이끌어내는 것보다 효과적이며 포괄적인 접근이라고 생각합니다.
이러한 고민들은 자연스럽게 디자인 스타일이 아닌 사용자 경험 UX 쪽으로의 관심을 유도하게 되지요.
그래서 다음번에는 사용자 경험을 중심으로 논의를 더 이어나가 보겠습니다.
#One more thing
추가로 좋은 자료가 있어 이 영상으로 마무리할까 합니다. ㅎㅎ 스큐어모피즘이나 플랫디자인 이야기는 아닌데 마이크로소프트에서 작년 5월에 플루언트 디자인이라고 해서 컨셉을 또 하나 발표했어요. 영상 자체로도 잘 만들었고 언뜻언뜻 보이는 UI 가 괜찮아 보여서 관심이 가더라고요. 스큐어모피즘도 아니고 플랫디자인도 아닌 3D 인터페이스를 염두에 둔 듯한 UI 요소들이 재미있어 보여서 마무리로 보시면 좋을 듯합니다.
https://www.youtube.com/watch?v=vcBGj4R7Fo0
