피그마 with AI(UX/UI 디자인을 위한)

UI/UX 입문부터 실무 디자인을 위한
피그마

피그마의 기본 개념부터 자동화 기능과 실무 활용까지 전반적인 내용을 한 권에 체
계적으로 담았습니다. 협업 중심의 디자인 시스템 구축, 효율적인 프레젠테이션 제작 방
법 등 실무 환경에서 바로 적용 가능한 실습 과정을 단계적으로 안내합니다. 특히 AI 기능
의 프롬프트 기반의 시각화, 이미지 생성, 레이아웃 자동화, 스타일 추천 등 최신 기능을
활용한 실전 노하우를 통해 디자인 업무의 생산성과 창의성을 동시에 높일 수 있도록 구성
하였습니다.
STEP1 피그마 핵심 기능 활용
STEP2 생성형 AI로 UI 자동화
STEP3 UX 디자인 시스템 & 실무 프로젝트 실습
STEP4 협업 프레젠테이션 제작 및 공유

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 발표 준비 체크 리스트
연습 문제

찾아보기

신승희 한양여자대학교 빅데이터과(전 스마트 IT과) 겸임교수로서 UX/UI 디자인, 웹 디자인, 모바일 앱 기획 과목 등을 10년간 강의해 왔으며,
현재 ㈜더블에스텍 대표로 활동하고 있습니다.

주요경력
현재 : 플랫폼 개발 및 디자인 전문회사 ㈜ 더블에스텍 대표
이전 : 한양여자대학교 빅데이터과 겸임교수

학력
서강대학교 경영전문대학원 MBA 경영학(마케팅) 석사
숙명여자대학교 시각디자인과 학사