강남 이젠아카데미컴퓨터학원 - [서울시 뉴딜] 모던 웹 풀스택 개발자

[서울시 뉴딜] 모던 웹 풀스택 개발자

1차 개강일
25년 07월 01일(화)
2차 개강일
25년 07월 15일(화)

고용24 국민내일배움카드 훈련과정명은
[서울시 뉴딜] 모던 웹 풀스택 개발자입니다.

교육기간
정규, 포트폴리오 서울시 거주 만18세~39세 미취업자
수강료

교육비

실업자과정 최대100%지원

취업분야
웹디자인, 웹퍼블리셔,
UI/UX 디자인, 프론트엔드 개발자

서울시 뉴딜이란?

실무 경험과 기술·직무교육 등 스킬역량을 키워 취업성공!
#인턴급여 239만원 #교육수당 지급

  • 훈련비
    전액지원
  • 우수기업
    인턴근무
  • 인턴 후
    정규직
    전환지원

웹 콘텐츠의 기획 및 분석과
디자인과 프론트엔드 개발을 동시에!
프론트엔드(React,node.js) 개발자란?

스마트 웹콘텐츠 개발에 필요한 UI 디자인과 프론트엔드(React,node.js)
언어를 배우며 다양한 스마트기기 플랫폼에 적용 가능한 웹 기반의 콘텐츠서비스를
기획, 분석, 설계, 구현,테스트, 배포 및 유지보수 할 수 있습니다.
Start now

  • UI UX
    • 사용자 리서치
    • 정보구조
    • 와이어프레임&프로토타입
    • 비쥬얼디자인
    • Photoshop, Figma
  • FRONT-END
    • HTML/CSS
    • JavaScript
    • React
    • Node.JS
    • Node.JS or AWS 서버 구축

프론트엔드 및 Node.js로 서버단 관리까지!
UI UX 기획 및 디자인부터
프론트엔드(React) 및
백엔드(Node.js)개발까지!

모든 소프트웨어 업계에서 가장 핫한 단어 UX/UI
  • 모바일 UI 화면 설계 : 디자인 트렌드를 반영하여, 좋은 UI/UX 디자인을 설계
  • 프로토타이핑 : 디자인 툴을 사용한 프로토타이핑
  • 리액트(React) : facebook에서 제공해주는 프론트엔드 라이브러리라고 볼 수
    있으며 모바일 애플리케이션의 개발 시 토대로 사용될 수 있습니다.
  • Node.js : Chrome V8 JavaScript 엔진으로 빌드 된 JavaScript 런타임으로
    노드를 통해 다양한 자바스크립트 애플리케이션을 실행할 수 있으며,
    서버를 실행하는 데 제일 많이 사용됩니다.
  • 산업수요를 반영한 구직자 맞춤형 실무교육 커리큘럼으로 진행됩니다.
  • 모바일, PC용 웹 UI 최신 트렌드를 반영한 교육훈련을 진행합니다.
  • 취업에 필요한 포트폴리오 제작 및 프로젝트를 학습합니다.
  • 담당 훈련교사와 교육담당자, 취업상담사를 통해 월 1회 및 수시상담을 진행합니다.
  • 전시회·공모전·워크샵 등 풍부한 현장경험 기회로 실무역량을 강화합니다.
  • 웹 콘텐츠 기획
    • 기초데이터 수집
    • 아이디어 스케치
    • 스토리보드 제작
  • UI UX 디자인
    • 포토샵 기초 / 피그마
    • UI/UX 디자인 이론
    • UI 구현
  • 퍼블리싱
    • HTML5/CSS3
    • 자바/제이쿼리 기초활용
    • React / Node.JS
  • 애플리케이션
    • 테스트 수행
    • 배포
  • 포트롤리오
    • 모바일 디자인
    • 메인 디자인
    • 개인사이트 디자인

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

  • 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
    자세히 보기
UI/UX Frontend

당신은 디자인과 프로그래밍
모두 가능한 경쟁력 있는
UI/UX 전문가로 거듭납니다.

