개강 D-11자부담 0원
생성형AI 기반 UX UI 디자인& 프론트엔드 개발 과정(ChatGPT, 일러 포토, 피그마, 자바스크립트, 리액트)
(주)이젠컴퓨터아카데미안산 · 6회차 · 경기 안산시
JavaReact클라우드AWS생성형AIK-디지털
프로그램 요약
생성형 AI(미드저니·챗GPT)를 활용한 UX/UI 디자인 & 프론트엔드 통합 부트캠프(취업연계)
- 모집마감
- 개강 전까지
- 수업일정
- 2026.08.25 ~ 2027.03.02약 6개월
- 모집정원
- 20명
- 총 시간
- 1,014시간
- 학습장소
- 경기경기도 안산시 상록구 광덕1로 375 (이동 강우프라자)오프라인
- 강의장
- 강우빌딩5층
- 수강료
- 0원 전액 국비지원
- 훈련장려금
- 월 최대 80만원
출처 · 고용24 등록값 · 기관 표기분은 별도 표시
어떤 분이 수강하면 좋을지
- ✓전공·학력 무관 — K-디지털 트레이닝은 제도상 전공을 보지 않습니다
- ✓선행학습:특별한 선수학습 없음 -직무경력:신규취업자, 타직무 유경험자 -자격종목:자격사항 없음
출처 · 기관 랜딩페이지 · 제도 요건
커리큘럼
- 1사전 수업 스타트캠프
기획(브레인스토밍) · 피그마 기초(1~4주) · 부트스트랩 실무예제 페이지 작성
- 2개발환경 & UX·UI 설계
Visual Studio · Git · Figma
- 3프론트엔드 기초 & 응용
HTML5 · CSS3 · JavaScript · TypeScript
- 4생성형 AI 활용
React · Node.js
- 5API & Cloud 활용
API · AWS
- 6UX/UI 디자인 제작
UX/UI 정의 및 개발 프로세스 · 디지털 컴포넌트 · Web/Mobile UX 기획·설계
- 7실전 협업 프로젝트
UX·UI 기획 설계 · UX·UI 디자인 · TypeScript
고용24 등록 교과목 17개 보기
- 최신 트랜드(figma)를 활용한 UX/UI 디자인피그마는 어떤 툴인가? 피그마 시작하기 파일, 브라우저 살펴보기 에디터 살펴보기 에디터 사용하기 컴포넌트 사용하기 오토레이아웃 사용하기 컨스트레인트 사용하기 레이아웃그리드 사용하기 플러그인 사용하기 스타일 사용하기 반응형 랜딩 페이지 디자인하기 뉴스앱 디자인하기 와이어 프레임과 프로토타입으로 화면 설계하기 팀라이브러리로 디자인 리소스 관리하기 실시간 협업하기 개발자가 피그마 활용하기 Figma AI를 활용한 디자인 - Figma AI 기반 디자인 자동화 및 생성 - Figma AI를 통한 디자인 컨셉 제안 및 최적화 - Figma AI 기반 디자인 반복 작업 자동화
- 기초부터 확실하게(UX/UI 디자인 제작 툴 기초 학습)웹디자인의 프로세스 및 최신 트렌드 이해 웹디자인 구성 원칙 이해하기 - 레이아웃, 시각적계층구조, 비율, 삼등분 규칙, 게슈탈트 법칙, 여백 - 색상이론, 타이포그래피 UIUX 디자인 패턴 이해하기 - 모달, 토글,E70, 태그, 자동완성, 드롭다운, 아코디언, 캐러셀, 페이지네이션, 무한스크롤, GNB, LNB 생성형 AI 기반 디자인툴 기초 사용법 - (일러스트(AI), 포토샵(AI), 어도비XD(AI), Figma(Figma AI))
- 기본기를 탄탄하게(UIUX 기획 및 디자인)UI 디자인 시스템의 이해 Google의 Material Design 사용자를 이해하는 UX 리서치 사용자의 심리와 행동 이해 사용자 리서치 결과에서 인사이트를 분석하는 모델링 어피니티 다이어그램 기법을 통한 인사이트 도출 사용자 페르소나 작성 아이디어 구체화를 위한 워크샵(Feat. 구글 스프린트) 중요도에 따른 Feature(기능) 우선순위 세우기 웹페이지 제작의 전략과 컨셉 설정 서비스 기획과 운영
- 협업 툴 사용법 학습Git 기초와 GitHub 활용 협업 실무
- 최신 트랜드 생성형 AI 활용(ChatGPT)생성형 AI(ChatGPT)의 이해 ChatGPT 프롬프트 작성 ChatGPT 확장 프로그램 ChatGPT 활용 1 (아이디어 도출 방법 및 목표 설정) ChatGPT 활용 2 (프로젝트 기획서 제작) ChatGPT 활용 3 - ChatGPT를 활용한 프로그래밍 언어 변환 및 자동화 - ChatGPT기반 프로그램 코드 생성 및 최적화 - ChatGPT를 활용한 프로그래밍 보조 및 자동화
- 지금부터 실전으로(Html, CSS를 활용한 UI/UX 디자인 적용)웹 & 모바일 브라우저 이해 HTML 구조 이해 및 기본문법 HTML 기본 태그 및 레이아웃 구조 시맨틱 태그와 메타데이터 CSS 기본 속성 박스모델과 플렉스박스 반응형 웹디자인을 위한 미디어쿼리 CSS를 활용한 웹&모바일 레이아웃 구현 포지션, 애니메이션, SCSS, SASS, 부트스트랩 HTML 심화(멀티미디어, 폼, 시맨틱 태그) HTML을 꾸미기 위한 CSS 심화 - 미디어쿼리,애니메이션,플렉시블 레이아웃 구현 PWA(Progressive Web Apps) 구현, PWA 웹API 디자인 툴 활용 화면 구현 디자인 시스템 구조 설계와 Foundation 및 Component 제작 디자인 시스템 실무, 상대와 변수 고려, 디자인 시스템 업그레이드 레이아웃 및 반응형 웹사이트 구현 ChatGPT를 활용 - UI 디자인 아이디어 생성 및 프로토타입 구현 - ChatGPT 기반 UI 요소 자동 생성 및 코드 최적화 - UI/UX 개선 제안 및 검증
- 웹페이지의 동적요소를 담당하는 자바스크립트/제이쿼리 기초 이해변수, 자료형, 연산자, 조건문, 반복문 자바스크립트 동작 원리, 스코프, 클로저 이벤트 처리와 DOM API 함수 선언과 표현식 이벤트 리스너, 이벤트 객체 객체 리터럴, 속성 추가, 수정, 삭제 ES6 클래스 문법, 상속, 프로토타입 콜백, 프로미스, async/awai 외부 데이터 호출 라이브러리 (Fetch API, Axios) 모듈 개념과 필요성 ES6 모듈 시스템(Typescript) 객체 구조분해할당 jQuery 문서 객체 선택자와 조작법
- 데이터베이스를 이용해 살아있는 웹 구현데이터베이스 생성 및 관리 사용자 생성 및 권한 관리 데이터 모델링, 데이터 C/R/U/D 고급 SQL JOIN, 서브쿼리, View, SP, Trigger GraphQL 사용하기
- 리액트로 구현하는 SPA(Single Page App)VSCode 설치 및 환경 설정 React 설치 및 구성, 기본 환경 설정 JSX 기본 문법, 컴포넌트 작성, Props와 State 관리 이벤트 처리, useState, useEffect 등 주요 Hook 활용 React Router를 통한 SPA 구현, Redux 또는 Context API를 통한 상태 관리 서버사이드 렌더링(SSR) React API CSS in JS, Styled-components, 애니메이션 라이브러리 활용 Next.js 소개 및 활용 테스트
- 자바스크립트 고급 활용Node.js 설치 및 기본 개념 이해 Vue.js 기본 문법, 미들웨어, 라우팅 RESTful API 개념, CRUD 구현 데이터베이스 연동 인증 및 보안 JWT, OAuth 등 인증 기법, 보안 설정
- 최신 트랜드 서버리스(AWS 클라우드 활용배포)AWS 인프라 구조 이해 AWS EC2 서버를 통한 앱 배포하기 AWS RDS를 확용한 데이터베이스 배포 AWS IAM, Organization 서비스 설계 AWS Route53, ELB, EC2 AutoScaling 관리
- 프로젝트 기획과 관리프로젝트관리 개요 - 과정 소개 및 프로젝트 환경 프로젝트 조직구조 & 생애주기 - 프로젝트 수명주기, 프로젝트 조직 프로젝트 통합관리 개념 및 프로세스 - 프로젝트관리 공통 프로세스/착수, 기획, 이행, 감시 및 통제, 종료 프로세스 그룹 프로젝트관리(PM) 주제별 개념 및 프로세스 - 프로젝트관리 성공/실패사례 분석 사례 발표 프로젝트 관리 지식영역(이해관계자) - 지식영역 이론 프로젝트 관리 지식영역(범위관리) 실습 시나리오 만들기 - 범위관리의 중요성 및 요구사항수집, WBS 구조 이해 프로젝트 관리 지식영역(일정관리), 실습 프로세스 및 template 구성 소개 - 일정관리 기법(활동 리스트 등) 과제완성을 위한 양식소개 프로젝트 원가관리 - 프로젝트 원가 구조이해 프로젝트 리스크 관리 - 리스크 식별 실습 프로젝트 품질관리 - 품질 비용과 품질 도구 프로젝트 의사소통 관리 - 의사소통 모델.기술, 방법 프로젝트 조달관리 - 계약, 조달 프로세스 조직 변화와 변경통제 - 프로젝트 거버넌스 및 애자일 기법 프로젝트 관리 총괄 정리 - 통합 프로젝트 관리 개발자에서 IT업무 포지션 변경 사례 I - 개발자에서 PM, PA, 기획자, S/W TEST 등 업무 포지션 변경 사례 RFP에 대한 이해 및 프로젝트 계획서 작성 - 프로젝트 별 고객의 요구사항 분석 및 일정관리, 상세 진행 계획서 작성 스코프 크립 방지 및 범위 관리 계획 - 추가 요구사항 협의 및 개발 범위 관리 요구사항에 따른 프로젝트 실패 사례 - 요구사항 분석의 성공과 실패 사례 안내 작업세부 일정, 마일스톤 및 리소스 관리 - 세부일정 및 리소스 관리와 마일 스톤 프로젝트 S/W TEST 이해 및 필요성 - S/W TEST 이해 및 필요성 S/W TEST 기획 및 TEST CASE 작성 - 프로젝트 TEST 기획 및 계획서 작성 개발자에서 IT업무 포지션 변경 사례 II - 개발자에서 PM, PA, 기획자, S/W TEST 등 업무 포지션 변경 사례 사용자 UI/UX화면 상세설계 방법 I - 요구사항 기반으로 사용자 UI/UX 화면 상세 설계서 작성 사용자 UI/UX 화면 상세설계 방법 II - 요구사항 기반으로 사용자 UI/UX 화면 상세 설계서 작성 사용자 UI/UX 화면 상세설계 방법 III - 요구사항 기반으로 사용자 UI/UX 화면 상세 설계서 작성 IT인사 담당자가 이야기하는 신입 개발자 토크 - 취업을 위해 사전에 필요한 기술과 인사담당자들이 생각하는 관점
- MVP(Minimum Viable Product) 이해 및 제작MVP개요 - MVP 개요 및 필요성과 환경 MVP 성공 방법 - MVP성공 방법 요소 및 주의사항 MVP의 활용방안 - 필요한 유형과 필요치 않은 유형 MVP 개발의 성공 - MVP제작 개발의 성공률을 높이는 방법 MVP 테스트 방법 - MVP 테스트 방법과 프로세스별 방안 모바일 MVP - 모바일 MVP의 디자인 및 개발요소 WEB MVP - WEB MVP의 디자인 및 개발요소 H/W MVP - H/W MVP의 디자인 및 개발요소 MVP 제작 계획서 I - 모바일 App MVP제작 계획에 상세 설계 실습 이론 MVP 제작 계획서 II - WEB MVP제작 계획에 상세 설계 실습 이론 MVP 제작 계획서 III - H/W MVP제작 계획에 상세 설계 실습 이론 ChatGPT를 활용한 - ChatGPT 기반 MVP 메인페이지 프로토타입 구축 - ChatGPT를 통한 MVP 서브페이지 자동 생성 - ChatGPT 기반 MVP 핵심 기능 페이지 프로토타이핑
- 콘텐츠 서비스를 위한 콘텐츠(음원,영상) 관리 및 판매 웹서비스 제작- 사이트 기획 및 요구사항 정의 - 사용자가 직관적이고 즐겁게 서비스를 이용할 수 있는 UX/UI 화면 기획 및 설계 - 전체 시스템의 구조와 동작 방식 정의(아키텍쳐 설계) - CMS(콘텐츠 관리서비스) 기능 구현 - 다양한 장치와 화면 크기에서 최적의 사용자 경험을 제공할 수 있는 반응형 웹 프론트엔드 구현 - 프론트엔드 통합테스트 및 배포, 모니터링 - 프로젝트 1차 발표 - 사용자(타훈련생) 피드백 수집 - 기능개선 및 업데이트후 2차 프로젝트 발표
- 온라인 쇼핑몰을 위한 판매상품 큐레이션 및 경품추천 기능 웹서비스 제작- 사이트 기획 및 요구사항 정의 - 사용자가 직관적이고 즐겁게 서비스를 이용할 수 있는 UX/UI 화면 기획 및 설계 - 전체 시스템의 구조와 동작 방식 정의(아키텍쳐 설계) - 경품 추천 기능, 검색 필터링 기능 등 핵심 기능구현 - 다양한 장치와 화면 크기에서 최적의 사용자 경험을 제공할 수 있는 반응형 웹 프론트엔드 구현 - 프론트엔드 통합테스트 및 배포, 모니터링 - 프로젝트 1차 발표 - 사용자(타훈련생) 피드백 수집 - 기능개선 및 업데이트 후 2차 프로젝트 발표
- 에듀테크 서비스를 위한 교육검색 플랫폼 웹서비스제작- 사이트 기획 및 요구사항 정의 - 사용자가 직관적이고 즐겁게 서비스를 이용할 수 있는 UX/UI 화면 기획 및 설계 - 전체 시스템의 구조와 동작 방식 정의(아키텍쳐 설계) - 교육 검색 서비스 기능 구현 - 다양한 장치와 화면 크기에서 최적의 사용자 경험을 제공할 수 있는 반응형 웹 프론트엔드 구현 - 프론트엔드 통합테스트 및 배포, 모니터링 - 프로젝트 1차 발표 - 사용자(타훈련생) 피드백 수집 - 기능개선 및 업데이트후 2차 프로젝트 발표
- 총 훈련시간1014 시간
출처 · 기관 랜딩페이지 · 접힘은 고용24 등록 교과목
지원 혜택
금전 지원
- ·매월 훈련수당 20~80만원 지급
장비·학습환경
- ·온라인 학습 시스템 제공·교재 지원
취업 연계
- ·100% 포트폴리오 보장(팀 프로젝트 무한 피드백)
- ·50개+ 협력기업 취업연계(면접 멘토링)
- ·취업 성공 캠프(협력기업 매칭)
학습 지원
- ·500만원 상당 AI+실무 활용 인강 제공
- ·스터디크루 운영
- ·현직 UXUI 디자이너 튜터링
출처 · 기관 랜딩페이지 · 훈련장려금은 제도
지원 절차
기관이 공개한 절차 정보가 없습니다. 지원하면 상담에서 안내받습니다.
출처 · 기관 랜딩페이지 · 기관마다 다릅니다
자주 묻는 질문
비전공자도 지원할 수 있나요?
K-디지털 트레이닝은 제도상 전공·학력을 보지 않습니다. 다만 기관이 밝힌 훈련 대상이 있어 위 「어떤 분이 수강하면 좋을지」를 함께 확인하세요.
내일배움카드가 꼭 있어야 하나요?
지원 시점에 없어도 됩니다. 상담 단계에서 발급을 진행합니다. 다만 수강신청은 카드가 있어야 마칠 수 있습니다.
실제로 얼마를 내나요?
내일배움카드 소지자는 0원입니다. LP: 총 교육비 9,625,900원(대조 tuition과 정확히 일치). 2026 정책변경으로 자부담 10%(40만원) 발생하나 매월 훈련수당(20~80만원)으로 실부담 0원. 1차 개강일 2026.8.25로 대조 기준(2026.8.25)과 정확히 일치
선발 절차가 있나요?
기관이 공개한 절차에서 별도 시험·전형은 확인되지 않았습니다. 상담 후 수강신청으로 이어집니다.
훈련장려금을 받을 수 있나요?
출석률 조건을 채우면 월 최대 80만원까지 받을 수 있습니다. 지급 조건은 기관·제도 기준을 따릅니다.
예전에 국비 교육을 들었는데 또 되나요?
중복수강 제한이 있을 수 있습니다. 최근 수료 이력이 있으면 상담 단계에서 먼저 확인해야 합니다.
출처 · 제도 요건 · 과정 데이터로 답이 채워지는 질문만
기관 랜딩페이지 https://as.ezenac.co.kr/ezen/curriculum/?idx=5330
고용24 2026-08-14 기준 · 매일 갱신
