book_025. 사용자 경험의 요소(The Elements of User Experience) - 변하지 않는 UX 디자인 원리

 The Elements of User Experience

사용자 경험의 요소

변하지 않는 UX 디자인 원리

 

 

 

저자 제시 제임스 개럿 | 역자 정승녕

 

출판사 : 유엑스리뷰

초판 발행(번역본) : 2013년 6월 20일

원제  : The Elements of User Experience. 2/E

  

 

[ 저자 소개 ] 

 

저자 : 제시 제임스 개럿
저자 제시 제임스 개럿(JESSE JAMES GARRETT)은 샌프란시스코의 사용자 경험 자문 회사인 어댑티브패스(ADAPTIVE PATH)의 설립자 중 한 명으로, 1995년부터 AT&T, INTEL, BOEING, MOTOROLA, HEWLETT-PACKARD, NATIONAL PUBLIC RADIO 같은 기업들의 웹 프로젝트를 수행했다. 제시는 정보 설계를 문서화할 때 사용하는 시각어휘 목록(VISUAL VOCABULARY)을 공개하는 등 사용자 경험 분야에 공헌했으며, 이 도형들은 오늘날 전세계의 많은 회사에서 사용되고 있다. 제시는 정보설계와 사용자 경험이라는 주제에 대해서 활발한 강연 활동을 하고 있으며, 개인 웹사이트는 정보 설계에 관한 자료를 얻을 수 있는 가장 인기 있는 곳 중 하나가 되었다,

역자 : 정승녕
역자 정승녕은 KAIST에서 산업디자인을, 연세대학교에서 인지과학을 전공했다. 삼성종합기술원 HCI LAB. 및 삼성전자 디자인경영센터 UI 연구소에서 8년간 재직하면서 UI 기술의 장단점을 최적의 사용자 경험으로 디자인하는 업무를 담당했으며, 관련 부서와의 협업을 통해서 UI 디자인과 사용성 평가 과정의 효율성을 향상시키기 위한 업무를 수행했다. 현재는 게임 회사인 REALTIME WORLDS에서 LEAD UX DESIGNER로 일하며 UI에 궁극의 사용자 경험인 ‘재미’를 접목하기 위해서 2년째 고군분투하고 있다. 관심 있는 주제를 공유하고 토론하기 위해 블로그를 운영한다.

 

 

**

|  목차  |

1장 사용자 경험, 왜 중요한가 
__일상 속의 불상사 
__사용자 경험에 대한 소개 
__제품 디자인에서 사용자 경험 디자인으로 
__경험(을 위한) 디자인: 중요한 것은 사용이다. 
__사용자 경험과 웹 
__좋은 사용자 경험이 사업성을 높인다 
__사용자에 대한 고려 

2장 UX 요소를 만나다 
__다섯 겹의 층 
__구축은 아래에서 위로 
__태생적인 이중성 
__사용자 경험의 요소 
__UX 요소의 활용 

3장 전략층:제품 목표와 사용자 요구 
__전략 정의하기 
__제품 목표 
__팀의 역할과 업무 절차 

4장 범위층:기능 사양과 콘텐츠 요구사항 
__범위의 정의 
__기능과 콘텐츠 
__요구사항 정의 
__기능 사양서 
__콘텐츠 요구사항 
__요구사항의 우선순위 

5장 구조층: 인터랙션 디자인과 정보 구조 설계 
__구조의 정의 
__인터랙션 디자인 
__정보 구조 설계 
__팀 역할과 업무 절차 

6장 골격층:인터페이스 디자인, 내비게이션 디자인, 정보 디자인 
__골격의 정의 
__관습과 은유 
__인터페이스 디자인 
__내비게이션 디자인 
__정보 디자인 

7장 표면층:감각적 측면의 디자인 
__표면의 정의 
__감각 속의 논리 만들기 
__시선을 따라 흘러가라 
__대비와 통일성 
__내적 일관성과 외적 일관성 
__색상 팔레트와 타이포그래피 
__디자인 구성도와 스타일 지침서 

8장 요소의 응용 
__올바른 문제 제기 
__마라톤과 단거리 경주 

"사용자 경험의 요소 - 변하지 않는 UX 디자인 원리" 에 관한 서평  | 2019.03.18

