맛있는 디자인 피그마 with AI (가장 완벽한 디자인 레시피)

이영주

WesternSydneyUniversity에서DigitalMedia를전공했으며홍익대학교대학원에서UX전공박사과정을수료하고청운대학교멀티미디어학과교수로재직중입니다.주요저서로는한빛아카데미(주)에서출간한《UI/UX디자인이쉬워지는디자인시스템실무with피그마(2024)》,《UI/UX디자인이론과실무with어도비XD(2022)》,《모바일UI/UX디자인실무(2020)》,《UI/UX디자인이론과실습withAdobeXD(2020)》,《UI디자인과프로토타이핑을위한AdobeXD(2020)》,《designschool포토샵CC2019(2020)》,《designschool일러스트레이터CC(2020)》등다수가있습니다.

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

PART01.쉽고빠른피그마레시피
_CHAPTER01.피그마시작하기
__LESSON01.반갑다,피그마:피그마는무엇이고어디에쓰이는가
___피그마가사랑받는이유
___피그마의다양한제품과사용자

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

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


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

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

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

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

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

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


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

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

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

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


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

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

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


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

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

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

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


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

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

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


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

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

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

__LESSON04.타이포그래피:폰트패밀리부터모드,단위까지한번에정리하기
___타이포그래피의베리어블
___타이포그래피설정하기
___Fontfamily베리어블구성하기
___FontWeight베리어블구성하기
___FontSize베리어블구성하기
___Lineheight베리어블구성하기
___타이포그래피모드구성하기
___타이포그래피의범위(Scope)설정

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

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

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


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

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

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

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

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

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

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


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