디자인의 메타포와 아놀로지
UX 디자인 배우기 #132
Today UX 아티클
오늘은 디자인의 메타포와 아놀로지 에 대해 애기하고자 합니다.
Nich Babich의 원문을 번역한 글입니다
휴먼-컴퓨터 인터랙션과 사용자 경험 디자인에서는 기술의 기능과 어포던스로 사용자의 관심을 끌기 위해 항상 메타포(metaphor; 비유)와 아날로지(analogy; 유추)에 기대게 됩니다. 메타포와 아날로지는 밀접한 관계를 맺고 있지만, 그 차이를 분명히 알아두는 것이 좋습니다. 둘을 구분하는 기준을 명확히 알아두면 특정 상황에서 둘 중 어느 하나를 사용해야 하는 이유를 아는 데 도움이 될 것입니다.
메타포
메타포는 디자인하고 있는 무언가를 표현하기 위해 다른 공간에서 사용되는 것을 차용하는 것을 뜻합니다.
익숙하지 않은 것을 익숙하게 만들어 주는 메타포 (데스크톱 메타포)
메타포는 새롭고 익숙하지 않은 무언가를 익숙하게 설명하는 데 도움이 됩니다. 휴먼-컴퓨터 인터랙션과 사용자 경험 디자인 분야에서 가장 유명한 메타포는 Alan Kay의 “데스크톱 메타포”입니다. 데스크톱 메타포는 우리를 명령어로 된 커맨드 라인의 세계에서 디지털화된 오브젝트의 세계로 옮겨주었습니다.
새로운 그래픽 유저 인터페이스를 유행시킨 1984년의 오리지널 Mac OS 데스크탑긍정적인 연상을 하게 해주는 메타포 (애플의 아이맥)
메타포는 감성을 불러일으키기도 합니다. 애플이 2세대 아이맥(iMac)을 디자인했을 당시, 스티브 잡스와 조니 아이브는 같이 정원을 거닐면서 2세대 아이맥의 모습을 그려보려고 했었다고 합니다. 그때 스티브가 해바라기를 보고 해바라기처럼 만들어야 한다는 제안을 하였다고 합니다. 아래 그림을 보시면 스크린이 마치 해바라기처럼 작동하게 만들었다는 것을 알 수 있을 겁니다.
해바라기라는 메타포를 활용하여 iMac을 좀 더 인간적으로 만들었습니다.사람들을 설득해 주는 메타포(핀터레스트)
세상에 존재하는 것과 전혀 다른, 새로운 제품을 제안하려 한다면, 고객이 이미 알고 있는 무언가를 적어도 부분적으로 나마 활용하여 설명할 필요가 있을 것입니다. 그 어떤 소셜 네트워킹 사이트보다 빠르게 천만 유저를 확보한 핀터레스트(Pinterest)는 핀 보드라는 메타포를 중심으로 돌아갑니다.
유저는 웹에서 찾은 이미지에 “핀(pin)”하여 주제별 컬렉션으로 정리할 수 있습니다. 이러한 메타포는 실제로 창의적 사고를 강화해주기도 합니다.
의미 없는 메타포는 지양해야 한다 (마이크로소프트의 클리피)
디자인 메타포를 고르는 것은 정말 어려운 일입니다. 완전히 잘못된 디자인 메타포를 고를 가능성도 언제나 존재하죠. 그리고 우리는 모두 나쁜 메타포가 완전히 잘못된 결과를 낳을 수도 있다는 점을 알고 있습니다.
마이크로소프트의 클리피(Clippy)도 그중 하나였습니다. 클리피는 지금까지 대중에게 배포된 최악의 유저 인터페이스 중 하나로 꼽힙니다. 가장 인기 없는 기능 중 하나가 되어버렸죠. 클리피는 우리가 메타포를 너무 진짜처럼 보이게 만들거나, 현실과 동떨어지게 만들면 오히려 더 문제가 될 수 있다는 점을 보여주었습니다.
마이크로소프트의 클리피는 마이크로소프트 워드 스크린의 코너에 팝업 형태로 나타나는 애니메이션 효과가 들어간 종이 클립이었는데, 유저의 사용 경로에서 버티고 서서 유저를 방해했었습니다.
무턱대고 사물을 그대로 따라 만든 메타포는 지양해야 한다 (애플의 아이북)
애플의 아이북(iBook)이 그 예입니다. 아이북은 책장 모양의 다지 않을 사용했었는데, 3D로 나무 느낌의 선반을 완전히 재현해냈었습니다. 이 책장 메타포는 책장에 대해 유저가 가지고 있는 이전의 지식(물리적인 미디어를 보관하고 정리하는 장소)을 디지털 환경에 접목시키고자 하는 목적으로 사용되었습니다. 선반과 나무 재질을 재현한 이 책장은 앱의 기능과는 연관성이 없었고 오직 메타포를 강화하기 위해서만 사용되었던 것입니다. 애플은 나중에 이러한 스큐오모픽한 책장 디자인을 없애게 됩니다.
애플의 아이북은 유저에게 무엇이 보여지고 있는지, 그와 관련하여 무엇을 할 수 있는지 이해할 수 있도록 소나무로 된 책장을 메타포로 사용하였습니다.아날로지(Analogy)
아날로지는 보통 같은 카테고리에 속하는 서로 공통점이 있는 두 가지를 묶어서 인지하는 것을 뜻합니다. 반면 메타포는 다른 카테고리에 있는 것을 차용하는 것이죠.
새로운 것을 비슷하게 보게 해주는 아날로지 (네스트)
인간은 지속적으로 그리고 자연스럽게 유추를 통해 세상을 이해하려고 합니다. 유추는 우리가 새로운 것을 익숙한 것과 연결하여 볼 수 있게 해주며, 궁극적으로 문제에 대한 독창적인 해결책을 제시해줍니다.
그 좋은 사례는 온도 조절 장치 디자인에 아날로지를 사용한 네스트(Nest)입니다. 기본적으로, 이 디자인은 하니웰(Honeywell)의 온도 장치에서 따온 것입니다. 둥근 모양으로, 돌려서 온도를 잴 수 있는 장치였죠.
네스트는 “굉장히 익숙한” 그 모양을 따와서 어떤 기능을 하는 장치인지 쉽게 보여주었습니다.
하니웰의 상징적인 원조 원형 온도 조절 장치(왼쪽)와 네스트의 온도 조절 장치(오른쪽). 완전히 신기술이 접목된 장치이지만, 익숙한 형태로 표현하였습니다새로운 개념을 이해하도록 도와주는 아날로지(페이스북)
인간의 심리는 지속적으로, 그리고 무의식적으로 새로운 개념을 기존에 알던 개념과 비교함으로 그것을 이해하려고 합니다. 새로운 제품을 이해하는 데 도움을 얻기 위해 과거의 경험과 새로운 상황 사이에서 공통점을 찾는 것이죠. 소통하는 방식을(그리고 미디어의 얼굴도) 완전히 바꿔놓은 페이스북(Facebook)이 존재하기 전, 마이스페이스(MySpace)라는 것이 있었습니다.
마이스페이스도 같은 고객층을 타깃으로 하고 있었으며 페이스북보다 더 먼저 세상에 나왔었습니다. 하지만 마이스페이스에는 큰 문제점이 있었습니다. 많은 유저가 보기에 프로필 페이지가 좀 이상했던 거죠. 또한 마이스페이스는 유저가 프로필을 자신의 취향에 맞게 바꿀 수 있게 해주었습니다. 그 결과 아래와 같은 프로필 화면이 만들어지게 되었던 것입니다.
전형적인 마이스페이스 프로필 페이지페이스북은 상당히 직관적인 접근법을 사용하였습니다. 실제 인쇄된 형태의 학생 프로필을 아날로지로 활용한 것이죠. 많은 사람들이 이런 형태의 데이터에 대한 경험을 가지고 있었기 때문에, 페이스북이 대부분의 유저에게 좀 더 이해하기 쉬우면서도 친숙하게 다가왔던 것입니다.
페이스북은 실제 인쇄물로 나오는 프로필 페이지를 본따서 디지털 프로필을 디자인했습니다.결론
메타포나 아날로지와 같은 심벌을 사용하여 의미를 전달하면 여러분이 말하고자 하는 바를 단순화할 수 있습니다. 메타포와 아날로지는 유저를 교육하고 도움을 주는 데 유용한 툴일 뿐만 아니라 유용한 내용을 풍성하고 영향력 있는 내용으로 바꾸어주고, 좋은 제품을 훌륭한 제품으로 바꿔주는 마력을 지니고 있습니다.
라이브 클래스 PM VOD 패키지(리서치/분석/전략/설계)
178여개 UX 강좌(총 300시간) PM VOD 패키지 98% 할인 이벤트!!!! 매일 하루에 딱 한명만!!!! 선착순 1명!!!!
