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

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

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

한빛미디어

집필서

판매중

5점 (12명)
좋아요 : 108

손으로 익히는 피그마 실전 매뉴얼
피그마 UI3부터 생성형 AI까지, 최신 실무는 이 책에 있다!

 

피그마를 처음 접하는 입문자부터 실무를 준비하는 디자이너, 개발자, 기획자, 마케터까지 함께 사용할 수 있는 실전 중심의 피그마 입문서입니다. 피그마의 기본 기능부터 디자인 시스템, 오토레이아웃, 인터랙티브 컴포넌트, 프로토타입, 개발자 전달까지 현업에서 활용하는 전 과정을 설명하며 실습을 통해 자연스럽게 익힐 수 있도록 구성했습니다. 3판에서는 최신 인터페이스인 피그마 UI3, 생성형 AI 기능, 데브 모드(Dev Mode),  베리어블(Variables) 등 최신 피그마 기능을 반영했습니다. UX/UI 디자인 실무 역량을 키우고 싶은 누구에게나 꼭 필요한 실전 가이드입니다.
 

<3판 주요 사항>

  • 피그마 AI: 디자인 초안과 이미지 검색 등을 지원합니다. 플러그인이나 외부 프로그램을 사용하던 배경 삭제, 더미 콘텐츠 생성을 피그마를 벗어나지 않고 만들 수 있습니다.
  • 멀티 에디트: 여러 레이어를 동시에 선택하여 반복 작업을 하지 않고 수정할 수 있습니다.
  • 데브 모드: 기존 베타 버전에서 유료화된 만큼 더욱 강력하고 편리한 기능으로 업데이트되었습니다.
  • 베리어블: 색상, 스타일에 변숫값을 지정하여 디자인 토큰을 만들고 관리할 수 있습니다.
  • UI3: 더 현대적이고 넓게 사용할 수 있는 UI로 전체 업데이트되었습니다.

 

<예제 소스>

https://figma.com/@uidesignguide

 

클레어 정 저자

클레어 정

2016년부터 프로덕트 디자인을 시작해 스타트업, SI, 대기업에서 다양한 프로젝트를 진행했다. 현재까지 모빌리티, AI 챗봇, 커머스, 온디맨드, B2B, 게이미피케이션, NFT, VR 등 여러 분야의 프로젝트를 맡아왔다. 디자인 시스템을 구축하고 이를 팀에 정착시키는 일 그리고 이를 기반으로 한 신규 서비스를 제작하는 데 강점이 있다.

디자인과 비즈니스에 관해 읽고, 쓰고, 강의하며 현재는 글로벌 블록체인 서비스의 프로덕트 디자이너로 일하고 있다.

 

Part 1 피그마 활용하기

 

Chapter 1 피그마 시작하기
__Lesson 01 피그마를 써야 하는 이유
___피그마 소개
___피그마를 활용한 디자이너의 하루
___피그마를 활용한 기획자의 하루
___피그마를 활용한 개발자의 하루
___디자인 노하우
___[디자인 노하우] 팀원들에게 피그마 도입을 설득하고 싶어요!
__Lesson 02 피그마 설치와 기본 인터페이스 둘러보기
___피그마 설치
___메인 대시보드
___피그마 파일
___[Help] 피그마 AI
___[디자인 노하우] 디자인하기 전 알아야 하는 UI 기술 지식
___스케치 프로젝트를 피그마로 옮기기
__Lesson 03 작업 전 환경 설정
___폰트
___안드로이드와 iOS UI 템플릿
___기본 레이어 스타일 설정
___Preference 설정

 

Chapter 2 그래픽 스타일과 라이브러리
__Lesson 01 그래픽 스타일과 벡터
___그래픽 스타일
__Lesson 02 스타일과 라이브러리 
___스타일 만들고 편집하기
___그룹 스타일과 정렬
___라이브러리로 발행
___팀 라이브러리
___[실습] 스타일을 저장하고 라이브러리로 발행하기
___[Help] 피그마 드로우

 

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 실제처럼 작동하는 인터랙티브 컴포넌트
___인터랙티브 컴포넌트
___[실습] 버튼 인터랙티브 컴포넌트
___[실습] 토글 인터랙티브 컴포넌트
___[실습] 모달 팝업 인터랙티브 컴포넌트
___[실습] 이미지 캐러셀 인터랙티브 컴포넌트
___[실습] 베리어블 프로토타입
__Lesson 06
___파일 관리가 필요 없는 버전 히스토리 
___버전 히스토리 확인하기
___버전 확인하고 되돌리기
___[실습] 이전 히스토리로 복원하고 새로운 히스토리 저장하기

 

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 브랜치로 파일 관리 
___브랜치 활용하기
___예제
__Lesson 04 단축키 
___헬프 버튼
___필수 단축키와 선택 단축키

