멀티캠퍼스 :: 과정상세보기

과정요약

과정요약
학습시간	21시간	난이도	중급
교육비 지원	고용보험 비환급	평가항목	출석률 100%
수료기준	총점 80점 이상시 수료	정원	24 명
교재정보	디자인 시스템 구축 및 코드 이해

과정소개

본 과정은 기획/디자인/개발 간 협업을 위한 디자인 시스템(Design System) 구축 방법을 학습하고, 웹 사이트 또는 애플리케이션 디자인을 코드로 구현할 수 있는 방법에 대한 가이드를 제공하는 과정입니다.

1, 업무 효율화의 필수! 디자인 시스템을 구축해 볼 수 있는 과정!
디자이너의 업무 효율성 향상 및 개발자와의 원활한 협업을 위하여 꼭 필요한 디자인 시스템을 직접 구축해볼 수 있는 과정입니다.
타이포그래피부터 레이아웃, 프로토타입, 인터렉션까지 실습을 통하여 직접 결과물을 만들어낼 수 있습니다.

2. 인싸 디자인 프로그램 Figma(피그마)를 활용한 과정!
전세계 3,000명 이상의 디자이너가 주목하고 있는 2020년 가장 핫한 디자인 프로그램인 Figma의 기초적인 사용법부터
다양한 실습을 통한 툴 테크닉까지 습득하여 실무에 바로 적용할 수 있습니다.

3. 개발자와의 완벽한 커뮤니케이션을 위한 코딩 역량 UP!

이제 디자이너에게 코딩 역량은 선택이 아닌 필수가 되었습니다.
코딩을 알면 개발자에게 디자인의 100%를 이해시킬 수 있고 더욱 현실적인 디자인 제작이 가능해집니다.
디자인 → 코딩 과정을 맛봄으로서 웹 디자인의 UI 제작 과정을 경험할 수 있습니다.

학습목표

실시간 협업을 위한 디자인(설계) 도구 Figma 학습
팀 공동 작업 및 코드로 연결되는 디자인 시스템 구축
디자인 기본부터 시작하여 고급 워크 플로우, 개발 연계 역량 향상
재사용 가능한 스타일, 텍스트, 컬러, 이펙트, 아이콘, 컴포넌트 등을 디자인 코드로 구현
인터랙티브 디자인, 신속한 프로토타이핑 및 체계적인 버전 관리 활용 방법 학습

학습대상

프로젝트 협업 시, 소통 문제로 늘 불화가 잦은 기획자, 디자이너, 개발자
고객 및 제품 관리자와 디자인을 공유하며 소통해야 하는 실무 종사자
효율적인 협업/관리/유지보수 필요성을 절실히 깨달은 실무 종사자
팀 단위로 공유 할 라이브러리 제작이 필요한 실무 종사자
Photoshop에서 효율적인 디자인 도구로 전환하려는 디자이너
디자인 및 코드 학습이 필요한 입문 대상자

과정목차 6

1 일차
- 1. 툴 테크닉 – Figma 도구 활용
  - 1) Figma 소개
    - Figma 도구 소개 및 Sketch, Adobe XD, Photoshop, Illustrator 등
    UI 디자인 도구 비교 (장,단점 분석) / Figma 설치
    2) Figma 기능 소개 및 사용법
    - Figma 프레임(Frame) / 레이아웃 그리드(Layout Grid) / 뷰 옵션(View Options)
    - Sketch & Illustrator 디자인 파일 가져오기 / 컴포넌트(Component)
- -
  - - 스케일링(Scaling) / 컬러(Colors) 시스템 / 스타일(Styles) 관리 /
    텍스트(Text) / 펜툴(Pen Tool)
    - 쉐입(Shapes) / 레이아웃(Layout) / 이미지(Images) / 마스킹(Masking) /
    이펙트(Effects) / 블렌딩(Blending) 모드
    - 협업(Collabration) / 코멘트(Comments) 활용 / 라이브러리(Library) /
    프로토타이핑(Prototyping), 버전 관리(Version History)
    - 디바이스 프리뷰(Device Preview) / 에셋(Assets) 출력(Exports) / 코드(Code)
2 일차
- 2. 디자인 시스템 - 페이지 / UI 컴포넌트
  - 1) UI 디자인 시스템 구성
    - UI 디자인 시스템 구성 설정(템플릿 활용 / 페이지 별 프레임 구성)
    콘텐츠 분석 → 비주얼 디자인 설계(코드 작업 고려)
    2) 페이지 / UI 컴포넌트 디자인
    - 브랜드 로고 / 아이콘 디자인(Shape, Pen, Pencil 도구 활용)
    - 타이포그래피 (폰트, 텍스트) 디자인 / 컬러 / 스타일 관리 / 컴포넌트 정의 및 재사용(활용)
- -
  - - 인터랙션 상태(States) 디자인 (normal, hover, focus, active, deactive)
    - 헤더바(Headerbar), 푸터바(Footerbar) 컴포넌트 디자인
    - 캐러셀 카드 (카테고리 별, 이미지 마스킹 활용) 컴포넌트 디자인 / 모달 다이얼로그(Modal Dialog) 컴포넌트 디자인
    - 코멘트 섹션(Comments Section) 컴포넌트 디자인 / 오프 캔버스 메뉴(Off-Canvas Menu) 컴포넌트 디자인
3 일차
- 3. 디자인 시스템 - RWD / 프로토타이핑
  - - 반응형 웹 디자인(RWD, Responsive Web Design) 설정
    - 프로토타이핑(Prototyping) / 디바이스 프리뷰(Device Preview) / 쉐어링(Sharing)
    - 에셋 익스포트(Assets Export)
- 4. 디자인 코드
  - - 웹 환경을 고려한 UI 디자인 : 웹 환경에 대한 이해 및 웹 표준과 접근성
    - 구조 / 표현 언어 - HTML, CSS : HTML, CSS 언어 소개 및 디자인 → 코드 맛보기
    - 동작 언어 - JavaScript : JavaScript + DOM API 소개 및 디자인 → 코드 맛보기
    - 최적화 / 배포 : 이미지 최적화(Optimization) 및 검색엔진 최적화(SEO) 설정 및 배포

수강후기 0

평균평점

0 / 5.0

등록된 수강후기가 없습니다