피그마(Figma)를 활용한 UI디자인 입문부터 실전까지 A to Z
피그마(Figma)를 활용한 UI디자인 입문부터 실전까지 A to Z
수강정보
(4개의 수강평)
34명의 수강생
20% 할인, D-9
66,000원
82,500원
지식공유자 : 에릭
76회 수업 · 총 9시간 18분 수업
기간 : 12개월동안 무제한 시청
수료증 : 발급 강의
수강 난이도 : 입문

이 강의는

디자인을 공부해본 적이 없는 비전공자 분들, 이제 막 UX디자인을 공부하기 시작한 학생들, UX 및 UI 디자인 취준생 분들을 위해 준비한 "피그마로 UI디자인하기 A to Z" 수업입니다. 스케치 앱, 포토샵을 전혀 모르는 분도 피그마만 활용해 UI디자인 전문가가 될 수 있도록 기초부터 고급 기능까지 알려드립니다.

입문자도, 비전공자도 차근차근 
UI디자인 능력을 갖춰나갈 수 있어요.

안녕하세요.
뉴욕에서 프로덕트 디자이너로
활동하고 있는 에릭입니다. 👋

저는 글로벌 테크 회사인 The Knot Worldwide (TKWW) 의 뉴욕 사무실에서 프로덕트 디자이너로 일을 하고 있어요. 제가 프로덕트 디자이너로 하는 일을 말씀드리면, 먼저 사용자에 대해서 배우고 그들의 피드백을 받는 유저리서치 일부터, 사용자에 대한 이해를 바탕으로 만들게 되는 와이어프레임, 정보구조 설계와 같은 UX디자인, 디자인 시스템을 제작하고 실제 사용자가 사용하게 될 최종 UI디자인 산출물을 만드는 UI디자인까지 모두 담당하고 있습니다. 지금은 이렇게 UX와 UI, 즉 UX 프로세스에 해당하는 거의 모든 부분에 오너십을 갖고 있지만 처음부터 그렇지는 않았습니다. 

“기획 일만 했던 내가 3개월만에
UI디자인 능력을 갖추게 된 사연”

저는 뉴욕에 오기 전에 서울에서 몇 년간 기획자로 일을 했는데요. 당시에 하던 일은 주로 파워포인트로 와이어프레임 즉, UI기획서를 만드는 일과 사용자 조사를 하는 일이었어요. 파워포인트로 와이어프레임을 만드는 일은 시각적인 완성도를 요구하지 않았기 때문에 제가 시작을 하는데 있어서 어려움이 없었어요. 그런데 UI디자인은 제가 할 수 있는 분야가 아니라고 생각을 했어요. UI디자이너와 협업을 할 일이 있었지만 제가 UI디자인을 직접 하지는 않았구요. 

👉 서울에서 기획 일을 하던 시절 모습과 기획 문서 일부

UI디자인은 선천적으로 시각적인 감각이나 디자인 능력이 뛰어난 사람이나 가능한 일이라고 생각했어요. 저에게는 이 능력을 갖기 위한 벽이 너무 높아보였던 거죠. 그런데 저는 커리어를 업그레이드하기 위해 유저리서치와 기획, UI디자인을 모두 담당하는 프로덕트 디자이너가 되어야겠다는 생각을 하게 되었어요. 그러기 위해서는 UI디자인 능력을 갖추어야 했는데요. 이게 저에게는 가장 큰 난관이었어요. 막상 시작을 한다고 해도 어디서부터 어떻게 배워야 할지도 몰랐고요. 그래도 목표가 생겼으니까 방법을 찾아보기 시작했는데요. 방법을 찾던 와중에 감사하게도 좋은 멘토들을 만났고, 좋은 방법들을 알게 되었어요.

그리고 이렇게 방법을 알게 되니, ‘UI디자인 능력을 갖추는 게 나에게 불가능한 일은 아니다’라는 자신감을 갖게 되었어요. 그렇게 UI디자인 공부를 시작한 지 3개월만에 첫 UI디자인 프로젝트를 완료하였고, 이건 제가 프로덕트 디자이너로 첫 직장을 잡는 데 중요한 역할을 했습니다.

 

👉 늦깎이로 배워서 진행했던 UI 프로젝트들

