태터데스크 관리자

도움말
닫기
적용하기   첫페이지 만들기

태터데스크 메시지

저장하였습니다.


'메타포'에 해당되는 글 6건

  1. 2014.11.25 [독후감] 사물의 이력 (1) by 이 재용
  2. 2012.11.12 스큐어모피즘: 만져지는 UI로의 변화 과정 by 無異
  3. 2012.10.31 90년대 3대 메타포 UI 실패 사례 (3) by 이 재용
  4. 2012.10.29 스큐어모피즘(Skeuomorphism)이란? (3) by Limho
  5. 2012.09.24 두 디자인 대륙의 충돌 - 메타포냐 메트로냐? by 이 재용
  6. 2011.08.20 퍼소나로 완성하는 인터랙션 디자인 : Chapter 13. 메타포, 숙어, 어포던스 (2) by 비회원
2014.11.25 01:00

[독후감] 사물의 이력

사물의 이력
평범한 생활용품의 조금 특별한 이야기
김상규

이 책은 우리가 생활속에서 접하는 여러 가지 사물들이 왜 그렇게 디자인되었을까를 생각해보는 책이다. 단순히 문학 작품이나 에세이처럼 읽어도 좋고, 디자인에 대한 영감이 필요할 때 어떤 부분을 찾아 보아도 좋다. 이런 종류의 약한 수집벽은 어느 디자이너에게나 있게 마련이니까, 아마 많은 디자이너들이 공감할 것이다. 블로그에도 이와 유사한 글을 작성한 적이 있다.

2012/06/18 - 최초의 마우스, 최초의 네비게이션, 최초의 애플 컴퓨터

하지만 UX 디자이너에게는 이러한 종류의 책을 읽고 생각해 보는 것이 특별한 의미가 있다.


1. 평범한 것을 관찰하는 훈련
이 책의 저자는 매우 일상적인 사물들을 깊이 바라보고 있다. 하나의 아주 작고 평범한, 그래서 너무 일상적인 사물을 시간과 공간을 초월하여 사유함으로서 남들이 바라보지 못 하는 의미를 찾아내는 식이다. 이것은 흔히 UX 디자이너들에게 '초심자의 눈으로 보기' 혹은 '외계인에게 설명하기' 등 여러 가지 용어로 말하는 관찰 방법의 전형이다. (이노베이터의 10가지 얼굴 참고)

2013/11/06 - [독후감] 관찰의 힘
2014/05/13 - [독후감] 컬처코드 

예를 들어, 신호등이 정말 필요할까? 지하철의 시계가 명품 브랜드라면? 수저통을 다시 디자인하지말고, 수저통을 없애려면? 같은 질문들은 UX를 디자인하는 사람들이 한 번쯤 '외계인의 눈으로' 보기 좋은 소재들이다. 

참고:p135 네덜란드 교통 전문가인 한스 몬더만 Hans Monderman은 교통 신호가 더 위험하다는 생각을 했고, 드라흐텐의 데카텐 교차로를 신호등,차선,표지판 없이 개조하여 사고율을 획기적으로 낮추었다.. 런던도 잡동사니 없는(clutter-free) 거리를 조성했다.

2. 사물의 근본 원리 파악
이 책의 저자는 제품 디자이너(의자 디자이너)이며 디자인과 교수이다. 현대 산업의 제품이 어떻게 만들어지는지에 대한 원리를 알고 있고, 산업 디자이너가 왜 이렇게 디자인할 수 밖에 없는지를 누구보다 잘 알고 있다. 그런 산업 디자이너의 눈으로 과거와 현대의 제품을 꼼꼼히 돌려보며 파악하고 있다.

왜 리모콘에는 아주 작은 발(보스)이 달려 있을까, 왜 제품의 옆면에는 작은 선(파팅 라인)이 주욱 있는 경우가 많을까? 플라스틱 의자를 만들 때 가장 중요한 것은 무엇일까? 책상의 크기는 왜 그렇게 정해졌을까? 등등 현대 산업 디자이너라면 알고 있거나, 직접 경험했을 법한 재료의 문제, 제조 방법의 문제, 공학적 구조의 문제나 사용 방법의 문제 등이 아주 꼼꼼하게 설명되어있다.

