피그마(Figma)를 활용한 UI디자인 입문부터 실전까지 A to Z
에릭
디자인을 공부해본 적이 없는 비전공자 분들, 이제 막 UX디자인을 공부하기 시작한 학생들, UX 및 UI 디자인 취준생 분들을 위해 준비한 "피그마로 UI디자인하기 A to Z" 수업입니다. 포토샵 등 다른 툴을 전혀 모르는 분도 피그마만 활용해 UI디자인 전문가가 될 수 있도록 기초부터 고급 기능까지 알려드립니다.
입문
Figma, 웹 디자인, 모바일 디자인
반응형 UI디자인 완전 정복 with 피그마
피그마의 오토 레이아웃, 그리드, 컨스트레인츠 기능을 제대로 활용해 반응형 디자인을 마스터하고 싶은가요? 이 강의에서는 작은 UI 요소부터 카드, 테이블, 컴포넌트, 웹과 앱 화면까지 반응형 디자인으로 만들어내는 실력을 단계별로 키워갑니다. 취업 준비와 실무에서 바로 써먹을 수 있는 피그마 활용법을 익히고, 다양한 디바이스에 최적화된 반응형 인터페이스 디자인 능력을 마스터해보세요!
먼저 경험한 수강생들의 후기
이런 걸 배울 수 있어요
반응형 디자인에 대한 개념부터 실전 활용 능력까지 장착합니다.
피그마의 꽃 "오토레이아웃"을 마스터하여 반응형 디자인에 활용할 수 있습니다.
피그마의 오토레이아웃, 그리드, 컨스트레인츠 기능을 활용하여 작은 UI디자인 요소부터, 카드, 컴포넌트를 반응형으로 만들어봅니다.
반응형으로 웹과 앱을 모두 디자인할 수 있습니다.
하나의 디자인으로 다양한 디바이스 환경에 유연하게 대응할 수 있는 "반응형" 디자인 역량을 갖추게 됩니다.
개발자 및 이해관계자에게 더 효과적으로 디자인 핸드오프를 전달할 수 있습니다.
안녕하세요. 프로덕트 디자이너 에릭입니다. 👋
저는 현재 미국 뉴욕에 위치한 글로벌 테크 기업 TKWW(The Knot Worldwide)에서 시니어 프로덕트 디자이너로 일하고 있습니다. UX리서치부터 UI디자인, 디자인 시스템 구축 및 관리까지, UX/UI 전반을 아우르는 실무 업무를 담당하고 있고 면접관으로서, 지원자의 포트폴리오를 검토하고 평가하는 역할도 맡고 있어요. 그렇기 때문에 입문자나 취업을 준비하는 분들에게 어떤 역량이 실제로 필요한지 잘 알고 있습니다. 그리고 Amazon 베스트셀러에 오른 UX디자인 입문자를 위한 책 『Design thinking for beginners』를 집필하기도 했습니다.
이번 강의를 만들게 된 계기는 제가 실무에서 반응형 디자인과 이를 위한 피그마의 핵심 기능을 제대로 마스터한 이후, 디자인 생산성과 효율성이 몇 배 이상 향상된 경험을 했기 때문이에요. 그 핵심에는 피그마의 오토레이아웃, 그리드, 컨스트레인츠 기능을 활용한 체계적인 화면 설계 방식이 있었습니다.
이전에는 같은 디자인을 화면 사이즈별로 대응하는데 새로 만들고 수정하느라 시간이 너무 많이 들었어요. 하지만 지금은 하나의 디자인으로 다양한 디바이스에 유연하게 대응할 수 있는 반응형으로 UI 디자인 을 구축할 수 있게 되었고, 그 결과 반복 작업은 줄고, 디자이너-개발자 간 협업도 훨씬 매끄러워졌습니다. 저는 저의 경험과 지식, 실무 노하우를 바탕으로 반응형 디자인은 입문자/취준생 분들에게는 취업의 가능성을 크게 높이고, 반응형 디자인을 모르는 현업 디자이너에게는 업무 생산성을 크게 향상시킬 수 있도록 도와드릴 거에요. 이번 기회에 반응형 디자인을 제대로 배우고, 커리어 성장의 기회를 만들어보세요.
이런 분들께
추천드려요
학습 대상은
누구일까요?
취업의 목표를 더 빠르게 달성하고 싶은 UX/UI디자인 입문자 및 취업준비생
UX/UI디자이너와 협업을 하는, 또는 직접 디자인을 하는 개발자
오토레이아웃/그리드 등을 활용하여 기획서 제작에 대한 업무생산성을 높이고 싶은 PM/PO/서비스기획자
반응형 디자인을 잘 모르거나 오토레이아웃/컨스트레인츠 활용법을 잘 모르는 주니어 또는 현직 디자이너
선수 지식,
필요할까요?
피그마(Figma)에 대한 기초 지식 및 활용법
UX/UI 디자인에 대한 기본 개념
4,963
명
수강생
664
개
수강평
305
개
답변
4.8
점
강의 평점
7
개
강의
현재 뉴욕의 글로벌 테크 회사 The Knot Worldwide에서 시니어 프로덕트 디자이너로 일하고 있습니다.
뉴욕에 오기 전에는 서울에서 UI기획자로 일을 했습니다.
브런치 매거진 "디자인, 그리고 프러덕트"와 UX, UI 지식과 정보를 공유하는 "뉴욕 UX디자이너" 인스타그램과 페이스북을 운영하며 디자이너 및 예비 디자이너들과 소통하고 있습니다.
개인적으로는 세 아이👶의 아빠이며 요리🍲, 교육🏫에 관심이 많습니다.
집필 및 강의
• "뉴욕 프로덕트 디자이너가 알려주는 UX디자인 입문 A to Z" 책 출간 (링크: Yes24, 알라딘, 교보문고)
• 퍼블리 아티클 "서비스의 첫 인상을 결정하는 3초: 랜딩 페이지 UX 4가지 원칙" 발행
• Samsung SW Academy for Youth (SSAFY) UX/UI다자인 및 피그마 강사
• 1:1 멘토링 및 기업 강의 진행 (토픽: UX, UI디자인, UX퍼실리테이션, UX/UI 포트폴리오 제작 및 발행)
경험 및 경력
• (현) 뉴욕 The Knot Worldwide 시니어 프로덕트 디자이너
• (전) 서울 Pantech 모바일 앱 UI기획자
• 뉴욕 기반의 다수 스타트업과 UX/UI 컨설팅 프로젝트 진행
• 뉴욕 School of Visual Arts 디자인 대학원 졸업 / 전공: Interaction Design
• 한동대학교 학부 졸업 / 전공: 산업디자인
커리큘럼
전체
40개 ∙ (5시간 10분)
강의 게시일:
마지막 업데이트일:
수강평
전체
12개
4.9
12개의 수강평
Joy J수강평 1
∙
평균 평점 5.0
수정됨
5
75% 수강 후 작성스타트업에서 프론트엔드 개발을 하고 있지만 디자인까지 함께 맡고 있습니다. 그동안은 필요한 부분만 유튜브 자료를 찾아 더듬더듬 디자인을 진행했는데, 이번에는 빠른 시간 안에 반응형 디자인을 익혀야 했습니다. 강의가 실습 위주라 하나하나 직접 따라 해보거나, 먼저 시도한 뒤 확인할 수 있어서 반응형 디자인을 익히기에 단기간에 효과적인 것 같습니다! 특히 constraints의 원리를 설명해주신 부분이 큰 도움이 되었고, alignment가 적용되지 않는 상황에서 왜 그런지 짚어주셔서 제가 평소 놓쳤던 부분을 새롭게 이해할 수 있었습니다. 또 강의 중 파일 관련해서 어려움이 있었지만, 시차가 있음에도 불구하고 빠르게 피드백을 주셔서 감사했습니다...! 이번에는 그동안처럼 한땀 한땀 수치를 번거롭게 수정하는 방식이 아니라, 강의에서 배운 내용을 제대로 적용해 효율적으로 작업해보고 싶습니다. 정말 정말 감사합니다 ㅠㅠ! 마지막까지 화이팅해서 완강하겠습니다!
- 에릭지식공유자
반응형 디자인 강의를 통해 도움을 드릴 수 있어 기쁘네요. 저도 오토레이아웃이나 constraints를 안쓰던 시절에 한땀 한땀 많은 수작업을 했던 때가 기억납니다. 지금은 생산성이 몇십배는 높아졌다고 말씀드릴 수 있을 것 같아요. Joy님도 강의 내용을 통해 실무에 적용해보신다면 업무 효율성을 높이시리라 생각됩니다. 귀한 후기 감사드리고 앞으로 계획하시는 일들 모두 잘 이루시기를 응원하겠습니다.
- 고하경
수강평 1
∙
평균 평점 5.0
5
50% 수강 후 작성저는 '왜' 해야하는지가 굉장히 중요한 동기로 작용하는 사람입니다. 사실 기능들을 많이 안다고 해도 적용하는 법을 모르거나 실용적이지 않다면 알고있는 정보에 대한 효용성도 떨어지고 기능 학습에 대한 의미도 많이 퇴색될 것 같아요. 하지만 이 강의가 가장 좋았던 부분은 학습 -> 실무 적용으로 만들어졌다기 보단 실무 어려움 -> 학습 -> 어려움 탈피 루트로 만들어졌음이 잘 느껴져서였습니다. 실제로 설명해주시는 방식도 이 기능이 실무에서 왜 중요한지 -> 어떻게 적용해볼 수 있을지 + 실제 사례 구성이라 더 머리에 쏙쏙 박혔습니다. 그리고 쉽게 설명해주시다 보니 막연하게 어려운 기능들이라고 생각했던 부분에 대해 부담감을 모두 허물 수 있었습니다. 그리고 취준생으로서 실무에서 '왜' 자주 쓰이는지를 강의 중간 중간 알려주셔서 학습을 하는 도중에도 한번 더 기억해야지 하고 살펴보게 됩니다. 덕분에 막연하게 두려웠던 실무에 대한 부담감도 줄어들었어요! 감사합니다:)
- 에릭지식공유자
정성스럽게 써주신 후기 감사드립니다. 저 역시 반응형 디자인, 그 중에서도 특히 오토 레이아웃을 처음 배우고 공부할 때 이걸 실무에서 어떻게 적용해야 할지 잘 몰라 답답함을 느꼈던 때가 기억나네요. 즉 기능 자체를 배우기 위한 게 아니라 반응형 디자인이란 문제를 해결하는 방법을 배우고 싶었는데 그게 쉽지 않았던 기억이 있어요. 그래서 이 강의를 만들면서도 수강생분들, 특히 입문자나 취업을 준비하는 분들이 어떻게 하면 더 이해하기 쉽게 실무에 적용 가능한 스킬을 얻으실 수 있을까를 고민하면서 커리큘럼과 내용을 구성하려고 했답니다. 즉, 이 강의를 듣고 반응형 디자인을 마스터한 지원자가 면접관의 입장에서 이 분은 반응형 디자인 능력이 준비가 되었구나라고 생각이 들도록 해야겠다라고 목표를 잡고 강의를 만들고자 했어요. 이 강의를 통해 막연하고 두려웠던 실무의 부담감이 줄었다고 하시니(!!) 더할 나위 없이 기쁘고 이 강의를 만든 보람을 크게 느낍니다 :) 다시 한번 귀한 후기 및 피드백 남겨주셔서 감사드리고 앞으로 계획하시는 모든 커리어 계획들이 잘 이뤄지기를 깊이 응원하겠습니다.
- JAY_P
수강평 2
∙
평균 평점 5.0
5
80% 수강 후 작성소중한 강의 너무 감사합니다! 피그마 파일도 공유해주셔서 직접 같이 실습하기 좋았어요. 다만, 처음에 자료가 있는지 빠르게 인지하지 못해서 강의 수강 도중에 찾으러 다녔지만요ㅎㅎ 직관적으로 비교, 예시, 비유 등등으로 설명해주셔서 초보자도 쉽게 이해할 수 있고, 피그마 기능 중에 눈에 띄지 않는 부분마저도 어떤 효과와 활용도가 있는지 알 수 있어서 너무 좋았어요! 게다가 섹션마다 퀴즈들을 통해 한 사이클에 대한 내용을 다시 상기하면서 복습하게 되서 알아가는 재미가 있어요.
- 에릭지식공유자
귀한 후기 나눠주셔서 감사합니다. 초보자 입장에서도 이해하기 쉽게 하는게 강의를 만들면서 세웠던 목표였는데 도움이 되었다고 하셔서 기쁘네요. 그리고 피그마 파일 관련 피드백도 감사드려요. 피그마 파일을 찾기 어려울 수 있다는 점을 이해하고 파일은 첫번째 섹션으로 위치를 변경해두었어요. 다시 한번 후기 감사드리고 앞으로 계획하시는 일들 잘 이루시기를 깊이 응원할게요~!
월 ₩19,800
5개월 할부 시
₩99,000
에릭님의 다른 강의
지식공유자님의 다른 강의를 만나보세요!
비슷한 강의
같은 분야의 다른 강의를 만나보세요!
