코멘토

UI∙UX ∙ Figma

Figma로 UI 디자인이 쉬워지는 디자인시스템 만들기

대기업 현직자가 알려주는 UI∙UX 실무 배우고,
UI∙UX 취업/이직에 성공해요!

국민내일배움카드만 있다면 누구나 누릴 수 있습니다.

UIUX 디자이너라면,

시스템을 이해하고 구축할 수 있어야 합니다.


디자인 시스템, 왜 필요할까요?


일관성 있는 UIUX 디자인을 통해 반복 작업을 줄이고 일관된 브랜드 경험과 사용성을 제공할 수 있도록 만들어 줍니다.

컴포넌트 수정을 효율적으로 할 수 있어 버전을 관리하거나, 업데이트를 하는 데에도 유용하죠.

시스템에 대한 이해를 토대로 개발자와 더욱 쉽게 커뮤니케이션 할 수 있도록 만들어 생산성이 높아지기도 합니다.



문제는 디자인 시스템을 배우기 쉽지 않다는 점입니다.


대부분의 피그마 강의는 단순한 사용방법이나 컴포넌트를 만드는 방법에 대해서 다루고, 디자인 시스템을 구축할 때 디자인 요소를 어떻게 나누고 조합해야 하는지에 대해서는 알려주지 않습니다.


UIUX 디자이너로서 디자인 시스템을 구축할 수 있는 것과 없는 것은 큰 차이가 있습니다.

초기에 디자인 시스템이 구축되지 않은 경우는 물론 이미 디자인 시스템이 구축되어 있는 경우에도 다수의 디자이너와 함께 프로젝트를 진행하기 때문에 디자인 시스템에 대한 이해도가 굉장히 중요합니다.


그래서 이번 클래스에서는 디자인 시스템 작업을 리드하여 구축한 경험이 있는 프로덕트 디자이너 현직자와 함께 시스템을 구성하기 위해 필요한 기능과 기술, 구성을 알아갈 수 있도록 준비했습니다.



실제 업무에 적용할 수 있는 UI 디자인 시스템


이번 클래서는 실무에서 피그마를 활용해 디자인 시스템을 만들기 위해 필요한 모든 내용을 담았습니다.


피그마는 강력한 협업 기능, 클라우드 저장, 웹 기반으로 언제든 작업이 가능하다는 다양한 장점으로 인해 많은 조직에서 UIUX 디자인 툴로 선택하고 있는데요.

디자인 시스템 작업을 리드하여 구축한 경험이 있는 프로덕트 디자이너 현직자와 함께 시스템을 구성하기 위해 필요한 피그마 기능부터 구성을 배우고, 실제로 디자인 시스템을 만드는 실습까지!


이번 클래스를 통해, 시스템을 이해하고 구축할 수 있는 디자이너로 성장하세요!

VOD를 완주한 당신은 이렇게 됩니다.

  • 주먹구구식 디자인이 아닌 일관성 있는 UI 디자인 시스템을 구축할 수 있습니다.

  • 컴포넌트에 대해 이해하고 개발자와 원활하게 소통할 수 있습니다.

  • 미리 개발된 UI를 재활용해 UI 디자인 작업 시간을 단축할 수 있습니다.

  • 반복 작업을 최소화하고 효율적으로 인터페이스를 수정할 수 있습니다.

주먹구구식 디자인에 지쳤다면, 디자인 시스템으로 해결하세요!

안녕하세요. B2B 프로덕트 디자이너이자 브런치 작가로 활동하고 있는 지토입니다.

UXUI 디자이너로 직무를 전환하고 싶은데, 툴 사용법도 모르고 업계 용어도 몰라서 막막하다구요?


비전공자 분들이 디자이너로 직무를 전환하기 위해 가장 먼저 하는 일이 바로 "툴 배우기"인데요.

툴을 배우는 과정에서 업계 용어에 대한 이해, 시스템에 대한 이해가 없다면 실무를 진행하기 힘들거에요.


기초 이론, 시스템 이해, 실습까지 탄탄하게!

이번 클래스에서는 UXUI 디자인 툴 압도적 1위를 차지한 피그마를 활용해서 디자인시스템을 만드는 방법을 알려 드리려고 합니다.

UXUI 디자인 분야에서 점유율 1위를 차지하고 있는 피그마를 다루는 방법과 디자인시스템을 결합해 당장 실전에 뛰어들 수 있도록 도와드릴게요!

디자인 7~10년차

지토 멘토님

현) 스타트업, 시니어 프로덕트 디자이너

- 온라인 커뮤니케이션 솔루션


현) 브런치 작가


전) B2B 보안 서비스 디자인 파트 팀원