저는 이 배움과 훈련의 과정을 통해, 방법만 잘 안다면 시각적인 감각이 특별하지 않거나, 디자인을 전공하지 않은 사람도 UI디자인 능력을 충분히 갖출 수 있다는 것을 알게 되었어요.

저는 이 수업을 통해서 UI디자인 능력을 빠른 시간 안에 갖추기 위해 넘어야 했던 산들과 이를 극복할 수 있었던 비결을 알려드릴 거예요. 그래서 저와 비슷한 어려움을 갖고 계신 분들께서 피그마(Figma) 툴을 활용하여 UI디자인 능력을 갖출 수 있도록 안내하겠습니다.

1. 이 강의를 통해 무엇을 얻을 수 있을까? 🙌 

① UI디자인 프로세스 이해, 그리고 내 것으로 만들기

한 가지 질문을 드릴게요. 🙋 지금 보고 계신 것들은 굉장히 유명한 앱들의 대표적인 화면들인데요. 아주 멋지게 디자인된 화면입니다. 이 화면이 나오기까지 디자이너는 어떤 과정을 거쳤을까요? 피그마나 스케치(Sketch) 앱을 켜고 단숨에 그려냈을까요?

이미지 출처: 스포티파이, 에어비앤비

여기에 대해 제 생각을 말씀드리면, 대부분의 UX/UI디자인 프로젝트들은 이러한 화면이 나오기까지 많은 과정과 고민을 거치고, 사용자에게 더 나은 서비스를 제공하기 위해 계속해서 업데이트가 된다는 거예요. UI디자인은 UX/UI디자인이라는 큰 그림 안에서 문제에 대한 솔루션을 찾아가는 과정이라고 볼 수 있는데요. 이 수업에서는 이 UI디자인을 위해 밟아야 할 프로세스와 활동에 대해서 알려드릴 거예요.

이 과정들을 밟는 데는 이유가 있어요. UI디자인을 잘하기 위해서는 단순히 멋지고 쨍한 최종 UI디자인 화면을 바로 그리는 게 아니라, 각각의 단계를 통해 팀원 또는 클라이언트와 효과적으로 커뮤니케이션을 하고 궁극적으로 사용자에게 가장 좋은 경험을 제공할 수 있어야 해요. 여러분들은 각 단계를 왜 밟는 건지 그 이유를 이해하고 본인이 직접 한 단계 한 단계를 밟을 줄 알아야 하죠. 저는 이 강의를 통해 여러분들께서 피그마를 활용해 각 단계를 밟을 수 있는 능력을 갖춰 이 프로세스가 여러분의 것이 될 수 있도록, 즉 UI디자인의 전문성을 갖출 수 있도록 수업을 준비했어요.

👉 제가 일을 할 때 밟는 UI디자인 프로세스

② 디자인 실습을 통해 UI디자인 실전 능력 갖추기

앞서 UI디자인을 잘하기 위해서는 UI디자인 프로세스를 밟는다고 했죠. 수업을 통해 이 프로세스가 여러분의 것이 되도록 하는 게 이 수업의 목적입니다. 이를 위해 무엇보다 중요한 것은 실습을 통해 이 수업의 실무 각 챕터와 실전 예제들을 따라해보면서 실제로 UI디자인의 단계를 밟아보는 겁니다. 그렇다면 각 단계별로 만들게 될 산출물은 어떤 것인지 예시를 통해 말씀드릴게요.

▪️ 스케치와 와이어프레임을 만들고 활용하는 능력

스케치는 주어진 문제를 해결할 수 있는 아이디어를 생각해보고 러프하게 그려보는 거에요. 스케치의 장점은 빠른 시간 안에 아이디어를 쉽게 수정해볼 수 있다는 겁니다. 뒤쪽 단계로 아이디어가 디벨롭될 수록 시각적 완성도가 올라가 수정하는 시간이 더 많이 걸리거든요.

와이어프레임(Wireframe)은 스케치를 통해 나온 아이디어를 더 고도화하고, 화면과 각 화면에 대한 기능들의 정의를 내려줍니다. 그리고 화면간 흐름을 연결시켜주는데요. 와이어프레임은 UI디자인 단계로 가기 위한 뼈대라고도 할 수 있어요. 와이어프레임은 UI기획자와 UI디자이너의 업무가 완전히 분업 형태로 되어 있을 경우 UI기획자가 담당을 하기도 합니다. 하지만, 프로덕트 디자이너나 UX/UI디자이너의 경우 와이어프레임도 함께 만들 줄 알아야 해요.

