스큐어모피즘과 플랫디자인

지금 스마트폰에 보이는 GUI들은 어떻게, 왜 이런 스타일을 가지게 됐는지 살펴보자

이번에는 GUI의 그래픽적 방향에 대해 살펴보려고 합니다. 지금 스마트폰에 보이는 GUI들은 어떻게, 왜 이런 스타일을 가지게 됐는지 알아보겠습니다.

Unsplash(Photo by Kerde Severin)

01. UI 이해하기 – 인터페이스란 무엇인가
02. UI 이해하기 – 인터페이스의 성질
03. GUI 이해하기 – GUI의 탄생과 변천사
04. GUI 이해하기 – 스큐어모피즘과 플랫디자인
05. Interaction 이해하기 – 상호작용의 기본, 소통
06. U.X. 이해하기 – 사용자 경험의 정의
07. U.X. 이해하기 – 경험을 디자인한다는 것


GUI에 관심이 있으셨던 분들은 스큐어모피즘, 플랫디자인 혹은 머테리얼 디자인이라는 용어를 들어보신 적 있을 겁니다. 애플의 아이폰에 들어가는 OS(Operation System)는 대략 1년 단위로 버전업을 진행하는데요. 그중 2013년 6월 10일에 발표한 업데이트 내용에는 기존보다 더 극적인 변화가 있었습니다.

iOS 기존 버전(iOS 6)에서 iOS 7버전으로 업데이트를 진행하면서 전체적인 디자인의 스타일이 다 바뀌게 됐습니다. 기존 모양들은 마치 실물을 축소해서 집어넣은 것처럼 사실적인 묘사와 형태로 아이콘이 표현돼 있는데 반해, 새로운 디자인을 보면 상대적으로 평평하고 추상화된 형태들을 보이는데요. (현재 아이폰에서 보이는 모양들이지요.) 사실적인 질감이 없어지고 평평한 모양에 색상이 많이 강조되는 쪽으로 업데이트가 진행됐습니다.

이 업데이트에 대해서 사람들의 초기 반응은 많이 안좋았어요. 그래서 이것저것 패러디하는 짤도 많이 나오고 비판하는 글도 많이 올라왔었죠.

당시 사용자들이 받아들이기에 색감이 너무 화려했고 기존에 유려하게 묘사되던 질감을 특정한 예고 없이 한 순간에 다 없애버려서 상대적으로 지나치게 화려한 색상, 과감한 형태에 대해 적응을 할 시간이 필요했어요.

그렇다면 왜 바꾸었을까요? 무엇을 위해서 바꿔야 했을까요? 단지 그냥 새로운 디자인을 적용해서 새로운 느낌을 주고 싶었을까요? 사용자들의 반응을 어느 정도는 예상했을 법도 한데, 그런데도 이렇게 극단적인 변화를 준 이유는 무엇이었을까요?

전 세계인들이 사용하는 제품인 만큼 위와 같은 큰 변화는 파장이 클 줄 알았을 테고 그만큼 결정에도 신중했을 겁니다. 누군가는 조롱할 것이고 받아들이지 못하는 사람들도 있을 것이라 생각했겠지요. 위에서 보셨던 것처럼 실제로 사람들은 상당히 격할 정도로 조롱해댔고, 애플은 그런데도 당연히 이전의 디자인으로 되돌리지 않았습니다.

그렇다면 애플은 왜 이렇게 한순간에 GUI의 방향을 180도 바꿔 버렸을까요? 를 참고하면 스캇 포스탈과 조나단 아이브의 회사 내의 정치싸움에 관한 이야기도 전해집니다만, 우선 이러한 일들은 배제하고 그 변화의 이유와 과정을 디자인 관점 그리고 사용성의 관점에서 접근해보려 합니다.


어포던스

UI 디자인을 하면서 가끔 접하는 단어 중 ‘어포던스’라는 용어가 있습니다. 제임스 깁슨이라는 사람이 1977년에 처음 사용한 단어인데요. 사전적인 의미로 해석하자면 ‘행동 유도성’이라고 풀이할 수 있습니다.

