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

한빛출판네트워크

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

UX/UI 디자이너를 위한 실무 피그마

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

한빛미디어

집필서

판매중

  • 저자 : 클레어 정
  • 출간 : 2021-11-01
  • 페이지 : 352 쪽
  • ISBN : 9791162244760
  • 물류코드 :10476
초급 초중급 중급 중고급 고급
4.9점 (21명)
좋아요 : 12

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

 

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

 

 

UXUI 디자이너를 위한 실무 피그마_상세페이지_900.jpg

클레어 정 저자

클레어 정

한국예술종합학교 디자인학과 졸업 작품에서 독학으로 스케치를 익히고 UX/UI 디자인 세계에 입문했다. 스타트업 초기 멤버로 시작하여 인하우스를 거치며 다양한 서비스를 만들고 있다. 현재 S사에서 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 파일 관리가 필요 없는 버전 히스토리

버전 히스토리 확인하기

버전 확인하고 되돌리기

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

 

 

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 페이지 구성 

 

부록 A 개발 전달과 코드 확인

Lesson 01 개발 전달 

디자인 에셋 내보내기

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

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

Lesson 02 코드 확인 

코드 변환 전 체크 요소

기본 인스펙터

플러그인 활용

 

부록 B 단축키와 플러그인

Lesson 01 단축키 

헬프 버튼

필수 단축키와 선택 단축키

커스텀 단축키

자주 사용하는 Quick action

Lesson 02 플러그인 

플러그인 시작하기

필수 플러그인

추천 플러그인

팀 플러그인

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

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

 

스케치에서 피그마로, 글로벌 UI 디자인 도구는 피그마가 많은 선택을 받고 있습니다. 이 책은 피그마를 처음 시작하는 디자이너, 개발자를 위해 기본부터 응용까지 모두 담았습니다. 피그마 도구 설명과 디자인 개념을 안내하고 과정마다 예제로 실습합니다. 피그마를 제대로 사용하기 위해 필요한 기능을 익힌 뒤 프로젝트로 실무 역량을 다집니다. 해상도, 아이콘 디자인 규칙, 다크 모드 같은 좋은 디자인을 위해 고려해야 할 팁도 유용합니다. 풍부한 예제로 피그마를 익히고 실무 프로젝트로 디자인 역량을 높이세요.

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

 

추천사

 

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

_임수민 학생

 

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

_조현석 11번가 개발자

 

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

_윤수혁 학생

 

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

_정소연 쏘카 디자이너

 

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

_김승현 DND 마케터

 

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

_류난희 프로덕트 오너

책을 읽으면서 매력있다고 느꼈던 포인트는 단순히 피그마의 API나 각종 버튼을 설명하지 않고

실제 피그마를 사용하는 디자이너의 하루가 어떻게 흘러가는지 보여주면서

피그마를 활용해 어떻게 일을하고 그렇기 때문에 피그마가 왜 중요한지 역으로 설명해 준다는 점이다.

각 챕터마다 여러 노하우들이 적혀있는데 꿀정보들이 많았다.

 

피그마 자체에 대한 설명도 충실한데, 굉장히 친절하다.

재밌게 따라갈수 있었다.

 

​ 예전 기억으론 UX/UI디자인을 할때는 포토샵으로 해서 원시적인 방법을 썼었던거 같다. 그때만해도 UX/UI디자인이란 개념이 덜 박혀있었을 때였으니... 피그마 도구설명과 디자인개념을 안내하고 과정마다 예제로 실습하게 되어있다. 책을 따라 실습하다보면 피그마를 제대로 사용하기위해 필요한 기능을 익히고 프로젝트로 실무 역량을 다지게된다. 좋은 디자인을 위해 고려해야할 팁도 알려줘서 유용하다. 이책은 피그마를 처음 시작하는 사람이나 배워서 실전에 들어가야하는 사람에게 정말 필요한 책이다. 여러가지 툴을 자세히 알 수있고, 내용도 실습하고 활용하기 좋은 내용으로 구성이 되어있다. 혼자 코딩하는 사람들도 디자인에 대한 것을 도움 받을수 있고, 개발자도 협업하기 위한 디자인적 지식에 많은 도움이 될거같다. 실제 응용 가능한 디자인 방법을 알려주는 책이니 디자이너, 개발자에게는 기본부터 응용이 가능하다. 현업에서 바로 사용해도될 정도의 도움이되는 책이다. "한빛미디어 <나는 리뷰어다> 활동을 위해서 책을 제공받아 작성된 서평입니다."



어렸을 때 디자인 툴 가지고 노는 걸 좋아했다. 포토샵, 일러스트레이터부터 마이너한 툴까지 혼자 축전 만들고 사진 편집하고 일러스트 그리며 조몰락조몰락 말 그대로 장난감처럼 가지고 놀았다. 머리 크고 나서는 먹고사는 것에 치여 사진 보정할 때 종종 포토샵을 사용하는 것 말고는 툴을 다룰 기회가 없었는데 개발자로 전직하고 나서 다시 가까이하기 시작했다.

 

 

일할 때야 디자이너 스앵님들 영역이라 디자인 확인하고 리소스 다운 받는 것 정도로 사용하지만 원체 툴 다루는 것 자체를 좋아해서 토이 프로젝트할 때 부러 시간을 들여 간단하게라도 뷰 작업해놓고 개발 들어갈 정도. 하지만 다달이 결제하며 사용해야 할 정도로 포토샵을 빈번하게 사용하지는 않아서 다른 툴 뭐 없을까 하다가 스케치를 알게 되었다. 여느 때처럼 조몰락거리다 스케치로 간단한 작업 정도는 할 수 있게 됐는데 라이선스 결제하려고 하니 내 활용 정도나 빈도에 비해 비싼 가격이라는 생각이 들었다. 사야 할 개발 툴도 한 바가지라 대안이 없을까 하다가 요즘 핫하다는 피그마를 알게 됐다. 여력이 없어 시도를 못하다가 새로운 회사에서 피그마를 잠깐 경험해 보고 생각보다 나쁘지 않아 '한 번 해보자' 싶었다.

 

 

항상 독학으로 무난하게 모든 툴을 다뤄왔었는데 뇌가 나이를 먹은 탓인지 피그마는 유독 손에 안 붙었다. 인내심이 바닥나서 던져놓고 다시 '스케치 결제할까' 하고 있는데 마침 책을 리뷰할 기회가 생겼다. 그래, 책 보고 한 번 해보자, 하고 골라왔다.

 

 

SE-c11b5939-a5b3-40e7-9140-2822347365bc.jpg

 

 

 

 

책은 크게 두 파트로 나누어져 있다.

 

 

Part 1 피그마 활용하기

Chapter 1. 피그마 시작하기

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

3. 정렬과 레이아웃

4. 컴포넌트와 오토레이아웃

5. 디자인 시스템과 협업

 

 

Part 2 피그마로 디자인하기

6. iOS 뉴스 앱

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

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

9. 디자인 시스템

 

 

+) 부록으로 단축키와 플러그인.

 

 

 

 

파트 1에서는 피그마의 장점, 사용 환경 선택하기, 인터페이스 구성, 기본 기능 등에 대해 설명하고 있다.