iVDS 사이버테러,범죄 수사기관에 도입

- 프로덕트 디자인

- 프론트엔드 개발

이런 분들이라면 꼭 들으세요!

  • 체계가 없는 스타트업에서 디자인 시스템을 구축하고 싶은 디자이너

  • Figma를 도입해 협업 효율을 높이고 싶은 프로덕트 디자이너

  • UIUX 디자인으로 직무를 전환하고 싶은 비전공자

  • 개발자와 원활하게 소통하고 싶은 프리랜서 디자이너

실무에서 바로 쓸 수 있는
내용만 배웁니다.

  • 피그마로 업무 효율 높이기

    피그마, 무엇이 특별하길래 업계 1위 UI툴로 불리는 걸까요? 업무 효율을 높여주는 피그마의 특징은 물론, 컴포넌트, 플러그인, 커뮤니티 등 피그마를 독보적인 UI툴로 만들어준 다양한 기능에 대해 꼼꼼하게 알아봅니다.

  • UI의 구성 요소를 이해하고 디자인 시스템에 적용하기

    본격적인 디자인시스템을 구축하기에 앞서 Google, Line, Carbon 등 다양한 기업의 디자인시스템 사례를 살펴보고 디자인 원칙을 세워봅니다. 디자인 원칙을 가이드로, 하나의 페이지는 어떤 구성 요소로 이루어져 있는지 파악하고 그룹화합니다.

  • 피그마의 다양한 기능을 활용해 디자인 시스템 구성하기

    디자인시스템을 만들기 위해 반드시 필요한 Figma의 가능을 상세히 다뤄봅니다. 변수 설정, 컴포넌트, 오토 레이아웃 등의 기능을 어떻게 이용하고 어떻게 구성해야 하는지 확인하고 실습을 통해 직접 만들어봅니다.

  • 시스템을 활용한 주요 화면 GUI 만들기

    디자인시스템을 구성했다면 실제 GUI에 반영해 보고 구축 전의 환경과 비교해 봅니다. 버전 히스토리와 코멘트 기능을 이용해 디자이너 간의 소통, 개발자와의 소통은 어떻게 해야 하는지 꼼꼼히 알아봅니다.

UI∙UX,
할 수 있게 만드는 3가지 학습 포인트

  • 생존형 기초 지식

    당장 꼭 알아야하는 지식만 실제 사례로 배워요

  • 복습용 실무 과제

    배운 내용을 바로 적용하는 실무 과제를 풀어봐요.

  • 커뮤니티 게시판

    수강하다 막막할 때면 언제든 질문하고 답변 받으세요.

상세 커리큘럼︱총 40개의 강의

이 강의는 영상, 수업 노트, 첨부 파일이 제공됩니다. 미리보기를 통해 콘텐츠를 확인해보세요.

  1. 01

    디자이너로 입사한 회사에 디자인 시스템이 없다? 슬프지만 흔한 일입니다.

    1. 강사 소개
      미리보기
    2. 멘토 시작 계기
    3. 디자인 시스템 강의를 통해 얻을 수 있는 것들
    4. 챕터 구성 설명
  2. 02

    나와 팀의 디자인 커뮤니케이션 : 디자인 시스템

    1. 디자인 시스템이란?
    2. 디자인 시스템을 구축했을 때의 이점
    3. 아토믹 디자인
    4. 디자인 시스템 적용 사례 1 - Material
    5. 디자인 시스템 적용 사례 2 - Line
    6. 디자인 시스템 적용 사례 3 - Carbon
    7. [실습 과제 1] 타 디자인 시스템 조사
    8. [과제 해설 1] 타 디자인 시스템 조사
  3. 03

    전세계 디자이너 원픽 툴 피그마와 친해지기

    1. 디자이너들의 원픽 피그마, 그 이유는?
    2. 피그마의 주요 기능 살펴보기
    3. 피그마의 각종 플러그인
    4. 피그마 커뮤니티
    5. 아이콘 컴포넌트 만들기
    6. 프라이머리 컬러 만들기
    7. [실습 과제 2] Low fidelity wireframe 그려보기
    8. [과제 해설 2] Low fidelity wireframe 그려보기
  4. 04

    디자인 시스템 기초공사하기 : Foundation 구성

    1. 디자인 원칙 설정 방법
    2. 디자인 시스템 Foundation 1 - 레이아웃 그리드 시스템
    3. 디자인 시스템 Foundation 2 - 타이포 그래피 시스템
    4. 디자인 시스템 Foundation 3 - 컬러 시스템
    5. 디자인 시스템 Foundation 4 - 아이콘의 종류, 세팅 방법
    6. 디자인 시스템 Foundation 5 - 엘레베이션
    7. [실습 과제 3] 디자인 시스템 Foundation 구성해보기
    8. [과제 해설 3]디자인 시스템 Foundation 구성해보기
  5. 05

    디테일까지 잡고가자 : 변수와 컴포넌트 구성

    1. 피그마의 Variants 기능 소개
    2. 피그마의 Auto-layout 기능 소개
    3. 컴포넌트 구성하기 1 - 버튼
    4. 컴포넌트 구성하기 2 - 텍스트 필드
    5. 컴포넌트 구성하기 3 - 체크박스와 토글
    6. 컴포넌트 구성하기 4 - 아바타
    7. [실습 과제 4] 컴포넌트 구성해보기
    8. [과제 해설 4] 컴포넌트 구성해보기
  6. 06

    디자인 시스템을 활용해 가장 많이 하는 실무화면 제작해보기

    1. Molecule 구성 방법
    2. Organism 구성 방법
    3. Low fidelity wireframe에 시스템 적용 - 회원가입
    4. Low fidelity wireframe에 시스템 적용 - 설정과 알림
    5. [실습 과제 5] 페이지에 시스템 적용하기
    6. [과제 해설 5] 페이지에 시스템 적용
  7. 07

    디자인 시스템을 만들 줄 아는 주도적인 디자이너가 되셨습니다.

    1. 전체 내용 복습
    2. 디자인 시스템을 실무에서 활용할 때의 팁
    3. VOD를 완주한 수강생들에게 전달하고자 하는 사항

