모바일 UX 디자인 (기획부터 프로토타이핑까지 디자이너의 능력을 확장시키는 방법)

파블로페레아

다년간디자이너로일해왔으며,엠바카데로(Embarcadero)테크놀로지와같은기업체를위한사용자경험,사용자인터페이스,모바일및웹디자인에주로초점을맞춰왔다.리서치,프로토타이핑,디자인,그리고신규아이디어및솔루션테스트가주요업무다.
컴퓨터공학을전공했으며다양한프로그래밍언어에깊이있는지식과이해를갖추고있다.기술추종자로,새로운개발분야와방법을항상학습하고연구한다.적응력이뛰어나고유연하며,변화를즐기고새로운문화와사람들을만나는것을좋아한다.

1장.디자인원칙과기본디자인계획
__사용자에게집중하기위해관점전환하기
____사용자중심의관점을조직에주입하기
__디자인원칙
____인간의조건에따른니즈
____일반적인기대에서의니즈
____특정사용컨텍스트에서의니즈
__기본적인디자인계획
__실용적으로진행하기
____디자인은보기좋게만드는것이아니다
____사용자는그들이무엇을원하는지말해줄수없다
____당신(혹은당신의팀)은사용자가아니다
____사용자경험은기능목록이아니다
____당신의목표는클라이언트나직장상사를행복하게하는게아니다
__요약

2장.리서치-사용자로부터배우기
__어떻게해야하나요?
____사용자알아가기
____멘탈모델-사용자가어떻게생각하는지이해하기
____개념모델이란무엇인가?
__리서치기법
____관찰과인터뷰
____친밀도다이어그램
____카드소팅
____트리테스트
____설문조사
__리서치문서
____퍼소나문서
____시나리오
____사용자여정
____경쟁자분석
____목표사용자,지원사용자,그리고미지원사용자
__실용적으로진행하기
__요약

3장.아이디어탐구하기-스케치하기
__스케치마인드셋받아들이기
____스케치기초
____스케치도구
__신속하게결과물만들기
____초점맞추기
____크레이지에이트기법을사용해시간관리하기
__탐구체계화하기
____문제분해하기
____충돌요소파악하기
__아이디어커뮤니케이션하기
____스토리보드만들기
____비평세션준비하기
__실용적으로진행하기
____완벽은선(善)의적이다
____이것은영감에대한것이아니다
____대화를디자인목표와연결하기
____트레이드오프를가시화하라-모든것을강조할수는없다
__요약

4장모바일패턴-웹앱,안드로이드,iOS우수사례
__웹앱접근법-반응형,적응형,가변형
____반응형동작
____유동형
____적응형
____하이브리드
____프론트엔드프레임워크
____세로열디자인
__모바일애플리케이션디자인패턴
____모바일사용자인터페이스디자인패턴
____모바일디자인행동패턴
__안드로이드와iOS차이점
____물리적버튼
____스크린밀도와기능
____UI구성요소
__실용적으로진행하기
____다양한솔루션탐구하기
__요약

5장.솔루션구체화하기-와이어프레임과목업
__와이어프레임이해하기
__기능스펙문서로써의와이어프레임
____레이아웃
____제스처
____전환
__목업
____실제컨텐트로디자인테스트하기
____다양한스크린을위한스펙과에셋
__실용적으로진행하기
____코드짜는법을배워라
____실제환경에서테스트하라
____최신트렌드를잘알고있어라
__요약

6장.프로토타이핑-아이디어에생명불어넣기
__프로토타이핑사고방식채택하기
__니즈에맞는최적의프로토타이핑접근법결정하기
____프로토타입유형결정하기
____적절한툴선택하기
__프로토타입계획세우기
____무엇을프로토타입으로만들지결정하기
____프로토타입방법결정하기
__실용적으로진행하기
____프로토타입은제품의초기버전이아니다
____프로토타입은천번의미팅같은가치가있다
__요약

7장.모션으로프로토타이핑하기-TumultHype사용하기
__프로토타이핑에서모션의역할
__Hype의기본컨셉
____장면목록
____장면에디터
____속성관리자
____타임라인과레이어
____코드에디터
____불러오기와내보내기
____내비게이션프로토타이핑
__인터랙션으로레이어조작하기
____레이어조작하기
____스크롤과내비게이션지원하기
____제스처지원하기
__복잡한행동프로토타이핑하기
____애니메이션구성하기
____사용자입력지원하기
__실용적으로진행하기
____레이어체계화하기
____자주미리보기하라
__요약

