피그마 with AI

신승희 저자 지음

길벗캠퍼스 2025년 08월 29일 출간 국내도서 : 2025년 08월 29일 출간

작품소개

책소개

피그마는 디자이너뿐 아니라, 팀 프로젝트를 수행하는 학생, 비주얼 기획이 필요한 실무자, 콘텐츠 제작을 담당하는 다양한 분야의 사용자에게 직관적이고 강력한 도구이며, 협업 중심의 워크 플로와 생산성을 극대화하는 기능을 갖춘 디자인 도구로서 실무 프로젝트에 즉시 적용 가능한 실질적인 역량을 기르기에 적합니다.

《UX/UI 디자인을 위한 피그마 with AI》는 디지털 디자인의 표준으로 자리 잡은 피그마를 이용하면서도 디자인의 본질은 손재주보다 설계력이 있으며, 이 도구를 통해 어떤 창의성과 문제 해결력을 이끌어 낼 수 있는 알려주는 책입니다.

피그마의 강력한 AI 기능을 바탕으로, 디자이너의 손을 덜어주고 머리를 더 쓰게 만드는 방법, 즉 ‘창의적인 고민’에 집중할 수 있는 환경을 만들어주는 도구로서의 피그마를 소개합니다.

이제 막 피그마를 시작하는 분도, 이미 사용 중인 분도, 《UX/UI 디자인을 위한 피그마 with AI》를 통해 한 걸음 더 나아갈 수 있습니다.

목차

WEEK 01 AI로 똑똑! 피그마 AI를 학습하기 전에
1.1 피그마, 왜 대세일까?
01 협업 디자인의 신세계, 클라우드 실시간 협업으로 팀플 걱정 끝!
02 다양한 플랫폼, 원활한 호환성 머릿 속 아이디어를 현실로!
03 UX/UI 디자인에 최적화된 워크 플로
04 AI와 커뮤니티, 플러그인의 강력한 생태계
05 발표 자료? 피그마 슬라이드로 뚝딱!
1.2 반가워! 피그마 AI 설치 가이드
01 피그마 요금 정책 알아보기
02 피그마 계정 만들기
1.3 피그마의 날개가 되어준 AI
01 AI 기능 살펴보기
02 AI 기능, 어떻게 활용할까
03 사용하면 유용한 AI 플러그인 Top 10
연습 문제

WEEK 02 피그마 인터페이스 한눈에 살펴보기
2.1 피그마 기본 화면 이해하기
01 피그마 홈 화면 살펴보기
02 피그마 작업 화면 살펴보기
2.2 툴바 이해하기
01 디자인 모드 툴바
02 드로우 모드 툴바
03 개발자 모드 툴바
2.3 작업창의 패널 완전 정복!
01 Left 패널: 파일과 에셋 관리하기
02 Right 패널: 디자인, 프로토타입, 인스펙트 기능 살펴보기
2.4 효율적인 작업을 위한 단축키 알아보기
01 유용한 단축키 알아보기
연습 문제

WEEK 03 기초 그리기부터 실전 편집까지! 오브젝트 드로잉
3.1 기본 도형으로 멋지게 시작!
01 사각형 도구 알아보기
02 선과 화살표 활용하기
03 원 도구 활용하기
04 다각형 도구 활용하기
3.2 펜 도구로 쇼핑백 디자인하기
01 라인 스타일 로고 디자인하기
02 조약돌 오브제 쇼핑백 디자인하기
03 조약돌 아트웍을 목업으로 활용하기
04 벡터 vs 비트맵 이해하기
3.3 플러그인을 활용하여 아이콘과 텍스트 버튼 만들기
3.4 AI 기능으로 아이콘 생성하기
연습 문제

WEEK 04 한눈에 보이는 프로젝트, 관리의 기술
4.1 프로젝트 관리: 작업 공간 만들기
01 페이지 생성으로 작업 공간 넓히기
02 화면 흐름을 한눈에 파악하는 워크 플로 구성하기
4.2 페이지를 연결하여 워크 플로 구성하기
01 간단한 버튼 아이콘과 페이지 연결하기
4.3 피그마 레이아웃 관리, 그리드 & 가이드
01 레이아웃 그리드 활용법
4.4 그리드 & 가이드 직접 실습해 보기
01 그리드 시스템 따라하기
02 팀 협업을 위한 레이아웃 그리드 저장하기
03 팀 라이브러리에 등록하기
04 저장한 레이아웃 그리드를 적용하기
05 팀원이 공유해준 레이아웃 그리드 파일 적용하기
06 가이드로 정확하게 정렬하기
4.5 UX 구조화: 레이어와 반응형 구조 설계
01 레이어를 체계적으로 관리하는 법
02 반응형 구조 설계를 위한 컨스트레인트
03 Rename layers로 자동 레이어명 바꾸기
연습 문제

