최근 미니멀한 디자인이 트렌드가 되면서 동적으로
인터렉티브한 효과를 줄 수 있는 UI개발의 필요성은 더욱 높아지고 있습니다.
플러그인 활용으로만 jquery를 사용하셨던 분들이라면,
javascript의 원리를 이해하고 스스로 UI를 제작하여
마음대로 수정/활용하는 것에 많은 갈증을 느끼셨을 것입니다.
이 과정은 Query/javascript의 기본 원리부터 학습하여 UI를 원하는 대로 만들어내고
구현하는 훈련을 통해 웹접근성이 준수된 UI개발 및 모바일 기기에서도
사용가능한 UI제작을 가능하게 해줍니다.
크로스 브라우징, 크로스 디바이스를 고려한 UI 스타일링,
클라이언트 서버와 연동하는 기술 구현까지 막힘이 없도록
최적화된 내용으로 커리큘럼이 구성되어 있습니다.
- HTML / CSS를 이용한 웹사이트 퍼블리싱 가능자
- CSS3의 기본 명령 및 Transition / Animation 등의 Animation 기능 이해
- 프로그래밍에 대한 기본 지식 (변수, 함수, 제어문 등 기본 내용)
- 강의 준비 및 오리엔테이션
- HTML 기초 복습
- CSS 기초 복습 (Box 모델, Position)
- 프로그래밍 기초
- UI 개발을 위한 JavaScript 기본
(문법, 데이터타입, 변수, 함수 등)
- JavaScript 실습
- UI 설계 및 개발 기법 (이미지 슬라이드)
Step 1 : jQuery 기본 기능 활용
Step 2 : 함수를 활용한 구현
- UI 설계 및 개발 기법 (이미지 슬라이드)
Step 5 : 설계 개념 변경에 따른 구현방식 변경(Swipe 형태)
Step 6 : 재활용 및 기능설정이 가능한 소스 구현
Step 7 : jQuery의 사용자 정의 메소드 구현
- Banner Slide
- 디자인에 따른 UI 컨트롤 기법 (좌우이동 min / max 값 계산 등)
- Scroll 기초, Parallax UI
- scroll 이벤트에 따른 UI 개발 기법
- 연속적으로 발생하는 이벤트에 대한 컨트롤 기법
- 접근성을 준수한 패럴랙스 구현하기
- Multi-touch UI (Zoom, Rotate, Transition 등)
- 멀티터치 기능을 활용한 UI 구현
- Device API 소개 (전화걸기, 문자보내기, 사진/동영상 첨부 등)
- 이벤트의 이해
- UI 개발을 위한 jQuery 기본 (문법)
- 주요 API 숙달 : Event, Get/Set, Add/Remove
- jQuery 실습
- 주요 API 숙달 : CSS, Traversing, Dimension, Animation, 기타
- JSON 기초
- jQuery 실습
- UI 설계 및 개발 기법 (이미지 슬라이드)
Step 3 : 변수/함수를 활용한 객체 형태 구현
Step 4 : 애니메이션 / 타이머 등 실무 예제 구현
- Navigation (Web, Mobile)
- 반응형 웹에서의 UI 구현 기법
- Drag 기초, Swipe(Mouse) 구현
- 좌표값을 활용하는 UI 개발 기법
- Swipe(Touch)
- 모바일 기기에서의 UI 개발 기법
(touch 이벤트 활용)
- 모바일에서의 이벤트 컨트롤 기법
(스크롤 방지, 좌우/상하 선택 등)
- 주요 라이브러리 활용 방법 소개
(iScroll, Google Chart, Calendar 등)
- 실무를 위한 소스 정리 / 재활용 기법
강사
이시영
현) 디노웍스㈜ 대표
방위사업청 사업관리본부 운영 아키텍트
웹표준솔루션 포럼 회원사
KAIST 산업공학과 (석사)
주요프로젝트
주요 금융사 및 대기업 웹 접근성 개선 컨설팅 및 구축 사업
현대건설, CJ 그룹, 기아자동차, IBK 기업은행, 국민카드 등