정말 좋은 제품 디자인은 이런 작은 디테일을 얼마나 잘 해결했느냐에 따라 좌우된다. 학생들은 디자인하면서, 왜 이렇게 이렇게 만들지 않지?라고 쉽게 비판하지만, 프로들은 그렇게 쉽게 비판하지 않는 이유가, 직접 무언가를 만들어 보면 결국 그렇게 될 수 밖에 없는 수많은 현실의 벽이 눈에 생생히 보이기 때문이고, 그걸 극복한 디자인을 보면 일반인은 눈치채지 못 할 아주 미세한 차이라도 경탄을 하면서 보게 된다.

인터랙션 디자인에서도 마찬가지다.
피엑스디 블로그에서도 이러한 주제로 많은 글이 올라왔는데,
http://story.pxd.co.kr/tag/UI 디테일

당연한 듯 보이는 것이 안 만들어져 있을 때, 막연히 비판만하는 것이 아니라, 그렇게 되지 않은 이유를 짐작하여 설명할 수 있다면 그는 전문가이다. 또 그렇게 강력한 현실의 벽을 극복하고 만들어 낸 아주 작은 디테일의 차이를 볼 수 있다면 그는 전문가이다. 제품 디자인에서와 마찬가지로 설명할 수 있다.

다만, 인터랙션 디자인에도 이런 부분들을 느릿느릿 책으로 낼 수 있으면 좋으련만, 너무 빨리 달라지는 세상이라 엄두가 나지 않는다.


3. 디지털 디자인의 스토리 갖기
디자인 비평이나 디자인史를 교수님들께 듣다보면, 매우 유명한 작품에 대하여 왜 여기에는 이런 문양을 사용했고, 여기에 들어간 파란색은 어떤 의미이며... 이렇게 설명하다가, 다소 난데없는 디자인들을 나무랄 때면 '근본'없는 디자인이라는 비난을 들을 때가 있다.

정말 디자이너들이 그런 생각을 하면서 디자인했을까?하는 의문은 뒤로 미루어 두더라도, 이야기를 듣는 것만으로 재미있고, 사후에 누군가 지어 붙인 이야기라 할지라도 그 디자인을 더 의미있게 만든 것은 사실이다.

디자인은 하나의 문화이고, 문화는 많은 의미들을 쌓아 만드는 것이므로 어찌보면 당연한 이야기일텐데, 제품 디자인에서 이런 부분들을 생각해 볼 수 있는 것이 이 책의 가장 큰 재미이다. 아울러 동시대를 살아가는 저자이다보니, 책에서 자연스럽게 이러한 오프라인 '사물'들이 자연스레 디지털-온라인의 세계까지 연결이 된다.

이러한 메타포 혹은 스큐어모피즘에 대하여 피엑스디 블로그에서도 여러 차례 다룬 바 있다.
http://story.pxd.co.kr/tag/메타포

이 책에서는 버튼과 터치, 필카와 디카, 디스켓 저장 아이콘 등 우리가 갖고 있는 경험들을 자세히 살펴 보고 있다. UX 디자이너라면 역시 주위의 사물에 대해 주의 깊게 살펴보고, 자신의 작업에 적합한 스토리를 가진 사물을 발견했을 때 영리하게 가져다가 쓸 수 있어야 아마도 재미난 디자인을 만들 수 있을 것이다. 

물론 스큐어모피즘의 시대가 갔다고 하지만, 여전히 재치있는 메타포의 활용은 재미와 이야기 거리를 줄 뿐만 아니라, 저자도 지적하듯이 한편으로 멀어졌다고 생각하는 사물의 움직임은 안드로이드의 물질 디자인(Material Design, p004)으로 돌아오기도 하기 때문이다. 나중에 어떤 디자인학자가, 내가 만든 디자인이 70년대 슬레이트 지붕이나 파란 대문의 사자머리 문고리에서 왔다가 주장한다면 재미있지 않을까?


마치며
2014년부터 백열전구의 생산과 수입이 금지되었다. 아련한 추억의 물건들이 사라지는 것이 어디 한 두 개랴, 일일히 세월을 탓하기도 너무 덧없다. 하지만 '아이디어'의 아이콘으로서 백열전구는 아마도 꽤 오랜동안 디지털에 남아 있을 것이다. UX 디자이너가 사물을 추억하는 또 다른 방법이 남아있어 다행이다.