혼자 피그마를 다루면서 '이건 뭐야?' 하고 지나갔던 것들에 대해 알 수 있었는데, 책의 앞부분에서도 이야기하듯이 어느 정도 피그마의 기능을 알고 있다면 파트 2로 바로 넘어가 실습을 시작하는 게 좋겠다.

오기로 책의 처음부터 독파하려고 하다가 흥미를 잃을 뻔했다.

 

 

파트 2에서는 직접 실습할 수 있도록 다양한 예제를 제공하고 있다.

처음부터 읽는 것보다 파트 2의 예제를 진행하다가 궁금한 기능이 있을 때 앞부분에서 찾아보는 게 훨씬 유용했다.

 

 

책 중간중간에 '디자인 노하우'라고 본문 사이 짧게 들어가 있는 내용이 있다.

'팀원들에게 피그마 도입을 설득하고 싶어요!', '디자인하기 전 알아야 하는 UI 기술 지식', '다크모드의 디자인 요소', '반응형 디자인의 이해', '디자인과 개발 화면이 다를 때' 등 흥미로운 내용을 담고 있다.

 

SE-d273f196-1aaf-40e8-b975-0104263cfc62.jpg

 

제목은 'UX/UI 디자이너를 위한'이지만 단순히 피그마 사용법에 대한 내용만을 담고 있는 게 아니라 웹/앱 디자인 시 알아야 하는 배경지식, 용어 등에 대해서도 짚어주기 때문에 디자인을 생업으로 삼고 있지 않은 사람이나 웹/앱 디자인을 처음 해보는 사람도 더 수월하게 접근할 수 있겠다는 생각이 든다.

나는 디알못인데 크게 거부감 없이 끝까지 책을 볼 수 있었다.

 

 

이 책의 장점이라고 느꼈던 점은 본문 설명이나 스크린샷이 모자람 없이 들어가 있다는 점이다.

아주 기본적인 사항이지만 이런 류의 책들을 보면 의외로 '으음?' 싶은 부분이 꽤 나오는 경우가 많다.

이 책은 그런 것 없이 꽤나 꼼꼼하고 친절하게 독자를 끌고 간다는 생각이 들었다.

또 '잠깐', 'tip' 등을 통해 유용한 팁 등을 풍부하게 전수해 주고 있고 단축키나 참고 사이트 링크 안내도 충분하다.

 

 

책이 전체적으로 친절하다. 얇지만 알차게 담은 책이라고 생각된다.

 

 

 

 

**

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

**

 

 

 



 

20211227_025449.jpg

 

20211227_025557.jpg

 

저는 현업에서 분석설계자로 오래 일했으며, 현재 UI 설계 툴로 Axure RP를 주로  사용하고 있습니다.

 

Axure RP의 경우 한글 매뉴얼이나 책이 없기 때문에 학습하기에 까다롭고, 국내 커뮤니티가 없어 정보 취득에 열악합니다.

 

그리고 협업을 위한 타 프로그램(Jira 등)과의 연계, 버전 관리, 실시간 협업(동시 작업, 파일 공유, 피드백) 등의 기능에서 아쉬운 점이 많았습니다.

 

얼마전부터 이러한 단점을 보완할 수 있는 툴을 찾았는데 바로 이 책에서 소개하고 있는 벡터 그래픽 편집기 및 프로토타이핑 도구인 피그마입니다.

 

피그마는 현재 전세계적으로 UX/UI 디자인 분야에서 가장 인기있는 All in one 툴이기 때문에 관련 기술서, 영상, 교육과정 등이 계속해서 생산되고 있습니다.

 

이러한 트렌드에 힘입어 피그마 관련 서적도 여러 권 출간이 되어 있습니다.

 

이 책은 21년 11월에 출간되었고 피그마 관련 가장 최신의 정보를 담고 있으며, 특히 실무 중심으로 설명이 잘 되어 있어 UX/UI 디자인에 관심이 있는 독자에게 적극 추천하고 싶습니다.

 

책의 목차를 보시면 Part1에서는 설치에서 시작해서 환경설정, 기본 메뉴 익히기, 레이아웃 활용, 협업 방법에 대해서 설명하고, 

 

Part2에서는 학습 목표 시스템을 설정하고 피그마를 이용해 디자인 작업을 따라해 보는 방식으로 진행됩니다. (이 책의 핵심입니다.)

 

목표 시스템은 iOS 뉴스 앱, Android 스포츠 클래스 앱, 반응형 패션 라이브 커머스 , 디자인 시스템 등으로 실전에 자주 마주하는 시스템이며 아이콘, 내비게이션, 슬라이드 같은 핵심 UI 기능을 어떤 식으로 구현하는지 잘 설명이 되어 있습니다.

 

그리고 보통 부록에는 불필요한 정보가 많은데 이 책의 부록 A, B에는 본문만큼이나 중요한 정보가 담겨 있습니다.

 

부록 A에는 프론트엔드 개발 관점에서 피그마의 기능을 설명합니다. 마크업(퍼블리싱)을 위해서 디자인 에셋 내보내기, 모든 이미지 한 번에 내보내기 방법에 대해 설명되어 있습니다.

 

부록 B는 피그마의 중요 단축키와 플러그인에 대해서 설명합니다.

 

단축키의 단순 설명이 아니라 필수/선택 단축키, 커스텀 단축키 설정 방법, 자주 사용하는 Quick action 등을 꼼꼼히 설명하고 있습니다.

 

플러그인은 대부분 현업에서 필요한 기능이기때문에 망설임없이 책에 나온 필수 플러그인을 모두 설치하시면 됩니다.

 

추천 플러그인은 저자가 생산성 향상을 위해 추천하는 플러그인 목록인데 작업 속도를 향상시키기 위해 설치해서 사용하시면 좋습니다.

111.jpg

 

UX/UI 디자인 도구의 대표 피그마를 학습하기에 좋은 책이다. 특히 현업 실무자가 실무를 위한 내용을 담고 있는 것이 장점이다. 단순히 피그마 사용법만 알려주는 것이 아니라 배포하는 방법이나 문제 대응 등의 시나리오도 보여준다.

이 책은 다양한 UI에 대한 사용법을 알려준다. 책을 보면서 느낀점은 디자이너를 위한 책이지만 UI관련 용어는 개발자가 쓰는 것과 다름이 없어서 좋았다.

당연히 협업하려면 UI 컴포넌트에 대한 이해가 필요한 것이 맞다. 하지만 이것을 잘 모르고 단순히 동작하는 방식만 알고 그렇게 동작하도록 해달라고 요구하는 사람들도 종종 있다. 물론 디자이너라기 보단 기획자에 가까워서 그렇겠지만, 앱 기획자라면 앱 UI에 대한 이해도 있어야 한다고 본다. 그런 관점에서 이 책은 기획자가 읽어도 좋을 것 같다. 피그마 사용법이 아닌 앱의 UI에 대한 이해를 위해서 말이다.

 

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

UX UI 디자이너를 위한 실무 피그마.png

파트 2부터 먼저 보시길 권합니다.

iOS, 안드로이드, 반응형 3가지 타입의 서비스를 위한 디자인을 만날 수 있습니다. 실제 서비스를 위한 디자인이 어떻게 이루어지는지 하나씩 알아본 다음, 디자인 시스템을 이루는 요소들을 살펴봅니다.

 

