스큐어모피즘: 만져지는 UI로의 변화 과정

지난주 애플에서 iOS 개발을 맡고 있던 스캇 포스톨 수석 부사장이 경질되었다는 발표가 있었습니다. 포스톨이 맡고 있던 업무는 iOS 를 넘어 다양했는데, 애플은 후임자를 임명하는 대신 그 역할을 여러 사람에게 나눠 줬습니다.

가장 관심이 가는 부분은 HI(human interface) 부문을 조나단 아이브에게 맡긴 것입니다. 조나단 아이브는 이제 하드웨어 디자인 뿐 아니라 소프트웨어 UI 까지 총괄하게 되어 이후 애플 제품은 보다 통합적이고 일관된 UX가 만들어지는데 도움이 될 것으로 기대됩니다.

애플 스큐어모피즘에 관한 기사에서 이 둘의 취향 차이를 읽어보셨다면 이후 애플 UI의 변화도 어느정도 짐작 할 수 있을 것 같습니다. NeXT 시절 부터 스티브잡스와 함께 했던 스캇 포스톨은 추상화되고 미니멀한 디자인 보다는 좀 더 사실적이고 시각적으로 즐거움을 주는 것을 더 선호합니다. 독단적인 성격도 스티브 잡스를 닮아서 미니멀한 디자인을 선호하는 조나단 아이브와 충돌이 많았다고 합니다.  잡스 이후 선보인 iOS6의 UI는 앱들간 뭔가 일관적이지 않고 편차가 심한데, 절대적인 결정권자가 빠지고  내부 정치 관계가 반영된 것에 따른 결과라는 말도 있습니다.

사실적인 묘사는 포스톨 이전에 NextStep에서 부터 이어진 잡스의 오래된 개인적 취향의 반영이었던거 같습니다. 하지만 iOS에서 부터 스큐어모피즘이 더 부각된 된 것은 개인적 취향보다 터치UI로의 전환이 보다 중요한 이유인 것 같습니다.

애플 휴먼 인터페이스 가이드라인의 변화
 

맥 프로그램들이 윈도우 프로그램에 비해서 정돈되어 보이고 이해하기도 쉬워보이는건 애플의 정교한 HIG(Human Interface Guidelines)에 따라 체계적이고 일관된 look & feel을 유지할 수 있었기 때문이라고 생각합니다. 특히 표준화된 UI 콤포넌트 사용을 강조하고 그런 컴포넌트는 언제 왜 어떻게 사용해야 하는지 디자인 패턴을 잘 정리해 서드파티 개발 프로그램들도 맥의 일관된 사용 경험을 제공할 수 있었습니다. 상대적으로 윈도우  프로그램들은 UI 일관성이 부족하고 뭔가 들쑥 날쑥한 느낌이어서 전체적으로 윈도우 사용 환경은 뭔가 허술하다는 생각이 들었거든요.

물론 이후 MS도 UX가이드라인에 공을 많이 들이고 UI를 규제하려는 노력을 보이는데 재미있게도 애플은 iOS로 넘어오면서 오히려 통제를 완화합니다.  iOS HIG UX 가이드라인 챕터 Consider Adding Physicality and Realism 과 Consider replicating the look of high-quality or precious materials 부분에서 스큐어모피즘이라고 비판받는 사실적인 묘사를 하도록 권장합니다.

이 부분은 단순히 펠트나 가죽 질감을 흉내내 치장하라는 것보다는 결국 기본 UI 컴포넌트가 아닌 커스텀 컴포넌트를 허용한다는 의미입니다. 이전의 OSX HIG의 동일한 챕터에서 Use Standard UI Elements Correctly 라고 게임같은게 아니라면 절대 커스텀 UI 요소를 사용하지 말라고 했던것과는 대조적입니다.

In general, don’t create a custom UI element to replicate the behavior of a built-in element. Unless you’re designing a game or other completely custom experience, it’s not appropriate to replace familiar elements with custom ones.

iOS는 여전히 원칙적으로는 표준 UI 컴포넌트를 사용하는 것을 권장하지만 그것을 벗어나서 터치를 활용한 물리적이고 사실적인 실험해 보는 것을 허용하고 있습니다. 이런 부분은 상당히 의미있는 변화라고 생각됩니다.

마우스를 이용한 WIMP GUI는 거의 이십년이상 다듬어 지면서 안정화 단계에 와있지만 터치인터페이스는 이제 시작된 단계이기때문에 무리한 통제보다는 더 많은 실험을 가능하도록 열어두는 편이 발전을 위해서 도움이 된다고 생각하는 것 같습니다.