기초부터 요즘 핫한 최신 기술까지 배우고
디자인 능력을 겸비한 프론트엔드 개발자로 성장!

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

  • 컴퓨터그래픽기능사Craftsman Computer Graphic

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

    자세히 보기
  • 컬러리스트산업기사/기사Industrial Engineer Colorist

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

    자세히 보기
  • 시각디자인산업기사/기사Industrial Engineer/Engineer Visual Communication Design

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

    자세히 보기
  • GTQi 일러스트Graphic Technology Qualification Illustrator

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

    자세히 보기
  • GTQ 포토샵Graphic Technology Qualification Photoshop

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

    자세히 보기
  • 웹디자인개발기능사Craftsman Web Design Development

    전국 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프론트엔드 강사님 수업 백퍼 추천합니다.
    - 김○영

    황병숙강사님께서 정말로 친절히 알려주십니다. 처음 공부하는 사람도 잘 이해할수 있도록 알려드립니다. 강사님 수업 백퍼 추천합니다.

  • 강사님이 친절하게 잘 가르쳐 주셔서 좋았다
    - 신○섭

    강사님이 친절하게 잘 가르쳐 주셔서 좋았다

  • 감사합니다
    - 이○영

    정말감사했습니다. 최고였어요!

  • UXUI프론트엔드
    - 박○O

    황병숙쌤께 배운다면 기초를 탄탄히 가지고 시작할 수 있습니다

  • UIUX프론트엔드 강남캠퍼스
    - J○S

    이 훈련과정을 통해서 더 자세히 공부할 수 있었습니다. 강사님도 무척 잘 가르쳐주셔서 만족스러운 수업이었습니다.

  • 강남캠퍼스 UIUX프론트엔드 황병숙T 추천
    - 황○영

    아주 만족스러운 과정이였습니다 강사님도 너무 잘만나서 즐거운 마음으로 끝까지 수강 할 수 있었던 거 같습니다 하나라도 도 알려주시려는 강사님 덕분에 기초부터 탄탄하게 배울 수 있었습니다 감사드립니다!!!

  • UIUX프론트엔드 과정
    - 이○아

    확실히 온라인 부트캠프에 비해 오프라인 좋은 강사님을 만나 질문에 대한 피드백이 빠른게 좋았습니다 덕분에 종강전에 좋은곳으로 취업 잘했습니다. 황병숙쌤 감사합니다

  • 강남 UXUI 디자인 프론트엔드 황병숙선생님수업
    - 김○현

    황병숙강사님도 열정적으로 꼼꼼하게 알려주시고 수강생들에게 하나라도 더 알려주시고 싶은 모습이 좋았습니다, 고민하면서 신청했는데 후회없는 선택이었고, 부족한 실력으로 수강했지만 수료 후에는 자신감도 많이 붙었고 실제로도 구현할 수 있는 것도 많아져서 매우 만족스럽습니다 ㅎ

  • 황병숙선생님 수업 추천합니다.
    - 김○o

    강사님도 열정적인 태도로 임해주시고 실무적인 부분들을 세세히 잘 알려주셔서 너무 유용한 강의가 되었습니다 6개월동안 긴시간이었지만 절대 아깝지 않은 시간이었습니다 황병숙 강사님 너무 감사합니다 많이 배웠습니다 !

  • 기획부터 디자인과 코딩 모두 탄탄하게 가르쳐주시는 임자영 강사님
    - 김○람

    이 수업과 강사님 덕분에 취업했습니다. 최소 3년 이상 경력직을 모집하는 자리였는데도 코딩 실력도 있고 디자인이 정말 마음에 들어서 신입으로 채용 결정하셨다고 합니다. 처음 수업 시작할때는 디자인 조금이라도 배워가겠다는 마음이었는데, 열정적이고 실력있으신 임자영 강사님을 만나서 이렇게 기획과 디자인과 코딩 다 체계적으로 배울 수 있을거라고는 예상 못했습니다. 강사님 덕분에 디자인 뿐만 아니라 기획 과정도 이해하고 퍼블리싱도 가능하고 개발자와도 소통할 수 있는 디자이너가 될 수 있었습니다. 특히 저는 기획에 관심이 많았는데 수업에서 체계적으로 UI/UX 기획 과정을 배우고 프로젝트를 진행할 수 있는 경험이 도움이 많이 되었어요. 그리고 항상 꼼꼼하게 피드백해주신 덕분에 디자인 색감과 가독성을 깔끔하게 작성해서 합격할 수 있었습니다. 항상 배우고 싶던 디자인과 기획과 코딩을 강사님께 배울 수 있어서 정말 행운이었어요. 어느 면접을 가도 디자인이 깔끔하다고 하시고 코딩을 템플릿이나 가이드 없이 정말 스스로 직접 다 한건지 여러 번 질문하시더라구요. 정말 감사합니다. 제대로 많이 배웠습니다.

