가장 쉽게 배우는 피그마 AI와 디자인 시스템 실무

강사

이영주

강의

15강

시간

3h 38m

수강기간

무제한

레벨

초급

총 결제 금액

무료

0원

강의 소개

강사

커리큘럼

수강 후기

가장 쉽게 배우는 피그마 AI와 디자인 시스템 실무

컴포넌트 세트부터 디자인 시스템 구축까지 한번에 끝내기!

업무 시간은 반으로,
효율은 두 배로 높이는 피그마 AI

아직도 피그마를 단순 협업 툴로만
사용하고 계신가요?

디자인의 완성을 앞당기는 피그마 강의를 공개합니다!

POINT 1

책과 전용 강의로
'함께' 공부하는 완벽한 시너지

어려울 수 있는 디자인 시스템 개념과 변수 적용 과정을 책과 함께 동양상 강의(무료강의 제공)와 함께 공부할 수 있습니다.

왕초보도 시작할 수 있는 피그마 기초 학습

디자인 시스템 이론까지 단계적으로 확장

실무 완성으로 이어지는 3단계 수준별 학습 구성

책과 영상으로 차근차근 따라가는 방식

POINT 2

클릭 한 번에 바뀌는
마법 같은 '자동화' 마스터

과거처럼 화면을 일일이 수정하는 방식에서 벗어나, 규모가 커져도 무너지지 않는 현대적인 디자인 실무 방식을 배웁니다.

토큰·변수로 컬러·타입·단위 등 Foundation 규칙 설계

규칙 기반으로 전체 디자인을 일관되게 관리

모바일~데스크톱까지 자동 대응하는 반응형 구현

클릭 한 번으로 다크 모드 일괄 적용

POINT 3

피그마 AI 도입으로
압도적인 작업 속도 향상

실무에서 귀찮고 시간이 오래 걸리는 반복 작업들을 피그마 AI가 빠르고 똑똑하게 대신해 줍니다.

프롬프트만으로 UI 초안(First Draft) 빠르게 생성

복잡한 레이어 이름을 한 번에 정리

텍스트 길이 축약·다국어 번역 등 AI 문장 기능 활용

단순 작업 시간을 줄여 창의적 디자인에 집중

POINT 4

진짜 앱을 만드는
'클론 디자인' 실전 경험

단순히 도구의 기능만 외우고 끝나는 것이 아니라, 실제 앱을 그대로 따라 만들며 실무 흐름과 판단 기준까지 자연스럽게 익힙니다.

성공적인 서비스 분석 및 뼈대(와이어프레임) 구축

핵심 컴포넌트 조립을 통한 전체 페이지 완성

하나의 변수(Size)로 제어되는 완벽한 반응형 UI 구현

클릭 한 번에 일괄 전환되는 다크 모드 자동화 적용

이 강의 구매시
강의+도서 혜택을
한번에 가져갈 수 있어요!

UI/UX 실무에서 가장 중요한

작업의 효율성
시스템화된 디자인 역량

기능 실습 – 한눈에 실습 – 실무 실습

피그마로 업무 생산성을 향상시키는 수많은 디자이너의 바이블을 집필한 UI/UX 테크 마스터의 생생한 실전 꿀팁을 아낌없이 공유합니다.

작업 효율성 극대화

피그마 AI를 활용한 압도적인 반복 작업 시간 단축

시스템화된 디자인 역량

디자인 토큰과 베리어블 기반의 견고한 파운데이션 구축

효율성과 시스템의 결합

클릭 한 번에 제어되는 '반응형 & 다크 모드' 자동화

이런 분께 강력 추천합니다

👉 화면 크기가 바뀔 때마다 레이아웃이 깨지는 분

'컨스트레인트'와 '오토레이아웃'을 마스터하여, 어떤 기기에서도 무너지지 않고 자동 정렬되는 튼튼한 화면을 만듭니다

👉 피그마 AI를 내 실무에 어떻게 쓸지 막막한 분

UI 초안 생성(First Draft), 레이어 자동 정리, 텍스트 번역 등 귀찮고 반복적인 작업을 AI에게 맡겨 퇴근 시간을 앞당깁니다.

