[프로젝트기반]UIUX프론트엔드개발 부트캠프(Figma, React.js)
- 1차 개강일
- 25년 04월 08일(화)
- 2차 개강일
- 25년 04월 22일(화)
고용24 국민내일배움카드 훈련과정명은
[프로젝트기반]UIUX프론트엔드개발 부트캠프(Figma, React.js)입니다.


지금 신청하면 모든 온라인강의가 0원이라고?
간편 회원 가입만으로도 1400만원 상당의 온라인 강의가 0원
2개월 프리패스 제공안내받기
피그마를 활용한 UI/UX 기획과
설계부터 프론트엔드 구현까지
UIUX 웹앱 디자인 & 프론트엔드개발
(Figma, React.js)이란?

UI 디자인 스케치, 프로토타이핑 및 협업을 위한 디자인 도구 피그마의 사용법과
스마트기기에 적용 가능한 서비스에 대하여 사용자 경험과 니즈를 분석하여
정보설계, UI설계, 화면설계 등을 구현할 수 있습니다.
Start now

- UI UX 기획
- 사용자 리서치
- 피그마 Figma
- 2D 디자인
- 프로토타입 설계
- 디자인 Handoff
- HTML, CSS
- JavaScript
- React.js
- jQuery
- Library
- Publishing
- Figma Web Design
- React.js & Publishing
세계가 주목하는 UI/UX 툴, 피그마
UI 디자인 스케치, 프로토타이핑 및
협업을 위한 Figma의 기본 사용법,
실무 활용법에 대해 교육합니다.
Figma(피그마) 기획부터 디자인,
프로토타입 개념 잡고, 실전까지 완전 정복
- Figma(피그마) : 웹 기반 프로그램으로 별도의 프로그램 설치 없이,
웹 브라우저에서 바로 실행이 가능한 UI UX 디자인 및 협업 툴 - 화면 설계 : 피그마에서 UI UX를 기획하고 와이어 프레임을 구성하고,
프로토타입 (lo-fi,high-fi) 설계가 가능 - Hand-off : 디자이너가 개발자에게 디자인 파일 및 이미지의 크기,
위치, 색상 정보, 폰트 정보 등 다양한 정보를 전달하는 과정으로
피그마에서 Hand-0ff하여 개발자와의 커뮤니케이션이 가능

- UX/UI 디자인에서 가장 기초가 되는 부분을 중심으로, 실무에 필요한 기본기를
탄탄하게 가르쳐드립니다. - 수강생들이 강의 내용을 이해하고 본인의 실력으로 만들어 갈 수 있도록 서포트 합니다.
- 실습을 통해 내가 배운 내용을 눈에 보이는 결과물(포트폴리오)로 챙겨가세요.
- 최신 트렌드를 반영한 커리큘럼으로 진행되는 강의!
현업에서 적용 가능한 노하우를 학습합니다.

- UI UX 기획,리서치
- FIGMA 프로토타입 설계, 디자인
- Front-end
- 포트폴리오
- 반응형 웹
- 메인 디자인
- 모바일 디자인
- 프론트엔드 개발
Figma Front-end UI UX 프로토타입 설계부터
UI UX 프로토타입 설계부터
프론트엔드 개발 능력까지 갖춘
기업에서 탐내는 인재로 성장!
실제 프로토타이핑과 핸드오프 등 협업 실무 과정까지 학습하며,
실시간 협업 기능으로 커뮤니케이션 효율을 높이고 생산성있게
작업하는 방법을 익혀보세요!

관련 자격증 취득이 가능합니다.
수강후기
커리큘럼
- 1
포토샵
- 파일 관리하기, 선택하기, 이동하기
- 변형하기, 회전하기, 자르기, 분할하기, 그리기, 채색하기
- 리터칭, 보정하기 , 합성의 기본
- 2
피그마(Figma)
- 그래픽 스타일과 라이브러리,
정렬과 레이아웃 - 리소스, 컴포넌트, 오토 레이아웃
- 디자인 시스템과 협업, 피그마로
디자인하기
- 그래픽 스타일과 라이브러리,
- 3
웹퍼블리싱
- HTML 작성하기, HTML의 기본
- CSS 선택자, CSS 애니메이션
- 플렉스박스와 그리드로 만드는
CSS 레이아웃 기초 - CSS 고급 활용 기법
- 4
UX & UI 시나리오 개발
- 피그마 컴포넌트 개념과 사용법
- 피그마 컴포넌트와 배리언트 제작하기
- 피그마 컴포넌트와 배리언트 이용한
앱 만들기 - 피그마 프로토 타입 제작하기
- 전 단계에서 만든 앱을 프로토타입
제작하기 - html/css 이용하여 앱 코딩하기
- 5
프로토타입 제작
- 피그마를 사용하여 아이디어
스케치 정리하기 - css 그리드 사용법 익히기
- 반응형 제작 연습, js 플러그인
사용법 익히기 - 피그마 프로토타입 제작하기
- html/css 프로토타입 제작하기
- html/css 반응형 제작하기
- 피그마를 사용하여 아이디어
- 6
디자인 구성요소 제작
- 피그마를 이용한 개인 스토리보드와
디자인 만들기 - 자바스크립트 기초문법 (변수, 조건문)
- 피그마를 이용한 개인 스토리보드와 디자인 만들기
- 자바스크립트 문법 (제어문, 객체, 배열)
- 완성된 디자인으로 html/css 구현하기
- 자바스크립트 문법 (내장 객체, DOM,
브라우저 객체)
- 피그마를 이용한 개인 스토리보드와
- 7
모바일 UX 설계 및 UI 디자인
- 자바스크립트 웹 사용에 필요한 활용
예제 정리하기 - 웹 제작 팀프로젝트 (PC / MOBILE)
- 자바스크립트 웹 사용에 필요한 활용
- 8
자바스크립트
- 자바스크립트 고급
- 클래스, 비동기 통신, 모듈 등
- 9
리액트(React)
- JSX 소개
- 엘리먼트 렌더링
- 컴포넌트와 Props
- State와 생명주기
- useState, useEffect, useMemo, useCallback, useRef
- 조건부 렌더링, 리스트와 키, 스타일링
- 컨텍스트, redux
- 10
프로젝트
- 리액트 팀 프로젝트 진행 및 발표
웹 UI/UX 콘텐츠 디자인
웹 UI/UX 콘텐츠 디자인 취업완성패스
취업 컨설팅
원하시는 과정을 선택하시면 1:1 상담을 진행해드립니다.