″

UX 실무자에게 기초가 되는 구조 이해

서비스 기획자라는 직함을 달고 서비스 기획, 리서치, 인터뷰, 구조 설계, 디자인까지 다 아우르며 실무를 익히고 있는 요즘, 선임께서 권해주신 책이다. 어떻게 보면 아주 기초적인 내용이지만 실무에서 꼭 이해해야 하는 UX 구조에 대한 내용이었다. 

사용자 경험이 중요한 이유는, 우리가 일상생활 할 때 잘 느끼고 있지 못하더라도 모든 서비스나 제품에 녹아들어져 있는 요인으로, 이 요소가 잘 고려되어 있지 않으면 사소한 것들이 쌓여 크게는 그것들을 사용하는 우리의 삶의 질에 영향을 끼칠 수 있다는 것이다.

이처럼 좋은 사용자 경험이 곧 좋은 제품이나 서비스를 만들어내기 때문에 비즈니스에 밀접하게 관여되어 역할을 하게 된것 같다.

이 책에서 주로 강조되는 바는 1. 전략층, 2.범위층, 3. 구조층, 4. 골격층, 5. 표면층 이 5가지 계층에 step by step으로 직무를 수행해 나갔을때 좋은 결과물이 나온다는 것이다. 즉, 전략층이 올바로 다져지지 않았는데 시간이 없다고 혹은 요소가 부족하다고 해서 범위층이나 구조층으로 넘어가버린다면, 결국 첫번째 단계인 전략층에서 탄탄하게 쌓지 못했음으로  발생되는 문제가 터지고 만다는 것이다.

이 제품 혹은 서비스에 대해 우리가 얻고자 하는 바는 무엇인지, 상대방(클라이언트)나 사용자는 얻고자 하는 바가 무엇인지 정의해야 한다. 이를 기반으로 사용자 요구를 조사하고 맥락에 맞는 task를 만들어 낼 수 있을 것이다. 

위와 같은 과정이 전략층이었다면 범위층으로 넘어가서 프로젝트 범위를 설정해야 한다. 지금 버전1 단계에서 해야 할 일과 다음 버전2 단계에서 해야 할 일을 규정짓고 개발항목, 범위를 확정해야 한다. 이것이 중요한 이유는 기획,디자인과 개발간의 커뮤니케이션과 우선순위가 흔들리지 않아야 하지 때문이다.

이 과정이 끝나면 ‘구조층’으로 넘어간다. 구조층은 좀 더 구체적인 UI설계와 인터렉션디자인, 정보구조 설계에 이루어진다. 

이 단계에서 IA (Information Architecture)와 네이베이션 산출물이 나올 것이다. 구조층과 골격층이 조금 헷갈렸는데, 기능 하나를 가지고 설명해볼 수 있다. 예를 들어 사용자가 웹사이트에서 “결제”를 한다고 할때 구조층에서는 사용자가 어떻게 결제 페이지로 들어가는지를 설계하는 것이고 골격층에서는 결제 페이지에서 인터페이스 요소들의 위치를 규정하는 것이다. 즉, 구조층에서는 기능에 대한 로직을, 골격층에서는 기능의 인터페이스 디자인을 권장한다.

구조층 설계 이후 골격층으로 넘어가는데 이 골격층은 표면층 아래 자리잡고 있는 골격으로서, 디자인이 입혀지기 전 와이어프레임을 떠올리면 된다. 앞에서 예로 든 바와 같이 결제 페이지를 만들때 필요한 요소들을 구조층에서 정의해주면 골격층에서는 해당 버튼, 사진, 아이콘 등의 배치를 설계한다. 

마지막으로 표면층은 가장 비쥬얼 디자인, 그래픽 디자인적 요소들이 많이 들어가 있는 단계이다. 우리가 접하는 결과물에 가장 가까운 형태이며 디자인 컨셉에 맞는  인터렉션 디자인 및 로고, 아이콘, 타이포그래피, 색상 등이 적용된 ‘디자인 목업’이 산출물로 나올 수 있겠다.

