모바일 UX 디자인 [기획부터 프로토타이핑까지 디자이너의 능력을 확장시키는 방법]
- 원서명UX Design for Mobile : Design apps that deliver impressive mobile experiences (ISBN 978-1787283428)
- 지은이파블로 페레아(Pablo Perea), 파우 히네르(Pau Giner)
- 옮긴이심규대
- ISBN : 9791161752358
- 35,000원
- 2018년 12월 07일 펴냄
- 페이퍼백 | 400쪽 | 188*235mm
- 시리즈 : acorn+PACKT, UX 프로페셔널
책 소개
소스 코드 파일은 여기에서 내려 받으실 수 있습니다.
https://github.com/AcornPublishing/uxdesign-mobile
요약
인상적인 경험을 제공하는 모바일 앱을 만드는 방법은 무엇일까? 저자는 이 질문의 답이 고객의 실제 니즈를 토대로 아이디어를 떠올리고, 이를 반복적인 테스트를 거쳐 최적의 솔루션으로 구현하는 것이라고 말한다. 이 책은 모바일 앱 솔루션을 탐구하고 개발하는 실용적인 접근법을 소개하며, 다양한 프로토타이핑 툴을 활용해 아이디어를 신속하게 테스트하는 프로세스를 집중적으로 다룬다. 직접 따라해 볼 수 있는 상세한 가이드를 통해 아이디어를 탐구하고 테스트하는 방법을 익힐 수 있다.
이 책에서 다루는 내용
█ 맨 처음부터 실제 사용자와 함께하는 최종 테스트까지의 앱 디자인 계획하기
█ 선진 기업으로부터 배우고 업무 패턴 찾아내기
█ 디자인 프로세스에 UX 디자인 우수 사례 적용하기
█ 프로토타이핑 툴을 사용해서 완성도가 낮거나 높은 프로토타입 개발하기
█ Tumult Hype와 Framer Studio에서 단계별 예제 따라하기
█ 프로세스 초기에 실제 사용자와 함께 디자인 테스트하기
█ UX 디자이너적인 사고를 개발팀에 통합시키기
이 책의 대상 독자
성공적인 앱 제작에 관심이 있는 디자이너, 개발자 그리고 제품 매니저를 대상으로 하는 책이다. 디자인을 제작, 테스트하고 개선하는 프로세스를 우수 사례에 기초해 소개한다.
이 책의 구성
1장, ‘디자인 원칙과 기본 디자인 계획’에서는 이 책의 내용을 명확하게 이해시켜줄 기본적인 디자인 원칙을 알려준다. 인간이 세상을 인지하는 방식을 결정하는 진화론적인 측면을 다루며, 실제 사람을 대상으로 하는 좋은 디자인의 원칙을 소개한다. 기본적인 디자인 원칙 이외에도 디자인 솔루션이 사용될 환경과 이를 최종 시나리오에 적용시키는 것의 중요성을 설명한다.
디자인 프로세스에 대한 전반적인 개요는 이 책의 맥락이 제시하는 여정을 소개한다. 각 장은 프로세스 단계를 소개하는 논리정연한 개별 단위로 기능하지만, 전체로 읽을 때는 하나의 완전한 솔루션으로도 작동한다.
2장, ‘리서치 - 사용자로부터 배우기’에서는 문제를 해결하기에 앞서 깊이 있는 이해의 필요성을 설명한다. 잠재 사용자의 멘탈 모델에 대한 적절한 연구를 통해 사용자가 원하는 대로 인터랙션하는 앱을 개발할 수 있다.
패턴과 관례의 발견은 디자이너가 솔루션을 분석할 때 적절한 결정을 내릴 수 있도록 도움을 준다. 또한 이것은 유용한 기법을 활용해 고객 행동에서 핵심 측면을 찾아내는 방법을 알려준다.
3장, ‘아이디어 탐구하기 - 스케치하기’에서는 혁신적인 아이디어를 탐구하기 위해 간단한 스케치를 해서 팀과 다른 이해관계자들에게 보여주는 방법을 다룬다. 전에는 생각조차 못했던 솔루션의 새로운 방향성을 펜과 종이를 사용해서 찾아낼 수 있다. 아이디어 탐구를 돕는 작업 프로세스, 팁과 사례도 포함한다.
4장, ‘모바일 패턴 - 웹앱, 안드로이드 및 iOS 우수 사례’에서는 멀티채널 제품을 제작하는 방법을 자세히 설명한다. 현재 통용되는 접근법을 쉽고 체계적으로 소개한다. 다수의 사용자를 확보한 주요 모바일 플랫폼을 설명하며, 나아가 성공적인 크로스플랫폼 제품을 만들기 위해 디자이너가 반드시 알아둬야 할 주요 차이점을 살펴본다.
5장, ‘솔루션 구체화하기 - 와이어프레임과 목업’에서는 솔루션을 자세히 설명하는 상세 문서를 만들어서 개발팀이 디자인 컨셉을 이해하고 제대로 구현하도록 돕는 작업 프로세스를 제시한다. 이를 통해 안드로이드 및 iOS 개발자 모두에게 적합한 스펙(specification)을 만드는 방법과 각양각색의 스크린 해상도 및 플랫폼을 위한 에셋(asset) 세트 제작 방법을 학습할 수 있다. 최근 디자인에서 모션(motion)의 중요성과 사용자 인지에 미치는 영향을 집중적으로 다룬다.
6장, ‘프로토타이핑하기 - 아이디어에 생명 불어넣기’에서는 디자인 프로세스의 초기 단계에서 아이디어를 테스트할 수 있는 버전 제작 방법을 다룬다. 프로토타이핑 프로세스를 계획하는 데 필요한 기본 가이드라인을 제공한다. 또한 다양한 프로토타이핑 툴을 살펴보고 장단점을 논한다. 프로젝트의 기능 복잡도와 프로젝트 요구 사항을 근거로 각각의 접근법을 언제 어떻게 사용해야 하는지 학습 가능하다.
7장, ‘모션으로 프로토타이핑하기 – Tumult Hype 사용하기’에서는 타임라인 기반의 프로토타이핑 툴을 이용해 앱 프로토타입을 제작하는 방법의 개요를 설명한다. 모션을 사용해 인터랙션을 시각적으로 보여줌으로써 아이디어를 지원하는 방법, 그리고 이를 통해 얻을 수 있는 장점과 프로세스에 주는 의미를 알게 될 것이다. 단계별 도움말을 위해 시장에 출시된 좋은 툴 중에 하나인 키프레임(keyframe) 기반의 애니메이션 시스템인 Tumult Hype를 사용한다. Tumult는 두 명의 애플 출신 전문가가 설립한 회사이며, Tumult Hype는 다양한 수상 경력을 자랑하며 사용자로부터 엄청난 찬사를 받는 툴이다.
8장, ‘코드로 프로토타이핑하기 - Framer Studio 사용하기’에서는 프로그래밍 기반의 툴을 활용한 프로토타입을 제작하는 방법을 집중적으로 다룬다. 코딩 경험이 있는 독자라면 프로토타이핑 마인드셋을 친숙한 환경에 적용해 볼 수 있을 것이다. 대표적 디자인 툴인 Framer Studio를 사용하는 단계별 프로세스를 설명한다. Framer Studio는 기술 스타트업의 최고 디자이너들과 전 세계 디자인 학교에서 널리 사용하고 있다.
9장, ‘사용자 테스트’에서는 실제 사용자와 함께 프로로타입을 테스트하고 인터랙션을 관찰하면서 배우는 방법을 상세히 다룬다. 진행자가 있는 테스트를 준비하기 위해 필요한 계획도 포함된다. 테스트 세션을 계획하고 전개하는 방법과 진행자가 없는 테스트의 일반적인 세부 사항도 함께 다룬다. 대규모 프로젝트에서 테스트의 중요성을 명쾌하게 기술하며, 이는 지표 정의 및 A/B 테스트에 대한 측면을 망라한다.
상세 이미지
목차
목차
- 1장. 디자인 원칙과 기본 디자인 계획
- 사용자에게 집중하기 위해 관점 전환하기
- 사용자 중심의 관점을 조직에 주입하기
- 디자인 원칙
- 인간의 조건에 따른 니즈
- 일반적인 기대에서의 니즈
- 특정 사용 컨텍스트에서의 니즈
- 기본적인 디자인 계획
- 실용적으로 진행하기
- 디자인은 보기 좋게 만드는 것이 아니다
- 사용자는 그들이 무엇을 원하는지 말해줄 수 없다
- 당신(혹은 당신의 팀)은 사용자가 아니다
- 사용자 경험은 기능 목록이 아니다
- 당신의 목표는 클라이언트나 직장 상사를 행복하게 하는 게 아니다
- 요약
- 사용자에게 집중하기 위해 관점 전환하기
- 2장. 리서치 - 사용자로부터 배우기
- 어떻게 해야 하나요?
- 사용자 알아가기
- 멘탈 모델 - 사용자가 어떻게 생각하는지 이해하기
- 개념 모델이란 무엇인가?
- 리서치 기법
- 관찰과 인터뷰
- 친밀도 다이어그램
- 카드 소팅
- 트리 테스트
- 설문조사
- 리서치 문서
- 퍼소나 문서
- 시나리오
- 사용자 여정
- 경쟁자 분석
- 목표 사용자, 지원 사용자, 그리고 미지원 사용자
- 실용적으로 진행하기
- 요약
- 어떻게 해야 하나요?
- 3장. 아이디어 탐구하기 - 스케치하기
- 스케치 마인드셋 받아들이기
- 스케치 기초
- 스케치 도구
- 신속하게 결과물 만들기
- 초점 맞추기
- 크레이지 에이트 기법을 사용해 시간관리하기
- 탐구 체계화하기
- 문제 분해하기
- 충돌 요소 파악하기
- 아이디어 커뮤니케이션하기
- 스토리보드 만들기
- 비평 세션 준비하기
- 실용적으로 진행하기
- 완벽은 선(善)의 적이다
- 이것은 영감에 대한 것이 아니다
- 대화를 디자인 목표와 연결하기
- 트레이드오프를 가시화하라 - 모든 것을 강조할 수는 없다
- 요약
- 스케치 마인드셋 받아들이기
- 4장 모바일 패턴 - 웹 앱, 안드로이드, iOS 우수 사례
- 웹 앱 접근법 - 반응형, 적응형, 가변형
- 반응형 동작
- 유동형
- 적응형
- 하이브리드
- 프론트엔드 프레임워크
- 세로열 디자인
- 모바일 애플리케이션 디자인 패턴
- 모바일 사용자 인터페이스 디자인 패턴
- 모바일 디자인 행동 패턴
- 안드로이드와 iOS 차이점
- 물리적 버튼
- 스크린 밀도와 기능
- UI 구성요소
- 실용적으로 진행하기
- 다양한 솔루션 탐구하기
- 요약
- 웹 앱 접근법 - 반응형, 적응형, 가변형
- 5장. 솔루션 구체화하기 - 와이어프레임과 목업
- 와이어프레임 이해하기
- 기능 스펙 문서로써의 와이어프레임
- 레이아웃
- 제스처
- 전환
- 목업
- 실제 컨텐트로 디자인 테스트하기
- 다양한 스크린을 위한 스펙과 에셋
- 실용적으로 진행하기
- 코드 짜는 법을 배워라
- 실제 환경에서 테스트하라
- 최신 트렌드를 잘 알고 있어라
- 요약
- 6장. 프로토타이핑 - 아이디어에 생명 불어넣기
- 프로토타이핑 사고방식 채택하기
- 니즈에 맞는 최적의 프로토타이핑 접근법 결정하기
- 프로토타입 유형 결정하기
- 적절한 툴 선택하기
- 프로토타입 계획 세우기
- 무엇을 프로토타입으로 만들지 결정하기
- 프로토타입 방법 결정하기
- 실용적으로 진행하기
- 프로토타입은 제품의 초기 버전이 아니다
- 프로토타입은 천 번의 미팅 같은 가치가 있다
- 요약
- 7장. 모션으로 프로토타이핑하기 - Tumult Hype 사용하기
- 프로토타이핑에서 모션의 역할
- Hype의 기본 컨셉
- 장면 목록
- 장면 에디터
- 속성 관리자
- 타임라인과 레이어
- 코드 에디터
- 불러오기와 내보내기
- 내비게이션 프로토타이핑
- 인터랙션으로 레이어 조작하기
- 레이어 조작하기
- 스크롤과 내비게이션 지원하기
- 제스처 지원하기
- 복잡한 행동 프로토타이핑하기
- 애니메이션 구성하기
- 사용자 입력 지원하기
- 실용적으로 진행하기
- 레이어 체계화하기
- 자주 미리 보기하라
- 요약
- 8장. 코드로 프로토타이핑하기 - Framer Studio 사용하기
- Framer.js
- Framer Studio
- 커피스크립트 이해하기
- 커피스크립트로 코딩 시작하기
- 변수와 연산자
- 유형
- 함수
- 루프와 조건부 구조
- 오브젝트와 메소드
- Framer.js 이해하기
- 레이어
- 애니메이션
- 이벤트
- 상태
- 컴포넌트
- Sketch와 Framer Studio로 프로토타입 제작하기
- 웰컴 투어 프로토타입
- 드로어 내비게이션 프로토타입
- 하단 내비게이션 프로토타입
- 실용적으로 진행하기
- 커뮤니티에 참여하세요
- 자료 학습하기
- 모바일 폰으로 테스트하기
- 최신 Framer 뉴스 듣기
- 요약
- 9장. 사용자 테스트
- 사용성 테스트의 역할 이해하기
- 테스트 대상 결정하기
- 적절한 방법 사용하기
- 테스트 계획하기
- 목표 정의하기
- 시나리오와 태스크
- 스크립트 정의하기
- 환경 설정하기
- 사용성 테스트 실행하기
- 참가자 모집하기
- 프로세스 소개하기
- 사용자 행동 관찰하기
- 주요 요소 확인하고 결과 요약하기
- 실용적으로 진행하기
- 팀원들을 리서치 세션에 참관시키기
- 학습이 검증보다 훨씬 중요하다
- 리서치 질문에 대답을 하는지를 확인하라
- 리서치를 수치와 결합시키기
- 요약
- 사용성 테스트의 역할 이해하기
- 10장. 참고문헌 및 인용 출처
- 공통
- 카노 모델
- 게슈탈트 원칙
- 멘탈 모델
- 컨셉 모델
- 퍼소나 문서
- 카드 소팅
- 트리 테스트(리버스 카드 소팅)
- 친화도 다이어그램(Affinity diagram)
- 크레이지 에이트
- 설문조사(Survey)
- 사용자 여정(User journey)
- 시나리오
- 점진적 노출(Progressive disclosure)
- 상호성 효과(Reciprocity effect)
- 레이지 로그인(Lazy login)
- 사용자 테스트(User testing)
- 모바일 패턴
- 정보 구조(Information architecture)
- 시각 디자인(Visual design)
- 프로토타이핑
- Tumult Hype
- 커피스크립트
- Framer
- 자바스크립트
관련 블로그 글
사용자의 니즈를 만족하는 모바일 앱 디자인
"고객의 실제 니즈를 토대로 아이디어를 떠올리고, 반복적인 테스트를 거쳐 최적의 솔루션으로 구현하는 것"
"영역 간의 경계가 점차 흐릿해지고 있는 흐름을 이해하고 이에 대한 대응을 준비하는 일은 피할 수 없는 선택이 아닐까 싶다." - 옮긴이의 말 中 |
크리에이티브 커먼즈 라이센스 이 저작물은 크리에이티브 커먼즈 코리아 저작자표시 2.0 대한민국 라이센스에 따라 이용하실 수 있습니다.
도서 오류 신고
정오표
정오표
[p.32 : 이미지 출처]