실무에서 바로 쓰는 피그마 실전 가이드
디자인 시스템부터 AI 기능까지, 최신 피그마를 가장 잘 담은 책

 

글로벌 UI 디자인 도구의 기준이 바뀌고 있습니다. 이제는 브라우저에서 여러 사람이 동시에 디자인 시스템까지 함께 구축하는 시대입니다. 이 책은 그 흐름의 중심에서 피그마를 제대로 배우고 싶은 디자이너, 개발자, 마케터 등 모두를 위한 책입니다.
3판에서는 새롭게 업데이트된 피그마 UI3 환경과 함께 생성형 AI 기능, 멀티 에디트, 데브 모드, 베리어블, 피그마 드로우 등 최신 기능까지 모두 담았습니다. 1부에서는 피그마의 기본 인터페이스, 그래픽 스타일, 컴포넌트, 오토레이아웃, 디자인 시스템 구축까지 핵심 기능을 익힙니다. 2부에서는 뉴스 앱, 스포츠 클래스 앱, NFT 마켓 등 실제 프로젝트를 기반으로 실습하며 실무 역량을 탄탄하게 다집니다. 디자인 시스템 운영, 협업 효율을 높이는 팁, 실무 노하우까지 아낌없이 담았습니다. 작은 실습 하나부터 완성 프로젝트까지 이 책과 함께 피그마의 무한한 세계에 빠져보세요.

 

  • 벡터 /스마트 설렉션 / 멀티 에디트
  • 콘스트레인트 / 레이아웃 그리드
  • 컴포넌트 / 라이브러리 / 오토레이아웃
  • 베리언츠 / 베리어블 / 프로토타입
  • 개발 전달 / 데브 모드 / 버전 히스토리
  • iOS 뉴스 앱
  • 안드로이드 스포츠 클래스 앱
  • 반응형 패션 라이브 커머스
  • 디자인 시스템과 B2B 솔루션

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

 

 

지금은 학과 개편이 되면서 생겼을지 모르겠지만, 내가 ICT 융합학부 디자인쪽 수업을 들었을 때 피그마 같은 툴이 있다고만 듣고 직접적으로 알려주는 수업은 하나도 없었다. 그런데 막상 기획자로 취업하려고 하니 피그마가 필수나 다름없어서 혼자 공부하려고 했는데, 그때 보였던 책이 한빛미디어의 실무 피그마 책이었다. 예전에도 도움을 많이 받았던 책이었는데 그 책이 벌써 개정 3판까지 출간되었다니.. 나는 리뷰어다 서평 책으로 만나니 감회가 새롭다.

이 책을 자세히 설명해보자면 1부에서는 피그마 기능, 2부에서는 실습 프로젝트를 다룬다. 피그마를 처음 공부한다면 1부의 기능 설명을 자세히 읽어보면서 학습해보는걸 추천한다. 이번 개정 3판의 특징으로는 UI3 업데이트 반영으로 피그마에 도입된 생성형 AI로 디자인 초안과 이미지 검색 등을 할 수 있고, 멀티 에디트 기능으로 여러 레이어를 동시에 선택하여 반복 작업을 하지 않고 수정 가능하다고 한다. 또한, 유료화된 데브 모드와 색상, 스타일에 변숫값을 지정하여 디자인 토큰을 만들고 관리할 수 있는 베리어블 등이 있다.


 

위에 사진으로 보이다시피 엄청 상세하게 설명과 이미지가 들어가 있어서 처음 배우는 사람들도 쉽게 따라할 수 있는 책이다. 이미지가 많아 책이 두껍긴 하지만 그만큼 꼼꼼하게 적혀있고, 책의 이미지가 깔끔하게 들어가 있어서 가독성이 매우 좋다. 피그마를 처음 배우지만 자세히 배워보고 싶은 사람들에게 적극 추천하고 싶다.

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

 

UX/UI 디자인 도구의 표준이라고 할 정도로, 전세계적으로 많이 쓰이는 피그마는 
이제 꼭 배워야 하는 기술로 자리 잡았습니다.

이 책으로 기초부터 차근차근 따라하다가 실습으로 피그마에 적응하고,

나아가 실무 프로젝트를 진행한다면 디자인 역량을 기르는 데에 큰 도움이 될 것으로 기대합니다.

 

피그마를 처음 배우는 초보 디자이너, 개발자 분들 뿐만 아니라 
실무에서 디자인 역량을 발휘하는 현업자들까지 모든 UX/UI 디자이너들에게 추천하고 싶은 책입니다.

 

