메뉴 바로가기 검색 및 카테고리 바로가기 본문 바로가기

한빛출판네트워크

오래된 내 정보 속 옥의 티를 찾아라(2022.9.22~12.31) / 회원정보 UPDATE하고 선물도 받고!

UX/UI 디자이너를 위한 실무 피그마(개정판)

디자인 시스템에서 개발 전달까지

한빛미디어

집필서

판매중

  • 저자 : 클레어 정
  • 출간 : 2022-11-01
  • 페이지 : 416 쪽
  • ISBN : 9791169210461
  • 물류코드 :11046
초급 초중급 중급 중고급 고급
4.9점 (7명)
좋아요 : 3

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

 

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

 

 

<개정판 주요 사항>

 

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

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

 

<예제 소스>

figma.com/@uidesignguide

 

 

UX UI 디자이너를 위한 실무 피그마(개정판)_700.jpg

클레어 정 저자

클레어 정

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

 

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 플러그인 

___플러그인 시작하기

___필수 플러그인

___추천 플러그인

___팀 플러그인

협업에 특화된 UX/UI 디자인 도구 - 피그마

기능은 예제로 익히고, 실무 감각은 프로젝트로 스킬업

 

피그마는 글로벌 UX/UI 도구로 높은 성장을 하였습니다. 이 책은 피그마를 처음 시작하는 디자이너, 기

획자, 개발자를 위해 기본부터 응용까지 모두 담았습니다. 피그마 도구 설명과 디자인 개념을 안내하고

과정마다 예제로 실습합니다. 피그마를 제대로 사용하기 위해 필요한 기능을 익힌 뒤 프로젝트로 실무 역

량을 다집니다. 해상도, 아이콘 디자인 규칙, 다크모드 같은 좋은 디자인을 위해 고려해야 할 유용한 팁도

제시합니다. 풍부한 예제로 피그마를 익히고 실무 프로젝트로 디자인 역량을 높이세요.

 

  • 피그마 설치 / 환경 설정
  • 벡터 / 스마트 셀렉션 / 오토레이아웃
  • 콘스트레인트 / 레이아웃그리드
  • 컴포넌트 / 라이브러리 / 프로토타입
  • 개발 전달 / 코드 확인 / 버전 히스토리
  • iOS 뉴스 앱 / 안드로이드 스포츠 클래스 앱 / 반응형 패션 라이브 커머스
  • 디자인 시스템과 B2B 솔루션
  • 글로벌 NFT 마켓

 

추천사

 

피그마를 처음 시작하는 분이나 저처럼 피그마를 배우고 있는 학생에게 유익한 책입니다. 여러 가지 툴을 자세히 알 수 있고 내용이 어렵지 않아 좋았습니다.

_임수민 학생

 

최근에는 개발자에게 디자인이 넘어올 때 디자인 파일째로 넘어오기 때문에 개발자도 피그마 기능을 익혀두는 것이 좋습니다. 처음 피그마를 접한 사람을 위해 피그마의 모든 기능에 대한 상세한 설명이 좋았습니다.

_조현석 11번가 개발자

 

이 책은 개발자에게도 유익합니다. 이전까지는 디자인보다 프론트, 백이 더 중요하다고 생각했는데 책을 읽고 생각이 바뀌었습니다. 피그마로 디자인을 처리하는 흐름을 보니 프론트를 피그마에서 구현하는 듯합니다. 혼자 코딩을 한다면 이 책으로 디자인 측면과 프로젝트에 도움받을 수 있습니다. 저자의 노하우 공유는 고마울 정도입니다.

_윤수혁 학생

 

스케치보다 피그마가 익숙해질 세대를 위한 매뉴얼입니다. 피그마 기초를 이루는 핵심 용어와 이론이 잘 설명되어 있습니다. 기능적으로 다양한 선택지 아래 실제 응용 가능한 디자인 방법을 제공합니다.

_정소연 두나무 디자이너

 

피그마를 처음 시작하는 디자이너뿐만 아니라 개발자와 마케터에게도 유용합니다. 마케터로 일하며 피그마를 통한 협업이 필수적이었는데 이 책으로 평소 갖고 있던 궁금증을 해결했습니다. 더불어 세부적인 기능을 이해하는 데 많은 도움을 받았습니다. 피그마, 디자인이 궁금했지만 배울 엄두가 나지 않았던 마케터에게 한 걸음을 내딛게 해준 책입니다. 추천합니다.

_김승현 DND 마케터

 

