맛있게 배우는 피그마 디자인 레시피

피그마 기초부터 컴포넌트 설계 실무 클론 디자인까지

강사

이영주

강의

26강

시간

6h 53m

레벨

초급

기간

무제한

정가

157,600원

총 결제 금액

157,600원

적립 예정

4,720P

강의 소개

강사

커리큘럼

수강 후기

커뮤니티

피그마 핵심 기능을 손에 익히고 실무에서 쓰이는 컴포넌트를 직접 설계한 뒤 유튜브 화면을 클론 디자인하며 반응형과 다크 모드까지 완성하는 강의입니다.

맛있게 배우는 피그마 디자인 레시피

피그마 기초부터
컴포넌트 설계
실무 클론 디자인까지

한번에

피그마 핵심 기능을 손에 익히고
실무에서 쓰이는 컴포넌트를 직접 설계한 뒤
유튜브 화면을 클론 디자인하며
반응형과 다크 모드까지 완성하는 강의입니다.

지금 수강 신청하기 →

수강료 157,600원 · 무이자 할부 시 월 13,100 x 12개월

48개 FIG 실습 파일 포함 카드

온라인 VOD | 수강 기간 무제한 | 도서 + 영상 시너지 학습

이런 분께 추천합니다

하나라도 해당되면, 이 강의가 답입니다

STEP 1

피그마를 처음 배우는 분

컨스트레인트, 오토레이아웃 등 핵심 기능부터 기초 체력을 다지고 싶은 분

STEP 2

컴포넌트를 직접 설계하고 싶은 분

버튼, 인풋필드, 카드, 탭 등 실무 컴포넌트를 체계적으로 만들고 싶은 분

STEP 3

클론 디자인으로 실무 감각을 키우고 싶은 분

실제 유튜브 화면을 따라 만들며 반응형과 다크 모드까지 완성하고 싶은 분

STEP 4

도서와 영상을 함께 학습하고 싶은 분

영상에서는 추가 컴포넌트와 실전 조작을, 도서에서는 심화 이론을 보완하는 시너지 학습

숫자로 보는 강의

3 PARTS

단계별 완성 구성

26강

실습 중심 영상

48개

FIG 실습 파일

13종

컴포넌트 직접 설계

이 강의만의

3가지 차별점

POINT 01

피그마 핵심 기능, 기초부터 탄탄하게

준비 없이 컴포넌트를 만들면 헷갈리고 어려워집니다. 컨스트레인트, 오토레이아웃, 컴포넌트와 인스턴스, 베리언트 — 이 4가지 핵심 기능을 확실히 다져두면 이후 과정이 훨씬 수월해집니다.

컨스트레인트

화면 크기가 바뀔 때 자식 요소의 위치 기준점을 고정하는 반응형 UI의 출발점

오토레이아웃

간격·패딩·정렬을 자동화하고 리사이징으로 다양한 화면 크기에 대응

컴포넌트 · 베리언트

재사용 가능한 컴포넌트를 만들고 베리언트로 상태를 한 번에 관리

POINT 02

실무 컴포넌트 13종을 직접 설계

도서에서 다루는 컴포넌트 외에도, 영상에서는 뱃지·스켈레톤·캐러셀 등 실무에서 자주 쓰이는 추가 컴포넌트까지 직접 만들어봅니다. 컴포넌트의 이름과 역할부터 이해한 뒤, 하나씩 완성해갑니다.

버튼

인풋필드

아바타

탭

뱃지

내비게이션바

프로그래스

스켈레톤

카드

캐러셀

POINT 03

유튜브 클론 디자인으로 실무 완성

실제 유튜브 화면을 캡처해 와이어프레임을 구성하고, 앞서 만든 컴포넌트를 조합해 전체 페이지를 완성합니다. 데스크톱·태블릿·모바일 반응형과 라이트/다크 모드까지 구현하며 실전 감각을 키웁니다.

와이어프레임 → 페이지

