제품과 서비스에서 효과적인 경험을 만드는 최적의 UX·UI 디자인 방법론

지식정보 혁명의 디지털 시대에 접어들면서 사용자 경험(UX)과 사용자 인터페이스(UI) 디자인이 더 중요해지고 있다. 사용자 경험과 사용자 인터페이스를 위한 디자인은 사용자가 제품을 사용할 때 상호작용하는 요소와 전체적인 경험 설계에 중점을 두어야 한다. 이를 위해 UX 디자인은 사용자의 요구와 행동을 분석해서 제품 및 서비스의 구조와 흐름을 설계하고, UI 디자인은 그 구조를 기반으로 직관적이고 매력적인 인터페이스를 구축하는 접근이 필요하다. UX·UI 디자인은 제품의 외형을 돋보이게 만드는 데에서 더 나아가 사용자가 제품 및 서비스를 사용할 때의 전체적 느낌(Feel)과 외형(Look)을 설계하는 역할을 한다. 이는 사용자 중심의 접근 방식을 통해 제품과 서비스의 성공에 큰 영향을 미친다. 이제 UX·UI 디자인은 디자인 분야를 비롯해 관련 산업 분야에서 불가결한 학문이 되었고, 디자인 프로세스의 개별 단계와 방법론에서 빠져서는 안 될 필수 디자인이 되었다. 이에 맞춰 『UX·UI 디자인 교과서』는 탄탄한 이론과 실무는 물론 UX·UI 디자인의 여러 영역을 다루고 있어, 학생은 물론 실무 디자이너가 체계적으로 학습할 수 있는 통합 교과서이다.

[목 차]
  

머리글

 

1부 개괄 - UX·UI 디자인

 

1장 UX·UI 디자인의 중요성과 가치

1 사용자 여정에서의 UX·UI 디자인

2 전통적 디자인과 UX·UI 디자인

2장 UX·UI 디자인 개염 형성과 특징

1 UX·UI 디자인의 기원과 전개

2 제품 개념 확장과 UX·UI 디자인

3 CX, 서비스, HCI와 UX·UI 디자인

4 UX·UI 디자인의 학문적 위치

3장 UX·UI 디자인 정의 및 모델

1 UX 개념 정의

2 UI 개념 정의

3 인터랙션 개념 정의

4 사용성 개념 정의

5 사용성 휴리스틱

6 UX·UI 디자인 모델

4장 UX·UI 디자인 프로세스

1 프로세스의 정의와 역할

2 디자인 프로세스 유형

3 UX·UI 프로세스 기본 단위의 확장적 구성

5장 UX·UI 디자인 산업과 디자이너의 역할

1 유관 산업과 UX·UI 디자인

2 제품 서비스 시스템

3 비즈니스 거래 유형

4 UX·UI 디자이너의 역할

6장 UX·UI 디자인의 미래

1 지속 가능성

2 사회적 책임

3 건강과 웰빙

4 창의성과 개인화

5 디자인 교육의 미래

 

2부 리서치 - 디자인 문제의 발견

 

1장 UX 디자인 프로젝트의 시작

1 디자인 프로젝트의 이해

2 디자인 프로젝트의 분석

3 UX·UI 디자인 프로젝트의 진행

2장 UX 리서치의 개괄

1 리서치의 개념

2 데스크 리서치

3 리서치 방법의 비교

3장 인터뷰

1 인터뷰의 특징

2 인터뷰의 진행

3 인터뷰 진행자의 태도

4 인터뷰의 종류

5 인터뷰의 정리 방법

4장 관찰

1 연구 방법으로서의 관찰

2 관찰의 유형

3 관찰과 유사한 리서치 방법

4 관찰의 진행 절차

5장 설문과 통계

1 설문, 정량 연구의 시작

2 통계에 대한 이해

3 통계의 분석 방법

4 연구에서 통계까지의 과정

6장 데이터 기반 리서치

1 데이터 기반의 디자인

2 데이터 과학

3 데이터 드리븐 디자인

4 데이터를 디자인에 활용

7장 인사이트 도출

1 분석 방법에 대한 개괄

2 인사이트 분석 방법

8장 사용자 이해와 퍼소나

1 사용자에 대한 접근

2 사용자에 대한 이해 요소

3 퍼소나의 개념