빠르게 익혀 현업에서 바로 사용해야 한다면 실습이 많은 이 책을 선택하겠습니다. 필요한 기능은 그때마다 도움말을 찾아보면 되니 기본 기능만 먼저 익혀보세요. 피그마가 와이어프레임부터 간단한 프로토타입까지 모두 지원되기에 자주 사용하는 기능은 직군별로 조금씩 다를 수 있습니다. 이 책의 실습을 따라 하는 것만으로도 피그마를 잘 쓸 수 있습니다.

_류난희 프로덕트 오너

서론

피그마는 굉장히 핫한 UI/UX 디자인 도구로 사람들에게 사랑받고 있으며 최근 Adobe에서 200억달러(한화 28조원)에 인수를 하기로 하면서 큰 화제를 이끌기도 하였습니다.

이러한 피그마가 무엇인지, 그리고 어떻게 다루는지 담은 도서, ‘UX/UI 디자이너를 위한 실무 피그마(개정판)’을 리뷰 해보도록 하겠습니다.

본 리뷰는 한빛 미디어의 ‘나는 리뷰어다’를 통해 받은 도서입니다.

피그마란

피그마는 웹 기반 UI/UX 디자인 소프트웨어로 기존 UI/UX 디자인으로 유명한 Sktech와 다르게 모든 플랫폼에서 이용할 수 있다는 장점과 함께 2021년 기준, Sketch/Adobe XD/Adobe Illustrator/Adobe Photoshop을 제치고 넘볼 수 없는 압도적인 1위를 차지하고 있습니다.

 

또한 기본적으로 무료 소프트웨어 이기에 학생들도 부담없이 사용이 가능합니다. 어느정도 기능의 제한은 있지만 핵심 기능들 보다는 대부분 협업과 관련된 기능 이기에 "팀으로 협업을 할꺼면 유료로 사용해보는 것이 어때?" 정도로 생각하시면 편할 것 같습니다.

기존 Adobe XD도 무료 정책을 유지하다 어느순간부터 유료 정책으로 변경되어 더 이상 무료로 이용이 불가능 하기에, 당분간 피그마의 독주를 막기 힘들지 않을까 생각됩니다.

책의 구성 요소

본 도서는 크게 파트1과 파트2, 그리고 Appendix로 분류됩니다.
이를 통해 피그마에 대한 기본적인 지식 보유 여부에 따라 파트1부터 시작할지, 혹은 2부터 시작할지를 선택할 수 있습니다.

파트1. 피그마 활용하기

파트1에서는 피그마에 대한 전반적인 기능들에 대해 학습합니다.
마치 포토샵에서 도형을 그리는 방법, 레이어를 분리하고 합치는 방법, 각 도구들을 활용하는 방법 등을 배운다고 생각하면 좋을 것 같습니다.

파트2. 피그마로 디자인하기

파트2에서 부터는 본격적인 피그마를 활용한 디자인을 하는 방법에 대해 학습을 시작합니다.
iOS 뉴스앱, 안드로이드 스포츠 클래스앱, 글로벌 NFT 마켓앱 디자인 등 실습 파일을 통해 직접 만드는 과정을 따라 배울 수 있습니다.

Appendix

Appendix 파트에서는 디자인한 작업물을 개발자와 공유 시 유의할 점과 디자인 소스를 관리하는 방법에 대한 내용을 팁처럼 풀어내고 있습니다. 또한 핵심 단축키들에 대한 내용을 시트로 정리하였기에 빠르게 단축키를 학습하고 싶다면 해당 시트를 보고 배울 수 있습니다.

책의 내용

챕터와 레슨

핵심 주제를 의미하는 챕터안에 여러가지 레슨이 존재합니다.
해당 여러 레슨은 챕터를 이해하는데 필요한 요소들로 해당 레슨들을 익힌다면, 해당 챕터의 본질적인 의미를 이해할 수 있습니다.

따라하는 예제, 직접 해보는 실습

기본적으로 책의 내용은 예제/실습 파일을 통해 피그마의 기능들을 소개합니다.
해당 파일들은 피그마 커뮤니티에 업로드가 되어있으며, 책의 소개 파트에서 해당 URL을 제공하고 있습니다.

마치 포토샵 GTQ 도서와 같이 각 레슨별 파일을 통해 책의 내용을 따라하며 배울 수 있습니다.

핵심 기능과 단축키

피그마의 기능을 소개하는 과정에서 단축키를 사용할 수 있는 부분들은 간략 하면서 핵심적으로 설명하고 있습니다.
당연할 수 도 있는 부분이지만, 단순히 윈도우키 뿐만이 아닌 맥과 윈도우 각각의 단축키를 설명하고 있어 좋았습니다. 간혹 윈도우 단축키만 설명하는 도서도 있기에...

다양한 플러그인

