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

한빛미디어

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

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

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

한빛미디어

집필서

판매중

  • 저자 : 클레어 정
  • 출간 : 2022-11-01
  • 페이지 : 416 쪽
  • ISBN : 9791169210461
  • 물류코드 :11046
초급 초중급 중급 중고급 고급
4.9점 (15명)
좋아요 : 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 마케터

 

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

_류난희 프로덕트 오너

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

클레어 정

 

수정됨_IMG_0303.jpg

 

요즘 내가 하는 일이 워낙 다양해서 한가지로 정의내릴 수 없긴 하지만 어떤 일을 하더라도 가장 필요로 하는 능력 중에 기획과 디자인은 빠지지 않는 것 같다.

얼마전에 아이디어를 기관에 의제 형태로 제안하기도 하고, 사업계획서로 작성해보기도 했었는데 둘 다 기획과 UX/UI 디자인을 기본으로 필요로 하는 일들이었고 요즘은 기획자나 디자이너를 따로 쓰기 보다는 제안자 혼자 하는 경우가 많고, 사업가형 프리랜서나 스타트업을 하는 사람들은 기본적으로 이런 능력을 갖추고 있다고 생각된다.

그래서 소규모 자영업자, 스타트업 종사자들의 경우 디자이너를 고용하기 보다는 (외주의 경우 필요에 따라 쓰는 것도 괜찮다고 봄) 실무에 도움이 되는 툴들을 틈틈히 배워두는 것이 좋은데 UXUI분야의 경우 많은 경우 피그마로 진행하고 있기 때문에 이 책이 꽤나 도움이 될 것이라고 생각된다.

물론 비슷한 프로그램이라고 할 수 있는 어도비xd를 사용하는 경우도 있지만 피그마의 경우 불편한 PPT 대신 사용하는 경우도 있어서 보다 범용성이 높다고 할 수 있겠다.

이 책은 제목처럼 UX, UI 디자이너들을 위한 실무 피그마 학습서라고 할 수 있는데 디자이너만큼 이 책을 봐야할 사람들은 기획자, 개발자라고 할 수 있다. 회사에서 중요한 일을 처리하기 위해 가장 필요한 협업 그 중에서도 삼각형처럼 맞물려 있는 중요한 포지션들이 기획자, 디자이너, 개발자 라고 할 수 있는데 요즘은 디자이너나 기획자가 개발자들과 원활하게 업무를 진행하기 위해 코딩을 알아야하는 것처럼 기획자나 개발자들이 ux, ui 디자인에 대한 공부를 하는 것이 거의 필수라고 할 수 있기 때문이다.

특히 피그마의 경우 온라인으로 실무자들이 협업을 할 때 소통에 유용한 툴로 사용되고 있기 때문에 보다 목적에 적합한 툴이 아닌가 싶다. (재미있는 것은 이 책에서도 디자이너 외에 개발자, 기획자들이 피그마를 어떻게 업무에 유용하게 활용할 수 있는지 타임테이블과 플로우차트 등으로 보여준다)

수정됨_IMG_0305.jpg

 

1부에서는 피그마의 기능, 2부에서는 실습 프로젝트를 다루고 있는데 처음에는 피그마의 필요성과 유용한 팁들을 익히며 익숙해질 수 있고 2부에서는 예시가 자세히 나와 있어서 순서대로 따라하기만해도 자연스럽게 피그마를 사용할 수 있게 된다.

수정됨_IMG_0306.jpg

 

수정됨_IMG_0307.jpg

 

 

특히 1부 초반에는 벡터, 프레임과 레이아웃, 스마트 셀렉션 처럼 디자인 공부를 조금이라도 해봤으면 알 수 있는 내용들이 많이 있기 때문에 쉽게 따라갈 수 있었고 초보자들의 경우 프로토타입 제작이나 인터랙티브 컴포넌트 같은 다소 생소한 개념도 공부할 수 있기 때문에 초급자부터 중급자까지 두루 아우르는 책이라고 할 수 있다.

 

수정됨_IMG_0308.jpg

 

그 밖에 이책의 장점은 개정판이라 최신 정보를 담고 있고 업데이트가 반영된 후의 내용이 실려 있어서 실무자들에게 유용할 것 같고 코드들도 OS에 따라 어떤 식으로 변형하고 활용할 수 있는지 예시와 함께 아주 상세히 나와 있어서 좋았다.

수정됨_IMG_0309.jpg

 

 

 

 

