25%
198,000원
148,500원
월 29,700원
5개월 할부 시
초급자를 위해 준비한
[UX/UI, Figma] 강의입니다.
배리어블은 일관된 사용자 경험을 제공하고 디자인 프로세스를 혁신적으로 개선할 수 있는 열쇠입니다. 피그마의 배리어블을 활용하여 함께 디자인 시스템을 만들어보세요!
✍️
이런 걸
배워요!
이런 걸
배워요!
배리어블을 활용하여 디자인 시스템 구축하기
디자인 토큰, 아토믹디자인을 기반으로 배리어블 개념 다지기
33+ 코어 디자인 컴포넌트 직접 처음부터 하나하나 제작하기
배리어블 모드를 활용하여 B2B, B2C, 모바일 UI 페이지 만들기
2023년 후반기 피그마 최신 업데이트 반영
이런 분들께 추천드려요!
🎓
학습 대상은
누구일까요?
학습 대상은
누구일까요?
디자인 시스템에 관심 있는 누구나
배리어블/디자인 토큰에 대해 생소하신 분
디자인 시스템이 궁금한 PM/개발자
피그마 실력을 한단계 업그레이드 하고 싶으신 분
📚
선수 지식,
필요할까요?
선수 지식,
필요할까요?
피그마 기초(기본 인터페이스, 오토레이아웃)
안녕하세요
볼드 UX 입니다.
볼드 UX 입니다.
저는 런던에서 Sr.프로덕트 디자이너로 일하는 볼드입니다.
제 경력은 리서처로 시작하여 프로덕트 디자이너로 커리어 전환 후 핀테크, 클라우드 테크, 마케팅 등 다양한 분야에서 경험을 쌓고 있습니다. 국내 석사 출신으로 해외교육 없이 런던에서 바로 취업하여 다양한 실무 경험을 하고 있으며, 실무에서 아래의 내용을 진행해왔습니다.
사용자 리서치 시스템 구축, 관리
디자인 시스템 구축, 관리,
피그마 UI/프로토타이핑
디자인 역량 코칭, 멘토링
인프런을 통해 제가 알고 있는 실무 노하우를 공유하고 이를 통해 저도 많이 배우고 싶습니다.
감사합니다.
경험 및 경력
(현) 런던 데이터 솔루션, K*회사, Sr. 프로덕트 디자이너
(전) 런던 글로벌 리서치 G* 회사, Sr. 프로덕트 디자이너
(전) 런던 핀테크 S* 회사, Sr. 프로덕트 디자이너
(전) 런던 클라우드 컴퓨팅 회사, UX/UI 디자이너
연세대 인지공학랩 리서처 출신
커리큘럼
총 81 개
˙ 13시간 29분의 수업
이 강의는 영상, 수업 노트가 제공됩니다. 미리보기를 통해 콘텐츠를 확인해보세요.
섹션 0. 강의 소개
5 강
∙ 6분
섹션 1. 피그마 배리어블과 디자인 토큰
5 강
∙ 31분
섹션 2. 배리어블과 파운데이션 세팅하기
12 강
∙ 2시간 9분
[실습] 배리어블 등록 전 색상 스타일 맛보기
04:51
배리어블 인터페이스와 친해지기
07:26
색상 배리어블 구조, 이름 짜보기
미리보기
09:28
[실습] 색상 배리어블 등록하기
24:40
간격 배리어블 스케일 구성짜기
09:01
[실습] 간격 배리어블 등록하기
11:01
[실습] 타이포 그래피 스타일 플러그인으로 만들어보기
06:50
아이콘 등록하는 방법, 그리고 팁
09:49
다양한 효과 그리고 높낮이를 나타내는 그림자효과 - 파트 1
15:13
다양한 효과 그리고 높낮이를 나타내는 그림자효과 - 파트 2(업데이트)
10:30
그리드 시스템과 반응형 기준점 설정하기
13:57
기타 베리어블 살펴보고 등록하기(업데이트)
06:34
섹션 3. 컴포넌트 만들기 위한 준비
4 강
∙ 12분
컴포넌트 만들기 전 라이브러리 세팅하기
04:05
컴포넌트 만드는 기본 레시피 순서
08:04
컴포넌트 워크시트 확인하기
[유의사항] 컴포넌트 Property Value 명명 정하기
섹션 4. 입력(Input) 컴포넌트 만들어보기
10 강
∙ 1시간 59분
버튼(Button)
21:41
체크박스(Checkbox)
07:05
라디오 버튼(Radio)
07:33
스위치 버튼(Switch)
10:40
라벨과 컨트롤 그룹(Label & Control Group)
14:32
텍스트 필드(Text Field)
14:12
텍스트 상자(Text Area)
11:16
셀렉트(Select & Dropdown menu) - 파트 1
14:47
셀렉트(Select & Dropdown menu) - 파트 2
12:03
입력 컴포넌트 마지막 점검하기
05:58
섹션 5. 디스플레이(Display) 컴포넌트 만들어보기
10 강
∙ 1시간 37분
아바타(Avatar)
17:14
아코디언(Accordion)
09:58
뱃지(Badge)
06:28
툴팁(Tooltips)
10:17
기본이 되는 구분선(Divider) - (구버전) 곧 아카이브 예정
04:47
기본이 되는 구분선(Divider) - 업데이트 버전
03:10
칩(Chips)
15:42
만능으로 쓰이는 기본 카드(Basic Cards)
10:14
테이블(Table)
16:39
디스플레이 컴포넌트 마지막 점검하기
02:53
섹션 6. 피드백(Feedback) 컴포넌트 만들기
6 강
∙ 1시간 16분
알림/경고 메세지 만들기
13:43
토스트(Toast)
11:55
스켈레톤 로더(Skeleton Loader)와 로딩 스피너(Loading Spinner)
19:08
프로그레스 바(Progress Bar)
05:41
슬롯 컴포넌트로 재활용 가능한 모달(Modal & Slot)
24:18
피드백 컴포넌트 마지막 점검하기
02:05
섹션 7. 네비게이션(Navigation) 컴포넌트 만들어보기
10 강
∙ 1시간 51분
간단한 기본 텍스트 링크(Link)
08:37
링크를 활용한 브레드크럼프(Breadcrumbs)
07:04
네비게이션 탭(Tabs)
10:37
모바일 하단 네비게이션(Bottom Navigation)
14:28
페이지네이션(Pagination)
08:07
메뉴를 활용한 사이드 네비게이션(Side Navigation) - 파트1
07:48
다양한 형태의 사이드 네비게이션(Side Navigation) - 파트2
16:15
상단에 위치하는 헤더와 메뉴(Header)
20:41
이미지 캐러셀(Carousel)
14:28
네비게이션 컴포넌트 마지막 점검하기
03:08
섹션 8. 모드 설정해서 배리어블 제대로 활용하기
6 강
∙ 1시간 24분
배리어블 모드 활용 맛보기
미리보기
05:01
모드를 활용한 다크모드 전환, 그리고 그 원리 배우기 - 파트 1
11:32
모드를 활용한 다크모드 전환, 그리고 그 원리 배우기 - 파트 2
15:12
브랜드 구조와 모드를 활용한 통합 브랜드 구현하기
15:32
모드를 활용한 반응형 디자인 구현하기
18:33
모드를 활용한 다중언어 지원 화면 만들기
18:28
섹션 9. 페이지를 만들기 전에 알아야할 사항
1 강
∙ 5분
컴포넌트 라이브러리 내보내기
05:28
섹션 10. 페이지 만들기 - B2B 이커머스 어드민 페이지
2 강
∙ 23분
컴포넌트 조합해서 기본 페이지 만들기
15:35
모드를 활용해서 다크모드, 반응형, 멀티 브랜드 구현하기
미리보기
08:23
섹션 11. 페이지 만들기 - B2C 이러닝 페이지
5 강
∙ 1시간 9분
헤더, 사이드 네비게이션 만들기
14:53
카드 만들기
15:44
카드 레이아웃 및 프로토타이핑
08:31
카드에 실제 데이터 입력하기
11:54
반응형 디자인 만들기
18:22
섹션 12. 모바일 OTT 서비스 페이지 만들기
4 강
∙ 41분
모바일 OTT 앱 메인 페이지 만들기
14:21
모바일 OTT 컨텐츠 상단 페이지 만들기
08:46
모바일 OTT 컨텐츠 하단 페이지 만들기
10:03
모바일 OTT 컨텐츠 데이터 연결하기
08:06
섹션 13. 2024 피그마 업데이트 (추가 예정)
0 강
섹션 14. 마지막 세션
1 강
[완강 이벤트] 강의를 마치며..
강의 게시일 : 2023년 11월 09일
(마지막 업데이트일 : 2024년 06월 02일)
수강평
총 57개
수강생분들이 직접 작성하신 수강평입니다.
5
57개의 수강평
5점
4점
3점
2점
1점
VIEW
추천 순
최신 순
높은 평점 순
낮은 평점 순
평점 순
높은 평점 순
낮은 평점 순
도움 되는 내용들이 많습니다. 문득문득 평소에 궁금했던 점들이 강의에 나와 저에게는 개념 정리가 잘 되었던거 같습니다. 충분히 많은 도움이 되고 있습니다. 감사합니다.
2023-11-24
강사님 강의 퀄리티 너무 좋아서 볼때마다 감동받습니다 :) 👍
이런 개념들을 혼자 터득하기까지 많이 힘드셨을텐데... 강의로 만들어 공유 주셔서 감사합니다!! 저같은 초초초 쥬니어디자이너에겐 가뭄의 단비같은 강의인거 같아요! 완강 화이팅해보겠습니다!!
2023-11-28
완강했습니다.
저는 현직자고, 피그마를 몇년째 매일 만지는 사람입니다. 제가 가진 스킬의 부족함이 있는지 확인차 강의를 결제하고 설연휴 이틀에 걸쳐 수강했습니다.
디자인시스템, 디자인 작업시 베리어블의 사용례를 아주 잘 익힐 수 있습니다.
피그마 업데이트 사항에 따라서 강의도 업데이트 해주셔서 특히나 좋았습니다.
밑에 분이 말씀하신대로 처음부터 강의의 모든 것을 다 따라하려하거나 초심자가 보기에는 상당히 어려울 수 있습니다.
하지만 이게 실무의 맛보기라는 점은 현직자들은 알고 있을 것입니다.
처음이라 어려운 것이지,
반복하고 또 반복하다보면 원리가 보이고
그 원리가 응용되고 반복된다는 점을 알면
금세 적응할 수 있습니다.
강의 만들어주셔서 고맙습니다.
한번 보고 마는 강의가 아닌 것이
타 강의와 차별화된 강점이라고 생각합니다.
2024-02-11
피그마가 일 년 동안 정말 많은 업데이트가 되면서 이걸 언제 배우고 실무에 어떻게 적용하면 좋을까에 대한 고민이 많았습니다. 그 고민을 덜어준 강사님께 정말 감사드립니다.
토큰 시스템은 들어봤지만 도전하지 못했던 저에게 베리어블을 통해 색상을 등록하는 거부터 디자인 시스템들을 하나하나 만들고 컴포넌트화하면서 베리언트 하는 방법을 기초부터 다질 수 있는 기회가 된 값진 시간이었습니다.
실무 하면서 어떻게 배리언트를 만들어야 편리한지 많이 알게 되어 업무 효율성이 매우 높아질 듯합니다.
저도 강의를 이렇게 빠르게 완강을 한 적이 없었던 것 같아요. 강의 하나하나가 길지 않은 시간이어서 더 좋았던 것 같습니다. 앞으로도 좀 더 좋은 강의 기대하고 있겠습니다.
2023-12-13
제대로 된, 깊이 있는 피그마 강좌를 찾고 있는데, 이 강좌를 듣지 않는다면 무조건 손해 보는 겁니다!
강의를 완강한 사람으로서 리얼 코멘트할게요.
저는 프론트엔드 개발자지만 UI/UX에 관심이 많아 포토샵이나 스케치 등을 어느 정도 쓸 수 있는 정도의 스킬을 갖고 있어 이 강의를 경험한 느낌 그대로 적어보려고 합니다. 피그마가 디자인 툴이긴 하나 6월 말에 Variables 및 Dev Mode가 추가되면서 엄청나게 강력해졌지만, 제대로 적용해보려면 그만큼 로지컬한 느낌을 받을 수 있어, 디자이너 입장에서는 알아야 지식이 많아진 거 같습니다.
저는 처음 완강을 할 때는 제대로 설명하고 있는지 유심히 살피면서 강의를 여러 번 눈팅?했고요. (한번 봐서는 잘 모르겠더라고요? 😓) 그리고 두 번째 보기 시작할 때는 따라 하기 쉬운 예제 위주로 간간이 따라 해봤습니다다. 이 강좌의 특징이 밀도가 높아 각 장마다다 술렁술렁 넘어가는 장이 없습니다. 처음부터 완벽하게 다 기억하고 다 따라하면 포기할 확률이 높을 거 같습니다. 바로 제가 초반에 그렇게 하다가 좌절하고, 다시 마음 잡고 속도보다는 이해를 중심으로 같은 영상을 여러 번 다시 보기 시작했습니다.
강좌를 듣는 사람 수준을 고려해서 말씀드리자면, 피그마에 대해서 완전 생초보 자는 어려울 수 있어요. 그러나 디자인 시스템에 대해서 더 알고 싶어 구매한 분들이라면 어렵지 않게 강의를 보고 따라 하실 수 있어요.
약간 지루할 수 있는 이론적인 부분이 초반에 있지만 초반만 좀 넘기면 정말 쓸모가 많은, 내공이 느껴지는 강의가 많았고 상당히 디테일하게게 설명합니다.
인내심을 갖고따라 하다 보니 어느샌가 디자인 시스템에 대한 이해 수준이 높아지는 것을 느낄 수 있었습니다.
실전에서 쓸 예제는 넘치고 넘쳤습니다. 한 번에 다 해치운다고 생각하지 말고 사탕을 입 안에 넣고 천천히 녹여 먹는다는 마음으로 강의를 보시면 실력이 쑥쑥 늘고 있다는 걸 느끼실 거라고 확신합니다.
제가 그랬습니다! 여러분도 한번 느껴보시길 추천드립니다.
2023-12-03