실무를 하면서 금방금방 넘어가는 이 단계들을 대충 어림잡아 구분은 하고 있었지만, 이 책을 통해 각 단계별로 필요한 요소가 무엇인지 다시한번 정리할 수 있었고, 각 단계를 지키지 않고 넘나들며 작업하는 것은 위험한 행위라는 것을 알았다. 

프로젝트 형태에 따라 어떤 단계는 축소되어 금방 넘어가거나 외주를 맡기는 등 다양한 형태로 변형이 일어날 수 있겠지만 기본 구조를 탄탄히 정리해 머릿속에 넣고 길을 잃어버리지 않도록 노력해야겠다.

∙∙∙✓∙∙∙

이 책에서 말하는 "변하지 않는 UX 디자인 원리" 라는 것은 결국 위 그림에 모두 담겨있다고 볼 수 있다. 

이 구조들을 소개하기 전에 먼저 "사용자 경험이 왜 중요한지", 도대체 "사용자 경험(중심) 디자인"이란 무엇을 말하는 개념인지 살펴보고 갈 필요가 있다.

﹅﹆﹅﹆ Chapter 1. 사용자 경험, 왜 중요한가

| 사용자 경험이란?

사용자 경험 이라는 것은 우리가 눈을 뜨고 아침을 시작해서 일상에서의 만나는 모든것에서 느낄 수 있는데, 하나하나의 사용자 경험 요소가 우리 삶에 밀접하게 영향을 주고 있다는 것이다. 우리 자신은 잘 느끼지 못할지라도 말이다.

사용자 경험 디자인은 종종 맥락의 문제를 다루는데, 예를 들어 커피메이커에 달린 버튼에 대해 매력적인 형태와 질감을 말하는 미적디자인과 이 버튼이 제품의 적절한 기능으로 연결되었나를 말하는 기능디자인에 비해 사용자 경험 디자인은 "기능의 중요성에 비해서 버튼이 너무 작지는 않나?"와 같은 질문을 통해 버튼의 미적인 면과 기능적인 면이 제품의 전반적인 맥락과 잘 어우러지는지 등을 살피게 한다는 것이다. 

| 좋은 사용자 경험이 사업성을 높인다

웹사이트의 '전환율'에 대한 이야기이다. 즉, 웹사이트는 구성을 원하는 대로 변경하는 복잡한 작업에서부터 새 소식을 받아보기 위해 이메일 주소를 등록하는 단순한 일에 이르기까지, 거기에 대한 전환율을 측정할 수 있다. 이는 해당 웹사이트가 얼마나 효과적으로 사업 목표를 충족시키고 있는지를 알 수 있게 한다. 

사용자가 직원일 경우 생산성을 높이고 직업 만족도를 높여주는 역할도 웹에서의 사용자 경험이 한다.

| 사용자 중심 디자인이란

매력적이고 효율적인 사용자 경험을 만들어내는 일을 사용자 중심 디자인이라고 부른다. 

이 개념은 아주 간단하다. 제품을 개발하는 모든 과정 하나하나에 있어서 사용자를 고려하면 된다. 그렇지만 이 간단한 개념이 함축하고 있는 것은 놀랍도록 복잡하다. 사용자 경험에 관련된 모든 사항이 의식적으로 결정되어야 하기 때문이다. 

﹅﹆﹅﹆ Chapter 2. UX 요소를 만나다

| 다섯 겹의 층

사용자 경험 디자인 과정의 핵심은 사용자가 제품을 통해서 얻는 경험이 어떤 경우라도 의식적이고 분명한 설계 의도에 기반해서 일어나도록 하는 것이다. 

1. 전략층

∙ 우리는 이 제품을 통해서 무엇을 얻고자 하는가?

∙ 사용자는 이 제품을 통해서 무엇을 얻고자 하는가?

그 웹사이트를 운영하는 사람들이 원하는 것뿐만 아니라 사용자들이 그 웹사이트를 통해서 얻고자 하는 것도 포함한다. 

그 웹사이트를 사용하게 될 사람들로부터 주어지는 목표는 '사용자의 요구사항'이 된다. 이런 '제품 목표'는 사업목표가 될 수도 있다. 

| 사용자 요구

사용자 요구를 파악하기 위해 "사용자 세분화"를 사용해 볼 수 있다. 사용자를 세분화하면 광범위한 사용자 요구를 다루기 쉽게 나눌 수 있다. "인구통계학적" 기준과 "사용자 심리분석"을 통해 나눌 수 있다.   

