종로 이젠아카데미컴퓨터학원 - 생성형 AI를 활용한 프론트엔드 개발

생성형 AI를 활용한 프론트엔드 개발

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

국기과정 전액지원

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

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

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

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

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

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

웹사이트나 앱의 화면을 만드는 프론트엔드 개발자 과정으로,
Figma 프로그램을 활용해 화면 디자인을 작업 + React, node 프로그램을 활용해
화면을 구성하고 설계 + 챗 GPT 대화형 AI에게 기능이 필요한 코드를
만들어달라고 하면, 원하는 기능을 자동으로 만들어주어 개발 속도를 빠르게
구현해 볼 수 있습니다.
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)

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

  • 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
    자세히 보기
  • IT·ProgrammingOpenAPI활용 자바
    안드로이드 웹&앱 개발
    발표회 및 수료식

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

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

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

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

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

  • 데이터분석 준전문가(ADsP)Advanced Data Analytics Semi-Professional

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

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

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

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

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

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

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

    자세히 보기

선배에게 들어요!

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

수강후기

  • 인천캠퍼스 풀스택반 수강후기
    - 진○영

    너무 만족스러운 강의였습니다 ! 박상진 강사님께서 누구보다 열정적으로 지도해주시고, 입문자와 초보자들도 기초단계부터 차근차근 이해할 수 있게 체계적으로 이끌어가주셔서 6개월 동안 너무 값진 교육시간이였습니다 :) 취업지원팀에서도 이력서첨삭 , 취업알선에 있어서 적극적으로 도와주셔서 감사한마음입니다 고생 너무나도 많으셨습니다!!!

  • [인천캠퍼스] 풀스택 강의 수강 후기
    - 장○라

    약 120일 이라는 긴 시간이 짧게 느껴질 정도로 유익하고, 또 알찬 수업을 들을 수 있어서 만족스러웠습니다. 아카데미 내부 설비도 깔끔하고, 교통도 꽤 편리한 위치에 있어서 다니기도 편했습니다. 많은 경험을 갖고계신 강사님 덕에 처음 배우는 과목이었지만, 무리없이 잘 적응할 수 있었고 배우는 데에도 큰 어려움을 겪지 않을 수 있어서 매우 기쁩니다. 박상진 선생님 덕분에 수업을 포기하지 않을 수 있었습니다. 너무 감사합니다!

  • 인천캠퍼스 풀스택 수강후기
    - 박○영

    비전공자라 잘할 수 있을까 과연 내가 할 수 있을까 하는 걱정이 되게 많았어요. 총 6개월이라는 시간이 사실 그리 길지는 않은 시간이지만 그만큼 또 짧은 시간은 아니니까 처음엔 숨막히고 엄두가 잘 안났는데 박상진 강사님이 잘 케어해주시고 모르는거 꼼꼼히 알려주셔서 정말 다행이고 감사했습니다. 국비과정이라 사실 처음엔 기대를 크게 안했는데 생각보다 너무 많은 것을 얻었어요. 6개월동안 감사했습니다.

  • 인천캠퍼스 풀스택 K디지털 후기
    - 윤○서

    원래 IT쪽을 전공 했었는데 다른 일 하다가 다시 이쪽으로 취업하고 싶어서 수강했어요. 풀스택 개발이다 보니까 프론트엔드 백엔드 모두 할 줄 알아야해서 내가 잘 따라갈 수 있을까 하는 마음이 너무 컸는데, 박상진 선생님께서 하나하나 도와주시고 뒷받침해주셔서 잘 따라갈 수 있었습니다. 학원 시설도 깔끔하고 살짝 수강 후기와는 다르게 TMI같지만 12층에 위치해 있어서 뷰가 되게 좋아요. 튼 감사했습니다.

  • 여러모로 좋은점이 많았습니다.
    - 이○건

    컴퓨터가 빨라서 좋았습니다. 선생님의 수업도 좋았습니다. 수업이 진행됨에 있어서 코드의 흐름을 설명해 주셔서 코드의 흐름을 제대로 이해하지 못했던 저는 코드의 흐름을 이해한 후에는 코드 작성이 더욱 쉽게 느껴졌습니다. 반분들과 프로젝트를 진행하며, 실무에서 이런식으로 일하겠구나 싶은 감? 도 생겨 좋았던 수업이였습니다. 감사합니다.

  • 비전공자도 충분히 할 수 있습니다.
    - 박○범

    처음 아무것도 모르는체로 학원에 들어와서 강사님께 교육을 받으면서 아 너무 어렵다 내가 할수 있을까 많이 걱정했습니다. 하지만 강사님이 포기하지 말라고 격려와 뛰어난 강의실력 좋은 예제로 아무것도 몰랐던 저를 코딩의 흐름, 파악등 여러가지 코딩기술을 알려주셔서 유익한 교육시간이 되었습니다. 학원에 계신 모두가 친절하셔서 교육과정 잘 수료하고 개발자로 취업준비를 하게되었습니다. 감사합니다.

  • 누구나 훌륭한 개발자로 거듭날수 있을겁니다~!
    - 김○환

    처음에는 걱정 가득했지만, 강사님의 훌륭한 커리큘럼과 교재로 과정동안 알차게 보냈습니다. 도전은 본인의 몫이고, 강사님의 교육을 열심히 잘 따라가다보면 누구나 훌륭한 개발자로 거듭날수 있을겁니다~!

커리큘럼


  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 등 외부
        로그인 기능 구현
 
 

생성형 AI를 활용한 프론트엔드 개발

카톡상담 05.21(화)
전화문의종로
02-532-7619

10초 안내받기

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

지점선택

학과 및 교육과정 선택

지점을 선택해 주세요.

신청자

빠른 안내 전화 문의 02-532-7619
개인정보수집 및 이용에 대한 동의

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

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


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


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


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

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