어포던스 (Affordance)는 어떤 행동을 유도한다는 뜻으로 행동 유도성이라고도 한다. 뿌리말 어포드(Afford)는 원래 ‘~할 여유가 있다, ~하여도 된다, ~을 공급하다, 산출하다’라는 뜻을 가지고 있으나 보통 사전에 없는 뜻으로 인간 컴퓨터 상호작용, 인지 심리학, 산업 디자인, 인터렉션 디자인, 환경 심리학 그리고 인공지능학 분야에서는 ‘서로 다른 개념을 연결하는 것’이란 뜻으로 쓰이기도 한다. 다시 말해, 물건(Object)과 생물(Organism, 주로 사람) 사이의 특정한 관계에 따라서 제시되는 것이 가능한 사용(Uses), 동작(Actions), 기능(Functions)의 연계 가능성을 의미한다.
[출처. 위키백과]

어떤 물건, 서비스, 시스템을 만들기 위해 디자이너, 설계자, 엔지니어들은 사용자가 물건을 직관적으로 보기만 해도 어떻게 사용할지 짐작해 사용하게 끔 하는 것이 편리한 디자인이라고 여깁니다. 이때 어포던스가 잘 돼 있다면 디자이너의 의도대로, 쓰임새에 맞게 제시된 사용법으로 이용하게 됩니다. 그리고 이런 경우에 ‘디자인이 잘 됐다, 직관적이다, 설계가 잘 돼 있다’라고 표현합니다.

출처. Pinterest

1955년에 유나이티드 항공의 비행기에는 우체통 구멍처럼 생긴 에어컨 구멍이 있었다고 해요. 그런데 문제는, 사람들이 이 에어컨 구멍을 보고 우체통으로 착각해 편지를 적어서 이 구멍 안으로 자꾸 넣었다고 합니다. 지금이야 상상 할 수 없겠지만 당시만 해도 비행기를 처음 타 본 사람들도 많았을 것이고 승객들은 당시 익숙하지 않았던 여객기라는 새로운 환경을 인지하는 데 기존의 비슷한 경험을 연상시켜 새로운 사물에 적용해서 생긴 실수였습니다. 에어컨 구멍의 어포던스가 혼동돼서 자신의 기존 지식에 이미 포함돼있던 우체통과의 연관성을 더 우선시 한 거죠. 이것을 단순히 탑승객들이 무지하다거나, 아직 비행기 탑승 경험이 없어서라고 치부하기보다는 에어컨 구멍의 특정 모양이 탑승객들로 하여금 우체통의 어포던스를 갖게 했다고 분석해볼 수 있겠습니다.

그렇다면 올바른 어포던스를 가지게 하려면 어떻게 해야 할까요? 인지과학과 사용성 공학의 권위자 도널드 노먼(1935년 12월 25일 ~)은 이 어포던스를 개선하기 위해 필요한 4가지를 제시했습니다.

① 이미지들의 선택과 허용 가능한 상호 작용 양쪽에서 일반적인 사용법을 따르라.
② 원하는 행동을 묘사하는 단어를 사용하라. 예를 들어 마우스로 클릭 가능한 링크가 연결된 그래픽 오브젝트에 여기를 클릭이라고 표시하는 것.
③ 메타포(Metaphor, 은유)를 사용하라.
④ 인터페이스를 학습한 이후 이것을 다른 부분에 활용할 수 있도록 지속해서 같은 컨셉 모델을 따르도록 하라.
[출처. 위키백과]

도널드 노먼의 위 4가지는 현재 UI에서도 통용되는 방법들입니다. (다음에 구체적인 방법론들을 다루는 글에서 더 살펴볼게요) 그 중에 ③번 항목에 메타포를 사용하라는 말이 나와있죠. – 메타포는 은유 혹은 비유라는 용어로 국어시간에 배웠던 의미인데요. 이 메타포가 이제부터 배우려는 스큐어모피즘과 매우 밀접한 연관이 있습니다.


스큐어모피즘은?

스큐어모프라는 뜻은 도구를 뜻하는 그리스어 skeuos와 형태를 뜻하는 morpê의 합성어입니다. 일반적인 의미로 실재하는 물질의 겉모습을 흉내낸 장식 내지는 디자인을 일컫는데요.

자동차 중 중고가의 차들을 보면, 원목 무늬 패턴의 센터페시아를 본 적 있죠? 실제 나무가 아니더라도 어느 정도는 고급스러운 느낌을 주기도 하죠. 요즘 많이 구매하는 이케아 가구들을 봐도 가격이 좀 저렴한 책상들을 보면, 그게 실제 원목이 아니라 나무패턴에 시트지를 붙인 경우가 많아요. 이런 것들도 스큐어모피즘의 일종이라 할 수 있습니다. 생각하기 따라서는 눈속임이라고도 생각할 수가 있겠지만, 이미 대량생산 체제 이후 보편화한 기법이기도 합니다.