피그마의 장점 중 하나는 다양한 플러그인을 쉽게 추가하여 사용할 수 있다는 것 입니다.
다만 플러그인이 아무리 많다 하더라도 자신에게 필요한 플러그인들을 찾는데는 오랜 시간이 걸립니다.

본 도서 에서는 피그마에서 유용하게 사용할 수 있는 플러그인들과 해당 플러그인을 어떻게 활용 하는지를 예제와 실습을 통해 함께 배울 수 있습니다.

좋았던점은

읽으면서 느꼈던 부분은 버릴 내용없이 핵심 내용만 잘 정리했다는 느낌을 받았습니다.

약 400페이지가 되는 내용에서 서론, 설치법 등을 제외하면 불과 150페이지가 피그마의 기능들을 학습하는 내용 임에도 앞으로 피그마를 활용하는데 있어 완벽하지는 않더라도 부족함 없이 사용할 수 있을 것이라는 생각이 들 정도로 매우 잘 정리되어있던 것 같습니다.

또한 예제/실습 파일을 통해 단순히 글로만 설명하는 것이 아닌, 독자가 스스로 따라하면서 배울 수 있는 부분이 직접 경험을 통해 피그마를 익히는데 큰 도움이 된 것 같았습니다.

아쉬운점은

다만 개인적으로 아쉬운점은 일부 예제/실습 부분에서 따라하였지만 무언가 책의 내용처럼 되지 않았던 부분이 있습니다. 물론 돌이켜보면 제가 실수를 하거나 놓쳤던 부분이지만, 간혹 당황하는 부분이 생겼었습니다.

이를 해결할 방법은 매우 상세하게 설명을 작성하는 것 이겠지만, 그랬다면 오히려 정보 대비 글의 양만 늘어나는 것 이기에 아쉽지만 어쩔 수 없는 부분이라고 생각됩니다.

(물론 제가 멍청해서 그럴 수 도 있습니다)

결과론적으로

저는 Adobe XD를 고등학생 때 부터 사용하여 4년 간 사용해오면서 피그마를 사용하는 많은 디자이너를 만났지만 굳이 피그마를 넘어갈만한 이유를 느끼지 못하였습니다.

그러다 이번 가격 정책 변동과 Adobe에서 조차 피그마를 인수했다는 소식을 듣고 강제로 피그마를 넘어가보았지만 어색함과 불편함의 연속이였습니다.

그렇게 어색함과 불편함을 가지고 피그마를 사용하던 도중, 한빛미디어를 통해 본 도서를 읽을 수 있는 기회가 생겼고, 책이 시키는데로 따라만 하였음에도 그동안 마치 강력한 도구를 가지고 있지만 사용할 줄 모르는 어린 아이과 같다는 것을 깨달았습니다.

물론 아직은 완벽하게 다루지 못하지만, 방학동안 다시 한번 읽어보면서 숙련도를 높여볼 생각입니다.
피그마에 관심이 있거나 UI/UX에 대해 관심이 있다면, 본 도서를 읽어보시는 것을 꼭 추천드립니다.

 

UX UI 디자이너를 위한 실무 피그마 개정판 디자인 시스템에서 개발 전달까지 피그마 베스트셀러1위 한빛미디어 클레어정 지음 (1).JPG

 

UX UI 디자이너를 위한 실무 피그마 [2022개정판] #한빛미디어 #피그마 #Figma

디자인 시스템에서 개발 전달까지 - 클레어 정 지음 - 한빛미디어

UX/UI 분야 베스트셀러! 

 

21년 11월 출간 이후 1년만에 개정판 ! 

얼마전에 초판본도 구매했는데, 연말에 공부해야지 하다가 개정판을 보게 되었습니다 :) 책 한번 볼게요.

 

기획-디자인-개발 등등.. 디자인은 협업이 무엇보다 중요한 직군입니다. 혼자 가볍게 와이어프레임을 짤 때에도, 디자인 협업툴로서 이용할때도 피그마가 정말 괜찮아 보이더라구요 ! 새롭게 떠오르는 프로그램이니 익혀두는것이 좋을것 같아요! 

 

피그마는 웹 기반이라 신기능이나 피드백에 대해서 재빠르게 자주 업데이트 된다고 합니다! 그 다음으로 스케치와 XD가 업데이트. XD를 가지고있는 어도비에서 피그마를 인수했는데 어떻게 변화할지 궁금하긴 하네요 :) 

 

맥.윈도우.리눅스 모두 앱을 지원하거나 웹에서 작업 가능! 애플, 구글플레이 모두 피그마 앱 다운로드 가능하네요 :) 