'인구통계학적 : 미혼이고 대학 교육을 받은 연수입 5만 달러 이상의 25~34세 여성

'사용자 심리분석 : 같은 지역에 살면서 소득 수준이 비슷하며, 나이가 비슷한 사람은 비슷한 성향을 가질 가능성이 높다. 

| 사용성과 사용자 연구

∙ 설문, 인터뷰, 포커스 그룹 같은 연구 방법 : 사용자의 일반적인 태도와 인식에 대한 정보를 모으는데 적합

∙ 사용자 평가, 현장 조사 : 사용자 행동의 특정 측면과 제품과의 상호작용을 이해하는데 적합

∙ 맥락적 연구 : 사용자의 일상적인 맥락 속에서 그들을 이해하는데 필요하는 강력하고 포괄적인 방법들을 통칭. 인류학에서 문화와 사회를 이해하기 위해서 쓰였던 방법에서 유래한 것.

예를 들어 유목 민족이 어떻게 살아 가는지 알기 위한 방법과 똑같은 기법을 그보다 작은 규모로 적용함으로써 비행기 부품을 구매하는 사람들이 어떻게 사는지를 이해할 수도 있다. (단, 맥락적 연구의 유일한 문제점은 많은 시간과 비용이 든다는 것)

∙ 과업 분석(task analysis) : 맥락적 연구와 밀접하게 연관되어 있다. 사용자의 모든 행동은 수행하고 있는 어떤 과업의 맥락에서 이루어진다는 것을 전제로 하는 것.

∙ 사용자 평가 : 사용자 평가는 사용자를 평가하는 게 아니라, 반대로 사용자에게 만들어 놓은 물건을 평가하게 하는 것. 

| 페르소나 구축

페르소나persona(사용자 모델이나 사용자 프로파일이라고 하기도 한다.)

페르소나에 쓰이는 정보는 사실 대부분은 그냥 만들어 낸 것이다. 페르소나는 사용자 연구를 통해 알게 된 내용과 일치해야 하지만, 그 세부적인 묘사는 실제 살아 숨쉬는 우리의 사용자를 대표할 가상의 인물들에게 생명을 불어넣기 위해서 창작된 것이다. 

2. 범위층

프로젝트의 범위를 정의하는 일은 과정과 결과 두 경우 모두 해당되면, 가치 있는 과정을 통해 가치 있는 결과를 만드는 행위이다. 이 과정은 그 제품이 가질 수 있는 잠재적인 문제와 쟁점을 가설 상태에서 짚어 보게 해주기 때문에 가치가 있다. 이를 통해서 어떤 문제를 지금 고민해야 하며, 어떤 점을 나중에 고민해야 할지 파악할 수 있다. 

∙ 개발할 항목을 알 수 있다. : 제품의 최종 형태가 더 이상 제품 관리자의 머릿속에서 모호한 그림으로만 존재하는 게 아니라, 최고경영진부터 신입 기술자에 이르기까지 조직 내의 모든 사람이 작업의 지침으로 삼을 수 있는 구체적인 내용이 된다.

∙ 개발하지 않을 항목을 알 수 있다. : 기능이 많으면 좋을 거라고 생각하기 쉽지만, 그게 프로젝트의 전략적인 목표에 부합하지 않을지도 모른다. 프로젝트 종료 후에도 온갖 가능한 추가 기능들이 나타날 것이다. 요구사항을 명확하게 파악해 두면 그런 제안들이 나타났을때 선별의 기준을 갖추게 되어, 그 제안이 이미 개발하기로 결정한 영역에 부합하는지, 만일 그렇다면 어떻게 융합시킬 수 있는지를 알게 해준다. 개발하지 않을 항목을 알게 되면 당장 개발하지 않을 항목도 알게 된다. 수집된 훌륭한 아이디어들이 갖는 진정한 가치는, 그것들을 여러분의 장기 계획에 적절히 맞춰 넣을 수 있다는 점이다. 요구사항을 의식적으로 관리하지 않으면, '슬금슬금 늘어나는 범위'라는 무시무시한 함정에 빠져들게 된다. 