4 퍼소나의 이해

5 퍼소나의 제작

6 퍼소나의 활용

9장 고객 여정 지도

1 고객 여정 지도의 개념

2 고객 여정 지도의 형식

3 고객 여정 지도의 제작

4 고객 여정 지도의 유형

5 고객 여정 지도의 특징

10장 디자인 문제 정의

1 디자인 문제 정의의 목적

2 요구 사항에 영향을 주는 요인

3 요구 사항 정의서

4 사용자의 잠재 욕구 파악

5 문제 프레이밍

6 문제 정의와 UX 전략의 관계

 

3부 발전 - 디자인 문제의 해결

 

1장 아이데이션

1 창의성

2 아이데이션 방법

3 아이디어 수렴

4 코크리에이션 워크숍

2장 시나리오

1 시나리오의 의미

2 시나리오의 유형

3 시나리오 제작

3장 롤플레잉과 서비스 블루프린트

1 롤플레잉

2 서비스 블루프린트

4장 워크플로와 정보 구조

1 인터랙티브 시스템의 구성 요소

2 워크플로

3 정보 구조

4 메뉴 설계

5장 UI 디자인

1 UI 개념 모델

2 인터랙션 디자인의 원칙

3 입출력과 디바이스

4 UI 디자인 요소

5 UX 라이팅

6장 디자인 시스템과 패턴

1 OS의 이해

2 디자인 시스템과 패턴

7장 프로토타이핑

1 프로토타이핑의 개념

2 프로토타이핑의 활용

3 프로토타이핑의 분류

4 분야별 프로토타이핑

8장 사용성 테스트

1 사용성 테스트의 특징

2 사용성 테스트의 조건

3 다양한 사용성 평가 방법

4 사용성 테스트의 유형

5 사용성 테스트의 진행 방법

6 태스크와 평가 기준

7 사용성 테스트 참가자 모집과 진행

9장 UX·UI 프로젝트의 완료

1 프로젝트 종류에 따른 완료 방식

2 프레젠테이션과 결과 보고서 작성

3 프로젝트 결과물의 구현과 이관

 

참고문헌

[본 문]
  

UX·UI 디자인을 전략적 도구로 이용하기 위해서는 경영, 기술, 디자인의 역할을 총제적으로 이해할 필요가 있다. 경영은 지향점을 설정하는 역할을 하며, 기술은 현실에 실현할 수 있는지에 대한 내용을 다루며, 디자인은 어떻게 현실에 구현되어야 하는지를 다룬다. 경영과 기술의 접점에는 목표 지향을 위한 능률과 같은 개념이, 기술과 디자인의 접점에는 생산 가능한 유용성과 사용성 같은 개념이, 디자인과 경영에는 의미와 가치 중심의 브랜드 정체성 개념이 위치한다. 그리고 이것을 아우르는 UX에는 사용자 중심 개념이 형성된다. 이 세 가지가 균형 있게 이루어졌을 때 사람들에게 긍정적으로 받아들여지는 UX가 형성된다.

2

6쪽 1부 「UX·UI 디자인의 중요성과 가치」 중에서

디자이너의 행위는 문제를 분석하고, 종합해서 해결책을 도출하고, 최종적으로 평가하는 세 단계를 반복하고, 디자인 프로세스는 발산, 변환, 수렴의 단계로 이루어진다. 이 두 가지를 기본 뼈대로 하여 목적에 따라 프로세스를 다양하게 구성할 수 있다. 이 책의 2부와 3부는 더블 다이아몬드 모델을 기반으로 구성되어 있는데, 그림 1.12는 프로세스 구성의 기본 단위인 다이아몬드의 의미와 원리를 도식으로 설명하고 있다.

57쪽, 1부 「4장 UX·UI 디자인 프로세스」 중에서

 

일상생활에서 디지털 제품과 서비스의 역할이 점점 더 중요해지면서 사용자 경험을 최적화하는 것뿐만 아니라 사용자의 신체적, 정신적 건강을 증진하는 디지털 헬스케어와 관련된 UX·UI 디자인이 발전하고 있다. 신체적 건강 증진에서 운동 장려는 매우 중요한데, 웨어러블 기기와 건강 추적 앱은 사용자의 신체 활동을 모니터링하고, 목표 설정과 피드백을 통해 운동을 장려한다. UX·UI는 이런 기능을 직관적이고 매력적으로 설계해 사용자가 쉽게 이해하고 사용할 수 있게 하는데, 디지털 기기를 장시간 사용하는 사용자를 위해 자세 교정 알림, 정기적 휴식 시간 알림, 스트레칭 안내 등 올바른 자세와 건강한 습관을 형성하게 돕는 중요한 역할을 한다.