피그마로 처음부터 프로토타입이 만들어지기까지 전체를 아우르는 내용을 보여줍니다. 어떤 요소들을 어떻게 만들고, 만들어진 요소를 어떻게 구성하여 전체를 만들어가는지 보여줍니다. 전체를 보는 시각과 프로세스를 만날 수 있습니다.

서비스 디자인을 보여준 뒤에 있는 디자인 시스템을 설명합니다. 시스템을 구성하는 요소들이 너무 많기 때문에 모두 설명하지는 않습니다. 콘셉트 페이지를 구성하기 위해 필요한 요소들을 중심으로 설명하고 어떻게 시작하는지 보여줍니다.

 

각 장마다 있는 디자인 노하우 만으로도 충분히 읽을 가치가 있습니다.

그리고, 설명 중간중간 들어가 있는 팁과 잠깐은 설명을 더욱 풍성하게 하고 실무에 다가갈 수 있도록 합니다.

피그마를 알려주면서 효율적인 작업을 위해 활용할 수 있는 다양한 서비스도 얘기해 줍니다.

'디자인을 위해 사용할 수 있는 서비스가 이렇게나 다양한가?' 하고 놀랄 수 있습니다. 마치 '디자인만 생각해라, 필요한 기능은 그때그때 찾아서 활용하면 된다. 디자인 프로그램을 익히는 게 필요는 하지만 너무 시간을 쏟지는 말아라.' 라고 얘기하는 것 같습니다. 피그마를 사용하지 않는다 하더라도 알아두면 많은 도움이 되는 서비스입니다.

 

파트 1은 피그마를 사용하기 위해 알아야 하는 요소와 기능들을 설명합니다.

보는 이에 따라서 다르겠지만, 익히 알고 있는 개념도 있을 것이고 생소한 기능도 있을 수 있습니다. 그런 가운데 독특하고 반짝이는 아이디어로 이루어진 기능도 만날 수 있습니다. 작업을 쉽고 효율적으로 할 수 있도록 도와줍니다.

요소와 기능 설명이라 조금 단조로울 수 있습니다. 하지만, 단순한 구현 설명에 그치지 않고 UX/UI 컴포넌트를 만드는 빠르고 효율적인 실무 노하우를 알려줍니다. '호오, 기발한데!' 하는 순간을 만나는 즐거움을 놓치지 않으시길 바랍니다.

파트 2를 먼저 보고 파트 1을 본다면 전체를 이루는 그림에서 어떤 역할을 하는지 알고 접근할 수 있으므로 훨씬 재미있게 접근할 수 있습니다.

 

디자인 도구로서 피그마에 더하여, 협업 도구로서 피그마도 알 수 있습니다.

 

 

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

나는 업무상 어도비 크리에이티브 클라우드를 구독 중이라서 겸사 겸사 포토샵 또는 어도비 XD로 UI 디자인 작업을 하고 있다. 디자인은 포토샵으로, UX나 플로우는 XD로 한다. 사실, 이 책에서 다루는 피그마라는 툴은 이 책을 보기 전까지 정말 듣도 보도 못한 툴이었다.

 

KakaoTalk_20211226_220707361.jpg

 

피그마는 웹 기반이기 때문에 설치형 프로그램에 비해 업데이트가 빠르다는 점과 파일을 저장할 필요 없이 웹에서 바로 디자인할 수 있다는 점도 장점으로 보인다. 디자이너라면 누구나 중셉(중도 세이브)을 하지 않아서 작업물을 날리는 경험을 한 번씩 다 해보았을 테니까. 하지만 인터넷 환경이 뒷받침되지 않는다면 작업이 온전히 진행되지 않을 수도 있어 염려스러워하는 사람이 있을 수도 있는데, 피그마는 브라우저 앱과 데스크톱 앱으로 모두 사용할 수 있기 때문에 본인이 편한 방식을 사용하면 된다.

 

UI/UX 디자이너를 위한 실무 피그마 책은 나처럼 피그마라는 프로그램을 처음 접해보는 사람들이 쉽게 따라 할 수 있도록 차근차근 설명을 이어가고, 간단한 실습을 따라 해낼 수 있게 구성되어 있다. 다만 책 제목이 그렇듯, 디자이너에게 친화적이기 때문에 디자인에 대해서 전혀 모르는 문외한이 디자인을 공부하기 작업하기 위해 시작하기에는 쉽지 않다. 이 책은 초보자를 위한 입문서가 아니라 기존의 스케치나 XD 등을 사용하는 등 디자인에 종사하는 사람이 피그마라는 툴로 작업 툴을 바꾸기 위해 적응하고 학습하는 것에 초점을 맞춘 책이라고 보면 된다.

 

개인적으로는 기획자와 개발자가 직접 접근하여 수정하고 익스포트하는 부분에서 소통이 편할 것 같다는 생각을 했지만, 한편으로는 이걸 도입하게 되면 가뜩이나 작업 경계가 애매한데 서로 자기 일을 미루는 일이 생길 수도 있겠다는 걱정도 됐다. 

 

한동안 그래왔고 지금도 앱 트렌드는 플랫 디자인이 선호되고 있다. 플랫 한 디자인 작업에 있어서 피그마는 UI / UX 디자인 툴로써 강점을 보이고 무엇보다 협업에 편의성을 가지고 있지만, 디자이너 입장에서는 익숙한 툴을 굳이 변경하면서 리스크를 감수할 필요가 있을까라는 생각이 들긴 했다. 

 

기존에 사용하던 툴을 바꿔야겠다는 생각이 들지는 않지만, 앱 개발 팀에서 처음으로 툴을 도입해야 할 때 시도하기에는 매우 훌륭한 툴이고, 학습하기에 좋은 책인 것은 분명하다.

 

이 책에서는 피그마에 대한 기초와 이론이 잘 설명되어 있습니다. 처음에는 피그마를 어떻게 시작해야하는지 설명하고 있습니다. 기본 인터페이스부터 작업 전에 환경을 어떻게 설정해야하는지 상세하게 알려줍니다.

이후에는 피그마에 시스템에 대한 설명을 합니다. 그래픽 스타일과 라이브러리나 정렬 레이아웃 오토레이아웃등을 다룹니다. 기본적인 피그마 시스템에 대한 설명만 했다면 조금 아쉬웠을 것 같은데, 이후에는 실제로 피그마로 여러가지 서비스를 디지안하는 실습을 합니다. iOS, 안드로이드 반응형 앱, 디자인 시스템까지 예제를 통해 어떻게 피그마를 사용해야하는지 실습합니다.

저는 프론트엔드 개발자로서 현업에서 일하고 있습니다. 기획자와 협업을 위해 피그마를 공부하면 좋을 것 같다고 생각했었는데, 이 책을 통해 어느정도 피그마에 대해 알 수 있었던 것 같습니다. 꼭 디자이너나 기획자가 아니더라도 개발자분들도 이 책을 통해 피그마를 공부하면 협업에 도움이 될 것이라 생각합니다.

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