👉 ‘메인 컬러 다 바꿔주세요’라는 수정 요청이 두려운 분

'디자인 토큰'과 '베리어블'로 시스템을 구축하여, 기준 값 하나만 수정해도 모든 화면이 한 번에 알아서 바뀌는 기적을 경험합니다.

👉 다크 모드와 기기별 반응형 화면을 매번 새로 그리는 분

베리어블의 모드(Mode) 기능을 활용해, 넓은 PC 화면이 모바일로 척척 맞춰지고 클릭 한 번에 '다크 모드'로 일괄 자동 전환되게 만듭니다.

👉 디자인 시스템의 어려운 개념에 공부를 포기했던 분

책의 흐름과 똑같이 진행되는 '동영상 강의'가 제공되어, 왕초보도 길을 잃지 않고 실무 완성까지 완주할 수 있습니다.

수작업 지옥에서 시스템 자동화로!

실무가 마법처럼 바뀌는 4가지 혁신

BEFORE

레이아웃

매번 비율이 깨져 다시 맞추던 화면

작업 방식

더미 텍스트와 레이어 정리에 쏟던 수작업 시간

유지 보수

수정 요청 시 수백 장을 일일이 고치던 야근

화면 대응

기기별·테마별로 매번 새로 그리던 디자인

AFTER

레이아웃

어떤 해상도에서도 무너지지 않는 자동 정렬 구조 완성

작업 방식

피그마 AI 비서를 활용한 압도적인 작업 속도 향상

유지 보수

베리어블 변수 하나로 전체 화면이 일괄 변경되는 시스템화

화면 대응

클릭 한 번에 알아서 맞춰지는 '반응형 & 다크 모드' 자동화

수많은 디자이너의 실무 바이블을

집필한 UI/UX 테크 마스터

이영주 교수

경력

Western Sydney University에서 Digital Media를 전공했으며 홍익대학교대학원에서 UX전공 박사과정을 수료하고 청운대학교 멀티미디어학과 교수로 재직 중

저서

한빛아카데미(주)에서 출간한 《UI/UX 디자인이 쉬워지는 디자인 시스템 실무 with 피그마(2024)》, 《UI/UX 디자인 이론과 실무 with 어도비 XD(2022)》, 《모바일 UI/UX 디자인 실무(2020)》, 《UI/UX 디자인 이론과 실습 with Adobe XD(2020)》, 《UI 디자인과 프로토타이핑을 위한 Adobe XD(2020)》, 《design school 포토샵 CC 2019(2020)》, 《design school 일러스트레이터 CC(2020)》 등 다수

저자가 직접 가르치는 명품 강의!

베스트셀러로 검증된 노하우를 가장 확실하게 배우는 기회

STEP1

피그마는 처음이에요! (피그마 기초 다지기) • 디자인 시스템 학습 전, 피그마의 기본 도구와 작업 환경을 왕초보도 쉽게 손에 익히는 단계입니다.
• 컨스트레인트, 오토레이아웃 등 화면이 깨지지 않게 돕는 필수 핵심 기능을 배워 탄탄한 첫걸음을 뗍니다.

STEP2

UI/UX 디자인 시스템이 궁금해요! (시스템 이해와 파운데이션 구축) • 좋은 디자인의 뼈대가 되는 디자인 시스템의 필요성과 기본 개념을 친절한 이론으로 확실하게 정리합니다.
• 컬러, 폰트, 간격 등 디자인 기초가 되는 '파운데이션'을 직접 설계하며 전체적인 구축 흐름을 익힙니다.

STEP3

디자인 시스템 실무를 완벽히 익히고 싶어요! (실무 완성 및 클론 디자인) • 만든 파운데이션을 블록처럼 조립해 핵심 컴포넌트를 구성하고, 실제 서비스 화면을 똑같이 만들어봅니다.
• 베리어블을 활용해 반응형 화면과 다크 모드까지 한 번에 제어하는 고급 실무 자동화 기술을 마스터합니다.

커리큘럼

체계적인 5단계 학습 로드맵

오픈 예정