차례
1. 사라지는 것에 대한 예의 - 백열전구와 LED, 버튼(타자기)과 터치, 필카와 디카, 디스켓과 카세트, 리어카와 지게
2. 도시의 일상에 뿌리내린 생산 라인 - 컨베이어 벨트, 삐삐(무선호출기), 신호등, 교통 카드, CCTV
3. 동물을 닮은 것에 대한 고찰 - 말발굽(문 고정발, 쐐기), 마우스, 까치발, 개다리소반, 사자 머리 문손잡이
4. 소재가 가진 함정 - 고무 신발, 알루미늄 캔과 양은 냄비, 플라스틱 의자, 함석 물뿌리개, 흙벽돌과 시멘트
5. 숨겨진 디테일의 미학 - 리모콘 보스, 파팅 라인, 스마트폰 에지, 책상의 크기,책의 장정
6. 관계와 상호 작용의 의미 - 간판, 수저통, 개집, 지하철 시계,이젤
[참고##방법론##]

팀블로그 pxd Story 구독 방법  블로그 글은 각 개인의 생각이며 피엑스디와 다를 수 있습니다.


Trackback 0 Comment 1
Ad Test...
2012.11.12 07:47

스큐어모피즘: 만져지는 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!에 기고한 글을 일부 다듬었습니다.

[참고##메타포##]

팀블로그 pxd Story 구독 방법  블로그 글은 각 개인의 생각이며 피엑스디와 다를 수 있습니다.


Trackback 1 Comment 0
Ad Test...
2012.10.31 07:56

90년대 3대 메타포 UI 실패 사례

메타포는 잘 사용하면 사람들이 쉽게 인터페이스를 익힐 수 있지만, 잘못 (혹은 과도하게) 사용하면 사용성도 떨어뜨리면서 학습성마저 해칠 수 있다. (자세한 장단점 비교는 스큐어모피즘 참고)

90년대에는 유명 회사들도 이런 황당 시도를 많이 했는데, 덕분에 많은 UI 디자이너들이 배웠다. 기억나는 3대 황당 메타포 실패 사례 소개.

1. IBM Real Thing Series 1997

1997년부터 1998년까지 IBM에서는 일련의 Real 시리즈를 내놓았는데 Real Phone, Real CD 등이 있었다.

Real Phone:http://hallofshame.gp.co.at/phone.htm

IBM측의 소개를 보자.
welcome to the future; one without distracting windows and menu bars. the realphone is an experiment in user interface design for a new, real-world user interface style..

지금 시점에서 보면 웃기게 들릴지 모르겠지만, 당시 IBM 사람들은 이것이 정말 획기적이라고 생각했던 것 같다. 그런데 문제는 아무리 진짜 전화기를 흉내 내더라도, 프로그램은 진짜 전화기가 될 수 없다는 것이다. 전화번호를 입력하는데 키보드를 쓸 수도 없고, 이름으로 검색을 할 수도 없고... 그냥 마우스로 퀵버튼을 누르거나 화면상의 숫자 버튼을 마우스로 눌러야 하는데, 이건 손으로 누르는 것보다 훨씬 더 어렵기만하다. 컴퓨터의 장점을 다 포기하고, 그렇다고 전화기의 편리함도 없는 상태가 되어 버렸다. 

더 웃긴 건, Real CD. 1998
http://hallofshame.gp.co.at/realcd.htm
화면의 대부분은 프로그램 로고로 채워지고 있다. 듣고 있는 CD의 표지가 보였으면 그나마 나았겠지만 당시엔 인터넷의 속도나 데이터로 불가능했다. 결국 아주 작은 콘트롤 몇 개로 조작해야한다. 역시 컴퓨터가 가진 장점은 모두 사라져버렸다. 정말 웃겼던 건, 그래 전화기는 원래 전화가 된다 치자, CD는 원래 플레이가 안 된다. CD 껍데기 들고 옆을 눌러 소리나는 CD는 없었다. 그럼 대체 왜 "Real" CD인가?

하여간 사람들에게 큰 교훈을 주고, 씹는 즐거움을 주었다.


2. Apple의 QuickTime 4.0 1999

http://hallofshame.gp.co.at/index.php?file=qtime.htm

Quicktime 4.0은 매우 멋진 인터페이스로 기억되지만 너무 리얼 메타포를 추구하다가 오바한 것이 몇 가지 있는데, 그 중에 가장 황당한 건 바로 볼륨 조정 다이얼(dial)이다. 인터페이스의 좌하단부에 나오는데, 이것이 마우스로 조작하려면 굉징히 힘들게 만들었다. 아래부분에 마우스 포인터를 놓고, 둥글게 위로 올리고, 다시, 아래쪽에 포인터를 놓고 둥글게 위로 올려야 조작이 되었던 것. 아... 이런 건 비디오로 설명해야 쉬운데, 하여간 저렇게 둥글게 생긴 다이알은 손가락으로 돌리면 쉽지만, 마우스로 돌리면 굉장히 어렵다. (이렇게 돌리면 그 옆 스피커 아이콘 앞에 볼륨이 표시된다. 나중에 볼륨표시 부분을 이용한 콘트롤이 추가되었다)

애플은 GUI 초기부터 계속 이 메타포 혹은 스큐어모피즘에 병적인 집착을 보이는데, 내부 디자이너들도 반발하는데 스티브 잡스가 고집한다는 소문도 있다.


3. 마지막으로 Southwest Airlines Website... 1995

http://www.skrenta.com/2007/04/
마지막으로 미국 항공사의 홈페이지 디자인이다.

늘 그렇듯이 무리한 메타포는 현실 경험의 장점도 못 살리고, 디지털의 장점도 못 살리는 식이 된다. 예를 들어 회사 뉴스를 항공사 카운터에서 보는 사람도 없으며, 자기 이력서를 항공사 카운터에 넣는 사람은 더더욱 없다. 예약하기 위해 직원들이 사용할 것 같은 전화기를 누른다는 것도 너무 억지지만, 가장 웃긴 건 사장 사진을 눌러 사장의 인사말을 본 다는 것.

이렇게 3종이... 역사적으로 가장 유명한 메타포 실패 사례다. 누가 인증한 건 아니고, 필자 기억에 남는 기준임. 물론 기억에 남았다는 건, 굉장히 많은 사람들과 문건들이 실패 사례로 쓴다는 것 (인터넷 기사 뿐만 아니라 교과서 류에도 많이 실린 사례들이다)

메타포는 항상 적절히 사용해야 한다. 과도하게 만들면 언제나 무리수가 생기고, 현실도 디지털도 아닌 것이 만들어지게 되니까. 잘만 사용하면 사람들에게 편안하고 따뜻한 느낌을 줄 수도 있다.

[참고##메타포##]
[참고##UI 역사##]

팀블로그 pxd Story 구독 방법  블로그 글은 각 개인의 생각이며 피엑스디와 다를 수 있습니다.


Trackback 0 Comment 3
Ad Test...
2012.10.29 08:14

스큐어모피즘(Skeuomorphism)이란?

스큐어모피즘에 대한 이야기는 이미 pxd블로그(http://story.pxd.co.kr/577)에서 다룬 바 있다.
본 내용은 위키피디아(http://en.wikipedia.org/wiki/Skeuomorph)의 내용을 기반으로 인터넷에 흩어진 기사들을 참고하여 필자의 의견을 덧붙인 글이다.



 1. 용어 정의 : Skeuomorphism(스큐어모피즘) 또는 Skeuomorph(스큐어모프)

그리스어로 Skeuos는 Vessel(용기) or Tool(도구), morphe는 Shape(형태)을 의미한다.
'어떤 도구의 형태,형식'이라는 뜻으로 '스큐어모피즘'을 의역해 보면 '원래 도구의 형태를 그대로 따라가는 양식' 정도의 풀이가 가능하겠다. 
쓰임새 또는 재료에 따라 자연스럽게 발전한 도구의 형태와 요소들이, 재료나 매체가 변화함에 따라 재구실을 못하게 되더라도 그 형태와 요소들이 의도적으로 유지되는 것을 가리킨다. 

[관련 참고 용어]
Real-Life Metaphor  
실세계의 모습과 현상, 사물의 형태나 상황을 다른 매체에 그대로 재현하는 방식으로 한국 디자이너들 사이에서는 '리얼메타포'라는 말로 사용하기도 한다. 
도구의 물질적인 형태형식을 모방한다는 스큐어모피즘에 비해 의미가 포괄적이다. 
Material Metaphor 
실생활에서 쓰이는 도구의 모양,재질감 등을 다른 매체에 그대로 구하는 방식을 말한다. 
Minimalism
쓸모없어진 요소의 잔재와 장식적 요소가 강조되는 스큐어모피즘과는 대척되는 디자인양식이다.



2. 역사적 예와 기타 예시


고대에 식물줄기로 엮어 만든 바구니를 토기화하면서 토기표면에 줄기로 엮은 듯한 패턴을 넣기도 했다. (장식효과와 함께 새로운 재료로 만들어진 토기가 기존의 바구니용도임을 알려주기 위함일 것이라 추측된다.)

그리스 신전이 나무로 지어지던 시대의 기둥처마와 같은 기능성 장식들이 돌기둥으로 재료가 바뀐 이후에도 유지되었던 것처럼, 새로운 재료가 갖는 특성에 맞춰 형태나 양식을 바꾸기보다는 이전의 익숙했던 모습을 그대로 재현함으로써 신을 믿는 대중에게 익숙함과 심리적인 안정감을 주려는 의도가 있었다.

철재 식기를 보다 값싼 도자기로 바꾸는 과정에서, 또 나무나 철재로 된 비싼 제품들이 플라스틱 제품으로 바뀌면서 이전의 모양이나 양식이 그대로 유지되기도 하였다.

이렇게, 시간이 지나 재료의 변화로 불필요한 요소가 되더라도 그것을 그대로 유지한다는 점이 저열한 사상으로 평가되거나 비효율적이라는  비난을 자연스럽게 받으며 스큐어모피즘은 '잔재(殘滓)'의 이미지를 갖게 되었다.
 

[기타 예시]

- '돛과의 연결기능이 없는 Bowsprit'. 심지어 사람이 설수 있도록 해 놓았고 영화 '타이타닉'에서 두 주인공이 뱃머리 러브씬을 찍은 부분이다.
- 주머니기능이 없는 옷주머니
- 나무바퀴의 살모양을 따라한 자동차휠
- 씨가의 코르크처럼 보이는 누런색 담배종이
- 휴대폰 사진찍기기능의 셧터소리
- 자동차내 플라스틱 대쉬보드의 가죽표면패턴
- 샹델리에의 촛불모양전구
- '저장'을 뜻하는 (사라진 저장매체인)3.5인치 플로피디스크 아이콘
- 디지털영상을 필름으로 찍은 것처럼 부드럽고 고급스러운 효과주기



3. Digital Skeuomorphic Design


재료의 변화와 더불어 최근에는 디지털 매체로 변화함에 따른 스큐어모피즘이 두드러진다.
대부분의 아날로그제품들이 디지털화되면서 기존의 아날로그의 모습을 그대로 차용하는 경우가 많아졌고 특히, 컴퓨터부문에서는 GUI역사와 함께 등장한 Desktop메타포 이후 각 애플리케이션들이 사용자에게 직관적으로 기능을 인지할 수 있도록 오프라인 제품의 모습을 그대로 모사하는 경우가 많아졌다.

새로운 매체를 맞아 새로운 방식을 모색하지 않고 생각없이 실사를 그대로 재현한 그래픽들의 천박함을 지적하는 목소리가 높아졌고, 일부 GUI디자인 가이드에서는 실사를 묘사하는 GUI에 대해 '불필요한 정보가 많고 복잡하며 난해해지는 경향이 있으니 지양해야한다'고 명시하기도 했다.



4. 장점과 단점 그리고 논란의 시각들 (Digital Skeuomorphic Design)


4.1. 장점 
익숙함의 제공, 낯설음에 대한 배려
- 아날로그적 사용감을 그대로 적용하여 제품에 대한 친밀감을 높일 수 있다.

- 시각적으로 어필할 수 있는 여지가 많다.
- 사물을 그대로 보여주어 직관적이기 때문에 사용법을 미리 짐작할 수 있게 해 줄 수 있다.

4.2. 단점(비난 받는 점)
잔재의 이미지, 새로운 고찰이 없는 사상의 저열함, 과다한 정보
- 아날로그에서는 편했던 조작이 디지털화면으로 옮겨올 경우 불편해지고 화면을 쓸데없이 많이 차지하는 경우가 많다.
- 하나의 시스템 안에서 어플리케이션들이 각각의 대표적 기기의 형태를 그래픽화한다면 전체 시스템 그래픽 look and feel의 일관성을 갖기 힘들다.
- 그 기기를 실제로 사용해보지 못한 사용자가 다수라는 점에서 실생활의 경험을 잘 전달하지도 못한다 볼 수 있다.
- 디자이너가 새로운 매체에 대해 그리고 디자인에 대해 덜 고민하게 되어 창의적 결과물을 기대하기 힘들다.
- 디자인컨셉(실제 경험을 그대로 화면에 옮긴다)이 명확하기 때문에 디자인 평가에서 비난을 피할 수 있다는 점을 디자이너들이 악용할 수 있다.

4.3. 논란의 주요 시각들
- 주로 인쇄 매체를 다루는 정통 그래픽 디자이너들이 디지털 스크린에서의 스큐어모피즘에 대해 부정적인 편인데 디지털 매체에서의 새로운 접근의 일종으로 인정할 필요가 있다는 시각도 있다.
- 건조하고 불친절한 표현보다는 스큐어모피즘이 사용자에게 부드럽게 다가가는 측면이 있다.
- 인지를 더 쉽게 하기 위해 사용된다고는 하나 실제로는 더 사용성을 저해한다는 의견도 있다.
- 주로 Over-Designed된 느낌이다.
- 다소 키치스럽다고 느껴진다.
- 정갈하지 못하며 너무 잰 체하는 그래픽으로 느껴져 반감을 살 수 있다.
- 때로는 인스타그램처럼 향취를 불러일으켜 사용을 유도하는 긍정적인 면도 있다.
- 정보가 과다한 스큐어모피즘보다는 MS의 메트로UI처럼 정제된 정보를 제공하는 것이 낫다.
- 표현의 문제, 스타일의 문제다. 무엇이 좋다 나쁘다가 아니라 적절하게 사용하였느냐와 어떤 표현이 사용자의 경험을 좋게 하느냐의 문제다.


5. GUI분야에서 스큐어모피즘을 선도/고수하는 애플


매킨토시를 통해 컴퓨터시스템 초기부터 Graphic User Interface의 부흥을 이끈 애플의 소프트웨어에서 많이 애용되는 그래픽 양식이 스큐어모피즘이다.
앞에서 말한 긍정적인 측면에서 채용한 것이지만, 애플 내부에서도 스큐어모피즘에 대해 비판의 목소리가 있다고 한다.
매뉴얼 없이도 누구나 바로 쓸 수 있는 제품을 만든다는 애플 제품의 목표와 부합되어 채택되었고, 이제는 애플의 아이덴티티가 된 그래픽 철학이기에 쉽게 바꿀 수 있는 부분이 아니어서 진화해 갈 것일라 예상해 볼 수 있다.


애플 스큐어모피즘에 대한 필자의 의견

애플 소프트웨어의 모든 화면들이 스큐어모피즘을 적용한 것은 아니라 프로그램을 구분하는 아이콘과 제품의 첫인상을 좌우하는 메인 스크린에 주로 사용하고 있다. 물론 몇몇 app들에서 과다사용되었다는 지적이 있고 특히 e-book의 경우 책장과 책을 그대로 모사해 버렸지만 대부분 app에서의 세부기능을 다루는 화면들은 Basic-Component로 구성된 화면들이 많다.
몇몇 app에서 수위 조절에 실패했지만, 전 제품에 대해 일관된 인상을 보여주고 있고 각 제품들 간에 가져야할 분별력을 갖추고 있다고 평가한다.
그래도, 대중들이 애플의 스큐어모피즘 그래픽에 식상해할 만한 시기이긴 하다.


6. 스큐어모피즘의 적절한 사용이라 평가받는 디자인들

- Kindle은 E-Ink-Screen방식으로 디지털 제품이지만 눈부심없이 인쇄책자의 경험을 그대로 구현하여 사용자들에게 좋은 경험을 제공하고 있다.

- 사례를 계속 추가할 예정이다.


7. 참고사이트

http://www.quora.com/Skeuomorphism : 소셜 Q&A 서비스인 '쿠오라'에 종종 스큐어모피즘에 대한 질문과 답변이 올라오곤 한다.

http://skeu.it/ : 스큐어모피즘 그래픽들을 모아놓은 사이트

- 애플 2인자, 왜 갑자기 떠나는가? 아이뉴스24 (2012년 10월 30일): 스큐어모픽 디자인을 둘러싼 스콧 포스톨과 조너단 아이브와의 갈등도 원인일 수 있다는 기사 

[참고##메타포##]


팀블로그 pxd Story 구독 방법  블로그 글은 각 개인의 생각이며 피엑스디와 다를 수 있습니다.


Trackback 1 Comment 3
Ad Test...
2012.09.24 08:05

두 디자인 대륙의 충돌 - 메타포냐 메트로냐?

대부분의 사람들은 애플 대 삼성의 재판에 관심을 주지만, 제가 보기에 더 흥미로운 것은 메타포 대 메트로라고 생각합니다.

다음달(2012년 10월 26일)이면, Windows 8의 정식 버전이 공개됩니다. 이 OS는 지금까지 PC 데스크탑 OS의 디자인 변화 중 두 번째 혁명적인 디자인 변화를 담고 있습니다(이런 일이 마이크로소프트에서 가능하다니, 오래 살고 볼 일이군요!). 첫 번째가 command line에서 GUI (Graphic User Interface) 상의 WIMP (Window, Icon, Menu, and Pointer)로의 변화였다면, 그 정도까지는 절대 아니겠지만, 이번 Windows 8은,하여간 정말 확 바뀌었구나라는 느낌이 나는 변화인 것은 틀림없죠. 물론 말은 많습니다. (참고:Windows 8 Real User Test 파문)

* 윈도즈 8: The New Face Of Windows


좋다/나쁘다, 편하다/불편하다 모든 판단은 일단 유보하고... 그럼에도 불구하고 윈도즈는 윈도즈 입니다. 매우 큰 영향을 끼칠 것이 틀림없습니다. 비스타와는 느낌이 다르다고 할까요? 그런데 여기에 들어간 디자인 스타일이 제가 보기에 굉장히 큰 흥미를 불러 일으켰습니다. Fast Company에서도 특집으로 다루려는 모양입니다. 취재 과정 중 공개한 한 기자의 두 개의 기사를 읽고 제 생각을 좀 더 정리해 보았습니다.

* Will Apple’s Tacky Software-Design Philosophy Cause A Revolt?
   (번역기사:애플의 조잡한 소프트웨어 디자인 철학)
* Windows 8: The Boldest, Biggest Redesign In Microsoft’s History

새로 바뀐 OS의 디자인은 메트로 UI 라고 불리었습니다. 2년 동안 이 이름을 사용하다가 최근 공식 이름을 '윈도우8 UI 스타일'로 부르기로 했다고 하지만, 일단 저는 편의상 그냥 메트로 UI라고 부르겠습니다. 메트로 UI 의 특징은 선 없이 면분할 만으로 만들어진 칼라 정사각형 혹은 직사각형 블럭들로 구성된 초기 화면과, 역시 선없이 철저히 타이포그래피와 면분할만으로 이루어진 앱화면으로 특징을 들 수 있습니다. 아무래도 타이포그래피만으로 구성을 하다보니, 글씨 크기 자체도 매우 큼직큼직하고 시원시원합니다. 개인의 취향에 따라서는 다소 성의 없어 보이거나 비어 보일 수도 있겠으나, 저 개인적으로는 매우 좋아하는 스타일입니다.

반면 애플의 iOS 등 최근 UI는 메타포 UI라고 부를 수 있습니다. 디터 람스(브라운)에서 영감을 받은, 최소한의 미니멀리즘 디자인을 가진 '실물'에서 모습을 가져온 듯한 비유적 UI인 것이죠. 예를 들어 iCal (달력 프로그램)을 보시면 가죽으로 한땀한땀 바느질하는 것처럼 보이는데, 스티브잡스의 개인 전용기(걸프스트림)의 가죽을 그대로 가져온 것이라고 합니다. 메타포를 사용하는 가장 큰 두 가지 이유는 오프라인에서의 경험을 이어가기 때문에 온라인 상황에서의 당황스러움이나 새로 학습해야하는 부담을 줄여줄 수 있다는 것과, 아날로그 매체에서 사람들이 느끼는 심리적 안정감을 들 수 있겠죠. 물론, 적절하게 사용되지 않았을 경우에 오히려 혼란을 가중할 수 있습니다. 어떤 사람들은 디지털 제품에 꼭 필요하지 않은 메타포를 채용한 것 자체가 '미니멀리즘'과는 거리가 있다라고 생각하지만, 이 역시 제 생각에는 적절하지 않은 평가라고 생각합니다. 일단, 여기서도 좋다/나쁘다, 편하다/불편하다의 모든 판단을 유보하겠습니다. 그래도 애플은 애플이니까요. 이미 우리는 매우 많은 영향을 받고 있습니다.


애플의 이러한 방식은 스큐어모피즘(skeuomorphism)이라고 설명합니다(참고:스큐어모피즘이란?). Skeuos는 그리스어로 그릇, 혹은 도구라는 뜻이며 morph는 모양이라는 뜻이니까, 원래의 구조에서 꼭 필요했던 장식적 요소들을 그대로 유지한채 새로운 것을 만드는 방식이라고 정의한다는 군요. 한마디로 익숙하고 오래되어 보이는 느낌(look comfortably old and familiar)이라고 하고요, 그래서 애플의 제품을 사용하면 digital skeuomorphic design을 경험하게 되는 것이죠.

반면 윈도즈 진영은 자신의 디자인을 "authentically digital (진정한 혹은 정통 디지털)" 경험이라고 주장합니다. 인위적인 반사광은 말할 것도 없고, 드랍다운 메뉴나 아이콘도 모두 사라졌습니다. 장식없이 군살을 모두 뺀, flat한 UI라고 할 수 있죠. 윈도즈 UX 디렉터인 샘 모로우(Sam Moreau)는 "It’s not about adornments, It’s about typography, color, motion. That’s the pixel."라고 말했다고 합니다. 적어도 시각적인 관점에서 역사상 가장 단순한 OS라고 할 수 있고, 실물 대응('데스크탑' 이란 말 자체가 비유적이죠. 폴더, 도큐멘트 모두 모두)으로 1980년대 애플에서 시작한 GUI 요소들을 제거하고, 몬드리안 스타일의 초기화면, 타이포그래피와 최소한의 아이콘, 그리고 동작들로 이루어진 인터페이스를 구현하여 스큐어모피즘에서 벗어났다는 것입니다.



이 기사에 따르면, 이러한 메트로 스타일의 UI를 바우하우스 전통의 계승이라고 생각한다는 거죠. 어라? 그럼 애플(디터 람스와 브라운)도 바우하우스 전통의 계승이라는데 결국 한 뿌리에서 하나는 무장식으로, 또 다른 하나는 최소한의 장식이 된 셈인데, 서로 비슷하다고 하기엔 너무 다르네요? 물론, 지금까지의 디자인 역사를 보면, "바우하우스"는 이런 일을 당하는게 한 두 번이 아니라 별로 억울하게 생각하지도 않을겁니다. ㅎㅎ (아... 디자인을 모르시는 분들을 위하여, 바우하우스는 사람 이름이 아니고 1919년에 설립된 독일 디자인 학교 혹은 학파 입니다)

무엇이 옳고 그르다를 말하는 건 유치한 일이고, 둘 다 장단점이 있고, 잘 하면 좋은데, 잘못하면 안 좋습니다. 애플이 30년전에 메타포를 사용했던 것은 피할 수 없는 이유 즉, 대부분의 사람들이 컴퓨터라는 것에 익숙하지 않다는 사실이 있었지만, 지금은 상당히 많이 해소되었다는 점을 생각해보면, 이제 무엇이 필수여야한다는 점은 없겠죠. 이제 30년이나 지나 모두 익숙해졌는데, 아직도 굳이 메타포를 써야 하느냐?라는 반론은 상당히 설득력이 있지만, 100% 설득적이지는 않습니다. 메타포 제거가 필수는 아니라고 생각하는 건, 메타포 사용의 이유가 그 한 가지는 아니기 때문이죠. 결국 당분간 두 가지 디자인 성향은 상당히 경쟁적으로 발전할 듯 합니다. 사람들은 자신의 환경이나 선호에 따라 선택을 하고, 논쟁을 하겠죠. 서로 또 영향을 주면서 보완할 겁니다.

윈도즈 진영의 말대로, 한번도 '폴더'를 보지 못한 아이들에게 '폴더'를 사용하는 일이 어처구니 없어지는 시대가 올까요? 아니면 한 번도 '어처구니'를 보지는 못 했지만, 자유롭게 '어처구니'라는 단어를 사용하듯이, 그것을 보았는지 여부는 아무 문제가 되지 않는 시대가 올까요?

어느 한 쪽의 '승리'라는 것이 있을까요? 만약 있다면 어느 쪽의 '승리'가 될까요?
 

참고:
스큐어모피즘: Can We Please Move Past Apple’s Silly, Faux-Real UIs?
가트너가 윈도8에 던지는 2가지 질문 (Tech It)
Windows 8 Real User Test 파문
UI expert: Windows users will hate the new Windows 8 experience (BGR interviewed usability expert Raluca Budiu of the Nielsen Norman Group)


[참고##Windows##]
[참고##메타포##]


팀블로그 pxd Story 구독 방법  블로그 글은 각 개인의 생각이며 피엑스디와 다를 수 있습니다.


Trackback 4 Comment 0
Ad Test...
2011.08.20 00:46

퍼소나로 완성하는 인터랙션 디자인 : Chapter 13. 메타포, 숙어, 어포던스

스터디 자료 공유합니다.


 


팀블로그 pxd Story 구독 방법  블로그 글은 각 개인의 생각이며 피엑스디와 다를 수 있습니다.


Trackback 0 Comment 2
Ad Test...