티스토리 뷰

 

대형마트 앱의 설계를 태스크 기반 인터랙션 디자인 방법을 적용하여 기획하는 전 과정을 상세히 설명한 책. 

《UX 디자인의 7가지 비밀》 박지수, 김헌 공저 (2013.3)

 

 

비밀1.
시스템 관점에서 UX 디자인을 넓게 본다
 

삼색볼펜과 대형마트, 도로 교통 시스템 등을 예로 들어 UI, 인터랙션, UX의 개념과 차이를 이야기 한다. UI는 입력장치와 출력장치 그리고 출력장치를 통해 제공되는 정보를 말한다. 

 

삼색볼펜 예

볼펜 UI의 입력장치
세 가지 색 중 하나를 선택하는 데 쓰는 슬라이더, 볼펜을 쥘 때 손가락이 아프지 않게 해주는 고무 패드, 볼펜심을 교환할 때 볼펜 중간 부분을 돌려 빼게 해주는 나사 구조물, 볼펜을 옷 주머니에 고정시키는 데 쓰는 클립

볼펜 UI의 출력장치
위의 입력장치를 사용자가 사용했을 때 볼펜이 제공하는 반응들이다. 색을 선택하는 슬라이더를 밀면 해당 색 볼펜심이 나오고, 고무 패드를 손가락으로 쥐면 손가락에 부드러운 촉감이 느껴지고, 고무 글을 쓰면 볼펜에서 잉크가 나와서 글이 써지고, 볼펜 상단부를 돌리면 빙글빙글 돌아가며 빠진다. _35

 

볼펜의 인터랙션
글을 쓰기 위해서 검은색 슬라이더를 밀면 검은색 볼펜이 나오고, 볼펜의 고무패드를 쥐고 글을 쓰면 볼펜에서 잉크가 나와서 글이 써진다. 이어 중요한 부분에 밑줄을 긋기 위해서 빨간색 슬라이더를 밀어서 빨간색 볼펜이 나오게 한 다음 중요한 부분에 밑줄을 긋는다. 필기를 마친 뒤에는 검은색이나 파란색 슬라이더를 살짝 눌러서 빨간색 볼펜을 안으로 집어넣고, 볼펜 클립을 상의 주머니에 꽂고 다른 곳으로 이동할 수도 있다. _36

 

볼펜의 UX
필기감이 좋고 오래 글을 써도 손가락이 아프지 않게 디자인된 볼펜은 사용자에게 좋은 경험을 제공한다. 
그러나 고급 볼펜은 필기감, 편안함뿐만 아니라 고급스러운 디자인으로 명품 볼펜을 소유한다는 자부심까지 제공한다. 사용자가 제품에 대해 느끼는 만족감, 고급감, 브랜드 등이 UX에 포함되는 것이다. _39

 

볼펜 UI의 출력장치에 대한 설명이 좀 의아한데 아마도 볼펜 구멍펜촉, 볼펜심 리필을 위해 고안된 돌려서 상하를 분리시키는 볼펜 몸통 등을 설명하려 한 것 같다. 이렇게 해석해보니 UI와 인터랙션의 차이가 느껴진다. 

아니, 출력장치와 출력장치가 제공하는 정보까지 포함해서 설명한 거라면 책 속의 문장이 맞는 건가? 


인터랙션은 사용자가 어떤 목적을 달성하기 위해서 제품의 UI를 사용해서 제품과 상호작용하는 과정을 포함한다. 이 점에서 인터랙션은 UI를 포함하는 상위 개념이다.
목적 달성 절차를 포함하면 인터랙션이고, 포함하지 않으면 UI인 것이다. _37

 

책에서는 UX의 범위를 둘로 나누고(협의의 UX와 광의의 UX) 광의의 UX는 전 회사 차원에서 협력해야 하는 일이라고 말한다. 볼펜의 UX를 보면 앞 문장은 협의의 UX를 설명하고, 뒤 문장은 광의의 UX를 설명한 것 같다. 

 

제품을 구입한 후 제품을 사용하는 과정에서 경험하는 UX를 협의의 UX라고 한다면, 제품 구입을 위한 정보 탐색 단계부터 대안을 평가하고 구매하기까지 전 과정에서 경험하는 UX를 광의의 UX라고 볼 수 있다. _41