기기의 제한을 받지 않고 모든 디바이스에서 작업 가능하기때문에 모든 사람이 이용 가능합니다! 

-> 스케치는 맥 사용자들.. XD는 어도비 구독자들에 한해 사용 가능해서 솔직히 접근성이 떨어졌었지요!

 

 

UX UI 디자이너를 위한 실무 피그마 개정판 디자인 시스템에서 개발 전달까지 피그마 베스트셀러1위 한빛미디어 클레어정 지음 (4).JPG

 

스케치사용자들은 스케치파일을 피그마로 옮길수 있어요! 스케치와 피그마 단축키가 동일하기 때문에 툴 갈아타기도 쉽다고 합니다 :) 고민돼면 일단 한번 사용해보는것이 좋을것 같아요. 

(개정판 68페이지를 보면 스케치 프로젝트를 피그마로옮긴 후 달라지는사항과 팁을 알려줍니다 )

 

어도비 XD사용자는 기존 프로젝트를 피그마로 갈아타기가 어려워요! 제 생각엔 어도비가 피그마를 인수했기 때문에.. 시간이 지나면 호환이 되지 않을까 기대해 봅니다 :D 새로 시작하는 프로젝트부터 사부작사부작 이용해보는것을 추천해요.

 

 

UX UI 디자이너를 위한 실무 피그마 개정판 디자인 시스템에서 개발 전달까지 피그마 베스트셀러1위 한빛미디어 클레어정 지음 (10).JPG

 

 [ PART1 : 피그마 시작하기 ]

 

1장 : 피그마 시작하기

디자이너 / 개발자의 관점으로 피그마 실무 활용법 훑어보기!!

출근을 시작으로 퇴근까지 다양한 상황에서 피그마를 어떻게 활용할 수 있는지 알려줍니다. 책 자체는 for 디자이너지만, 개발자나 기획자가 어떻게 사용할 수 있는지도 어깨너머로 볼 수 있어요. 

다양한 상황이 있으니 술술 읽어 넘기면 됩니다. 

1장 끝부분을 보면, 디자인하기 전 알아야 하는 UI 기술지식 부분이 있는데 이 부분은 꼭 읽고 넘어가는걸 추천합니다 :D

다양한 해상도 관련 용어와 팁을 자세하게 알려주는데 매우 유익했습니다! 이런 자세한 팁은 또 처음이라.. 감동. 

 

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

3장 : 정렬과 레이아웃

4장 : 리소스/컴포넌트/오토레이아웃

5장 : 디자인 시스템과 협업

 

본격 피그마 프로그램 배우기는 2장부터 시작됩니다! 기능 익히기죠 :) 

내외의 내용으로, 각 패널의 기능과 스타일/라이브러리 만드는 방법 설명을 시작으로 실무에서 사용하는 기능 위주로 자세하게 설명해 줍니다. 모니터에 Figma 앱을 열어두고 하나씩 만져보면서 읽어내려가면 좋은것 같아요!

 

5장까지 하면 왠만한 기능은 다 배운것이라 할 수 있어요 :D

 

 

UX UI 디자이너를 위한 실무 피그마 개정판 디자인 시스템에서 개발 전달까지 피그마 베스트셀러1위 한빛미디어 클레어정 지음 (5).JPG

 

[ PART2 : 피그마로 디자인하기 ]

6장부터는 요즘 트랜드 예제를 통해 실제 프로젝트를 만들어가면서 실무 활용법을 배울 수 있습니다! 

요 부분은 아직 덜해봤는데, 꼭 해봐야하는 예제들로 구성되어있어서 한주에 한두개씩 짬내서 해보면 좋을것 같아요 :D

 

대표예제 : iOS 뉴스 앱 / 안드로이드 스포츠 클래스 앱 / 반응형 패션 라이브 커머스 / B2B 서비스 구성 / 글로벌 NFT마켓 

 

[ Appendix : 부록A/B ]

부록A 에서는 디자인을 완료하고 개발자에게 전달하는 (협업을 편리하게 하는) 방법을 알려줍니다. 디자인과 개발 결과물이 다를 때 왜 다른지 몇가지 예를 들어 설명해주고 있어 실무에 매우 도움이 되는 부분. 코드확인(변환, 플러그인활용 등)과 브랜치로 파일 관리하는 방법을 알려줍니다. 

 

부록B 에서는 단축키와 필수 · 추천 플러그인을 알려줍니다. 피그마를 조금 더 쉽고 편하게 사용할 수 있습니다. 

 

스케치와 XD도 정말 살짝씩 발을 다 담궈 보긴 했는데 실무에서 사용을 안하니 배워두면 까먹고 안써서 까먹고 :D

