스큐어모피즘(Skeuomorphism )

스큐어모피즘(Skeuomorphism )

스큐어모피즘(Skeuomorphism )
Category
Share Story

PastedGraphic-232PastedGraphic-222

 

 

 

 

 

 

지난 한달 동안, 우리 분야의 가장 핫한 뉴스는 스캇 포스탈( Scott Forstall)의 해고였습니다.

얼마 전만 해도 스캇 포스탈과 조나단 아이브가 서로 동등한 경쟁위치에 섰다고 알려졌었는데, 그게 사실은 포스탈 해고의 전조였나 봅니다. 그래서 이제는 ‘제품디자이너’인 조나단 아이브가 HW, SW를 총괄하게 되었다고 하네요.
해고의 원인에 대한 다양한 분석이 있고, 개인적으로는 (1)스타 디자이너인 Sir 조나단 아이브와의 힘의 차이가 크고, 지향하는 바가 달라서 (2) 애플홈페이지를 통해 애플지도를 정식으로 사과한 사건에 정면으로 반박하여 서명하지 않은 사건 (링크) – 이 두 가지가 가장 큰 이유가 아닐까 합니다. 물론 맥 소프트웨어 수장이었던 버트란드 설렛이 퇴사한 사건의 연장으로 보고 있는 분들도 있습니다.
원인이야 어찌되었건, 이 사건은 스티브잡스의 죽음 이후 가장 큰 이슈임에는 분명합니다. 세계적으로도 포스탈의 해고와 관련하여 많은 뉴스와 전망이 이어지고 있구요. 어떤 방향으로든 트렌드의 변화로 이어질 것은 자명하기 때문이지요.

(포스탈의 해고와 관련한 몇 개의 링크들입니다.)

Why Apple sacked Scott Forstall

포스탈이 구글에 간다면 ^^

이야기가 좀 샜는데요.
오늘은 낯선 단어인 Skeumorph(ism)에 대해서 이야기해 보겠습니다.

스큐어모피즘은

조금 더 추려서 말하자면, “관습적으로 굳어진 대표 이미지를 모사하는 것” 이라 할 수 있습니다. 익숙하지 않은 디바이스/앱의 기능을 (현실을 모사함으로써) 보다 익숙하게 사용토록 하는 역할을 합니다.
개인적으로는 이 스큐어모피즘이 가장 잘 발현된 것이 바로 iBooks라고 생각합니다.

ipad-apps-009_medium

종이질감, 책갈피 표현 등 디자인적인 묘사도 뛰어나지만, 책의 구조를 그대로 가져 왔기 때문에 누구라도 온전히 iBooks 를 사용할 수 있게 했습니다.
하지만 잘못 사용하면 ‘의미없는 장식’이 되기 쉽습니다.
가장 좋은 예가 Find my iPhone 입니다.

Find-My-Friends_Social-Networking
가죽 texture 까지는 취향일 수 있으나, 저 스티치를 포함하여 전체적인 디자인 톤이 사용성에 전혀 기여하지 않기 때문입니다. 더욱이 이 디자인이 인터페이스와 연결되는 고리를 전혀 찾을 수 없다는 것도 문제입니다. (약간의 감성적인 정의를 해 주기는 합니다. find my iphone의 기능은 다소 악용의 소지가 있고, 때문에 감정적인 포지셔닝이 필요한 앱이기 때문이지요.)
똑같이 애플에서 만든 앱이지만, 두 앱의 결과는 확연히 다릅니다. 그 차이는 어디서 발생한 것일까요.
iBooks는 외향(the way things look)과 행위(the way things behave)의 양 측면을 고루 세공한 앱이고, find my iPhone은 외향만을 가져왔기 때문입니다.
어떤 디자인이든 마찬가지이겠지만, 기능과 합치하지 않는 디자인은 실험적이거나 실패작이거나 둘 중 하나입니다. 특히나 GUI 분야에서는 더욱 더 그러합니다. 타 분야보다 기술의 발전 속도가 무척 빠르고, 그에 비해 일반 유저들의 학습속도/일반화되는 속도는 더디기 때문입니다. 그래서 새로운 기능과 트렌드의 중점을 찾기란 여간 어려운 작업이 아닙니다.

(그 중간자로서 – 디자이너에게는 그 간극을 이어야 할 책임이 있기도 합니다. )
이런 관점에서 볼 때 스큐어모픽 디자인은 양날의 검이 되기 쉽습니다.
이해하기 쉽도록 디자인하려다가 되려 심미성과 장식성에 치중한 나머지 사용성을 해칠 수도 있고, 반대로 절제하는 최소한의 디자인을 지향하다가 밋밋하거나 불친절한 디자인을 하는 경우도 있지요. ( 전 window8을 이런 관점에서 걱정하고 있습니다. )

