사용자를 사로잡는 UX/UI 실전 가이드 (시장에서 살아남는 화면 설계와 스마트한 데이터 활용법, 현실적인 브랜딩과 디자인 윤리까지)

김성연

글쓰는디자이너.현업에서10년째사용자경험을디자인하는일을하고있다.디지털컨설팅회사를거쳐예비유니콘스타트업정육각에서‘HeadofDesign’,한국에서글로벌앱을만드는스타트업픽소에서‘SeniorProductDesigner’로일한바있다.현재는우디라는필명으로브런치와각종매체에서디자인관련글을쓰는작가로활동중이며,국내에서가장큰디자인윤리커뮤니티를운영중이다.

Chapter1UX/UI제대로이해하기
1.1UX디자인?UI디자인?
__1.1.1UI-사용자인터페이스
__1.1.2UX-사용자경험
__1.1.3프로덕트디자이너-제품중심조직의디자이너
__1.1.4UX/UI디자인의진행과정
__1.1.5Designer'sNote알아두면쓸모있는UX용어
1.2UI의구조와요소
__1.2.1UI의구조
__1.2.2UI의요소
1.3모바일디자인트렌드의변화
__1.3.1마이크로소프트의메트로디자인
__1.3.2애플디자인의변천사
__1.3.3애플의한디자이너와관성스크롤
__1.3.4뉴모피즘은새로운UI트렌드가될수있을까?

Chapter2웹/앱디자인시반드시알아야할것들
2.1해상도이해하기
__2.1.1목적에맞는해상도설정
2.2픽셀밀도와선명도의상관관계
__2.2.1화면크기에따른픽셀밀도차이
__2.2.2픽셀의다양한표현방식
__2.2.31단계.논리적해상도
__2.2.42단계.물리적해상도
__2.2.53단계.다운샘플링
__2.2.64단계.기기표현
__2.2.7iOS의PT와안드로이드의DP/SP
2.3모바일서비스를위한앱개발과정이해하기
__2.3.1네이티브앱
__2.3.2모바일웹앱
__2.3.3하이브리드앱
2.4와이어프레임과프로토타입의이해
__2.4.1와이어프레임
__2.4.2프로토타입
__2.4.3프로토타입제작툴
__2.4.4Designer'sNote효과적인유저스토리작성법
Chapter3살아남는것은잘설계된것이다
3.1생존을위한전략,MVP
__3.1.1최소기능제품과MVP피드백루프
__3.1.2MVP로시장검증에성공한드롭박스와에어비앤비
3.2우리의진짜경쟁자는누굴까?
__3.2.1경쟁사분석을하는이유
__3.2.2경쟁사목록표만들기
__3.2.3기능비교표만들기
3.3디자이너가데이터에관심가지면보이는것들
__3.3.1디자이너의든든한근거,데이터
__3.3.2사용자의선호도를파악하는A/B테스트
__3.3.3사용자의경로를추적하는과정,퍼널
__3.3.4비즈니스성장을위한핵심지표,AARRR
__3.3.5Designer'sNote한끗차이가만든다른결과,정육각고기두께비교UI
3.4진짜문제를찾아서,심층인터뷰와어피니티다이어그램
__3.4.1심층인터뷰
__3.4.2어피니티다이어그램
__3.4.3Designer'sNote브레인스토밍에유용한질문법,HMW
3.5사용자유형을대변하는가상의인물,UX페르소나
3.6문제의근본원인을찾아,5Whys와골든서클
__3.6.1사례로보는5Whys
__3.6.25Whys와짝을이루는골든서클
3.7더나은UX라이팅을위한몇가지팁
__3.7.1UX라이팅vs카피라이팅
__3.7.2좋은UX라이팅을만드는4가지법칙
__3.7.3실전,UX라이팅적용하기