? 개요
UX/UI 디자이너를 위한 실무 피그마는 피그마를 처음 접하는 디자이너나 개발자를 위한 입문서이자 실습서입니다. 툴 활용부터 디자인 시스템 구축, 프로토타입 제작, 최신 피그마 AI 기능까지 실무에 바로 적용할 수 있는 내용을 담고 있습니다.

? 처음부터 시작하는 피그마
툴바, 레이어, 프로퍼티 패널 등 피그마 기본 UI부터 차근차근 설명합니다. 사각형, 선, 이미지 채우기, 그라데이션 등 도형과 속성 조절 방법도 다루며, 그래픽 툴 경험이 없어도 기초를 쌓을 수 있습니다. Auto Layout도 따라 하며 쉽게 익힐 수 있어 유용했습니다.

? 디자인 시스템 구축하기
컴포넌트, 배리언트, 프로퍼티, 토큰, 베리어블 등 디자인 시스템의 기본 개념과 적용 방법을 실습을 통해 배울 수 있습니다. 색상과 폰트를 변수화하고, 관리하는 방법까지 익히며 유지보수가 쉬운 시스템을 만드는 감각을 기를 수 있었습니다.

? 실습으로 재미있게
프로토타입 기능으로 캐러셀, 버튼 상태 변경, 모드 전환, 숫자 카운트 애니메이션 등 다양한 화면 전환과 인터랙션을 연습할 수 있습니다. 후반부에는 iOS, Android, 반응형 디자인까지 실습하며 디자인 감각과 시스템화 사고를 키울 수 있었습니다.

? 피그마 활용을 넘어, UI 디자인 노하우의 총집합
픽셀 단위, 8px 그리드, 마진·패딩 설정 등 UI 기초 지식을 배우고, 디바이스별 고려사항과 개발 전달용 파일 관리까지 실무에 필요한 다양한 노하우를 익힐 수 있습니다.
 
❤️ 추천 대상

디자인은 감각의 영역이라, 책을 읽는다거나 강의를 듣는다고 해서 창의적이고 미적인 UI를 뽑아낼 수는 없는 것 같습니다. 하지만 정석적인 디자인 패턴이나, 체계적인 디자인 시스템 구축은 학습을 통해 충분히 배울 수 있는 감각이라고 생각합니다. 그리고 UX/UI 디자이너를 위한 실무 피그마는 이런 규칙이나 사고를 배우기에 적합한 책입니다. 어떤 식으로  컴포넌트를 구조화하고, 흐름을 이끌어갈 것인지, 일관된 디자인을 적용할 것인지 사고하는 방식을 배울 수 있습니다.


✅ 피그마를 처음 접하거나 제대로 활용하지 못했던 초보자
✅ 사이드 프로젝트에서 UI/디자인 시스템을 직접 구축해야 하는 프론트/백엔드 개발자
✅ 디자인 시스템 기초부터 실습으로 배우고 싶은 분
❗ 이미 피그마 고급 기능이나 UI 디자인에 익숙한 경력 디자이너에게는 새로운 내용이 많지 않을 수 있습니다. 협업용 기초 피그마 역량을 기르려는 개발자나 기획자에게 특히 추천합니다.
 

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

웹디자인 실무를 거쳐 현재는 게임기획자로서 UI 기획 업무까지 겸하고 있는 제게, ‘피그마(Figma)’는 단순한 디자인 툴 이상의 의미를 갖습니다. 디자이너와 기획자, 개발자 간의 경계를 허물며 협업의 중심에 선 이 툴은, 현대 디지털 프로덕션에서 거의 필수적인 도구가 되었고, 그 변화에 발맞춰 개정된 'UX/UI 디자이너를 위한 실무 피그마 (3판)'은 단순한 기능서 그 이상으로 다가옵니다.

저는 이전 판도 읽어봤고, 현재 회사에서는 피그마를 공식적으로 사용하고 있지 않지만 개인적으로 피그마 사용 경험이 있어 이 책의 변화를 체감할 수 있었습니다. 특히 이번 3판은 기존의 도해 중심 설명 방식을 유지하면서도 실무 중심의 구성과 흐름이 한층 더 체계적으로 정리되어 있고, 최신 흐름을 반영한 AI 기반 자동화 기능까지 소개하고 있다는 점에서 매우 고무적입니다.

가장 주목할 부분은 이번 3판에서 피그마에 새롭게 도입된 AI 기능을 실무 관점에서 해설하고 있다는 점입니다. 예를 들어, 텍스트 자동 생성, 더미 콘텐츠 채우기, 반복되는 UI 패턴 자동화 등의 작업을 AI가 어떻게 보조할 수 있는지를 구체적인 예제와 함께 설명하고 있습니다. 특히 실제 프로토타입에 임시 텍스트나 버튼 라벨을 일일이 기입하던 반복 작업에서, AI 기능이 어떻게 시간과 노동을 줄일 수 있는지 체감하게 해줍니다. 이 책은 단순히 “이 기능이 있다"라고 설명하는 수준을 넘어서, “이 기능을 이런 상황에서 이렇게 활용하면 좋다"라는 맥락과 사례 중심의 안내를 제공해 줍니다.

