AI 활용 프론트엔드개발 (AWS/Figma/React/ChatGPT)
- 1차 개강일
- 26년 01월 20일(화)
- 2차 개강일
- 26년 02월 02일(월)
고용24 국민내일배움카드 훈련과정명은
AI 활용 프론트엔드개발
(AWS/Figma/React/ChatGPT)입니다.
챗 GPT(ChatGPT)를 활용하여
웹 애플리케이션의 화면을 구현해보는
AI 활용 프론트엔드 개발
(AWS/Figma/React/ChatGPT)이란?
웹사이트나 앱의 화면을 만드는 프론트엔드 개발자(코딩) 부트캠프 교육과정으로,
Figma 활용해 화면 디자인을 작업 + React, node을 활용해 화면을 구성하고 설계 +
생성형 AI(ChatGPT)를 활용하여 원하는 프롬프트 명령어로 원하는 코드를 생성할
수 있습니다.
이를 통해 프론트엔드 개발 과정이 더 빠르고 효율적으로 진행됩니다.
Start now
AI 시대로 현재 핫한 키워드 ‘챗 GPT’
생성형 AI(ChatGPT) 활용은 선택이 아닌 필수!
- point 01. 생성형 AI(ChatGPT)를 활용해 원하는 프롬프트(단어나 문장)을 입력하면, 코드를 자동으로 생성해주기 때문에 프론트엔드 개발 과정이 더 빨라지고 효율적으로 진행될 수 있습니다.
- GhatGPT를 활용한 예시 - “JavaScript로 간단한 Todo List 앱을 만들어줘” 를 영어로 번역 후 ChatGPT에 입력. Tip: 간단한 질문으로는 한 번에 원하는 답변을 얻기 어려우니 프롬프팅 시 요구사항을 상세하게 입력해야 원하는 답변을 얻을 수 있습니다.
- point 02. 총 5가지 프로젝트를 완성합니다. (미니프로젝트 1(UIUX) · 미니프로젝트 2(프론트엔드 개발) · 미니프로젝트 3(PWA/SPA구현) · SPA 영화 홍보 예매 사이트 프로젝트(스타벅스/트위터) · SPA 영화 홍보 예매 사이트 프로젝트(메가박스/CGV)
- 미니프로젝트1, 미니프로젝트2, 미니프로젝트3, 스타벅스/트위터 유형의 PWA 웹/앱 프로젝트, 영화 홍보 예매 사이트 프로젝트
- point 03. 프론트엔드 개발자로 성장할 수 있는 맞춤 시스템으로 관리합니다.
- 내가 짠 코드에 묻고 답변듣고! 실시간 피드백이 가능한 코드 리뷰 제공
- 자유롭게 공부하거나 같은 팀끼리 토론 할 수 있는 온·오프라인 스터디그룹
- 모든게 처음이라 두려운 분들을 위해 전문 코칭 멘토링 (교수진, 현장전문가, IT전문가, 취업전문가 풀 구성)
- 수강 중에 부족한 지식을 쌓고, 예습·복습이 가능한 온라인강의 제공
웹/앱 개발도 AI(ChatGPT)를 활용하는 시대
Figma, React, Node.js, ChatGPT 등의
도구와 기술을 활용하여
웹 애플리케이션의 UI/UX 작업을
효율적으로 수행할 수 있습니다.
협약기업에서 원하는 사람으로 맞춤 성장하고
협업 프로젝트를 진행하여 취업까지 가능!
- Figma를 통한 디자인 구현: Figma는 UI/UX 디자인 도구로, 프론트엔드 개발자들이
디자이너와 협업하여 사용자 인터페이스를 구현할 수 있습니다. - React를 통한 컴포넌트 기반 개발: React는 컴포넌트 기반 프레임워크로,
재사용 가능한 UI 요소를 효율적으로 구축할 수 있습니다. - Node.js를 통한 백엔드 개발: Node.js는 JavaScript 런타임 환경으로,
프론트엔드와 백엔드를 통합적으로 개발할 수 있습니다. - ChatGPT를 통한 생성형 AI 활용: ChatGPT는 대화형 AI 모델로,
코드 생성, 문서화, 디자인 구현 등 다양한 작업을 지원합니다.
- 이 과정의 훈련 목표
- 개발환경 구축, UX/UI설계 및 기획(Figma),
프론트엔드 구현을 위한
HTML/CSS, javascript,
Typescript, React.js&ReactNative, Node.js,
AWS클라우드와 생성형 AI활용을 배우고
스타벅스/트위터 유형의 PWA 웹/앱 프로젝트,
영화 홍보 예매 사이트 프로젝트를 구현하여
웹 프론트엔드 기획자,
프론트엔드 개발자의 취업을 목적으로 교육을 진행합니다.
- 개발환경 구축, UX/UI설계 및 기획(Figma),
수료 후 “끝”이 아닌 새로운 “시작” 취업 지원 시스템!
합격 전략 A to Z 전문 커리어 코치에게 1:1컨설팅 진행
구인공고 공유 및 추천 수강생 니즈를 분석해 개인별 맞는 기업을 매칭
온/오프라인 취업 특강 취업 전략에 대한 특강을 진행하여 다가올 취업에 대응
취업 후에도 지속적인 관리 취업 후에도 커리어 설계 / 미취업자도 6개월까지 취업지원
- 정규교과
- 개발환경 및 팀프로젝트 환경 설정 (VS CODE/Git/GitHub)
- UX/UI 설계 (Figma)
- 미니프로젝트 1 (UX/UI) - 실전
- 프론트엔드 Level 1 (HTML/CSS)
- 프론트엔드 Level 2.1 (JavaScript)
- 프론트엔드 Level2.1 (JavaScript)
- 프론트엔드 Level2.2 (Typescript)
- 미니프로젝트 2 (프론트엔드 개발) - 실전
- 프론트엔드 Level3(React/ReactNative)
- 프론트엔드 Level4 (Node.js)
- 미니프로젝트 3 (SPA구현) - 실전
- 클라우드 활용 (PWA/AWS 클라우드)
- 생성형 AI 활용 (ChatGPT)
- 프로젝트
- PWA(Progressive Web APP) 프로젝트 1 - 실전
- 1. 스타벅스 유형의 커피 전문점 PWA 웹 앱 제작
- 2. 트위터 유형의 SNS 플랫폼 PWA 웹 앱 제작
- SPA(Single Page Application) 프로젝트 2 - 실전
- 1. 영화 홍보 예매 사이트 제작(메가박스)
- 2 .영화 홍보 예매 사이트 제작(CGV)
AWS, 피그마, 리액트, 챗GPT를
활용하여 업무 시간은 줄이고
작업 결과물의
퀄리티가 높은
프론트엔드 개발자로
성장할 수 있습니다.
AI(ChatGPT) 시대, 생성형 AI 기술인 ChatGPT를 활용하여 코드 생성, 디자인 구현,
문서화 등의 작업을 효율적으로 수행할 수 있습니다. 이젠에서 시작하세요.
전공자 아니어도 됩니다.
기업이 뽑고 싶게 만드는 건 저희 전공이니까요.
수강은 시작일 뿐! 초보도 가능한 수강생 전용 혜택
-
중도 포기자 0%를 위한
- 사전 수업 스타트 캠프
- 사전 학습
가이드 제공
-
실무 기준에 맞춰 레벨UP
- 정규 실무 과정
- 실무 중심의
수업
-
이력서에 바로 쓰는 결과물 생성
- 실무 프로젝트
- 현직 실무자
협업 프로젝트
-
취업 성공 끝까지 함께
- 취업 연계
- 취업 컨설팅 +
채용 연계
성과를 인정하는 다양한 리워드 제공
전담
취업지원팀이
끝까지 함께
- 기업별
면접 족보
공개 - 이력·자소서
1:1 첨삭 - 기업별
예상 질문
집중 대비 - AI 면접 +
실전 모의면접 - 1:1 맞춤
취업 전략
분석
취업 지원하고 성과 증명까지
디지털 배지
- 프로젝트 발표 &
수상 기회 - 공모전·박람회 지원
- 무료 컨퍼런스 제공
기초가 없어도 따라올 수 있습니다.
수업 시작 전, 사전 교육으로 기초 쌓기!
비전공자도 뒤처질 걱정 NO
혼자서 막막하지 않도록!
스터디 크루 운영과 전문 튜터의 밀착 지원

현직 실무자와 함께 진행하는 프로젝트!
기업 기준에 맞춘 기획·제작·피드백 과정 경험
이력서·포트폴리오·면접까지!
단계별 취업 지원 프로그램 제공
남들 혼자 준비하며 겪을 시행착오,
단 한번에 끝내고 취업합니다.
완벽한 취업 연계!
50개+협력기업과 함께! 취업까지 직행합니다.
평균 취업률 80% 비전공자·초보자 포함 수치
- 삼성
- LG
- 현대
- SK
- 현대 백화점
- 쿠팡(COUPANG)
- 한국타이어
- 기아
- 서울교통공사
- LINE
- The JoongAng
- 올리브네트웍스
- HANSSEM (한샘)
- DOOSAN(두산)
- KT nasmedia
- 캐논 CANON
- 효성 ITX
- NOL interpark
- 다이소
- NHN
- KG 이니시스
- 한국중부발전
- LX 하우시스
- (주)한화
- 한국전력공사
- 신세계
- LOTTE GRS
- KCC
- YTN
- YTN
꿈꾸던 기업의 현직자, 이미 당신의 기수 선배들입니다.
교육비 실부담금 O원
하지만,
매달 받는 훈련장려금으로 →
교육비 실부담금은 O원
(최대 60만원) ↓ 교육비 실부담금 O원
K-디지털·국기·취준생 국비지원
최대 20만원 지급
(6개월 기준 최대 120만원) ※ 개인별 지급액은 상이할 수 있습니다.
-
50+
협력기업
취업연계 -
희망 기업 맞춤
예상 질문 &
모의 면접 -
AI Tool
사용 혜택
제공 -
500만원 상당
AI+ 실무 활용
온라인 강의 -
온라인
학습 시스템
제공 (LMS) -
교육과정
관련
교재 제공
수강후기
커리큘럼
- 1
개발환경 및 팀프로젝트 환경 설정
(VS CODE/Git/GitHub)- 프론트엔드 개념 및 개발 환경의 이해
- SSR(Server Side Rendering),
CSR(Client Side Rendering)의
차이점 이해 - VS CODE 설치 및 사용
- Git/GitHub의 개요
- Git 설치, Branch 관리, Request 협업
- GitHub의 저장소 생성과 관리
- GitHub의 이슈, 레퍼지토리, 위키
- 2
UX/UI 설계 (Figma)
- UX/UI 기본 개념
- 사용자 분석 및 UX 설계
- 인사이트 도출 및 워크플로우 제작
- 와이어프레임 제작
- UI 시스템 구축 및 설계
- 프로토타입 제작
- 사용성 테스트
- 3
미니프로젝트 1 (UX/UI) ★실전★
- UX/UI 설계 (Team Project)
- User research
- Persona / Journey map
- Workflow / Wireframe
- UX/UI Guide
- Prototype
- 4
프론트엔드 Level 1 (HTML/CSS)
- 웹 & 모바일 브라우저 이해
- HTML 구조 이해 및 기본 문법
- HTML 기본 태그 및 레이아웃 구조
- 시멘틱 태그와 메타데이터
- CSS 기본 속성
- 박스모델과 플렉스박스
- 반응형 웹디자인을 위한 미디어쿼리
- CSS를 활용한 웹&모바일 레이아웃 구현
- 5
프론트엔드 Level 2.1(JavaScript)
- javascript 기본 개념 / 동작 원리
- 변수, 데이터 타입, 연산자, 제어문,
타입 변환, 객체, 함수, 스코프,
전역 변수 개념 - 문서 객체 모델, 동기식 처리 모델,
비동기식 처리 모델 - 이벤트 처리와 DOM API
- 외부 데이터 호출 라이브러리
- 객체지향 프로그래밍
- 정규표현식,
ES6 함수의 추가 기능, 배열
- 6
프론트엔드 Level 2.2 (Typescript)
- Typescript 개요 및 문법
- Typescript의 정의와 장점
- Typescript의 기본 개념과 작성 방법
- Typescript의 자료형과 제네릭
- Typescript의 함수, 인터페이스,
클래스, 모듈 - Typescript의 에러 처리와 제어 흐름
- 7
미니프로젝트 2
(프론트엔드개발) ★실전★- 웹/모바일 퍼블리싱
- HTML / CSS 활용 웹/모바일 퍼블리싱
- 문서내 동적 기능 구현을 위한
Javascript 작성 - Javascript & Dom을 활용한 UI 구현
- Javascript를 활용한 애니메이션 UI 구현
- 8
프론트엔드 Level 3 (React/ReactNative)
- React/ReactNative의 이해
- React의 컴포넌트, 상태, 속성, 이벤트
- React의 JSX, 연산자, 조건부 렌더링
- React의 컴포넌트 생명주기,
일반 컴포넌트와 상태가 있는 컴포넌트 - React router 작동 원리
- ReactNative의 컴포넌트,
상태, 속성,
이벤트 - ReactNative의 컴포넌트 스타일,
레이아웃, 스크롤 - ReactNative의 네비게이션, 탭,
슬라이드 - ReactNative의 애니메이션,
인터폴레이션, 제스처 - ReactNative의 안드로이드, iOS 특징
- ReactNative의 데이터 저장,
네트워크, 앱 접근
- 9
프론트엔드 Level 4 (Node.js)
- SPA(Single Page Application)
- Node.js
- Express 프레임워크를 활용한
웹 서비스 구현: CRUD, Rest API,
Database - Mongoose + MongoDB
- 웹서비스 배포: AWS, Netlify
- 10
미니프로젝트 3
(PWA/SPA구현) ★실전★- 웹/모바일 프론트엔드 개발
- Webpack을 활용한 SPA 구현
- MVVM 패턴을 활용한 SPA 사이트 구현
- 11
클라우드 활용 (AWS 클라우드)
- AWS 인프라구조 이해
- AWS S3 이용한 아키텍처 설계
- AWS IAM, Organization 서비스 설계
- AWS Route53,
ELB,
EC2 AutoScaling 관리
- 12
생성형 AI 활용 (chatGPT)
- 생성형 AI(ChatGPT)의 이해
- ChatGPT 프롬프트 작성
- ChatGPT 확장 프로그램
- ChatGPT 활용1
(아이디어 도출 방법
및 목표 설정) - ChatGPT 활용2(프로젝트 기획서 제작)
- ChatGPT 활용3(코딩 활용)
- 13
PWA(Progressive Web APP)
프로젝트 1 ★실전★- 1_1.스타벅스 유형의 커피 전문점
PWA 웹 앱 제작- 프로젝트 기획 및 제작(chatGPT 활용),
- 웹/모바일 퍼블리싱(chatGPT 활용),
- Page 동적 가능 구현(Javascript / chatGPT 활용),
- Express 프레임워크 활용
Server 구현, - Router / URL Parameters 활용 Pagenation,
- MongoDB & Mongoose 활용
DB 테이블 Setting
- 1_2.트위터 유형의 SNS 플랫폼
PWA 웹 앱 제작- 프로젝트 기획 및 제작(chatGPT 활용),
- 웹/모바일 퍼블리싱(chatGPT 활용),
- Page 동적 가능 구현(Javascript / chatGPT 활용),
- Express 프레임워크 활용
Server 구현, - Template Library,
Pug 활용 MVP 구현, - Shema 활용 Video Search 기능 구현
- 1_1.스타벅스 유형의 커피 전문점
- 14
SPA(Single Page Application)
프로젝트 2 ★실전★- 2_1.영화 홍보 예매 사이트
제작(메가박스)- 프로젝트 기획 및 제작(chatGPT 활용),
- 웹/모바일 퍼블리싱(chatGPT 활용),
- Page 동적 가능 구현(Javascript / chatGPT 활용),
- MongoDB & Mongoose 활용
Product DB관리, - Routes API & UI구현,
- Login Page &
회원 Authentication 기능 개발,
- 2_2.영화 홍보 예매 사이트 제작(CGV)
- 프로젝트 기획 및 제작(chatGPT 활용),
- 웹/모바일 퍼블리싱(chatGPT 활용),
- Page 동적 가능 구현(Javascript / chatGPT 활용),
- Private Route & Token verify 활용,
- 장바구니 상품정보 관리 (Redirect),
- Token 활용 Google, Git Hub 등 외부
로그인 기능 구현
- 2_1.영화 홍보 예매 사이트
UX/UI 웹디자인 프론트엔드
UX/UI 웹디자인 프론트엔드 취업완성패스
-
웹 언어의 기본을 확실히!
웹 퍼블리셔의 모든것~UIUX웹퍼블리셔_웹디자인기능사
-
사용자 니즈를 분석하여,
UI,UX 설계 등을 구현UIUX웹디자인(피그마)
-
생성형 AI, 포토샵, 일러스트 기술을
습득하여 UIUX 제작 편집.생성형AI 활용한 UI/UX 제작 편집(일러스트,포토샵)
-
디자이너라면 가장 먼저 배워야할
필수 프로그램 포토샵&일러스트AI를 활용한 디지털 콘텐츠제작(포토샵,일러스트)
-
웹디자인과 퍼블리싱을 학습해
실제 웹 포트폴리오 구현까지-UIUX웹앱디자인(피그마[Figma])&프론트엔드(react.js)
-
챗 GPT(ChatGPT)를 활용하여
웹 애플리케이션의 화면을 구현.생성형 AI&API를 활용한 웹프론트개발(Figma,React)
10초 안내받기
원하시는 과정을 선택하시면 1:1 상담을 진행해드립니다.