Chapter4더나은비주얼디자인을위하여
4.1타이포그래피의기본,웹폰트
__4.1.1웹폰트의이해
__4.1.2웹폰트가호출되는과정
4.2좋은디지털타이포그래피의7가지공식
__4.2.1공식1.최소한의폰트종류
__4.2.2공식2.가독성을높이는행간
__4.2.3공식3.폰트크기에따른자간
__4.2.4공식4.한줄에적당한글자수
__4.2.5공식5.배경색과충분히구별되는글자색
__4.2.6공식6.계층구조를활용한타이포그래피
__4.2.7공식7.성격에맞는폰트선택
__4.2.8Designer'sNote폰트&이미지로브랜드톤구축하기
4.3시각적위계를만드는5가지강조방법
__4.3.11.크기를이용한강조
__4.3.22.색을이용한강조
__4.3.33.질감을이용한강조
__4.3.44.공간감을이용한강조
__4.3.55.형태를이용한강조
__4.3.6시각적위계를활용한버튼디자인
4.4컬러와UI디자인
__4.4.1브랜드컬러와정서
__4.4.2이미지를키워드화해컬러를도출하는‘색상이미지공간’
__4.4.3톤온톤을이용한컬러배색
__4.4.4컬러강조와어포던스
__4.4.5시스템컬러
4.5디지털그리드시스템의이해
__4.5.1그리드시스템이해하기
__4.5.2반응형디자인과브레이크포인트
4.6피보나치수열과시각적질서
__4.6.1피보나치로타이포그래피적용해보기
__4.6.2피보나치로간격기준만들기
4.7인터페이스속다양한아이콘
__4.7.1앱아이콘과시스템아이콘
__4.7.2아이콘과시각보정
__4.7.3Designer'sNote용도에맞게활용하는시스템아이콘

Chapter5목표달성의심리학
5.1파충류설득하기
__5.1.1자동시스템vs숙고시스템
__5.1.2인지적구두쇠
__5.1.3Designer'sNote자동시스템을이끌어내는디자인
5.2휴리스틱을활용한웹/앱평가
__5.2.1대표성휴리스틱
__5.2.2가용성휴리스틱
__5.2.3제이콥닐슨의10가지휴리스틱평가
5.3뇌는예측불허를사랑해
__5.3.1도파민과동기부여
__5.3.2틴더의스와이프
5.4구매유도를위한심리학
__5.4.1긍정적메시지가주는효과-손실회피편향
__5.4.2이득을추구하는비교심리-닻내리기효과
__5.4.3이미정해진결론-미끼효과
__5.4.4끝까지이끄는힘-부여된진행효과
__5.4.5Designer'sNote타깃사용자의특성에맞는결제시스템
__5.4.6디자이너가알아두면좋은8가지심리법칙
5.5훅모델로사용자습관형성하기
__5.5.1습관을만드는훅모델
__5.5.2훅모델과디자이너의윤리
__5.5.3Designer'sNote삶을조금더나은방향으로이끄는앱

Chapter6가장현실적인브랜딩
6.1브랜드다움찾기:핵심가치
__6.1.1매일노력할수있는것,핵심가치
__6.1.2‘와비파커’의핵심가치
6.2브랜드가꾸는꿈:비전과미션
__6.2.1이루어지지않을꿈,비전
__6.2.2끝내이루어지지않을꿈을실현해가는,미션
__6.2.3에어비앤비의비전과미션
6.3시선의일치:구체적타깃설정과브랜드의인화
__6.3.1타깃과라이프스타일
__6.3.2Designer'sNote착한브랜딩에관하여
6.4표면만들기:브랜드아이덴티티
__6.4.1브랜드의얼굴,로고
__6.4.2브랜드의정서,컬러
__6.4.3브랜드의정체성,사진
__6.4.4메시지의질감,폰트
__6.4.5가치를전달하는도구,태그라인과슬로건
__6.4.6그외시각요소
6.5브랜드알리기:트리플미디어전략과채널믹스
__6.5.1Designer'sNote‘벽’을고객과만나는‘통로’로
6.6‘정육각’으로알아보는브랜딩의실제
__6.6.1브랜드의가치찾기
__6.6.2리브랜딩의시작,로고에서肉을떼기까지
__6.6.3브랜드미션과조형언어
__6.6.4핵심가치와미션이반영된로고디자인
__6.6.5이후브랜딩과정
__6.6.6Designer'sNote알아두면쓸모있는마케팅용어

Chapter7디자인과윤리
7.1지금,디자인에윤리가필요한이유
__7.1.1짤막한디자인윤리의역사
__7.1.2인스타그램의허상지표
__7.1.3인터페이스가중립적일것이라는착각
__7.1.4SNS의‘에코챔버’에서벗어나는법
7.2다크넛지와UX패턴
__7.2.1우선,넛지
__7.2.2다크넛지란?
__7.2.3Designer'sNote디자인의목표를새롭게설정할수있을까?
7.3중독적인인터페이스
__7.3.1간헐적보상심리
__7.3.2정지신호의부재
__7.3.3FOMO
__7.3.4사회적승인
__7.3.5Designer'sNote디자인윤리를고려한팀활동,저지먼트콜

Chapter8부록
8.1디자이너의말그릇

