한 권으로 끝내는 올인원 피그마

 

기획부터 디자인, 프로토타입, 반응형 웹 제작까지 한 권으로 끝내는 올인원 피그마 실습 가이드!

 

이 책은 단순한 도구 설명서가 아니다. 기획자, 디자이너, 개발자가 함께 볼 수 있는 실습형 협업 가이드다. 로그인 화면, 캐러셀, 드로어 메뉴 같은 실제 예제를 직접 만들며, 팀 프로젝트에서 바로 활용할 수 있는 협업 스킬을 익힐 수 있다. 처음 배우는 사람도 쉽게 따라 하고, 실무자는 곧바로 써먹을 수 있도록 구성했다. 또한, 최신 UI3 인터페이스와 2025 Figma Config 업데이트 내용을 반영했다. 이 책 한 권이면 피그마 입문부터 반응형 웹 실무까지 완벽하게 준비할 수 있다.

 

도서구매 사이트(가나다순)

[교보문고]  [도서11번가]  [알라딘]  [예스이십사]  [쿠팡]

 

출판사 제이펍
저작권사 제이펍
원서명 (없음)
도서명 한 권으로 끝내는 올인원 피그마
부제 기획자·디자이너·개발자를 위한 반응형 웹 제작 실습 가이드
지은이 오시내
옮긴이 (없음)
감수자 (없음)
시리즈 (없음)
출판일 2025. 12. 04
페이지 660쪽
판 형 46배판변형(188*245*27.6)
제 본 무선(soft cover)
정 가 35,000원
ISBN 979-11-94587-86-6 (13000)
키워드 Figma, 디자인, 웹디자인, UX, UI, 프로토타입, 오토레이아웃, 컴포넌트, 협업, 와이어프레임
분 야 웹사이트 / 웹디자인

관련 사이트
■ 오쌤의 니가스터디 유튜브 채널

■ 오쌤의 니가스터디 블로그

 

관련 시리즈

■ (없음)

 

관련 포스트

■ 2025.11.21 - [출간 전 책 소식] - 피그마로 디자인하고, 반응형 웹까지 만드는 시대

 

관련 도서

■ 처음부터 끝까지 피그마로 팀플하기

■ 디자인 트렌드 아카이브 포토샵 & 일러스트레이터

■ 나의 첫 HTML & CSS 웹 디자인

■ 웹 디자인, 이렇게 하면 되나요?

■ LUVIT♥ 새로운 웹 개발의 시작 스벨트

 

관련 파일 다운로드

■ http://bit.ly/jpub_figma

 

