인천 IT 교육 특화기관 | 이젠아카데미DX교육센터 인천직영캠퍼스 - 생성형 AI(챗 GPT)를 활용한 프론트엔드 개발

생성형 AI(챗 GPT)를 활용한 프론트엔드 개발

1차 개강일
24년 07월 30일(화)
  • AI
  • 생성형AI
  • 인공지능
  • 챗GPT
  • ChatGPT
  • 프론트엔드
  • Frontend
  • 웹앱
  • 프론트엔드개발
  • React.js
  • Figma
  • Node.js
바 로 가 기 바 로 가 기
교육기간
정규 6개월 직장인/초보자/비전공자
수강료

국비지원 교육비 0원

K-디지털 트레이닝 전액지원

취업분야
프론트엔드개발자, 스타트업, 소프트웨어개발/서비스, IT/인공지능,
앱/웹서비스, 온라인플랫폼, 온라인쇼핑몰, 온라인커머스, 웹디자인,
웹퍼블리셔, UIUX디자이너

지금 신청하면 모든 온라인강의가 0원이라고?

간편 회원 가입만으로도 1400만원 상당의 온라인 강의가 0원

2개월 프리패스 제공
0원 강의
안내받기

챗 GPT(ChatGPT)를 활용하여
웹 애플리케이션의 화면을 구현해보는
생성형 AI 활용 프론트엔드 개발
(Figma,React,Node.js,ChatGPT)이란?

웹사이트나 앱의 화면을 만드는 프론트엔드 개발자(코딩) 부트캠프 교육과정으로,
Figma 활용해 화면 디자인을 작업 + React, node을 활용해 화면을 구성하고 설계 +
생성형 AI(ChatGPT)를 활용하여 원하는 프롬프트 명령어로 원하는 코드를 생성할
수 있습니다.
이를 통해 프론트엔드 개발 과정이 더 빠르고 효율적으로 진행됩니다.
Start now