👉 발로 그린 것 같은ㅎㅎ 제가 그렸던 스케치에요. 하지만 실무 및 현업에서 이런 스케치는 굉장히 강력할 수 있어요!

👉 화면, 화면 흐름도 등이 정의된 와이어프레임

▪️ UI디자인과 프로토타이핑을 만들고 활용하는 능력

하이파이 프로토타입(Hi-Fi Prototype)으로 부르기도 하는 UI디자인은 앞서 나온 와이어프레임을 토대로 시각적 완성도가 높은 화면을 그려줍니다. 이 단계에서는 폰트와 컬러, 아이콘 등 실제 사용자가 사용하게 될 수준의 비주얼이 나오는데요. 이 단계 역시 철저하게 사용자에게 가장 적합한 경험이 무엇인지를 고민하는 게 중요합니다. 이 강의에서는 사용자를 중심에 두기 위해 알아야 할 디자인 원리들을 함께 다룰 거에요. 이론 위에 실전 능력을 쌓아올린다면 기본기가 탄탄한 디자이너가 될 수 있어요! 👍

프로토타이핑은 이렇게 만들어진 각 화면을 서로 연결시켜줌으로써 사용자 입장에서는 마치 구동이 되는 것처럼 만들어줍니다.

👉 시각적 완성도를 높이는 단계, UI디자인

👉 프로토타이핑을 통해 코딩 없이 구동이 되는 화면

▪️ 디자인 시스템, 그리고 핸드오프를 만드는 능력

최종적으로 만들어진 UI디자인을 토대로 스타일 가이드, 콤포넌트 등 디자인 시스템을 어떻게 만들 수 있는지 알려드릴 거예요. 디자인 시스템이 있으면 사용자에게는 일관된 사용자 경험, 인터페이스를 제공하고, 디자이너와 개발자는 효율적으로 디자인과 개발을 할 수 있으며 시간을 아낄 수 있기 때문에 실무에서 매우 강력할 수 있어요. 💪

마지막으로, UI디자인의 최종 단계라고 할 수 있는 핸드오프(Hand-Off, HO)는 실제 개발이 될 수 있도록 세부적인 요소, 예를 들면 텍스트나 버튼의 사이즈가 몇 픽셀인지와 같은 것들을 구체적으로 정의하고 개발자에게 넘기는 단계입니다.

👉 디자인 시스템의 중요한 요소인 콤포넌트

👉 개발을 위해 제작하는 디자인 산출물, 핸드오프

③ UI디자인을 위한 꿀팁 대방출! 🍯

디자인을 공부하기 위한 레퍼런스 자료 등, 입문하시는 분들이 더 빠르고 쉽게 원하는 능력을 얻을 수 있도록 많은 꿀팁들을 방출합니다. 제가 몇 년간 UX 및 UI디자인 일을 하면서 알게 된 지식과 정보를 공유해드릴게요. 그리고 제게 UI디자인을 배웠던 분들이 자주 물어보시는 질문들에 대해서도 다룰 거예요. 더 궁금한 부분이 있다면 질문란에 글을 남겨주세요^^

④ 커리어 설계, 그리고 로드맵 🚀

수업을 듣고 나면, UI디자인 능력을 갖추게 된 이후 UX/UI디자이너 및 프로덕트 디자이너가 되는 등 목표하는 커리어를 이루기 위해 다음 단계로 무엇을 해야 할지 구체적인 계획을 짤 수 있습니다. 저는 여러분이 목표를 달성하기 위해 어떤 활동들을 하는 것이 좋은지 추천과 팁을 드릴 겁니다.

2. 누가 이 수업을 들어야 할까? 🧑🏻👩🏻

✔️ 프로덕트 디자인, UX/UI 디자인 입문자

첫째로는 프로덕트 디자이너, UX/UI디자이너, UI디자이너를 꿈꾸는 입문자 분들이에요. 물론 디자인 비전공자도 포함입니다. 이 커리어 목표를 달성하기 위해서는 UI디자인을 할 줄 아는 능력을 갖추는 것이 필수인데요. 이 수업을 잘 따라온다면 기초적인 지식과 이론, 그리고 실전 능력까지 겸비해 원하는 목표를 앞당겨 달성할 수 있을 거예요. 

