피그마와 AI 기능을 활용해 디자인 시스템을 완성해보세요!
한 권으로, 한번에! 쉽고 빠르게 익혀 바로 써먹는 UI/UX 디자인 입문서!

UI/UX 디자인의 핵심 도구인 피그마를 이 책 한 권으로 제대로 배울 수 있습니다. 단순히 기능을 나열하지 않고, 실제 화면을 직접 만들어보며 디자인 시스템의 흐름을 자연스럽게 이해하도록 구성했습니다. 파운데이션 설계부터 컴포넌트 구성, 베리어블(Variables), 반응형과 모드 적용까지 최신 버전에 맞춰 실무에 바로 활용할 수 있는 구조로 정리했습니다. 여기에 피그마의 AI 기능까지 더해 반복 작업은 줄이고 더 빠르고 효율적으로 결과물을 완성하는 방법을 함께 익힐 수 있습니다.

기본 기능 익히기부터 디자인 시스템 구축까지 완성하는 3단계 학습법인 [기능 실습] – [한눈에 실습] – [실무 실습] 구성은, 처음 배우는 독자도 흐름을 놓치지 않고 따라올 수 있도록 도와줍니다. 특히 기초 입문 내용은 동영상 강의를 통해 책과 함께 학습할 수 있습니다. 화면을 만들고, 구조를 설계하고, 실제 서비스 화면을 완성하는 과정을 차근차근 경험하다 보면 어느새 피그마를 제대로 이해하고 실무에 자신 있게 적용할 수 있게 될 것입니다.

빠르게 예제 소스 다운로드하기: https://www.hanbit.co.kr/src/51018

머리말
맛있게 학습하기
3단계 학습 구성&동영상 강의 학습
예제&완성 파일 다운로드
맛있는 디자인, 미리 맛보기

PART 01. 쉽고 빠른 피그마 레시피
 

_CHAPTER 01. 피그마 시작하기
__LESSON 01. 반갑다, 피그마 : 피그마는 무엇이고 어디에 쓰이는가
___피그마가 사랑받는 이유
___피그마의 다양한 제품과 사용자

__LESSON 02. 피그마 가입하기 : 피그마 계정 만들고 요금 정책 알아보기
___[간단 실습] 피그마 계정 만들기
___피그마의 다양한 플랜과 요금 정책
___유료 플랜을 무료로 활용하는 방법(교육용 플랜)
___[간단 실습] 피그마 데스크톱 앱 설치하기

__LESSON 03. 피그마, 어떻게 생겼지 : 피그마 홈 화면과 디자인 인터페이스 알아보기
___피그마 홈 화면
___피그마 디자인 작업 화면
___메뉴 영역 살펴보기
___도구바 살펴보기
___디자인 모드의 도구 자세히 알아보기
___AI 기능 살펴보기

_CHAPTER 02. 피그마 도구 익히기
__LESSON 01. 작업 화면 만들기 : 프레임 도구
___프레임 도구
___[간단 실습] 프레임 도구로 작업 화면(프레임) 만들기

__LESSON 02. 가장 많이 쓰는 기본 도형 다루기 : 사각형, 원 도구
___[간단 실습] 사각형 그리기
___[간단 실습] 원 그리기

__LESSON 03. 다양하게 활용되는 도형 만들기 : 다각형, 별 도구
___[간단 실습] 다각형 그리기
___[간단 실습] 별 그리기

__LESSON 04. 정보 흐름을 표현하기 : 선, 화살표 도구
___[간단 실습] 선 그리기
___[간단 실습] 점선 그리기
___[간단 실습] 화살표 그리기

__LESSON 05. 자유로운 곡선과 경로 만들기 : 펜 도구
___[간단 실습] 직선 그리기
___[간단 실습] 45° 직선 그리기
___[간단 실습] 곡선 그리기
___[간단 실습] 반원 형태의 곡선 그리기
___[간단 실습] 방향이 같은 반원 그리기

__LESSON 06. 글자 입력하고 스타일 설정하기 : 텍스트 도구
___[간단 실습] 한 줄 텍스트 입력하기
___[간단 실습] 여러 줄 텍스트 입력하고 글 줄이기

PART 02. 피그마 제대로 활용하기
 

_CHAPTER 01. 피그마 기초 기능 익히기
__LESSON 01. 컬러와 그라데이션 : 색을 적용하고 자연스럽게 변화시키기
___[간단 실습] 도형에 색 적용하기
___[간단 실습] 클릭 한 번으로 색 적용하기
___[간단 실습] 색에 투명도 적용하기
___[간단 실습] 선형 그라데이션 사용하기
___[간단 실습] 선형 그라데이션에 중지점 추가하고 삭제하기
___[간단 실습] 선형 그라데이션에 중지점 이동하고 반전하기
___[간단 실습] 방사형 그라데이션 적용하기
___[간단 실습] 방사형 그라데이션 형태, 위치 변경하기
___[한눈에 실습] 각도형 그라데이션 적용하기
___[한눈에 실습] 다이아몬드 그라데이션 활용하기