입문자나 비전공자에게 특히 추천하고 싶은 이유는, 이 책이 디자인을 ‘툴의 사용법’에 가두지 않고 ‘문제 해결의 사고 흐름’으로 풀어낸다는 점입니다. 예를 들어, 단순히 컴포넌트를 만드는 법만을 설명하는 것이 아니라, 어떤 기준으로 UI 요소를 컴포넌트화할지, 어떻게 디자인 시스템을 구성해야 일관성을 유지하면서도 팀과의 협업이 쉬운지 등을 단계별로 짚어줍니다. 피그마의 ‘Variants’ 기능이나 ‘Auto Layout’, ‘Interactive Components’를 실무 관점에서 풀어주는 방식은 초심자뿐 아니라, 이전 버전 피그마만 알고 있던 사용자에게도 굉장히 유익합니다.

또한 게임 UI 기획자로서 느끼는 부분 중 하나는, 이 책이 단순히 웹이나 앱 UI에 국한되지 않고 인터랙션 디자인의 보편적 원칙을 잘 설명해 준다는 점입니다. 실무에서 화면 설계서나 와이어 프레임을 만들 때, 기획자는 디자이너만큼 정밀한 시각적 표현보다는 인터페이스 흐름과 정보 구조에 대한 명확한 전달이 중요합니다. 이 책에서는 그러한 정보 구조의 정리, 사용자 흐름 구성, 그리고 개발자 인수인계를 고려한 작업 방식까지 짚고 있어, 기획자에게도 매우 실용적인 내용이 많습니다.

비전공자나 디자이너 지망생, 혹은 디자이너가 아닌 기획자·마케터 등 피그마를 처음 접하는 입문자라면, 이 책 한 권으로 피그마의 기본기부터 실무 응용, 그리고 최신 AI 트렌드 반영까지 두루 익힐 수 있습니다. 특히 협업 도구로서의 피그마를 제대로 이해하고 싶은 분이라면 더욱 추천할 만합니다. 피그마의 실시간 협업, 버전 관리, 주석 달기, 개발자 인수인계 기능까지 빠짐없이 다루고 있어서, 실제 팀 프로젝트에 바로 적용 가능한 수준의 이해도를 제공합니다.

결론적으로, 'UX/UI 디자이너를 위한 실무 피그마 (3판)'은 단순한 사용 설명서를 넘어서는 실무용 매뉴얼이자 입문자를 위한 완성도 높은 로드맵입니다. 툴을 넘어선 실질적 디자인 사고방식, 협업 구조, 그리고 최신 기능(AI 포함)을 아우르고 있기 때문에, 초보 디자이너는 물론 UI 기획자, 기획업무를 병행하는 개발자, 그리고 실무 지식이 필요한 취업 준비생들에게도 강력히 추천할 수 있는 책입니다.

디자이너와 소통하고 개발하는데 피그마를 많이 쓰고 있습니다.

그 때  좀 더 활용도를 높일 수 있는 책입니다.

피그마의 실전 활용법을 담은 책으로 특히 실습 중간중간 저자의 노하우와 감각을 익힐 수 있어 유익했다.

기술 서적이 3판에 이르도록 출간되었다는 것부터 이미 시장에서 검증된 책임을 의미힌다. 역시나 기대 이상이었는데 특히 인상적이었던 부분은 책의 실습을 따라하며 느낄 수 있었던 저자의 감각, 판단, 경험 등이다.

개인적으로 피그마에 관심을 둔 것은 전략 및 기획 중심의 업무를 시작하면서부터다. 그동안 백엔드 중심의 개발을 진행하였기에 사실 UX와 밀접할 일은 없었지만 전략 중심의 업무를 진행하며 보고 및 프레젠테이션 성격의 업무 포션이 늘었다.

사내 IT 시스템들의 구조도 그림을 그리는 것부터, 최신 동향의 서비스 및 기술들을 발표하는데 PPT 활용을 피할 수 없었고 mermaid, SVG 중심의 AI에게 의뢰하는 산출물의 표현력도 한계가 있어 그 대안으로 요즘 대세인 피그마를 익히고자 이 책을 읽게 되었다.

이 책은 크게 두 부분으로 나뉜다. 전반부는 피그마의 세부적인 기능 소개가 담겨 있다. 전반적인 메뉴 소개로 시작하여 그래픽스타일, 라이브러리, 정렬, 레이아웃, 각종 컴포넌트, 다자인 시스템에 이르는 각 과정을 따라하기만 해도 피그마에 금방 친숙해진다.