| 요구사항 우선순위

이해 당사자들 사이의 갈등을 해소하는 최선의 방법은 이미 정의된 전략에 비추어 보는 것이다. 전략적 목표를 성취하기 위해 제안된 수단이 아니라, 그 목표 자체에 집중하는 것이다. 

3. 구조층

인터렉션 디자인과 정보 구조 설계.

| 인터렉션 디자인 : 전통적인 소프트웨어 개발에서는 구조화된 사용자 경험을 만드는 일과 관련된 활동을 인터렉션 디자인이라고 한다. 인터렉션 디자인과 정보 구조 설계는 공통적으로 사용자에게 어떤 선택 사항을 전달할지에 대한 패턴과 절차를 정의하는 데에 중점을 두고 있다. 인터렉션 디자인은 어떤 작업을 수행하고 완료하는 데 관련되는 선택 사항을 다루며, 정보 구조 설계는 사용자에게 정보를 전달하는 데 관련되는 선택 사항을 다룬다.

인터렉션 디자인은 가능한 사용자의 행동을 기술하고, 시스템이 사용자의 행동을 어떻게 받아들이고 반응해야 하는지를 정의하는데 중점을 둔다. 

| 정보 구조 설계 : 정보구조는 사람의 의식적인 정보 처리 방식과 연관되어 있으므로, 사용자가 표시된 정보를 이해해야 하는 제품이라면 모두 그 정보 구조에 대한 고려가 되어 있어야 한다. 

∙ 콘텐츠 구성 : 하향식 접근(전략층에서의 고려 사항을 먼저 고려) / 상향식 접근(콘텐츠 및 기능 요구사항을 먼저 고려)

∙ 정보 구조의 기초 단위 "마디(node)" : 계층구조-나무 모양의 방사형 : 상하 관계로 연결 / 격자 구조 : 다차원적으로 옮겨 다닐 수 있음 

∙ 언어와 메타데이터 : 일관성 유지를 위해 사용하는 방법을 어휘 제한이라고 한다. 이를  사용하면 제공할 콘텐츠 전반에 일관성을 가질 수 있게 된다. 메타데이터라는 용어는 단순히 말해서 '정보에 대한 정보'를 뜻하며, 특정 콘텐츠를 설명하는 구조적인 접근 방법을 의미한다. 

∙ 웹사이트 구조도 : =사이트 맵 : 어떤 분류들을 한데 모으고 어떤 분류들은 따로 다뤄야 할지, 어떤 인터렉션 과정에서 각 단계는 어떻게 연결되고 있는지 등과 같은 개념적인 관련성을 문서화하는게 중요하다. 

4. 골격층

∙ 인터페이스 디자인 : 골격을 정의. 버튼이나 입력 상자 같은 인터페이스 요소들로 이루어진 익숙한 영역. 

∙ 내비게이션 디자인 : 정보 공간을 제시하는 데 초점을 맞추는 인터페이스 디자인의 특수한 형태. (글로벌 내비게이션, 로컬 내비게이션)

∙ 정보 디자인 : 인터페이스 디자인과 네비게이션 디자인 두 영역 모두에 걸쳐 효율적인 의사 전달을 위해서 정보를 표현하는 방법 

5. 표면층

감각적 측면의 디자인

| 시각디자인

∙ 시선을 따라 흘러가라

∙ 대비와 통일성 (그리드 기반 레이아웃) 

| 내적 일관성과 외적 일관성

∙ 내적 일관성의 문제 : 제품의 부분들이 서로 다른 방식으로 디자인된 경우

∙ 외적 일관성의 문제 : 제품이 같은 회사에서 만든 다른 제품들과 다른 방식으로 디자인된 경우

| 색상 팔레트와 타이포그래피

| 디자인 구성도와 스타일 지침서 

디자인 구성도 : 시각적 목업

6. UX 요소의 응용

| 올바른 문제 제기

: 올바른 접근 방법은 대상이 되는 근본적인 문제에 대한 이해를 기반으로 모든 의사결정을 내리는 것이다. 사용자 경험의 어떤 측면에 대해서든 가장 처음 고민하고 또 무엇보다 먼저 대답해야 할 질문은 "왜 그런 방법을 거쳐서 결정했는가?"이다.