또한 저자(클레어 정)가 피그마 커뮤니티에 업로드한 실습 파일들을 다운로드해서 사용해볼 수 도 있기 때문에 초보자들도 바로 실무에 적용해볼 수도 있고 결과물을 만들어 낼 수 있어서 시간 절약에도 도움이 됐다. (잘 만들어진 예제를 살펴 볼 수 있다는 장점도 있고)

수정됨_IMG_0310.jpg

 

 

 

 

 

디자이너 뿐 아니라 기획자나 개발자 등 디자이너와 협업, 소통이 필요한 개인들이 쉽게 피그마라는 호환성 좋은 글로벌 UXUI 툴을 배울 수 있고 초보 디자이너라면 실무에 쉽게 적용하여 역량을 업그레이드 할 수 있는 책이므로 ux, ui 디자인에 관심있는 모든 사람들에게 추천하고 싶다.

 

수정됨_IMG_0312.jpg

 

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

 

최근 몇년 사이 많은 서비스가 클라우드로 이동했다. 지난 세월동안 2D 디자인 영역의 경우 Adobe사의 포토샵, 일러스트레이터 등의 다양한 툴이 업계 표준으로 자리잡았다. 나는 디자인 업계에 종사하고 있지는 않지만, Adobe의 생태계를 무너뜨릴만한 도전자를 들어본 적도 상상해본 적도 없었다. 그러던 중 작년부터 Figma라는 서비스를 전해듣게 되었고, 관심을 가지고 간단히 시도해 보았다. 클라우드 기반 서비스이기 때문에 웹 기반으로 작업이 가능한 이 서비스는, 태생부터 협업을 위해 태어난 것이라 보였다. 당장 내가 디자인 협업을 할 일은 없어서, 그 뒤로 Figma를 다시 열어보지 않았다. 그러던 중에 우연히 이 책을 접하게 되어 다시 Figma를 접하면서 전에는 미처 깨닫지 못했던 부분들이 눈에 들어왔다.

 

책에서 소개하는 Figma의 특징은 다음과 같다.

- Cloud 기반 서비스로 협업에 특화된 기능

- 개발자를 위한 코드 변환 가능

- 플러그인 설치를 통한 확장성

- Figma mirror를 통한 모바일 확인

- 버전 히스토리 

- Git과 같은 branch merge기능 제공

- 단체 미팅 기능

- Slack 등 외부 툴과 연동 가능

- 각종 템플릿 제공

 

물론 디자인 비전공자가 바라보는 Figma의 장점은 디자인 전공자에 비해 매우 적은 부분일 것이다. 책의 대부분의 부분은 웹디자인이나 웹 디자인을 예시로 들고 있다. 나의 경우에는 전문적인 용도보다는 가볍게 디자인 협업을 하기 위한 툴로 Figma를 생각하고 있었는데, 그에 비해 훨씬 많은 기능을 제공하여 생각보다 복잡하고 다양한 기능을 제공하고 있었다. 직업으로 웹 및 앱 디자인을 하지 않는 나로써는 간단한 썸네일 제작 및 파워포인트에 사용할 그림 등을 협업하고 공유하기 좋은 도구로 보인다. 책의 제목 및 방향 자체가 UI/UX 디자이너를 위한 피그마인 만큼, UI/UX 디자이너에게는 상세한 가이드가 될 것이라 보인다. 

 

 

피그마 툴을 처음써본건 PM 부트캠프에서 처음 써보았다. 피그마는 디자이너뿐만 아니라 개발자, PM, 마케터 모두에게 유용한 툴이다. 동시에 수정 및 문답이 가능하여 협업에 굉장한 장점을 갖고 있는 툴이기 때문이다. 핵심 용어를 익힌 후 직접 본인의 업무 포트폴리오를 통해 연습해보고, 최종적으로 실무 협업에 사용하는것을 추천한다.



실제로 과거 Sketch에서 Figma가 대세가 되었다. (Uxtools 통계를 보면, UI 디자인, 핸드오프, 디자인 시스템 활용 등 거의 모든 항목에서 Figma가 1등을 한 것을 확인 가능하다.)




[코멘트(피드백)]




사진은 스터디 팀원들과 같이 작성해본 시안이다.

가운대는 디지안및 설명 시안이고 우측에는 코멘트가 포함되어 있다.

코멘트에 각각 담당한 분야의 답변을 해놓고 이를 프레젠테이션에 반영한다.

[Jira]

 

이후 Jira에 피그마 링크를 첨부한다.

