오픈신청이 완료 되었습니다.

클래스 오픈시 가입하신 핸드폰 번호로 문자를 발송 드립니다 :D
고객센터 02-6080-8623

UI Design:
Design system
Class

CREATOR. HwangGiyeon

UI 디자인 : 디자인 시스템

340,000 6주 과정

LIVE 2.5단계에도 원격수업으로 정상진행

일정

필독 공지사항


코로나바이러스감염증-19 단계별 대응 방침 안내


1 / 2 단계 정상운영 및 방역 강화
2.5 / 3단계 원격수업으로 전환

격상 및 해제시 수강분들에게 문자 공지드립니다.


출입에 대한 방역 수칙


1. 출입시 발열 체크 및 QR 전자출입명부 작성
2. 전 강의장 및 공간에 대한 소독 진행 (매일 오전 10:00, 오후 18:00, 저녁 23:00)
3. 강의장, 로비, 사무실 손 소독제 비치
발열 또는 호흡기(기침, 인후통, 근육통 등)등 몸이 아프면 출석하지 않습니다.
* 결석으로 인한 수업진도는 02-6080-8623으로 문의 주시기 바랍니다.


수업에 대한 방역 수칙


1. 수업시간내 전 강사 및 수강생 KF94 마스크 의무 착용
2. 리메인 직원 마스크 의무 착용

리메인에서는 코로나바이러스감염증-19 의심환자 발생 시 즉시 대응할 수 있도록 운영하고 있으며,
수강생 여러분의 안전한 학습 환경 조성과 건강을 위해 최선을 다하겠습니다.
감사합니다.

일관되고 체계적인 디자인을 위한
UI 디자인 시스템을 배우는 클래스입니다

현재 User Interface 디자인은 사용성을 고려한 디자인으로 발전하고 있습니다. 이에 따라 디자인의 제작 방식 또한 개선되며, UI Design System을 구축하여 제품 전체에 일관된 디자인을 구현하기 쉽도록 제작 방식이 바뀌고 있습니다. 또한 이와 연관되어 여러가지 새로운 디자인 툴이 등장하며 디자이너들은 새로운 환경에 적응해야 하고 그에 따른 디자인 방법의 개선도 필요하게 되었습니다. 이 과정에서는 UI Designer들이 Design System을 어떻게 구축하는지 알아보고 디자인 역량을 키울 수 있습니다.

6주간 2개의
프로젝트를 만들어 볼 거예요

  • #1 디자인 시스템 파일

    프로젝트 제작에 필요한 디자인 시스템의 큰 골격을 만듭니다. Primary 컬러와Sub 컬러 팔레트를 정리한 뒤, 웹 접근성에 기반해 폰트의 크기,행간,색상 등을 체계화하는 시스템 작업에 들어갑니다.

  • #2 디자인 컴포넌트 파일

    앞서 제작한 디자인 시스템을 토대로 프로젝트에 바로 사용할 수 있는 주요 컴포넌트 파일을 만듭니다. 버튼, 카드, 드롭다운, Tabs, 툴팁 UI 등 강사님이 제공하는 컴포넌트 파일을 토대로 프로젝트 성격에 맞는 컴포넌트들을 제작합니다.

navigate_before
navigate_next

우리는 이런걸 배워요

  • 디자인 시스템을 만들기 위한 요소

    디자인 시스템을 만들기 위한 기초 (컬러,글꼴,레이아웃,공간)에 대해서 배워보고 직접 시스템 파일로 만들어 봅니다

  • 컴포넌트 별 특징에 대해서 알아보고 만들어 보기

    여러가지 컴포넌트 별 특징에 대해서 알아보고, 프로젝트에 알맞은 컴포넌트를 만들어 봅니다.

navigate_before
navigate_next

클래스 스피커를 소개합니다!

안녕하세요.
클래스 스피커 황기연입니다.

안녕하세요. 디자이너 황기연입니다. 저는 현대모비스와 티맥스소프트, S-Core에서 UI 디자이너로 활동하며, 제조사와 소프트웨어 분야 UI 실무 경험을 갖고 있습니다. 제가 느낀 실무 경험을 바탕으로 보다 체계적인 디자인 시스템을 구축하고 싶은 UI 디자이너, 예비 디자이너를 위해 디자인 시스템에 대한 교육을 진행하고 있습니다.