WEEK 05 오토 레이아웃, 세상 편해지는 디자인
5.1 오토 레이아웃, 자동 정렬의 마법
01 프레임과 오토 레이아웃,
어떤 차이가 있을까?
5.2 오토 레이아웃 실습하기
01 오토 레이아웃을 활용한 상품 카드 만들기
02 쇼핑몰처럼! 상품 리스트 페이지 제작하기
03 그리드로 상품 페이지 레이아웃 구성하기
5.3 작업의 효율을 높이는 반응형 디자인 구현하기
01 반응형 디자인이란?
02 반응형 레이아웃을 위한 설정
03 AI를 이용한 콘텐츠 자동 변경
04 데스크톱부터 모바일까지, 중단점 실습
연습 문제

WEEK 06 컴포넌트와 베리언트, 일 잘하는 디자이너의 비밀
6.1 컴포넌트로 재사용 가능한 디자인 만들기
01 컴포넌트 이해와 필요성 알아보기
02 컴포넌트 활용 시 주의할 점 알아보기
6.2 간단한 컴포넌트 만들기
6.3 마스터 컴포넌트 & 인스턴스 활용법
01 마스터 컴포넌트와 인스턴스의 차이점 이해하기
6.4 인스턴스 자유롭게 바꾸기
6.5 컴포넌트 라이브러리 활용하기
6.6 인스턴스 분리와 컴포넌트 스왑 알아보기
6.7 베리언트로 효율적인 관리하기
01 베리언트 핵심 기능 익히기
6.8 다양한 상태의 버튼 디자인 실습
01 기본 버튼 만들기
02 호버 상태의 버튼 디자인하기
03 클릭 상태의 버튼 디자인하기
04 비활성화 상태의 버튼 디자인하기
05 같은 속성으로 정리하기
06 사이즈별 버튼 디자인하기
6.9 로그인 페이지에서 최종 테스트 및 활용
01 인터랙션 연결하기
02 로그인 페이지에 활용하기
03 발표 모드에서 테스트하기
연습 문제

WEEK 07 AI가 바꿔놓은 디자인씽킹
7.1 사용자 중심의 혁신! 디자인씽킹
01 왜 디자인씽킹이 필요한가
02 AI 시대, 디자이너의 역할

03 함께 작업할 팀 구성하기
7.2 디자인씽킹 프로세스 훑어보기
01 1단계: 공감(Empathize)
02 2단계: 문제 정의하기(Define)
03 3단계: 아이디어 내기(Ideate)
04 4단계: 프로토타입(Prototype)
05 5단계: 테스트(Test)
7.3 순환형 프로세스 이해하기
연습 문제

WEEK 08 실시간 협업, 피그잼으로 실습 스타트!
8.1 피그잼으로 아이디어 실현하기
01 실습 과정 알아보기
8.2 실시간 협업으로 팀워크 레벨업!
01 공유 보드에 팀원 초대하기
02 손풀기용 미션 진행하기
8.3 1단계: 공감, 사용자 목소리 시각화하기
8.4 2단계: 문제 정의, 진짜 문제 뽑아내기
01 공통 키워드 묶기
02 패턴 찾기 및 인사이트 도출
8.5 3단계: 아이데이션, 아이디어 팡팡!
연습 문제

WEEK 09 디자인 시스템으로 프로처럼!
9.1 프로젝트를 살리는 디자인 시스템!
01 디자인 시스템이 필요한 이유
02 디자인 시스템 구성 요소 이해하기
9.2 팀 라이브러리, 직접 만들어보자!
01 라이브러리가 중요한 이유
02 범정부 UI/UX 디자인 시스템
03 텍스트 스타일 정리하기
04 새로운 텍스트 스타일 설정하기
05 타이포그래피 설계 가이드
06 컬러 시스템 설계 가이드
07 컬러 팔레트 플러그인 설치하기
9.3 팀 라이브러리 퍼블리시 & 관리
01 팀 라이브러리 퍼블리시하기
02 새 파일에 팀 라이브러리 불러오기
연습 문제