__LESSON 02. 스타일 등록과 활용 : 자주 쓰는 컬러, 타이포그래피, 그라데이션을 빠르게 관리하기
___[간단 실습] 스타일 준비 파일 불러오기
___[간단 실습] 컬러 스타일 등록하기
___[간단 실습] 다른 요소에 컬러 스타일 적용하기
___[간단 실습] 등록한 컬러 스타일 수정하기
___[간단 실습] 스타일 수정하고 그룹으로 만들기
___[간단 실습] 텍스트 스타일 등록하고 적용하기

__LESSON 03. 이미지의 활용 : 자르기, 비율 조정, AI 활용하여 보정하기
___[간단 실습] 파일 불러와 이미지 삽입하기
___[간단 실습] 한 번에 이미지 삽입하기
___[간단 실습] 도형에 이미지 삽입하기
___[간단 실습] 이미지 교체하기
___[간단 실습] 플러그인 활용해서 이미지 가져오기

__LESSON 04. 정렬과 스마트 셀렉션 : 자동 정렬로 도형을 깔끔하게 배치하기
___[간단 실습] 도형 정렬하기 ① 세로선에 맞춰 정렬하기
___[간단 실습] 도형 정렬하기 ② 가로선에 맞춰 정렬하기
___[간단 실습] 여러 개의 도형을 한 번에 정렬하기
___[간단 실습] 스마트 셀렉션으로 도형 간격 한 번에 맞추기

_CHAPTER 02. 피그마 AI 기능 활용하기
__LESSON 01. 이미지 편집 AI : 만들고, 지우고, 다듬기
___[간단 실습] 프롬프트로 이미지 만들기
___[간단 실습] 이미지 배경 간단하게 제거하기
___[간단 실습] 해상도 높여 이미지 선명하기 만들기
___[간단 실습] AI로 이미지 빠르게 편집하기

__LESSON 02. 디자인 도구 AI : UI 작업을 빠르게 완성하기
___[간단 실습] First Draft로 UI 화면 자동 생성하기
___[간단 실습] 이미지 또는 선택 항목으로 유사 에셋 찾기
___[간단 실습] 상호 작용 추가로 프로토타입 자동 구성하기
___[간단 실습] 콘텐츠 대체로 텍스트 한 번에 변경하기
___[간단 실습] 레이어 이름 한 번에 정리하기

__LESSON 03. 텍스트 AI : 쓰고, 고치고, 번역하기
___[간단 실습] 번역하기 기능으로 다른 언어 텍스트 만들기
___[간단 실습] 다시 쓰기와 줄이기 기능으로 문장 다듬기

_CHAPTER 03. 디자인이 무너지지 않는 피그마 핵심 기능
__LESSON 01. 컨스트레인트 : 화면 크기에 따라 반응하는 UI 만들기
___[간단 실습] 컨스트레인트로 반응형 화면 만들기

__LESSON 02. 오토레이아웃 : 반복 작업을 자동화하는 레이아웃 구조 만들기
___[간단 실습] 오토레이아웃으로 기본 구조 적용하기
___[간단 실습] 간격과 정렬을 자동으로 관리하기
___[간단 실습] 위치 설정으로 레이아웃 흐름 제어하기
___[간단 실습] 리사이징 옵션으로 크기 변화 대응하기
___[간단 실습] 오토레이아웃 제안 이해하고 해제하기
___[간단 실습] 독립 배치로 오토레이아웃 무시하기

__LESSON 03. 컴포넌트와 인스턴스 : 일관성 있는 UI 유지하기
___[간단 실습] 컴포넌트와 인스턴스 만들기
___[간단 실습] 인스턴스 수정하여 반복 요소 효율적으로 관리하기

__LESSON 04. 베리언트 : 버튼과 UI 상태 한 번에 관리하기
___[간단 실습] 베리언트 활용하기

PART 03. 실제 디자인으로 이해하는 디자인 시스템 기초
 

_CHAPTER 01. 디자인 시스템, 왜 필요할까?
__LESSON 01. 디자인 시스템이란 무엇인가 : 반복되는 디자인을 하나의 기준으로 묶는 방법
___디자인 시스템이 만들어진 이유
___디자인 시스템의 개념과 범위
___디자인 시스템이 필요한 이유

__LESSON 02. 디자인 시스템의 구조와 구성 요소 : 실무에서 사용하는 구축 흐름과 단계 이해하기
___디자인 시스템의 구조
___디자인 시스템의 구성 요소
___디자인 시스템 방법론