브런치조회수40만작가,10년차디자이너김성연(우디)의
사용자를유혹하는UX/UI의기술
이책에서다루는주제는7가지다.먼저현직디자이너도쉽게정의하지못하는‘UX/UI를제대로이해하는것’부터시작한다.그렇게프로덕트디자이너의역할을이해한다음‘웹/앱디자인을시작하기전알아두어야할것들’픽셀,해상도,단위등으로기초를탄탄하게다진다.본격UX/UI디자이너로서첫발을뗄수있도록실무에서활발히쓰이는리서치개념과비즈니스전략,UX라이팅을비롯해화면의완성도를높이는설계요소까지둘러볼것이다.
후반부에선사용자를이해하기위한,그리고목표를조금더쉽게달성하기위한‘심리학’을살펴본다.여기에스타트업도지금당장시작할수있는‘가장현실적인브랜딩’을더했다.한발더나아가디자이너로서나아가야할길에대한인사이트를얻을수있는‘디자인과윤리’그리고부록으로‘디자이너의말그릇’까지눌러담았다.저자의목소리를따라책장을모두넘기고나면어느새UX/UI의광범위한세계를마주보게될것이다.

비주얼디자인?UX라이팅?리서치?브랜딩!
오래가고실현가능한것들에대하여
시각적요소부터브랜딩까지.폭넓다면폭넓은주제를다루고있지만이책은단순히아름다운디자인을하는법이나브랜딩의원론적인이야기를다루지않는다.10년차현직디자이너이자작가로서활동한저자의모든경험이고스란히녹아있기때문이다.이책으로나아갈방향을점치는게아닌,나아갈방향을스스로생각하는힘을얻게될것이다.

-추천사-
디자이너를둘러싼환경이급변하는탓에수많은디자이너가‘지금이렇게디자인을하는게맞는걸까?’라는자기검증의시간을갖곤했었다.나또한이직을하거나새로운프로젝트를시작할때이과정을되풀이했던것같다.이책은우디님이10년간쌓은노력과경험을잘담아냈다.디자인을시작하는이들에게는좋은입문서로,실무에서한창디자인을하고있는이들에게는스스로의디자인방법론을돌이켜보는좋은지침서가되리라확신한다.디자인을하면서길을잃었을때이책을들춰본다면상황에맞는현명한어드바이스를찾을수있을것이다.
-김지홍,디자인스펙트럼파운더/멋쟁이사자처럼HeadofDesign

사용자경험이란실체가막연하고복합적이다.UX디자인을한가지분야만으로설명할수없는이유다.시중에UX실용서를표방하는책들은툴사용법에그치거나웹/UI디자인이론서를넘어서지못하는경우가많았다.그러나이책은‘풀스택UX디자이너’가되기위한리서치,비즈니스,심리학,브랜딩,비주얼까지빠짐없이담겨있다.방법론이나트렌드를수집하고나열하는것을넘어실무에쓰이는지식으로구성돼있다.반면제품과목적에맞는‘도구’를선택하는일은독자들이능동적으로할수있도록펼쳐놓았다.UX에입문하려는사람,제한된환경에서일당백을해야하는사람,주먹구구식실무처리에한계를느끼는사람모두에게추천한다.
-케일라,메타(페이스북)프로덕트디자이너

좋은서비스를만들고싶은사람을위한종합선물세트!디자이너뿐아니라IT업계에서서비스를만드는데관심있는모든주니어에게이책을추천한다.서비스를만들려면알아야할필수내용들과최신트렌드가굉장히잘담겨있다.심리학전공자의시선으로보면,이책은적절한심리학이론을기반으로디자인요소를쉽게잘풀어내고있다.심리에대한높은이해는좋은서비스를더잘만들기위해서굉장히유용할것으로기대한다.
-김수민,우아한형제들PM(전네이버제트PM)

‘시각적인터페이스디자인’이라는영역을뛰어넘어‘디지털프로덕트디자인’의근본적인주제를다루는가이드북.매일아침눈을뜨면서잠들기까지사용하는전자기기의디지털프로덕트는어떤요소로구성되어있으며,왜그렇게설계되었는지를이해하기쉽게설명해준다.디자이너뿐만아니라디지털프로덕트사업을전략적으로설계하는방법을고민하는사람에게도이책을추천한다.
-최지윤,구글본사UX디자이너

디자이너를위한성장지침서.디자이너라면반드시알아야할용어와개념으로시작하지만서비스와비즈니스를이해할수있는안목을더하고디자인원칙,심리학,전략을연구하며성장할수있도록가이드를제시한다.또한저자의오랜경험과깊은생각이녹아든생생한사례들과노하우들을고스란히담고있다.책후반부에는‘인간을위한디자인이란무엇인가’라는근본적인질문으로돌아가디자이너가성장하는데필요한것이지식만이아니라는것을시사하고있다.성장을갈망한다면,인간을위한디자인이무엇인지고민하고있다면,디자이너로서무엇을할수있을까를생각해본적이있다면이책을추천한다.
-정다영,명지대학교교수/디자인스튜디오듀오톤공동대표