실질적으로 큰 도움을 받은 것은 후반부이다. 후반부는 iOS, 안드로이드 기반 앱을 하나씩 만들어보고 반응형, 디자인 시스템 등의 실무 실습을 진행하게 되는데 이 실습을 고민하며 따라가다보면 저자가 그간 쌓아온 감각과 노하우를 쉽게 얻을 수 있다.

후반부

특히 디자인 감각이 좋은 사람도 실무 UX를 만드는데 어려움을 겪는 이유가 각 요소를 어떻게 통일성있게 구슬을 꿰어나가야 할지에 대한 막막함이 큰 것 같은데 완성품에 이르는 일련의 전체 과정을 조율 할 수 있게 구성된 점이 매력적인 부분인 것 같다.

아울러 시대적 배경에 맞게 피그마에 내장된 AI 활용법도 부분부분 소개되고 있어 유익했다. 물론 유료 기능인지라 직접 실습을 따라하긴 어려웠지만 생각보다 기능이 뛰어난 것 같아 다음번엔 별도의 AI 기능 활용법에 관한 도서도 나오면 좋겠다는 생각이 든다.

AI

그 외에도 개발에 연계되는 기능들도 소개되어 있어 유익하다. 애셋을 내보내는 기능이나 개발 모드를 활용하는 법 그리고 git과 유사한 브랜치로 파일을 관리하는 법도 소개된다.

브랜치

무엇보다 중간중간 등장하는 디자인 노하우 컬럼은 때로는 저자의 경험과 노하우가 때로는 실습에 필요한 기반지식의 통찰이 담겨 있어 유익했다. 오히려 본문 내용보다 집중해서 읽어야 할 부분이다.

노하우

책 자체의 편집 및 다지인도 너무 가독성이 좋아 읽기 편했다. 저자의 내공과 내용 못지 않게 전체적인 책의 디자인이나 시각적인 요소도 완성된 하나의 예술작품 같다는 생각을 들게 한 예쁜 책이다.

다만, 피그마를 처음 써보는 사람에게는 초기 진입장벽이 있는듯 하다. 초반부에는 체계를 잡기보다는 무조건 백문이 불여일타로 실습을 진행하는 부분이 수록되었으면 어땠을까 싶다. 초반부 피그마에 접속도 제대로 못하고 있는 수준에 메뉴 기능 설명은 현실적으로 도움이 되지 않았다.

실력 성장형 혹은 시간에 따른 흐름 구성도 다소 아쉬웠다. 모듈별로는 딱떨어지고 깔끔하게 실습할 수 있었으나 각 장의 실습을 진행하는데 별도의 검색이나 AI를 활용하여 진입해야 하는 번거로움이 있었다.

아마도 3판에 이르며 중급자들 수준에 초점을 맞춰 군더더기가 제거되어서 그런것 아닐까 싶기는 한 데 몇 페이지 더 할당된다면 초보자나 입문자도 품는 완벽한 책이 될 수 있을 것 같다.

아무튼 이런 부분들은 매우 사소한 부분이고 사실 더 중요한 UX 실무자의 감각과 노하우를 익힐 수 있다는 본연의 관점에 비춰보면 매우 훌륭한 책이다. 피그마를 익히는 것을 넘어서 실전적인 감각도 덧칠하고 싶은 독자들에게 추천하고 싶다.


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

 

 

 

1. 책에 대한 간단한 소개

『피그마 완전 정복』은 UX/UI 디자이너, 기획자, 개발자 등 협업에 관여하는 모든 실무자들이 피그마(Figma)를 실질적으로 활용할 수 있도록 돕는 실전형 가이드북입니다. 단순한 툴 사용법을 넘어서 협업 관점에서의 실전 예제와 디자인 시스템 구축까지 폭넓게 다루며, 초보자부터 중급 사용자까지 폭넓게 수용할 수 있도록 구성된 책입니다.

 

 

 

2. 목차 구성

책은 총 두 개의 Part로 구성되어 있습니다:

 

Part 1. 피그마 활용하기
기초적인 인터페이스와 설치부터 시작하여 그래픽 스타일, 레이아웃, 컴포넌트 활용, 오토레이아웃, 디자인 시스템, 프로토타이핑, 버전 관리까지 실무에서 바로 사용할 수 있는 피그마의 전반적인 기능을 체계적으로 소개합니다.

 

Part 2. 피그마로 디자인하기
iOS/안드로이드 앱, 반응형 웹, 디자인 시스템, 글로벌 NFT 마켓 등 다양한 실제 사례를 기반으로 프로젝트를 하나씩 따라 하며 배운 내용을 실습할 수 있도록 구성되어 있습니다.

 