__LESSON 03. 디자인 토큰과 베리어블 : 반복되는 디자인 값을 하나로 관리하는 시스템 만들기
___디자인 토큰
___베리어블 개념과 역할
___베리어블의 구조
___베리어블의 네이밍

_CHAPTER 02. 파운데이션 만들기
__LESSON 01. 베리어블로 파운데이션 관리하기 : 반복되는 컬러 값 관리하기
___베리어블 인터페이스 알아보기
___베리어블에 컬러 등록하고 모드 적용하기

__LESSON 02. 컬러 시스템 구성하기 : 베리어블로 일관된 컬러 구조 만들기
___컬러 베리어블 등록 흐름 이해하기
___RAW 컬렉션 등록하기
___Primitive 컬렉션 등록하기
___Semantic 컬렉션 등록하기
___컬러 베리어블의 범위(Scope) 설정

__LESSON 03. 단위 : 일관된 레이아웃을 위한 단위 시스템 이해하기
___기본 단위의 설정
___단위 설정하기
___간격 단위 지정하기
___테두리 단위 지정하기
___단위의 범위(Scope) 설정하기

__LESSON 04. 타이포그래피 : 폰트 패밀리부터 모드, 단위까지 한 번에 정리하기
___타이포그래피의 베리어블
___타이포그래피 설정하기
___Font family 베리어블 구성하기
___Font Weight 베리어블 구성하기
___Font Size 베리어블 구성하기
___Line height 베리어블 구성하기
___타이포그래피 모드 구성하기
___타이포그래피의 범위(Scope) 설정

__LESSON 05. 아이코노그래피 : 아이콘 시스템 구축하고 재사용하기
___커뮤니티 활용해 아이콘 선택하기
___아이콘 등록하기
___아이콘을 베리어블 등록하고 활용하기

__LESSON 06. 엘리베이션 : 깊이와 위계를 만드는 그림자 시스템 설계하기
___엘리베이션이란
___엘리베이션 구성하기
___그림자 옵션 적용하기
___스타일 등록하고 적용하기

__LESSON 07. 컬러 모드 설계하기 : 파운데이션 요소 정리하여 완성하기
___컬러 모드 구성하여 라이트, 다크 환경 완성하기
___파운데이션의 정리

PART 04. 디자인 시스템 실무
 

_CHAPTER 01. 컴포넌트의 구성
__LESSON 01. 버튼 컴포넌트 설계하기 : 디자인 시스템으로 완성하는 버튼 디자인하기
___컴포넌트와 디자인 시스템의 기본 구조 이해하기
___베리언트로 컴포넌트 속성 제어하기
___기본 버튼 만들기
___버튼의 베리어블 속성 지정하기
___컴포넌트 세트 속성 만들기
___컴포넌트 세트 스타일 만들기

__LESSON 02. 인풋 필드 컴포넌트 설계하기 : 입력 요소 정의하고 컴포넌트 세트 구성하기
___인풋 필드 이해하기
___레이블 만들기
___헬퍼 텍스트 만들기
___입력 필드 만들기
___입력 필드 컴포넌트 세트 만들기
___인풋 필드 세트 만들기

__LESSON 03. 아바타 컴포넌트 설계하기 : 아바타 요소 정의하고 아바타 세트 구성하기
___아바타 만들기
___아바타 세트 만들기

__LESSON 04. 진행 바 컴포넌트 설계하기 : 상태 변화를 표현하는 진행 UI 구성하기
___진행 바 만들기

__LESSON 05. 탭 컴포넌트 설계하기 : 선택 상태 정의하고 탭 세트 구성하기
___탭 만들기

__LESSON 06. 내비게이션 드로워 컴포넌트 설계하기 : 메뉴 세트 구성하고 드로워 UI 완성하기
___메뉴 세트 만들기
___내비게이션 드로워 세트 만들기

__LESSON 07. 카드 컴포넌트 설계하기 : 디스플레이 카드 만들고 콘텐츠 구조 완성하기
___디스플레이 카드 만들기
___콘텐츠 카드 만들기

_CHAPTER 02. 디자인 시스템과 베리어블의 적용
__LESSON 01. 글로벌 내비게이션 : 상단 구조 설계하기
___클론 디자인
___상단 글로벌 내비게이션 영역 만들기

__LESSON 02. 디바이더 : 콘텐츠 흐름을 구분하는 요소 만들기
___디바이더 만들기

__LESSON 03. 내비게이션 드로워 : 사이드 메뉴 구조 만들고 상태별 설계하기
___내비게이션 드로워 클론 디자인하기