UI 디자인은 사용자의 목적 달성 절차를 설계하는 것이 아니라 입출력 장치만을 디자인하는 것을 의미하기 때문에 범위가 너무 좁다. UX 디자인은 사용자가 제품을 구입하기 전부터 구입해서 사용하고 폐기하는 전 과정을 포함하기 때문에 전 회사 차원에서 협력해야 달성할 수 있는 목표이다. _45

 

저자는 독자들이 UX 디자인을 지향하는 인터랙션 디자이너가 되기를 바란다고 말한다. UX 디자인을 지향하는 디자이너는 어떤 자세를 가져야 할까? 책에서는 제품 내부에 시야를 가두지 말고 제품을 둘러싼 시스템 전체로 시야를 확장하라고 말한다. 

 

일반적으로 제품을 디자인할 때 디자이너의 시야가 제품 내부에 갇히는 경우가 많다. 만약 MP3 플레이어를 디자인할 때 시야를 MP3 플레이어 안으로 한정한다면, 재생 목록을 만들거나 곡을 선택해서 플레이 하거나 좋아하는 곡에 표시하거나 삭제하는 기능만 보인다. 
그러나 시야를 MP3 플레이어 밖으로 확장하면, 사용자는 어디서 곡을 다운로드 받는지, 그 곡을 어떻게 고르는지, 다운로드 받은 곡을 PC에 저장한 뒤에 어떤 휴대기기로 옮기는지, 다운로드 받은 수많은 곡들 중에서 어떤 곡을 주로 듣는지, 음악을 어떤 상황에서 어떤 휴대기기로 주로 듣는지, 영화, TV 드라마, 뮤지컬을 보다가 마음에 드는 음악이 있을 때 어떻게 찾아서 다운로드 받는지 등 음악을 소비하는 전 과정을 엿볼 수 있게 된다. _42

제품 밖으로 시야를 체계적으로 확장하는 방법은 제품이 속한 시스템 전체를 보는 것이다. _43

 

디자이너의 ‘시야 확장’에 관한 것은 디자인과 관련된 책에서는 자주 나오는 단골 이야깃거리 같다. 시약 확장에 대한 이야기가 나올 때마다 좋은 내용이라고 생각하며 가볍게 넘겼지만 이 책에서는 나의 일과 직접적인 관련 있는 사례로 설명되어 훨씬 와 닿았다. UX 디자인을 지향하는 디자이너의 자세로서 제시한 점도 그렇고. 

책에서는 대형마트 앱을 만들 때 쇼핑시스템 전체로 시야를 확장해서 아이디어를 도출하는 과정이 간략하게 설명된다. 도출된 아이디어의 실현 가능성이 얼마나 될지는 의문이다. 내가 자주 이용하는 홈플러스의 계산대 직원들의 모습에서 느끼건대 쉽지 않은 일일 것 같다. 

 

얼마 전에 읽은 책에서 어떤 건축가의 말을 인용한 문장이 있었는데 꽤 인상 깊었다. 이 책에서 시야를 확장하라는 내용과 일맥상통하는 이야기 같다. 

건축가 엘리엘 사리넌의 말처럼 “항상 그것보다 더 큰 컨텍스트에 있게 될 때를 고려해 디자인하라. 어떤 방에 놓인 의자, 어떤 집의 방, 어떤 환경 안의 집, 어떤 도시 계획 안의 환경”

《Simple and Usable 단순한 디자인이 성공한다》 54

 

 

 

비밀2.
사용자의 인지적 특성을 인터랙션 디자인에 반영한다

사용자는 제품의 사용법을 그대로 암기하는 것이 아니라 이전에 사용했던 유사 앱의 사용법을 동원해서 새로운 앱의 사용법을 예측하므로 이러한 사용자의 기대와 잘 맞도록 인터랙션을 설계해야 한다. 

또한 사용자의 스키마와 잘 일치하는 제품은 배우지 않아도 사용법을 예측할 수 있어서 사용하기 편리하지만, 그렇지 않은 제품은 사용법을 예측하기 어렵고 배워도 오래 기억하기 어렵다. _71

 

여기서 설명하는 사용자의 스키마는 《디자인과 인간심리》, 《오래가는 UX 디자인》에서 나오는 사용자의 심성모형과 의미가 비슷하다. 책의 뒤로 가면 태스크 지식이라는 용어가 나오는데 이것도 심성모형과 같은 의미로 사용되었다. 

 

사용자의 스키마를 따르는 디자인을 하게 되면 표준적이고 일반화된 제품이 되기 쉽다. 그렇게 되면 사용성은 좋아질 수 있지만 제품의 차별성에서 문제가 생긴다. 이점에 대해서 저자는 노리아키 카노의 제품의 3가지 요소에 대해 소개하고, 각 요소와 디자인 품질, 사용자 만족도 사이의 관계에 대해 설명함으로써 대안을 제시한다. 