[프레젠테이션]


피그마는 UX?UI 디자인뿐만 아니라 문서 공유에도 훌륭한 툴이다. 문서를 공유하거나 새로 만들어야 한다면 사전에 피그마로 공유하고 ㅡ레젠테이션하는것을 추천한다.

특히 피그마의 백미는 실시간 협업 기능을 파악할 수 있게 된다는 점이다.

IT업계에서 툴은 언제나 가장 빠르고 유저의 가려운곳을 긁어주었다. 피그마의 장점을 요약하면 다음과 같다.


1)간편함

2)협업

3)오픈소스

4)어도비 연계(2022.09 인수)



 

 

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

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

 

안녕하세요~~!! #플랫폼디자이너 IT를 소개하는 #승호아빠 입니다.

 

11월의 막바지인데두 날씨가 너무 좋습니다. 아직도 가을의 기운이 느껴집니다.

 

오늘 용인은 한파주의보라고 합니다. 최저기온과 최고기온의 온도차가 너무커서 한파주의보가 내려진거 같은데요!! 오후의 따스한 햇살은 한파라는 단어를 부끄럽게 하는거 같습니다.

 

 

오늘 찾은 카페는 용인 동백에 있는 아주 분위기가 좋은 까페입니다. 단독 주택가에 위치하고 있어 그렇게 사람이 많지 않아 좋은데요!! 카페 안에는 여러가지 테마를 즐길 수 있어서 더욱 좋은거 같습니다. 그리고 저처럼 노트북으로 작업을 하는 사람들에게 더욱 좋은 공간인거 같습니다. 앞으로 자주 찾아올거 같습니다.

 

 

오늘 리뷰를 진행할 책은 <UX/UI 디자이너를 위한 실무 피그마> 입니다.

 

 

디자이너와 프그램 개발자들은 피그마 라는 단어가 매우 친숙할거라 생각됩니다. 최근 스케치와 Adobe XD를 제치고 부동의 1위를 차지하고 있는 피그마 입니다. 이번에 서평을 통하여 이웃님들께 소개할 수 있어 너무 좋은 기회라고 생각합니다.

 

 

블로그 하시는 이웃님들께 피그마를 한번 사용해보시는 것을 추천드립니다. 왜냐하면!! 무료버전에서도 대부분의 기능들을 사용할 수 있어서!! 아주 좋아요!! 물론 학습은 어느정도 필요하지만!! 한번 사용해보시면 공감하실거예요!!

 

 

저같은 경우에는 UI 디자인만 피그마로 하는 것이 아니구요!! 사업계획서나 IR자료 등 문서 자료도 피그마로 작업하고 있습니다.

 

Lesson 01 왜 피그마인가

 

피그마는 2021년 UX tools에서 실시한 UI툴 랭킹에서 UI 디자인, 핸드오프, 디자인 시스템 활용 등 거의 모든 항목에서 1위를 차지했습니다.

 

 

아래 통계와 그래프는 다른 사이트에서 가져왔습니다. 제가 이렇게까지 소개하는 이유는 피그마가 정말 좋기 때문입니다.

 

 

2021년 UI 디자인툴 랭킹

 

 

연도별 UI 디자인툴 점유율 변화 

 

흠... 서평인데 피그마 자체에 너무 많은 힘을 실어주는거 같아서 다시 책으로 넘어오겠습니다.

 

 

레슨 01에서는 피그마에 대한 소개와 함께 IT 개발을 진행함에 있어 디자이너와 기획자, 개발자들이 피그마로 의사소통하는 내용을 시간대별로 정리하고 있어 피그마의 활용 중 협업에 대한 부분을 강조하였습니다.

 

 

피그마의 장점 중 하나이죠!! 다양한 그룹과 함께 실시간 의사소통이 가능하며, 디자인 툴내에서 자유롭게 의견을 제시하고 실시간으로 디자인을 수정할 수 있습니다.

 

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

 

피그마는 웹 기반 프로그램이기 때문에 PC에 설치 없이 브라우저에서 바로 디자인할 수 있습니다. 물론 PC에 설치하여 디자인도 가능합니다.

 

책에서는 피그마의 다양한 환경에서 사용할 수 있는 사용성과 함께 기본적인 화면구성 등 인터페이스에 대해 친절히 설명해주고 있습니다. 그리고 중간중간 UI 디자인 노하우도 전해주고 있어 UI 디자인에 대한 전문적인 지식이 없는 사람들도 쉽게 읽을 수 있도록 구성하였습니다.

 

