디자이너와 엔지니어를 위한 모델 기반 UI 디자인 (감각이 아니라 구조로 만드는 UI와 정보 디자인)

마루사토리

아이폰3GS등장을계기로iOS애플리케이션개발의세계에독학으로입문해다양한개발프로젝트를경험했다.시스템엔지니어를거쳐굿패치에서엔지니어출신디자이너로서정보아키텍처관점의UI디자인기법보급에힘썼다.현재는타임랩에서근무하며,전문분야는UI,상호작용,정보아키텍처에관련된디자인외에맥OS와iOS의네이티브애플리케이션개발이다.애플플랫폼계열커뮤니티나UI디자인분야에서usagimaru라는닉네임으로활동하며,‘매끄럽고아름다운소프트웨어’를실현하기위해노력하고있다.

CHAPTER1정보설계와UI디자인1
1.1소프트웨어와UI3
__소프트웨어디자인하기/소프트웨어디자인이란?3
__사람이소프트웨어를조작하기위해서는UI가필요하다5
__UI란무엇일까?5
__소프트웨어와사용자를고려하고,소프트웨어적인사고로UI를구성한다6
__사용자에게는UI가전부7
1.2정보설계시점에서의UI디자인사고방식9
__정보는무엇일까?9
__정보의전달방식과맥락에포함된데이터와지식의관계10
__UI를허브로사용해정보전달방식설계하기11
__정보설계는사물에뼈대를제공하는것이다12
__정보아키텍처12
__정보설계는형태가쉽게변하는소프트웨어에꼭필요하다14
__설계를쌓아서논리를연결한다14
__확장성과유연성의식하기15
__페이스레이어링16
__변경가능성에대비한다18
__사용자환경의계층구조19
__소프트웨어로서의UI20
__디자인공통언어,디자인언어21
__적극적인패턴화와재사용22
1.3UI의구성요소24
__UI를구성하는기본요소24
__콘텐츠25
__비주얼요소26
__뷰와레이아웃27
__메뉴와컨트롤28
__입력장치30
__입력방법31
__출력장치32
1.4모델기반UI디자인33
__모델아이디어33
__모델/인터랙션기술/룩앤필35
__디자인프로세스의개요36
__디자인프로세스의각공정37

CHAPTER2유스케이스정의41
2.1유스케이스중심설계43
__기능대신유스케이스고려하기43
__모든것은유스케이스에기반한다45
2.2유스케이스표현방법47
__유스케이스정의방침47
__'누가','무엇을','할수있다'구문48
__행동시나리오,페르소나모델49
__명사와동사/객체와태스크50
__'누가'하는지생각하기51
__'하다'가아닌'할수있다'를사용하기52
__유스케이스이름54
__유스케이스분류54
__유스케이스번호55
__유스케이스정의를위한도구57

CHAPTER3태스크정리59
3.1태스크정리방침61
__'태스크','액션','기능'61
__특징과작동에의한기능구분61
__유스케이스,특징,작동63
__태스크리스트63
__태스크리스트확장,CRUD열추가64
__태스크리스트보완하기65
3.2태스크찾아내기66
__태스크도출66
__태스크분기조건명시67
3.3CRUD태스크분류68
__CRUD68
__개념객체와CRUD대응70
__Read는기본적으로존재하므로CUD로먼저태스크정리71
__CRUD를사용해구체적인태스크검토하기71
__유스케이스기반태스크평가76

CHAPTER4개념설계79
4.1UI의개념모델81
__개념설계의목적81
__개념설계의의의82
__관련용어83
__개념객체84
__콘텐츠구조84
__프레임구조85
__내비게이션구조85
4.2콘텐츠구조설계86
__개념객체의단서86
__개념객체의요건88
__개념객체에이름붙이기88
__이름살펴보기89
__용어의정의(시소러스정의)90
__핵심객체파악하기91
__개념객체의시점에서연관성파악하기92
__단방향으로연관성을나타내는예시93
__다중도나타내기94
__다중도에서패턴을파악하는방법96
__개념객체의확장,프로퍼티작성98
4.3프레임구조의설계관점100
__와이어프레임에대해생각해보기100
__프레임구조를설계하는방침101
__단위뷰102
__콘텐츠구조와개념객체에서뷰표현검토하기103
__유스케이스와콘셉트로뷰표현검토하기104
__글로벌내비게이션을결정하는방침107
__앱단위또는모드단위로내비게이션구조를하나로사용하기107
__레이아웃의기본방침결정하기108
__프레임표현방법109
__콘텐츠구조와프레임구조대응시키기112
__마지막으로레이아웃정리하기115
4.4콘셉트정의116
__제공하고자하는사용자경험나타내기116
__디자인철학나타내기117
__기능나타내기117
__콘셉트이미지그리기118
__콘셉트로돌아가기119
4.5멘탈모델정리120
__멘탈모델이란?120
__개념객체,태스크,콘셉트120
__개념객체리스트작성하기121
__태스크리스트작성하기122
__콘셉트리스트작성하기122
__부모-자식관계나타내기122
__의존관계나타내기124
__우선순위나타내기124
4.6리버스모델링127
__리버스모델링의목표와의의127
__1단계UI이미지에서개념객체후보추출128
__2단계개념객체후보가반복적으로나타나는성질인지판단하기129
__3단계프레임구조에서유사표현찾기130
__4단계개념객체와콘텐츠구조정의하기131
__5단계뷰와개념객체대응시키기131
__6단계모델분석132

