홈앤서비스 SK BROADBAND

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

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

빠르게 예제 소스 다운로드하기: 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 모드 구현하기

찾아보기