스캇 포스탈의 해고와 함께 스큐어모피즘에 대한 전반적인 재평가가 이루어지고 있습니다.
옹호하는 측과 반박하는 측이 거의 반반인 것 같구요.
제 개인적인 의견은… 조금 옹호하는 편입니다.
즐겁고/따듯하고/경험중심의 디자인이고/아트워크를 할 수 있으니까요. ^^
하지만 “아주” 주의해서 사용해야 한다는 전제를 덧붙이고 싶습니다.

스큐어모피즘을 적용할 때의 유의사항을 간단히 생각나는 대로 정리해 보았습니다.
1. 공간과 투시의 문제
– 구글 지도에서의 핀이나, 네이버에서의 포스트잇 (배너) 타이틀의 경우는

스크린샷-2012-11-16-오전-9_22_31 스크린샷-2012-11-16-오전-9_21_07

그 그림자로 인해 공간을 스스로 설정합니다. 일단 이런 오브젝트가 쓰인 곳에는 다른 공간 메타포가 들어갈 수 없거나 투시를 맞춰 주어야 하는데, 간혹 큐브 불릿을 넣거나 수평 테이블 등을 묘사하여 스큐어모픽한 공간을 스스로 깨뜨리는 실수를 하기도 합니다. 웹에서는 흔히 아래와 같이 공간 개념이 스스로 충돌하는 오류를 범하는 일이 많습니다.

Untitled-1
(공간투시가 다른 두 개의 오브젝트)

2. 지나치게 관습화된 은유
너무나 일반적이고 오래된 은유들은 오히려 사용성을 해하기도 합니다. 일례로 ‘카카오톡’의 경우, 말풍선 아이콘 때문에 나이 든 유저들은 카톡이 ‘문자’ 이상의 것(예:카톡기프트 및 부가서비스)을 하지 못한다고 생각하는 경우가 많습니다. 물론 이것이 비단 아이콘만의 문제는 아니겠지만, 관습화된 은유가 유저의 상상력을 제한하는 사례라 할 수 있겠습니다.

스크린샷-2012-11-16-오전-9_28_16
3. 과도한 설정으로 인한 이질감
iOS 6 업데이트와 함께 등장한 passbook의 경우 쿠폰을 지우는 액션을 직접적으로 파쇄기를 통해 보여주고 있습니다.

스크린샷-2012-11-16-오전-9_29_51

(패스북에서 쿠폰을 삭제할 때의 파쇄기 은유)

처음 봤을 땐 정말 신선하고 멋졌습니다. ^^
하지만 자주 쓰다 보니 식상하고, 또한 불필요한 모션 때문에 상당히 불편합니다. 실제를 너무 노골적으로 묘사하거나, 현실세계에서도 쾌적하지 않은 상황을 모사하는 것은 좋지 않습니다. (현실에서도 여러장의 종이를 파쇄하는 것은 꽤 성가신 일이잖아요. 한 장이면 재밌지만. ^^)

4. 사용성을 해치는 장식요소
장식요소는 여러모로 필요합니다. 디자인 통일성에 기여하거나, 톤을 설정하는 데 아주 유용하지요. 하지만 그것이 유저의 화면 파악을 방해한다면 문제가 될 수 있습니다.

Lemon_com-Wallet_Finance Find-My-Friends_Social-Networking

왼쪽은 최근에 흥하고 있는 lemon wallet이고, 오른쪽은 find my iPhone입니다.
둘 다 수첩 메타포를 사용하고 있으나, lemon wallet과 비교해 보면 스티치가 상당히 굵게 들어가 있어서 시야를 방해하고 있습니다. find my iPhone의 스티치는 컨텐츠부분과 조작부를 명확히 구분하려는 의도가 있었겠지만, 지나치게 시선의 흐름을 끊고 있으며, 심지어 하단 탭바에서 메뉴 탭 영역을 약 20px이상 줄이고 있습니다.

5. 감성 관리의 문제

대개의 스큐어모픽 디자인은 속성상 뭔가 아날로그적인 감수성을 갖고 있어서, 정서적으로 포근하거나 따듯한 감정을 동반하기 쉽습니다. 그렇기 때문에 이성적인 판단을 해야 하는 증권관련 앱이나 차가운 감성을 요하는 시크한 프로젝트들에는 적용에 주의할 필요가 있습니다.

6. 단, texture의 경우는 예외인데요. (터치 디바이스에 한해서) texture는 그 자체만으로 훌륭한 기능입니다. 통상적으로 tangible UI라고 부르는 모든 디바이스 인터페이스에 있어서 가상의 촉감이 주는 영향력은 대단하기 때문입니다. texture는 스큐어모픽한 속성이라기 보다 Sizzling(광고용어)과 더 가깝습니다.


시기적으로 스큐어모피즘은 약간 철지난 컨셉일 수도 있습니다. 이미 아이폰이 나온지도 7년(?)정도 되었고, 스마트폰 유저들의 대개는 메뉴얼을 찾아보지 않을 정도로 익숙해져 있습니다. 이제 현실을 모사해야 할 만큼 친절하지 않아도 다들 알아서 잘 사용하지요. ^^

하지만, 여전히 유효합니다. 현실세계의 메타포가 주는 안정감은 다른 디자인으로 커버할 수 없는 부분이기 때문입니다.