1장. 피그마 기초

1. 컨스트레인트 스마트폰, 태블릿 등 다양한 디바이스 화면 크기가 변해도 개체의 위치와 비율이 자연스럽게 유지되고 무너지지 않도록 고정하는 방법을 배웁니다

2. 오토레이아웃 버튼이나 리스트를 만들 때 개체 사이의 간격과 정렬을 자동으로 관리하여, 반복적인 레이아웃 수정 작업을 자동화하는 기능입니다

3. 컴포넌트와 인스턴스 디자인의 기준이 되는 원본(컴포넌트)을 만들고, 이를 복제한 개체(인스턴스)를 활용해 반복되는 UI 요소를 일관성 있고 효율적으로 관리합니다

4. 베리언트 버튼에 아이콘이 있는 상태, 없는 상태 등 하나의 컴포넌트가 가지는 다양한 상태나 스타일을 세트로 묶어 손쉽게 제어합니다

2장. 디자인 시스템의 이해

1. 디자인 시스템의 정의 브랜드 일관성을 유지하고 협업 효율을 높이기 위해 반복되는 디자인을 하나의 명확한 기준으로 묶는 방법론을 이해합니다

2. 디자인 시스템의 구조와 구성요소 개요(Overview), 기초(Foundation), 구성 요소(Components), 패턴(Pattern) 등으로 이루어진 실무 구축 단계를 파악합니다

3. 디자인 토큰과 베리어블 색상, 글자 크기, 간격 등의 디자인 속성을 추상화하여 코드화(디자인 토큰)하고, 이를 피그마의 '베리어블(Variables)' 기능에 변수로 등록해 관리하는 개념을 익힙니다

4. 베리어블의 구조 베리어블의 체계적인 네이밍 규칙을 이해하고, 피그마 인터페이스를 통해 직접 값을 등록하며 모드(Mode) 환경을 맛봅니다

5. 로컬 베리어블 맛보기 피그마 인터페이스를 통해 직접 변수 값을 등록하고 모드(Mode) 환경을 가볍게 실습해 봅니다

3장. 파운데이션의 구성

1. 컬러 베리어블과 플러그인 베리어블의 기본 구조를 이해하고, 플러그인을 활용해 디자인 시스템의 뼈대가 되는 원초적 색상 값(Raw Token)을 한 번에 효율적으로 등록합니다

2. 컬러 베리어블 프리미티브 구성 수많은 색상 중에서 실제 디자인에 사용할 컬러만 추려내어, 모든 요소의 기준이 되는 범용적인 '프리미티브' 컬렉션을 그룹화하여 구축합니다

3. 컬러 베리어블 시멘틱 I 텍스트(Text)와 배경(Bg) 영역에 쓰일 기본 색상 값에 Primary, Error 등 특정한 역할과 의미를 부여하는 시멘틱(Semantic) 계층을 설계합니다

4. 컬러 베리어블 시멘틱 II 테두리와 아이콘은 물론 상호작용(Hover 등)에 따른 세부 색상 변화를 정의하고, 알맞은 속성에만 나타나도록 변수 범위를 제한하는 실무를 익힙니다

5. 척도와 유닛 화면에 일관된 시각적 리듬을 주기 위해 여백, 테두리 둥글기 등의 수치를 베리어블에 단위 척도로 등록하여 튼튼한 레이아웃 기준을 세웁니다

6. 타이포그래피 I 폰트 패밀리와 두께 같은 문자열 변수를 등록하고, 앞서 만든 단위를 참조해 글자 크기(Size)와 행간(Line height)을 정밀하게 세팅합니다

7. 타이포그래피 II 데스크톱, 모바일 등 기기별로 폰트 크기가 알아서 변하도록 모드(Mode)를 추가하고, 변수 노출 범위를 제어해 가독성과 사용성을 높입니다

8. 아이콘 피그마 커뮤니티 리소스를 활용해 범용적인 아이콘 시스템을 구축하고, 크기를 변수 모드로 등록해 어떤 환경이든 일관되게 재사용하는 법을 배웁니다