명확히정리된기본지식없이눈앞의실무를중심으로디자인을‘작업’하는디자이너들에게생각의기본이되는토대와생각하는힘을만들어주는훌륭한디자인지침서다.
-안재원,큐피스트(글램)CEO

UX/UI가이드를넘어프로덕트디자이너의정체성마저가이드하는책.10여년간제품을만들며부딪치고구르면서배운것보다더많은내용이이책한권에정갈하게담겨있다.
-김윤혁,강남언니HeadofHR(전CPO)

좋은제품을만들려면디자이너는복합적인소양을갖추어야한다.이책은그소양을갖추는데필요한지식을한곳에명쾌하게정리했다.이제막실무를시작한디자이너는개념이해부터디자이너로서의성장방향을엿볼수있고,현직디자이너에게는접근방식의다양성에대해다시금생각해볼수있는기회를제공한다.저자가UX/UI디자인을얼마나깊이연구하고고민해왔는지알기에더욱신뢰할수밖에없는책이다.UX/UI디자이너의역량을제대로갖추고싶다면이책을꼭소장하길바란다.
-송아미,식스샵프로덕트디자이너/《처음만나는피그마》저자

사용자경험을설계하고디자인하는과정은인간에대한이해를바탕으로다양한분야가어우러진융합영역인만큼심리학에대한이해가중요하다.이책은심리학은물론이고마케팅과브랜딩,데이터에이르기까지UX/UI가적용되는모든범위를다루고있어서정말놀라웠다.개인적으로이런책이나오길오랫동안기다려서더욱반가운마음이든다.
-서연주,fromdesigner커뮤니티리더/인하우스UI디자이너

사람의마음을움직이는데디자인은그어떠한것보다큰영향을미친다.사람들의시간과관심을얻기위해노력하는서비스라면더더욱.세상은점점더빠르게변하고있다.변하는환경에서더좋은디자인을만들기위해서는어떤문제를만나더라도해결할수있는나만의생각법을익혀야할것이다.이책은빠르게성장한IT기반서비스를만들어온저자의생각법을압축한책이다.지금사람의마음을움직이는서비스를만들고자한다면꼭읽어보길바란다.
-박종민,마이리얼트립리드디자이너

입사전꿈꿨던디자인과실무는전혀달랐다.무엇보다이해관계자와원만하게프로젝트를진행하는것은결코쉽지않다.이책에담긴디자이너에게꼭필요한만큼의실무지식은이해관계자를설득하는데실제로도움이될것이다.이책에담긴내용은실무사례들은저자의경험과지식의깊이가얼마나남다른지를보여주고있다.이책을다읽고나면자신있게말할수있을것이다.“나는디자이너다”라고.
-박나래,RakutenGroup,Inc.2년차디자이너

생각을가시화하고사용자경험을섬세하게살펴문제를해결하는일,경험을통해또다른가능성을탐색하는일.이것이우리의일이다.어렵지만매력적이다.마음가짐부터디테일한실무까지아우르는내용들을읽다보니사용자를넘어'인간을위한디자인의본질'을다시상기하게된다.분명한목적과목표를가지고균형감각을만들고자하는디자이너들에게지침서가되기를기대한다.
-최소현,퍼셉션대표

PM/PO로프로덕트팀에서일할때메이커들의전문성이발현될여지를주는것이중요하다고강조하곤했었다.UI설계에대한PM의역할이무엇인지궁금하다면백마디말보다도이책한권을추천한다.프로덕트를만드는과정에서'프로덕트디자이너의전문성'이무엇인지깨닫게해준다.즉흥적이고습관적인UI를디자인하는디자이너에게는장기적으로성장할방향성을제시해줄것이다.
-이미준(도그냥),지그재그PO/《현업기획자도그냥이알려주는서비스기획스쿨》저자

“UX/UI디자이너의역할이뭘까요?”디자인커뮤니티에자주등장하는질문이다.디자이너도알기어려운디자이너의역할을저자는'문제해결능력'으로설명한다.사용자가가진핵심문제를해결하기위해서는수많은방법을고려해야한다.다행히도저자는우리가당장시도할수있는방법을7개챕터로친절히안내하고있다.사용자의마음에닿기위한방대한여정속에서좀더빠른길을찾을수있는안내서로이책이유용하게사용되기를바란다.
-박성일,쿠팡프로덕트디자이너