오늘은 좀 두서가 없네요. ^^

그대신 링크가 많으니 링크들을 꼼꼼히 읽어보시면 GUI의 디자인 운용에 대해 많은 도움이 되리라 생각합니다. 저보다 잘/친절하게 도움을 주는 자료라 확신합니다. (포스탈에 대한 링크들은 가십이니 굳이 안읽으셔도 됩니다만…)

간단히 정리하겠습니다.
1. 스큐어모피즘은 경험구조( 혹은 멘탈모델 )가 현실과 유사하거나 직접적인 은유가 가능한 경우에 적극적인 사용을 권합니다. 또한, 타겟유저의 디바이스 숙련도가 낮은 경우 (즉, 나이 많은 유저를 타겟으로 할 경우)에도 효과적입니다.
2. 단, 이 경우에 있어서 기능이 시각적인 단서들을 뒷받침하지 못한다면 그저 장식요소에 지나지 않게 됩니다. (texture를 제외하고는) 언제나 동작요소, 기능요소와 함께 생각해야 합니다. 일반적인 경우에는 조금 소극적으로 운용해야 할 필요가 있습니다.
3. 기기 경험이 많은 (대개는 젊은) 유저들에게는 오히려 이러한 것이 장애가 될 수 있습니다. 디바이스에 익숙한 세대들에게는 오히려 window8 과 같이 군더더기없는/목적지향적인/플랫한 디자인이 유용할 수 있습니다.
4. 스큐어모피즘과 tangible UI의 운용에 있어서 가장 어려운 부분은 일관성과 응집성입니다. 만일 스큐어모피즘을 업무에 적용하려면 그 이전에 충분한 리서치를 통해서 타당성을 검증하는 작업이 이루어져야 합니다. 충분하게 상황이 그려지지 않은 상태에서 적용하게 된다면 작업중에 서로 충돌하거나 구조상 서로 어긋나는 부분이 발생할 수 있기 때문입니다. (간단하게는 이전 뉴스레터에서 다뤘던 ‘층위구조’ 등에서 오류를 범할 수 있습니다. )

감사합니다.

 

ps. 좋은 글이지만 어느 부분에 넣어야 할지 몰라서 뒤에 따로 링크를 덧붙입니다. 잘 쓴 글이고 통찰력이 있습니다. 일독을 권합니다. ^^

스큐어몰피즘이 애플의 디자인 문제가 아니다.

 

pss. 스큐어모피즘 (글에서는 리얼메타포라고 말하는) 에 관한 김성연 선임의 글도 함께 첨부합니다. 참고 바랍니다. ^^

 

미디어 이론에 재매개(remediation)라는 개념이 있다.

한 미디어가 다른 미디어 전략을 차용하는 현상. 

가령 뉴미디어는 올드미디어의 전략을 차용, 그러다가 시간이 지나면 모방에서 벗어나 자기 고유의 전략을 갖는다.

그때쯤이면 거꾸로 올드미디어가 외려 뉴미디어의 전략을 차용하는 역전현상이 일어나게 된다.

사진이 처음에 등장했을 때에는 회화의 전략을 차용했다.

하지만 사진이 자신의 전략을 갖게 되자, 그때 부터 회화가 외려 사진의 전략을 베끼기 시작했다.

웹디자인의 경우 실세계의 모습과 현상, 사물의 형태나 상황을 다른 매체에 그대로 재현하는 방식으로 한국 디자이너들 사이에서는 ‘리얼메타포’라는 말로 사용하기도 한다.

<리얼메타포에 대한 비난의 변호>

리얼메타포를 둘러싼 미니멀리즘주의자들(주로 편집쪽의 정통주의 디자이너들)의 비난은 꽤나 오랜시간동안 디지털 디자인 전반의 이슈거리가 되었다. 

그들의 비판들을 예로 들면 하나의 시스템안에서 어플리케이션들의 대표적 상징들의 개별성 때문에 look & feel의 일관성을 유지하기 힘든점이나, 실생활의 경험들을 디지털로 옮겨왔을때 도리어 사용자 경험이 불편했던 점이다.

또한 디자이너가 새로운 매체에 대한 창의적 결과물을 기대하기 힘들다는 점이나 그 결과물의 조형성이 다분히 키치하다는 점도 포함된다.

하지만 GUI분야에서 리얼메타포 전략을 꾸준히 사용하는 애플의 경우, 앞서 말한 재매개의 과도기적 상황에 전략적으로 머물고 있다는 생각이 든다.

스마트폰이 도래한지 채 십년이 되지 않았고, 우리는 아직도 많은 아날로그 경험과 디지털의 경험사이를 오가고 있다.

선원이 모두 배에 탄다고 해서 배가 출항할수 있는것은 아니다.

배가 출항할수 있는 시점은 배에 탑승할 승객 모두가 제자리에 앉았을 때다.[catlist name=”Design Talk” numberposts=5 excerpt=”yes” pagination=”yes” excerpt_size=”0″ title_only=”yes“]