올인원 피그마 (기획자·디자이너·개발자를 위한 반응형 웹 제작 실습 가이드)

오시내

저자:오시내
강의를사랑하는프런트엔드개발자.컴퓨터공학을전공하진않았지만,디자인부터시작해서프런트엔드와백엔드까지아우르며웹개발에진심인1n년차개발자이자강사다.고양이와여행을좋아하며,가장큰즐거움은강의를통해지식을나누는것이다.현재유튜브‘오쌤의니가스터디’채널을운영하면서미래의프런트엔드개발자들과활발히소통하고있다.

추천사x
머리말xii
이책에대하여xiv

PARTI피그마소개1
CHAPTER01왜피그마를사용해야하는가?3
LESSON01웹앱개발을이해하기위한UI/UX4
LESSON02웹개발을위한전체적인프로세스7
LESSON03협업을위해디자이너가개발공부를해야하는이유9
LESSON04협업을위해개발자가피그마를공부해야하는이유10

CHAPTER02피그마설치및인터페이스11
LESSON01피그마설치법12
__피그마웹사이트회원가입12/피그마데스크톱애플리케이션다운로드17/모바일용피그마애플리케이션다운로드19
LESSON02피그마인터페이스확인20
__전체인터페이스확인20/메인메뉴22/툴박스의종류23/패널의종류26/인터페이스다크모드설정28
LESSON03DevMode사용을위한계정업그레이드29

PARTII개발자핸드오프31
CHAPTER03피그마디자인요소확인33
LESSON01피그마디자인구성요소의종류34
LESSON02이동툴과레이어패널을이용한요소선택35
LESSON03디자인콘텐츠간의간격확인38
LESSON04멀티에디트기능39
__모든프레임요소크기변경하기39/다른레이어의텍스트를한번에바꾸기41

CHAPTER04스타일확인43
LESSON01색상스타일44
__색상스타일제작하기44/색상스타일적용및해제하기49/색상스타일그룹제작하기51/색상스타일제작시바로그룹제작하기52
LESSON02텍스트스타일56
__텍스트스타일제작하기56/텍스트스타일적용및해제하기59
LESSON03그리드스타일61
__그리드제작하기62/그리드스타일등록하기65
LESSON04이펙트스타일69
__이펙트의종류69/이펙트의스타일등록76/이펙트의스타일적용78

CHAPTER05협업81
LESSON01코멘트툴사용법82
__코멘트달기82/코멘트확인83/코멘트에댓글달기84/전체코멘트확인85/코멘트숨기기85/해결한코멘트를패널에서숨기기86/코멘트삭제하기87
LESSON02파일공유방법88
__팀으로초대하기88/파일주소보내기95/파일을직접공유하기98
LESSON03프로토타입미리보기100
__프로토타입모드로파일보기100/프로토타입모드공유하기102

CHAPTER06이미지저장하기103
LESSON01이미지포맷104
__피그마에서불러올수있는이미지포맷104/피그마로GIF포맷불러오기105
LESSON02이미지내보내기109
__디자인파일에서이미지내보내기109/해상도개념알아보기114/해상도에따른이미지내보내기120/프레임선택하고이미지로내보내기124/기획서를PDF로내보내기126
LESSON03GIF보다는APNG사용132
__GIF파일내보내기132/APNG파일내보내기136

CHAPTER07CSS코드확인139
LESSON01DevMode를이용한코드확인140
__DevMode팀파일로변경140/DevMode사용하기143/DevMode기능확인하기147
LESSON02VSCode연결151
__VSCode와피그마연결151/VSCode에서피그마디자인활용154
LESSON03제플린과피그마연결157
__제플린에가입하고피그마연동하기158/피그마에서제플린플러그인설치하기162/제플린에연결된피그마파일보기165

PARTIII개발에맞춘구성요소제작167
CHAPTER08컴포넌트제작169
LESSON01컴포넌트사용법170
LESSON02인스턴스를원본컴포넌트로변경173
LESSON03인스턴스해제176
LESSON04에셋패널활용하기179
LESSON05컴포넌트안의인스턴스182

CHAPTER09오토레이아웃187
LESSON01패딩과마진188
__패딩실습하기190/패딩과마진실습하기194
LESSON02SpaceBetween을위한Auto200
LESSON03오토레이아웃크기단위204
LESSON04오토레이아웃정렬기능210
LESSON05Ignoreautolayout212

CHAPTER10반응형웹개발을위한기술217
LESSON01정렬과Constraints218
__오토레이아웃정렬218/컴포넌트정렬220/프레임정렬224
LESSON02min-width와max-width230
__min-width230/min-height234/자손요소에min-width적용하기237/max-width240/max-height243/자손요소에max-width적용하기246/사이즈응용예제248
LESSON03오토레이아웃wrap256
LESSON04DevMode와VSCode를이용한코딩처리262

PARTIV프로토타입제작289
CHAPTER11베리언트소개하기291
LESSON01베리언트이해292
LESSON02체크박스만들기295
LESSON03토글스위치만들기301
LESSON04로그인버튼만들기305
LESSON05인풋필드만들기308
LESSON06베리언트컴포넌트명이다른경우발생하는에러312