__LESSON 04. 탭 메뉴 : 상태와 스타일을 고려해 탭 UI 구성하기
___탭 메뉴 구성하기

__LESSON 05. 페이지 : GNB, 드로워, 바디 영역 결합하기
___페이지 만들기

__LESSON 06. 콘텐츠 구성 : 카드 컴포넌트로 바디 콘텐츠 구현하기
___바디 콘텐츠 구현하기

__LESSON 07. 반응형과 모드 : 변수와 모드로 완성하는 실무 UI
___반응형 구현하기
___Dark 모드 구현하기

찾아보기

어떤 독자를 위한 책인가?

- 디자인 시스템을 처음부터 체계적으로 배우고 싶은 예비 UI/UX 디자이너
- 컴포넌트와 베리어블(Variables)을 제대로 이해하고 싶은 1~3년 차 주니어 디자이너
- 실무에서 반응형, 모드(Dark/Light), 구조 설계를 직접 다뤄야 하는 프로덕트 디자이너
- 피그마를 사용하고 있지만 기능 위주로만 써온, 구조 설계까지 확장하고 싶은 디자이너
- AI 기능을 활용해 반복 작업을 줄이고 디자인 효율을 높이고 싶은 실무자
- 퍼블리셔, 기획자, 개발자 등 협업을 위해 디자인 시스템의 구조를 이해해야 하는 실무자
- 기존에 피그마를 몇 번 다뤄봤지만 기초부터 디자인 시스템까지 흐름을 다시 정리하고 싶은 초급자
 

이 책의 특징 (출판사 리뷰)

10년 연속 그래픽 분야 1위!
78만 독자가 선택한 믿고 보는 시리즈
* 교보문고, 알라딘, 예스24, 인터파크_IT/컴퓨터/그래픽 분야 시리즈 1위(2016~2025년 집계 기준)

<맛있는 디자인>을 먼저 만나본 독자들의 솔직한 평가를 확인해보세요!
[이봄 님] 비전공자의 눈높이에서 각 기능, 이미지 사이즈 조절 및 개체 선택 등 기본적인 부분부터 차근차근 알려주어 큰 도움이 됩니다. 어렵게만 느껴졌던 이미지 합성부터 보정, 톤 조절까지 쉽게 배울 수 있어 좋습니다!
[배소은 님] 입문용으로는 '맛있는 디자인 시리즈'를 선택하지 않을 이유가 없지 않을까 싶습니다. 쉬운 설명 덕분에 수월하게 완독할 수 있었고 실용적인 예제만 쏙쏙 뽑아 구성되어 있어요!
[강민석 님] 일반인도 쉽게 배울 수 있는 '맛있는 디자인 시리즈'는 저 같은 직장인이 틈틈이 공부하기 좋은 교과서입니다. 기본 입문서로 강력하게 추천합니다.

1. 파운데이션부터 반응형, 모드까지, 따라 하며 완성하는 디자인 시스템
피그마의 기능을 나열하는 데 그치지 않고 파운데이션 설계부터 컴포넌트, 베리어블(Variables), 반응형과 모드 적용까지 디자인 시스템의 흐름을 직접 구현합니다. 토큰을 정의하고 컬러와 타이포그래피를 정리하여 컴포넌트를 세트로 구성한 뒤, 실제 화면에 적용하는 과정을 단계별로 따라가며 자연스럽게 디자인 시스템 구조를 익힐 수 있도록 돕습니다. 단순히 만드는 것이 아니라 무너지지 않는 시스템을 설계하는 방법을 익히게 됩니다.

2. AI를 도구처럼 쓰는 현실적인 실무 활용법
피그마의 AI 기능을 단순 체험이 아니라 실무 보조 도구로 활용하는 방법을 다룹니다. 반복 작업을 줄이고 아이디어 탐색과 시안 제작 속도를 높이며, 이미지와 텍스트 생성 기능을 작업 흐름 안에 자연스럽게 녹여냅니다. AI에 의존하지 않고 AI가 실행을 돕는 구조를 통해 실전에서 바로 활용할 수 있는 현실적인 활용법을 제시합니다.

3. 동영상 강의와 함께 하는 3단계 학습 구성
[기능 실습] – [한눈에 실습] – [실무 실습]의 3단계 구성으로 기초부터 실무까지 흐름을 놓치지 않고 학습할 수 있습니다. 간단한 기초 기능을 먼저 익히고 핵심 예제로 구조를 이해한 뒤, 실제 서비스 화면을 완성해보는 단계로 학습합니다. 여기에 책의 내용을 보완하는 동영상 강의까지 제공하여 복잡한 과정도 눈으로 확인하며 따라 할 수 있습니다. 혼자 학습해도 끝까지 완주할 수 있도록 돕는 체계적인 학습 구조입니다.