✔️ UX/UI디자이너가 되고 싶지만 시각적인 능력이 부족하다고 생각하는 분들

앞서 저는 시각적인 능력이 부족하다고 느꼈다고 했는데요. 이를 극복했던 비결을 알려드려 여러분 또한 UI디자인 능력을 갖출 수 있도록 할 거예요. 디자이너가 되기 위해서는 UI디자인 프로세스를 잘 이해하고 각 단계별 산출물을 어떻게 만드는지, 툴은 어떻게 써야 하는지 알아야 하는데요. 이 수업을 듣고 나시면 이 목적을 이룰 수 있을 거예요.

✔️ 피그마를 마스터하고 싶은 분들

이 강의에서는 피그마의 아주 기초적인 기능인 도형, 텍스트를 만드는 것부터 고급 기능인 UI디자인, 핸드오프 등을 만드는 것까지 차근차근 단계를 밟아나갈 거예요. 그렇게 입문자 분들이 피그마를 마스터하고, 궁극적으로는 UI디자인 전문능력을 키울 수 있도록 수업을 설계했습니다. 특히 저는 이 강의를 통해 많은 실전 예제를 제공하려고 했어요. 이 부분을 특히 더 열심히 따라해보신다면 도움이 많이 될 겁니다.

✔️ UI디자인의 기본기를 탄탄하게 하고 싶은 분들

UX, UI디자인의 핵심은 사용자를 만족할 때까지, 또는 사용자가 겪는 문제를 해결해 줄 때까지 디자인의 프로세스를 밟고 또 반복(이터레이션, iteration)하는 것입니다. 앞서 말씀드린 프로세스를 밟으면 사용자를 위해서 훨씬 더 많은 부분들을 고려한 탄탄한 앱 또는 서비스를 만들 수 있습니다. 이 수업을 듣고 나면 단순히 예쁜 앱을 디자인하는 능력뿐만 아니라 프로세스의 각 단계를 어떻게 활용할지, 그래서 궁극적으로 사용자를 위해 더 좋은 경험을 어떻게 제공할 수 있을지 고민하는 디자이너가 되어 있을 거예요. 피그마를 배우는 건 각 단계를 밟을 수 있는 기술적인 역량, 전문성을 뒷받침해주기 위해서고요.

3. 왜 피그마인가? 🤔

✔️ 하나로 모든 걸 할 수 있는 All-in-one 툴 피그마! 👌

UI디자인 프로세스에서 각 단계별로 사용할 수 있는 여러 가지 도구가 있어요. 어도비 XD, 스케치, 피그마 등이죠. 그 중에서 피그마만큼 UI디자인을 위해 필요한 모든 활동을 지원해주는 앱은 없는 것 같습니다. 하나의 앱으로 거의 전 과정을 끝낼 수가 있는 것이지요. 

스케치 앱을 사용할 경우, 프로토타이핑 단계는 인비전(Invision)을 함께 써야 팀원들과 효율적으로 공유를 할 수 있어요. 스케치 앱 자체적으로 프로토타이핑 기능이 있긴 하지만, 오프라인 기반의 툴이기 때문에 팀원 또는 클라이언트들과 온라인으로 효과적으로 공유하는 데 한계가 있습니다. 그리고 핸드오프를 위해서는 제플린을 써야 하고요.

하지만 피그마를 사용하면 와이어프레임부터 핸드오프까지 모든 과정을 하나의 앱으로 해결할 수 있어요. 저는 원래 스케치를 쓰다가 피그마로 갈아타게 되었는데, 업무를 더 효과적으로 할 수 있었고 정말 많은 시간을 절약할 수 있었어요. 

👉 "피그마 = 스케치 + 인비전 + 제플린"

✔️ 윈도우, 맥북 모두에서 사용 가능해요 👏 

통계상 UI디자인 툴 중 많이 쓰이는 스케치 앱은 윈도우에서는 사용을 할 수 없어요. 하지만 피그마는 온라인 기반의 툴이기 때문에 Safari, Chrome 등 브라우저만 있다면 사용할 수 있어요. 윈도우 또는 맥 OS 등 어떤 OS를 쓰는지 상관없이 사용할 수 있는 것이지요.

✔️ 협업에 최적화된 온라인 기반의 디자인 툴 

