[목 차]
추천사 x
머리말 xii
이 책에 대하여 xiv
PART I 피그마 소개 1
CHAPTER 01 왜 피그마를 사용해야 하는가? 3
LESSON 01 웹 앱 개발을 이해하기 위한 UI/UX 4
LESSON 02 웹 개발을 위한 전체적인 프로세스 7
LESSON 03 협업을 위해 디자이너가 개발 공부를 해야 하는 이유 9
LESSON 04 협업을 위해 개발자가 피그마를 공부해야 하는 이유 10
CHAPTER 02 피그마 설치 및 인터페이스 11
LESSON 01 피그마 설치법 12
__피그마 웹사이트 회원 가입 12 / 피그마 데스크톱 애플리케이션 다운로드 17 / 모바일용 피그마 애플리케이션 다운로드 19
LESSON 02 피그마 인터페이스 확인 20
__전체 인터페이스 확인 20 / 메인 메뉴 22 / 툴 박스의 종류 23 / 패널의 종류 26 / 인터페이스 다크 모드 설정 28
LESSON 03 Dev Mode 사용을 위한 계정 업그레이드 29
PART II 개발자 핸드오프 31
CHAPTER 03 피그마 디자인 요소 확인 33
LESSON 01 피그마 디자인 구성 요소의 종류 34
LESSON 02 이동 툴과 레이어 패널을 이용한 요소 선택 35
LESSON 03 디자인 콘텐츠 간의 간격 확인 38
LESSON 04 멀티 에디트 기능 39
__모든 프레임 요소 크기 변경하기 39 / 다른 레이어의 텍스트를 한 번에 바꾸기 41
CHAPTER 04 스타일 확인 43
LESSON 01 색상 스타일 44
__색상 스타일 제작하기 44 / 색상 스타일 적용 및 해제하기 49 / 색상 스타일 그룹 제작하기 51 / 색상 스타일 제작 시 바로 그룹 제작하기 52
LESSON 02 텍스트 스타일 56
__텍스트 스타일 제작하기 56 / 텍스트 스타일 적용 및 해제하기 59
LESSON 03 그리드 스타일 61
__그리드 제작하기 62 / 그리드 스타일 등록하기 65
LESSON 04 이펙트 스타일 69
__이펙트의 종류 69 / 이펙트의 스타일 등록 76 / 이펙트의 스타일 적용 78
CHAPTER 05 협업 81
LESSON 01 코멘트 툴 사용법 82
__코멘트 달기 82 / 코멘트 확인 83 / 코멘트에 댓글 달기 84 / 전체 코멘트 확인 85 / 코멘트 숨기기 85 / 해결한 코멘트를 패널에서 숨기기 86 / 코멘트 삭제하기 87
LESSON 02 파일 공유 방법 88
__팀으로 초대하기 88 / 파일 주소 보내기 95 / 파일을 직접 공유하기 98
LESSON 03 프로토타입 미리 보기 100
__프로토타입 모드로 파일 보기 100 / 프로토타입 모드 공유하기 102
CHAPTER 06 이미지 저장하기 103
LESSON 01 이미지 포맷 104
__피그마에서 불러올 수 있는 이미지 포맷 104 / 피그마로 GIF 포맷 불러오기 105
LESSON 02 이미지 내보내기 109
__디자인 파일에서 이미지 내보내기 109 / 해상도 개념 알아보기 114 / 해상도에 따른 이미지 내보내기 120 / 프레임 선택하고 이미지로 내보내기 124 / 기획서를 PDF로 내보내기 126
LESSON 03 GIF보다는 APNG 사용 132
__GIF 파일 내보내기 132 / APNG 파일 내보내기 136
CHAPTER 07 CSS 코드 확인 139
LESSON 01 Dev Mode를 이용한 코드 확인 140
__Dev Mode 팀 파일로 변경 140 / Dev Mode 사용하기 143 / Dev Mode 기능 확인하기 147
LESSON 02 VS Code 연결 151
__VS Code와 피그마 연결 151 / VS Code에서 피그마 디자인 활용 154
LESSON 03 제플린과 피그마 연결 157
__제플린에 가입하고 피그마 연동하기 158 / 피그마에서 제플린 플러그인 설치하기 162 / 제플린에 연결된 피그마 파일 보기 165
PART III 개발에 맞춘 구성 요소 제작 167
CHAPTER 08 컴포넌트 제작 169
LESSON 01 컴포넌트 사용법 170
LESSON 02 인스턴스를 원본 컴포넌트로 변경 173
LESSON 03 인스턴스 해제 176
LESSON 04 에셋 패널 활용하기 179
LESSON 05 컴포넌트 안의 인스턴스 182
CHAPTER 09 오토레이아웃 187
LESSON 01 패딩과 마진 188
__패딩 실습하기 190 / 패딩과 마진 실습하기 194
LESSON 02 Space Between을 위한 Auto 200
LESSON 03 오토레이아웃 크기 단위 204
LESSON 04 오토레이아웃 정렬 기능 210
LESSON 05 Ignore auto layout 212
CHAPTER 10 반응형 웹 개발을 위한 기술 217
LESSON 01 정렬과 Constraints 218
__오토레이아웃 정렬 218 / 컴포넌트 정렬 220 / 프레임 정렬 224
LESSON 02 min-width와 max-width 230
__min-width 230 / min-height 234 / 자손 요소에 min-width 적용하기 237 / max-width 240 / max-height 243 / 자손 요소에 max-width 적용하기 246 / 사이즈 응용 예제 248
LESSON 03 오토레이아웃 wrap 256
LESSON 04 Dev Mode와 VS Code를 이용한 코딩 처리 262
PART IV 프로토타입 제작 289
CHAPTER 11 베리언트 소개하기 291
LESSON 01 베리언트 이해 292
LESSON 02 체크박스 만들기 295
LESSON 03 토글 스위치 만들기 301
LESSON 04 로그인 버튼 만들기 305
LESSON 05 인풋 필드 만들기 308
LESSON 06 베리언트 컴포넌트명이 다른 경우 발생하는 에러 312
CHAPTER 12 프로토타입 315
LESSON 01 프로토타입과 인터랙션 개념 정리 316
__프로토타입 패널 316 / 기기 선택 318 / 연결 만들기 321 / 인터랙션 창 321 / 프로토타입 실행 324
LESSON 02 베리언트를 활용한 로그인 페이지 프로토타입 326
LESSON 03 이미지 슬라이더 프로토타입 335
LESSON 04 오버레이 프로토타입 349
LESSON 05 포지션 프로토타입 353
__Fixed 기능 구현 354 / Sticky 기능 구현 358 / Scroll to 프로토타입 361
CHAPTER 13 변수 프로토타입 365
LESSON 01 변수의 종류 366
__색상 변수 등록 367 / 숫자 변수 등록 374 / 숫자 변수 오토레이아웃 수치 등록 380 / 문자열 변수 등록 385 / 변수의 그룹 처리 390 / 불리언 변수 등록 393
LESSON 02 문자열 변수 프로토타입 398
__변수에 따른 문자열 변경 398 / 문자열 변수와 Variants 408 / 버튼의 활성/비활성 처리 416
LESSON 03 숫자 변수 프로토타입 423
__숫자 변수를 사용한 온도계 423 / 숫자 변수를 사용한 볼륨 조절 435
LESSON 04 조건문 프로토타입 444
__조건을 이용한 볼륨 조절 445 / 상품 판매 배너 개수 조절 457
LESSON 05 변수 모드 469
__변수 모드를 이용한 상품 배너 470 / 변수 모드를 이용한 다크 모드 처리 487
PART V 반응형 웹 제작 501
CHAPTER 14 기획서 제작 503
LESSON 01 프레젠테이션 틀 제작 504
__프레임 사이즈 선정 505 / 공통 구역 컴포넌트로 제작 505
LESSON 02 하이퍼링크 기능 활용 509
__예제 파일 불러오기 509 / 글자에 하이퍼링크 적용하기 510 / 요소에 하이퍼링크 적용하기 512
LESSON 03 정보 설계와 작업 흐름도를 위한 Autoflow 플러그인 515
__정보 설계 연결선 처리 515 / 작업 흐름도 연결선 처리 519
LESSON 04 스타일 가이드 521
__예제 파일 불러오기 521 / 색상 가이드 522 / 폰트 가이드 522 / 로고 가이드 525 / 아이콘 가이드 526
LESSON 05 표 제작 529
__플러그인을 이용한 표 제작 529 / 스토리보드 제작을 위한 표 제작 536
LESSON 06 와이어프레임 제작 540
__Wireframe Generator 541 / Forms 543 / Handy Components 545 / 제공 와이어프레임 사용하기 546
CHAPTER 15 디자인 구현 553
LESSON 01 스타일 가이드 제작 554
__색상 스타일 등록 555 / 글자 스타일 등록 558 / 그리드 스타일 등록 561
LESSON 02 반응형 웹을 위한 컨스트레인츠 575
__헤더 영역의 컨스트레인츠 575 / 푸터 영역의 컨스트레인츠 578 / 사이즈별로 처리하기 580
LESSON 03 데스크톱 프로토타입 585
__메인 메뉴 제작 585 / 메인 이미지 제작 599 / 탭 바 제작 606 / 영상 재생 611 / 슬라이드 제작 617
LESSON 04 모바일 프로토타입 624
__메인 이미지 제작 624 / 캐러셀 제작 630 / 드로어 제작 636
LESSON 05 핸드오프 전 체크할 사항 643
__레이어 정리 643 / 컴포넌트 및 그룹 확인 644 / 수치와 영역 644 / 내보내기 645
[본 문]
웹 앱 프로젝트를 진행해본 사람이라면, 협업이 원활하지 않은 순간을 수없이 경험했을 것입니다. 기획자는 기획 의도를 잘 이해하지 못하는 디자이너나, 구현이 불가능하다고 말하는 개발자를 만나본 경험이 있을 것입니다. 디자이너는 기획안대로 디자인했을 뿐인데, 개발자가 말도 안 되는 디자인을 했다는 반응을 보이거나, 기획자가 UI/UX 개념을 이해하지 못한다고 지적하는 상황을 겪었을지도 모릅니다. 개발자라면 기획자나 디자이너가 컴퓨터로 안 되는 것이 어딨냐며, 개발이 불가능한 이유를 이해하지 못하는 모습을 보거나, 자신의 역량을 의심하는 눈초리를 받아본 적이 있을 것입니다. (3쪽)
웹 앱 개발에 종사하는 분들이라면 하루라도 빨리 피그마를 배우는 것을 추천합니다. 저는 과거 기업에서 피그마 강의를 진행한 적이 있습니다. 많은 기업이 피그마의 중요성을 실감하고 있는 만큼, 개인도 적극적으로 학습할 필요가 있습니다. 또한, UI/UX에 대한 이해도 함께 높이는 것이 중요합니다. UI/UX는 말 그대로 사용자 경험을 의미합니다. 따라서 직접 사용자가 되어 다양한 웹사이트와 애플리케이션을 경험하며 배우는 것이 가장 효과적인 학습 방법입니다. (6쪽)
개발자가 피그마로 제작된 결과물을 받으면, 먼저 디자인이 어떻게 구성되어 있는지 확인해야 합니다. 피그마는 다양한 디자인 구성 요소를 제공하므로, 적절한 요소를 정확히 선택하는 것이 중요합니다. 또한 개발 과정에서 요소 간 간격 조정도 핵심적인 부분입니다. 많은 개발자가 눈대중으로 간격을 확인한 후 구현했다가, 디자이너에게 지적을 받은 경험이 있을 것입니다. 따라서 이동 툴을 활용해 요소를 정확히 선택하고, 디자인 콘텐츠 간의 간격을 철저히 확인하는 것이 필요합니다. (33쪽)
2023년 6월, 피그마의 Dev Mode 출시로 피그마는 새로운 비전을 제시했습니다. 이와 함께 디자인 요소를 더욱 개발 환경에 맞춰 제작할 수 있는 기능들이 추가되었습니다. 현재 대부분의 웹사이트는 모바일 웹까지 함께 고려하여 반응형 웹으로 제작합니다. 이를 지원하기 위해 피그마는 다양한 기능을 제공하며, 개발자와 디자이너의 협업을 더욱 효율적으로 만들어줍니다. / 3부에서는 기존의 컴포넌트, 오토레이아웃, 컨스트레인츠 기능을 먼저 살펴보고, 반응형 웹을 위한 새로운 기능들이 무엇인지 확인합니다. 피그마가 제공하는 기능들을 통해, 더욱 효율적으로 개발 환경에 맞춘 디자인을 제작하는 방법을 알아보겠습니다. (168쪽)
피그마가 처음 등장했을 때 UI/UX 디자이너들 사이에서 Adobe XD보다 더 큰 관심을 받았던 이유 중 하나는 프로토타입 기능의 다양성 때문이었습니다. 피그마는 다양한 이벤트와 기능을 지원하여 폭넓은 형태의 프로토타입을 제작할 수 있습니다. 디자이너가 프로토타입을 잘 구현하면, 개발자는 전체 프로세스를 더 쉽게 이해할 수 있어 프로세스 이해를 위한 소통에 소요되는 시간을 줄일 수 있습니다. (중략) 4부에서는 피그마의 베리언트 기능과 프로토타입 기능을 중심으로 살펴보겠습니다. 디자인을 프로토타입에 맞춰 효과적으로 제작하면, 개발자와의 협업 과정에서 얼마나 많은 시간과 노력을 절약할 수 있는지 함께 확인해보겠습니다. (290쪽)
1부~4부까지 피그마의 많은 기능을 살펴봤습니다. 이런 기능들을 이용해서 5부에서는 반응형 웹을 제작해보겠습니다. 기획의 기초적인 내용부터 디자인 및 프로토타입 구현까지 모두 제작해볼 것입니다. 반응형 웹은 데스크톱, 태블릿, 모바일의 기기장치를 인식해서 반응하는 웹을 의미합니다. 디자이너가 데스크톱, 태블릿, 모바일 디자인을 전부 제작할 때 시간을 줄이는 방법과 개발자와 쉽게 소통할 수 있도록 프로토타입까지 구현해보겠습니다. 5부에서는 여행사를 주제로 ‘유로바이크투어’라는 반응형 웹 프로젝트를 제작해볼 것입니다. (502쪽)
이 책을 읽고 어떤 느낌을 받으셨나요?
리뷰를 남기고 다른 독자들과 함께 공유해보세요.
안내 열기구매(배송/수령완료) 후 리뷰를 작성하시면 적립금 300원을 드려요!