CHAPTER12프로토타입315
LESSON01프로토타입과인터랙션개념정리316
__프로토타입패널316/기기선택318/연결만들기321/인터랙션창321/프로토타입실행324
LESSON02베리언트를활용한로그인페이지프로토타입326
LESSON03이미지슬라이더프로토타입335
LESSON04오버레이프로토타입349
LESSON05포지션프로토타입353
__Fixed기능구현354/Sticky기능구현358/Scrollto프로토타입361

CHAPTER13변수프로토타입365
LESSON01변수의종류366
__색상변수등록367/숫자변수등록374/숫자변수오토레이아웃수치등록380/문자열변수등록385/변수의그룹처리390/불리언변수등록393
LESSON02문자열변수프로토타입398
__변수에따른문자열변경398/문자열변수와Variants408/버튼의활성/비활성처리416
LESSON03숫자변수프로토타입423
__숫자변수를사용한온도계423/숫자변수를사용한볼륨조절435
LESSON04조건문프로토타입444
__조건을이용한볼륨조절445/상품판매배너개수조절457
LESSON05변수모드469
__변수모드를이용한상품배너470/변수모드를이용한다크모드처리487

PARTV반응형웹제작501
CHAPTER14기획서제작503
LESSON01프레젠테이션틀제작504
__프레임사이즈선정505/공통구역컴포넌트로제작505
LESSON02하이퍼링크기능활용509
__예제파일불러오기509/글자에하이퍼링크적용하기510/요소에하이퍼링크적용하기512
LESSON03정보설계와작업흐름도를위한Autoflow플러그인515
__정보설계연결선처리515/작업흐름도연결선처리519
LESSON04스타일가이드521
__예제파일불러오기521/색상가이드522/폰트가이드522/로고가이드525/아이콘가이드526
LESSON05표제작529
__플러그인을이용한표제작529/스토리보드제작을위한표제작536
LESSON06와이어프레임제작540
__WireframeGenerator541/Forms543/HandyComponents545/제공와이어프레임사용하기546

CHAPTER15디자인구현553
LESSON01스타일가이드제작554
__색상스타일등록555/글자스타일등록558/그리드스타일등록561
LESSON02반응형웹을위한컨스트레인츠575
__헤더영역의컨스트레인츠575/푸터영역의컨스트레인츠578/사이즈별로처리하기580
LESSON03데스크톱프로토타입585
__메인메뉴제작585/메인이미지제작599/탭바제작606/영상재생611/슬라이드제작617
LESSON04모바일프로토타입624
__메인이미지제작624/캐러셀제작630/드로어제작636
LESSON05핸드오프전체크할사항643
__레이어정리643/컴포넌트및그룹확인644/수치와영역644/내보내기645

기획부터반응형웹제작까지,피그마로완성하라
이제피그마는단순한디자인툴이아니라,기획·디자인·개발을하나로잇는협업플랫폼으로자리잡았다.이책은그런피그마의진정한가치를보여주는실전형가이드다.기획자는피그마로효과적인기획서를만들고,디자이너는개발친화적인UI를설계하며,개발자는DevMode를통해디자인을코드로자연스럽게연결하는방법을배울수있다.

입문자도따라할수있는친절한실습중심의구성으로처음피그마를접하는사람도부담없이시작할수있도록하였다.각기능과개념을실제화면예시와함께단계별로익힐수있으며,단순히따라하기만하는예제가아니라‘왜이렇게해야하는지’를이해하며실무에바로적용할수있도록돕는다.피그마를한번쯤써봤지만실무에서는막막했던분들에게든든한길잡이가되어줄것이다.

책의마지막에는여행사콘셉트의‘유로바이크투어’라는반응형웹프로젝트를직접만들어보면서기획부터디자인,개발자핸드오프까지의전과정을체험할수있다.실무현장에서바로써먹을수있는구성요소설계,오토레이아웃,변수,프로토타입제작법등을통해협업의효율을극대화하는방법을배운다.

최신피그마UI3인터페이스와최근Config업데이트내용을반영하여,지금바로실무에적용가능한내용을담았다.또한저자의유튜브강의(오쌤의니가스터디)와함께보면학습효과가더욱커진다.

기획자,디자이너,개발자가함께피그마로더나은결과를만들어가고싶은모든사람을위한올인원실전형안내서다.이책한권이면기획부터디자인,프로토타입,반응형웹구현까지한번에익힐수있다.처음부터끝까지따라가다보면,어느새당신의프로젝트가더명확하고,더빠르고,더완성도높게바뀌어있을것이다.

주요내용
●피그마기본설치와인터페이스이해
●디자이너와개발자를위한협업기능과핸드오프방법
●색상·텍스트·그리드·이펙트스타일등디자인시스템구성
●컴포넌트,오토레이아웃,컨스트레인츠활용
●로그인페이지,이미지슬라이더,드로어등프로토타입제작실습
●저자가직접만든와이어프레임구성요소파일제공
●DevMode,VSCode,제플린연동으로개발협업하기
●반응형웹페이지기획·디자인·프로토타입제작과정완전실습