피그마는 온라인 기반의 툴인 만큼 실시간으로 팀원 또는 클라이언트들과 협업을 하고, 커뮤니케이션을 하기에 정말 좋은 툴이에요. 디자이너와는 실시간으로 함께 디자인 작업을 할 수 있고, 개발자 프로덕트 매니저 등과 디자인 작업물을 공유하고 또 이에 대해 댓글을 작성하고 공유하는 기능이 편리하게 갖춰져 있습니다.

👉 팀원들과 실시간 협업이 정말 편리해요.

✔️ 디자인 작업의 생산성을 높여주는 무료 플러그인과 템플릿 😀

피그마에는 써드 파티에서 제작한 많은 무료 디자인 템플릿과 플러그인이 있어요. 이것들을 잘 활용하면 디자인을 위한 생산성을 몇 배에서 몇십 배 이상 높일 수 있습니다. 저는 이 강의에서 템플릿 및 플러그인 활용법과 특히 활용도 높은 템플릿, 플러그인을 추천드려서 여러분이 더 쉽고 빠르게 UI디자인 능력을 키울 수 있도록 도울 거예요.

👉 피그마의 플러그인과 템플릿

질문 Q&A 🙋🏻‍♂️ 

Q. 이 강의를 듣기 전에 스케치 앱이나 제플린, 인비전 등 다른 툴을 다룰 줄 알아야 하나요?

A. 전~혀 모르셔도 됩니다. 피그마는 UI디자인을 위해 필요한 거의 모든 기능을 담고 있어요. 피그마만 잘 익히신다면 스케치, 인비전, 제플린을 통해 목적하는 바를 모두 이룰 수 있습니다. 즉, UI디자인, 프로토타이핑, 핸드오프 (개발자를 위한 최종 산출물) 등 모든 단계를 피그마를 통해 밟아나가면서 디자인 산출물을 만들 수 있습니다. 

Q. 비전공자도 들을 수 있나요?

A. 네, 이 수업은 입문자와 비전공자에 맞춰 설계한 과목입니다. UI디자인을 위한 기초 지식부터 피그마의 기초기능, 그리고 고급 지식과 고급 기능까지 차근차근 알려드릴 거예요. 그래서 전혀 디자인과 무관한 일을 해왔거나 비전공자더라도 이 수업을 듣고 나면 UI디자인 전문능력을 갖출 수 있습니다.

Q. 미리 들어야 할 선수과목이 있나요?

A. 만약 UX, UI디자인에 대해서 전혀 모르는 분이라면 제가 인프런에 개설한 "입문자를 위한, UX디자인 개론" 수업을 미리 들으시면 좋을 것 같습니다. 이 수업을 듣고 나면 UX 및 UI 디자인 전반적인 지식을 쌓을 수 있는데요. 무엇보다 이 UI디자인 수업을 왜 들어야 하는지 더 잘 이해할 수 있을 겁니다. 이미 UX, UI디자인에 대한 기본 지식이 있다면 이 수업을 바로 들으셔도 괜찮습니다.

그러면 수업에서 만나요! 👋

이런 걸 배워요

  • UI디자인 이론 및 실전 능력을 기를 수 있어요.
  • 실무 UI디자인 프로세스 단계를 처음부터 끝까지 밟아봅니다.
  • UI디자인을 하기 위해 필요한 피그마(Figma) 기능을 익힙니다.
  • 로우파이부터 하이파이 프로토타입까지 제작방법을 알려드립니다.
  • 사용자 테스트 및 커뮤니케이션을 위한 피그마 프로토타이핑 기능을 익힙니다.
  • 개발단계의 최종 산출물인 피그마/제플린 핸드오프 만드는 법을 알려드려요.

도움 되는 분들

  • 프로덕트 디자인, UX/UI 디자인 입문자
  • UX/UI디자이너가 되고 싶지만 시각적인 능력이 부족하다고 생각하는 분들
  • 피그마(Figma)를 마스터하고 싶은 분들
  • UI디자인의 기본기를 탄탄하게 하고 싶은 분들

선수 지식

  • 입문자일 경우, 인프런의 제 UX디자인 개론 수업을 들으시길 바랍니다. 수업 링크: https://inf.run/UmHh
  • 포토샵, 스케치 앱 등 다른 툴을 전~혀 몰라도 됩니다.😊

공개 일자

2020년 11월 05일 (마지막 업데이트 일자 : 2020년 11월 05일)

지식공유자 소개