캡처 화면을 단순화하고 컴포넌트를 배치해 페이지를 구성

반응형 대응

데스크톱·태블릿·모바일 세 가지 해상도에 맞춰 구현

라이트 / 다크 모드

모드 전환까지 적용해 최종 결과를 확인

수강 전후,

이렇게 달라집니다

BEFORE

피그마 기초

오토레이아웃을 알지만 리사이징 옵션은 잘 모르겠음

컴포넌트

컴포넌트 종류가 너무 많아서 뭘 만들어야 할지 감이 안 잡힘

실무 적용

기능을 배워도 실제 화면을 어떻게 구성하는지 모르겠음

반응형

데스크톱·태블릿·모바일을 각각 따로 만들고 있음

AFTER ★

피그마 기초

컨스트레인트·오토레이아웃·베리언트를 자유자재로 활용

컴포넌트

버튼부터 내비게이션바까지 13종 컴포넌트를 직접 설계

실무 적용

유튜브 클론 디자인으로 와이어프레임부터 페이지 완성

반응형

하나의 프로젝트에서 반응형 + 라이트/다크 모드 해결

커리큘럼

피그마 기초 → 컴포넌트 구성 → 클론 디자인, 3단계 완성

PART 1

피그마 기초

5강 · 준비/완성 FIG 파일 각 10개

01. 컨스트레인트

부모 프레임 크기가 바뀔 때 자식 요소의 위치·크기를 고정하는 규칙을 이해하고, 반응형 화면의 기초를 만듭니다.

02. 오토레이아웃 1

오토레이아웃으로 기본 구조를 적용하고, 간격과 정렬을 자동으로 관리하며, 위치 설정으로 레이아웃 흐름을 제어합니다.

03. 오토레이아웃 2 — 리사이징

리사이징 옵션으로 크기 변화에 대응하고, 오토레이아웃 제안·해제·독립 배치까지 활용합니다.

04. 컴포넌트와 인스턴스

컴포넌트와 인스턴스를 만들고, 인스턴스를 수정해 반복 요소를 효율적으로 관리하는 방법을 배웁니다.

05. 베리언트

베리언트를 활용해 버튼·UI 상태를 한 번에 관리하는 방법을 확실하게 이해합니다.

PART 2

컴포넌트의 구성

13강 · 준비/완성 FIG 파일 각 24개

01. 컴포넌트의 이해

수많은 컴포넌트의 이름과 역할을 정리하고, 이후 설계 과정의 기반을 마련합니다.

02. 버튼 1

기본 버튼을 만들고 베리어블 속성을 지정하여 컴포넌트 세트의 기초를 구성합니다.

03. 버튼 2

베리언트로 속성을 제어하고 컴포넌트 세트 스타일을 완성합니다.

04. 인풋필드 1

레이블, 헬퍼 텍스트, 입력 필드 요소를 정의하고 기본 구조를 만듭니다.

05. 인풋필드 2

입력 필드 컴포넌트 세트를 구성하고 인풋 필드 세트를 완성합니다.

06. 아바타

아바타 요소를 정의하고 아바타 세트를 구성합니다.

07. 뱃지

상태 표시와 알림에 활용되는 뱃지 컴포넌트를 설계합니다.

08. 프로그래스

상태 변화를 표현하는 진행 바 UI를 구성합니다.

09. 스켈레톤

콘텐츠 로딩 중 표시되는 스켈레톤 UI를 만듭니다.

10. 카드

디스플레이 카드를 만들고 콘텐츠 구조를 완성합니다.

11. 캐러셀

콘텐츠를 슬라이드 형태로 보여주는 캐러셀을 설계합니다.

12. 탭

선택 상태를 정의하고 탭 컴포넌트 세트를 구성합니다.

13. 내비게이션바

메뉴 세트를 구성하고 내비게이션 드로워 UI를 완성합니다.

PART 3

클론 디자인