Lesson 03 작업 전 환경 설정

 

디자인툴 전체적으로 조금 아쉬운 부분이 있는데요!! 그것은 호환성입니다. 스케치에서 작업한 내용는 XD 또는 피그마로 완벽하게 전환할 수 없습니다. 조금씩 수작업을 해주어야 합니다.

 

스케치에서 작업한 내용은 피그마로 어느정도 전환할 수 있지만!! XD에서 작업한 내용은 피그마로 전환할 수 없습니다. 이점은 참고하시기 바랍니다.

 

여기까지가 챕터 1, 피그마 시작하기 내용이었습니다!! 책은 상당히 가독성 있게 작성이 되었습니다. 피그마를 잘 모르는 사람들에게도 쉽게 읽혀질 수 있도록 작성되어 있습니다.

 

 

이 책은 2가지 파트로 구분되어 있습니다. 파그마 활용하기 & 피그마로 디자인하기 입니다. 각 파트는 챕터로 구성되어 있구요!! 챕터는 레슨으로 구분되어 있네요!! 레슨별로 정리가 잘 되어 있으며, 저자가 정말 고민을 많이 한것이 느껴집니다. 정말 군더더기 없는 구성입니다. 이정도면 대학교 강의 교재로 사용해도 좋을거 같습니다.

 

 

챕터 1 이후에는 기능별 상세 설명과 함께 실습할 수 있는 예제도 주어집니다. 또한 피그마 커뮤니티에는 저자인 클레이 정님이 직접 작업한 예제소스도 제공되어 있어 UI 디자이너와 피그마 입무자에게 매우 도움이 될거라 생각이 됩니다.

 

 

이 책은 UI 디자이너들 뿐만 아니라 IT기획자와 개발자들도 보면 좋을 책입니다. 그리고 한번 읽고 책장에 넣어 두기보다는 실무를 하면서 한번씩 찾아볼만한 참고서적이라 생각합니다.

 

IT업무를 진행하면서 다양한 직군의 사람들과 협업을 진행하게 됩니다. 저의 경우 피그마로 UI 디자인에 대해 협업을 진행하고 있으며, 많은 기업들이 피그마를 활용하는 추세입니다. 그 흐름에 있어 아주 필요한 책이라고 생각이 됩니다. 디자이너에게만 필요한 책이 아니라 IT기획자와 개발자에게도 매우 도움이 되리라 생각이 됩니다. 구성도 좋고!! 이미지도 너무 깔끔하게 만들어서 너무 좋네요!! 진짜!!

 

승호아빠가 이 책을 읽고 느낀 솔직한 후

UI 개발 담당이 아니더라도, 백엔드 엔지니어들도 개발 설계시 Figma의 내용을 확인하고 활용하게 된다. 기획자의 설계 의도를 파악하고 UX/UI를 함께 체크하여 필요한 서버 컴포넌트 또는 API들이 무엇이 있을지 설계해야 하기 때문이다. 기획 의도와 배경 그리고 전체적인 구조는 PPT 또는 로 확인해도 의미가 잘 전달되지만 상황에 따른 흐름 확인은 실시간적으로 figma로 확인하고 커뮤니케이션하는게 훨씬 업무 적용에 빠르다. 또한 웹에서 바로 화면을 볼 수 있기에 접근도 매우 용이다.

이 책은 디자인학과를 졸업하고 독학으로 Sketch를 익혀 UI/UX 세계에 입문한 저자가 쓴 Figma의 실무 활용 서적이다. "1장 피그마 시작하기"에서 간단한 figma 설명과 더불어 디자이너, 기획자, 개발자의 figma 활용을 가상의 시나리오로 예시을 들어 적었는데 무척이나 흥미를 불러 일으켰다. "엇, 나는 이렇게 쓰고 있는데 이렇게 활용되기도 하는구나",  "나도 나중에 이렇게 써봐야겠다"등의 생각이 들었기 때문이다. 

방금 전에 이야기한 1장을 포함하여 크게 2가지 파트로 나누게 된다.

Part 1 피그마 시작하기

피그마 소개 및 간단한 활용 예시 그리고 그래픽 리소스, 컴포넌트, 레이아웃, 협업등 기본적인 사용법과 예시들을 제공한다.

 

Part 2 피그마로 디자인하기

 

 