현재 뉴욕의 글로벌 테크 회사 The Knot Worldwide에서 프로덕 디자이너로 일하고 있습니다.

뉴욕에 오기 전에는 서울에서 UI기획자로 일을 했습니다.

브런치 매거진 "디자인, 그리고 프러덕트"와 UX, UI 지식과 정보를 공유하는 "뉴욕 UX디자이너" 인스타그램페이스북을 운영하며 디자이너 및 예비 디자이너들과 소통하고 있습니다.

개인적으로는 세 아이👶의 아빠이며 요리🍲, 교육🏫에 관심이 많습니다.

경험 및 경력

• 뉴욕 School of Visual Arts 디자인 대학원 졸업 / 전공: Interaction Design

• (현) 뉴욕 The Knot Worldwide 프로덕트 디자이너

(전) 서울 Pantech 모바일 앱 UI기획자

• 뉴욕의 다수 스타트업에서 UX/UI 프로젝트 진행

• 스타트업 UX 컨설팅 다수 진행

• 전문 분야: UX, UI 디자인, 유저리서치, 스토리텔링을 활용한 디자인, 테크, 스타트업 

4.5
4개의 수강평
default_profile.png
k K 2시간 전
솔찍히 말해서 인강을 별로좋아하지는 않는데 한국어로된 튜토리얼 독도없고 책도없고 구글찾아보면 현시점서 유일무의해보여서 봣는데 혼자 안되는영어로 찾아보면서 햇을때보다는 체계적인 느낌이여서 좋기는햇어요 다만 너무쓸모없는 말부터 5살짜리아이도 할수잇을만큼 간단사소한거까지 여러번 말씀하셔서 집중해서 보기에 버거움이잇네요 추가로 피그마강의인데 uiux개론같은것을 설명하시는것도 좀그렇고 시간도길고요 558분 집중해서 볼수잇는데 영어는 못한다 하시는분들한테 피그마 튜토리얼로 나쁘지는않아요
에릭

에릭 16분 전
KK님 안녕하세요. 후기 감사드립니다. 피드백 참고하여 해당 강의를 발전 개선하는데 참고하도록 할게요.^^ 이 강의의 목표는 수강생분들께서 피그마라는 툴을 익히도록 하는 것도 있지만 더 중요한 부분은 강의 제목에서 나온 것처럼 "UI디자인"을 입문하여 실전 단계까지 할 수 있는 걸 목표로 하고 있답니다. 그래서 툴에 대한 부분 뿐 아니라, 실무자의 관점에서 기본기에 해당하는 UI디자인에 대한 원리와 이론적인 내용도 들어간 점 참고해주시면 좋을 것 같아요. 그리고 이 강의는 비전공자분들을 포함한 입문자분들을 위해 만들었기 때문에 툴의 기초적인 부분부터 다룬 후 고급 기능들을 다룬 점 양해해주시면 감사하겠습니다^^ 다시 한번 피드백 감사드리고, 성취하시고자 하는 모든 일 이루어지길 응원할게요!

default_profile.png
gywjd0630 6일 전
UI입문자에게 추천하고 싶은 강의입니다. UX/UI입문자로서 실무경험이 없기에 UI툴의 기능적인 내용과 더불어 실무예제를 찬찬히 다뤄주는 강의를 찾는 중 본 강의의 커리큘럼이 마음에 들어 수강하게 되었습니다. 특히 피그마가 강력한 UI툴로 대두되고 있는 추세인데 반해 아직 피그마 강의가 많지 않아 본 강의가 굉장히 도움이 되었습니다. 강의 구성 중 특히 좋았던 점은 와이어프레임 예제를 강의 초반에 다룸으로써 피그마의 기본적인 기능들을 익히고 이후 컴포넌트, 그리드 및 기타 작업의 효율을 높여주는 기능들을 커버한 후에 이를 바탕으로 프로토타이핑 예제를 보여주신 점이 따라하는 입장에서 효과적인 구성이었다고 생각됩니다. 또한 강의내용 및 업계 전반적인 질문에 강의자께서 빠르게 피드백해주셔서 도움이 많이 되었습니다. 좋은 강의 감사드립니다.
에릭