커리큘럼

  • 01 Design System?
    • 과정소개
    • Design System 이란?
    • 왜 Design System 이 필요한가?
    • 새로운 저작툴에 대한 소개
    • Design System 제작에 앞서
    • 미션 MoodBoard (Design Concept) 작업
  • 02 Design System의 제작
    • Design System Foundation
    • 미션 Color Palette 제작
    • 미션 Type System 설정
    • 미션 Shape, Shadow 설정
    • 미션 Layout Spacing 설정
  • 03 Components
    • Design System Components 제작
    • 미션 Button
    • 미션 Card
    • 미션 Dropdown
    • 미션 Chips
    • 미션 Dialog
  • 04 Components
    • Design System Components 제작
    • 미션 Progress
    • 미션 Spinner
    • 미션 Selection Controls
    • 미션 Slider
    • 미션 Snackbar
  • 05 Components
    • Design System Components 제작
    • 미션 Tabs
    • 미션 Table
    • 미션 Text Fields
    • 미션 Tooltip
    • 미션 Tree
  • 06 Design System의 활용
    • 미션 Design System 을 활용한 화면 제작
    • 미션 Design System Library 활용하기
    • 미션 프로토 타이핑 툴과 Zeplin
    • 마무리

안녕하세요.
우리 클래스를 소개합니다.

입문·중급자를 위한
UI 시스템 디자인 클래스입니다

프로젝트를 효율적으로 진행하는 데 도움이 되는 UI 디자인 시스템을 강사님의 지도 하에 함께 만들어가는 수업입니다.

UI 디자인 직무에서는
이런 이슈가 있어요

User Interface 디자인은 사용성을 고려한 디자인으로 발전하고 있습니다. 동시에 스케치나 피그마처럼 새로운 저작툴의 등장으로 디자이너들은 새로운 환경을 고려한 UI 디자인 방식이 필요하게 되었습니다.

이에 따라 디자인의 제작 방식 또한 개선되고, UI Design System을 구축하여 제품 전체에 일관된 디자인을 구현하기 쉽도록 작업 방식이 변하고 있습니다.

커리큘럼 제작 전
UI 디자이너가 실무에서
어떤 고민을 하는지 알아봤어요!

  • “시각적으로 보기 좋은 UI 디자인을 만드는 것을 넘어, 다른 디자이너, 개발자와 공유할 수 있게 UI를 시스템적으로 기획하는 과정이 필요해요”

    UI 디자이너 이00

  • “현재 User Interface 디자인은 사용성을 고려한 디자인으로 발전하고 있습니다. 이에 따라 디자인의 제작 방식 또한 함께 개선되어야 합니다”

    5년차 GUI 디자이너 신00

  • “서비스나 제품에서 통일된 UI를 구현하는 것은 어렵지만 중요한 과정입니다. 체계적으로 구성된 가이드르 통해 작업 시, 매우 빠르고 편리하게 팀원과 협업할 수 있기 때문에 디자인 시스템을 먼저 고려하는 과정이 필요합니다.”

    인하우스 디자이너 김00

navigate_before
navigate_next

그래서 준비한 클래스
포인트 강점, 첫 번째

UI 디자인 프로세스에 맞춰, 디자인 시스템을 만들고 컴포넌트로 정리하는 방법을 배웁니다. 디자인 요소를 만들 때, 내가 하고 있는 디자인이 올바른 방향인지, 지속 가능한 디자인인지, 기획자, 개발자와 원활하게 협의할 수 있는 디자인인지 알 수 있습니다.

디자인 시스템을 만들기 위한 요소

디자인 시스템을 만들기 위한 기초 (컬러,글꼴,레이아웃,공간)에 대해서 배워보고 직접 시스템 파일로 만들어 봅니다

컴포넌트 별 특징에 대해서 알아보고 만들어 보기

여러가지 컴포넌트 별 특징에 대해서 알아보고, 프로젝트에 알맞은 컴포넌트를 만들어 봅니다.

클래스 포인트 강점, 두 번째

인하우스 UI 디자이너 출신의 황기연 강사님과 함께 실제 UI 디자인 프로세스를 고려한 디자인 시스템 가이드를 제작합니다


실무자가 아니면 얻을 수 없는 UI 디자인 노하우를 바탕으로 디자인 기본 요소 (컬러,글꼴,레이아웃,공간)부터 컴포넌트 제작까지 다루는 수업을 진행합니다


