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

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

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

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

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

북 트레일러

  • 출판사의 사정에 따라 서비스가 변경 또는 중지될 수 있습니다.
  • Window7의 경우 사운드 연결이 없을 시, 동영상 재생에 오류가 발생할 수 있습니다. 이어폰, 스피커 등이 연결되어 있는지 확인 하시고 재생하시기 바랍니다.
저자

이영주

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.글로벌내비게이션:상단구조설계하기
___클론디자인
___상단글로벌내비게이션영역만들기

출판사 서평

-디자인시스템을처음부터체계적으로배우고싶은예비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단계구성으로기초부터실무까지흐름을놓치지않고학습할수있습니다.간단한기초기능을먼저익히고핵심예제로구조를이해한뒤,실제서비스화면을완성해보는단계로학습합니다.여기에책의내용을보완하는동영상강의까지제공하여복잡한과정도눈으로확인하며따라할수있습니다.혼자학습해도끝까지완주할수있도록돕는체계적인학습구조입니다.