iOS UI가이드 또한 정교하게 잘 설계 되어있지만 터치인터페이스라는 새로운 환경에서는 더 많은 가능성이 있습니다. 실제 애플이 twittie가 사용하던 pull to refresh UI를 채용한 것 처럼 애플이 미리 생각지 못했던 터치 스크린에 보다 적합한 다양한 UI가 써드파티에 의해서 만들어지고 있습니다. 스큐어모피즘이라는 이름으로 쓸모없는 시각 효과라고 비웃기는 하지만 이를 통해 표준 UI컴포넌트를 사용하지 않고 보다 자유로운 실험을 할 수 있도록 가능성을 열어준 것이라는데 의미가 있습니다.

Tangible UI Elements 
 

애플은 터치UI를 개발하면서 기존 UI 컴포넌트에 대한 고민을 다시 하게 됩니다. iOS HIG에는 형태의 사실성 보다 물리적인 법칙을 따라 사실적으로 동작하는 행태가 더 중요하다고 얘기하고 있습니다. 마우스로 포인터를 움직여 간접적으로 조작하는게 아니고 터치 또한 스타일러스가 아니라 손으로 직접 만짐으로써 촉각적이고 물리적인 조작과 반응에 대응하는 UI 요소가 필요하다고 생각했을 것입니다.

터치UI로 넘어오면서 변화된 대표적인 UI 컴포넌트가 기존 체크박스를 대체한 on/off 스위치입니다. 체크박스는 선택과 해제를 종이 서식에서 사용되는 표기를 추상화하여 가져온 것인데, 펜도 아닌 맨손으로 터치해서 체크 표시가 생겼다가 지워졌다 하는 것이 잘 어울리지 않는다고 생각한 것 같습니다. 밀어서 켜고 끄는 스위치가 터치조작에 보다 부합하고 시각적으로도 체크 표시 유무보다 레이블과 색상 대비를 통해 더 분명하고 쉽게 상태를 인식을 할 수 있다는 장점이 있습니다.

아이폰의 상징적인 밀어서 잠금해제와 동일한 구조를 가지기도 하고요. ( 초기 iOS 스위치는 썸이 크고 네모난 형태로 조작이 강조되었다면 현재는 작고 동그란 형태로 상태 표기가 더 부각되도록 개선되었습니다.

안드로이드도 iOS를 따라서 기존 WIMP 체크박스를 설정에서 계속 사용하다가 토글 스위치로 바꾸었는데, iOS는 스위치가 아이폰이나 아이패드 옆면에 달린 뮤트 스위치와 동일하게 스위치의 thumb 옆에 감추어진 상태 표기가 드러나는 구조인 반면에 안드로이드 스위치는 썸 위에 상태가 표기되어 있어 썸이 움직이는 어느 순간 썸의 색과 상태 표기가 바뀝니다. 조작은 물리적이지만 실제로는 존재 할 수 없는 스위치라서 주의깊게 바라보면 멘붕(멘탈 모델 붕괴)이 일어납니다. :)

메트로 UI
 

스큐어모피즘을 얘기하는 글에서 windows8의 모던 UI와 비교하면서 아날로그 메타포가 잘못된 방향인 것처럼 얘기되는 경우가 많았는데요. Authentically Digital 이라고 디지탈에서 부터 새로 출발해야 한다는 관점은 사실 좀 이상한 것 같습니다.

디지탈 스크린은 우리가 오래전부터 사용하고 있었고 새롭게 시대가 변한 것은 마우스 같은 간접조작에서 직접적인 손의 터치로 입력방식이 전환되고 있다는 것이거든요. 새로운 시대의 UI는 디지탈이 아니라 오히려 보다 촉각적이고 아날로그적인 모습이 되는것이 자연스러운 흐름이라고 생각됩니다. 변화의 본질은 사람의 손이니까요.

윈도우8 모던 UI는 원래 메트로 UI라고 명명되었는데요, 메트로라는 이름에서 알 수 있듯이 지하철,버스 같은 대중교통의 사인 시스템에서 영감을 받은 타이포그라피를 강조하는 플랫한 형태를 특징으로 합니다. 하지만 사인 시스템은 일방적인 정보의 전달이 목적이지 상호작용을 기반으로 하고 있지 않습니다.