강의 보조 자료(교재로 채택하신 분들은 https://jpub.tistory.com/notice/1076을 통해 다음 자료를 요청하실 수 있습니다.)
■ 본문의 그림과 표

 

미리보기(추천사, 머리말, 이 책에 대하여, 본문 일부)

 

정오표 페이지
■ (등록되는 대로 링크를 걸겠습니다.)

 

도서구매 사이트(가나다순)

[교보문고]  [도서11번가]  [알라딘]  [예스이십사]  [쿠팡]

 

도서 소개

기획부터 반응형 웹 제작까지, 피그마로 완성하라

이제 피그마는 단순한 디자인 툴이 아니라, 기획·디자인·개발을 하나로 잇는 협업 플랫폼으로 자리 잡았다. 이 책은 그런 피그마의 진정한 가치를 보여주는 실전형 가이드다. 기획자는 피그마로 효과적인 기획서를 만들고, 디자이너는 개발 친화적인 UI를 설계하며, 개발자는 Dev Mode를 통해 디자인을 코드로 자연스럽게 연결하는 방법을 배울 수 있다.

 

입문자도 따라 할 수 있는 친절한 실습 중심의 구성으로 처음 피그마를 접하는 사람도 부담 없이 시작할 수 있도록 하였다. 각 기능과 개념을 실제 화면 예시와 함께 단계별로 익힐 수 있으며, 단순히 따라 하기만 하는 예제가 아니라 ‘왜 이렇게 해야 하는지’를 이해하며 실무에 바로 적용할 수 있도록 돕는다. 피그마를 한 번쯤 써봤지만 실무에서는 막막했던 분들에게 든든한 길잡이가 되어줄 것이다.

 

책의 마지막에는 여행사 콘셉트의 ‘유로바이크투어’라는 반응형 웹 프로젝트를 직접 만들어보면서 기획부터 디자인, 개발자 핸드오프까지의 전 과정을 체험할 수 있다. 실무 현장에서 바로 써먹을 수 있는 구성 요소 설계, 오토레이아웃, 변수, 프로토타입 제작법 등을 통해 협업의 효율을 극대화하는 방법을 배운다.

 

최신 피그마 UI3 인터페이스와 최근 Config 업데이트 내용을 반영하여, 지금 바로 실무에 적용 가능한 내용을 담았다. 또한 저자의 유튜브 강의(오쌤의 니가스터디)와 함께 보면 학습 효과가 더욱 커진다.

 

기획자, 디자이너, 개발자가 함께 피그마로 더 나은 결과를 만들어가고 싶은 모든 사람을 위한 올인원 실전형 안내서다. 이 책 한 권이면 기획부터 디자인, 프로토타입, 반응형 웹 구현까지 한 번에 익힐 수 있다. 처음부터 끝까지 따라가다 보면, 어느새 당신의 프로젝트가 더 명확하고, 더 빠르고, 더 완성도 높게 바뀌어 있을 것이다.

 

주요 내용

• 피그마 기본 설치와 인터페이스 이해
• 디자이너와 개발자를 위한 협업 기능과 핸드오프 방법
• 색상·텍스트·그리드·이펙트 스타일 등 디자인 시스템 구성
• 컴포넌트, 오토레이아웃, 컨스트레인츠 활용
• 로그인 페이지, 이미지 슬라이더, 드로어 등 프로토타입 제작 실습
• 저자가 직접 만든 와이어프레임 구성 요소 파일 제공
• Dev Mode, VS Code, 제플린 연동으로 개발 협업하기
• 반응형 웹페이지 기획 · 디자인 · 프로토타입 제작 과정 완전 실습

 

지은이 소개

오시내

강의를 사랑하는 프런트엔드 개발자. 컴퓨터 공학을 전공하진 않았지만, 디자인부터 시작해서 프런트엔드와 백엔드까지 아우르며 웹 개발에 진심인 1n년 차 개발자이자 강사다. 고양이와 여행을 좋아하며, 가장 큰 즐거움은 강의를 통해 지식을 나누는 것이다. 현재 유튜브 ‘오쌤의 니가스터디’ 채널을 운영하면서 미래의 프런트엔드 개발자들과 활발히 소통하고 있다. 저서로는 《LUVIT♥ 새로운 웹 개발의 시작 스벨트》(제이펍, 2025)가 있다.

 

차례

추천사 x

머리말 xii

이 책에 대하여 xiv

 

PART I 피그마 소개 1

CHAPTER 01 왜 피그마를 사용해야 하는가? 3

LESSON 01 웹 앱 개발을 이해하기 위한 UI/UX 4

LESSON 02 웹 개발을 위한 전체적인 프로세스 7

LESSON 03 협업을 위해 디자이너가 개발 공부를 해야 하는 이유 9

LESSON 04 협업을 위해 개발자가 피그마를 공부해야 하는 이유 10

 

CHAPTER 02 피그마 설치 및 인터페이스 11

LESSON 01 피그마 설치법 12

__피그마 웹사이트 회원 가입 12 / 피그마 데스크톱 애플리케이션 다운로드 17 / 모바일용 피그마 애플리케이션 다운로드 19

LESSON 02 피그마 인터페이스 확인 20

__전체 인터페이스 확인 20 / 메인 메뉴 22 / 툴 박스의 종류 23 / 패널의 종류 26 / 인터페이스 다크 모드 설정 28

LESSON 03 Dev Mode 사용을 위한 계정 업그레이드 29

 

PART II 개발자 핸드오프 31

CHAPTER 03 피그마 디자인 요소 확인 33

LESSON 01 피그마 디자인 구성 요소의 종류 34

LESSON 02 이동 툴과 레이어 패널을 이용한 요소 선택 35

LESSON 03 디자인 콘텐츠 간의 간격 확인 38

LESSON 04 멀티 에디트 기능 39

__모든 프레임 요소 크기 변경하기 39 / 다른 레이어의 텍스트를 한 번에 바꾸기 41

 

CHAPTER 04 스타일 확인 43

LESSON 01 색상 스타일 44

__색상 스타일 제작하기 44 / 색상 스타일 적용 및 해제하기 49 / 색상 스타일 그룹 제작하기 51 / 색상 스타일 제작 시 바로 그룹 제작하기 52

LESSON 02 텍스트 스타일 56

__텍스트 스타일 제작하기 56 / 텍스트 스타일 적용 및 해제하기 59

LESSON 03 그리드 스타일 61

__그리드 제작하기 62 / 그리드 스타일 등록하기 65

LESSON 04 이펙트 스타일 69

__이펙트의 종류 69 / 이펙트의 스타일 등록 76 / 이펙트의 스타일 적용 78

 

CHAPTER 05 협업 81

LESSON 01 코멘트 툴 사용법 82

__코멘트 달기 82 / 코멘트 확인 83 / 코멘트에 댓글 달기 84 / 전체 코멘트 확인 85 / 코멘트 숨기기 85 / 해결한 코멘트를 패널에서 숨기기 86 / 코멘트 삭제하기 87

LESSON 02 파일 공유 방법 88

__팀으로 초대하기 88 / 파일 주소 보내기 95 / 파일을 직접 공유하기 98

LESSON 03 프로토타입 미리 보기 100

__프로토타입 모드로 파일 보기 100 / 프로토타입 모드 공유하기 102

 

CHAPTER 06 이미지 저장하기 103

LESSON 01 이미지 포맷 104

__피그마에서 불러올 수 있는 이미지 포맷 104 / 피그마로 GIF 포맷 불러오기 105

LESSON 02 이미지 내보내기 109

__디자인 파일에서 이미지 내보내기 109 / 해상도 개념 알아보기 114 / 해상도에 따른 이미지 내보내기 120 / 프레임 선택하고 이미지로 내보내기 124 / 기획서를 PDF로 내보내기 126

LESSON 03 GIF보다는 APNG 사용 132

__GIF 파일 내보내기 132 / APNG 파일 내보내기 136

 

CHAPTER 07 CSS 코드 확인 139

LESSON 01 Dev Mode를 이용한 코드 확인 140

__Dev Mode 팀 파일로 변경 140 / Dev Mode 사용하기 143 / Dev Mode 기능 확인하기 147

LESSON 02 VS Code 연결 151

__VS Code와 피그마 연결 151 / VS Code에서 피그마 디자인 활용 154

LESSON 03 제플린과 피그마 연결 157

__제플린에 가입하고 피그마 연동하기 158 / 피그마에서 제플린 플러그인 설치하기 162 / 제플린에 연결된 피그마 파일 보기 165

 

PART III 개발에 맞춘 구성 요소 제작 167

CHAPTER 08 컴포넌트 제작 169

LESSON 01 컴포넌트 사용법 170

LESSON 02 인스턴스를 원본 컴포넌트로 변경 173

LESSON 03 인스턴스 해제 176

LESSON 04 에셋 패널 활용하기 179

LESSON 05 컴포넌트 안의 인스턴스 182

 

CHAPTER 09 오토레이아웃 187

LESSON 01 패딩과 마진 188

__패딩 실습하기 190 / 패딩과 마진 실습하기 194

LESSON 02 Space Between을 위한 Auto 200

LESSON 03 오토레이아웃 크기 단위 204

LESSON 04 오토레이아웃 정렬 기능 210

LESSON 05 Ignore auto layout 212

 

CHAPTER 10 반응형 웹 개발을 위한 기술 217

LESSON 01 정렬과 Constraints 218

__오토레이아웃 정렬 218 / 컴포넌트 정렬 220 / 프레임 정렬 224

LESSON 02 min-width와 max-width 230

__min-width 230 / min-height 234 / 자손 요소에 min-width 적용하기 237 / max-width 240 / max-height 243 / 자손 요소에 max-width 적용하기 246 / 사이즈 응용 예제 248

LESSON 03 오토레이아웃 wrap 256

LESSON 04 Dev Mode와 VS Code를 이용한 코딩 처리 262

 

PART IV 프로토타입 제작 289

CHAPTER 11 베리언트 소개하기 291

LESSON 01 베리언트 이해 292

LESSON 02 체크박스 만들기 295

LESSON 03 토글 스위치 만들기 301

LESSON 04 로그인 버튼 만들기 305

LESSON 05 인풋 필드 만들기 308

LESSON 06 베리언트 컴포넌트명이 다른 경우 발생하는 에러 312

 

CHAPTER 12 프로토타입 315

LESSON 01 프로토타입과 인터랙션 개념 정리 316

__프로토타입 패널 316 / 기기 선택 318 / 연결 만들기 321 / 인터랙션 창 321 / 프로토타입 실행 324

LESSON 02 베리언트를 활용한 로그인 페이지 프로토타입 326

LESSON 03 이미지 슬라이더 프로토타입 335

LESSON 04 오버레이 프로토타입 349

LESSON 05 포지션 프로토타입 353

__Fixed 기능 구현 354 / Sticky 기능 구현 358 / Scroll to 프로토타입 361

 

CHAPTER 13 변수 프로토타입 365

LESSON 01 변수의 종류 366

__색상 변수 등록 367 / 숫자 변수 등록 374 / 숫자 변수 오토레이아웃 수치 등록 380 / 문자열 변수 등록 385 / 변수의 그룹 처리 390 / 불리언 변수 등록 393

LESSON 02 문자열 변수 프로토타입 398

__변수에 따른 문자열 변경 398 / 문자열 변수와 Variants 408 / 버튼의 활성/비활성 처리 416

LESSON 03 숫자 변수 프로토타입 423

__숫자 변수를 사용한 온도계 423 / 숫자 변수를 사용한 볼륨 조절 435

LESSON 04 조건문 프로토타입 444

__조건을 이용한 볼륨 조절 445 / 상품 판매 배너 개수 조절 457

LESSON 05 변수 모드 469

__변수 모드를 이용한 상품 배너 470 / 변수 모드를 이용한 다크 모드 처리 487

 

PART V 반응형 웹 제작 501

CHAPTER 14 기획서 제작 503

LESSON 01 프레젠테이션 틀 제작 504

__프레임 사이즈 선정 505 / 공통 구역 컴포넌트로 제작 505

LESSON 02 하이퍼링크 기능 활용 509

__예제 파일 불러오기 509 / 글자에 하이퍼링크 적용하기 510 / 요소에 하이퍼링크 적용하기 512

LESSON 03 정보 설계와 작업 흐름도를 위한 Autoflow 플러그인 515

__정보 설계 연결선 처리 515 / 작업 흐름도 연결선 처리 519

LESSON 04 스타일 가이드 521

__예제 파일 불러오기 521 / 색상 가이드 522 / 폰트 가이드 522 / 로고 가이드 525 / 아이콘 가이드 526

LESSON 05 표 제작 529

__플러그인을 이용한 표 제작 529 / 스토리보드 제작을 위한 표 제작 536

LESSON 06 와이어프레임 제작 540

__Wireframe Generator 541 / Forms 543 / Handy Components 545 / 제공 와이어프레임 사용하기 546

 

CHAPTER 15 디자인 구현 553

LESSON 01 스타일 가이드 제작 554

__색상 스타일 등록 555 / 글자 스타일 등록 558 / 그리드 스타일 등록 561

LESSON 02 반응형 웹을 위한 컨스트레인츠 575

__헤더 영역의 컨스트레인츠 575 / 푸터 영역의 컨스트레인츠 578 / 사이즈별로 처리하기 580

LESSON 03 데스크톱 프로토타입 585

__메인 메뉴 제작 585 / 메인 이미지 제작 599 / 탭 바 제작 606 / 영상 재생 611 / 슬라이드 제작 617

LESSON 04 모바일 프로토타입 624

__메인 이미지 제작 624 / 캐러셀 제작 630 / 드로어 제작 636

LESSON 05 핸드오프 전 체크할 사항 643

__레이어 정리 643 / 컴포넌트 및 그룹 확인 644 / 수치와 영역 644 / 내보내기 645

 

제이펍 소식 더 보기(제이펍의 소통 채널에서 더욱 다양한 소식을 확인하세요!)

블로그  유튜브  인스타그램  트위터  페이스북