디지털화 되어가는 시간을 살아가는 우리에게 `UX/UI` 떨어질 수 없는 친구들입니다. 매일같이 다양한 인터페이스를 만나고 있다. 그 중에는 처음 만난 구성이지만 지금까지의 경험을 바탕으로 따로 배우지 않아도 되는 인터페이스가 있는 반면 디지털 네이티브 세대조차 힘들어하는 것들이 존재합니다.

좋은 `UI`는 좋은 `UX(사용자 경험)`을 이끌어 내게 됩니다. 아무리 잘 만든 소프트웨어도 `UI/UX`가 별로라면 좋은 평가를 받기 힘들지만 단순하더라도 좋은 경험을 준 시스템은 좋게 각인됩니다.

`Figma`는 좋은 `UI/UX`를 설계하고 의견을 나누는데 있어 현재 가장 핫 한 디자인 도구입니다. 트렌드를 쫓는 것이 항상 옳은 것은 아니지만 왜 트렌드가 되었는지 알고 강점을 알아 둘 필요는 있습니다. 다양한 컴포넌트를 제공하고, iOS, 안드로이드, 웹 등 다양한 플랫폼에 대응하는 디자인 도구입니다. 학습 단계에 유공한 책이 아니라 실무에 쓸 수 있도록 구성되어 필요한 부분만 찾아보거나 예시를 따라 도구를 익히기 좋은 책입니다. 예시가 원포인트 레슨 받는 것처럼 친절하게 되어 있어 학습서로의 역할도 충실합니다.

학습서, 레퍼런스 책 두 역할을 충실하게 할 수 있는 책입니다. 디자인 툴을 다루는 책이라 단순히 디자인 부분에만 치중해 다루지 않고 개발자와 협업 방법도 다루고 있어 개발자 입장에서 한번 쯤 볼 만한 책이었습니다.

난이도: 하  
추천 대상: `UX/UI` 도구를 찾는 사람

---

`나는 리뷰어다 2021`의 활동으로 작성 된 리뷰입니다

스케치, XD, 제플린 등 한때는 당연하게메이저 포지션을 차지했던 프로토타이핑 툴들이하나 둘 피그마에 의해 자리를(?) 뺏기기 시작했고어느덧 피그마는 디자인 - 기획 - 개발팀에게 당연한 툴이 되었다.이런 빠른 변화의 흐름들이 버겁기도 하지만,실제 사용했을 때 왜 사람들이 열광하고,지금의 위상(?)을 갖게 됐는지는쉽게 이해는 되었던 잘 만들어진 툴이다.나는 이 책을 조금 다른 기대감으로 신청하게 되었다.그것은 바로 "예쁜 디자인을 하고 싶다" 의 마음.프로토타입을 만드는 것이나,컴포넌트 관점으로 요소를 분리하여 재활용하는 것 등은개발의 사고방식을 툴로 풀어낸 것들이었기에 크게 어렵지 않았다.아마 전문적이진 않지만 알음알음 배운 포토샵 또한툴에 대한 개념적인 이해에는 도움이 되었다고 생각한다.하지만 토이프로젝트를 할 때피그마를 사용해보려고 해도,디자인 기본에 대한 지식 없이내가 만든 결과물은 무언가 어설프고예쁘지 않았다.개인적으로 어떤 서비스에 사용된 기술이 아무리 뛰어나도사람의 마음을 제일 먼저 끌어오는 요소는디자인이라고 생각하는 나이기에이런 부분까지 가미된 책을 원했는데이 책이 그 부분을 충족시켜주었다.책 서두에 기본적인 용어 설명, 왜 이런 간격이 필요한지 등내가 혼자 만든 결과물이 어설퍼졌던 이유들을조금은 해당 챕터를 통해 알 거 같았다.또한 실무에서 발생하는 상황들을 가정하고그 때 어떻게 피그마를 활용하면 되는지에 대한 팁들이굉장히 유용했고,저자가 피그마를 실무에서 많이 활용해보셨고,웹, 앱 서비스에 대한 경험이 있었기에공유해줄 수 있는 팁들이 좋았다.그럼에도 불구하고 적절한 두께, 책의 두께에 압도당해펼쳐볼 엄두조차나지 않는 가이드북들 또한 존재하는데적절한 두께에 적절한 분량과 꿀팁들을 잘 버무려 한 권으로 담아냈다.

 

제 주변에는 앱 개발을 하시는 분들이 몇 분 계십니다.

얼마 전 그분들 중에서 한 분이 코딩보다 디자인하는 것에 너무 어렵다는 말을 하시면서 저보고 디자인을 어떻게 하면 잘 하냐고 물어보셨고 저는 피그마를 추천해 드렸습니다.

디자인에 대한 부담감을 충분히 해소할 수 있기에 다음에 기회가 된다면 스터디를 진행하겠다고 했습니다.

요즘은 디자이너가 아니지만 디자인하기 쉬운 방법들이 많이 생겼습니다.

얼마 전에는 미리캔버스에 관련된 강의를 하면서 많은 분들이 디자인에 대해서 어려움을 많이 해소하고 시간적으로 적게 투자해서 마음에 드는 디자인을 할 수 있는 게 너무 신기하다고 합니다.

그리고 UX/UI 디자이너를 위한 피그마 책이라고 되어 있지만 디자인이 약간 개발자들이나 디자인을 못하시는 분들에게 충분히 디자인에서 개발 전달까지 가능한 좋은 프로그램이라고 생각합니다.

 

제 주변에는 앱 개발을 하시는 분들이 몇 분 계십니다.얼마 전 그분들 중에서 한 분이 코딩보다 디자인하는 것에 너무 어렵다는 말을 하시면서 저보고 디자인을 어떻게 하면 잘 하냐고 물어보셨고 저는 피그마를 추천해 드렸습니다.디자인에 대한 부담감을 충분히 해소할 수 있기에 다음에 기회가 된다면 스터디를 진행하겠다고 했습니다.요즘은 디자이너가 아니지만 디자인하기 쉬운 방법들이 많이 생겼습니다.얼마 전에는 미리캔버스에 관련된 강의를 하면서 많은 분들이 디자인에 대해서 어려움을 많이 해소하고 시간적으로 적게 투자해서 마음에 드는 디자인을 할 수 있는 게 너무 신기하다고 합니다.그리고 UX/UI 디자이너를 위한 피그마 책이라고 되어 있지만 디자인이 약간 개발자들이나 디자인을 못하시는 분들에게 충분히 디자인에서 개발 전달까지 가능한 좋은 프로그램이라고 생각합니다.

 

 

01.jpg

UX/UI 디자이너를 위한 실무 피그마라고 제목이 되어있지만 앞에서 언급한 것처럼 개발자나 일반인들에게도 충분히 권해드리고 싶을 정도로 공부해 보신다면 좋을 듯합니다.

 

02.jpg

 

 

어느 책과 마찬가지로 실습 파일 다운로드를 제공하고 있고 또한 작가의 추가적인 디자인 샘플을 볼 수 있고 활용할 수 있기에 꼭 확인해 보시길 바랍니다.

이런 좋은 디자인 샘플을 직접 받아서 본인에 맞게 수정해서 충분히 활용할 수 있기에 피그마에 대한 활용도를 충분히 높을 수 있을 것입니다.

 