커리큘럼

  1. 1

    HTML5 & CSS3 웹앱서비스 기초

    • HTML Semantic Tag
    • CSS3 Selector, CSS3 layout(flex/grid)
    • Platform 및 Device별 웹 페이지 구현
      · 네이버 / 쿠팡 / 카카오 클론
    • Flex & Grid 활용 실전 웹페이지 구현
      (Web / Mobile / Tablet),
      Git / Github 연동
    • SCSS 학습 & 실전예제
      (Navigation / Header / Toggle)
    • SVG 활용 Animation 실전예제 실습
  2. 2

    Javascript 기초이해

    • Javascript 기초 문법
      (자료형, 연산자, 함수)
    • Javascript 기초예제 (가위.바위.보 게임) (D-day 계산기)
    • Javascript 내장 객체
      (Math / Date / Object 등)

    Javascript 라이브러리 jQuery

    • jQuery 활용
    • Javascript Plugin 실습
      (scrollTo / fullpage / parallax)
  3. 3

    Javascript DOM Event

    • Javascript DOM & BOM 구조
      (event 운영방법 학습)
    • Javascript 비동기함수 학습
      (setTimeInterval / setTimeout / setClearInterval)
    • Javascript 활용: Modal, Slide 제작 실습
  4. 4

    Javascript 포트폴리오 제작 & 배포

    • 1차 평가 :
      Javascript 활용 ToDoList 제작
    • 1차 평가 코드리뷰 추가 미션 제공
      & PortFolio O.T
    • Javascript 실전예제 : video resource활용 flex 반응형 웹페이지 제작
    • Firbase 활용 Deploy
  5. 5

    Javascript 연산자 기능

    • Javascript 심화과정 for in /
      for of 문
      class 생성자 함수 개발
    • Javascript 심화과정 prototype, instance 객체
    • Javascript 심화과정 Array,
      String Method 실습
    • Array Method 학습 :
      forEach, push, pop, shift 등
    • Javascript 심화과정 : spread operator
      · deep copy / shallow copy
    • Javascript 심화과정 : Map,
      Set 개념학습 · iterable, generator함수
  6. 6

    Javascript Data 통신

    • Javascript 심화과정 API &
      json data 학습(*try / catch / finally)
    • Javascript 심화과정
      XMLHttprequest( ) 활용 실습
    • Javascript 심화과정
      synchronous / Asynchronous
    • Javascript 심화과정
      Callback / Promise / Fetch( )
  7. 7

    Javascript API 활용

    • Javascript 실습프로젝트
      SNS 블로그 페이지 제작
    • Web API 개념학습
      Storage API 학습
    • Kakao Map API 활용
      Geolocation API 구현
    • Javascript Canvas API 이론
      getContext / moveTo
    • Javascript Canvas API 실습
      웹 페이지 구현
  8. 8

    Typescript 기본 타입 정의

    • Typescript 개념정리
      · 객체, 클래스 적용
    • Typescript Compile 설정
      추상클래스, 메서드 타입정의
    • Typescript Array, Tuple
      타입 정의 실습

    Typescript 함수 & 객체 정의

    • Typescript iterable,
      generator 타입 정의
    • Typescript 함수 타입정의
    • Typescript 고차함수 타입정의
    • Typescript 제네릭타입정의
    • Node.js & Typescript 모듈정의
  9. 9

    React.js 기초이론
    (jsx / state / props)

    • React 기초 문법 (*with Typescript)
    • React 카운트 앱 제작
      (*with Typescript)
    • React / JSX 문법 학습 Component 관리, React / input 요소 관리
      Hooks > useRef
    • React Hooks useEffect 학습
      useEffect 활용 컴포넌트 생애주기 사이클 실습

    React.js 기본예제 실습
    (hooks 함수 사용단계)

    • React TodoList 예제 실습 컴포넌트
      주도형 웹페이지(*Header / TodoEditor)
    • 1.useReducer 활용 : 상태관리학습
      2.useMemo 활용 : 리액트 앱 최적화하기
    • React 감정일기장, 실습 프로젝트 제작
    • React 실전예제 국가별 날씨 데이터 출력
      (with 위젯스피너활용)
    • React 실전예제(*H&M 쇼핑몰 만들기)

    React.js 응용예제 심화
    (state management 관리단계)

    • [이론] React CSR 프레임워크 학습
      GraphQL / useStaticQuery /
      pageQuery / Recoil / React query
  10. 10

    Node.js 기본기능학습

    • Node.js 설치 및 기본서버 구축,
      내부 API 활용
    • Node.js 모듈활용, Data Transfering

    http 모듈 및 익스프레스 웹 서버

    • Node.js 설치 및 기본서버 구축
      내부 API 활용
    • MySQL 소개 및 CRUD 학습
    • Node.js Middleware 학습
    • Express 활용 웹서버 구현실습

    DataBase 운영.관리 기본

    • Node.js Router 활용,
      error 처리 / 보안영역 학습
    • Cookie 및 Session 개념이해,
      Login / Logout 실습
    • 회원정보 저장 및 접근제어,
    • DataBase 기본이론 & Mongo DB 학습
  11. 11

    React.js Final 프로젝트

    • Node.js 활용 TodoList 실습
    • React + TypeScript + Node,
      Netflix Webpage Project
    • Final PortFolio Deploy &
      Code Feedback_First
    • Final PortFolio Deploy &
      Code Feedback_Second

웹 UI/UX 콘텐츠 디자인

 
 

[서울시 뉴딜] 모던 웹 풀스택 개발자

카톡상담 07.01(화)
전화문의강남
031-463-5800

10초 안내받기

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

지점선택

학과 및 교육과정 선택

지점을 선택해 주세요.

신청자

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

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

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


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


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


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

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