8장.코드로프로토타이핑하기-FramerStudio사용하기
__Framer.js
__FramerStudio
__커피스크립트이해하기
__커피스크립트로코딩시작하기
____변수와연산자
____유형
____함수
____루프와조건부구조
____오브젝트와메소드
__Framer.js이해하기
____레이어
____애니메이션
____이벤트
____상태
____컴포넌트
__Sketch와FramerStudio로프로토타입제작하기
____웰컴투어프로토타입
____드로어내비게이션프로토타입
____하단내비게이션프로토타입
__실용적으로진행하기
____커뮤니티에참여하세요
____자료학습하기
____모바일폰으로테스트하기
____최신Framer뉴스듣기
__요약

9장.사용자테스트
__사용성테스트의역할이해하기
____테스트대상결정하기
____적절한방법사용하기
__테스트계획하기
____목표정의하기
____시나리오와태스크
____스크립트정의하기
____환경설정하기
__사용성테스트실행하기
____참가자모집하기
____프로세스소개하기
____사용자행동관찰하기
____주요요소확인하고결과요약하기
__실용적으로진행하기
____팀원들을리서치세션에참관시키기
____학습이검증보다훨씬중요하다
____리서치질문에대답을하는지를확인하라
____리서치를수치와결합시키기
__요약

10장.참고문헌및인용출처
__공통
__카노모델
__게슈탈트원칙
__멘탈모델
__컨셉모델
__퍼소나문서
__카드소팅
__트리테스트(리버스카드소팅)
__친화도다이어그램(Affinitydiagram)
__크레이지에이트
__설문조사(Survey)
__사용자여정(Userjourney)
__시나리오
__점진적노출(Progressivedisclosure)
__상호성효과(Reciprocityeffect)
__레이지로그인(Lazylogin)
__사용자테스트(Usertesting)
__모바일패턴
__정보구조(Informationarchitecture)
__시각디자인(Visualdesign)
__프로토타이핑
__TumultHype
__커피스크립트
__Framer
__자바스크립트
__제이쿼리

★이책에서다루는내용★

■맨처음부터실제사용자와함께하는최종테스트까지의앱디자인계획하기
■선진기업으로부터배우고업무패턴찾아내기
■디자인프로세스에UX디자인우수사례적용하기
■프로토타이핑툴을사용해서완성도가낮거나높은프로토타입개발하기
■TumultHype와FramerStudio에서단계별예제따라하기
■프로세스초기에실제사용자와함께디자인테스트하기
■UX디자이너적인사고를개발팀에통합시키기

★이책의대상독자★

성공적인앱제작에관심이있는디자이너,개발자그리고제품매니저를대상으로하는책이다.디자인을제작,테스트하고개선하는프로세스를우수사례에기초해소개한다.

★이책의구성★