국비지원 클래스
수료 혜택

  • NCS 수료증

    NCS 수료증으로 실무 능력을 증명하세요.

  • 현직자 실무 템플릿

    실무에 바로 적용할 수 있는 템플릿을 활용해보세요.

  • 올인원 이용권 6개월 무료

    38,000원 상당의 코멘토 커뮤니티 이용권을 드려요.

  • 멘토와 1:1 QnA

    실시간 오픈톡방에서 자유롭게 의견을 나눠보세요.

  • 메타버스 스터디룸

    메타버스 24시간 스터디룸에서 집중 스터디해요.

FAQ

국비지원 관련

  • Q. 국민내일배움카드는 어떻게 신청하나요?

    A.

    국민내일배움카드는 고용24에서 신청할 수 있어요.

    자세한 신청방법은 아래 페이지를 참고해주세요!


    국민내일배움카드 발급 가이드

  • Q. 국민내일배움카드가 뭐죠?

    A.
    국민 스스로의 직업능력개발훈련을 위해 훈련비를 지원하는 정책의 일환으로, 취업, 이직, 역량 개발에 필요한 훈련이 필요한 국민들에게 발급되는 카드 형태의 지원금입니다.

  • Q. 저도 국민내일배움카드를 발급받을 수 있나요?

    A.

    네, 누구나 국민내일배움카드를 발급 받을 수 있어요!

    단, 아래 대상에 하나라도 속한다면 발급 대상에서 제외됩니다. - 만 75세 이상 - 현직 공무원 - 사립학교 교직원 - 연 매출 1억 5천만 원 이상의 자영업자 - 월 임금 300만 원 이상의 대규모 기업 종사자(45세 미만) - 특수형태근로종사자 - 졸업까지 남은 기간이 2년을 초과하는 재학생 - 생계급여 수급자 - 기타 직업훈련의 필요성이 인정되지 않는 사람 ※ 자세한 발급자격 확인은 고용노동부 고객상담센터 (1350) 또는 관할 고용센터로 문의해 주세요.

  • Q. K-디지털 기초역량훈련은 뭔가요?

    A.

    K-디지털 기초역량훈련은 국민내일배움카드를 발급받고 아직 디지털·신기술 훈련을 받지 않은 청년들과 중·장년 구직자들에게 제공되는 디지털 분야의 원격 훈련 과정입니다.


    자세한 제도 및 진행절차 확인하기

  • Q. 수강신청은 어떻게 하나요?

    A.

    고용24에서 '코멘토' 검색 후 수강신청을 해주세요. 영업일 기준 24시간 이내에 선발 처리를 해드립니다.


    자세한 방법은 아래 가이드를 참고해 주세요!


    고용24 수강신청 가이드

  • Q. 자비부담금 결제는 어떻게 하나요?

    A.

    [자비부담금 결제 방법]

    1. 고용24 접속 후, [마이페이지 ▶ 훈련관리 ▶ 국민내일배움카드 ▶ 자비부담금 결제/환급 ▶ 결제] 클릭!
    2. 강의 선택 후, 결제 버튼 클릭!

    자세한 방법은 아래 가이드를 참고해 주세요!


    고용24 자부담 결제 가이드