AI 시대로 현재 핫한 키워드 ‘챗 GPT’
생성형 AI(ChatGPT) 활용은 선택이 아닌 필수!

  1. point 01. 생성형 AI(ChatGPT)를 활용해 원하는 프롬프트(단어나 문장)을 입력하면, 코드를 자동으로 생성해주기 때문에 프론트엔드 개발 과정이 더 빨라지고 효율적으로 진행될 수 있습니다.
  2. GhatGPT를 활용한 예시 - “JavaScript로 간단한 Todo List 앱을 만들어줘” 를 영어로 번역 후 ChatGPT에 입력. Tip: 간단한 질문으로는 한 번에 원하는 답변을 얻기 어려우니 프롬프팅 시 요구사항을 상세하게 입력해야 원하는 답변을 얻을 수 있습니다.
  3. point 02. 총 5가지 프로젝트를 완성합니다. (미니프로젝트 1(UIUX) · 미니프로젝트 2(프론트엔드 개발) · 미니프로젝트 3(SPA구현) · OTT 서비스 웹/모바일 프로젝트(유튜브/틱톡) · 이커머스 쇼핑몰 프로젝트(쿠팡/11st )
  4. 미니프로젝트 (UIUX), 미니프로젝트 (프론트엔드), 미니프로젝트 (SPA구현), OTT서비스 웹/모바일 구현 예시, 이커머스 쇼핑몰 구현 예시
  5. point 03. 프론트엔드 개발자로 성장할 수 있는 맞춤 시스템으로 관리합니다.
  6. 내가 짠 코드에 묻고 답변듣고! 실시간 피드백이 가능한 코드 리뷰 제공
  7. 자유롭게 공부하거나 같은 팀끼리 토론 할 수 있는 온·오프라인 스터디그룹
  8. 모든게 처음이라 두려운 분들을 위해 전문 코칭 멘토링 (교수진, 현장전문가, IT전문가, 취업전문가 풀 구성)
  9. 수강 중에 부족한 지식을 쌓고, 예습·복습이 가능한 온라인강의 제공

웹/앱 개발도 AI(GhatGPT)를 활용하는 시대
Figma, React, Node.js, ChatGPT 등의
도구와 기술을 활용하여
웹 애플리케이션의 UI/UX 작업을
효율적으로 수행할 수 있습니다.

협약기업에서 원하는 사람으로 맞춤 성장하고
협업 프로젝트를 진행하여 취업까지 가능!
  • Figma를 통한 디자인 구현: Figma는 UI/UX 디자인 도구로, 프론트엔드 개발자들이
    디자이너와 협업하여 사용자 인터페이스를 구현할 수 있습니다.
  • React를 통한 컴포넌트 기반 개발: React는 컴포넌트 기반 프레임워크로,
    재사용 가능한 UI 요소를 효율적으로 구축할 수 있습니다.
  • Node.js를 통한 백엔드 개발: Node.js는 JavaScript 런타임 환경으로,
    프론트엔드와 백엔드를 통합적으로 개발할 수 있습니다.
  • ChatGPT를 통한 생성형 AI 활용: ChatGPT는 대화형 AI 모델로,
    코드 생성, 문서화, 디자인 구현 등 다양한 작업을 지원합니다.
  • 이 과정의 훈련 목표
    1. 개발환경 구축, UX/UI설계 및 기획(Figma),
      프론트엔드 구현을 위한
      HTML/CSS, javascript,
      Typescript, React.js&ReactNative, Node.js,
      AWS클라우드와 생성형 AI활용을 배우고
      OTT Service 웹/모바일 프로젝트,
      E-commerce Shopping mall 프로젝트를 구현하여
      웹 프론트엔드 기획자,
      프론트엔드 개발자의 취업을 목적으로 교육을 진행합니다.

수료 후 “끝”이 아닌 새로운 “시작” 취업 지원 시스템!

  1. 합격 전략 A to Z 전문 커리어 코치에게 1:1컨설팅 진행

  2. 구인공고 공유 및 추천 수강생 니즈를 분석해 개인별 맞는 기업을 매칭

  3. 온/오프라인 취업 특강 취업 전략에 대한 특강을 진행하여 다가올 취업에 대응

  4. 취업 후에도 지속적인 관리 취업 후에도 커리어 설계 / 미취업자도 6개월까지 취업지원

  1. 정규교과
    1. 개발환경 및 팀프로젝트 환경 설정 (VS CODE/Git/GitHub)
    2. UX/UI 설계 (Figma)
    3. 미니프로젝트 1 (UX/UI) - 실전
    4. 프론트엔드 Level 1 (HTML/CSS)
    5. 프론트엔드 Level 2.1 (JavaScript)
    1. 프론트엔드 Level2.1 (JavaScript)
    2. 프론트엔드 Level2.2 (Typescript)
    3. 미니프로젝트 2 (프론트엔드 개발) - 실전
    4. 프론트엔드 Level3(React/ReactNative)
    1. 프론트엔드 Level4 (Node.js)
    2. 미니프로젝트 3 (SPA구현) - 실전
    3. 클라우드 활용 (AWS 클라우드)
    4. 생성형 AI 활용 (ChatGPT)
  2. 프로젝트
    1. OTT Service 웹/모바일 프로젝트 1 - 실전
    2. 1. Youtube Site 프로젝트 개발
    3. 2. Tiktok SNS Service 프로젝트 개발
  1. E-commerce Shopping mall 프로젝트 2 - 실전
  2. 1. E-commerce Shopping mall 프로젝트 개발 (쿠팡)
  3. 2. E-commerce Shopping mall 프로젝트 개발 (11st)

당신만의 특별한 프로젝트가 완성됩니다.

PREV
NEXT
  • IT·Programming웹서비스
    풀스택 개발자
    발표회 및 수료식

    웹서비스 풀스택 개발자(자바,파이썬,AI챗봇)
    수료를 축하드립니다.

    수강생 만족도
    4.5/5
    자세히 보기
  • IT·Programming자바(JAVA) 웹 개발
    (정보처리산업기사 취득)
    발표회 및 수료식

    자바 웹개발 프로그래밍 27기
    수료를 축하드립니다.

    수강생 만족도
    4.7/5
    자세히 보기
  • IT·Programming자바 안드로이드
    웹&앱 개발자
    발표회 및 수료식

    자바 안드로이드 웹&앱 개발자 22기
    수료를 축하드립니다.

    수강생 만족도
    4.5/5
    자세히 보기
  • IT·Programming자바(JAVA) 웹프로그래밍
    (정보처리산업기사 취득)
    발표회 및 수료식

    자바(JAVA) 웹프로그래밍 21기
    수료를 축하드립니다.

    수강생 만족도
    4.4/5
    자세히 보기
  • IT·ProgrammingAI인공지능활용
    소프트웨어개발
    발표회 및 수료식

    AI인공지능활용 소프트웨어 개발 23기
    수료를 축하드립니다.

    수강생 만족도
    4.6/5
    자세히 보기
AI ChatGPT

피그마, 리액트, 노드, 챗GPT를
활용하여 업무 시간은 줄이고
작업 결과물의
퀄리티가 높은
프론트엔드 개발자로
성장할 수 있습니다.

AI(ChatGPT) 시대, 생성형 AI 기술인 ChatGPT를 활용하여 코드 생성, 디자인 구현,
문서화 등의 작업을 효율적으로 수행할 수 있습니다. 이젠에서 시작하세요.

관련 자격증 취득이 가능합니다.

  • 정보처리산업기사/기사Industrial Engineer/Engineer Information Processing

    전국 23만 합격생이 이젠에서 자격증을 합격!
    관련분야 졸업/취업, 이직을 희망하신다면 자격증 취득 시에 더욱 유리합니다. 초라한 이력서보다 필수
    핵심 자격증이 신입/경력사원의 가치를 높입니다.

    자세히 보기
  • 국가공인 SQL 개발자Structured Query Language Developer

    전국 23만 합격생이 이젠에서 자격증을 합격!
    관련분야 졸업/취업, 이직을 희망하신다면 자격증 취득 시에 더욱 유리합니다. 초라한 이력서보다 필수
    핵심 자격증이 신입/경력사원의 가치를 높입니다.

    자세히 보기
  • 데이터분석 준전문가(ADsP)Advanced Data Analytics Semi-Professional

    전국 23만 합격생이 이젠에서 자격증을 합격!
    관련분야 졸업/취업, 이직을 희망하신다면 자격증 취득 시에 더욱 유리합니다. 초라한 이력서보다 필수
    핵심 자격증이 신입/경력사원의 가치를 높입니다.

    자세히 보기
  • 국가기술 빅데이터 분석기사National Science and Technology Big Data Analysis Article

    전국 23만 합격생이 이젠에서 자격증을 합격!
    관련분야 졸업/취업, 이직을 희망하신다면 자격증 취득 시에 더욱 유리합니다. 초라한 이력서보다 필수
    핵심 자격증이 신입/경력사원의 가치를 높입니다.

    자세히 보기
PREV
NEXT

선배에게 들어요!

초급자나 비전공자가
수업듣기에 난이도가
적절할까요?
비전공자 및 초급자도 가능합니다.
하지만 프로그래밍 난이도가 아무래도 있다보니
사전에 선행할수 있는 컨텐츠를 제공드리니,
부담없이 교육을 받을수 있도록 도와드립니다.
사물인터넷 관리자가
하는 업무가 궁금합니다.
다양한 IOT 기기를 개발하고,
모니터링등 각종 관리업무를 병행합니다.
교육수료 후 추가준비없이
취업이 바로 가능할까요?
수업에서 조별로 실무 프로젝트를 진행하기에 현장에서도 바로 응용가능합니다. 또한 현장에서처럼 협업하는 방식으로 수업을 진행하기에, 바로 업무가 가능할 정도의 실력향상을 보장해 드립니다.
스마트공장 관리자가 하는
업무가 궁금합니다.
공장 내 각종 설비 및 IOT을 설치하여 공정 데이터를 실시간으로 수집하고, 인공지능을 활용 이를 분석해 스스로 제어할 수 는 있는, 스마트 공장 내에서의 전체적인 관리업무를 맡게 됩니다.

수강후기

  • 인천 스마트팩토리
    - 김○주

    어려운 과정이지만 배제민 강사님께서 잘 이끌어주셔서 배우는데 크게 무리 없었습니다!

  • 인천 스마트팩토리
    - 황○희

    카티아 과정을 찾던 중 요즘 뜨고 있다는 스마트 팩토리를 상담받게 되었고 이왕 배우는거 폭 깊게 배우는것이 좋을 것 같다는 생각이 들어서 수업을 듣게 되었습니다. 배제민 강사님께서 친절하게 차근차근 알려주셔서 큰 어려움없이 들을 수 있었습니다.

  • 인천캠퍼스 aws
    - 이○홍

    처음 배우는 과정이라 생소하고 어려웠지만 박상진 강사님이 친절하게 잘 이끌어주셔서 수업 잘 들을 수 있었습니다.

  • 인천점 aws 리뷰
    - 조○진

    웹 디자이너로 근무하다가 웹 개발자로 이직하고 싶어서 상담을 받고 박상진 선생님 수업을 듣게 되었습니다. 심화 된 과정이라 초반에는 어려움이 있었지만 선생님이 잘 이끌어주셔서 끝까지 수업 유익하고 재미있게 마칠 수 있었습니다!

  • 인천 스마트팩토리
    - 강○라

    스마트 기술을 전목시킨 과정이라서 새롭고 재밌었습니다. 배제민 선생님이 친절하고 쉽게 알려주셔서 더욱 더 좋았습니다!

  • 인천캠퍼스 스마트팩토리
    - 이○영

    전공으로 카티아를 배웠는데 요즘에 스마트팩토리가 뜨고 있다고 들어서 과정을 찾던 중 이젠에서 과정이 개설한다기에 상담을 받고 수업을 들었습니다. 배제민 선생님이 어려운 부분도 쉽게 풀어서 설명해주시고 자료들도 제공을 해주셔서 배우는 동안 재미있게 수업 마칠 수 있었습니다.

  • 인천 aws 리뷰
    - 신○기

    개발자 과정이라 배울것도 많고 어려운 부분도 있었지만 박상진 선생님이 적응 할수 있도록 잘 이끌어주셨습니다!

  • 인천캠퍼스 aws 과정
    - 김○진

    aws 클라우드를 활용하는 풀스택 과정이 있다고 해서 듣게 되었는데 처음에는 비전공자라 생소하고 어려운 면도 있었지만 박상진 강사님께서 자료도 많이 주시고 꼼꼼히 봐주셔서 덕분에 즐겁게 수업 듣고 마칠 수 있었습니다 :)

  • 인천캠퍼스 스마트팩토리
    - 김○리

    스마트 팩토리가 생소한 분야 였지만 취업 준비를 위해 들었습니다 배제민 강사님 덕분에 어렵지 않게 잘 들을 수 있었습니다 감사합니다!

  • 인천점 스마트팩토리
    - 이○영

    인천에서 스마트팩토리를 찾던 중 이젠에 과정이 있다는 소식을 듣고 상담 받고 수강하게 되었습니다. 배제민 강사님이 기초적인 부분부터 차근차근 알려주셔서 큰 어려움 없이 수료 할 수 있었습니다! 이직 준비하는 기간동안 도움을 많이 주셔서 감사합니다

