[나는 리뷰어다] UX/UI 디자이너를 위한 실무 피그마(개정판)(EBook)

1. 책 소개

 

디자인 시스템에서 개발 전달까지, 한 권으로 배우는 피그마 실무!

 

UX/UI 디자인 실무는 학교에서 배우기 어려워 온라인 클래스의 도움을 받는 실정이다. 이런 점을 감안하여 다른 튜토리얼 책에서는 볼 수 없는 현업에서의 디자인 시스템, 개발 전달 과정을 자세히 기술하여 실무를 전달하려 노력했다. 이 책은 두 부분으로 나누어 1부에서는 피그마 기능, 2부에서는 실습 프로젝트를 다룬다. 각 장의 레슨을 따라 하면 자연스레 피그마 사용 방법을 익힐 수 있다. 디자인 커뮤니티에서 받은 도움을 이 책에 녹였으니 새로운 디자인 자산을 축적하는 기회로 삼을 수 있을 것이다.

 

 

<개정판 주요 사항>

 

피그마의 주요 업데이트 내용을 추가하고 예제에 이를 반영했다. 

• 다크모드: 데스크톱과 웹 모두 다크모드 지원
• 오토레이아웃: 캔버스 컨트롤 가능 및 반응형 옵션 추가
• 컴포넌트 속성: 컴포넌트 속성을 사용해서 베리언츠 개수 줄이기 가능
• 스프링 애니메이션: 프로토타이핑에서 더 자연스럽고 부드러운 애니메이션 가능
• 가변 폰트: 가변 폰트 사용 가능
• 스포트라이트: 다른 사람이 내 화면에 집중하게 하는 기능 추가
• 개별 스트로크: 사각형 도형에서 상하좌우에 각각 선 적용 가능
• 브랜칭 리뷰 상태: 업데이트, 디자인 피드백, 변경 요청을 관리자가 승인 가능
• 아웃라인: 아웃라인에서 스트로크의 굵기와 도형의 가장자리를 알려주는 바운딩 박스 표시
• 패스워드 보안 링크: 파일과 프로토타입 공유 시 패스워드 지정 가능
• 데스크톱 탭 업데이트: 탭을 고정하거나 드래그하여 분리 가능
• 위젯 코드 제너레이터: 피그마 위젯을 플러그인처럼 만들고 커뮤니티에 배포 가능

 

 

2. 저자 소개

[저자] 클레어 정한국예술종합학교 디자인학과 졸업 작품을 준비하며 독학으로 스케치를 익히고 UX/UI 디자인 세계에 입문했다. 스타트업 초기 멤버로 시작하여 인하우스를 거치며 다양한 서비스를 만들었다. 현재 글로벌 블록체인 서비스의 프로덕트 디자이너로 일하고 있다.

 

3. 목 차

Part 1 피그마 활용하기

 

Chapter 1 피그마 시작하기 

__Lesson 01 왜 피그마인가

___피그마 소개

___피그마를 활용한 디자이너의 하루

___피그마를 활용한 기획자의 하루

___피그마를 활용한 개발자의 하루

___[디자인 노하우] 팀원들에게 피그마 도입을 설득하고 싶어요!

__Lesson 02 피그마 설치와 기본 인터페이스 둘러보기

___피그마 설치

___메인 대시보드

___상단 도구 모음

___사이드바

___공유와 뷰 세팅

___[디자인 노하우] 디자인하기 전 알아야 하는 UI 기술 지식

__Lesson 03 작업 전 환경 설정

___스케치 프로젝트를 피그마로 옮기기

___폰트

___안드로이드와 iOS UI 템플릿 다운로드

___기본 레이어 스타일 설정

___컬러 프로필 선택

___캔버스 컬러 선택

___Preference 설정

 

Chapter 2 그래픽 스타일과 라이브러리

__Lesson 01 그래픽 스타일과 벡터

___패널 기능 알아보기

___벡터

__Lesson 02 스타일과 라이브러리 

___스타일 만들고 편집하기

___그룹 스타일과 정렬

___라이브러리로 발행

___팀 라이브러리

___[실습] 스타일을 저장하고 라이브러리로 발행하기

 

Chapter 3 정렬과 레이아웃

__Lesson 01 정렬을 편리하게: 스마트 셀렉션

___스마트 셀렉션 만들기

___[실습] 특정 셀렉션 리사이징

___[실습] 여러 셀렉션 리사이징

___[실습] 오브젝트 복제

__Lesson 02 반응형 디자인을 위한 콘스트레인트와 레이아웃 그리드

___콘스트레인트

___[실습] 레이아웃 그리드

___콘스트레인트와 레이아웃 그리드 함께 활용하기

 

Chapter 4 리소스, 컴포넌트, 오토레이아웃

__Lesson 01 리소스 - 컴포넌트, 플러그인, 위젯

___리소스

___컴포넌트

___인스턴스 수정과 오버라이드

___[실습] 컴포넌트로 UI 구성하고 라이브러리 만들기

___플러그인

___위젯

__Lesson 02 블록처럼 UI를 구성하는 오토레이아웃