피그마도 업무에 사용하지는 않지만, 이직에 필요할 것 같아서 '공부 해야지..~내일은 해야지~' 하고 차일피일 미루다가 개정판이 나오고서야 보게 되었는데, 왜 이제서야 봤을까 싶다. 얇은 책이지만 시작부터 끝까지 정말 알찬 내용을 담고 있습니다. 요 책 한권으로 피그마를 혼자서 사용할 수 있게 된다면 괜찮은 책 아닐까 싶어요!

 

 

저자님 블로그도 꽤 재미있게 볼만함!  http://uidesignguides.com/

UX/UI 디자이너를 위한 실무 피그마 예제 소스 : https://www.figma.com/@uidesignguide

 

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

 

 

이번에 읽은 도서는 실무 피그마입니다. 이 책을 선택한 이유는 11월 29일 화요일 파워플랫폼데이에서 피그마 디자인을 Power Apps로 바로 가져오는 방법을 발표하기로 했기 때문입니다.
피그마에 대해서는 조금 알고 있었지만, 이번 기회에 체계적으로 배워보고 싶었고, 또 발표때에 피그마에 대한 질문도 있을 수 있기 때문에, 한번 읽어보자 였습니다.

그동안 포토샵을 많이 다루어보았기 때문에 피그마를 좀 쉽게 생각한 경향이 있었습니다.
어느 서비스 툴도 마찬가지이겠지만, 피그마도 공부해보니까 알아야 할 것이 많네요.
포토샵에서 못본 개념들도 있고요.

이 책은 파트 1, 2로 나누어져 있습니다.
파트 1에서는 피그마 자체 툴 사용법입니다. 파트 2는 활용편으로 실제로 디자인하는 과정을 보여줍니다.
책 읽는 중간에 좀 쉬는 틈이 있어서, 파트 1을 완전히 숙지 못한 상태에서 파트 2에 들어가니, 개념 자체가 안 들어오고, 이해하지 못해서, 이번에는 파트 1만 2번 읽고 도서 리뷰를 먼저 합니다.

포토샵과 달리, 협업이란 측면이 많이 강조된 느낌입니다. 그리고, 다수의 속성이 화면에 보여서, 얼뜻 보이기에 이런 기능이겠지 싶어, 책을 천천히 훓어보니, 숨어 있는 기능도 제가 생각한 기능과 조금 다른 측면도 있었습니다.
그래서, 디자인 툴을 조금 다루어보신 분들도 피그마가 처음이라면, 꼭 한번 정독해보시기를 바랍니다.
용어 자체가 제가 필요한 파워 앱스에서의 용어랑 달라서, 이해하는데 조금 시간이 걸렸어요.

협업과 노코딩의 시대에 피그마를 배워두면, 내가 원하는 앱을 쉽게 더 간지나게 만들 수 있는 세상이므로, 이번 실무 피그마 책으로 본인의 역량을 강화해보세요.
저는 피그마 자체 툴 사용법 보다는 개발자의 시각에서 피그마를 바라보는 기능들을 좀 더 공부해서, 유투버와 블로그에 올리려고 합니다.
이 책 여러번 읽어야 할 것 같아요. ^^



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

 

IMG_0723.jpg

 

 

IMG_0706.jpg

‘피그마’의 주요 기능을 살펴보고, 곧바로 실습해보기로 했다. 피그마 앱> 커뮤니티> uidesignnguide를 검색했다.

나열된 실습 파일이 한 눈에 알아보기 쉽게 정리가 되어 있다. 또한, 손쉽게 실습 파일을 복사할 수 있으며, 복사한 파일을 가지고 바로 실습해 볼 수 있어서 편리했다.

 

 

 

 

IMG_0708.jpg

책을 따라 바로 실습해보았다.

저자는 실습 전 해당 기능에 대한 개념을 설명하고, 학습자가 바로 실습해 볼 수 있도록 구성했다. 이러한 학습 설계로 인해 해당 기능을 쉽게 이해할 수 있다.

 

 

 

IMG_0726.jpg

책 속의 설명은 최대한 쉽게, 예제는 간편하게 따라해 볼 수 있어서 굉장히 편리하다.

 

 

 

IMG_0727.jpg

 

IMG_1854.jpg

피그마를 공부하며, <UX/UI 디자이너를 위한 실무 피그마(개정판)> 왜 1위인지 그 이유를 알 것 같다.

몇 가지 피그마책을 도서관에 빌려 읽고 따라해본 바, 이 책을 다른 책과 비교했을때 가장 장점은 군더더기 없고 깔끔하게 설명하며 예제 또한 심플하고 해당 기능을 중점적으로 아주 쉽게 알려주고 있어서 누구든 그 장점을 알아본 것 같다는 생각이 든다.