1장,‘디자인원칙과기본디자인계획’에서는이책의내용을명확하게이해시켜줄기본적인디자인원칙을알려준다.인간이세상을인지하는방식을결정하는진화론적인측면을다루며,실제사람을대상으로하는좋은디자인의원칙을소개한다.기본적인디자인원칙이외에도디자인솔루션이사용될환경과이를최종시나리오에적용시키는것의중요성을설명한다.
디자인프로세스에대한전반적인개요는이책의맥락이제시하는여정을소개한다.각장은프로세스단계를소개하는논리정연한개별단위로기능하지만,전체로읽을때는하나의완전한솔루션으로도작동한다.
2장,‘리서치-사용자로부터배우기’에서는문제를해결하기에앞서깊이있는이해의필요성을설명한다.잠재사용자의멘탈모델에대한적절한연구를통해사용자가원하는대로인터랙션하는앱을개발할수있다.
패턴과관례의발견은디자이너가솔루션을분석할때적절한결정을내릴수있도록도움을준다.또한이것은유용한기법을활용해고객행동에서핵심측면을찾아내는방법을알려준다.
3장,‘아이디어탐구하기-스케치하기’에서는혁신적인아이디어를탐구하기위해간단한스케치를해서팀과다른이해관계자들에게보여주는방법을다룬다.전에는생각조차못했던솔루션의새로운방향성을펜과종이를사용해서찾아낼수있다.아이디어탐구를돕는작업프로세스,팁과사례도포함한다.
4장,‘모바일패턴-웹앱,안드로이드및iOS우수사례’에서는멀티채널제품을제작하는방법을자세히설명한다.현재통용되는접근법을쉽고체계적으로소개한다.다수의사용자를확보한주요모바일플랫폼을설명하며,나아가성공적인크로스플랫폼제품을만들기위해디자이너가반드시알아둬야할주요차이점을살펴본다.
5장,‘솔루션구체화하기-와이어프레임과목업’에서는솔루션을자세히설명하는상세문서를만들어서개발팀이디자인컨셉을이해하고제대로구현하도록돕는작업프로세스를제시한다.이를통해안드로이드및iOS개발자모두에게적합한스펙(specification)을만드는방법과각양각색의스크린해상도및플랫폼을위한에셋(asset)세트제작방법을학습할수있다.최근디자인에서모션(motion)의중요성과사용자인지에미치는영향을집중적으로다룬다.
6장,‘프로토타이핑하기-아이디어에생명불어넣기’에서는디자인프로세스의초기단계에서아이디어를테스트할수있는버전제작방법을다룬다.프로토타이핑프로세스를계획하는데필요한기본가이드라인을제공한다.또한다양한프로토타이핑툴을살펴보고장단점을논한다.프로젝트의기능복잡도와프로젝트요구사항을근거로각각의접근법을언제어떻게사용해야하는지학습가능하다.
7장,‘모션으로프로토타이핑하기?TumultHype사용하기’에서는타임라인기반의프로토타이핑툴을이용해앱프로토타입을제작하는방법의개요를설명한다.모션을사용해인터랙션을시각적으로보여줌으로써아이디어를지원하는방법,그리고이를통해얻을수있는장점과프로세스에주는의미를알게될것이다.단계별도움말을위해시장에출시된좋은툴중에하나인키프레임(keyframe)기반의애니메이션시스템인TumultHype를사용한다.Tumult는두명의애플출신전문가가설립한회사이며,TumultHype는다양한수상경력을자랑하며사용자로부터엄청난찬사를받는툴이다.
8장,‘코드로프로토타이핑하기-FramerStudio사용하기’에서는프로그래밍기반의툴을활용한프로토타입을제작하는방법을집중적으로다룬다.코딩경험이있는독자라면프로토타이핑마인드셋을친숙한환경에적용해볼수있을것이다.대표적디자인툴인FramerStudio를사용하는단계별프로세스를설명한다.FramerStudio는기술스타트업의최고디자이너들과전세계디자인학교에서널리사용하고있다.
9장,‘사용자테스트’에서는실제사용자와함께프로로타입을테스트하고인터랙션을관찰하면서배우는방법을상세히다룬다.진행자가있는테스트를준비하기위해필요한계획도포함된다.테스트세션을계획하고전개하는방법과진행자가없는테스트의일반적인세부사항도함께다룬다.대규모프로젝트에서테스트의중요성을명쾌하게기술하며,이는지표정의및A/B테스트에대한측면을망라한다.

★옮긴이의말★

최근몇년간스타트업이늘어남에따라풀스택(full-stack)개발자모집이라는문구를심심치않게목격한다.풀스택이라는개념은이제개발자세계에서만머물지않고디자이너쪽으로도넘어오는듯하다.풀스택디자이너를용어그대로해석하면‘기획+디자인+코딩’을홀로작업하는사람인데,이는상상속의유니콘을찾는것처럼비현실적인욕심으로들리기도한다.
손에잡히지않는풀스택디자이너를목표로공부하거나일할필요는없지만,영역간의경계가점차흐릿해지고있는흐름을이해하고이에대한대응을준비하는것은피할수없는선택이아닐까싶다.기획자가파워포인트로화면의조작흐름을정의하고,이를토대로디자이너가포토샵에서그래픽으로만들고나면퍼블리셔가HTML코딩을하던이전의업무방식은전통적인대기업에서도찾기힘든구식이되어가고있다.다양한툴의발달과개발환경의변화(개발기간단축및Agile개발방법론확산)로인해기획,디자인,코딩이라는업무구분이약해지면서기획자,혹은디자이너가관여하거나리딩하는영역이확장되고있다.
기획자나디자이너라면InVision,Principle혹은Framer와같은프로토타이핑툴을다뤄본경험이있을것이다.아이디어의발상부터검증까지의프로세스를직접경험해볼수있고,개발자와효율적인커뮤니케이션이가능하다는점에서이러한프로토타이핑툴의중요성은점차크게다가온다.모바일앱에서는한껏높아진고객의눈높이를충족시킬수있는동적인인터랙션의중요도가크기때문에프로토타이핑을통한반복테스트와개선이필수적이다.이책은모바일앱디자인에서고려해야하는다양한지식을빠짐없이다루는동시에프로토타이핑툴을활용해아이디어를테스트하는과정을집중적으로설명한다.딱딱한이론서가아닌실용적인접근법을다루는실전서인만큼UX와관련된업무를담당하는모든분에게유용한지식을전달하리라고기대한다.
이책을통해함께일하는멤버들에게환영받는T자형인재로거듭나길바란다.