필수요소는 없으면 안 되는, 반드시 있어야 하는 요소를 의미하고, 부가요소는 없어도 그만이나 있으면 좋은 요소를 의미한다. 그리고 매력요소는 그것 때문에 제품을 구매하게 만드는 매력적인 요소를 의미한다. 보통 마케팅에서는 이러한 요소를 USP(Unique Sales Point)라고 부르고 이를 기반으로 광고를 만든다. _73

필수요소는 아무리 좋게 설계해도 일정 수준 이상으로 만족도가 커지지 않는다. 대신 제품만의 차별화 요소는 바로 매력요소에서 찾아야 한다. 매력요소는 사용자가 제품을 구입하도록 유인하는 중요한 요소로서 매력요소를 제품의 차별점으로 활용하면 경쟁에서 살아남을 수 있다. _77

한때 매력요소였던 것도 시간이 흐름에 따라 시장에서 도태되거나 필수 혹은 부가요소로 변할 수 있다. (…) 그러한 까닭에 제품을 만드는 사람들은 끊임없이 새로운 매력요소를 발굴하고자 노력하고, 그 결과 기능들이 많아지면서 제품은 더욱 복잡해지는 것이다. UX 디자이너의 중요한 임무 중의 하나는 이러한 복잡성을 관리하는 일이다. _77

 

 

 

비밀3.
설계원칙을 명확하게 이해하고 인터랙션 디자인에 적용한다

세 번째 장에서는 스마트폰 애플리케이션 디자인에 적용할 만한 UI 설계원칙 20가지를 소개한다. 먼저 도널드 노먼, 벤 슈나이더만, 제이콥 닐슨. 이 세 사람이 이야기한 UI 설계원칙들을 13가지로 요약하고, 추상적으로 느껴지는 이 원칙들을 스마트폰에 적용할 만한 20가지 원칙으로 정리해서 사례와 함께 설명한다.

 

그 중에서 개인적으로 흥미가 당기는 원칙들. 

  1. 디폴트 모드를 신중하게 결정하고 스마트하게 변하게 하라 (원칙 4)
    스마트폰의 지하철앱의 디폴트 위치와 줌 레벨
    디지털카메라에서 사진 삭제를 여러 차례 반복할 때
  2. 중복코딩의 이점을 활용하고 간섭이 일어나지 않도록 설계하라 (원칙 10)
    신호등, 아이폰의 삭제 버튼
  3. 화면 간 이동 시 순간적 변화를 최소화하고 의미 있는 움직임을 부여하라 (원칙 16)
    시각연속성에 의한 태스크의 맥락 유지. 아이폰에서 사진을 이메일에 첨부할 때의 움직임
  4. 사용자가 기억하게 하지 마라(회상 보다 인식) (원칙 17)
    머릿속지식 → 세상속지식
    세탁기, 전자레인지, 전화번호부에서 문자로 연락처 전송
  5. 인터페이스를 접어라 (원칙 18)
    정보의 폴딩 예 : 잘 사용되지 않거나 고급 사용자를 위한 메뉴는 클릭할 때만 보이도록 감춰둔다
    힉의 법칙 : 선택 가능한 대안의 수가 많을수록 의사결정을 내리는 데 오랜 시간이 걸린다
  6. 사용자의 태스크 수행에 연속성을 부여하라. 팝업을 최소화하라(태스크의 연속성) (원칙 20)
    시각적인 연속성에 대한 부분. 예를 들어 스마트폰으로 DMB 시청 중에 전송된 문자메시지 처리, 문자메시지 삭제하는 방법에 따라 연속성이 깨지는 사례와 유지되는 사례

 

아무리 잘 설명해도 어쩔 수 없이 지루한 이론적인 내용을 짤막하게 요약해 놓아 한번에 정리해서 읽어보기에 좋고, 스마트폰과 관련된 사례들이 많아서 좋다. 

 

이 책의 백미는 비밀4부터 시작된다. 태스크 분석부터 시작해서 대형마트 앱을 태스크 기반 인터랙션 디자인 방법으로 설계하는 전 과정이 소개된다. 이와 관련된 책의 나머지 내용은 다음 포스팅에서…

 

관련 포스팅

대형마트 앱 설계 과정《UX 디자인의 7가지 비밀》 NOTE 2