iOS 뉴스앱, 안드로이드 스포츠 클래스 앱, 반응형 패션 라이브 커머스, 디자인 시스템등 가상의 상황을 만들어서 어떻게 figma로 디자인을 하는지 설명한다.실용적인 다수 예시들을 제공한다는 것은 학습자가 빠르게 성장할 수 있도록 도와준다.

Figma를 처음 다루는 디자이너라면, 책에서 제공하는 예시를 활용하여 충분한 연습을 하는 것이 필요해보인다. 1인 개발에도 최근 관심이 많은데, 만약에 향후 기획이 정리가 된다면 와이어 프레임이나 간단한 디자인은 이 도구를 사용해서 진행해보려고 한다. 

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

테고리 메뉴 보이기/감추기블로그내 검색 기본 카테고리 모바일 작성글 개발자의 PT를 도와줄 피그마~ pribi 2022.11.27 댓글 수 0 수정 | 삭제 UX/UI 디자이너를 위한 실무 피그마 [도서] UX/UI 디자이너를 위한 실무 피그마 클레어 정 저 내용 평점 5점 구성 평점 5점 개발자로 다른 크루의 프레젠테이션을 볼 때 부러웠던 점 중에 하나는 PT를 기가 막히게 멋있게 한다는 점이다. 그 요인들 중에 하나로 피그마를 들 수 있다. 피그마로 컴포넌트 간의 관계를 직관적으로 예쁘게(?) 어필하면 없던 어필도 샘솟는 듯하다. 평범한 아이디아 하나도 있어 보이게 잘 보여주는 건 뭐랄까 너무 사기적인 능력이랄까? 물론 내용이 중요하다고 나는 되뇌어 보지만 파워포인트로 직사각형만 서툴게 작성된 내 PPT를 보면 한없이 작아지는건 어쩔 수 없다. 이렇게 피그마 책을 읽은 동기는 일단 갬성이었지만, 나름 여러 가지 생산성 부분에서 좋은 점이 많이 보이더라. 피그마로 할 수 있는 것들이 생각보다 많은 점도 있고, 책 내용은 그다지 어려울 부분도 양도 없어서 수월하게 읽음. 다음으로는 오로지 실습이지~ 일단..... 플로우 차트 그리기. 그다음.. 플로차트 그리기... 그다음 또 플로차트 그리기... 뭥..??? 요즘 하는 일이 기획이다 보니 계속 플로차트만 그려서 배우고 있는데, 내 본업인 개발은 언제 하지??? 어쨌거나 화면 설계도 할 수 있고 코딩과 연계되어 좋은 기능들 많다는 건 알겠다. 기획 끝나면 실습해봐야지. 피그마 전에 기획은 MIRO를 이용했는데, 좀 더 세밀하게 조정이 가능하고 이를 컴포넌트화 하는 부분들이 좋다. 그냥 아무것도 모르고 막 쓰기에는 미로가 좋은데, 계속 빌드업 하기에는 피그마가 더 나은 듯

1년 전쯤 해서 실무 피그마 도서를 리뷰한 적이 있습니다.

UX/UI 디자인 프로그램으로써 협업 웹 프로그램입니다.

한마디로 인터페이스 디자인을 하는 프로그램이면서 웹 기반이라서 다양한 플랫폼에서 활용할 수 있다는 의미입니다.

맥 사용자로써 이런 프로그램은 반갑죠^^;

그리고 피그마는 얼마 전 2022년 9월 15일에 디자인 대기업인 어도비에 2000억 달러에 인수한다고 발표가 나와서 많은 사람들의 관심을 받고 있습니다.

도대체 무슨 회사이길래 2,000억 달러에 인수되는지 궁금해 하더군요.

2016년에 개발된 회사가 6년 만에 2,000억 달러의 기업이 된 걸 보면 대단한 프로그램이라는 걸 증명하고 있습니다.

 

저도 UX나 UI 디자인을 할 때 필수 프로그램입니다.

어도비 XD가 있지만 2,000억 달러에 어도비가 인수한다는 말에 눈이 더 가더군요 ㅎㅎㅎ

요즘은 UX/UI뿐만 아니라 파워포인트 대신 사용하는 분들도 많더군요.

또한 피그잼이라는 화이트보드 프로그램은 포스트잇 형식의 기획 단계에서 정리가 필요할 때 유용하게 사용합니다.

 

이처럼 피그마 활용도가 높아지고 있는 가운데 실무 피그마 개정판이 나와서 다시 공부하는 마음에 리뷰가 하게 되었습니다.