부록 A. 개발 전달과 파일 관리
디자인 애셋 내보내기, 데브 모드 사용, 브랜치 관리, 단축키 등 개발 협업과 생산성을 높이는 실용적인 팁들도 빠짐없이 정리되어 있습니다.

3. 서평

피그마를 처음 접하거나 막 실무에 투입된 디자이너, 기획자, 개발자에게 이 책은 강력한 나침반 역할을 합니다. 이 책의 가장 큰 장점은 실무 중심의 시각입니다. 단순한 기능 설명에 그치지 않고, 각 기능이 실제 협업 과정에서 어떻게 활용되는지를 ‘디자인 노하우’ 코너와 실습 예제를 통해 구체적으로 보여줍니다.

특히 ‘디자인 시스템’이나 ‘오토레이아웃’처럼 초보자들이 어렵게 느끼는 개념도 예제와 함께 차근차근 설명하여 이해를 돕습니다. 또한 각 파트에 흩어져 있는 [실습]과 [디자인 노하우] 박스는 현업에서 바로 써먹을 수 있는 팁들로 가득해 단순한 학습서를 넘어 워크플로우 개선서로서의 가치를 제공합니다.

후반부에는 iOS 앱, 안드로이드 앱, 반응형 웹 등 실제 사례를 직접 따라 하며 디자인하며 자연스럽게 책에서 배운 내용을 복습하고 확장할 수 있도록 되어 있어, 학습의 흐름과 응용의 폭이 자연스럽게 이어집니다.

4. 추천 대상

피그마를 처음 접하는 입문자: UI/UX에 관심 있는 디자이너 또는 기획자, 개발자
피그마를 독학하며 막히는 부분이 많았던 사람: 실습과 함께 기능을 익히고 싶은 실무자
디자인 시스템과 협업 기능에 대해 실무에서 고민하는 디자이너
개발자와 협업 시 디자인 전달에 어려움을 겪는 팀 전체

더 발전된 디자인 협업 환경을 만들고 싶은 분들께 이 책은 많은 도움이 될 수 있을 것 같아요.



이 서평은 한빛미디어 ‘나는 리뷰어다’ 활동을 통해 도서를 제공받아 작성했습니다.

 

 

3년 차 프론트엔드 개발자의 처음 이 책을 알았더라면 좋았을

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

 

 

개발자에게 디자인은 늘 디자이너 몫,

외주를 시작하려면 꼭 필요한 단계, 나와 상관없는 듯하면서도 꼭 필요한 존재.

 

프론트엔드 개발을 시작한 지 3년, 리액트와 Next.js를 주력으로 사용하면서

항상 피할 수 없는 숙제가 하나 있었다. 바로 디자인 시안과 피그마 파일.


피그마, 개발자에게는 설명서가 필요하다

 

 

 

 

나는 지금 웹·모바일 통합 개발 수업을 듣는 학생이기도 하다.

 

첫 번째 텀에서 우리는 아무런 피그마 교육 없이,

그저 “디자인은 해와야 해”라는 과제로 수업을 시작했다.

 

그래서 나는 유튜브를 켰고, 검색창에 “피그마로 Carousel 만들기”를 입력했다.

이 책을 그때 알았더라면, 진짜 시간을 아꼈을 것 같다.


이 책은 실무에서 필요한 것만 보여준다

 

 

UX/UI 디자이너를 위한 실무 피그마는 단순한 기능 설명서가 아니다.

 

진짜 현업 디자이너가 어떻게 피그마를 사용하는지,

어떤 흐름으로 프로젝트를 진행하는지,

디자인 요소들을 어떻게 구성하고 조율하는지를

현장감 있게 알려주는 책이다.

 

프론트엔드 개발자인 나는,

이 책의 ‘버튼 실습’과 ‘반응형 앱 UI 구성 예제’ 파트에서

특히 시간을 많이 쓴 것 같다.

 

무엇보다 예제실습파일과 예제들이 많아 다양하게 연습해 볼 수 있다는 게 무척이나

마음에 들었다.

 

 

프론트엔드 개발자 입장에서

디자인은 늘 “감각”의 문제 같았다.

하지만 이 책은 다르게 말한다.

 

“이런 상황에서는 이렇게”,

“이런 페이지 구조라면 이런 식으로 배치”

— 즉, 디자인에도 규칙과 패턴이 존재한다는 것을

이 책을 통해 명확하게 느낄 수 있었다.


혼자 공부하는 개발자에게 추천하는 이유

 

 

혼자 유튜브 뒤져가며 피그마 배웠던 나 같은 사람이라면,

이 책은 정말 든든한 가이드가 될 것이다.

 

디자인 툴이 익숙하지 않아도 괜찮고

감각이 없어도 따라할 수 있게 구성돼 있고