강사님과 함께 실무에서 적용한 가능한 디자인을 간접 경험하고, 수업에서 1:1로 진행한 프로젝트에 대한 크리틱을 받으실 수 있습니다


클래스를 마치고,
여러분은 이렇게 달라질 거에요

기존의 주먹구구식 UI 디자인 작업에서 탈피하여
계획있는 디자인 시스템을 가질 수 있게 됩니다.

  • 실제 업무에 적용 가능한 UI 디자인 시스템을 만들 수 있습니다.
  • 내가 디자인 한 결과물에 대해 제대로 이야기 할 수 있습니다.
  • 체계적인 디자인 프로세스를 정립할 수 있습니다.

우리는 이렇게 느꼈어요!

  • item-comment__thum 이민수 20.08.13
    이제 막 UI디자인에 대해 공부하려 던 참에 듣게 되었는데 처음엔 조금 어려운 부분들이 있었지만 강사님께서 차근차근 쉽게 설명해주셔서 알차게 잘 들었습니다. 무엇보다 실무에서 진행되는 부분을 바탕으로 열정적으로 강의해주셔서 너무 좋았습니다. 처음 공부하는 입장에서 많은 도움이 됐습니다. 감사합니다^^
  • item-comment__thum 이지영 20.08.13
    UI 워크숍 정말 너무 잘들었습니다! UX를 전공한지라 UI 수업을 들었더니 너무 도움이 많이 되었습니다. 기획한부분을 비주얼적으로 끌어내는데에 많이 곤란했는데 지금은 제 기획을 200%재현해 낼수있게 되었습니다. 현역 디자이너분께 배우니까 무엇보다 기획, 디자인, 개발자들 사이에 서로가 맞춰야할 선을 충분히 배울 수 있게 되었습니다. ​디자인을 할때 dp계산이라던가 아이콘 및 기타요소들의 수치에 대해서 배운게 너무 좋았습니다. 기획자분들이나 UX 전공하시는 분이라면 꼭! 추천하고 싶습니다.
  • item-comment__thum 이원혜 20.08.13
    기연쌤께서 잘 알려주셔서 이번에 디자인이 만족스럽게 나온것 같아요! 모르는 부분에 대해선 계속 짚어가며 알려주셔서 너무 감사했습니다~ 처음 접하시는 분들도 강의를 듣게 되면 저처럼 얻어가는게 많은거라 생각되요 기연쌤이 잘 알려주셔서 즐겁게 수업 잘 들었습니다 또 인사드릴꼐요~~~감사해요~
  • item-comment__thum 김미나 20.08.13
    기대 이상으로 훨씬 더 많은 지식과 노하우등등을 알려주셔서... 재수강을 하고싶습니다. ㅠㅠ
  • item-comment__thum 김지우 20.08.13
    제가 많이 내성적이라서 수업 끝나고 궁금한 점을 정리해서 강사님께 랜선으로 질문했는데요. 진짜 자세하게 답변해주셔서 너무 감사하더라고요.. 저도 나중에 이쪽 업계에 들어가서 강사님처럼 되고 싶네요.

우리는 이런 분위기로 수업해요!

navigate_before
navigate_next

클래스 수강을 위해선
이런 사전 지식이 필요해요!

  • done 1. Sketch 혹은 Adobe xd 툴을 사용 가능해야합니다

클래스 수강을 위해선
이런 준비물과 프로그램이 필요해요!

  • 개인 노트북(윈도우, Mac OS 사용가능)

  • Sketch (mac 운영 체제 사용 가능)

  • Adobe XD (최소 CS6 이상 버전)

오시는길

  • 클래스 주소 서울 마포구 양화로6길 33
  • 상세소개 2층 리메인

현재 클래스와
함께 수강하면 더욱 좋아요!

쿨하고 깔끔한 환불정책

환불규정 안내

  • 100% 전액환불 : 개강 전까지
  • 33% 공제환불 : 강의 1/2 지나기 전 시점
  • 공제환불 불가 : 강의 1/2이 지난 시점
  • 환불은 신청한 일자 기준으로 처리되며, 강의가 시작되는 당일은 강의를 듣지 않았더라도 해당일자에 포함됩니다.

학원의 설립ㆍ운영에 관한법률 제18조 및 동법시행령 제18조 제3항 〔별표 4〕의 기준에 따른다.

expand_less expand_more