에릭 6일 전
gywjd0630님 안녕하세요. 좋은 피드백 감사드립니다. 강의를 통해 피그마와 UI디자인에 대해서 공부하는데 도움이 되셨다니 큰 보람을 느낍니다. 😆 그리고 이 강의는 예제들을 따라하는 것이 가장 중요한데 200% 잘 활용하고 배우신 것 같네요~! 👍 그리고 gywjd0630님께서 강의를 들으시는 와중에 카톡 오픈 1:1채팅을 통해 정말 좋은 질문들과 피드백을 주셔서 저 역시 많이 배웠던 것 같습니다. 깊이 감사드리고 앞으로 한 스텝 한 스텝 잘 나아가 목표를 이루시기를 늘 응원하겠습니다!

default_profile.png
김요환 1일 전
처음 배우는 디자인 툴이였습니다. 완성품을 보았을때 많이 뿌듯했습니다. 감사합니다.
에릭

에릭 40분 전
김요환님 피드백 감사합니다. 강의 마지막 단계인 완성품까지 해내시다니 제가 더 뿌듯하네요. 성취하시고자 하는 모든 것들 이루시기를 응원합니다!

교육과정

모두 펼치기 76 강의 9시간 18분
섹션 0. 강의를 시작하기에 앞서
7 강의 42 : 52
섹션 1. UX, UI 디자인의 단계별 핵심 개념 이해하기
6 강의 28 : 58
디자인 씽킹과 프로토타입
07 : 46
로우파이 프로토타입
03 : 33
미드파이 프로토타입 "와이어프레임"
04 : 41
하이파이 프로토타입 "UI 디자인", 그리고 프로토타이핑
03 : 10
최종 디자인 산출물 "핸드오프"
03 : 27
시각 계층
06 : 21
섹션 3. 피그마로 디자인을 할 때 알아야 하는 기본 개념들
2 강의 06 : 02
비트맵과 벡터 개념 이해하기
03 : 58
레이어란 무엇인가?
02 : 04
섹션 4. 피그마 작업 환경 이해
5 강의 28 : 49
무료로 시작할 수 있는 피그마의 가격 정책 및 서비스
03 : 14
회원가입과 피그마의 파일 관리를 위한 환경
08 : 50
피그마의 작업 환경
09 : 16
피그마 단축키 확인하기
02 : 31
화면 보기 관련 단축키 모음
04 : 58
섹션 5. 피그마 기초 기능 익히기
7 강의 39 : 35
도형 만들기, 그리고 우측 패널 기능들 익히기
07 : 33
트랜스폼 및 오브젝트 이동 관련 기능들과 단축키 익히기
09 : 42
정렬, 분배, Tidy up, 그리고 Smart Selection 기능
04 : 34
텍스트 만들기
05 : 29
컬러 관련 기능 - 피커, 그라데이션
02 : 29
이미지와 마스크 기능
05 : 26
이펙트 이해하기
04 : 22
섹션 6. 생산성을 높여주는 플러그인과 템플릿
2 강의 13 : 48
시간을 몇배, 몇십배 아껴주는 "플러그인"
06 : 30
UI디자인의 퀄리티를 단숨에 높여주는 "템플릿 활용법"
07 : 18
섹션 7. 실전 예제 1. 스플래시 화면 디자인해보기
2 강의 14 : 19
예제 샘플파일을 나의 드래프트로 가져오는 방법
03 : 05
스플래시 UI화면 디자인하기
11 : 14
섹션 8. 실전 예제 2. 와이어프레임 만들기
5 강의 50 : 29
UX, UI디자이너는 왜 와이어프레임을 만들어야 할까?
03 : 08
기초 작업하기: 사이트맵과 로우파이 스케치
06 : 04
E-commerce 모바일 앱 와이어프레임 만들기 1. 홈 화면 / 카테고리 화면
16 : 12
E-commerce 모바일 앱 와이어프레임 만들기 2. 상세 화면 / 구매확정 화면
16 : 57
E-commerce 모바일 앱 와이어프레임 만들기 3. 피그마로 워크플로우 만들기
08 : 08
섹션 9. 피그마로 아이콘 만들기 A to Z
6 강의 51 : 39
좋은 아이콘을 만드는 원칙
07 : 04
Boolean 기능 활용하기
05 : 51
펜 툴로 라인 그리기
07 : 09
Keyline 이해하기
10 : 18
아이콘 만들기
15 : 31
해상도를 고려한 아이콘 Export하기
05 : 46
섹션 10. 피그마의 그리드를 활용해 디자인의 완성도 높이기
4 강의 37 : 13
그리드 이해하기
09 : 30
그리드 만들기
10 : 15
그리드를 활용해서 오브젝트 배치해보기
03 : 57
그리드를 활용한 반응형 UI디자인 만들어보기
13 : 31
섹션 11. 효율적인 디자인을 도와주는 피그마의 기능들
9 강의 75 : 07
Constraint 기능
14 : 17
Auto Layout으로 버튼 만들기
08 : 26
디자인 시스템을 만드는 이유, 그리고 Style과 Component
06 : 26
스타일 기능 1. 텍스트, 컬러
10 : 52
스타일 기능 2. 이펙트, 그리드
03 : 50
스타일 기능 3. 삭제
00 : 31
UI Component에 대한 개념, 그리고 Figma의 Component 기능을 사용하는 이유
08 : 31
Figma의 Component 기능 마스터하기
15 : 55
라이브러리와 팀 라이브러리 기능
06 : 19
섹션 12. 종합 실전 예제 3. 이커머스 앱 UI 디자인
6 강의 88 : 27
오픈소스 템플릿을 활용한 UI디자인 기초작업
15 : 15
홈 화면으로 시안 작업하기
33 : 39
디자인 시스템 만들기
05 : 49
제품 상세 페이지 디자인
16 : 31
구매 확정 페이지 디자인
09 : 21
카테고리, 즐겨찾기 페이지 디자인
07 : 52
섹션 13. 피그마 프로토타이핑 툴 활용하기
2 강의 14 : 46
프로토타이핑을 활용해야 하는 이유
03 : 07
이커머스 앱 UI디자인에 프로토타이핑 적용해보기
11 : 39
섹션 14. 피그마로 협업 극대화하기
1 강의 08 : 02
팀원 초대하기, 댓글 기능, 그리고 실전에서의 협업
08 : 02
섹션 15. 개발자에게 전달하는 최종 전달물 (핸드오프) 만들기
3 강의 14 : 17
Export 기능
03 : 54
피그마로 핸드오프 링크 만들기
04 : 34
Zeplin으로 핸드오프 링크 제작하기
05 : 49
섹션 16. UI디자인 실력을 키우는 꿀팁들 대방출
6 강의 20 : 46
팁 하나. UI디자인 실력을 올려 주는 실전방법
02 : 50
팁 둘. 내가 UI디자인할 때 참고하는 레퍼런스들
02 : 54
팁 셋. 디자인 원리 및 공부자료 추천해주세요.
01 : 49
팁 넷. 너무 많은 디자인 수정 요청, 어떻게 해야 하나요?
04 : 05
커리어 설계 및 커리어 상담
06 : 10
강의를 마무리하며
02 : 58