수강후기 더보기

커리큘럼


  1. 1

    개발환경 및 팀프로젝트 환경 설정
    (VS CODE/Git/GitHub)

    • 프론트엔드 개념 및 개발 환경의 이해
    • SSR(Server Side Rendering),
      CSR(Client Side Rendering)의
      차이점 이해
    • VS CODE 설치 및 사용
    • Git/GitHub의 개요
    • Git 설치, Branch 관리, Request 협업
    • GitHub의 저장소 생성과 관리
    • GitHub의 이슈, 레퍼지토리, 위키
  2. 2

    UX/UI 설계 (Figma)

    • UX/UI 기본 개념
    • 사용자 분석 및 UX 설계
    • 인사이트 도출 및 워크플로우 제작
    • 와이어프레임 제작
    • UI 시스템 구축 및 설계
    • 프로토타입 제작
    • 사용성 테스트
  3. 3

    미니프로젝트 1 (UX/UI) ★실전★

    • OTT Service UX/UI 설계
      (Team Project)
    • User research
    • Persona / Journey map
    • Workflow / Wireframe
    • UX/UI Guide
    • Prototype
  4. 4

    프론트엔드 Level 1 (HTML/CSS)

    • 웹 & 모바일 브라우저 이해
    • HTML 구조 이해 및 기본 문법
    • HTML 기본 태그 및 레이아웃 구조
    • 시멘틱 태그와 메타데이터
    • CSS 기본 속성
    • 박스모델과 플렉스박스
    • 반응형 웹디자인을 위한 미디어쿼리
    • CSS를 활용한 웹&모바일 레이아웃 구현
  5. 5

    프론트엔드 Level 2.1(JavaScript)

    • javascript 기본 개념 / 동작 원리
    • 변수, 데이터 타입, 연산자, 제어문,
      타입 변환, 객체, 함수, 스코프,
      전역 변수 개념
    • 문서 객체 모델, 동기식 처리 모델,
      비동기식 처리 모델
    • 이벤트 처리와 DOM API
    • 외부 데이터 호출 라이브러리
    • 객체지향 프로그래밍
    • 정규표현식,
      ES6 함수의 추가 기능, 배열
  6. 6

    프론트엔드 Level 2.2 (Typescript)

    • Typescript 개요 및 문법
    • Typescript의 정의와 장점
    • Typescript의 기본 개념과 작성 방법
    • Typescript의 자료형과 제네릭
    • Typescript의 함수, 인터페이스,
      클래스, 모듈
    • Typescript의 에러 처리와 제어 흐름
  7. 7

    미니프로젝트 2
    (프론트엔드개발) ★실전★

    • OTT Service 웹/모바일 퍼블리싱
    • HTML / CSS 활용 웹/모바일 퍼블리싱
    • 문서내 동적 기능 구현을 위한
      Javascript 작성
    • Javascript & Dom을 활용한 UI 구현
    • Javascript를 활용한 애니메이션 UI 구현
  8. 8

    프론트엔드 Level 3 (React/ReactNative)

    • React/ReactNative의 이해
    • React의 컴포넌트, 상태, 속성, 이벤트
    • React의 JSX, 연산자, 조건부 렌더링
    • React의 컴포넌트 생명주기,
      일반 컴포넌트와 상태가 있는 컴포넌트
    • React router 작동 원리
    • ReactNative의 컴포넌트,
      상태, 속성, 이벤트
    • ReactNative의 컴포넌트 스타일, 레이아웃, 스크롤
    • ReactNative의 네비게이션, 탭,
      슬라이드
    • ReactNative의 애니메이션,
      인터폴레이션, 제스처
    • ReactNative의 안드로이드, iOS 특징
    • ReactNative의 데이터 저장,
      네트워크, 앱 접근
  9. 9

    프론트엔드 Level 4 (Node.js)

    • SPA(Single Page Application)
    • Node.js
    • Express 프레임워크를 활용한
      웹 서비스 구현: CRUD, Rest API,
      Database
    • Mongoose + MongoDB
    • 웹서비스 배포: AWS, Netlify
  10. 10

    미니프로젝트 3
    (SPA구현) ★실전★

    • OTT Service 웹/모바일 프론트엔드 개발
    • Webpack을 활용한 SPA 구현
    • MVVM 패턴을 활용한 SPA 사이트 구현
  11. 11

    클라우드 활용 (AWS 클라우드)

    • AWS 인프라구조 이해
    • AWS S3 이용한 아키텍처 설계
    • AWS IAM, Organization 서비스 설계
    • AWS Route53, ELB,
      EC2 AutoScaling 관리
  12. 12

    생성형 AI 활용 (chatGPT)

    • 생성형 AI(chatGPT)의 이해
    • chatGPT 프롬프트 작성
    • chatGPT 확장 프로그램
    • chatGPT 활용1(아이디어 도출 방법
      및 목표 설정)
    • chatGPT 활용2(프로젝트 기획서 제작)
    • chatGPT 활용3(코딩 활용)
  13. 13

    OTT Service 웹/모바일
    프로젝트 1 ★실전★

    • 1_1.Youtube Site 프로젝트 개발
      1. 프로젝트 기획 및 제작(chatGPT 활용),
      2. 웹/모바일 퍼블리싱(chatGPT 활용),
      3. Page 동적 가능 구현(Javascript / chatGPT 활용),
      4. Express 프레임워크 활용 Server 구현,
      5. Router / URL Parameters 활용 Pagenation,
      6. MongoDB & Mongoose 활용
        DB 테이블 Setting

    • 1_2.Tiktok SNS Service 프로젝트 개발
      1. 프로젝트 기획 및 제작(chatGPT 활용),
      2. 웹/모바일 퍼블리싱(chatGPT 활용),
      3. Page 동적 가능 구현(Javascript / chatGPT 활용),
      4. Express 프레임워크 활용 Server 구현,
      5. Template Library, Pug 활용 MVP 구현,
      6. Shema 활용 Video Search 기능 구현
  14. 14

    E-commerce Shopping mall
    프로젝트 2 ★실전★

    • 2_1.E-commerce Shopping mall 프로젝트 개발 (쿠팡)
      1. 프로젝트 기획 및 제작(chatGPT 활용),
      2. 웹/모바일 퍼블리싱(chatGPT 활용),
      3. Page 동적 가능 구현(Javascript / chatGPT 활용),
      4. MongoDB & Mongoose 활용
        Product DB관리,
      5. Routes API & UI구현,
      6. Login Page & 회원
        Authentication 기능 개발,

    • 2_2.E-commerce Shopping mall 프로젝트 개발 (11st)
      1. 프로젝트 기획 및 제작(chatGPT 활용),
      2. 웹/모바일 퍼블리싱(chatGPT 활용),
      3. Page 동적 가능 구현(Javascript / chatGPT 활용),
      4. Private Route & Token verify 활용,
      5. 장바구니 상품정보 관리 (Redirect),
      6. Token 활용 Google, Git Hub 등 외부
        로그인 기능 구현