프론트 개발자라면, 이걸 보는 순간 디자이너와의 소통이 훨씬 쉬워질 것이다.


마무리

 

 

피그마는 더 이상 디자이너만의 도구가 아니다.

개발자도 기본적인 디자인 이해가 있어야 협업이 수월하고

사이드 프로젝트든 취업 포트폴리오든 완성도가 달라진다.

 

개발자인 나에게 ‘피그마 실무책’은 UI/UX에 대한 시야를 넓히고,

혼자 공부하는 시간을 줄여주는 나침반이었다.



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

 

풀스택 개발자로서 해당 책을 읽어보고 서평을 해보기 위하여 이번에 UX/UI를 위한 피그마와 관련된 책을 읽어 보았습니다.

 

프론트엔드를 구현하다보면, 어떻게 해야 사용자 경험이 좋을까? 어떻게 디자인해야 사용자가 익숙하고 편하게 사용할 수 있을까? 를 많이 고민하게 됩니다. 그러다보면 머릿속에 떠오른 형상을 그려볼 때가 많은데요, 저는 많은 경우 노트와 연필을 사용해서 그리곤 했습니다. (제가 재직 중인 직장이 조금 특이한 경우인데요, 기획자와 디자이너가 없어서 현재 기획부터 개발까지 전부 팀원들이 도맡아서 하고 있습니다.)

 

그러다보니 색감이나 디자인이 생각한 것만큼 자세히 묘사하기 힘들었고 나의 이 구상을 어떻게 팀원들에게 혹은 사용자에게 공유할 수 있을까를 도대체 디자이너와 기획자는 어떻게 일을 할까를 많이 고민했었습니다. 하지만 이제 한빛에서 출판한 피그마 책을 읽어보고 기획자와 디자이너 심지어는 프론드엔드 개발자가 어떻게 일을 하는지 엿볼 수 있었고 이를 활용하여 실무에 적용시킬 수 있는 많은 아이디어를 얻었습니다.

 

책의 구성에 관해서 이야기를 해보자면 3가지가 참 마음에 들었습니다.

1. 피그마에 대한 설치부터 활용까지 어렵지 않게 배울 수 있었습니다.

2. 글이 쉽게 잘 읽힙니다.

3. 사진을 통해 글의 이해를 빠르게 할 수 있습니다.

 

마지막으로 전부 읽은 후기로는 아직도 피그마란 도구는 익숙하지 않습니다. 현재 쓰는 도구들이 너무 많기도 하고 또 어렵진 않지만 꽤 능숙하게 사용하려면 시간과 노력이 들 것 같기는 합니다. 또한 저 혼자 쓰는 게 아니라 동료들과 같이 쓸 수 있도록 설득도 필요할 것 같고요. 하지만, 책을 읽어보고 draw.io 로 그리는 것에서 피그마로 변경하는 것이 초기 비용은 많이 들어도 추후에 더 발전적인 방향으로 나아갈 수 있을 것 같아서 팀원들과 공감대를 형성해보려고 합니다.

 


 

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

 

과거의 소프트웨어 1.0시대는 코드와 코드로 대화하는 시대였습니다. 그러니 해당시대에는 이러한 코딩을 할 수 있는 일부 인력이 시스템을 만들기 위해 한땀한땀 코드를 만드는 시대였습니다. 하지만 기술의 발전은 소프트웨어 2.0시대를 만듭니다. 2.0시대의 특징은 ‘매개변수’를 활용한다는 것에 있습니다. 이를 달리 말하면 다양한 데이터셋을 기반으로 이를 통해 특정 수식을 입력하면 알고리즘을 통해 쉽게 가동하는 장치를 활용할 수 있다는 점입니다. 그리고 이제 인공지능의 발전과 LLM을 통한 ‘자연어’시대가 도래했죠. 그리고 이 시대의 가장 핵심적인 특징은 자연어인 만큼 누구나 소프트웨어 결과물을 만들 수 있다는 점입니다. 프롬프트를 통한 LLM이 좋은 예시이며 제가 <UX/UI 디자이너를 위한 실무 피그마>를 읽게된 강력한 동기이기도 합니다.

 

예전에는 디자인을 하기 위해서는 컨셉을 정해주면 디자인 팀 혹은 디자인 관련 전문업체에 외주를 줍니다. 그리고 이게 몇차에 걸쳐 진행이 되면서 컨셉이 변화할 수 있습니다. 그러다보면 ‘전환비용’이 많이 들게 되죠. 이게 바로 생산성과 연계되는 겁니다. 그러나 이제는 얼마든지 ‘바이브코딩’이 가능한 시대이고 분명한 명령어를 통해 이미지를 만들고 직접 수정이 가능한 시대입니다. 모바일과 웹 UX/UI디자인도 마찬가지입니다. 굳이 텍스트로 지시할 필요없이 바로 바꾸면 되죠 특히 피그마 같은 소프트웨어는 그 구조까지 내가 직접 설계하기에 아주 간편합니다.

 