03.jpg

 

\

 

 

전반적인 내용은 크게 2가지로 분류됩니다.

전반부는 피그마에 대한 공부를 하시고 후반부는 여러 가지 샘플들을 제작할 수 있기에 전반적인 피그마에 대한 공부를 하실 수 있습니다.

 

04.jpg

전반부 Part 01 피그마 활용하기와 후반부 Part 02 피그마로 디자인하기 입니다.

 

05.jpg

 

 

 

참고로 초반 내용이지만 피그마의 인기가 어느 정도인지 알 수 있습니다.

UI, 핸드오프, 디자인 시스템 활용에서 1위를 차지하는 피그마입니다.

스케치이나 XD도 예전에 공부를 했지만 피그마가 이 정도인 줄은 이번에 알게 되었습니다.

 

06.jpg

중간마다 Tip으로 작가님의 피그마 활용 노하우를 알려줍니다.

 

07.jpg

 

 

또한 디자인 노하우는 피그마를 운영하면서 필요한 디자인에 대한 다양한 노하우를 설명하고 있습니다.

이 내용 또한 중요한 부분이기에 꼭 정독하시길 바랍니다.

 

 

undefined

 

피그마는 아직까지 한글 지원이 없습니다.그래서 각 메뉴에 대해서 친절하게 설명을 하고 중간에 잠깐 항목에서는 추가적인 내용을 다루고 있습니다.

 

피그마는 아직까지 한글 지원이 없습니다.

그래서 각 메뉴에 대해서 친절하게 설명을 하고 중간에 잠깐 항목에서는 추가적인 내용을 다루고 있습니다.

 

 

undefined

 

어느 정도 학습이 되면 중간마다 [실습]이라는 코너가 있습니다.

[실습]을 통해서 방금 배운 피그마 내용을 복습하면서 학습 증진에 도움이 많이 되었습니다.

 

[실습]을 통해서 방금 배운 피그마 내용을 복습하면서 학습 증진에 도움이 많이 되었습니다.

10.jpg

후반부 디자인하기에서는 각각의 시작 부분에서 예제 설명으로 시작합니다.그래서 우리가 디자인하는 것이 어떤 것이고 전체적인 설명으로 목표에 대한 숙지하여 실습에 일관성에 도움을 주고 있습니다.

후반부 디자인하기에서는 각각의 시작 부분에서 예제 설명으로 시작합니다.

그래서 우리가 디자인하는 것이 어떤 것이고 전체적인 설명으로 목표에 대한 숙지하여 실습에 일관성에 도움을 주고 있습니다.

 

11.jpg

 

전체적인 레이아웃도 꼭 숙지하시길 바랍니다.결국 디자인은 레이아웃이 중요한 사항입니다. 전체적인 레이아웃도 꼭 숙지하시길 바랍니다.결국 디자인은 레이아웃이 중요한 사항입니다.아무 생각 없이 지나갈 수 있지만 레이아웃이야 말고 디자인의 기본이기 때문입니다.전체적인 레이아웃도 꼭 숙지하시길 바랍니다.결국 디자인은 레이아웃이 중요한 사항입니다.아무 생각 없이 지나갈 수 있지만 레이아웃이야 말고 디자인의 기본이기 때문입니다. 전체적인 레이아웃도 꼭 숙지하시길 바랍니다.
결국 디자인은 레이아웃이 중요한 사항입니다.아무 생각 없이 지나갈 수 있지만 레이아웃이야 말고 디자인의 기본이기 때문입니다.
12.jpg

 

 

 

 

 

 

 

그리고 컬러를 결정하는 것도 체계적으로 설명하고 있기에 숙지하시면 디자인뿐만 아니라 다양하게 활용하실 수 있습니다.

 

 

13.jpg

 

 

피그마로 디자인 완성하면 끝이 아닌 개발자에게는 시작이 됩니다.

 

앱 개발에서는 디자인이라는 뼈대를 만들면 움직이게 하고 데이터를 운영할 수 있는 코딩 작업이 시작하게 되는데요.

 

단순한 디자인을 넘기는 것이 아니라 개발에 도움이 될 수 있게 정리(?) 해서 넘기기 때문에 중요한 부분입니다.

 

14.jpg

디자인 에셋 내보내기를 잘 숙지해야 고생해서 디자인을 한 내용을 개발에서 문제가 생기면 손이 많이 가기 때문에 디자인이면서 개발자의 마음으로 디자인하고 export 하시면 다양한 협업에서 크게 도움을 되실 겁니다.

 

아까도 스케치, XD, 피그마를 공부해 봤지만 이번에 공부를 하면서 느낀 점은 피그마로 정착해야겠다는 마음이 들었습니다.

다양한 기능과 빠른 업데이트와 다른 프로그램들은 가격이......^^;

좋은 프로그램을 알게 되고 제가 하는 일에 활용할 생각을 하면 약간 흥분이 되는데...

이번에도 그런 기분이 들었습니다.

여러분들도 잘만 활용하면 다양한 것에 활용할 수 있기에 한번 공부해 보시길 바랍니다.

 

 

 

 

 

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

다양한 프로토타이밍 툴이 존재합니다. 프로토타이밍 툴을 가지고 실무를 하다 보면 자신과 가장 잘 맞는 툴이 있고 새로운 툴을 배우고 싶은 사람들이 많을 거로 생각합니다.

 

이번에는 프로토타이밍 툴로 꾸준히 주목받고 있는 피그마 관련 UX/UI 디자이너를 위한 실무 피그마 저서를 소개합니다.

 

우선 피그마는 웹 기반 브라우저로 설치가 필요 없는 프로토타이핑 툴인데요. 인터넷 환경 잘 갖춰져 있으면 언제든지 사용이 가능하며, 운영체제와 상관없이 사용이 가능한 장점이 있습니다.

 

또한, 피그마의 큰 장점으로 동시 작업이 가능한 점인데요. 동시 작업 됨으로써 한 프로젝트를 여러 사람이 동시에 작업하고 수정할 수 있습니다. 실시간으로 상대의 마우스 커서가 어느 지점에 있었는지 확인이 가능해 협업 업무에 효율적입니다.

 

다양한 장점이 있는 피그마를 배우고 싶은 디자이너, 기획자, 개발자 등을 위해 실무자의 경험담이 생생하게 담겨 있는 UX/UI 디자이너를 위한 실무 피그마 저서는 피그마의 장점에 대한 설명과 기본 개념, 프로젝트 실습에 대한 내용을 담고 있습니다.

 

전체적으로 이번 UX/UI 디자이너를 위한 실무 피그마은 1부 피그마 기능, 2부 실습 프로젝트로 두 개 영역으로 나눠 피그마에 대해 자세하게 설명하고 있습니다.

 

UX/UI 디자이너를 위한 실무 피그마은 첫 시작부터 매력인데요. 피그마는 무엇이며 사람들이 피그마를 선택하는지 이유를 디자이너의 타임라인 즉 하루를 보여주면서 피그마의 활용에 대해 친근하게 설명해줍니다.

 

중간마다 나와 있는 ‘디자인 노하우’ 부분에서는 디자이너로서 알고 있어야 하는 지식, 실무에서 피그마에 대한 생각 등 말 그대도 저자가 경험한 디자인의 노하우들이 알차게 담겨 있습니다.

 

