👇 4개의 파트로 구성된 36강의 커리큘럼을 확인해보세요.

1. 상세히보기

   PART 01 WEB DESIGN

   • 01강
     • 웹디자인 기초
     • 1. 웹디자인 프로세스의 이해
     • 2. 모바일 디자인 트렌드의 이해
     • 3. OS별 디자인 가이드의 이해
     • 4. UI디자인 개발 툴의 이해
     • 5. 과제 소개
   • 02강
     • 디자인 요소의 이해(1) Color
     • 1. 기본 색상의 이해
     • 2. Color Meaning
     • 3. Color 배색의 이해
       (배색 이미지 공간, 형용사 이미지 공간)
     • 4. Web Color의 이해와 활용
   • 03강
     • 디자인 요소의 이해(2) Typography & Layout
     • 1. 타이포그라피 기초
       - 서체 유형과 속성의 이해
       - 웹폰트의 이해
     • 2. 인터페이지 디자인 기초
       - 모바일 사용성의 이해
       - OS별 디자인 가이드의 이해
       (Material Design Guide)
       - 물리 픽셀과 논리 픽셀의 이해
       - 배율 디자인과 반응형 레이아웃의 이해
       - 디바이스별 해상도 이해
     • 3. 여백과 그리드의 이해 (8dp Grid, Column Grid)
     • 4. 웹 화면과 반응형 사이트의 레이아웃 이해
   • 04강
     • 디자인 스타일 가이드의 이해
     • 1. 디자인 스타일 가이드의 개념과 필요성
     • 2. Color System의 이해
     • 3. 시스템 폰트의 이해
     • 4. Type Scale의 이해
     • 5. 디자인 스타일 가이드 작성법
   • 05강
     • 디자인 툴의 이해(1) Adobe XD 기초
     • 1. Adobe XD 인터페이스의 이해
     • 2. 기본 툴을 활용한 아이콘 제작 및 활용
     • 3. 반복 그리드, 스택, 패딩의 이해와 활용
     • 4. 에셋의 이해와 활용
   • 06강
     • 디자인 툴의 이해(2) Layout 디자인
     • 1. 컴포넌트 디자인의 이해와 활용
     • 2. 반응형 & 모바일 디자인
       - 가변크기와 고정크기의 이해
     • 3. OS별 UI 키트의 활용
   • 07강
     • 프로토타입과 인터랙션의 이해
     • 1. 프로토타입의 이해와 활용
     • 2. 마이크로 인터랙션의 이해
     • 3. 와이어프레임의 이해와 제작
2. 상세히보기

   PART 02WEB DESIGN PROJECT

   • 08강
     • 홈페이지 제작(1) 프로젝트 Overview
     • 1. 추천 사이트 및 레퍼런스 가이드
     • 2. 프로젝트 목표 및 문제 발견 : Project Goal
     • 3. Research 방법 & 실습
       - 사용자, 경쟁사, 콘텐츠
     • 4. 1차 Reference 조사 분석
   • 09강
     • 홈페이지 제작(2) 아이디어 도출
     • 1. 기초데이터 수집 및 콘텐츠 구성
     • 2. 콘텐츠 수집 및 내용 분석
     • 3. 기초 정보 구성 설계
       - 콘텐츠 분석 및 적용
     • 4. 차별화 전략 수립
       - 차별화 전략과 아이덴티티 수립
     • 5. 2차 Reference 조사 분석
       - 차별화 전략을 통한 2차 레퍼런스 조사
     • 6. Ideation & 아이디어 스케치
   • 10강
     • 홈페이지 제작(3) 컨셉 도출
     • 1. 제작 및 컨셉방향 수립
       - Ideation을 통한 컨셉 방향 수립
     • 2. 컨셉 도출(무드보드)
       - 레퍼런스를 통한 컨셉 시각화
     • 3. Tone & Manner
       - 컬러 이미지맵(형용사) 등을 통한 컬러 가이드
     • 4. 정보구조설계(IA Information Architecture)
       - 사이트맵 작성
     • 5. 와이어프레임 & UI 개발(인터랙션 설계)
   • 11강
     • 홈페이지 제작(4) 포트폴리오 제작
     • 1. 반응형 웹사이트 개인 포트폴리오 디자인 제작 1
   • 12강
     • 홈페이지 제작(5) 포트폴리오 제작
     • 1. 반응형 웹사이트 개인 포트폴리오 디자인 제작 2