자동차, 가구 등 실존하는 물질이 아닌, 디스플레이 내부에 존재하는 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 기반 인터페이스에 익숙해져 있기 때문에 디스플레이에 표시된 여러 기능들에 대한 어포던스가 많이 확보된 상태입니다. – 이제 설명을 위해 계산기 앱에 플라스틱 질감을 넣거나 노트 앱에 종이 질감을 넣는 것이 거추장스럽고 일반적이지 않은 시도가 돼 버린 거예요. 기존 아날로그 시대에는 종이에 펜으로 쓰는 것이 일반적이었다면 당장 한두 세대만 지나도, 어쩌면 저 사진에 있는 저 아기에게 노트란 것은 키보드로 텍스트를 타이핑해서 넣는 게 더 일반적일지도 몰라요. 아까 어포던스 설명하면서 비행기의 에어컨 구멍에 편지 봉투를 집어넣었던 예시 있었죠? 그걸 보면서 우리는 어떻게 저럴 수 있지 하고 생각했을 텐데 그 당시 사람들은 에어컨 구멍보단 우체통 구멍이 더 익숙했던 거랑 비슷한 거죠.

이렇게 점차 GUI 기기에 대한 어포던스가 확보돼 가면서 형태적인 직관성보다는 상징적인, 시퀀스적인 어포던스를 확보하려는 시도가 많이 나오고 있습니다. 그리고 동시에 스큐어모피즘을 지양하려는 시도들도 당연시되고 있고요. 지금의 인식으로는 스큐어모피즘은 사용자의 편의를 위해 나왔던 디자인 사조이지만 그 원래의 목적이 없어지고 나니 그냥 하나의 장식에 불과한 것이 돼 버렸죠.


장식과 범죄

아돌프 로스라는 작가가 쓴 ‘장식과 범죄’라는 책이 있습니다.

Ornament and Crime, Adolf Loos

아돌프 로스는 산업혁명시대의 작가인데요. 오스트리아의 건축가이기도 했어요. ‘장식과 범죄’는 근대 이전의 장식예술, 특히 아르누보 양식을 비판하면서 건축과 공예에서는 근대라는 새 시대에 맞게 장식 요소를 배제하고 간결한 단순성을 추구해야 한다고 주장을 했어요. 그리고 이 책은 당대 사회에 큰 반향을 일으키며 모더니즘의 기표(記標)가 되어 건축과 공예에 많은 영향을 미치게 되는데…. 사실 저도 아직 이 책을 읽어보지 못했지만 그런 좋은 내용이 담겨있다고 합니다. 스큐어모피즘과 플랫디자인의 구도가 이 ‘장식과 범죄’에 비슷한 구석이 있어 저도 나중에 읽어보려고 미리 내용에 넣어봤습니다.


플랫디자인의 요소

마지막으로, 이번에는 플랫디자인이 가져야 하는 조건들을 살펴보겠습니다. 플랫디자인을 사용하게 되면서 디자이너들 입장에서는 스큐어모피즘을 구현하는데 들어가는 공력을 애니메이션 혹은 아름다운 색채효과 등 다른 분야로 쏟을 수 있게 됐습니다. 그렇기 때문에 플랫디자인은 나중에 UX를 본격적으로 이야기할 때도 연관이 많이 생기기 때문에 지금은 플랫디자인이 가져야 하는 덕목들만 짚어보고 넘어가겠습니다.

인터넷 글들을 보던 중 2013년에 쓰여진 에스코토스 이승은 디자이너의 글이 쉽게 정리돼 있어 내용을 그대로 가져와 봤습니다

첫째, 심플한 아이콘
플랫디자인에서 주로 차지하는 버튼 및 아이콘은 가장 단순하고 간단한 모양으로 이루어져 있다. 최소한의 아이콘으로 심플한 디자인을 연출해야 한다. 하지만 단순한 요소를 사용한다고 해서 기획이 쉬운 것은 절대 아니다. 오히려 최대한 배제된 아이콘을 활용해서 디자인을 구사하는 것이 더 어렵다.