1부에서는 피그마 시작하기, 그래픽 스타일과 라이브러리, 정렬과 레이아웃, 컴포넌트와 오토레이아웃, 디자인 시스템과 협업 등 피그마의 기능에 대해 자세하게 담고 있습니다.

 

각 툴에 기능에 대해 스크린샷으로 보여주고 클레어 정 저자의 기능설명과 단축키를 활용할 수 있는 방법들을 쉽게 배울 수 있습니다. 또한, 각 장이 끝나는 마지막에는 기능에 대한 실습을 따라 함으로써 한번 더 기능에 집혀갈 수 있는 시간이 될 수 있습니다.

 

그리고 기능 설명 중간마다 ‘잠깐’, ‘TIP’ 코너가 존재함으로써 독자분들이 꼭 기억하고 실무에서 활용하기 좋은 팁이 있으며 또 하나의 비밀 노트 같은 피그마의 정보를 얻을 수 있습니다.

 

2부에서 다루는 실습에서는 1부에서 배운 기능들을 적극적으로 활용할 수 있는 실제 서비스 예제들을 담고 있는데요.

 

iOS 뉴스 앱 서비스를 디자인하면서 알아야 할 요소들과 UI에 관한 내용을 배울 수 있습니다. 이뿐만 아니라 안드로이드 스포츠 클래스앱, 반응형 패션 라이브 커머스, 디자인 시스템 등 실무에 적용 가능한 서비스 예제를 만날 볼 수 있습니다.

 

마지막으로 개발 전달과 코드 확인, 단축키와 플러그인에 대한 간략한 설명까지 제공해줌으로써 피그마에 대해 한 발 더 가까이 다가갈 수 있는 게 만들어 주는 UX/UI 디자이너를 위한 실무 피그마 저서입니다.

 

그리고 UX/UI 디자이너를 위한 실무 피그마 저서를 읽으면서 클레어 정 저자의 조그만 배려로 느껴지는 본문 아래 주석을 통해 본문을 더 깊게 이해할 수 있고 URL을 통해 그 정보에 대해서 더 딥하게 공부할 수 있는 계기를 만들어 주는 매력적인 저서입니다.

 

이번 UX/UI 디자이너를 위한 실무 피그마은 디자이너에게만 추천하는 저서가 아닌 피그마에 관해 공부하고 있는 기획자, 개발자들에게도 충분히 도움이 받을 수 있습니다.

 

피그마 예제파일 https://www.figma.com/@uidesignguide

 

2.png

 

 

 

디자인하면 어도비나 스케치 등의 프로그램을 쓴다고만 알고 있었는데, 요즘은 피그마를 UI/UX 디자인시 가장 많이 사용하더라고요. 기존에 디자이너들이 가장 많이 쓰던 스케치 파일을 그대로 가져와 바로 작업할 수 도 있고, 단축키에도 큰 차이가 없어서 피그마로 디자인툴을 변경한 회사들도 상당하다고 합니다.

 

 

기존에 사용하던 디자인 프로그램 툴들이 존재하는데도 피그마가 인터페이스 디자인 툴의 점유율을 빠르게 높여가는데는 그 이유가 있겠죠!? 책을 읽어보니 피그마에서 제공하는 파일 버전관리 기능! 30분마다 자동저장! 요런 장점들도 피그마가 시장에서 먹힌데에 한몫하지 않았나 싶었습니다 ㅋㅋㅋ 작업물은 소중하니까요...!

 

여튼, 피그마 가 무엇인지 이름만 들어본 저같은 학습자도 여러가지 유용한 툴을 자세히 배울 수 있고, 설명이 상세해서 따라하기 어렵지 않게 구성되어있는게 이 책의 장점! 1부에서 피그마 기능을 학습하고 2부에서 ios, 안드로이드, 반응형 웹 등 실습 레슨을 따라하면서 익히게 되어있어요.

 

 

2장에 있는 실습부분은 피그마 실습파일을 참고해서 만들어보면 되는데, 실습파일을 보면서 이해하기 쉽도록 도움말이 적혀있어요! 꽤나 상세하게 적혀있어서 1부 피그마 기능부분에서 100% 기능들을 다 익히지 못했더라도 따라서 직접 이렇게 만들어보면서 익히기도 좋았습니다.

 

IOS, 안드로이드, 반응형웹을 넘나드는 실습 예제들과 더불어 만들어진 디자인 예제를 개발로 전달하는 것 등 까지 실무에서 바로바로 쓸 수 있게 학습할 수 있어서 굿! UX/UI 디자이너를 꿈꾸거나 개발시 디자인에 좀 더 신경쓰고 싶은 개발자들에게 두루두루 한번 읽어보면 좋은 도서같습니다.

 

** 본 리뷰는 한빛미디어 <나는 리뷰어다> 리뷰어 활동으로 도서만을 제공받아, 리뷰어의 주관적인 견해로 작성 된 리뷰입니다. **

 


[도서 소개]

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


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


[목차]

PART 1 피그마 활용하기

CHAPTER 1 피그마 시작하기

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

CHAPTER 3 정렬과 레이아웃

CHAPTER 4 컴포넌트와 오토레이아웃

CHAPTER 5 디자인 시스템과 협업


PART 2 피그마로 디자인하기

CHAPTER 6 iOS 뉴스 앱

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

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

CHAPTER 9 디자인 시스템


[대상 독자]

-  실무 디자이너, 학생 디자인에 관심이 많은 개발자


[주요 내용]

- 스케치 프로젝트 가져오기 /환경 설정

- 벡터 / 스마트 셀렉션 /오토레이아웃

- 콘스트레인트 / 레이아웃 그리드

- 컴포넌트 / 라이브러리 /프로토타입

- 개발 전달 / 코드 확인 /버전 히스토리

- ios 뉴스 앱 / 안드로이드 스포츠 클래스 앱


[서평]


1부에서는 피그마 기능, 2부에서는 실습 프로젝트를 다룹니다. 각 장의 레슨을 따라하면서 자연스레 피그마 사용 방법을 익힐수 있습니다.


피그마 프로그램을 활용할 때 유용한 팁, 간단하지만 놓칠 수 있는, 하지만 주의가 필요한 다양한 팁이 가득 담겨 있습니다.


피그마에 대한 자료를 대부분 인터넷과 유튜브에서 확인했어야 했는데 이 책을 통해 피그마의 기능과 예제를 통해 활용할 수 있는 방법에 대해 배울 수 있어서 좋았다. 


특히, 개발자에게 소스를 전달하기 위해 필요한 부분을 별도의 페이지를 할당하여 설명한 부분이 개발자인 나에게 꼭 필요한 부분이라 많은 참고가 되었다.  


그리고 개발 전달시에 생기는 문제나 플러그인 소개 부분이 마음이 들었고 프론트엔드 개발자도 한 번 읽어 보면 좋을거란 생각이 듭니다.

 

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

IMG_3670.JPG

 

