터치 인터페이스 GUI의 변화
스큐어모피즘에서 미니멀리즘으로
사물과 사물 또는 사물과 사람 사이에 상호 소통을 하는 접점을 우리는 인터페이스라고 부릅니다.
스마트폰에 익숙한 우리는 인터페이스 하면 이제 쉽게 스마트폰 화면 안의 GUI Graphic User Interface를 떠올리지만, 왜 GUI는 현재와 같은 형태와 디자인 스타일을 가지고 있을까요.
보통 UI 설계라 하면 과학적 근거에 따른 컴포넌트의 배치와 레이아웃 고려 등에 대해 떠올리지만 GUI 디자인의 영역은 스타일링이라고 많이 생각을 합니다.
좀 더 감성적이고 미적인 감각을 많이 요구하는 분야이지만 그럼에도 불구하고 GUI 디자인 또한 그 바탕에는 과학적이고 인지적인 이유가 있습니다.
컴퓨터가 발명되면서 우리는 이 전자 신호로 일을 하는 기계를 다루기 위한 인터페이스가 필요하게 되었습니다.
그래서 초기에는 천공 카드 또는 펀치 카드라고 하는 각기 다른 순서로 구멍이 뚫려있는 종이 카드를 고안하여 이를 컴퓨터에 삽입하는 방식으로 컴퓨터와 인터랙팅을 하였습니다.
그리고 한 단계 발전하여 CLI_Command-Line Interface를 통해 명령을 내리는 방식으로 컴퓨터를 다루게 되었습니다.
image :: erika wittlieb
하지만 이러한 인터페이스들은 사용하기가 무척 어려웠는데, 상호작용하는 방식(인터페이스)과 이를 통해 이루고자 하는 결과 또는 동작 간에 연관성이 무척 적기 때문입니다.
예를 들어 빨간 동그라미를 생각하고 컴퓨터에 입력을 하기 위해서는 이를 컴퓨터의 용어로 번역한 뒤 글자로 입력을 해야 하기 (예를 들어 #FF0000, width:10, height:10, corner-radius:5 ...) 때문입니다.
이것을 한 마디로 '직관적이지 않다'라고 하기도 합니다.
<GUI Graphic User Interface를 도입한 최초의 컴퓨터 중 하나인 Apple Lisa>
이러한 문제들을 해결하며 나타난 것이 GUI입니다.
<초기 애플의 마우스와 Lisa의 GUI>
마우스를 이용하여 시각적인 가상의 인터페이스를 조작할 수 있게 해주는 GUI는 컴퓨터의 사용을 훨씬 쉽게 만들어주었습니다.
<PC OS Interface의 진화>
그 이후 PC의 UI는 시간이 지나면서 점점 진화를 해왔고,
<아이폰>
2007년 6월 29일 지금 우리가 쓰고 있는 터치 인터페이스의 기본을 만든 아이폰이 세상에 나옵니다.
이때 아이폰의 GUI 디자인 스타일을 스큐어모피즘이라고 부릅니다.
스큐어모피즘 Skeuomorphism이란 그리스어로 skeuos는 도구, morphe는 형태라는 뜻으로 '원래 도구의 형태를 따라가는 양식'으로 사용되는 단어입니다.
<나뭇잎 용기와 빗살무늬 토기>
내용 출처 :: Manby, T.G. (1995).Unbaked Urns of Rudely Shape: essays on British and Irish pottery for IanLongworth. Oxford: Oxbow Books and others. pp. 81–84.
스큐어모피즘은 단순히 그래픽 디자인에서만 나타나는 디자인 양식이 아니라 그 역사가 아주 옛날부터 시작됩니다.
원시인들이 흙 토기를 만들 때, 그 보다 먼저 사용하던 나뭇잎 용기의 무늬를 흉내 내어 토기의 겉에 새긴 것이 빗살무늬 토기가 되었습니다.
<도리아 양식의 목조 건물과 석조 건물>
목조 건물의 대들보 구조 때문에 생겼던 형태적 반복이 대들보를 필요로 하지 않는 석조 건물을 지을 때도 그대로 적용되는 등 건축 또한 스큐어모피즘 양식을 많이 찾아볼 수 있는 분야라고 합니다.
<세라믹과 플라스틱 그릇>
그리고 우리 주변에서 쉽게 볼 수 있는 플라스틱 접시 또한 어떠한 형태로든 쉽게 성형이 가능한 재료의 특징을 가지고 있음에도 불구하고 도자기 접시의 제작 과정에 영향을 받은 형태적 특징을 그대로 담고 있습니다.
이러한 사례들의 공통점은, 같은 사물의 재료가 변하였는데도 재료가 변하기 전 그 사물이 가졌던 형태적 물리적 특징을 실용적 역할이 없음에도 불구하고 일부 유지하였다는 점입니다.
이렇게 특징을 유지하면 어떤 효과가 있느냐, 실용적 역할은 없지만 자연스럽게 '이전의 재료로 만들어졌던 사물과 동일한 사물이다'라는 메시지 띄게 되어 이 사물이 어떻게 사용해야 하는 사물인지 정체성이 무엇인지에 대해 처음부터 다시 생각하지 않아도 되게 해주는 인지적 도움을 주게 됩니다.
그리고 익숙한 형태에 대한 심리적 안정감 또한 줄 수 있습니다.
PC의 마우스를 통한 커서 인터페이스만을 사용하던 우리에게 아이폰의 iOS는 우리가 처음 접해보는 종류의 인터페이스였습니다.
지금이야 이미 익숙해져 쉽게 사용하지만, 처음 아이폰을 세상에 내놓아야 했던 애플은 이 새로운 인터페이스에 사람들이 쉽게 적응하도록 하는 것이 큰 과제였을 것입니다.
<아이폰의 밀어서 잠금해제>
그런 점에서 리얼한 표현방식을 가진 스큐어모피즘 디자인 스타일은 형태를 통해 "이렇게 생긴 물건을 쓸 때와 똑같은 방법으로 쓰는 거야"라는 메시지를 주기 때문에 사용자들에게 자연스럽게 사용법을 유도해줄 수 있었습니다.
이런 특징은 행동유도성 Affordance라고 합니다.
그래서 버튼은 정말로 버튼과 유사하게 표현하여 사람들로 하여금 깊이 생각하지 않아도 "누르고 싶다"라고 느끼게 하는 전략을 첫 iOS는 취했던 것입니다.
그리고 조작 방식을 넘어 서비스의 용도 자체에 대한 힌트를 주는 경우도 있었는데, 애플의 초기 노트앱은 실제 노트 종이의 노란 색깔, 가로로 나있는 줄과 특징적인 왼쪽의 세로줄, 상단의 가죽 질감 등을 사실적으로 표현해 내었습니다.
이를 통해 사람들은 자연스럽게 '아, 이 어플리케이션은 내가 저 노란색 노트를 사용할 때와 동일한 용도로 사용하면 되겠구나'라는 메시지로 받아들이게 됩니다.
그럼 PC도 사람들이 처음 사용하는 인터페이스였는데 스큐어모피즘이 없었느냐?
여담이지만, 컴퓨터 GUI에서도 스큐어모피즘은 있었습니다.
하지만 스마트폰에서의 스큐어모피즘이 유독 빛을 발했는데 그 이유는 인터랙션 방식의 차이, 즉 PC는 마우스를 통해 사용하기 때문에 실제 사물을 PC 화면상에 구현해 놓더라도 실제처럼 다룰 수가 없는 것이죠.
IBM의 RealThings Series 전화기를 예로 들었을 때, 이 가상의 전화기는 진짜 전화기와 동작하는 방식이 같았습니다.
마우스 커서를 이동시켜서 번호를 누르는 방식으로 사용해야 했는데, 이 부분이 아주 불편했었다고 합니다.
실제와 같은 방식으로 구현된 것 같지만, 조작 방식의 차이 때문에 그렇지 못하며 오히려 불편 해 진 것이죠.
애플의 예전 퀵타임 플레이어의 볼륨 조절기의 경우도, 실제로 위와 같이 생긴 볼륨 컨트롤러를 손가락으로 밀어가며 조작할 때는 사용하기 좋았겠지만, 저렇게 노출 면적이 작은 노브를 마우스로 드래그하여 조절하는 건 고통스러운 일이었다고 합니다.
반면에 스마트폰은 직접 손으로 조작하기 때문에 스큐어모피즘으로 표현해낸 요소들이 더 빛을 발합니다.
이와 같이 스큐어모피즘은 단순히 미적 즐거움만을 추구하여 선택된 디자인 스타일이 아니었고, 형태적 특징을 통해 기능에 대한 어포던스를 줄 수 있는 점에서 의미가 있는 표현 방식이었습니다.
그런데 몇 년 전 미니멀리즘 디자인 스타일이 나타나면서 스큐어모피즘은 메인 디자인 스타일에서 물러납니다.
왜 그렇게 좋은 특성을 가진 스큐어모피즘을 버리고 디자인 스타일은 미니멀리즘이 되어버린 걸까요.
단순히 유행의 변화일까요?
그 부분에 대해 이야기하기 위해서는 우리 뇌에 대해 잠시 알아보겠습니다.
우리 뇌는 크게 후뇌,중뇌,전뇌의 세 부분으로 나뉘어 있습니다.
첫 번째 후뇌는 뇌의 가장 밑바닥에 있는 뇌로 인류 진화의 과정에서 가장 먼저 형성되었으며 호흡∙심장박동∙혈압 조절 등과 같은 생명 유지에 필요한 기능과 인간의 본능적인 부분을 담당합니다.
예를 들어 위험한 상황이 닥쳤을 때 깊은 생각 없이도 빠르게 “도망쳐”라는 명령을 내리는 것이 바로 이 부분입니다.
그래서 이를 ‘생명의 뇌’ 또는 ‘파충류 뇌’라고 부릅니다.
두 번째 부위는 후뇌 바로 위에 있는 중뇌 즉 중간 뇌입니다.
중뇌는 감정 기능을 담당하고 있고, 위험한 상황에서 도망치라는 명령을 내리는 것이 파충류의 뇌라면 그 상황에 두려움의 감정을 느끼게 하는 것이 바로 이 중뇌입니다.
감정표현은 파충류에게는 발달하지 않은 포유류만이 가진 고유의 행동이기 때문에 ‘감정의 뇌’ 또는‘포유류 뇌’라고 부릅니다.
그리고 세 번째 부위가 바로 인간의 뇌 대뇌 피질부가 있는 전뇌로 가장 최근에 진화했으며 이성적 판단을 내리는 뇌로 인간만이 가진 뇌이기 때문에 ‘인간의 뇌’ 또는 ‘이성의 뇌’로 불립니다.
우리는 인간이기 때문에 인간의 뇌인 전뇌를 가장 많이 사용할 것 같지만, 사실 우리는 파충류의 뇌, 후뇌를 가장 많이 사용합니다.
파충류의 특징이 에너지 효율이 아주 높다는 점인데요, 재미있게도 후뇌도 비슷한 특성이 있습니다.
바로 에너지를 아끼기 위해 생각을 최대한 하지 않게 설계되어있다는 점입니다.
뇌는 일반적으로 우리 몸의 에너지의 20%를 사용한다고 합니다.
우리 몸에서 뇌가 차지하는 크기를 생각해봤을 때 굉장히 에너지를 많이 쓰는 부위라고 볼 수 있습니다.
안 그래도 이렇게 에너지를 많이 사용하는 뇌가 우리 주변에서 일어나는 엄청난 양의 일들(생각해보면 길거리에만 나가보아도 걸어 다니는 수많은 사람들, 그들이 하고 있는 행동, 표정, 하늘의 변화, 흔들리는 잎사귀 등 어마어마한 양의 일들이 일어납니다)에 대해 일일이 관찰하고 생각한다면 과열되고 말 것입니다.
그래서 우리 뇌는 익숙한 정보는 건너뛰고, 대체로 새로운 정보 또는 중요한 정보만을 처리하는 행동 양식을 보입니다.
뇌가 익숙한 정보를 건너뛰는 예로 우리가 자전거 타는 법을 배우는 것을 생각해보면, 처음 자전거를 탔을 때 우리는 모든 행동 하나하나에 신경을 쏟습니다.
어느 정도 간격으로 페달을 밟아야 안정적인 속도가 나는지, 핸들을 어떻게 조작해야 넘어지지 않을지, 또 무엇에 신경을 써야 하는지 전혀 정보가 없기 때문에 뇌는 들어오는 모든 정보를 최대한 수집하여 처리합니다.
하지만 일단 자전거 타는 것이 익숙해지면 그 전처럼 모든 것에 대해 생각하지 않습니다.
빠르게 갈지 천천히 갈지만 생각하면 되죠.
나머지 것들은 몸에 익어 더 이상 깊이 생각하지 않고도 컨트롤할 수 있게 된 것입니다.
뭔가에 익숙해진다는 것은 뇌가 생각을 생략한 결과라고 볼 수 있습니다.
스큐어모피즘은 처음 터치 인터페이스를 사용하는 사용자들이 터치 인터페이스를 사용하는 방법에 대한 팁을 주는 역할을 했습니다.
형태적 특징을 통해 기능적 힌트를 준 것이죠.
자전거를 타는 것에 비유하면 보조 바퀴를 달아준 것이라고 할 수도 있습니다.
하지만 자전거 타는 것에 익숙해진 아이처럼 우리는 터치 인터페이스에 익숙해졌고 더 이상 보조바퀴가 필요하지 않게 되었을 뿐 아니라 오히려 빨리 달리는데 방해가 되기 시작했습니다.
그리고 뇌의 특성상 사람은 기본형에 가까울수록 정보를 빠르게 처리합니다.
한마디로 말해 형태와 질감이 단순할수록 더 빠르게 알아보고 이해하는 것이죠.
스큐어모피즘은 굉장히 그러데이션도 많고 입체적이기 때문에 우리의 정보처리 능력을 많이 잡아먹습니다.
그런 점에서 이제 터치 인터페이스에 어느 정도 익숙해진 사용자들에게 울퉁불퉁하고 시선을 많이 끄는 스큐어모피즘 표현양식은 사용자들이 콘텐츠에 집중하는 것을 방해하게 된 것입니다.
그리고 스큐어모피즘은 요소들 각각의 형태적 특성이 너무 강해 다른 요소들과의 디자인적 통일감을 주기가 어려운 점, 제작에 너무 공이 많이 든다는 점 등의 고질적 문제들 또한 가지고 있었습니다.
그래서 터치 인터페이스 디자인 스타일은 장식적 요소를 지양하고 최소한의 표현만을 사용하는 미니멀리즘 스타일로 변화를 맞게 됩니다.
그런데 스큐어모피즘 디자인이 미니멀리즘으로 변화하는 시기에 사용자들이 인터페이스에 익숙해짐 못지않게 인터페이스의 변화에 중요한 요소가 있었는데 바로 디바이스 성능의 발전입니다.
성능이 발전하면서 이제는 전의 디바이스 성능으로는 구현하기 어려웠던 Motion이라는 요소가 인터페이스에 적극 적용되기 시작합니다.
이러한 시점에 2014년 구글은 material 디자인 스타일을 발표합니다.
material 디자인은 사물을 그대로 리얼한 방식으로 그리는 것에서 발전하여, 리얼한 '속성'을 인터페이스에 부여하는 새로운 디자인 양식을 만들어냅니다.
예를 들면 Z 축 개념을 도입하면서 UI 상에 공간감을 부여한 것을 볼 수 있습니다.
Z 축을 도입한다는 것은 UI 요소들에게 높이값을 부여하여 가상의 입체적 공간을 구성한다는 의미가 있습니다
그래서 쉐도우를 위와 같이 요소의 높이를 표현하는 데 사용하게 됩니다.
내비게이션 바, 드로워 메뉴, 플로팅 버튼, 카드 레이어 등 각 UI 컴포넌트들의 높이 영역을 미리 정해놓아 UI 공간에 규칙을 만들었습니다.
그리고 Material 디자인 가이드는 실제 물리적 규칙을 심하게 거스르는 움직임을 제한하는 내용도 담고 있습니다.
이러한 움직임들은 현실 세상에서는 일어날 수 없는 현상이기 때문에 우리에게 이질감을 주며 거부감을 주고 불필요한 주목을 하게 만들기 때문입니다.
Material 디자인 가이드는 이렇게 규칙성을 가지고 현실 세계와 같은 움직임, 물질적 특성을 재현하여 인터페이스 사용에 이질감과 그로 인한 거부감을 최소화하여 사용자들이 인터페이스를 쾌적하게 사용하게 하기 위해 제작되었다고 볼 수 있을 것 같습니다.
iOS Design Guideline
https://developer.apple.com/ios/human-interface-guidelines/overview/design-principles/
Material Design Guideline
https://material.io/guidelines/
여러 가지 의미 있는 디테일한 가이드라인이 있으므로 GUI 디자인을 하게 될 때에는 iOS나 구글 디자인 가이드 사이트를 한 번 살펴보는 것을 권장 드리며, GUI가 단순히 스타일링이나 외형적의 아름다움만 가지고 디자인되는 것이 아니라는 것을 다시 한 번 되짚어보시는데 도움이 되었기를 바랍니다.
