피그마 실전 31일
클로드 제미나이, AI 기능부터 바이브 코딩까지 UX/UI 디자이너를 위한 피그마 완벽 지침서
Regular price
$28.09
Sale price
Regular price
Shipping calculated at checkout.
✈️
Estimated delivery date 예상 배송일
Standard Shipping
불러오는 중...
주문일로부터 8-12 영업일
Express Shipping
불러오는 중...
주문일로부터 6-8 영업일
AI 시대의 UI/UX 표준,
클로드·제미나이부터 바이브코딩까지 한번에 배우는 피그마 책!
'피그마(Figma)'는 IT업계와 디자이너들 사이에서 가장 핫한 UX/UI 디자인과 프로토타이핑 협업 툴입니다. 웹 브라우저와 데스크톱 등 사용자의 가장 편리한 환경에서 작업할 수 있고 여러 인원이 동시에 디자인 프로젝트에 참여할 수 있습니다. 또한 디자인 시스템 구축부터 개발(Hand-off)까지 전 과정을 하나로 통합해 현대 IT 제품 개발 환경의 필수적인 표준으로 자리 잡았습니다.
이 책은 어려운 전문 용어나 기능 나열에서 벗어나, 초보자도 31일 동안 하루 한 레슨씩 차근차근 따라 하며 실력을 키울 수 있도록 만든 가장 쉬운 안내서입니다. 특히 기존 피그마 책들과 달리 클로드(Claude)나 제미나이(Gemini) 같은 최신 AI 툴을 피그마와 연결하고 글로 명령어를 입력해 결과물을 만드는 '바이브코딩'까지 담아내어 최신 트렌드를 빠르게 경험할 수 있습니다.
화면 크기에 따라 디자인이 자연스럽게 변하는 '반응형 디자인'이나 클릭 한 번으로 수십 개의 화면 요소를 한꺼번에 바꾸는 '컴포넌트'처럼 어렵게 느껴질 수 있는 핵심 원리도 풍부한 그림과 직관적인 그래픽으로 친절하게 설명합니다. 책 속의 예제를 차례대로 따라 하다 보면, 디자인을 처음 접하는 입문자나 비전공자라도 한 달 만에 혼자서 멋진 웹·앱 화면을 완성하는 자신감을 얻게 될 것입니다.
클로드·제미나이부터 바이브코딩까지 한번에 배우는 피그마 책!
'피그마(Figma)'는 IT업계와 디자이너들 사이에서 가장 핫한 UX/UI 디자인과 프로토타이핑 협업 툴입니다. 웹 브라우저와 데스크톱 등 사용자의 가장 편리한 환경에서 작업할 수 있고 여러 인원이 동시에 디자인 프로젝트에 참여할 수 있습니다. 또한 디자인 시스템 구축부터 개발(Hand-off)까지 전 과정을 하나로 통합해 현대 IT 제품 개발 환경의 필수적인 표준으로 자리 잡았습니다.
이 책은 어려운 전문 용어나 기능 나열에서 벗어나, 초보자도 31일 동안 하루 한 레슨씩 차근차근 따라 하며 실력을 키울 수 있도록 만든 가장 쉬운 안내서입니다. 특히 기존 피그마 책들과 달리 클로드(Claude)나 제미나이(Gemini) 같은 최신 AI 툴을 피그마와 연결하고 글로 명령어를 입력해 결과물을 만드는 '바이브코딩'까지 담아내어 최신 트렌드를 빠르게 경험할 수 있습니다.
화면 크기에 따라 디자인이 자연스럽게 변하는 '반응형 디자인'이나 클릭 한 번으로 수십 개의 화면 요소를 한꺼번에 바꾸는 '컴포넌트'처럼 어렵게 느껴질 수 있는 핵심 원리도 풍부한 그림과 직관적인 그래픽으로 친절하게 설명합니다. 책 속의 예제를 차례대로 따라 하다 보면, 디자인을 처음 접하는 입문자나 비전공자라도 한 달 만에 혼자서 멋진 웹·앱 화면을 완성하는 자신감을 얻게 될 것입니다.
Couldn't load pickup availability
출판사 리뷰
출판사 리뷰
기초부터 AI 실무 프로젝트까지 완벽히 마스터하는 4단계 구성
탄탄한 이론 기반 위에서 실무 응용력까지 한 번에 끌어올릴 수 있도록 체계적인 4단계 학습 구조로 설계되었습니다.
1. 핵심 이론 & 따라하기
기능의 원리를 직관적으로 설명하는 핵심 이론과 부담 없는 소규모 예제를 통해 피그마의 주요 기능들을 확실하게 내 것으로 만듭니다.
2. 심도 있는 예제 따라하기
본문 중간중간 배치된 실전형 예제를 따라 해보며, 피그마를 보다 깊이 있게 이해할 수 있습니다.
3. 스페셜 페이지, 팁, 참고로 실무 노하우 보충
작업 효율을 극대화하는 단축키와 꿀팁, 심화 개념을 다루는 '스페셜 페이지'와 '팁', '참고' 코너를 본문 곳곳에 배치하여 실무 현장의 시행착오를 줄여줍니다.
4. AI와 함께하는 실무 프로젝트
책의 하이라이트인 마지막 챕터에서는 클로드, 제미나이 등 최신 AI 툴과 피그마를 연동해 실제 서비스를 기획하고 프로토타입으로 완성해 보는 워크플로우를 경험합니다.
〈핵심 이론 → 실전 연습 → 피그마 마스터 → AI 프로젝트 완성〉으로 이어지는 선순환 구조를 따라가다 보면, 초보자도 막힘없이 전문가 수준의 피그마 워크플로우를 완벽하게 습득할 수 있습니다.
탄탄한 이론 기반 위에서 실무 응용력까지 한 번에 끌어올릴 수 있도록 체계적인 4단계 학습 구조로 설계되었습니다.
1. 핵심 이론 & 따라하기
기능의 원리를 직관적으로 설명하는 핵심 이론과 부담 없는 소규모 예제를 통해 피그마의 주요 기능들을 확실하게 내 것으로 만듭니다.
2. 심도 있는 예제 따라하기
본문 중간중간 배치된 실전형 예제를 따라 해보며, 피그마를 보다 깊이 있게 이해할 수 있습니다.
3. 스페셜 페이지, 팁, 참고로 실무 노하우 보충
작업 효율을 극대화하는 단축키와 꿀팁, 심화 개념을 다루는 '스페셜 페이지'와 '팁', '참고' 코너를 본문 곳곳에 배치하여 실무 현장의 시행착오를 줄여줍니다.
4. AI와 함께하는 실무 프로젝트
책의 하이라이트인 마지막 챕터에서는 클로드, 제미나이 등 최신 AI 툴과 피그마를 연동해 실제 서비스를 기획하고 프로토타입으로 완성해 보는 워크플로우를 경험합니다.
〈핵심 이론 → 실전 연습 → 피그마 마스터 → AI 프로젝트 완성〉으로 이어지는 선순환 구조를 따라가다 보면, 초보자도 막힘없이 전문가 수준의 피그마 워크플로우를 완벽하게 습득할 수 있습니다.
목차
목차
Chapter 01 피그마(Figma) 첫걸음 - 탄탄한 기초 다지기
Lesson 01 | 피그마(Figma) 알아보기
01 피그마 인터페이스 만나기
02 피그마에서 계정 생성하고 로그인하기
[1]계정 생성하기
| 따라 하기 | 차근차근 따라하며 계정 생성하기
Special 피그마 요금제 알아보기
Special [도움말] 기능 알아보기
03 다운로드 프로그램 가이드
[1] 데스크톱 앱 알아 보기
[2] 모바일 앱 알아보기
[3] 폰트 인스톨러 알아보기
04 사용자 프로필 및 통합 검색
Lesson 02 | 파일 브라우저와 커뮤니티 살펴보기
01 사용자 프로필 및 통합 검색 알아보기
02 파일 탐색 및 커뮤니티 알아보기
[1] 저장됨
| 따라 하기 | 리소스 저장하기
[2] 디자인 리소스
| 따라 하기 | 디자인 리소스 사용하기
[3] Figma Make
| 따라 하기 | Figma Make에서 카드 불러오기
[4] 플러그인+위젯
| 따라 하기 | 플러그인+위젯 들여다보기
[5] 프레젠테이션
| 따라 하기 | 프레젠테이션 들여다보기
[6] 화이트보딩
| 따라 하기 | 화이트보딩에서 다이어그램 사용하기
[7] 웹사이트
| 따라 하기 | 웹사이트 사용하기
Lesson 03 | 새로운 팀과 새로운 파일 만들기
| 따라 하기 | 새로운 팀 만들기
Lesson 04 | 즐겨찾기와 리소스로 프로젝트와 파일 관리하기
Chapter 02 [디자인(Design)] 파일 마스터하기
Lesson 05 | [디자인(Design)] 파일 화면 구성 알아보기
| 따라 하기 | 디자인 파일 만들기
Lesson 06 | 피그마의 위계를 설정하기 위해 프레임, 섹션, 그룹 이해하기
01 프레임(Frame) 알아보기
| 따라 하기 | 프레임 만들기
[1] 프레임의 속성을 조절하는 [레이아웃], [외형], [채우기] 패널 알아보기
02 섹션(Section) 알아보기
03 그룹(Group) 알아보기
| 따라 하기 | [레이아웃] 패널을 이용해 프레임의 위치와 크기 조절하기
Lesson 07 | 피그마 만능 일꾼, 멀티 에딧(Multi-edit) 알아보기
01 멀티 에딧의 주요 기능 알아보기
| 따라 하기 | 멀티 에딧 사용하기
Lesson 08 | 피그마 기능의 집약체, 메인 메뉴 알아보기
01 액션 기능 알아보기
[1] 에셋(Asset) 알아보기
| 따라 하기 | 에셋 사용하기
[2] 플러그인(Plugins) 및 위젯(Widgets)
| 따라 하기 | 플러그인 및 위젯 둘러보기
02 파일 메뉴 알아보기
| 따라 하기 | 이미지 파일 불러와 크기 조절하기
| 따라 하기 | 템플릿 불러와 저장하기
| 따라 하기 | 이미지 파일 불러와 크기 조절하고 내보내기
03 편집 메뉴 알아보기
04 보기 메뉴 알아보기
| 따라 하기 | 시각적 가이드 살펴보기
| 따라 하기 | 윤곽선 들여다보기
Lesson 09 | 페이지 관리와 소스 활용을 위한 파일과 에셋 알아보기
01 파일과 에셋 알아보기
| 따라 하기 | 에셋 활용하기
02 페이지 관리 및 구성 알아보기
Chapter 03 그림 그리기 마스터! 도형 그리기로 시작하기
Lesson 10 | 도형의 기초 ① - 사각형 그리기
Lesson 11 | 도형의 기초 ② - 원 그리기
Lesson 12 | [원형] 툴을 이용해 호 그리기
Lesson 13 | 도형에 테두리 선 그리기
Lesson 14 | [라인] 툴로 화살표 그리기
Lesson 15 | 다양한 모양으로 다각형 그리기
Special 벡터 편집 모드 도구 상자 알아보기
| 따라 하기 | 도형을 이용해 나무 아이콘 만들기
Lesson 16 | [디자인(Design)] 파일의 계층 구조 알아보기
01 페이지(Page) 알아보기
02 섹션(Section) 알아보기
03 프레임(Frame) 알아보기
04 레이어(Layer) 알아보기
| 따라 하기 | 스케치를 따라 나만의 벡터 글씨 만들기
Chapter 04 매체 확장 핵심 기능 ① 오토 레이아웃
Lesson 17 | 나노 바나나를 이용해 디저트 홍보 카드 만들기
| Step 1 | 카드 베이스 준비하기
Special 피그마 색상 모드, 한눈에 이해하기
| Step 2 | 나노바나나로 이미지 만들기
| Step 3 | 텍스트 추가하고 속성 설정하기
Special 구글 폰트 페어링하기
| Step 4 | [오토 레이아웃]의 핵심 기능 적용하기
Chapter 05 매체 확장 핵심 기능 ② 반응형 디자인
Lesson 18 | 반응형 디자인 개념 이해하기
[1] 오토 레이아웃의 핵심, 부모와 자식 관계 알아보기
| 따라 하기 | 텍스트 카드에 반응형 디자인 적용하기
[2] [자동화 도구] 마스터하기
Lesson 19 | 반응형 디자인을 위한 크기 조절 규칙 알아보기
| 따라 하기 | 상품 카드를 만들면서 크기 조절 규칙 적용하기
규칙 1 | 고정 너비 - 컬러 칩 왜곡 방지
규칙 2 | 컨테이너 채우기 - 메인 이미지 영역 확장
규칙 3 | 최소 너비 추가 - 모바일 무너짐 방지
규칙 4 | 최대 너비 추가 - 데스크톱 밀도 유지
Lesson 20 | 애니메이션 프로토타입 적용하기
01 프로토타입 이미지 생성 및 저장하기
Special Figma Effect: 디자인에 깊이와 입체감을 더하는 네 가지 도구
02 인터랙션·애니메이션 프로토타입 실행하기
Lesson 21 | 반응형 디자인 중단점과 레이아웃 그리드 설정하기
01 반응형 디자인과 중단점(Breakpoint) 이해하기
Chapter 06 디자인 효율을 위한 컴포넌트와 베리언트
Lesson 22 | 스타일 저장! 컴포넌트 알아보기
01 컴포넌트 알아보기
[1] 컴포넌트의 기본 개념 이해하기
| 따라 하기 | 컴포넌트 생성하기
Lesson 23 | 컴포넌트 정리 상자, 베리언트 알아보기
01 베리언트(Variants)를 사용하는 이유
| 따라 하기 | 베리언트 생성을 위해 컴포넌트 준비하기
Special 개발 모드(Dev Mode)를 활용한 핸드오프 알아보기
| 따라 하기 | 개발 모드 실행하기
| 따라 하기 | 클로드에서 버튼 만들기
Chapter 07 통합 플랫폼, 피그마의 확장 파일 알아보기
Lesson 24 | 온라인 화이트 보드, [피그잼(FigJam)] 알아보기
01 도구 상자 알아보기
| 따라 하기 | 스티커 활용하기
Lesson 25 | 완벽한 프레젠테이션 제작 도구, [슬라이드(Slides)] 알아보기
[1] [슬라이드]로 프레젠테이션 파일 만들기
| 따라 하기 | 슬라이드 템플릿 사용하기
[2] 슬라이드 도구 상자 알아보기
[3] 애니메이션 적용하기
[4] 프레젠테이션 실행하기
[5] 공유 및 PDF 내보내기
Lesson 26 | 템플릿 기반 협업 도구, [버즈(Buzz)] 알아보기
| 따라 하기 | 피그마의 똑똑한 조수 'Buzz'로 AI 활용하기
Special 자주 사용하는 이미지 편집 메뉴 알아보기
Lesson 27 | 코딩 없는 퍼블리싱 플랫폼, [사이트(Site)] 알아보기
01 [사이트(Site)]의 주요 특징 알아보기
[1] 커스텀 도메인 연결 및 보안 환경 구축하기
[2] 메타데이터 및 SEO 최적화하기
[3] 템플릿과 구성 요소 제공하기
[4] 반응형 프레임과 동시 편집 기능 알아보기
[5] 애니메이션 및 인터랙션 효과 알아보기
02 [Site]의 인터페이스와 도구 상자 알아보기
[1] 좌측 패널 알아보기
[2] 도구 상자 알아보기
[3] 속성 패널 알아보기
Lesson 28 | AI를 활용한 UI 디자인, [메이크(Make)] 알아보기
[1] [메이크] 파일의 인터 페이스와 기본 기능 알아보기
[2] 좌측 패널: 디자인 카테고리 가이드 알아보기
Chapter 08 실무 프로젝트로 피그마 활용하기
Lesson 29 | 스킨케어 브랜드 'NORDIC BARE' 상세 페이지 만들기
| Step 1 | 상세 페이지 프레임 만들고 텍스트 입력하기
| Step 2 | 상세 페이지 프레임에 이미지 불러오기
| Step 3 | 텍스트 속성 변경하기
| Step 4 | 도형으로 상세 페이지 장식하기
| Step 5 | 그라데이션 적용해 화사한 이미지 만들기
Lesson 30 | 버즈(Buzz)에서 대량으로 디자인 콘텐츠 생성하기
| Step 1 | 작업 영역 만들기
| Step 2 | 엑셀 데이터와 피그마 연동하기
| Step 3 | 제미나이를 활용해 다양한 샌드위치 이미지 만들기
| Step 4 | 이미지 삽입해 엑셀 파일 완성하기
| Step 5 | 버즈에서 엑셀 데이터와 연동하기
| Step 6 | 피그마 디자인모드에서 디자인 디테일 보정하기
Special 이미지 크기와 색 조절하기
Special 어도비 컬러 팔레트 활용하기
Lesson 31 | [메이크(Make)] 파일에서 바이브 코딩하기
| Step 1 | 작업 영역 만들기
| Step 2 | [사이트] 파일의 템플릿을 캡처해 [이미지 및 파일 추가] 요청하기
Lesson 01 | 피그마(Figma) 알아보기
01 피그마 인터페이스 만나기
02 피그마에서 계정 생성하고 로그인하기
[1]계정 생성하기
| 따라 하기 | 차근차근 따라하며 계정 생성하기
Special 피그마 요금제 알아보기
Special [도움말] 기능 알아보기
03 다운로드 프로그램 가이드
[1] 데스크톱 앱 알아 보기
[2] 모바일 앱 알아보기
[3] 폰트 인스톨러 알아보기
04 사용자 프로필 및 통합 검색
Lesson 02 | 파일 브라우저와 커뮤니티 살펴보기
01 사용자 프로필 및 통합 검색 알아보기
02 파일 탐색 및 커뮤니티 알아보기
[1] 저장됨
| 따라 하기 | 리소스 저장하기
[2] 디자인 리소스
| 따라 하기 | 디자인 리소스 사용하기
[3] Figma Make
| 따라 하기 | Figma Make에서 카드 불러오기
[4] 플러그인+위젯
| 따라 하기 | 플러그인+위젯 들여다보기
[5] 프레젠테이션
| 따라 하기 | 프레젠테이션 들여다보기
[6] 화이트보딩
| 따라 하기 | 화이트보딩에서 다이어그램 사용하기
[7] 웹사이트
| 따라 하기 | 웹사이트 사용하기
Lesson 03 | 새로운 팀과 새로운 파일 만들기
| 따라 하기 | 새로운 팀 만들기
Lesson 04 | 즐겨찾기와 리소스로 프로젝트와 파일 관리하기
Chapter 02 [디자인(Design)] 파일 마스터하기
Lesson 05 | [디자인(Design)] 파일 화면 구성 알아보기
| 따라 하기 | 디자인 파일 만들기
Lesson 06 | 피그마의 위계를 설정하기 위해 프레임, 섹션, 그룹 이해하기
01 프레임(Frame) 알아보기
| 따라 하기 | 프레임 만들기
[1] 프레임의 속성을 조절하는 [레이아웃], [외형], [채우기] 패널 알아보기
02 섹션(Section) 알아보기
03 그룹(Group) 알아보기
| 따라 하기 | [레이아웃] 패널을 이용해 프레임의 위치와 크기 조절하기
Lesson 07 | 피그마 만능 일꾼, 멀티 에딧(Multi-edit) 알아보기
01 멀티 에딧의 주요 기능 알아보기
| 따라 하기 | 멀티 에딧 사용하기
Lesson 08 | 피그마 기능의 집약체, 메인 메뉴 알아보기
01 액션 기능 알아보기
[1] 에셋(Asset) 알아보기
| 따라 하기 | 에셋 사용하기
[2] 플러그인(Plugins) 및 위젯(Widgets)
| 따라 하기 | 플러그인 및 위젯 둘러보기
02 파일 메뉴 알아보기
| 따라 하기 | 이미지 파일 불러와 크기 조절하기
| 따라 하기 | 템플릿 불러와 저장하기
| 따라 하기 | 이미지 파일 불러와 크기 조절하고 내보내기
03 편집 메뉴 알아보기
04 보기 메뉴 알아보기
| 따라 하기 | 시각적 가이드 살펴보기
| 따라 하기 | 윤곽선 들여다보기
Lesson 09 | 페이지 관리와 소스 활용을 위한 파일과 에셋 알아보기
01 파일과 에셋 알아보기
| 따라 하기 | 에셋 활용하기
02 페이지 관리 및 구성 알아보기
Chapter 03 그림 그리기 마스터! 도형 그리기로 시작하기
Lesson 10 | 도형의 기초 ① - 사각형 그리기
Lesson 11 | 도형의 기초 ② - 원 그리기
Lesson 12 | [원형] 툴을 이용해 호 그리기
Lesson 13 | 도형에 테두리 선 그리기
Lesson 14 | [라인] 툴로 화살표 그리기
Lesson 15 | 다양한 모양으로 다각형 그리기
Special 벡터 편집 모드 도구 상자 알아보기
| 따라 하기 | 도형을 이용해 나무 아이콘 만들기
Lesson 16 | [디자인(Design)] 파일의 계층 구조 알아보기
01 페이지(Page) 알아보기
02 섹션(Section) 알아보기
03 프레임(Frame) 알아보기
04 레이어(Layer) 알아보기
| 따라 하기 | 스케치를 따라 나만의 벡터 글씨 만들기
Chapter 04 매체 확장 핵심 기능 ① 오토 레이아웃
Lesson 17 | 나노 바나나를 이용해 디저트 홍보 카드 만들기
| Step 1 | 카드 베이스 준비하기
Special 피그마 색상 모드, 한눈에 이해하기
| Step 2 | 나노바나나로 이미지 만들기
| Step 3 | 텍스트 추가하고 속성 설정하기
Special 구글 폰트 페어링하기
| Step 4 | [오토 레이아웃]의 핵심 기능 적용하기
Chapter 05 매체 확장 핵심 기능 ② 반응형 디자인
Lesson 18 | 반응형 디자인 개념 이해하기
[1] 오토 레이아웃의 핵심, 부모와 자식 관계 알아보기
| 따라 하기 | 텍스트 카드에 반응형 디자인 적용하기
[2] [자동화 도구] 마스터하기
Lesson 19 | 반응형 디자인을 위한 크기 조절 규칙 알아보기
| 따라 하기 | 상품 카드를 만들면서 크기 조절 규칙 적용하기
규칙 1 | 고정 너비 - 컬러 칩 왜곡 방지
규칙 2 | 컨테이너 채우기 - 메인 이미지 영역 확장
규칙 3 | 최소 너비 추가 - 모바일 무너짐 방지
규칙 4 | 최대 너비 추가 - 데스크톱 밀도 유지
Lesson 20 | 애니메이션 프로토타입 적용하기
01 프로토타입 이미지 생성 및 저장하기
Special Figma Effect: 디자인에 깊이와 입체감을 더하는 네 가지 도구
02 인터랙션·애니메이션 프로토타입 실행하기
Lesson 21 | 반응형 디자인 중단점과 레이아웃 그리드 설정하기
01 반응형 디자인과 중단점(Breakpoint) 이해하기
Chapter 06 디자인 효율을 위한 컴포넌트와 베리언트
Lesson 22 | 스타일 저장! 컴포넌트 알아보기
01 컴포넌트 알아보기
[1] 컴포넌트의 기본 개념 이해하기
| 따라 하기 | 컴포넌트 생성하기
Lesson 23 | 컴포넌트 정리 상자, 베리언트 알아보기
01 베리언트(Variants)를 사용하는 이유
| 따라 하기 | 베리언트 생성을 위해 컴포넌트 준비하기
Special 개발 모드(Dev Mode)를 활용한 핸드오프 알아보기
| 따라 하기 | 개발 모드 실행하기
| 따라 하기 | 클로드에서 버튼 만들기
Chapter 07 통합 플랫폼, 피그마의 확장 파일 알아보기
Lesson 24 | 온라인 화이트 보드, [피그잼(FigJam)] 알아보기
01 도구 상자 알아보기
| 따라 하기 | 스티커 활용하기
Lesson 25 | 완벽한 프레젠테이션 제작 도구, [슬라이드(Slides)] 알아보기
[1] [슬라이드]로 프레젠테이션 파일 만들기
| 따라 하기 | 슬라이드 템플릿 사용하기
[2] 슬라이드 도구 상자 알아보기
[3] 애니메이션 적용하기
[4] 프레젠테이션 실행하기
[5] 공유 및 PDF 내보내기
Lesson 26 | 템플릿 기반 협업 도구, [버즈(Buzz)] 알아보기
| 따라 하기 | 피그마의 똑똑한 조수 'Buzz'로 AI 활용하기
Special 자주 사용하는 이미지 편집 메뉴 알아보기
Lesson 27 | 코딩 없는 퍼블리싱 플랫폼, [사이트(Site)] 알아보기
01 [사이트(Site)]의 주요 특징 알아보기
[1] 커스텀 도메인 연결 및 보안 환경 구축하기
[2] 메타데이터 및 SEO 최적화하기
[3] 템플릿과 구성 요소 제공하기
[4] 반응형 프레임과 동시 편집 기능 알아보기
[5] 애니메이션 및 인터랙션 효과 알아보기
02 [Site]의 인터페이스와 도구 상자 알아보기
[1] 좌측 패널 알아보기
[2] 도구 상자 알아보기
[3] 속성 패널 알아보기
Lesson 28 | AI를 활용한 UI 디자인, [메이크(Make)] 알아보기
[1] [메이크] 파일의 인터 페이스와 기본 기능 알아보기
[2] 좌측 패널: 디자인 카테고리 가이드 알아보기
Chapter 08 실무 프로젝트로 피그마 활용하기
Lesson 29 | 스킨케어 브랜드 'NORDIC BARE' 상세 페이지 만들기
| Step 1 | 상세 페이지 프레임 만들고 텍스트 입력하기
| Step 2 | 상세 페이지 프레임에 이미지 불러오기
| Step 3 | 텍스트 속성 변경하기
| Step 4 | 도형으로 상세 페이지 장식하기
| Step 5 | 그라데이션 적용해 화사한 이미지 만들기
Lesson 30 | 버즈(Buzz)에서 대량으로 디자인 콘텐츠 생성하기
| Step 1 | 작업 영역 만들기
| Step 2 | 엑셀 데이터와 피그마 연동하기
| Step 3 | 제미나이를 활용해 다양한 샌드위치 이미지 만들기
| Step 4 | 이미지 삽입해 엑셀 파일 완성하기
| Step 5 | 버즈에서 엑셀 데이터와 연동하기
| Step 6 | 피그마 디자인모드에서 디자인 디테일 보정하기
Special 이미지 크기와 색 조절하기
Special 어도비 컬러 팔레트 활용하기
Lesson 31 | [메이크(Make)] 파일에서 바이브 코딩하기
| Step 1 | 작업 영역 만들기
| Step 2 | [사이트] 파일의 템플릿을 캡처해 [이미지 및 파일 추가] 요청하기
저자
저자
박신희 시각디자인을 기반으로 브랜딩, 광고·마케팅, 콘텐츠 제작 분야를 넘나들며 실무와 연구를 이어 온 디자이너이자 교육자이다. 다양한 산업 현장에서 제품·시각·브랜드 디자인을 담당했으며, 숭실대·용인대 등 여러 대학에서 시각디자인, 브랜딩, UX/UI 디자인, 광고·홍보 분야의 후학을 양성하며 디자인 교육과 산업 현장을 연결해 오고 있다.
홍익대학교 대학원에서 브랜드매니지먼트 석사와 시각디자인 전공 미술학 박사 학위를 취득했으며, (사)한국브랜드디자인학회 AI융복합분과 상임이사, (사)한국시각정보디자인협회 AI분과 간사로 활동하고 있다.
출간한 책으로 『AI 디자인, 개념과 과제』, 『디자인 인문학과 인공지능』, 『AI 디자인과 장소 만들기』, 『AI 비즈니스론』 등이 있다. 아울러 융합디자인연구소 메타필리아(Metaphilia)를 운영하며 현업에서도 활발한 활동을 이어 오고 있다.
인스타그램 design.reading.lab
홍익대학교 대학원에서 브랜드매니지먼트 석사와 시각디자인 전공 미술학 박사 학위를 취득했으며, (사)한국브랜드디자인학회 AI융복합분과 상임이사, (사)한국시각정보디자인협회 AI분과 간사로 활동하고 있다.
출간한 책으로 『AI 디자인, 개념과 과제』, 『디자인 인문학과 인공지능』, 『AI 디자인과 장소 만들기』, 『AI 비즈니스론』 등이 있다. 아울러 융합디자인연구소 메타필리아(Metaphilia)를 운영하며 현업에서도 활발한 활동을 이어 오고 있다.
인스타그램 design.reading.lab
Payment & Security
Payment methods
Your payment information is processed securely. We do not store credit card details nor have access to your credit card information.