본서의 가장 큰 장점은 상세한 예시입니다. 피그마를 어떻게 사용하는지, 기본적인 것들은 다른 서적에도 아주 많습니다. 본서는 그것보다 아주 많은 예시를 자랑하고, 특히 요즘같은 숏폼시대에 걸맞는 세로형, 그리고 반응형 커머스 앱 디자인까지 어떻게 나와있는지가 아주 상세히 설명되어 있습니다. 그러나 1인 앱 개발을 준비하는 사람이라면, 본서의 내용까지 다수의 연습이 되어있다면, 굳이 디자이너가 필요없이도 백엔드를 구축하고, 프론트엔드와 병행해서 피그마를 사용해서 아주 신속하게 결과물을 만들수 있습니다(기획이 잘되었다는 전제하에)

 

더욱이 소프트웨어 2.0과 3.0의 중간에 있는 피그마에도 AI기능이 도입되었습니다. 피그마에서 프롬프트 설정과 데이터셋을 아주 유용하게 사용할 수 있습니다. 이러한 유용한 툴들이 계속 업그레이드 되는 것을 보면, 과거에는 업무의 담당자에게 분명하게 전달하는게 능력으로 받아들여졌다면, 이제는 점점 더 나만의 에이전트에게 분명하고 수준높은 프롬프트를 하는게 역량이 될 것으로 보입니다. 이에 따라 결국 업무는 점점 개인화될 것이고, 해당 개인자체가 1인 사업부 심지어는 기업처럼 프로젝트 베이스로 결과물을 만들어야 그것이 시장수요와 맞을때가 오겠죠. 본서는 그런 의미의 과도기에 있는 서적입니다.

 

‘이미 시작되고 있죠’

 

 

 

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

개발자의 영원한 숙제라고 한다면 바로 디자인 스킬이 아닐까 싶다.

백엔드 개발자는 테스팅이나 사이드 프로젝트를 위한 프론트 디자인 스킬이 필요하고

프론트 개발자도 퍼블리셔의 부재 혹은 사이드 프로젝트를 위한 디자인 스킬이 필요하다.

 

하지만 절대 쉽게 손이 가지는 않는게 바로 디자인이 아닐까

그래서 영원한 딜레마인것 같다.

 

스스로 디자인에 대한 재능이 부족하다고 여기는 사람들도 많던데

디자인도 결국 얼마나 많이 디자인 하면서 레퍼런스를 쌓아두었느냐가

디자이너로써의 승패를 좌우한다고 한다.(디자이너에게 물어봤었음)

 

아무튼 나도 프론트엔드 개발자로써 디자인에 대한 욕망이 솟아올랐다가 사그라들곤 한다.

그래서 이번엔 피그마 책을 읽어보기로 했다.

 

요즘은 유튜브로도 피그마를 쉽게 배울 수 있다고 하지만

이렇게 정보성 컨텐츠는 글로 된게 훨씬 받아들이기 편해서

블로그 글이나 책을 더 선호한다.

 

먼저 이 책에서 좋았던 점.

책의 초반부에 디자이너의 하루를 타임라인으로 보여준다.

피그마를 어떻게 실무에서 활용하는지를 간단하게 설명하는데

개발자는 모르는 디자이너의 하루를 알려주는 느낌이라 상당히 신선했다.

 

그 외에는 제목처럼 실무 위주로 실습 과제들로 꽉꽉 채워져있다.

그 중에서도 특히 버튼 실습 파트가 제일 재미있었는데

아무래도 개발하다 보면 버튼을 제일 많이 만져서 그런것 같다.

 

중간중간 디자인 노하우도 수록되어있고

예제가 상당히 많아서 숨겨져있던 디자인 감각을 자극하는데 충분했다.

 

미뤄두었던 피그마 공부, UX/UI 디자이너를 위한 실무 피그마로 시작해보는건 어떨까?

총 3번의 업데이트를 거치며 내용이 훨씬 더 탄탄하게 보강되었으며 실무 피그마 기술과 피그마의 기본기를 쉽고 빠르게 익힐 수 있게 잘 구성되어 있다

현직 UI/UX 디자이너의 피그마 활용 노하우를 아낌 없이 전수해주는 책이므로 피그마를 사용해보고자 하는 사람이라면 읽지않을 이유가 없다

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

배송료 안내

  • 20,000원 이상 구매시 도서 배송 무료
  • 브론즈, 실버, 골드회원 무료배송
닫기

리뷰쓰기

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

* 리뷰 작성시 유의사항

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

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

오탈자 등록

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

도서 인증

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

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

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

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

닫기

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