9. 브레이크포인트와 그리드 모바일, 태블릿, PC 등 화면이 변하는 분기점(브레이크포인트)을 설정하여 반응형 디자인을 완벽하게 지원하는 레이아웃 기준점을 마련합니다

10. 엘리베이션 개체가 겹칠 때 깊이감과 위계를 표현하기 위해 투명도 변수를 활용한 그림자 레벨(Level 0~5)을 구성하고 라이트/다크 모드에 맞게 적용합니다

오픈 예정

4장. 컴포넌트의 구성

1. 컴포넌트의 이해 아토믹 디자인 방법론을 바탕으로 컴포넌트의 상태와 속성을 제어하는 피그마 베리언트 기초를 배웁니다

2. 버튼 텍스트와 아이콘이 결합된 기본 버튼을 만들고, 호버나 비활성화 등 다양한 상태와 스타일을 세트로 묶어 체계화합니다

3. 인풋 필드 입력 창과 레이블을 결합하고, 입력 완료나 오류(Error) 등 다양한 상태 변화를 베리언트로 제어합니다

4. 아바타 텍스트, 아이콘, 이미지 형태의 사용자 프로필 요소를 만들고 크기와 스타일 속성을 추가해 일관되게 재사용합니다

5. 뱃지 사용자에게 알림이나 상태를 직관적으로 전달하며, 내부 텍스트 길이에 유연하게 반응하도록 오토레이아웃을 적용합니다

6. 프로그래스 0부터 100까지의 작업 진행률을 단계별로 정의해, 상태 변화를 시각적으로 보여주는 UI를 세트로 구축합니다

7. 스켈레톤 데이터 로딩 중 화면의 뼈대를 미리 보여주어 사용자가 결과를 예측하고 대기 시간의 지루함을 덜 수 있게 설계합니다

8. 카드 이미지, 텍스트, 진행 바를 결합해 가로·세로 레이아웃이 유연하게 자동 전환되도록 디스플레이 카드를 조립합니다

9. 캐러셀 한정된 화면에서 여러 개의 콘텐츠 카드를 슬라이드 형태로 넘겨볼 수 있도록 넘침(Overflow) 영역을 고려해 설계합니다

10. 탭 선택 상태와 스타일을 분리하여 가로·세로형, 텍스트·아이콘형 등 여러 형태의 탭 메뉴를 하나의 세트로 관리합니다

11. 내비게이션 바 서비스의 주요 메뉴를 담는 상단 글로벌 내비게이션과 사이드 드로워를 화면 크기에 맞춰 안정적으로 구성합니다

오픈 예정

5장. 클론 디자인

1. 클론 디자인을 위한 키프레임 구성 성공적인 서비스 화면을 분석하고 단순화한 와이어프레임을 제작해 검증된 패턴을 이해합니다

2. 글로벌 내비게이션 로고, 검색창, 액션 아이콘을 조립해 데스크톱, 태블릿, 모바일 기기에 맞춘 상단 바 구조를 설계합니다

3. 디바이더 콘텐츠 흐름을 시각적으로 명확하게 구분해 주는 선(Divider) 요소를 만들어 화면에 배치합니다

4. 내비게이션 드로워 탭 컴포넌트를 기반으로 메뉴 개수와 형태가 유연하게 제어되는 사이드 드로워 메뉴 세트를 구축합니다

5. 탭 메뉴 기본 상태와 선택된 상태가 명확히 구분되는 탭 요소들을 조합하여 상단 탭 메뉴 영역을 완성합니다

6. 페이지 완성된 글로벌 내비게이션, 드로워, 바디 프레임을 하나의 튼튼한 전체 페이지 레이아웃으로 결합합니다

7. 콘텐츠 구성 앞서 만든 카드 컴포넌트들을 반복 배치하고 이미지를 교체하여 메인 화면의 실제 콘텐츠 영역을 완성합니다

8. 반응형과 모드 베리어블을 활용해 기기별로 자동 재배치되는 '반응형 UI'와 클릭 한 번에 전환되는 '다크 모드' 기술을 마스터합니다

강사

이영주

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

커리큘럼

[디자인 시스템의 이해] 01 디자인 시스템의 정의