WEEK 10 AI로 빠르게! 아이디어를 프로토타입으로
10.1 코딩 없이 만드는 피그마 사이트
01 피그마 사이트란?
02 피그마 사이트의 5가지 특징
03 피그마 사이트 인터페이스와 툴바 알아보기
10.2 AI 템플릿으로 스케치하기
01 스타일에 맞는 피그마 사이트 템플릿 찾기
02 모든 중단점에서 콘텐츠 동시 편집하기
03 반응형 웹페이지 테스팅하기
04 디바이스별 최적화! 중단점 설정하기
10.3 UX 블록 레이아웃 추가하기
01 레이아웃 구조용 블록 알아보기
02 내용 전달을 위한 블록 알아보기
연습 문제

WEEK 11 실전 UX 화면 설계 따라잡기
11.1 감각을 더한 디자인 톤 & 무드 설계하기
01 감성에 톤을 잡는 인스퍼레이션
02 디자인 톤 & 무드 스타일
03 무드보드 만들기
11.2 템플릿 없이, AI 프로토타입 바로 시작!

01 피그잼 아이디어 최종 정리
02 챗GPT로 프롬프트 만들기
03 AI로 프로토타입 초안 구성하기
04 프로토타입 스타일 수정하기
11.3 AI로 만드는 메인 비주얼, 더 빠르게 더 선명하게
01 챗GPT로 프롬프트 만들기
02 Google Image FX에서 이미지 생성하기
연습 문제
WEEK 12 몰입감을 높이는 인터랙션
12.1 클릭, 그 이상의 버튼 인터랙션
01 피그마 디자인을 피그마 사이트로 가져오기
02 페이지 제작 시 중요한 CTA 버튼
03 버튼 인터랙션 효과 적용하기
12.2 시선을 사로잡는 마이크로 인터랙션
01 화면에 등장하는 효과 적용하기
02 흘러가는 텍스트 효과 적용하기
03 타이핑 효과 적용하기
12.3 스크롤 애니메이션 인터랙션!
흐름을 이끄는 UX
01 공간감이 느껴지는 연출 효과 적용하기
02 자유롭게 변하는 인터랙션 적용하기
연습 문제

WEEK 13 흐름 있는 사용자 여정과 최종 발표
13.1 흐름이 살아있는 인터랙션 플로
01 슬라이드 오버레이 인터랙션 적용하기
02 창 닫기, 중앙에 뜨는 오버레이 인터랙션 적용하기
03 스왑 오버레이 인터랙션 적용하기
04 페이지 전환 인터랙션 적용하기
05 돌아가기 인터랙션 적용하기
06 인터랙션 플로 구성 시 주의사항
13.2 핵심을 전달하는 최종 발표 자료 구성하기
01 아이디어를 담는 틀 짜기
02 AI 기능으로 한번에 번역하기
03 피그마 프로토타입 연결하기
04 AI와 함께 발표 자료 준비하기
05 발표 준비 체크 리스트
연습 문제

찾아보기

작가정보

저자(글) 신승희 저자

20년 경력 웹사이트 디자이너이다. 숙명여자대학교 미술대학 시각디자인과 전공, 서강대학교 경영전문대학원 MBA경영학(마케팅) 석사를 졸업하였으며 ㈜ 더블에스텍 대표, 엄마손초마늘 쇼핑몰 경영책임을 역임 중이다. 한양여자대학교 정보경영과 겸임 교수, 한양여자대학교 정보경영과 숙명여자대학교 e커머스창업, 열린사이버대학교 창업연구소, 소상공인진흥원(서울교육센터, 안산교육센터),북부여성발전센터 G마켓옥션 강남교육센터dp에 출강했다.IBK 기업은행 F-emore 웹사이트 및 쇼핑몰 런칭을 비롯하여 파파이스, 네네치킨 등 다수 프랜차이즈 웹사이트 및 홈서비스 런칭, ㈜ SK브로드밴드 FUSE 프랜차이즈통합서비스 모바일 앱 런칭 및 리뉴얼, 평창 동계올림픽 프레젠테이션 그래픽 자료 제작, 보건복지부 콜센터 웹사이트 구축, ㈜ LG텔레콤 뮤직온 리뉴얼, 상명대학교 그린에너지센터 웹사이트 런칭, 대종상영화제 KAF 웹사이트 구축, 경기신용보증재단 웹사이트 구축, ㈜ 에스콰이어 영에이지 웹사이트 구축, KB국민은행 웹진 구축, ㈜한국기상 웹사이트 구축, 대림중앙시장 웹사이트 구축 등을 맡았다.저서로는 『쇼핑몰 디자인 무작정 따라하기』가 있다.