프론트엔드 개발 작업을 하다보면 디자이너로부터 홈페이지 디자인을 전달받습니다. 제가 일했던 디자이너 분들은 모두 포토샵으로 디자인 작업을 하셨습니다. 이번에 한빛미디어에서 나온 “UX/UI 디자이너를 위한 실무 피그마”를 읽고 나니 만약 피그마라는 편리하고 현대적인 디자인 툴을 사용하는 디자이너를 만났다면 작업을 얼마나 편리하고 빠르게 작업할 수 있었을까 라는 생각을 해보았습니다. 요즘은 디자이너 없이 혼자 UX/UI 디자인까지 해야 하는 프로젝트들이 생기는데 이 책의 챕터들을 학습하면 혼자서도 충분히 수준 높은 디자인을 할 수 있게 됩니다.


책의 특징으로는 피그마 프로그램 각 기능에 대해 스크린샷과 설명을 빠짐없이 넣어주셨다는 것 입니다. 옵션의 세세한 부분까지 설명해주기 때문에 피그마를 사용하다가 궁금한게 생기면 사전처럼 찾아볼 수 있는 책으로 활용도가 높다고 할 수 있겠습니다. 또한 챕터에서 학습한 내용을 실습할 수 있게 준비되어 있어 기능들을 익히는데 큰 도움이 됩니다. 저자의 디자인 노하우를 중간중간 넣어주었기 때문에 디자이너로써 가져야할 특급 정보들을 얻게 됩니다. 웹 디자인 뿐만 아니라 안드로이드, iOS 앱을 피그마로 디자인해보는 예제가 있어 앱 디자인 경험도 해볼 수 있어 좋았습니다.


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

예전에는 디자인하면 무조건 어도비 포토샵이였고 일러스트레이터, 인디자인, 

그리고 시대에 부응하지 못하지 못해 지금은 많이 사용하지 않는 쿽익스프레스도 생각이 나네요.

 

웹과 함께 모바일앱이 대세가 되면서 기존에 포토샵에 플러그인 형태로 보조적으로 운영되던 디자인툴들은

앱디자인에 특화된 스케치가 각광을 받았습니다.

다만 스케치는 맥os에서만 동작하기때문에 이거때문에 윈도우 PC를 사용하던걸 비싼 맥장비로 바꾸기는 선뜻 내키지 않았죠.

가격도 가격이지만 윈도우 사용자에게 있어서의 불편함일겁니다.

 

그런던차에 어도비가 가만 있을 수 없죠. 어도비XD ADOBE XD 라는 프로그램을 베타 서비스하기 시작했고

오랜기간에 걸쳐 이제는 정식버전이 조금씩 점유율을 높여가고 있습니다.

하지만 디자인 시장도 이제 독과점이 될 수 없을터 피그마가 최근에 많은 사용자층을 높여가고 있습니다.

 

그래서 이번에 소개할 책은 UX UI 디자이너를 위한 실무 피그마 Figma 입니다.

 

 

UX UI 디자이너를 위한 실무 피그마 Figma 는 두개의 파트로 구성되어 있습니다.

 

 

 

 

 

파트1은 처음 접하는 피그마의 기능을 학습하면서 기본기를 익히고 여러 메뉴, 특징들을 따라하게 됩니다.

 

 

유용한 팁은 따로 #TIP 이라는 박스형태의 문단으로 상세하게 알려주며

#잠깐 이라는 부분에서는 책의 학습과정 내내 곳곳에서 힌트를 줍니다.

 

아무래도 어도비 포토샵에 비해 광대한 기능보다는 정말 UX UI 디자인에 최적화된 프로그램이다보니

오히려 기본적인 기능을 익히는데 집중할 수 있어 오히려 편하다는 생각이 드네요.
저도 디자인일을 하고 있지만 아무리 버전업그레드가 되고 있다손쳐도 포토샵 기능의 10%나 쓸까요?
 
 
UX UI 디자이너를 위한 실무 피그마 Figma 책의 편집구성은 단축키 활용에 유독 공일 들였습니다.

 

아마도 그냥 영어(ctrl + c)로만 나열해 표기해 문장내에서 눈에 잘 안띄던 문제 아닌 요구를 반영한듯 싶네요.

 

 

디자인일을 하다보면 클라이언트나 팀내 작업자들끼리 파일을 주고 받습니다.

그런데 최종버전전의 버전별 파일은 그렇다치고 최종 결과 파일이라고 보냈던게 계속 알까기를 합니다.

최종, final, 최종_최종, 최종_최종_최종

정말 미칠 노릇이죠. 아마 현업에서 디자인하시는 분들은 공감하실거에요.

간혹 마지막 버전의 파일이 아닌 바로 이전 버전으로 작업하다가 프로젝트에서 문제가 생기는 경우도 종종 있었죠.

 

그래서인지 피그마 Figma 에서는 파일버전 관리를 위한 히스토리 기능이 제공되서

 

피그마 파일 작업시 오토세이브를 기록하고 히스토리 패널로 버전을 생성해 저장할 수 있도록 합니다. 
 
 
새로운 디자인 프로그램을 보다 빨리 익히려면 샘플로 작업을 하면서 사용하는 겁니다.

그냥 메뉴나 기능위주로 익히다보면 빨리 안 늘거드요.

 

그래서 UX UI 디자이너를 위한 실무 피그마 Figma 파트2에서는 안드로이드앱과 iOS앱, 반응형 웹 예제를 통해서

실제 피그마가 얼마나 쉽게 그리고 유용한 기능으로 작업이 가능한지 터득하게 해줍니다.

 

먼저 전체적이 레이아웃을 설명해주고 UI 구성과 어떤 기능들 위주로 실습하게 될지 알려줍니다.

풀버전의 앱은 아니라도 메인페이지 화면정도는 다루므로

모바일 플랫폼별로 특성을 파악하고 따라하면서 실무 냄새 정도는 맡을 수 있을거에요.
 
특히 예제뿐만 아니라, 디자인 시스템이라고 예제와 함께

디자인작업에 필요한 컬러, 타이포그래픽, 버튼, 텍스트인풋, 토글, 태그, 카드, 모달, 페이지구성에 대한 내용도 담고 있으며

부록 파트에서는 개발자와의 협업과 각종 플러그인, 단축키와 관련한 내용들이 있어 도움될겁니다.

 

 

 

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

책을 읽기 전에

최근 몇 년 사이 피그마는 IT 업계에서 가장 핫한 디자인 도구가 되었습니다. 트렌드에 편승하기 위해 시간이 날 때 피그마를 공부할 계획이었는데, 마침 관련 도서를 제공받게 되어 기쁜 마음으로 독서를 시작했습니다.

트렌디한 도구에 맞는 트렌디한 디자인

기존의 디자인 툴 도서들은 사용법이나 기능 설명에는 충실하지만, 막상 예제로 제시하는 디자인이 트렌드에서 벗어난 경우가 종종 있었습니다. 하지만 이 책은 11월에 출간된 따끈따끈한 신간이라서 그런지, 드리블 피드에서나 볼 법한 미려한 디자인을 예제로 제공하고 있습니다.

실제 앱 디자인 예제

피그마의 다양한 컴포넌트와 단축키, 유용한 기능들을 설명한 뒤에는 안드로이드와 iOS 앱 예제 디자인을 처음부터 작성하는 과정을 소개합니다. 단순히 근사한 음식과 수저만 제공하는 것이 아니라, 떠먹는 방법까지 상세하게 알려주는 점이 좋았습니다.

