AI 활용 프론트엔드개발 (AWS/Figma/React/ChatGPT)
- 1차 개강일
- 24년 10월 22일(화)
- 2차 개강일
- 24년 11월 07일(목)
고용24 국민내일배움카드 훈련과정명은
AI 활용 프론트엔드개발
(AWS/Figma/React/ChatGPT)입니다.
지금 신청하면 모든 온라인강의가 0원이라고?
간편 회원 가입만으로도 1400만원 상당의 온라인 강의가 0원
2개월 프리패스 제공안내받기
챗 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를 활용하여 코드 생성, 디자인 구현,
문서화 등의 작업을 효율적으로 수행할 수 있습니다. 이젠에서 시작하세요.
관련 자격증 취득이 가능합니다.
수강후기
커리큘럼
- 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.영화 홍보 예매 사이트
웹 UI/UX 콘텐츠 디자인
웹 UI/UX 콘텐츠 디자인 취업완성패스
웹 UI/UX 콘텐츠 디자인 커리어패스
10초 안내받기
원하시는 과정을 선택하시면 1:1 상담을 진행해드립니다.