|
 교육내용
|
* 본과정은 수강생모집에 따라 개강일정 및 교유장소가 변경 될 수 있습니다.
훈련대상 요건 선수학습
선수학습 : 해당 훈련과정은 선수학습이 꼭 필요한 훈련과정은 아니나, 아래에 해당하는 요건을 충족하는 자는 우대 선발함.
① 관련 학과 전공자 : 초대졸 이상의 컴퓨터 및 공학 계열 전공자(컴퓨터학, 소프트웨어학, 전산학, 정보통신학, 전자학, 인터넷학, 모바일 콘텐츠학 등)
② 해당 훈련과정에 대한 기초 수준의 사전 학습이 되어 있거나 유사한 훈련과정을 이수한 이력이 있는 자.
③ 훈련생 모집 및 선발을 위한 면접(인터뷰)을 통해 선발된 자(훈련 참여에 대한 진정성, 수료 의지 및 취업에 대한 확고한 목표가 있는지에 대하여 자체 면접 평가표 및 사전 체크리스트 등으로 확인)
※ 선발된 훈련생 중에 비전공 초보자의 경우 문제없이 수업 진도를 따라가기 위하여 사전 학습에 대한 필요성, 방법, 범위 등을 안내할 것임.
훈련대상 요건 직무경력
해당사항 없음(해당 훈련과정은 특별한 직무경력이 필요하지 않음)
훈련대상 요건 기취득자격
해당 훈련 과정은 기취득 자격이 필수 요건 사항은 아니나 아래와 같은 자격증 소지자는 우대 선발할 수 있음.
- 정보처리(산업)기사, 스마트폰앱개발자 등
- 관련 외국 자격증(OCJP, OCJD, OCP 등)
- 기타 본 훈련 과정 습득 및 이수에 관련성 있다고 판단되는 자격증
훈련대상 요건 훈련과정의 강점
○ 훈련과정의 강점
해당 훈련과정은 기업에서 요구하는 지식 및 기술 수준의 수요조사와 요구사항 등을 철저히 검토하여 훈련과정 편성에 반영하였으며, 국가기간전략산업직종훈련의 직종인 “디지털컨버전스” 과 NCS 주직종인 “응용SW엔지니어링”의 직종 정의에 최대한 부합될 수 있도록 NCS 전공 교과 비중을 높였고, 훈련과정의 전문성과 높은 수준의 훈련 결과를 도출하기 위하여 다년간의 현장 실무 경력과 강의 능력을 두루 갖춘 NCS 확인 교·강사 배점이 높고 훈련생 만족도 점수가 높은 검증된 교·강사를 배정 하였으며, 훈련생 대상자 요건(훈련생의 선발 기준)에서 제시하는 수준에 맞는 훈련생을 선발하여 원활한 훈련 진행이 되도록 설계하였으며, 취업 성과 및 경쟁력을 높이기 위해 체계화된 취업지원 시스템과 프로세스 갖추고 있으며 훈련의 질적 향상을 위해 훈련수준에 맞는 최적화된 훈련시설, 장비 및 기자재, SW 등을 제공하고 있음.
○ 타 직종 능력단위 편성 사유
해당 훈련 과정의 국기 직종인 “디지털컨버전스” 의 직종 정의 내용 중 디바이스 융합, 앱 융합 등에 부합하기 위하여 국기 직종 NCS 연계표에 제시하는 NCS 소분류 “정보기술개발”의 능력 단위로는 부족함이 있어 타 NCS 소분류 직종인 “문화콘텐츠 제작(코드 : 080302)” 의 세분류 직종인 “스마트문화앱콘텐츠제작”의 능력 단위인 스마트 문화앱 UX 설계, 스마트 문화앱 구현, 스마트 문화앱 테스트의 능력 단위를 편성함.
교육 과목 개요 및 특징
|
교과목 |
개요 및 특징 |
|
HTML5 |
HTML5는 웹 문서를 만들기 위한 기본 프로그래밍 언어 ‘HTML(Hyper Text Markup Language)’의 최신 규격이다. HTML5를 이용해 웹사이트를 만들면 국내 전자상거래에서 많이 쓰이는 액티브X, 동영상이나 음악재생에 필요한 어도비 플래시와 같은 프러그인 기반의 각종 프로그램을 별도로 설치할 필요가 없어지며 모바일 환경도 아이폰, 안드로이드 등의 운영체제를 가리지 않고 모두 호환된다. |
|
CSS3 |
웹 문서의 전반적인 스타일을 미리 저장해 둔 스타일시트 기술을 보여주는 CSS의 최신 규격이며, CSS3는 문서 전체의 일관성을 유지할 수 있고 세세한 스타일 지정의 필요를 줄어들게 하여 웹 개발자들이 보다 풍부한 디자인으로 웹을 설계할 수 있고, 글자의 크기, 글자체, 줄간격, 배경 색상, 배열위치 등을 자유롭게 선택하거나 변경할 수 있으며 유지·보수도 간편하게 할 수 있다. |
|
SASS |
SASS(Syntactically Awesome StyleSheets)는 종속형 시트(CSS)로 해석 및 컴파일 되는 스크립트 언어이다. SassScript는 그 자체로 스크립트 언어이다. CSS의 단점을 보완하기 위해 만든 CSS 전처리기이며 보통 CSS를 사용하다 보면 단순 반복되는 부분이 많은 등 불편함이 느껴지기 마련인데, SASS는 이 부분을 거의 완전히 해소시켜주는 프로그래밍 언어다. 다만 SASS 자체는 개발자용 언어이기 때문에 웹브라우저가 읽을 수 없다. 따라서 중간에 컴파일러를 거쳐서 CSS로 변환하여 HTML에 연결한다. |
|
Bootstrap |
부트스트랩은 동적인 웹 사이트 및 웹 응용 개발을 위한 프론트엔드 프레임워크로, 입력 창, 버튼, 네비게이션 및 기타 구성물, 각종 레이아웃 등을 HTML 및 CSS 기반의 디자인 템플릿으로 제공하며 추가적인 자바스크립트 확장들도 포함한다. 타이포그래피 및 각종 메뉴를 포함한 웹 페이지에서 사용되는 거의 모든 요소를 내장하고 있기 때문에 부트스트랩의 CSS와 자바스크립트, 관련 이미지만 있으면 대부분의 웹 페이지를 손쉽게 제작할 수 있도록 지원한다. |
|
JavaScript |
자바스크립트는 HTML 문서의 정적이고 단조로운 한계를 극복하기 위해 만든 livescript가 그 이름을 달리 한 것으로서 브라우저 자체에 내장된 해석 기능을 이용한 클라이언트 기반의 일종의 스크립트 언어이다. 작고도 빠르기 때문에 웹문서를 동적으로 꾸밀 때 가장 널리 쓰인다. 언어 규격은 자바의 부분 집합(subset)으로 되어있으며. 최근 다양한 자바스크립트 프레임워크와 라이브러리가 생기면서 자바스크립트 생태계는 크게 확장되고 있으며, 그 위상도 점점 높아지고 있다. |
|
jQuery |
jQuery(제이쿼리)는 HTML의 클라이언트 사이드 조작을 단순화 하도록 설계된 크로스 플랫폼의 자바스크립트 라이브러리다. jQuery의 문법은 코드 보기, 문서 객체 모델 찾기, 애니메이션 만들기, 이벤트 제어, Ajax 개발을 쉽게 할 수 있도록 디자인 되었다. 또한 jQuery는 개발자가 플러그인을 개발할 수 있는 기능을 제공한다. |
|
Ajax |
비동기식 자바스크립트 XML(Asynchronous Javascript And XML)의 약자이다. 하이퍼텍스트 표기언어(HTML)만으로 어려운 다양한 작업을 웹페이지에서 구현해 이용자가 웹페이지와 자유롭게 상호 작용할 수 있도록 하는 기술이며 별도 프로그램을 설치하거나 웹페이지를 다시 로딩하지 않고도 메뉴 등 화면상의 객체를 자유롭게 움직이고 다룰 수 있다. 비슷한 기능의 액티브X나 플래시 등에 비해 가볍고 속도가 빨라 차세대 웹 기술로 각광받고 있다. |
|
Vue.js |
Vue.js(뷰)는 웹 개발을 단순화하고 정리하기 위해 개발된 대중적인 자바스크립트 프론트엔드 프레임워크이다. 점진적으로 채택할 수 있게 설계되어 있기 때문에 다른 자바스크립트 라이브러리를 사용하는 프로젝트에 통합하기 쉽다. 또한 Vue는 고급 싱글 페이지 애플리케이션을 지원하는 웹 애플리케이션 프레임워크의 역할을 할 수도 있다. Vue는 깃허브 스타 카운트가 빠른 속도로 올라가고 있으며 React.js 와 더불어 대중적인 자바스크립트 프레임워크 및 라이브러리로 되었다. |
|
React.js |
React.js(리액트)는 UI 구현을 위한 자바스크립트 라이브러리 및 프레임워크의 하나로서 사용자 인터페이스를 만들기 위해 사용된다. 리액트는 싱글 페이지나 모바일 애플리케이션의 개발 시 토대로 사용될 수 있다. 복잡한 리액트 애플리케이션들은 상태 관리, 라우팅, API와의 통신을 위한 추가 라이브러리의 사용이 일반적으로 요구된다. 리액트는 다른 자바스크립트 라이브러리 및 프레임워크와 가장 큰 차별점은 MVC 패턴에서 V 즉, View 에만 집중하고 있다는 점이다. |
|
jQuery Mobile |
제이쿼리 모바일은 모바일 사이트를 위한 UI 프레임워크로서 짧은 코드로 모바일에 최적화된 웹앱을 만들어 주며 모바일 기기에 최적화된 코어 프레임워크이다. 제이쿼리 모바일을 사용하면 빠르고 간편하게 모바일 페이지를 만들 수 있으며, 이미 완성되어 있는 UI를 제공하기 때문에 디자인과 코딩 부담을 덜 수 있다. 또한 HTML 태그에 속성을 추가하는 방식으로 UI를 생성하기 때문에 자바스크립트와 같은 동적인 언어에 대한 이해가 없이도 사용할 수 있다. |
|
Hybrid App
&
PhoneGap |
모바일 웹앱과 네이티브앱 장점을 결합한 것이 하이브리드 앱이다. 웹앱처럼 HTML을 사용하여 개발하고 네이티브앱 처럼 스마트폰 기능을 사용할 수 있다. 동일한 HTML 코드를 사용하므로 여러 플랫폼에서 사용 가능하므로 개발 비용을 감소시킬 수 있다. 그리고 기기의 고유 정보(주소록, 파일)를 읽고 변경할 수 있으며 하드웨어(카메라, 센서)를 제어할 수 있고 애플 앱스토어나 안드로이드 마켓에 등록해서 판매할 수 있는 매력적인 장점이 있다. PhoneGap(폰갭)은 모바일 웹앱을 하이브리드앱으로 변환시켜주는 모바일 개발 프레임워크이다. |
|
WordPress |
웹페이지 제작 및 관리를 위한 오픈 소스 콘텐츠 관리 시스템(CMS,)의 하나로 웹사이트를 만들고 관리하기 쉽게 도와주는 저작도구이다. 전세계 웹사이트의 1/6가 워드프레스로 만들어져 있다. 워드프레스 웹페이지에서 관련 소스들을 내려 받아 설치하면 홈페이지, 블로그, 쇼핑몰 서비스, SNS서비스 등을 제작하는데 이용할 수 있다. 용이한 사용법과 플러그인을 이용한 확장성이 특징이며 SNS등 다양한 미디어 채널과의 연동도 손쉽게 가능하다. |
과목별 세부 커리큘럼
|
교과목 |
단원 |
교육 내용 |
|
UI/UX 구현 1
(웹퍼블리싱) |
웹표준, 웹접근성,
반응형 웹의 이해 |
- 웹표준과 웹접근성의 이해와 필요성
· 반응형 웹의 개념 이해와 필요성 |
|
HTML
&
HTML5 |
- HTML 구조 및 레이아웃
- HTML 태그 이해 및 마크업 기초
- HTML5 구조 및 레이아웃
- HTML5 마크업 기초 및 코딩
- HTML5 시멘틱 마크업, 테이블, 폼, 그룹 요소
- HTML5와 멀티미디어 요소(오디오, 비디오)
- HTML5 마크업 심화 및 응용
- HTML5 API, 캔버스 사용, 웹표준 코딩 |
|
CSS
&
CSS3 |
- CSS 기본 속성 및 문법 이해
- CSS3의 추가 기능 및 선택자의 종류와 활용
- CSS3의 여러 가지 스타일 속성의 종류와 활용
- 웹페이지 레이아웃, 애니메이션, 변환
- CSS3 고급 기능 사용, 반응형 웹 코딩 |
|
SASS |
- SASS의 기본 속성 및 문법 이해
- SASS Compile 의 이해와 활용
- SASS Mixin,extend,if, for 등 다양한 활용 |
|
반응형 원페이지
&
포트폴리오 제작 |
· 레이아웃, 그리드 시스템, 타이포그래피, 웹폰트, 부트스트랩
· 반응형웹 레이아웃, Flex 레이아웃, Grid Layout, 미디어쿼리
· CSS Animation, CSS3를 활용한 2D & 3D
· 이미지 슬라이더, 라이트박스, 비디오 백그라운드 플러그인,· 멀티 디바이스의 특성 이해, 모바일 대응 웹사이트 제작 기초
· 반응형 웹 디자인 화면 설계와 코딩 실습
· 원페이지, 반응형 웹 페이지 제작 및 업데이트
· 웹표준과 반응형 웹을 적용한 포트폴리오 제작 |
|
UI/UX 구현 2
(프론트엔드 웹개발) |
JavaScript |
- 자바스크립트 개요 및 개발 환경 설정
- 기본 문법, 변수, 상수, 식별자, 자료형, 형변환
- 연산자, 조건문, 제어문, 배열과 반복문
- 함수(매개변수, 내부함수, 콜백함수, 내장함수)
- 객체, 속성과 메서드, 생성자 함수, 캡슐화, 상속
- 내장 객체(Object, Number, String, Array, Data, Math)
- ECMAScript 객체, 브라우저 객체 모델, 문서 객체 모델
- 문서 객체 모델(DOM), 문서 객체 생성 및 조작
- 이벤트의 종류와 처리, 효과, 예외처리
- 자바스크립트 응용 및 활용 |
|
jQuery |
- 제이쿼리 라이브러리의 개요 및 기본 문법의 이해
- 선택자(기본, 전체, 클래스, 태그, 속성, 위치, 필터, 입력양식)
- 메서드(객체 조작, 속성 조작, 수치 조작, 객체 편집)
- 문서 객체의 선택과 탐색, 조작
- 클래스, 속성, 스타일, 객체 삽입, 추가, 검사, 삭제
- 이벤트(연결, 마우스, 포커스, 키보드, 그룹)
- 다양한 효과 및 애니메이션 활용, 이미지 슬라이더
- 제이쿼리 UI 플러그인의 활용과 제작
- 라이트박스, w2ui, jqGrid, 스트레드시트 플러그인
- XML과 Ajax, jQuery와의 연동 및 활용 |
|
Ajax |
- 자바스크립트 비동기 방식기술, Ajax 구조의 이해
- Ajax 학습을 위한 서버 환경 구축, XMLHttpRequest 객체
- Get 방식의 데이터 요청, Post 방식의 데이터 요청
- XML 데이터처리, JSON 데이터 처리
- 크로스 브라우저, Ajax 활용 예제 |
|
Vue.js |
- Vue,js 프레임워크의 개요. 개발 환경 설정
- 기본 디렉티브와 반복 렌더링 디렉티브
- 메서드, 속성, Vue 인스턴스, 이벤트 처리
- 각종 스타일 적용, CSS 클래스 바인딩, 컴포넌트 기초 및 활용, CSS 모듈, 슬롯 사용
- Vue CLI 설치, 도구 활용, 플러그인
- axios 이용 서버통신, Vuex 이용 상태와 변이 관리
- 대규모 애플리케이션에서의 Vuex 사용 |
|
React.js |
- React.js 라이브러리의 개요, 개발 환경 설정
- React.js 기초 문법, JSX, Element 렌더링
- DOM, Component, props, state와 setState 사용
- Component Lifecycle, Event Handler
- List와 Key, Form, Lifting State Up
- Router, Redux, RESTful API & JSON
- Single Page Application |
|
모바일 웹앱
&
하이브리드앱 제작 |
jQuery Mobile |
-모바일 웹, 웹앱 제작의 개요 및 이해
-jQuery Mobile 프레임워크 개요 및 환경 구축
- 화면구성, 인터페이스, 페이지 전환
-헤더바, 푸터바, 네비게이션바, 툴바
· 메뉴 만들기, 버튼과 리스트뷰 , 모바일 위젯
· 대화상자와 폼, 레이아웃 형식
· 모바일 웹, 웹앱 페이지 제작하기 |
|
PhoneGap |
-하이브리드앱 제작의 개요 및 이해
- PhoneGap(코르도바) 프레임워크 개요 및 이해
-개발 환경 구축, 프로젝트 생성 및 실행,API (장치관리, 카메라, 사진, 미디어, 저장소)
· API (연락처 관리, 위치 정보, 구글맵 지도 활용)
· 세미 프로젝트를 통한 하이브리드앱 개발 |
|
종합 프로젝트 |
WordPress |
- 호스팅&도메인 설정과 워드프레스 프로그램 설치하기
- 관리자 화면, 테마 설정, 위젯과 화면구성 하기
- 웹사이트 기획 및 메뉴 구성 하기
- 플러그인 설치, 사용 및 활용하기
- 웹사이트 제작하기(홈페이지, 블로그, 게시판, 쇼핑몰, SNS 등)
- 성능 측정과 검색 엔진 최적화, 보안과 백업 |
|
취업
포트폴리오 제작 |
- 프로젝트 개발 아이디어 회의, 주제 선정, 기획 및 전략 수립
- 요구사항 분석, 벤치마킹, 개발 환경 설정
- 시스템 분석 및 설계, 스토리보드 작성
- 부트스트랩 프레임워크를 활용한 프로젝트 UI구성
- UI/UX, 웹표준 및 반응형 기반의 디자인 및 코딩 구현
- 웹사이트 저작도구 워드프레스를 활용한 실전 웹사이트 제작
- 프로젝트 테스트, 디버깅, 발표 및 시연, 평가 |
[TIS교육과정 강점 및 특징]
★ 고용노동부 인증 직업능력개발훈련 우수 훈련기관 선정
★ 강의 및 실무 경력이 우수하고 훈련생 만족도가 높은 훈련교사 배정
★ 1:1 맞춤 취업 컨설팅을 통한 수료생 전원 취업지원 및 연계
★ 최신 기술 트렌드에 맞춘 현장 실무 중심의 취업교육
★ 학습 성과 및 출석 우수자, 프로젝트 우수팀 표창 및 포상
★ 쾌적한 교육 시설과 최신 PC 및 장비 보유
★ 훈련교재 무상 지원
※ 문의 : 02-3673-3323 카카오톡 : gukbi
※ 홈페이지: www.tisedu.kr
|
l 
.gif)
교육정보등록일
: 2024-11-06
교육과정명