안드로이드, iOS, 반응형 웹을 아우르는 구성

단순히 보편적인 레이아웃을 작성하는 방법뿐만 아니라, 각각의 플랫폼에 맞는 화면 구성과 비율 등을 자세한 예제로 설명하고 있어 실제 업무 환경과 더 가깝다는 느낌을 줍니다.

 

피그마에 대한 자료를 대부분 인터넷과 유튜브에서 확인했어야 했는데 이 책을 통해 피그마의 기능과 예제를 통해 활용할 수 있는 방법에 대해 배울 수 있어서 좋았다. 특히, 개발자에게 소스를 전달하기 위해 필요한 부분을 별도의 페이지를 할당하여 설명한 부분이 개발자인 나에게 꼭 필요한 부분이라 많은 참고가 되었다.

이 책은 피그마가 어떤 기능을 가졌는지, 수록된 예제를 따라해보며 피그마 툴의 기본기를 다지게해준다. 또한 피그마가 실제 업무에 활용된다면 “이처럼 사용•활용 될 수 있다”를 <피그마를 활용한 디자이너의 하루>라는 주제를 통해 시각적으로 보여주며 책을 보는 이들의 이해를 돕는다. “실제 업무에 이렇게 활용하면 되는구나”라며 감을 잡게 도와준다. 스케치나 XD를 해왔던 사람들은 피그마를 어렵지 않게 학습할 수 있다. 초보자라고 피그마에 대해 어렵지 않게 배울 수 있는데 그 이유는 저자가 피그마 기초를 자세히 설명하기 때문이라 생각한다. 동시에 같이 학습할 예제들은 따라 만들어 보고 싶은 마음이 드는 요즘 스타일의 예제가 가득하다. 심플하고 가독성 좋은 예제들로 구성되어 있다. 간단한 듯 보이지만 텍스트들의 강약을 잘 사용하여 UI디자인하는 것이 제일 어렵다고 생각한다. 텍스트들의 강약으로 화면을 지루할 틈 없이 UI를 구성한 디자인을 따라해보며 저자의 센스있는 감각을 익힐 수 있다.

UX/UI 디자이너를 위한

실무 피그마

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

클레어 정 / 한빛미디어

 

UX/UI 디자인 초보 실무자

현장에서 다양하게

활용될 꼭 필요한 책으로 추천한다.

 

학교에서 배우기 쉽지 않는 UX/UI 디자인이라 할 수 있다. 현장에서는 많은 UX/UI 전문가를 필요로 한다.
UX/UI 디자인 실무는 학교에서 배우기 어려워 온라인 클래스의 도움을 받는 실정이다.

이런 점을 감안하여 다른 튜토리얼 책에서는 볼 수 없는 현업에서의 디자인 시스템, 개발 전달 과정을 자세히 기술하여 실무를 전달하려 노력했다.

 

이 책은 두 부분으로 나누어 9장으로 구성

1부에서는 피그마 기능,

2부에서는 실습 프로젝트를 다룬다.

부록 A 개발전달과 코드 확인

부록 B 단축키와 플러그인

 

각 장의 레슨을 따라 하면 자연스레 피그마 사용 방법을 익힐 수 있다.

디자인 커뮤니티에서 받은 도움을 이 책에 녹였으니 새로운 디자인 자산을 축적하는 기회로 삼을 수 있을 것이다.

 

실무에 적용할 방법을 따라가며 실습할 수 있도록 단계별로 잘 설명하고 있다.

이제 UX/UI 디자인 대한 학습을 쉽게 할 수 있는 길잡이를 만나게 되었다.

 

저자 클레어 정은 독학으로 스케치를 익히고 UX/UI 디자인 세계에 입문하고, 스타트업 초기 멤버로 시작하여 인하우스를 거치며 배우고 다양한 서비스와 실무 경험을 하였다.

저자의 노고에 감사한다. 클레어 정과 한빛미디어는

지속적으로 실무에 적용된 UX/UI 작품을 추가하여 ‘UX/UI 디자이너를 위한 실무 피그마 글로벌로 널리 쓰임 받는 UX/UI 디자이너 길잡이로 발전시켜 주기를 기대한다.

 

 

uidesignguides.com

 

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

[ 선택 이유 ]

프론트엔드 개발을 하다가도 가끔씩 아이콘, 디자인을 해야 할 때가 있습니다. 그때마다 UI팀에 요청하는 것도 시간이 걸리고, 사이드 프로젝트일 때 어쩔 수 없이 아이콘이나 사진 등을 인터넷에서 들고 와야 하는 불편한 상황이었습니다.

그래서 디자이너 친구에게 디자인툴을 배우려고 하고 있었는데, 그전에 피그마 책을 읽으면 좋겠다는 생각을 했습니다. 그런 와중에 마침 길벗 책에 있길래 냉큼 신청했습니다.

[ 본문 ]

저같은 디자인 초보자도 읽기 쉽게 구성이 되어있습니다.  단락 사이사이에도 Tip도 있어서 실무에서 쓸만한 지식도 나오고또 각각의 버튼에 대한 설명이 상세하게 나와있어 시간 들여 읽으면 딱 좋을 거 같습니다.그래서 어젠 직접 해보지 안 보진 않고 책만 쭉 읽었는데 피그마에 대한 기본적인 지식을 습득하게 좋은 책이었습니다.오늘은 직접 하나씩 써보며 익혀봐야겠습니다.책을 읽고 난 후에 피그마에 대해 관심이 생겨 좀 더 조사해봤습니다. 찾아보니 컴공 출신 미국 개발자 2명이 웹에서 동작하는 통합디자인 툴을 지향하는 목적으로 만들었다고 하더군요.그리고 기존의 강자들을 이기기 위해 선택한 전략은 바로 다른 디자인 툴, 협업 툴과의 콜라보입니다. 그래서 다양한 툴의 데이터, 파일을 편리하게 import를 할 수 있고, 또 웹 기반이다 보니 어디서든지 쉽게 접근하고 공유할 수 있다는 장점이 돋보입니다.다만 웹 기반이긴 하지만 웹 기술의 제한으로 모든 기능을 사용하려면 직접 다운로드해야 한다고는 하는데 아직 저한테 웹으로만 해도 충분한 기능이긴 합니다.피그마를 익혀서 하루빨리 아이콘도 머릿속에서 말고 현실로 끄집어내고, 간단한 기획문서도 쉽게 뽑아낼 수 있는 그런 프론트 엔드 개발자가 되면 좋겠습니다.

p.s 실제 책을 1회독 한후에 프로젝트에 쓸만한 아이콘을 만들어봤습니다. 생각보다 간편한 툴이었음에 놀라고 얇은 책이지만 내용이 알찬것에 감탄했습니다.

 

결제하기
• 문화비 소득공제 가능
• 배송료 : 2,000원배송료란?

배송료 안내

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

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

닫기

도서판매처

리뷰쓰기

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

* 리뷰 작성시 유의사항

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

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

오탈자 등록

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

도서 인증

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

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

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

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

닫기

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

자료실