끝으로 집에서 피그마를 쉽고 재미있게 독학할 수 있으니, 피그마를 공부할 생각이라면 꼭 이 책으로 공부해보셨으면 좋겠다. 군더더기 없는 가독성 좋은 문장으로 피그마에 대한 이해력을 높여주므로 <UX/UI 디자이너를 위한 실무 피그마(개정판)>를 추천하는 바이다.

 

 

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

피그마(Figma)를 처음 들어보는 분들도 계실 것이고, 익숙하게 들어보신 분들도 계실텐데요. 간단하게 설명드리면 클라우드를 기반으로 크롬과 같은 웹브라우저에서 UX/UI 디자인 협업할 수 있는 프로그램입니다.

웹 기반이기 때문에 어도비와는 달리 설치가 필요하지 않고 크롬에서 바로 실행이 가능합니다. 태블릿에서도 실행이 가능하다보니, 최근에는 학교에서 에듀테크용 협업 소프트웨어로도 관심이 높아지고 있는데요.

제가 피그마에 관심을 갖게 된 이유도 바로 에듀테크로 피그마를 학습하고 싶었기 때문입니다.

 

UX/UI 디자이너를 위한 실무 피그마 개정판 앞표지

 

그런데 지난 2022년 9월 15일에 어도비가 피그마를 200억 달러에 인수했다는 소식이 퍼졌습니다. 

그로 인해 피그마를 배워야겠다는 생각이 더욱 확고해졌는데, 이번에 나는 리뷰어다를 통해서 UX/UI 디자이너를 위한 실무 피그마 개정판을 받자마자 단숨에 읽었습니다.

UX/UI 디자이너를 위한 실무 피그마 초판은 2021년 11월 1일에 출간되었는데요. 

역시 믿고 보는 한빛미디어 책이라 출간과 동시에 UX/UX분야 피그마 베스트셀러에 올랐습니다.

그후로부터 정확히 1년 뒤에 UX/UI 디자이너를 위한 실무 피그마 개정판이 2022년 11월 1일에 나왔습니다.

 

UX/UI 디자이너를 위한 실무 피그마 개정판 뒷표지

 

UX/UI 디자이너를 위한 실무 피그마는 다음의 분들에게 추천합니다.


웹 클라우드 기반으로 협업에 특화된 디자인 도구인 피그마를 다양한 예제로 익힐 수 있는 책이 바로 UX/UI 디자이너를 위한 실무 피그마 개정판인데요.  

이 책은 저와 같이 피그마를 한번도 다뤄보지 않고 처음 시작하는 분들부터 스케치나 어도비XD와 같은 프로그램을 사용해보았지만 피그마는 사용해보지 않은 UX/UI디자이너 혹은 디자이너와 협업하는 기획자나 개발자를 위해서 기초부터 프로젝트 응용까지 상세하게 다루고 있습니다.

또한 피그마 도입을 고민하는 디자이너뿐만 아니라 피그마를 통해 디자이너와 협업하고자 하는 마케터나 개발자, PO나 PM도 이 책을 통해서 피그마를 빠르게 학습할 수 있습니다.

이를 위해서 기존에 만든 스케치 프로젝트를 임포트하는 방법과 같은 기본적인 피그마 기능에서부터 반응형 앱 디자인 프로젝트까지 다루면서 현업에서 바로 사용할 수 있도록 돕고 있습니다.

 

UX/UI 디자이너를 위한 실무 피그마 예제 소스

 

특히 피그마 실습을 위한 예제 소스가 너무나 잘 되어 있어서 저처럼 디자인에 문외한인 사람도 이 책의 실습을 따라하기만 해도 피그마를 잘 쓸 수가 있습니다.

또한 이 책의 저자인 클레어 정님께서 강조하듯이 다른 피그마책에서는 볼 수 없는 현업에서의 디자인 시스템과 개발 전달 과정을 UX/UI 디자이너를 위한 실무 피그마는 자세히 기술하고 있습니다. 

이와 같은 책의 구성으로 인해서 마치 실무 프로젝트를 직접 한 것처럼 디자인 역량을 키울 수 있습니다.

따라서 제목은 UX/UI 디자이너를 위한 실무 피그마이지만 UX/UI디자이너뿐만이 아니라 UX/UI디자이너와 협업하는 모든 직군들 중 피그마를 도입하거나 도입할 예정인 실무자들에게 이 책을 추천합니다.

그러면 본격적으로 UX/UI 디자이너를 위한 실무 피그마 개정판의 주요 내용을 살펴보겠습니다.

 

 