CHAPTER5내비게이션구조설계135
5.1내비게이션설계방침137
__내비게이션설계에착수해야할시기137
__화면단위로구분하는방식피하기138
__뷰단위로파악하기140
5.2내비게이션의기본구조142
__개요리스트상세표시142
__개요리스트와상세표시의기본세트와응용143
__동일계층간의내비게이션144
5.3내비게이션의표현패턴146
__드릴다운146
__스텝형147
__플랫형148
__피라미드형(빌딩형)149
__허브앤스포크구조151
__오버레이:강한모달뷰152
__오버레이:약한모달뷰154
__오버레이:모드리스플로팅뷰155
__상태변화·전환형156
__콘텐츠중심의비선형내비게이션157
__내비게이션컨트롤내비게이션바159
5.4내비게이션을보조하는메커니즘159
__커맨드와제스처160
__브레드크럼리스트160
__활성화와하이라이트161
5.5내비게이션설계의기본방침162
__목표지점을1개또는2개로설정한다162
__다중도기반내비게이션패턴검토하기163
__개념객체를고구마줄기와같은이미지로생각하기164
5.6양방향내비게이션설계와교차연결전략167
__보텀업과톱다운방식167
__보텀업방식:유스케이스를참고하여상세표시부터거슬러올라가기168
__톱다운방식:글로벌내비게이션패턴검토하기169
__톱다운방식:유스케이스를참고하여2단계이후의구조검토하기172
__유스케이스의우선순위검토173
__두설계도를겹쳐보고차이를비교하기174
5.7기타내비게이션설계기술176
__사용자의능동성과수동성176
__노출기회를고려하여배치한다177
__탭내비게이션을간단하게유지178
__중간행동은기본원칙에따른다179
__컴포지트(복합)표현:탭내비게이션180
__컴포지트표현모드기반내비게이션181
__칸막이식구조에주의한다183
__탭점프를억제한다185
__탭바내비게이션바를불필요하게숨기지않는다185
__상세표시의모달화를가능한한피한다186

CHAPTER6플랫폼에맞는인터랙션설계187
6.1폼팩터와플랫폼189
__폼팩터란?189
__폼팩터의유형190
__플랫폼의종류193
__소프트웨어개발에서폼팩터와플랫폼의결정방식194
__네이티브기술의장단점196
__크로스플랫폼기술의장단점197
__웹플랫폼브라우저기반앱의장단점198
6.2정보설계와레이아웃200
__레이아웃의기본원칙200
__인터페이스의지향성201
__우→좌(RTL)레이아웃202
__세로쓰기레이아웃203
__적응형레이아웃과반응형레이아웃203
__개념모델을기반으로하는정보의계층화와패턴검토205
6.3데스크톱을위한인터랙션패턴208
__윈도시스템과멀티윈도환경208
__멀티태스크UI앱간연동209
__마우스와키보드210
__파일매니저파일시스템210
__멀티패널레이아웃211
__멀티패널의패턴214
__최소인터페이스앱218
__웹기반앱네이티브가아닌앱219
__메뉴와커맨드219
__플로팅툴바220
__키보드의바로가기바로가기키221
__수식키모디파이어키222
__키보드의바로가기설계224
__키보드내비게이션226
__작업취소(Undo)&다시실행(Redo)227
__더블클릭229
__보조클릭(콘텍스트메뉴)230
__드래그앤드롭230
__마우스버튼길게누르기(메인버튼)231
__클릭하고잠시기다리기232
__마우스보조버튼으로드래그(우클릭드래그)232
6.4모바일을위한인터랙션패턴233
__터치제스처종류233
__싱글윈도환경과싱글패널레이아웃237
__레이아웃의3단구성237
__시트표현239
__모바일환경에서고려해야하는사항240
6.5패턴과관용표현243
__패턴과관용표현활용하기243
__한번에기억할수있는관용표현244
6.6용도별관용표현과예시247
__에디터/크리에이티브도구(데스크톱)247
__오서링도구250
__콘텐츠브라우저(데스크톱/모바일)253

CHAPTER7구조설계와인터랙션설계257
7.1정보구조패턴259
__계층구조259
__중첩구조260
__트리구조261
__준격자구조263
7.2모드267
__모드란무엇일까?267
__모드리스방식의인터페이스268
__모달방식의인터페이스271
__1회성모드273
__일시모드273
__처음부터모드를완전히없앨수있을까?274
7.3모드리스를위한기술276
__조작대상객체가먼저눈에들어오도록한다276
__개념객체에기반한이름짓기278
__인터페이스를차단하지않는다280
__다중모달피하기284
7.4모드를간단하게만들기위한기술286
__현재모드를명확히보여주기286
__커맨드명에'...'을사용해모드발생암시하기287
__모달대화상자는닫기(x)버튼을제거한다288
__모드가느껴지지않도록만든다289
__모드의탈출구마련하기291

마치며:생성형AI와UI디자인294
참고문헌297