반듯하고 플랫한 버튼은 모던해 보이지만 눌려질 수 있다는 인터랙션을 인지하는데는 더 많은 비용이 듭니다. 사람은 중요한 신호를 처리하기 위해서 pre-attentive processing 이라고 불리는 시각정보를 빠르게 처리하는 모듈을 오랜동안 진화시켜왔습니다.

우리가 책에 형광펜이나 빨간펜으로 밑줄을 긋는 것도 이런 시각처리 능력을 활용한 예인데요. 우리가 빨리 처리하는 시각적인 특징 중에는 그림자에 의한 입체감과 직선과 곡선의 대비 등도 포함됩니다. 우리가 보통 버튼을 그릴때 볼록 튀어나온 입체감을 가진 라운드 사각형을 그리는 것은 그런 모습이 익숙해서이기도 하지만 그게 인지적으로 좋은 디자인 이기 때문이기도 합니다.

우리의 인지능력은 설계된게 아니라 자연에 적합하게 적응된것이고 학습된 것이기 때문에 촉각이라는 경험을 확장하는 터치 UI도 역시 우리가 익숙하게 손으로 만져왔던 사물의 메타포를 가져오는 것이 자연스러운 접근이라고 생각됩니다. 디지탈은 만져본 경험이 없거든요.

매체 환경에서도 촉각 피드백이나 3D 디스플레이 같은 디스플레이 기술이 계속 발전하고 있어서 디지탈이 언제까지나 평면은 아닐테고요. 스크린을 터치하면서 촉각으로 질감을 느끼게 될때에도 납작하고 매끈한 시각정보만 있는 UI 요소가 쿨한건 아닐것 같습니다. 

데이타 시각화 분야에서는 data ink ratio 라고 정보를 담지 않은 잉크(픽셀)는 불필요할 뿐 아니라 오히려 정보를 방해하는 몹쓸 것으로 생각합니다. 하지만 인터랙션에서는 어디까지가 잉여 정보인지 구분이 어렵습니다. 인지작용이나 기억은 주가되는 정보만이 아니라 맥락상의 메타 정보도 중요한 역할을 하거든요. 하얀 스크린에 본문용 폰트로 적혀있는 메모나 실제 노트 종이를 본딴 노란 라인노트에 손글씨로 적혀있는 메모나 컴퓨터에 저장되는 데이타는 동일해도 사람이 기억하는 정보는 다르거든요.

스큐어모피즘은 만져지는 UI로의 변화 과정
 

터치 UI는 기존의 GUI 패러다임을 깨고 물리적으로 조작 가능한 행태의 UI 요소를 도입하는 방향으로 가게 될것입니다. 그러려면 손으로 만지는데 익숙한 아날로그 도구에서 메타포를 가져오는게 자연스럽고 바람직합니다. 그 과정 중에 기능이나 동작 행태와는 상관없이 불필요한 시각요소가 적당히 또는 과하게 들어가게 될텐데, 불필요하다는 선을 객관적으로 긋기가 애매합니다.

결국 취향의 문제로 그런 시각적인 장식이 너무 지나친 변이들이 생겨나는것은 자연스러운 현상입니다. 물론 도가 지나쳐 욕을 먹을 만한 실패들이 있긴하지만 그렇다고 이런 실험을 아예 막는 것은 바람직하지 않습니다. 우리는 실패를 통해서 배우니까요.

새로운 시도를 하고 실패를 할 수 있도록 열어둔 애플의 접근 방식이 MS보다 현명하다고 생각합니다. 

조나단 아이브가 UI를 맡게되면 그의 취향에 따라 과했던 시각요소들은 잘 정리가 되리라고 믿습니다. 저도 가죽까지는 참겠는데 스티치는 정말 못 참겠거든요. 그러나 터치환경에 적합한 tangible UI를 새로이 만들어가고 그러한 실험을 애플 내부에서만이 아니라 애플 개발 생태계 안에서 함께 하려는 방향은 계속 유지 될 것으로 기대합니다.

터치 UI는 새로운 궁극의 UI가 갑자기 나타나서 한순간에 변환되는게 아니라 연속적인 변화의 과정을 거치게 될 것 입니다. 억지스러운 메타포를 가져와서 우스꽝스럽고 불편한 UI들이 기존의 안정된 WIMP GUI의 시대에 비해 보다 많이 등장하기도 하겠지만 그렇게 변화해가는 것이라고 생각합니다. 

이 글은 tech IT!에 기고한 글을 일부 다듬었습니다.

[참고##메타포##]