UX/UI 디자이너를 위한 실무 피그마의 주요내용은 다음과 같습니다.


UX/UI 디자이너를 위한 실무 피그마는 디자인 툴을 한번도 다뤄보지 않은 사람을 세심하게 배려한다는 사실을 곳곳에서 알 수 있습니다. 예를 들면 앞에서 말한 피그마 실습 파일을 다운로드해서 활용하는 방법도 하나하나 상세하게 설명하고 있습니다. 사실 디자인툴을 한번도 사용해보지 않은 사람들은 예제 파일을 자신의 페이지로 복사하는 것도 무척 어렵기 때문이죠. 이처럼 이 책의 저자는 독자의 눈높이에 맞춰서 꼼꼼하게 설명하고 있기 때문에 부담없이 피그마를 학습하는데 집중할 수 있습니다.

 

피그마를 활용한 디자이너, 기획자, 개발자의 하루


UX/UI 디자이너를 위한 실무 피그마를 활용한 디자이너, 기획자, 개발자의 하루

 

UX/UI 디자이너를 위한 실무 피그마는 왜 피그마인가?라는 질문으로 시작합니다. 그러면서 현업에서 피그마를 활용하는 디자이너, 기획자, 개발자의 하루를 순서대로 보여주는데요. 이 부분은 현업을 한번도 경험해보지 않은 학생의 입장에서 매우 유용한 부분이기도 하며, 동시에 피그마를 도입하지 않은 회사에서 왜 피그마를 도입해야 하는가를 충분히 생각하게 만드는 부분이기도 합니다.

게다가 위의 사진처럼 주요 단축키를 함께 제시하면서 설명하고 있기 때문에 피그마 기능 학습에도 큰 도움이 됩니다.

 

피그마를 위한 Tip과 디자인 노하우


피그마에서 스타일 지정이 안 된 디자인 한 번에 변경하기

 

한예종 디자인학과를 졸업하고 스타트업과 인하우스를 거치며 현재는 글로벌 블록체인 서비스의 프로덕트 디자이너로 일하는 저자는 자신이 알고 있는 피그마를 활용할 때 유용한 팁이나 간단하지만 놓칠 수 있는 정보, 디자인 역량을 키워줄 수 있는 디자인 노하우 등을 이 책에 고스란히 담았습니다.

 

다크모드 UI의 디자인 요소

 

특히 위의 설명처럼 너무 높은 명도 차를 피해야 한다는 설명과 함께 #000000, #acacac와 같은 HEX코드도 함께 제시를 하거나 아마존 킨들 앱과 리디북스 등 케이스까지 구체적으로 제공하는 것을 보면 저자의 깊은 내공을 알 수 있습니다.

회사에서 Gray 영역을 나서서 처리하는 조직에 있었습니다.

얼마전 조직 개편이 되면서 새 조직을 맡게 되었지만

여전히 원래의 조직에 겸직으로 일을 하고 있습니다.

Gray 영역을 다루는게 어려운 이유는

누군가 주도적으로 책임지지 않는 영역에서 필요한 것들을

그 영역에 관심 가진 사람들이 나서서 챙겨야 하기 때문입니다.

네.

기획이면 기획, 디자인이면 디자인, 개발이면 개발까지

손들고 정리하겠다고 한 조직에서 처리해야 하는 것이지요.

 

 

IMG_3604.jpg

 

 

IMG_3605.JPG

 

IMG_3606.JPG

 

다행히 디자인은 사내 표준으로 퉁치고

 

개발은 UI, Backend 조직에서 힘을 빌리기로 했지만

기획은 온전히 엔지니어인 저의 몫이 되었습니다.

그 때 빛처럼 나타난 도구가 피그마였습니다.

기획서를 작성하면서 화면 정의서까지 만들어야 하는 상황에서

파워포인트만으로 버티기에는 역부족이었습니다.

피그마는 그 빈자리를 채워주는 훌륭한 도구였습니다.

<UX/UI 디자이너를 위한 실무 피그마>를 읽으면서

내가 활용한 기능은 정말 백만분의 일이었구나를 느끼지만

정말 훌륭한 도구였고 제대로 활용해 보고 싶다는 생각이 들었습니다.

그래서 일까요?

한빛미디어에서 도착한 책 리뷰 요청에

<UX/UI 디자이너를 위한 실무 피그마> 책이 목록에 있는 것을 보고

무조건 이 책을 읽어보고 싶다고 느꼈습니다.

 

 

책 제목과 달리, 이 책은 디자이너만을 위한 책이 아닙니다.

협업을 위한 기능들이 정말 많이 있기 때문에

