안양 이젠아카데미컴퓨터학원 - AI 활용 프론트엔드개발 (AWS/Figma/React/ChatGPT)

AI 활용 프론트엔드개발 (AWS/Figma/React/ChatGPT)

1차 개강일
25년 08월 26일(화)
2차 개강일
25년 09월 09일(화)

고용24 국민내일배움카드 훈련과정명은
AI 활용 프론트엔드개발 (AWS/Figma/React/ChatGPT)입니다.

교육기간
정규 6개월 취준생/초보자/비전공자
수강료

국비지원 교육비 0원

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

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

챗 GPT(ChatGPT)를 활용하여
웹 애플리케이션의 화면을 구현해보는
AI 활용 프론트엔드 개발
(AWS/Figma/React/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(PWA/SPA구현) · SPA 영화 홍보 예매 사이트 프로젝트(스타벅스/트위터) · SPA 영화 홍보 예매 사이트 프로젝트(메가박스/CGV)
  4. 미니프로젝트1, 미니프로젝트2, 미니프로젝트3, 스타벅스/트위터 유형의 PWA 웹/앱 프로젝트, 영화 홍보 예매 사이트 프로젝트
  5. point 03. 프론트엔드 개발자로 성장할 수 있는 맞춤 시스템으로 관리합니다.
  6. 내가 짠 코드에 묻고 답변듣고! 실시간 피드백이 가능한 코드 리뷰 제공
  7. 자유롭게 공부하거나 같은 팀끼리 토론 할 수 있는 온·오프라인 스터디그룹
  8. 모든게 처음이라 두려운 분들을 위해 전문 코칭 멘토링 (교수진, 현장전문가, IT전문가, 취업전문가 풀 구성)
  9. 수강 중에 부족한 지식을 쌓고, 예습·복습이 가능한 온라인강의 제공

웹/앱 개발도 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 모델로,
    코드 생성, 문서화, 디자인 구현 등 다양한 작업을 지원합니다.
  • 이 과정의 훈련 목표
    1. 개발환경 구축, UX/UI설계 및 기획(Figma),
      프론트엔드 구현을 위한
      HTML/CSS, javascript,
      Typescript, React.js&ReactNative, Node.js,
      AWS클라우드와 생성형 AI활용을 배우고
      스타벅스/트위터 유형의 PWA 웹/앱 프로젝트,
      영화 홍보 예매 사이트 프로젝트를 구현하여
      웹 프론트엔드 기획자,
      프론트엔드 개발자의 취업을 목적으로 교육을 진행합니다.

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

  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. 클라우드 활용 (PWA/AWS 클라우드)
    4. 생성형 AI 활용 (ChatGPT)
  2. 프로젝트
    1. PWA(Progressive Web APP) 프로젝트 1 - 실전
    2. 1. 스타벅스 유형의 커피 전문점 PWA 웹 앱 제작
    3. 2. 트위터 유형의 SNS 플랫폼 PWA 웹 앱 제작
  1. SPA(Single Page Application) 프로젝트 2 - 실전
  2. 1. 영화 홍보 예매 사이트 제작(메가박스)
  3. 2 .영화 홍보 예매 사이트 제작(CGV)

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

  • Web Design/Publisher모바일 UIUX 반응형
    웹디자인(웹퍼블리셔)
    발표회 및 수료식

    모바일 UIUX 반응형 웹디자인
    수료를 축하드립니다.

    수강생 만족도
    4.7/5
    자세히 보기
  • [디지털디자인]모바일 UIUX 반응형
    웹디자인(웹퍼블리셔)
    발표회 및 수료식

    모바일 UIUX 반응형 웹디자인(웹퍼블리셔)
    수료를 축하드립니다.

    수강생 만족도
    4.7/5
    자세히 보기
  • 인터랙티브 웹디자인 &
    퍼블리싱
    발표회 및 수료식

    인터랙티브 웹디자인 & 퍼블리싱
    수료를 축하드립니다.

    수강생 만족도
    4.8/5
    자세히 보기
  • Interactive Web[NCS] 인터렉티브
    웹 디자인
    발표회 및 수료식

    [NCS] 인터렉티브 웹디자인
    수료를 축하드립니다.

    수강생 만족도
    4.6/5
    자세히 보기
  • Web UI/UX Design 웹UI/UX 디자인
    발표회 및 수료식

    [NCS]스마트기기 웹 UI/UX 디자인 과정
    수료를 축하드립니다.

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

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

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

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

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

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

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

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

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

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

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

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

    자세히 보기

선배에게 들어요!

웹 디자이너란?
웹 브라우저가 해석하고 그래픽 사용자
인터페이스 (GUI)로 보여 주기에 알맞은
마크업 언어 형식으로 인터넷을 통해
전자 매체콘텐츠 전달의 개념을 정하고 계획하고
모델로 만들어 실행하는 과정이다.
웹 디자인의 목적은 웹 사이트를 만드는 것이다.
UX/UI란?
사용자 경험 디자인(User Experience Design, UX)
사용자가 제품,서비스 혹은 시스템을 사용하거나
체험하는 데 있어 상호교감적인 모델을 창조하고
개발하는 디자인의 한 분야이다.
사용자 인터페이스 또는 유저 인터페이스(User Interface, UI)는 사람(사용자)과 사물
또는 시스템, 기계, 컴퓨터 프로그램 등 사이에서
의사소통을 할 수 있도록 일시적 또는 영구적인 가상적 매개체를 뜻한다.
프론트엔드 개발자란?
웹사이트나 앱 등의 사용자 인터페이스(UI)를
개발하는 분야로 사용자가 직접 보고
상호작용하는 웹사이트의 시각적 요소를
담당하는 개발자를 프론트엔드(Frontend)
개발자라고 하며, 이들은 HTML, CSS,
JavaScript와 같은 언어를 사용하여
사용자 인터페이스(UI)와 사용자 경험(UX)을 극대화하는 데 중점을 둡니다.
퍼블리셔와 프론트엔드의
차이는 무엇인가요?
보통 퍼블리셔는 HTML,css로 정적 페이지를
주로 다루는 경우가 많으며, 시안을 코드로
변환하고 반응형, 웹 접근성, 크로스 브라우징을
고려한 작업을 수행합니다.
프론트엔드는 HTML, CSS, JavaScript(ES6+) 등
웹 기술을 사용하며, React, Vue.js, Angular와
같은 프레임워크 등을 활용하여 데이터 처리와
클라이언트-서버 간의 통신을 다루는 등 상호작용을 구현합니다.
웹 에이전시와
인하우스
어떤곳이 좋나요?
웹 에이전시의 장점으로는 다양한 경험을 할수 있고, 사회초년생이나 1-2년차 일때 다양한 주제로 작업을 하면서 본인이 잘 맞는 분야를 찾을수 있고, 포트폴리오가 굉장히 다양해진다. 단점으로는, 야근이나 주말 출근등으로 업무강도가 높은 편이고, 급여가 적은편인것 같다 인하우스의 경우 장기프로젝트등을 경험 할수 있고, 에이전시에 비해서 급여가 좋은편이고, 워라밸을 누릴수 있다. 하지만, 에이전시에 비해 회의가 많고, 개인적인 공부가 필요하다. 파트별로 전문성을 높여야하기 때문에 공부를 많이해야한다.
디자이너는
대학교 졸업?
전공 필수인가요?
컴퓨터학원 웹 디자인반 6개월반 정도를 이수하면, 신입 디자이너 정도 역량은 갖추어 진다고 본다. 현업에서 대부분 포토샵과 일러스트로 작업을 하기때문이다. 미대 전공 또는 학력과는 전혀 상관이 없다. 그렇다고 학원만 다녀서 취업이 된다는 소리는 아니고, 취업에서 가장 중요한 포트폴리오를 열심히 만들어야 한다.
예술감각이 없어도
웹디자이너
가능한가요?
예술 감각이 꼭 필수 조건은 아니라고 본다. 충분한 연습을 통해 감각을 익힐수 있다고 생각한다. 신입일때 감각이 없어도, 포토샵이라는 프로그램을 통해 벤치마킹을 하여, 변형해서 조금씩 작업 스킬을 업 시켰었다.
포트폴리오 어떻게 준비해야 하나요?
신입의 경우에는 가고 싶은 회사를 정하고, 가고 싶어 하는 회사의 분야에 따라 포트폴리오를 제작하는게 경쟁력이 있다. 예를들어 광고회사의 웹디자이너를 지원하게 된다면, 그 회사에서 광고하였던 프로모션 페이지를 리디자인 한다거나, 홈페이지의 개선사항들을 적용해서 포트폴리오를 완성한다면, 면접관에게 임팩트를 줄수 있어 취업의 문에 더 가까워 지지 않을까 싶다.

수강후기

  • 강남캠퍼스 임자영선생님 UIUX디자인 부트캠프
    - 김○은

    처음 배우는 수강생이 많은 만큼 임자영선선생님께서 기초부터 정말 차근차근 알려주시고 수강생별 편차도 고려하셔서 한 분 한 분 진도 맞춰서 다 봐주시고 질문에도 상세히 설명해주시고 정말 친절하셨습니다! 열의가 정말 대단하시고 제대로 배우려는 마음만 있다면 정말 하나라도 더 알려주시기 위해 노력하십니다. 본 수업외에도 주말에도 원데이 특강으로 요즘 트랜드에 맞는 수업을 무료로 추가로 듣게 해주셔서 많은 도움이 되었습니다. 덕분에 포폴컬리티가 잘 나와서 그런지 면접관이 본인이 작업ㅎㅏㄴ거 맞냐?, 신입이 맞냐는 질문을 받게 되었습니다 ^^ 많은 도움을 받아서 좋은곳 3곳 면접합격했습니다. 어디로 결정할지 행복한 고민을 하는중입니다 ^^

  • 강남캠퍼스 임자영선생님 UIUX디자인 부트캠프
    - 최○영

    웹페이지를 만드는 일을 하고싶다고 마음을 먹었지만 무엇부터 시작해야할지 모르던 저에게 이젠아카데미 학원에서의 6개월이라는 수강시간은 가이드이자 앞으로 나아가야 할 이정표가 되어주었습니다. 처음 시작할 때에는 새로운 것을 배우는게 재미있게 다가왔고, 중간에는 힘든 마음에 그만두고 싶은 마음이 살짝 들기도 하였지만 수강 과정 마지막에 가서는 벌써 학원을 끝마친다는 것이 아쉽게 느껴졌습니다. 힘들지만 끝까지 자신의 브랜드를 만들어내고 무사히 종강까지 따라갈 수 있었던 것은 임자영강사님이 수강생인 저보다도 더 열심히 하는 모습이 보였고, 그런 모습이 저에게 의욕을 심어주었기 때문인것 같습니다. 디자인과 코딩을 쌩초보인 저도 쉽게 이해할 수 있게 몇번이고 설명해주시고 항상 친절하셨던임자영 선생님 정말 감사합니다! 제가 나아가야할 방향에 대해 여러 피드백을 해주셨던 최미선 취업센터장님 정말 감사했습니다!! 그리고 다른 상담사 선생님들도 감사했습니다..정말 다른학원을 다녔어도 여기 학원만큼 만족스러운 곳은 없었을 것 같다는 생각이 듭니다. 이젠아카데미 수강경험을 바탕으로 앞으로 열심히 해나가겠습니다

  • 강남캠퍼스 UIUX디자인 부트캠프
    - 정○O

    제 스펙에 맞춰서 진로상담과, 직무설명을 잘해주셔서 학원선택했습니다. 하나부터 열까지 꼼꼼하게 신경써주시는 임자영강사님과 뒤에서 행정 및 취업관련 등 도움을 주시는 분들 덕분에 중도포기없이 끝까지 해서 취업 할 수 있었습니다. 정말 감사합니다. 자리 잡으면 인사드리러 가겠습니다 ^^

  • 임자영강사님UIUX디자인 부트캠프와 강남캠퍼스 추천합니다.
    - 박○윤

    직종변경을 할려고 퇴사했는데 생각보다 긴 공백기때문에 걱정이 많았지만 학원에 계신 선생님들 덕분에 성실히 수강할 수 있었습니다. 아예 기본기없던 저도 수업 따라갈 수 있게 지도와 보강,원데이 특강들을 해주셔서 포폴(프로젝트)를 잘 만들 수 있었습니다. 무엇보다 멘탈관리를 잘 해주셔서 힘이 많이 되었습니다. 시간이 흘러도 여길 선택한 건 제가 제일 잘한 일 중에 하나인거 같습니다. 지난 6개월을 의미있는 경험으로 만들어주신 임자영 선생님께 정말 감사드립니다^^

  • 강남캠퍼스 임자영 강사님 UIUX디자인 부트캠프
    - 김○솔

    임자영 강사님이 하나라도 더 알려주려고 하시고, 프로그램의 기본적인 사용방법을 넘어 실무에서 활용할 수 있는 수준까지 심도 깊게 알려주시려 애쓰시는 부분이 느껴졌습니다. 취업선생님과 매니저분들도 항상 친절하셨고 먼저 이야기하기도 전에 수강생 입장에서 필요할만한 부분들을 짚어주시고 학사 과정은 물론 추후 진로에 대한 부분까지 꼼꼼히 챙겨주셔서 취업 잘했습니다. 감사합니다

  • 강남캠퍼스 임자영 선생님 UXUI디자인&웹기획 프론트엔드 부트캠프
    - 박○현

    학원 등록하기 위해서 여러학원들 상담 받았는데 강남 이젠아카데미에서만 전문지식을 가지고 UIUX 상담해주셨습니다. 실제로 수업시에도 임자영쌤과 실무 교육 및 개별 면담을 하면서 스킬업을 많이 할 수 있었습니다. 모르는 부분이나 어려워하는 부분이 있으시면 쉬는시간임에도 도와주셨으며, 피드백 또한 잘해주셔서 아예 디자인도, 코딩도 모르던 제가 프로젝트를 두개를 만들고도 추가작업 여러개할정도로 속도도 많이 빨라졌습니다. 학원 담당자분들은 어떻게든 저희에게 도움되는 걸 하나라도 더 해주고 싶어하시는게 느껴졌습니다. 자습실,사물함,휴게실,수업 못 쫓아가면 보강, 새로운 기술이 필요하면 특강을 잡아주셨습니다. 이런 피드백이 없었으면 포트폴리오는 아마 만들지 못했을거 같습니다. 또한, 취업담당 선생님도 취업에 관해 자세히 알려주셨으며 얘기를 잘 들어주시며 격려해주셔서 많이 감사했습니다. 6개월동안 너무 감사했고 또 감사했습니다. 덕분에 새로운 것을 배운다는 두려움도 잘 이겨내서 한걸음, 한걸음 내딛어서 많이 성장했어요. 정말 감사했습니다.

  • 강남캠퍼스 임자영 선생님 UIUX수업 추천합니다.
    - 김○훈

    처음 시작할땐 정말 길 것 같은 6개월이었지만 막상 새로운 것들을 배우고 프로젝트를 하다 보니 금방 지나가는 시간이었습니다. 특히 웹 코딩에 대해서 아무런 배경지식도 없이 시작했지만 기초부터 차근차근 가르쳐주시는 임자영 선생님 덕분에 기반을 단단하게 잘 다질 수 있었습니다. 특히 학생들의 진행상황과 수준을 고려해서 개별지도도 잘 해주신 임자영 선생님과 매니저분들 덕분에 많은 용기를 얻었었습니다.

  • 강남캠퍼스 임자영 선생님 UXUI디자인&웹기획 프론트엔드 부트캠프
    - 서○영

    기본부터 차근차근 배우면서, 실습을 통해 직접 UXUI디자인을 구현할 수 있는 능력을 키울 수 있었습니다. 특히 임자영선생님 정말 훌륭하셨습니다. 학생 개개인에게 맞는 피드백을 주셔서 빠르게 실력을 향상 시킬 수 있었습니다. 그리고 언제나 친절하고 적극적으로 학생을 도와주셔서 정말 감사했어요. 덕분에 자신감을 얻었고. 매 수업이 기대되어 정말 재밌고 유익한 수업이였습니다. 덕분에 많이 배우고 갑니다. 감사합니다!

  • 강남캠퍼스 임자영강사님 UIUX디자인 프론트엔드 부트캠프
    - 김○수

    비전공자로 수업에 참여하게되어 걱정이 많았지만 A to Z 기초부터 심화까지 차근차근 알려주셔 큰 어려움 없이 수료할 수 있었습니다. 특히 임자영 강사님께서 실무 위주로 알려주셔 6개월 동안 다양한 기술을 습득하였습니다. 임자영 강사님의 열정과 애정으로 실무자와 비교해도 뒤쳐지지 않을 만큼 성장하였습니다. 학원을 다니는 6개월동안 공부하느라 힘든것도 있었지만 취업이라는 목표를 보고 다같이 공부하니 행복하고 즐거운 시간이었습니다. 학생들 개개인의 특성에 맞춰 취업컨설팅도 해주셔서 감사드립니다. 전문지식을 가지고 UIUX상담을 도와주시고, 수업 끝나고도 남아서 공부할 수 있는 공간을 만들어 주셔서 정말 좋았습니다. 추후 누군가가 UIUX디자인, 프론트엔드 과정을 배운다고 한다면 임자영 강사님과 강남이젠아카데미 학원을 추천하겠습니다

  • 강남캠퍼스 임자영선생님 UXUI디자인 과정
    - 이○애

    임자영 선생님께서 모르는 부분이 있으면 친절하게 알려주시고 다 같이 열심히 공부는 분위기로 수업이 진행되어서 좋았습니다 덕분에 피그마를 처음 배우는 것임에도 완벽하게 활용할 수 있게 되었고, 취업컨설팅도 해주셔서 좋은회사에서 근무 잘 하고 있습니다. 감사합니다 !

커리큘럼


  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) ★실전★

    • 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
    (프론트엔드개발) ★실전★

    • 웹/모바일 퍼블리싱
    • 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
    (PWA/SPA구현) ★실전★

    • 웹/모바일 프론트엔드 개발
    • 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

    PWA(Progressive Web APP)
    프로젝트 1 ★실전★

    • 1_1.스타벅스 유형의 커피 전문점
      PWA 웹 앱 제작
      1. 프로젝트 기획 및 제작(chatGPT 활용),
      2. 웹/모바일 퍼블리싱(chatGPT 활용),
      3. Page 동적 가능 구현(Javascript / chatGPT 활용),
      4. Express 프레임워크 활용
        Server 구현,
      5. Router / URL Parameters 활용 Pagenation,
      6. MongoDB & Mongoose 활용
        DB 테이블 Setting

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

    SPA(Single Page Application)
    프로젝트 2 ★실전★

    • 2_1.영화 홍보 예매 사이트
      제작(메가박스)
      1. 프로젝트 기획 및 제작(chatGPT 활용),
      2. 웹/모바일 퍼블리싱(chatGPT 활용),
      3. Page 동적 가능 구현(Javascript / chatGPT 활용),
      4. MongoDB & Mongoose 활용
        Product DB관리,
      5. Routes API & UI구현,
      6. Login Page &
        회원 Authentication 기능 개발,

    • 2_2.영화 홍보 예매 사이트 제작(CGV)
      1. 프로젝트 기획 및 제작(chatGPT 활용),
      2. 웹/모바일 퍼블리싱(chatGPT 활용),
      3. Page 동적 가능 구현(Javascript / chatGPT 활용),
      4. Private Route & Token verify 활용,
      5. 장바구니 상품정보 관리 (Redirect),
      6. Token 활용 Google, Git Hub 등 외부
        로그인 기능 구현

웹 UI/UX 콘텐츠 디자인

 
 

AI 활용 프론트엔드개발 (AWS/Figma/React/ChatGPT)

카톡상담 08.26(화)
전화문의안양
031)468-1114

10초 안내받기

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

지점선택

학과 및 교육과정 선택

지점을 선택해 주세요.

신청자

빠른 안내 전화 문의 031)468-1114
개인정보수집 및 이용에 대한 동의

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

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


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


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


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

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