디지털디자인·AI

프로젝트기반 AI활용 UIUX웹앱디자인(피그마[Figma])&프론트엔드(react.js)

디지털디자인·AI

웹 디자인부터 프론트엔드 개발까지 완벽 대비!
AI 활용 웹ㆍ앱 디자인 및 프론트엔드 과정

AI 기반 리서치부터 피그마를 활용한 UI UX 화면 설계와 프론트엔드 구현까지
웹 서비스 구축의 전 과정을 기업 맞춤형 프로젝트로 경험하는 하이브리드 실무 과정입니다.

HTML, CSS, 자바스크립트는 물론 챗GPT 등 다양한 생성형 인공지능 도구를 활용하여
현장 실무 능력을 완벽하게 갖춘 융합형 UI UX 디자이너 및 개발자로 성장해 보세요.

어떤걸 배울 수 있나요?
영상·편집 주요 스킬

1

HTMLHTML5를 활용해 웹페이지의 구조와 콘텐츠를 체계적으로 설계하고, 시맨틱 마크업으로 접근성을 강화하는 방법을 익힙니다.
2

CSSCSS3를 활용해 웹페이지의 시각적 디자인을 구현하고, 반응형 및 애니메이션 효과로 사용자 경험을 향상시키는 기법을 익힙니다.
3

JavaScriptJavaScript를 활용해 웹페이지에 동적 인터랙션과 DOM 조작을 구현하고, 사용자 경험을 극대화하는 기술을 익힙니다.
4

피그마Figma를 활용해 UI/UX 디자인 프로토타입을 제작하고, 사용자 중심의 인터페이스 흐름을 설계하는 실무 기술을 익힙니다.

이런 내용을 교육합니다

커리큘럼 총 5개월(95일/760시간)

1 화면 설계
- 화면 설계
2 서비스ㆍ경험디자인 관찰조사
- 서비스ㆍ경험디자인 관찰조사
3 서비스ㆍ경험디자인 시나리오 개발
- 서비스ㆍ경험디자인 시나리오 개발
4 프로토타입 기초데이터 수집 및 스케치
- 프로토타입 기초데이터 수집 및 스케치
5 프로토타입 제작 및 사용성 테스트
- 프로토타입 제작 및 사용성 테스트
6 UI/UX 콘셉트 기획
- UI/UX 콘셉트 기획
7 UI 아키텍처 설계
- UI 아키텍처 설계
8 스마트문화앱 UX 설계
- 스마트문화앱 UX 설계
9 스마트문화앱 UI 디자인
- 스마트문화앱 UI 디자인
10 UI/UX 가이드 제작
- UI/UX 가이드 제작
11 피그마 활용
- 반응형 웹 랜딩페이지 디자인
- 그리드 설정
- 랜딩페이지 디자인
12 HTML&CSS Flex 레이아웃
- Flex Box 속성 이해하기
- Flex, Grid 활용한 HTML5 문서 유형별 레이아웃 작업하기
13 자바스크립트 Javascript
- 자바스크립트 기본문법 이해
- 자바스크립트 활용 및 응용
14 React.js
- React 환경설정
- 기본문법과 컴포넌트 이해
- 컴포넌트 분할과 프로퍼티를 이용한 데이터 전달
- 컴포넌트 활용하기
- Redux를 활용한 컴포넌트 관리
15 반응형 웹디자인 프로젝트
- 반응형 웹디자인 프로젝트
16 일러스트레이터 활용
- 일러스트레이터 활용
17 포토샵 활용
- 포토샵 활용

* 교육 커리큘럼은 트렌드 및 기수에 따라 변동될 수 있습니다.