___오토레이아웃

___리사이징

___절대적 위칫값

___[실습] 오토레이아웃

 

Chapter 5 디자인 시스템과 협업 

__Lesson 01 진보한 디자인 시스템을 위한 베리언츠

___베리언츠

___[실습] 토글, 버튼 베리언츠

___베리언츠 만들고 사용하기

___프로처럼 베리언츠 활용하기

__Lesson 02 시스템을 정리하는 컴포넌트 프로퍼티

___컴포넌트 속성

___[실습] 리스트 컴포넌트에 컴포넌트 속성 적용하기

__Lesson 03 실제 화면처럼 시연하는 프로토타입

___프로토타입 요소

___인터랙션과 애니메이션 만들기

___프로토타입 세팅 설정하기

___프로토타입 화면 보기

___[실습] 두 프레임을 오가는 프로토타입 만들기

__Lesson 04 실제처럼 작동하는 인터랙티브 컴포넌트

___인터랙티브 컴포넌트

___[실습] 버튼 인터랙티브 컴포넌트

___[실습] 토글 인터랙티브 컴포넌트

___[실습] 모달 팝업 인터랙티브 컴포넌트

___[실습] 이미지 캐러셀 인터랙티브 컴포넌트

__Lesson 05 파일 관리가 필요 없는 버전 히스토리

___버전 히스토리 확인하기

___버전 확인하고 되돌리기

___[실습] 이전 히스토리로 복원하고 새로운 히스토리 저장하기

 

 

Part 2 피그마로 디자인하기 

 

Chapter 6 iOS 뉴스 앱

__Lesson 01 예제 설명 

__Lesson 02 하단 내비게이션 

__Lesson 03 카드와 리스트 

__Lesson 04 상단 탭 메뉴와 아티클 페이지 

__Lesson 05 페이지 전환 프로토타입 

___[디자인 노하우] 아이콘 활용 팁

 

Chapter 7 안드로이드 스포츠 클래스 앱

__Lesson 01 예제 설명 

__Lesson 02 공통 레이아웃 

__Lesson 03 메인 화면 

__Lesson 04 클래스 상세 페이지 

__Lesson 05 스크롤 프로토타입 

___[디자인 노하우] 다크모드의 디자인 요소

 

Chapter 8 반응형 패션 라이브 커머스

__Lesson 01 예제 설명 

__Lesson 02 반응형 웹을 위한 레이아웃 그리드 

__Lesson 03 아이콘 

__Lesson 04 내비게이션 

__Lesson 05 카드 UI 

__Lesson 06 패드 뷰와 데스크톱 뷰 

__Lesson 07 가로 스크롤 프로토타입 

__Lesson 08 슬라이드 프로토타입 

__[디자인 노하우] 반응형 디자인의 이해

 

Chapter 9 디자인 시스템

__Lesson 01 예제 설명 

__Lesson 02 시스템 원칙 

__Lesson 03 컬러 시스템 

__Lesson 04 타이포그래피 

__Lesson 05 버튼 

__Lesson 06 텍스트 인풋 

__Lesson 07 토글과 태그 

__Lesson 08 라디오 버튼과 체크박스 

__Lesson 09 카드와 모달 

__Lesson 10 페이지 구성 

 

Chapter 10 글로벌 NFT 마켓

__Lesson 01 예제 설명 

__Lesson 02 공통 컴포넌트 

__Lesson 03 콘텐츠 영역

__Lesson 04 정보성 컴포넌트 

 

 

부록 A 개발 전달과 파일 관리

__Lesson 01 개발 전달 

___디자인 에셋 내보내기

___모든 이미지 한 번에 내보내기

___[디자인 노하우] 디자인과 개발 화면이 다를 때

__Lesson 02 코드 확인 

___코드 변환 전 체크 요소

___기본 인스펙터

___플러그인 활용

__Lesson 03 브랜치로 파일 관리

___브랜치 활용하기

___브랜치 만들기

___브랜치 리뷰 요청하기

___메인 파일에 브랜치 머지하기

___브랜치 관리하기

 

부록 B 단축키와 플러그인

__Lesson 01 단축키 

___헬프 버튼

___필수 단축키와 선택 단축키

___커스텀 단축키

___자주 사용하는 Quick action

__Lesson 02 플러그인 

___플러그인 시작하기

___필수 플러그인

___추천 플러그인

___팀 플러그인

 

 

4. 후기

처음 UX/UI 디자이너를 위한 실무 피그마가 나왔을 때 이번에 나온 디자인 책 중에서 가장 잘 나온책이라 생각 되어서 EBook으로 하나 구입을 하려고 했었는데.. 이번에 개정판이 나오면서 이렇게 EBook으로 받을 수 있게 되어 좋았다.

이번 어도비의 피그마 인수로 피그마가 좀 더 도약하는 발판이 될것이라 생각 되기에 디자이너 혹은 디자이너와 함께 하는 개발자분들이 보기에 좋은 책이라 생각 되어 진다.

 

 

한빛미디어 <나는 리뷰어다> 활동을 위해서 책을 제공받아 작성된 서평입니다.