7강 · 준비/완성 FIG 파일 각 14개

01. 와이어프레임 구성

실제 유튜브 화면을 캡처해 단순화한 와이어프레임을 만들고 전체 구조를 설계합니다.

02. 글로벌 내비게이션

서비스의 상단 글로벌 내비게이션 영역을 클론 디자인합니다.

03. 사이드 메뉴

내비게이션 드로워를 활용해 사이드 메뉴 구조를 만들고 상태별로 설계합니다.

04. 탭 메뉴 바

상태와 스타일을 고려한 탭 UI를 구성합니다.

05. 디스플레이 카드

카드 컴포넌트를 활용해 바디 콘텐츠를 구현합니다.

06. 콘텐츠 페이지

GNB, 드로워, 바디 영역을 결합해 전체 페이지를 완성합니다.

07. 반응형과 모드

데스크톱·태블릿·모바일 반응형을 구현하고, 다크 모드까지 적용해 최종 결과를 확인합니다.

피그마 기초부터 클론 디자인까지,
한 강의로 끝내고 싶다면

강의당 13,100원에 시작하기 →

총 157,600원 · 수강 기간 무제한 · 48개 FIG 파일 제공

강사 소개

이영주

맛있는 디자인 시리즈 저자
청운대학교 멀티미디어학과 교수로 재직 중

Western Sydney University에서 Digital Media를 전공

✓

최신작

'맛있는 디자인 피그마 with AI' 2026년 2월 출간 (한빛 미디어)

✓

주요 저서

한빛아카데미(주)에서 출간한 [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)] 등 다수

수강생 후기

★ 4.8 · 맛있는 디자인 시리즈 수강생 평점

★ 5.0

mj_des***

컨스트레인트 파트에서 왜 그렇게 설정하는지 이유까지 설명해주셔서 이해가 잘 됐어요. FIG 준비 파일이 있어서 바로 따라할 수 있는 점이 좋았습니다.

디자인 전공 학생 · 수강 완료

★ 5.0

uxlab***

컴포넌트 구성 파트가 특히 좋았습니다. 버튼, 인풋필드 같은 기본 컴포넌트를 베리언트로 체계적으로 만드는 과정이 실무에 바로 적용할 수 있을 만큼 실용적이에요.

현직 UI 디자이너 3년차 · 수강 완료

★ 4.5

dev_soy***

프론트엔드 개발자인데 컴포넌트 종류와 역할이 체계적으로 정리되어 있어서 디자이너와 소통할 때 큰 도움이 됩니다. 도서와 함께 보니 시너지가 확실해요.

프론트엔드 개발자 · 수강 완료

★ 5.0

figma_ne***

클론 디자인 파트가 가장 인상적이었어요. 유튜브 화면을 따라 만들면서 와이어프레임부터 반응형과 다크모드까지 한 번에 배울 수 있어서 포트폴리오에 바로 넣을 수 있었습니다.

취업 준비생 · 수강 완료

★ 4.5

pm_kyun***

PM으로서 디자이너에게 컴포넌트를 요청할 때 어떤 기준으로 이야기해야 하는지 감이 잡혔습니다. 내비게이션바, 탭, 카드 같은 컴포넌트의 구조를 이해하니 협업이 훨씬 편해졌어요.

프로덕트 매니저 · 수강 완료

지금 시작하세요

피그마 기초부터 실무 클론 디자인까지, 한 강의로 끝

맛있게 배우는 피그마 디자인 레시피 수강료

157,600원
카드 무이자 할부 시 월 13,100 x 12개월

수강 기간 무제한

26강 영상 강의

48개 FIG 실습 파일

✓

피그마 핵심 기능 5강

✓

13종 컴포넌트 설계

✓

반응형 + 다크모드

✓

유튜브 클론 디자인

지금 수강 신청하기 →

강사

이영주

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)》 등 다수가 있습니다.

커리큘럼

0차시_[인트로] 강좌 오리엔테이션