수업 관련

  • Q. UIUX에 대한 지식이 없는데 과정을 이해할 수 있을까요?

    A.

    가능합니다. 단순히 피그마 툴 사용법을 넘어, 왜 디자인시스템을 만들어야 하는지, 구성요소들이 어떤 용어를 가지고 있는지 디테일하게 이해할 수 있게끔 강의가 구성 되었습니다.

  • Q. 아직 실무자는 아니어서 유료버전이 아닌 무료버전으로 사용하고 싶은데 상관없을까요?

    A.

    상관없습니다. 무료버전과 유료버전의 기능이 어떤 차이점이 있는지 설명드리고 무료버전에서 할 수 있을 정도의 실습과정을 거치게 됩니다.


  • Q. 이전에 디자인툴을 전혀 사용해보지 않은 사람들도 강의를 따라갈 수 있나요?

    A.

    전혀 사용해보지 않은 경우에도 강의를 충분히 따라가실 수 있습니다.

  • Q. Windows OS로도 피그마 사용이 가능한가요?

    A.

    웹 기반이기 때문에 Mac, Windows OS를 모두 지원합니다. 다만 인터넷 이용이 불가능한 환경에서는 사용할 수 없습니다.

수료 관련

  • Q. 수료 조건이 있나요?

    A.
    수강 기간 내에 진도율 80% 이상을 달성하면 수료 조건이 충족됩니다.

  • Q. 수료증 발급은 어떻게 받나요?

    A.
    수료증은 국비지원 과정으로 수료하신 멘티님에게만 지급되며, 캠프 종료 이후에 코멘토 홈페이지의 마이페이지 → 신청한 캠프에서 다운로드받으실 수 있습니다. 수료 기준을 확인한 후 충족시키는 분들에게만 발급되며, 캠프 종료일 기준으로 1주일 이내에 발급됩니다. 발급 확인에 문제가 있는 경우에는 고객센터로 문의부탁드립니다.

환불규정

[수강기간]

  • 기수별 상세페이지 표시 일정에 따릅니다. 신청 전, 수강기간과 기수를 반드시 확인해주세요.
  • 국비지원훈련 참여 후 수료조건 충족 시 다시보기 이용권을 제공합니다.
  • 수강 후 환불/취소는 불가하나 수료시 12개월 간 반복 수강 가능합니다.
  • 자세한 수료 조건은 수료 관련 FAQ를 참고해주세요.

[동시접속 안내]

  • 동일한 ID로 2대 이상의 기기에서 접속을 하는 경우, 수강이 제한 될 수 있습니다.

[국비지원과정 환불규정]

※ [중요] 자부담금 결제취소는 수강 시작(개강) 전에만 가능합니다.


결제취소 시 다음 절차를 밟게되어, 2~3영업일의 시간이 소요될 수 있습니다.

(환불 요청→코멘토 카드사 요청→카드사 결제취소→자부담환급→크레딧 반영)

  1. 전액 환불기준
    1. ① 수강 시작일 전 = 전액 환불(수강 시작 전 영업일 17시까지 취소 요청 필수)
      • * 코멘토에 요청 시 취소 가능하나 요청 접수에 시일 소요
    2. ② 수강 시작일(개강) 후
      • * 수강 시작 후 자부담금은 환불할 수 없으며, 훈련은 중도포기(미수료) 처리됨

  2. 중도 포기 안내
    • ※ [중요] 별도 사유 없이 중도포기/미수료 시 훈련비에 해당하는 크레딧이 차감됩니다.
    • ※ [중요] 중도포기/미수료 시 사용된 크레딧은 환원되지 않습니다.
    • ※ 중도포기 사유가 있을 경우, 관할 고용센터에 접수 바랍니다.

수강하시는 과정은 ‘K-디지털 기초 역량 훈련’으로 고용노동부의 국비 지원을 받는 과정입니다.

고용노동부에서는 훈련생 미수료 및 중도포기 시 다음과 같은 패널티를 부과합니다.


  1. ① 최초 1회 : 크레딧 관련해서는 아무 패널티 없으나, 훈련비에 대한 크레딧은 복원되지 않음.
  2. ② 최초 1회 이후 : 크레딧 잔액의 50%소멸(1인당 50만 크레딧)
  3. ③ 2회 이상 미수료 및 중도포기 시 : 크레딧 소멸 및 사용 제한 등의 페널티가 있을 수 있음.

고용노동부의 정책은 상시 변할 수 있으므로, 자세한 내용을 확인하시려면 고용노동부 및 관할 고용센터로 문의하시기 바랍니다.