상세정보
미리보기
맛있는 디자인 피그마 with AI
- 저자
- 이영주 저
- 출판사
- 한빛미디어
- 출판일
- 2026-02-23
- 등록일
- 2026-04-30
- 파일포맷
- PDF
- 파일크기
- 45MB
- 공급사
- YES24
- 지원기기
-
PC
PHONE
TABLET
웹뷰어
프로그램 수동설치
뷰어프로그램 설치 안내
책소개
<b>피그마와 AI 기능을 활용해 디자인 시스템을 완성해보세요!</b></br><b>한 권으로, 한번에! 쉽고 빠르게 익혀 바로 써먹는 UI/UX 디자인 입문서!</b></br></br>UI/UX 디자인의 핵심 도구인 피그마를 이 책 한 권으로 제대로 배울 수 있습니다. 단순히 기능을 나열하지 않고, 실제 화면을 직접 만들어보며 디자인 시스템의 흐름을 자연스럽게 이해하도록 구성했습니다. 파운데이션 설계부터 컴포넌트 구성, 베리어블(Variables), 반응형과 모드 적용까지 최신 버전에 맞춰 실무에 바로 활용할 수 있는 구조로 정리했습니다. 여기에 피그마의 AI 기능까지 더해 반복 작업은 줄이고 더 빠르고 효율적으로 결과물을 완성하는 방법을 함께 익힐 수 있습니다.</br></br>기본 기능 익히기부터 디자인 시스템 구축까지 완성하는 3단계 학습법인 [기능 실습] - [한눈에 실습] - [실무 실습] 구성은, 처음 배우는 독자도 흐름을 놓치지 않고 따라올 수 있도록 도와줍니다. 특히 기초 입문 내용은 동영상 강의를 통해 책과 함께 학습할 수 있습니다. 화면을 만들고, 구조를 설계하고, 실제 서비스 화면을 완성하는 과정을 차근차근 경험하다 보면 어느새 피그마를 제대로 이해하고 실무에 자신 있게 적용할 수 있게 될 것입니다.</br></br>빠르게 예제 소스 다운로드하기: www.hanbit.co.kr/src/51018</br></br>어떤 독자를 위한 책인가?</br>- 디자인 시스템을 처음부터 체계적으로 배우고 싶은 예비 UI/UX 디자이너</br>- 컴포넌트와 베리어블(Variables)을 제대로 이해하고 싶은 1~3년 차 주니어 디자이너</br>- 실무에서 반응형, 모드(Dark/Light), 구조 설계를 직접 다뤄야 하는 프로덕트 디자이너</br>- 피그마를 사용하고 있지만 기능 위주로만 써온, 구조 설계까지 확장하고 싶은 디자이너</br>- AI 기능을 활용해 반복 작업을 줄이고 디자인 효율을 높이고 싶은 실무자</br>- 퍼블리셔, 기획자, 개발자 등 협업을 위해 디자인 시스템의 구조를 이해해야 하는 실무자</br>- 기존에 피그마를 몇 번 다뤄봤지만 기초부터 디자인 시스템까지 흐름을 다시 정리하고 싶은 초급자
저자소개
Western Sydney University에서 Digital Media를 전공했으며 홍익대학교대학원에서 UX전공 박사과정을 수료하고 청운대학교 멀티미디어학과 교수로 재직 중입니다. 주요 저서로는 한빛아카데미(주)에서 출간한 『UI/UX 디자인이 쉬워지는 디자인 시스템 실무 with 피그마(2024)』, 『UI/UX 디자인 이론과 실무 with 어도비 XD(2022)』, 『모바일 UI/UX 디자인 실무(2020)』, 『UI/UX 디자인 이론과 실습 with Adobe XD(2020)』, 『UI 디자인과 프로토타이핑을 위한 Adobe XD(2020)』, 『design school 포토샵 CC 2019(2020)』, 『design school 일러스트레이터 CC(2020)』 등 다수가 있습니다.
목차
머리말</br>맛있게 학습하기</br>3단계 학습 구성&동영상 강의 학습</br>예제&완성 파일 다운로드</br>맛있는 디자인, 미리 맛보기</br></br>PART 01. 쉽고 빠른 피그마 레시피</br>_CHAPTER 01. 피그마 시작하기</br>__LESSON 01. 반갑다, 피그마 : 피그마는 무엇이고 어디에 쓰이는가</br>___피그마가 사랑받는 이유</br>___피그마의 다양한 제품과 사용자</br></br>__LESSON 02. 피그마 가입하기 : 피그마 계정 만들고 요금 정책 알아보기</br>___[간단 실습] 피그마 계정 만들기</br>___피그마의 다양한 플랜과 요금 정책</br>___유료 플랜을 무료로 활용하는 방법(교육용 플랜)</br>___[간단 실습] 피그마 데스크톱 앱 설치하기</br></br>__LESSON 03. 피그마, 어떻게 생겼지 : 피그마 홈 화면과 디자인 인터페이스 알아보기</br>___피그마 홈 화면</br>___피그마 디자인 작업 화면</br>___메뉴 영역 살펴보기</br>___도구바 살펴보기</br>___디자인 모드의 도구 자세히 알아보기</br>___AI 기능 살펴보기</br></br>_CHAPTER 02. 피그마 도구 익히기</br>__LESSON 01. 작업 화면 만들기 : 프레임 도구</br>___프레임 도구</br>___[간단 실습] 프레임 도구로 작업 화면(프레임) 만들기</br></br>__LESSON 02. 가장 많이 쓰는 기본 도형 다루기 : 사각형, 원 도구</br>___[간단 실습] 사각형 그리기</br>___[간단 실습] 원 그리기</br></br>__LESSON 03. 다양하게 활용되는 도형 만들기 : 다각형, 별 도구</br>___[간단 실습] 다각형 그리기</br>___[간단 실습] 별 그리기</br></br>__LESSON 04. 정보 흐름을 표현하기 : 선, 화살표 도구</br>___[간단 실습] 선 그리기</br>___[간단 실습] 점선 그리기</br>___[간단 실습] 화살표 그리기</br></br>__LESSON 05. 자유로운 곡선과 경로 만들기 : 펜 도구</br>___[간단 실습] 직선 그리기</br>___[간단 실습] 45 직선 그리기</br>___[간단 실습] 곡선 그리기</br>___[간단 실습] 반원 형태의 곡선 그리기</br>___[간단 실습] 방향이 같은 반원 그리기</br></br>__LESSON 06. 글자 입력하고 스타일 설정하기 : 텍스트 도구</br>___[간단 실습] 한 줄 텍스트 입력하기</br>___[간단 실습] 여러 줄 텍스트 입력하고 글 줄이기</br></br>PART 02. 피그마 제대로 활용하기</br>_CHAPTER 01. 피그마 기초 기능 익히기</br>__LESSON 01. 컬러와 그라데이션 : 색을 적용하고 자연스럽게 변화시키기</br>___[간단 실습] 도형에 색 적용하기</br>___[간단 실습] 클릭 한 번으로 색 적용하기</br>___[간단 실습] 색에 투명도 적용하기</br>___[간단 실습] 선형 그라데이션 사용하기</br>___[간단 실습] 선형 그라데이션에 중지점 추가하고 삭제하기</br>___[간단 실습] 선형 그라데이션에 중지점 이동하고 반전하기</br>___[간단 실습] 방사형 그라데이션 적용하기</br>___[간단 실습] 방사형 그라데이션 형태, 위치 변경하기</br>___[한눈에 실습] 각도형 그라데이션 적용하기</br>___[한눈에 실습] 다이아몬드 그라데이션 활용하기</br></br>__LESSON 02. 스타일 등록과 활용 : 자주 쓰는 컬러, 타이포그래피, 그라데이션을 빠르게 관리하기</br>___[간단 실습] 스타일 준비 파일 불러오기</br>___[간단 실습] 컬러 스타일 등록하기</br>___[간단 실습] 다른 요소에 컬러 스타일 적용하기</br>___[간단 실습] 등록한 컬러 스타일 수정하기</br>___[간단 실습] 스타일 수정하고 그룹으로 만들기</br>___[간단 실습] 텍스트 스타일 등록하고 적용하기</br></br>__LESSON 03. 이미지의 활용 : 자르기, 비율 조정, AI 활용하여 보정하기</br>___[간단 실습] 파일 불러와 이미지 삽입하기</br>___[간단 실습] 한 번에 이미지 삽입하기</br>___[간단 실습] 도형에 이미지 삽입하기</br>___[간단 실습] 이미지 교체하기</br>___[간단 실습] 플러그인 활용해서 이미지 가져오기</br></br>__LESSON 04. 정렬과 스마트 셀렉션 : 자동 정렬로 도형을 깔끔하게 배치하기</br>___[간단 실습] 도형 정렬하기 세로선에 맞춰 정렬하기</br>___[간단 실습] 도형 정렬하기 가로선에 맞춰 정렬하기</br>___[간단 실습] 여러 개의 도형을 한 번에 정렬하기</br>___[간단 실습] 스마트 셀렉션으로 도형 간격 한 번에 맞추기</br></br>_CHAPTER 02. 피그마 AI 기능 활용하기</br>__LESSON 01. 이미지 편집 AI : 만들고, 지우고, 다듬기</br>___[간단 실습] 프롬프트로 이미지 만들기</br>___[간단 실습] 이미지 배경 간단하게 제거하기</br>___[간단 실습] 해상도 높여 이미지 선명하기 만들기</br>___[간단 실습] AI로 이미지 빠르게 편집하기</br></br>__LESSON 02. 디자인 도구 AI : UI 작업을 빠르게 완성하기</br>___[간단 실습] First Draft로 UI 화면 자동 생성하기</br>___[간단 실습] 이미지 또는 선택 항목으로 유사 에셋 찾기</br>___[간단 실습] 상호 작용 추가로 프로토타입 자동 구성하기</br>___[간단 실습] 콘텐츠 대체로 텍스트 한 번에 변경하기</br>___[간단 실습] 레이어 이름 한 번에 정리하기</br></br>__LESSON 03. 텍스트 AI : 쓰고, 고치고, 번역하기</br>___[간단 실습] 번역하기 기능으로 다른 언어 텍스트 만들기</br>___[간단 실습] 다시 쓰기와 줄이기 기능으로 문장 다듬기</br></br>_CHAPTER 03. 디자인이 무너지지 않는 피그마 핵심 기능</br>__LESSON 01. 컨스트레인트 : 화면 크기에 따라 반응하는 UI 만들기</br>___[간단 실습] 컨스트레인트로 반응형 화면 만들기</br></br>__LESSON 02. 오토레이아웃 : 반복 작업을 자동화하는 레이아웃 구조 만들기</br>___[간단 실습] 오토레이아웃으로 기본 구조 적용하기</br>___[간단 실습] 간격과 정렬을 자동으로 관리하기</br>___[간단 실습] 위치 설정으로 레이아웃 흐름 제어하기</br>___[간단 실습] 리사이징 옵션으로 크기 변화 대응하기</br>___[간단 실습] 오토레이아웃 제안 이해하고 해제하기</br>___[간단 실습] 독립 배치로 오토레이아웃 무시하기</br></br>__LESSON 03. 컴포넌트와 인스턴스 : 일관성 있는 UI 유지하기</br>___[간단 실습] 컴포넌트와 인스턴스 만들기</br>___[간단 실습] 인스턴스 수정하여 반복 요소 효율적으로 관리하기</br></br>__LESSON 04. 베리언트 : 버튼과 UI 상태 한 번에 관리하기</br>___[간단 실습] 베리언트 활용하기</br></br>PART 03. 실제 디자인으로 이해하는 디자인 시스템 기초</br>_CHAPTER 01. 디자인 시스템, 왜 필요할까?</br>__LESSON 01. 디자인 시스템이란 무엇인가 : 반복되는 디자인을 하나의 기준으로 묶는 방법</br>___디자인 시스템이 만들어진 이유</br>___디자인 시스템의 개념과 범위</br>___디자인 시스템이 필요한 이유</br></br>__LESSON 02. 디자인 시스템의 구조와 구성 요소 : 실무에서 사용하는 구축 흐름과 단계 이해하기</br>___디자인 시스템의 구조</br>___디자인 시스템의 구성 요소</br>___디자인 시스템 방법론</br></br>__LESSON 03. 디자인 토큰과 베리어블 : 반복되는 디자인 값을 하나로 관리하는 시스템 만들기</br>___디자인 토큰</br>___베리어블 개념과 역할</br>___베리어블의 구조</br>___베리어블의 네이밍</br></br>_CHAPTER 02. 파운데이션 만들기</br>__LESSON 01. 베리어블로 파운데이션 관리하기 : 반복되는 컬러 값 관리하기</br>___베리어블 인터페이스 알아보기</br>___베리어블에 컬러 등록하고 모드 적용하기</br></br>__LESSON 02. 컬러 시스템 구성하기 : 베리어블로 일관된 컬러 구조 만들기</br>___컬러 베리어블 등록 흐름 이해하기</br>___RAW 컬렉션 등록하기</br>___Primitive 컬렉션 등록하기</br>___Semantic 컬렉션 등록하기</br>___컬러 베리어블의 범위(Scope) 설정</br></br>__LESSON 03. 단위 : 일관된 레이아웃을 위한 단위 시스템 이해하기</br>___기본 단위의 설정</br>___단위 설정하기</br>___간격 단위 지정하기</br>___테두리 단위 지정하기</br>___단위의 범위(Scope) 설정하기</br></br>__LESSON 04. 타이포그래피 : 폰트 패밀리부터 모드, 단위까지 한 번에 정리하기</br>___타이포그래피의 베리어블</br>___타이포그래피 설정하기</br>___Font family 베리어블 구성하기</br>___Font Weight 베리어블 구성하기</br>___Font Size 베리어블 구성하기</br>___Line height 베리어블 구성하기</br>___타이포그래피 모드 구성하기</br>___타이포그래피의 범위(Scope) 설정</br></br>__LESSON 05. 아이코노그래피 : 아이콘 시스템 구축하고 재사용하기</br>___커뮤니티 활용해 아이콘 선택하기</br>___아이콘 등록하기</br>___아이콘을 베리어블 등록하고 활용하기</br></br>__LESSON 06. 엘리베이션 : 깊이와 위계를 만드는 그림자 시스템 설계하기</br>___엘리베이션이란</br>___엘리베이션 구성하기</br>___그림자 옵션 적용하기</br>___스타일 등록하고 적용하기</br></br>__LESSON 07. 컬러 모드 설계하기 : 파운데이션 요소 정리하여 완성하기</br>___컬러 모드 구성하여 라이트, 다크 환경 완성하기</br>___파운데이션의 정리</br></br>PART 04. 디자인 시스템 실무</br>_CHAPTER 01. 컴포넌트의 구성</br>__LESSON 01. 버튼 컴포넌트 설계하기 : 디자인 시스템으로 완성하는 버튼 디자인하기</br>___컴포넌트와 디자인 시스템의 기본 구조 이해하기</br>___베리언트로 컴포넌트 속성 제어하기</br>___기본 버튼 만들기</br>___버튼의 베리어블 속성 지정하기</br>___컴포넌트 세트 속성 만들기</br>___컴포넌트 세트 스타일 만들기</br></br>__LESSON 02. 인풋 필드 컴포넌트 설계하기 : 입력 요소 정의하고 컴포넌트 세트 구성하기</br>___인풋 필드 이해하기</br>___레이블 만들기</br>___헬퍼 텍스트 만들기</br>___입력 필드 만들기</br>___입력 필드 컴포넌트 세트 만들기</br>___인풋 필드 세트 만들기</br></br>__LESSON 03. 아바타 컴포넌트 설계하기 : 아바타 요소 정의하고 아바타 세트 구성하기</br>___아바타 만들기</br>___아바타 세트 만들기</br></br>__LESSON 04. 진행 바 컴포넌트 설계하기 : 상태 변화를 표현하는 진행 UI 구성하기</br>___진행 바 만들기</br></br>__LESSON 05. 탭 컴포넌트 설계하기 : 선택 상태 정의하고 탭 세트 구성하기</br>___탭 만들기</br></br>__LESSON 06. 내비게이션 드로워 컴포넌트 설계하기 : 메뉴 세트 구성하고 드로워 UI 완성하기</br>___메뉴 세트 만들기</br>___내비게이션 드로워 세트 만들기</br></br>__LESSON 07. 카드 컴포넌트 설계하기 : 디스플레이 카드 만들고 콘텐츠 구조 완성하기</br>___디스플레이 카드 만들기</br>___콘텐츠 카드 만들기</br></br>_CHAPTER 02. 디자인 시스템과 베리어블의 적용</br>__LESSON 01. 글로벌 내비게이션 : 상단 구조 설계하기</br>___클론 디자인</br>___상단 글로벌 내비게이션 영역 만들기</br></br>__LESSON 02. 디바이더 : 콘텐츠 흐름을 구분하는 요소 만들기</br>___디바이더 만들기</br></br>__LESSON 03. 내비게이션 드로워 : 사이드 메뉴 구조 만들고 상태별 설계하기</br>___내비게이션 드로워 클론 디자인하기</br></br>__LESSON 04. 탭 메뉴 : 상태와 스타일을 고려해 탭 UI 구성하기</br>___탭 메뉴 구성하기</br></br>__LESSON 05. 페이지 : GNB, 드로워, 바디 영역 결합하기</br>___페이지 만들기</br></br>__LESSON 06. 콘텐츠 구성 : 카드 컴포넌트로 바디 콘텐츠 구현하기</br>___바디 콘텐츠 구현하기</br></br>__LESSON 07. 반응형과 모드 : 변수와 모드로 완성하는 실무 UI</br>___반응형 구현하기</br>___Dark 모드 구현하기</br></br>찾아보기
[1].png){kind=logo}