기획자는 물론이고 개발자들도 읽어두고 알아두면 좋은 피그마의 기능들이

 

 

 

 

책은 크게 전반부와 후반부로 나뉘어 집니다.

전반부에서는 주요한 기능들에 대한 개념과

해당 기능들을 어떻게 사용하는지를 중점적으로 다루고 있습니다.

기능들에 대해 다루는 이유는

예제 중심으로 실전 경험을 쌓아보는 실습 중심의 후반부를

원활하게 읽고 학습하고 실습할 수 있게 하기 위함이라 생각됩니다.

말 그대로 후반부는 다양한 웹, 앱을 만든다는 가정하에

어떻게 화면을 설계하고 피그마가 제공하는 기능들을 활용해서

프로토타입을 만들어 갈 수 있는지를 실전에 가깝게 설명해주고 있습니다.

말 그대로, 피그마를 위한 All-in-one 서적이라는 느낌이 들 정도입니다.

 

 

사실 어떤 도구의 기능을 설명하는 책을 보다보면 아쉬운 것이

A to Z 로 너무 모든 기능을 설명하려는데 집착한 나머지

실제 실무에서 꼭 알아야 하는 기능의 설명이 상대적으로 빈약해 지거나

전체 비중에서 차지하는 중요도가 낮아, 독자 역시 그런 함정에 빠진다는 것입니다.

반면, 이 책 <UX/UI 디자이너를 위한 실무 피그마>는

모든 기능을 설명하기 보다는 중요한 것들, 꼭 활용해야 하는 것들을 중심으로

간결한 설명과 실습 중심의 이야기를 해주고 있어서

 

 

 

 

읽는 사람이 지치지 않고, 핵심적인 것들을 중심으로 기술을 습득할 수 있게 구성되어 있습니다.

 

 

여러분의 역할은 무엇인가요?

기획이든 디자이너든 개발자든, 이제 서로의 영역을 많이 이해해야만 하는 시대가 되었습니다.

IT 바닥에서는 한동안 유행하던 풀 스택 엔지니어 Full-stack Engineer 를 넘어서

풀 스택 임플로이 Full-stack Employee의 시대가 바야흐로 열리고 있습니다.

본 포스팅은 한빛미디어 <나는 리뷰어다> 활동의 일환으로

리뷰용 서적을 무상으로 제공받아 작성되었습니다.

 

-->
부록/예제소스
자료명 등록일 다운로드
DOWNLOAD 예제소스 2022-11-24 다운로드
결제하기
• 문화비 소득공제 가능
• 배송료 : 2,000원배송료란?

배송료 안내

  • 20,000원 이상 구매시 도서 배송 무료
  • 브론즈, 실버, 골드회원이 주문하신 경우 무료배송

무료배송 상품을 포함하여 주문하신 경우에는 구매금액에 관계없이 무료로 배송해 드립니다.

닫기

도서판매처

리뷰쓰기

닫기
* 도서명 :
UX/UI 디자이너를 위한 실무 피그마(개정판)
* 제목 :
* 별점평가
* 내용 :

* 리뷰 작성시 유의사항

글이나 이미지/사진 저작권 등 다른 사람의 권리를 침해하거나 명예를 훼손하는 게시물은 이용약관 및 관련법률에 의해 제재를 받을 수 있습니다.

1. 특히 뉴스/언론사 기사를 전문 또는 부분적으로 '허락없이' 갖고 와서는 안됩니다 (출처를 밝히는 경우에도 안됨).
2. 저작권자의 허락을 받지 않은 콘텐츠의 무단 사용은 저작권자의 권리를 침해하는 행위로, 이에 대한 법적 책임을 지게 될 수 있습니다.

오탈자 등록

닫기
* 도서명 :
UX/UI 디자이너를 위한 실무 피그마(개정판)
* 구분 :
* 상품 버전
종이책 PDF ePub
* 페이지 :
* 위치정보 :
* 내용 :

도서 인증

닫기
도서명*
UX/UI 디자이너를 위한 실무 피그마(개정판)
구입처*
구입일*
부가기호*
부가기호 안내

* 온라인 또는 오프라인 서점에서 구입한 도서를 인증하면 마일리지 500점을 드립니다.

* 도서인증은 일 3권, 월 10권, 년 50권으로 제한되며 절판도서, eBook 등 일부 도서는 인증이 제한됩니다.

* 구입하지 않고, 허위로 도서 인증을 한 것으로 판단되면 웹사이트 이용이 제한될 수 있습니다.

닫기

해당 상품을 장바구니에 담았습니다.이미 장바구니에 추가된 상품입니다.
장바구니로 이동하시겠습니까?

자료실