80쪽, 1부 「6장 UX·UI 디자인의 미래」 중에서

 

UX 리서치 방법 중에서 인터뷰는 가장 효과적이고 널리 쓰이는 방법이다. 인터뷰를 잘하려면 충분한 경험과 지식이 필요하지만, 대화로 이루어지기 때문에 다른 리서치 방법에 비해 인사이트를 얻기 쉽고 누구나 쉽게 적용할 수 있다. 효과적인 인터뷰 조사를 위해 인터뷰가 정확히 무엇이고 어떻게 진행하는지, 인터뷰에는 어떤 세부적인 방법이 있는지, 그리고 인터뷰 결과는 어떻게 정리하는지 살펴보자. 인터뷰는 단독으로도 쓰이지만, 관찰이나 사용성 테스트에도 자연스럽게 수반되므로 제대로 이해할 필요가 있다.

130쪽, 2부 「3장 인터뷰」 중에서

 

 

그림 2.40은 맥도날드 매장에서 키오스크 주문 후 음식을 받기까지의 대기 과정을 행동 지도로 기록하고 분석한 사례이다. 연구에 참여한 학생 다섯 명은 판교와 코엑스의 맥도날드 매장의 평면도를 그린 다음 몰래 관찰을 병행하며 태블릿PC에 각자 다른 색으로 행동 지도를 작성했다. 행동 지도 작성 결과, 맥도날드 매장에서의 고객 행동은 키오스크 대기, 키오스크 이용, 대기 장소 이동, 대기, 음식 수령의 다섯 단계를 거친다는 것을 알 수 있었다. 이 중 ‘ 대기’의 동선은 자유롭고 패턴이 다양하게 나타났다.170쪽, 2부 「4장 관찰」 중에서

 

먼저 목표 설정 단계에서는 사용자의 행동 패턴을 통해 인사이트를 도출한다. 페인포인트를 파악하고 우선순위를 결정한다. 그리고 문제점과 기회 요인 탐색 단계를 통해 문제 해결을 위한 여러 가설을 세운다. 가설 수립 단계에서는 데이터와 사용자 행동 패턴 사이의 인과관계를 기반으로 복수의 아이디어를 도출한 뒤, 테스트 진행 단계에서 디자인 대안과 그 데이터를 기반으로 디자인 의사 결정을 내린다. 마지막으로 결과 도출 단계에서 서비스의 개선과 발전을 위해 인사이트를 도출하고 피드백을 줄 수 있는 데이터를 산출한다.

208쪽, 2부 「6장 데이터 기반 리서치」 중에서

 

그렇다면 모든 프로젝트에 퍼소나를 적용해야 할까? 그렇지는 않다. 퍼소나가 모든 디자인에 필수적인 것은 아니다. 사람에 대한 이해가 덜 중요하거나 사람의 물리적 측면만 중요하다면, 굳이 퍼소나를 만들지 않아도 된다. 인스타그램 같은 SNS의 새로운 기능을 설계할 때는 왜, 어떤 방식으로 사회적 네트워킹을 할지, 어느 범위의 사람들까지 소통할지를 파악해야 성공적인 결과물을 만들어 낼 수 있을 것이다. 퍼소나는 물리적 측면보다는 인지적 측면, 인지적 측면보다는 시스템에 대한 사용자의 태도나 사용자 간의 사회적 상호작용이 중요한 서비스 디자인에서 더욱 효과적이다.

253쪽, 2부 「8장 사용자 이해와 퍼소나」 중에서

 

 