K-디지털(개발자 ICT융합)

K-디지털(개발자 ICT융합) 취업완성패스

 
 

생성형 AI(챗 GPT)를 활용한 프론트엔드 개발

카톡상담 07.30(화)
전화문의인천 직영
032)719-4074

10초 안내받기

원하시는 과정을 선택하시면 1:1 상담을 진행해드립니다.

지점선택

학과 및 교육과정 선택

지점을 선택해 주세요.

신청자

빠른 안내 전화 문의 032)719-4074
개인정보수집 및 이용에 대한 동의

(주)이젠아카데미가 운영하는 이젠아카데미컴퓨터학원 및 계열 브랜드 웹&모바일 사이트에 대하여 상담 및 이용자가 원하는 서비스를 충족시키기 위해 아래와 같은 개인정보를 수집하고 있습니다.

1. 수집하는 개인정보 항목 및 수집방법
(1) 수집항목
필수: 캠퍼스, 상담과목, 이름, 전화번호
선택입력: 아이디, 생년월일, 성별, 제목, 내용, 사진 등
(2) 개인정보 수집 방법 : 웹&모바일 홈페이지(온라인상담신청, 수강료조회, 내일배움카드제(계좌제)조회, 고용보험환급, 재직자국비과정조회, 시간표조회, 지점별 위치조회, 위탁교육문의 등), 서면양식 외


2. 수집한 개인정보의 이용
(1) 이용자가 제공한 모든 정보는 교육 서비스 제공, 이벤트 안내 등 필요한 용도로만 사용되며, 목적이 변경될 시에는 사전에 동의를 구합니다.


3. 개인정보의 보유 · 이용기간 및 폐기
모든 검토가 완료된 후 5년간 이용자의 조회를 위하여 보관하며, 이 후 해당정보를 지체없이 파기합니다.


4. 동의를 거부할 권리가 있다는 사실과 동의 거부에 따른 불이익 내용
이용자는 (주)이젠아카데미가 운영하는 컴퓨터학원 및 계열 브랜드 웹&모바일 사이트에서 수집하는 개인정보에 대해 동의를 거부할 권리가 있으며 동의 거부 시에는 회원가입 및 인터넷 수강료 조회, 온라인 상담 등의 홈페이지 서비스가 일부 제한됩니다.

그 밖의 사항은 <개인정보 처리방침>을 준수합니다.