둘째, 배제된 효과
플랫디자인은 아이콘에 화려한 디자인 효과를 뺀 콘셉트로 돼 있다. 그래서 이미지 프레임이나 아이콘 등 모든 요소에 그림자, 입체감, 그러데이션 등 깊이감을 나타내는 디자인 효과를 쓰지 않는다. 이 점이 현실감 있어 보이게 하는 3D처럼 보이는 스큐모픽디자인과의 큰 차이점이라고 생각한다.

셋째, 타이포그래피
심플함이 특징인 플랫디자인에서 타이포그래피는 매우 중요한 위치를 차지한다.

넷째, 단순한 컬러
색상은 플랫디자인에서 가장 중요한 요소라고 할 수 있다. 다른 디자인과 비교했을 때 2~3가지의 색을 활용해 단순함을 줄 수도 있지만 5~6가지 색상 등을 활용해 다양한 색을 연출할 수도 있다.

다섯째, 미니멀리즘
플랫디자인의 본질이 미니멀리즘과 부합한다고 볼 수 있다. 플랫디자인은 본질적으로 간단하고 심플할 때 더 잘 표현되기 때문이다.
[출처. scotoss.tistory.com/m/153]

지금은 이 당시보다 플랫디자인이 많이 개량돼 조금은 다른 행태를 보이지만, 플랫디자인의 최소한의 요건은 갖춘 내용이라고 생각합니다. 지금은 플랫디자인 자체가 고정적이기보다는 다양성을 추구하는 입장에서 더 확장돼서 표현되고 있긴 합니다.

이건 추상화로 유명한 몬드리안의 나무 연작입니다. 처음에는 구체적인 형상을 보이다가 점차 추상화되어가는 과정을 보여주고 있죠. 추상미술을 가지고 기능을 논할 수 없지만 만약 플랫디자인도 일정 부문 추상화가 된다면 어느 정도까지가 추상화의 마지노선일지 궁금해지기도 했습니다.


마무리

이 정도 살펴보면 애플이 스큐어모피즘을 버리고, 윈도우가 메트로 UI를 만들고 구글이 머테리얼 디자인을 만들려고 하는 변화들이 단순히 시각적인, 디자인 트렌드가 바뀌어서 발생하는 변화들은 아닌 것으로 보입니다. 하지만 그렇다고 의도적으로 스큐어모피즘을 배제할 필요 또한 없다고 생각합니다. 스큐어모피즘을 사용함으로써 사용자로 하여금 낯선 인터페이스에 친숙성을 느끼게 해 해당 기능에 쉽게 접근할 수 있게 하는 부분 역시 사실이기 때문입니다. 예전에 했던 무조건적인 스큐어모피즘의 사용이 문제지 스큐어모피즘 자체가 효과가 없는 건 아니니까요.

모든 프로젝트는 유니크하고 각자 자기 프로젝트마다 갖는 고유의 특성이 있습니다. 물론 전체를 아우르는 접근도 필요하지만 단일한 그래픽 스타일보다는 각 상황에 맞는 그래픽 스타일을 사용하는 게 유효할 때도 있습니다. 그래픽 스타일을 어떤 것으로 선택할 것인지 논의하기 이전에 서비스 사용의 흐름을 잘 설계해 자연스러운 맥락을 만드는 것이 우선적으로 정립돼야 합니다. 이러한 흐름을 자연스러운 맥락을 통해 사용자의 행동을 이끌어내는 것이 그래픽 스타일을 통해 어포던스를 이끌어내는 것보다 효과적이며 포괄적인 접근이라고 생각합니다.

이러한 고민들은 자연스럽게 디자인 스타일이 아닌 사용자 경험 UX 쪽으로의 관심을 유도하게 되지요. 그래서 다음번에는 사용자 경험을 중심으로 논의를 더 해보겠습니다.

Credit
Editor
저자조성욱 (루트임팩트 SPX팀 UX manager)
    © DIGITAL iNSIGHT 디지털 인사이트. 무단전재 및 재배포 금지

    뉴스콘텐츠는 저작권법 제7조 규정된 단서조항을 제외한 저작물로서 저작권법의 보호대상입니다. 본 기사를 개인블로그 및 홈페이지, 카페 등에 게재(링크)를 원하시는 분은 반드시 기사의 출처(로고)를 붙여주시기 바랍니다. 영리를 목적으로 하지 않더라도 출처 없이 본 기사를 재편집해 올린 해당 미디어에 대해서는 합법적인 절차(지적재산권법)에 따라 그 책임을 묻게 되며, 이에 따른 불이익은 책임지지 않습니다.

    Related Posts