그림 2.92는 쏘카 프로젝트에서 페인포인트로부터 UX 전략을 도출한 사례이다. 앱으로 대여 차량을 예약할 때 쏘카존에서 대여할 수 있는 차량과 쏘카존으로 부를 수 있는 차량이 잘 구분되지 않아 의도치 않게 부름 서비스를 이용하게 되거나, 여러 번 터치해도 왕복 서비스가 편도 서비스로 변경되는 점을 해결하기 위해 서비스 내 주요 경험을 분리한다는 ‘전략1’을 세운 것을 볼 수 있다. 또한 ‘경험 있는 사용자는 주행거리와 시간을 바탕으로 대여 차량의 주행 시간을 빠르게 정한다.’는 기회 요인을 통해 ‘전략3’이 나오는 경우도 볼 수 있다.

279쪽, 2부 「10장 디자인 문제 정의」 중에서

 

 

카드소팅 진행 방식에는 몇 가지 장점이 있다. 첫째, 사용자 중심 설계가 가능하다. 사용자의 인식과 분류 방식을 반영해서 메뉴 구조를 설계할 수 있다. 둘째, 효율성이 높다. 다양한 기능과 정보를 체계적으로 구성해 사용자 경험을 개선한다. 셋째, 유연성을 가진다. 개방형과 폐쇄형 카드소팅을 통해 다양한 접근 방식을 적용할 수 있다. 넷째, 분석 도구를 제공한다. 소프트웨어를 통해 데이터 분석이 용이하며, 덴드로그램과 유사도 매트릭스를 활용해 더 깊이 있는 분석이 가능하다.342쪽, 3부 「4장 워크플로와 정보 구조」 중에서

 

 

사용성 테스트의 참가자는 몇 명으로 하는 것이 적당할까? 평가의 품질을 높이기 위해서는 많으면 많을수록 좋겠지만, 수확체감의 법칙이 작용하듯 정확성을 높이기 위해서는 큰 비용이 든다. 정량 연구를 기준으로 한다면, 참가자는 최소 표본 수인 30명 정도는 확보해야 한다고 생각할 수 있다. 그러나 닐슨은 참가자가 다섯 명이면 사용성 문제의 80% 이상을 찾아낼 수 있으며, 다섯 명의 사용자만 테스트하는 것으로 충분하다고 주장했다. 즉 사용성 테스트에서 참가자가 적다고 문제가 되지는 않는다.410쪽, 3부 「8장 사용성 테스트」 중에서

 

효과적인 의사소통은 긴 텍스트보다는 시각적 자료에 의존하는 경우가 많다. 인포그래픽, 표, 그래프로 개념을 시각화하면 아이디어를 더 명확하게 전달할 수 있고 기억하기 쉬워진다. 시각적 콘텐츠를 만들 때 선, 막대, 방사형, 원형 등 적절한 그래프 유형을 선택하고, 이를 현명하게 사용하여 이해도를 높여야 한다. UX·UI 디자인 프로세스에서 제작한 퍼소나, 고객 여정 지도, 서비스 시나리오 등을 제시해 이해도를 높인다. 문어체와 구어체를 적절히 사용하여 어떤 것이 청자에게 효과적으로 전달될지 판단하여 적용한다. 공식적이고 격식이 필요한 곳에는 문어체, 상황의 설명이나 인터뷰 내용 등을 전달할 때는 구어체가 적절할 수 있다.

 

441쪽, 3부 「9장 UX·UI 프로젝트의 완료」 중에서

김진우 | 연세대학교 HCI Lab 지도교수 겸 주식회사 HAII 대표이사

이제는 다음 세대 디자이너들이 활약할 시대이다. UX가 강조된 새로운 시도를 담아내기 위해,UX 과정을 ‘리서치’와 ‘발전’으로 나누어 일목요연하게 정리함으로써 현업에서 지나치기 쉬운

UX·UI 디자인을 세심하게 다루었다. 탄탄한 이론과 실용성을 모두 갖추고 있어 UX·UI 디자인을

공부하는 학생은 물론 실무 디자이너에게 필요한 교과서로 활용되기를 기원한다.

 

전성진 | 피엑스디(PXD) 공동창업자 겸 대표이사

책상 위에 두고 필요할 때마다 참고하기에 손색없는 믿음직한 교과서가 나왔다. UX·UI 디자인 입문자에게는 든든한 안내서이자 실무자에게는 현장에서 바로 활용할 수 있는 방법론으로 가득 찬 선물 같은 책이다.

UX·UI 디자인의 탄탄한 이론을 바탕으로, 실무 프로세스에 따라 실전 지식과 노하우가 체계적으로 수록되어 있다.