3. 상세히보기

   PART 03WEB PUBLISHING

   • 13강
     • 오리엔테이션
     • 1. 강의목표 및 웹퍼블리셔 직무 소개
     • 2. 실습환경 및 에디터 소개 (VSCode, FTP, 무료호스팅)
     • 3. HTML기본 구조 및 주요 태그 1
   • 14강
     • HTML 기초(1)
     • 1. HTML 기본 구조 및 HTML주요 태그 2
     • 2. 경로 및 웹 이미지의 이해
     • 3. 미디어 태그 (video, Audio, iframe)
   • 15강
     • HTML 기초(2)
     • 1. 폼태그의 이해
       (input, button, select, checkbox, radiobutton 등)
     • 2. 시멘틱 마크업의 이해
   • 16강
     • CSS 기초(1)
     • 1. CSS란?
     • 2. 스타일 적용방법
     • 3. 선택자의 이해
     • 4. Block, Inline, Inline-block요소의 이해
     • 5. BoxModel의 이해
   • 17강
     • CSS 기초(2)
     • 1. Border와 Background 속성의 이해
     • 2. Gradient와 BlendingMode의 이해
     • 3. Box-shadow,TextShadow
   • 18강
     • CSS3활용(1) 레이아웃의 이해
     • 1. Reset과 크로스브라우징
     • 2. Position,float,overflow
     • 3. Multi-columnLayout
     • 4. 웹폰트 적용
     • 5. 홈페이지 레이아웃 구성
   • 19강
     • CSS3활용(2) 애니메이션의 이해
     • 1. Animation,Transform,Transition
     • 2. Loading애니메이션 만들기
     • 3. HoverEffects 활용 (메뉴, 상품 섬네일 등)
   • 20강
     • 반응형 홈페이지의 이해
     • 1. Flexbox의 이해와 활용
     • 2. 반응형 홈페이지의 개념 및 미디어쿼리의 이해
     • 3. 반응형 적용 및 레이아웃 구조잡기
     • 4. 뷰포트, 플렉서블 박스
   • 21강
     • 탬플릿으로 구조설계
     • 1. 레이아웃 구조잡기
     • 2. 로그인 폼 만들기
     • 3. CSS재사용을 위한 효율적 구조잡기
       (네이밍, 멀티클래스, 선택자 등)
   • 22강
     • 반응형 홈페이지 실습(1)
     • 1. 상용사이트 벤치마킹 마크업&CSS
   • 23강
     • 반응형 홈페이지 실습(2)
     • 1. 상용사이트 벤치마킹 마크업&CSS
   • 24강
     • jQuery 기초
     • 1. jQuery &CSS3 인터렉션 적용하기
     • 2. jQuery 주요 플러그인 적용법
4. 상세히보기

   PART 04 포트폴리오 구축 및 UI개발

   • 25강
     • 오리엔테이션 및 포트폴리오 준비
     • - 강의소개
     • - 크롬 개발자 도구 활용
     • - VS Code 활용
     • - 개인 포트폴리오 기획
   • 26강
     • 개인 포트폴리오 제작(1)
     • - 반응형 UI 이해
     • - 개인 포트폴리오 페이지 제작
   • 27강
     • 개인 포트폴리오 제작(2)
     • - 개인 포트폴리오 페이지 제작
     • - 웹 이력서 페이지 제작
     • - 이력 계산 스크립트
   • 28강
     • fullpage를 이용한 원페이지 사이트 구현
     • - 스크롤 슬라이드 구조 이해
     • - fullpage 기본 구조 및 옵션 활용
   • 29강
     • JavaScript & jQuery
     • - 프로그래밍 기초
     • - 데이터 타입, 논리/비교 연산자
     • - 변수, 배열, 함수, 조건문, 반복문
     • - 선택자, 클래스 추가/삭제
   • 30강
     • jQuery 이벤트 활용
     • - 카운터 구현
     • - 메일 시그니처 구현
     • - 채팅 UI 구현
     • jQuery 플러그인 활용
     • - swiper를 이용한 슬라이드 구현
     • - Slider filter 구현
     • - google chart를 이용한 정보 시각화
   • 31강
     • To-Do List 구현
     • - 다양한 jQuery 이벤트 조합
     • - 코딩 테스트 체험
     • - 복합적인 UI 요소 구현
   • 32강
     • ajax & json 기초
     • - 데이터 호출 방식 이해
     • - 프론트엔드 사이드 렌더링 이해
   • 33강
     • ajax & json 활용
     • - 자리예약시스템 구현
     • - 박스오피스 랭킹 데이터 활용
     • - 미세먼지 데이터 활용
   • 34강
     • CSS 전처리기(Sass) 기초와 활용
     • - Sass 기초
     • - 변수, 연산, 제어문, 조건문, 반복문, 함수
     • - Mixin, each, map
   • 35강
     • Git 기초
     • - Github 활용
     • - Git 기본 명령어 이해
   • 36강
     • 실무 프론트 UI 이해
     • - 폰트 아이콘 (Font Awesome)
     • - UI Grid System
     • - UI 프레임워크 (Bootstrap)
     • - 코딩 컨벤션
     • - 디자인 시안 이해 (PSD, Zeplin, Figma)

수강 신청하기 전, 예비 수강생 여러분께 전합니다.

• 01

  난이도는 처음부터 시작합니다. 과정의 끝은 중급 이상을 위해 달려갑니다. 초급자를 대상으로 하여 실무 웹사이트를 제작할 수 있도록 하는 과정입니다. 성실 하게 공부한다면 기대 이상의 결과물을 얻을 수 있을 것입니다.

• 02

  이 과정은 스스로 할 수 있도록 가이드 하고 훈련하는 과정입니다. 정말로 사이트를 제대로 디자인해보고 싶은 분, 본인이 스스로 코딩해서 사이트를 제작하고 싶은 분들이 꼭 들어야 하는 과정입니다.

• 03

  강사님이 가지고 있는 지식을 전수하며, 가르침에 있어서는 친절하게 성심껏, 아낌없이 가르쳐 드릴 거예요. 그래서 학생들이 강사님과 수업하고나면 많은 것을 얻어가게 됩니다.

• 04

  강의장에 공용 PC가 준비되어 있지만, 가급적 노트북을 가져오길 권장합니다. 강의장 PC에는 Adobe CS6 프로그램이 준비되어 있어, 과정을 수강하는데 불편할 수 있어요.