참고로... 요즘은 책보다 e북이 익숙해져서 전자책으로 공부해 봤습니다.

 

실무 피그마 개정판 01.jpg

1년 만에 개정판입니다.

2,000억 달러 때문인지 다르게 보이네요 ㅎㅎㅎ

 

실무 피그마 개정판 02.jpg

기존 내용과 다른 개정판 내용을 확인하시고 공부하시면 됩니다.

또한 어도비 피그마 인수에 대한 예상도 설명해 주고 있는데요.

어도비 프로그램과의 호환성 증가를 보니 포토샵이나 일러스트 같은 프로그램과 호환성이 높아지겠네요.

 

실무 피그마 개정판 03.png

전체적인 흐름은 크게 2가지입니다.

1부는 피그마 기본적인 내용과 2부는 실습 위주의 내용입니다.

 

실무 피그마 개정판 04.png

시작은 왜 피그마인가를 보시면 피그마의 업체 위치를 볼 수 있습니다.

그만큼 강력하고 인기가 많다는 것입니다.

 

실무 피그마 개정판 05.png

중간마다 잠깐이라는 표시로 놓칠 수 있는 중요한 정보를 체크합니다.

 

실무 피그마 개정판 06.png

메뉴나 운영 기능을 번호로 설명하고 있기에 소소한 메뉴까지도 친절하게 설명하고 있습니다.

 

실무 피그마 개정판 07.png

피그마를 어느 정도 알고 계시면 2부부터 시작하셔도 됩니다.

2부는 실제 서비스 예제를 제작하면서 공부합니다.

 

실무 피그마 개정판 08.png

각 예제는 개요로 시작하여 실습 파일과 함께 step by step으로 실습합니다.

 

실무 피그마 개정판 09.png

각 레슨이 끝나면 디자인 노하우를 통해서 보충수업처럼 추가된 저자의 실무 노하우를 알려주고 있습니다.

중간마다 Tip은 피그마를 운영하면서 레벨 업할 수 있는 다양한 팁을 소개합니다.

 

실무 피그마 개정판 10.png

각 레슨이 끝나면 디자인 노하우를 통해서 보충수업처럼 추가된 저자의 실무 노하우를 알려주고 있습니다.

중간마다 Tip은 피그마를 운영하면서 레벨 업할 수 있는 다양한 팁을 소개합니다.

 

실무 피그마 개정판 11.png

마지막에는 디자인 작업물을 개발자에게 전달할 수 있는 과정을 소개합니다.

디자인 작업에서 앱 개발로 넘어가는 부분에서 개발자에 대한 배려도 충분히 고려하면서 작업하는 과정을 소개합니다.

 

실무 피그마 개정판 12.png

디자인 작업을 할 때 단축키를 아는 것과 모르는 것은 단순한 차이지만 그래도 시간이 지나면서 초보와의 차이를 느끼게 합니다.

단축키를 알아야 작업 속도나 능률도 오릅니다.

귀찮더라도 단축키는 자주 사용하는 기능은 외우시길 바랍니다.

 

예전에는 피그마는 단순한 UX/UI 디자인 프로그램이었지만 다양하게 응용할 수 있는 디자인 프로그램이 되었습니다.

UX/UI, 웹디자인, 프로토타입, 기획회의 등에 적용할 수 있으며 막강한 플러그인을 통해서 좀 더 다양한 프로그램 운영이 가능합니다.

개인적으로 급할 때는 피그마로 간단한 디자인도 가능하기 때문에 이용하는 횟수가 점점 늘고 있습니다.

좀 더 공부하고 코딩도 공부해서 기획, 디자인부터 시작해서 앱 개발까지 할 수 있는 날까지 열공하겠습니다.

 

 

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

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

 

피그마를 가끔 디자이너 분들과 협업할 때면 디자인 시안을 보기 위해 사용했었는데, 이제는 개발자들도 문서 작업 등을 하는데 피그마를 사용하는 시대가 왔습니다.

 

노션처럼 문제를 풀고자하는 시작점을 완전히 다른 관점으로 시작해 접근했으며, 이게 피그마의 성공에 기여한 큰 원인이라 생각합니다.

 

앞으로 5년 뒤에는 디자이너들과 협업할 때 어도비 제품군은 거의 다 사라지고 피그마를 사용하는 시대가 올지도 모르겠습니다.

서론

피그마는 굉장히 핫한 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 등 일부 도서는 인증이 제한됩니다.

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

닫기

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

자료실