수강 문의

  • howdy 프로필 howdy
    2020-11-14 91068

    수강 기간이 12개월인 이유가 있나요?

    에릭
    에릭
    에릭
    2020-11-16 78776

    Min Jung Kim님 안녕하세요. 우선 이 강의에 관심을 가져주시고 문의를 주셔서 감사드립니다. 해당 강의는 약 9시간으로 구성되어 있으며 실습시간까지 고려하였을 때, 수강생 분들의 해당 강의에 대한 완강을 위해 12개월이면 충분하다고 판단하여 그렇게 정하게 되었어요. 이 강의는 실무에 바로 적용할 수 있는 실전 성격의 지식과 노하우가 담겨 있어, 정보의 실시간성 (빠르게 배우고 이것을 실전에 바로 적용하는 것)이 중요하다고 생각합니다. 참고로, 여기서 제가 말씀드리는 실전이란 예를 들면 해당 분야에서의 취업을 위한 준비, 실제 디자인 업무에서의 적용 등이 있습니다. 그래서 이 강의를 수강하신다면 빠르게, 적어도 12개월 이내에 완강하시어, 실전에 바로 적용하시기를 독려하기 위하는 부분이 있다는 점 참고하시면 좋을 것 같습니다. 그러면 좋은 하루 되세요! 감사합니다.

다른 수강문의 보기
지식공유자 되기
많은 사람들에게 배움의 기회를 주고,
경제적 보상을 받아보세요.
지식공유참여
기업 교육을 위한 인프런
“인프런 비즈니스” 를 통해 모든 팀원이 인프런의 강의들을
자유롭게 학습하는 환경을 제공하세요.
인프런 비즈니스