강의개요

반응형웹 디자인 + 웹퍼블리싱 통합 과정

본인의 반응형 웹 디자인 포트폴리오를 완성하여 그 결과을 실제 브라우저에서 동작되는 단계까지 만드는 과정입니다.
그래픽뿐 만 아니라 웹의 특성을 파악하고 코드를 이해하여 반응형 웹사이트를 제작할 수 있는 디자이너가 되는 과정입니다.

웹 디자인 포트폴리오

• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 

'서희경' 수강생 포트톨리오

퍼블리싱 포트폴리오

'박규태' 수강생 포트톨리오

실무에서 필요로 하는 프로젝트 프로세스를 경험함으로써 프로젝트 역량 강화!

이론과 실습의 효과적인 교육 시스템을 통해 원리와 개념을 파악하고 취업을 위한 포트폴리오를 만들어내는 교육과정입니다.
트렌드한 포트폴리오를 완성하여, 포털 / 에이전시 / 광고대행사 / 디자인 스튜디오 등으로의 성공적인 취업을 목표로 합니다.

수강대상

• 웹/모바일 관련
  디자인 기업 취업 희망자
• 커리어 업그레이드/진학을 위한
  포트폴리오가 필요한 디자이너 및 디자인 전공자
• 스타트업/일반기업의
  코딩이 필요한 웹 디자이너

수강생 포트폴리오

웹 디자인 포트폴리오

전체보기

• 
• 
• 
• 
• 
• 
• 
• 

퍼블리싱 포트폴리오

전체보기

• 
• 
• 
• 
• 
• 
• 
• 

커리큘럼

웹 디자인 커리큘럼

프로모션 웹 사이트 디자인

• 
• 01강1. 오리엔테이션
  

  2. 웹디자인 포토샵 작업 환경 세팅
  3. 웹디자인 구성요소 01 - 타이포그래피 기초
  4. 웹 디자인 구성요소 02 - 이미지 활용법
  5. 웹디자인 실습 01 - 웹디자인에서 많이 쓰이는 포토샵 기능 실습 1

  
  03강쇼핑몰 웹사이트 디자인
  

  그리드 디자인을 활용한 쇼핑몰 웹사이트의 대표적인 레이아웃과 이미지 활용법 실습

  
  05강포트폴리오 프로젝트 1
  

  프로모션 웹 사이트 주제 선정 및 프로모션 기획

  
  07강포트폴리오 프로젝트 1
  

  프로모션 웹 사이트 디자인 시안 제작 및 크리틱

  
  09강포트폴리오 프로젝트 1
  

  프로모션 웹 사이트 디자인 완성 및 크리틱

  
  
• 02강1. 웹디자인 구성요소 03 - 레이아웃과 구도
  

  2. 웹디자인 구성요소 04 - 컬러
  3. 웹디자인 실습 01 - 웹디자인에서 많이 쓰이는 포토샵 기능 실습 2

  04강기업 웹사이트 디자인 실습
  

  기업의 디자인 아이덴티티를 활용한 웹사이트 디자인 실습

  06강포트폴리오 프로젝트 1
  

  프로모션 웹 사이트 와이어 프레임, 무드 보드 제작

  
  08강포트폴리오 프로젝트 1
  

  프로모션 웹 사이트 디자인 시안 제작 및 크리틱

반응형 웹 디자인

• 
• 10강1. 웹 디자인 트랜드
  

  2. 반응형 웹 디자인 기초 이론
  3. 브라우저와 해상도의 이해
  4. 그리드 디자인 시스템 이론
  5. 포트폴리오 반응형웹 디자인 프로젝트 - 주제 선정을 위한 리서치

  
  12강1. 화면 정의서(스토리 보드) 작성법과 실습
  

  2. 무드 보드 작성법과 실습
  3. 포트폴리오 반응형웹 디자인 프로젝트 - 컨셉 디자인

  
  14강데스트탑 버전 메인 비주얼 디자인
  16강데스크탑 버전 전체 화면 디자인 및 크리틱
  18강모바일 버전 디자인 실습 및 크리틱
  
• 11강1. 반응형웹 레이아웃 살펴보기
  

  2. 모바일 퍼스트란?
  3. 디자인 컨셉 도출 방법론
  4. 포트폴리오 반응형웹 디자인 프로젝트 - 주제 선정

  13강포트폴리오 반응형웹 비주얼 컨셉 디자인
  

  타이포그래피, 컬러, 레이아웃

  15강데스크탑 버전 전체 화면 디자인 및 크리틱
  17강모바일 버전 디자인 실습 및 크리틱
  19강포트폴리오 반응형 웹디자인 결과물 발표 및 피드백
  

포트폴리오 디자인

• 
• 20강1. 포트폴리오 구성 이론
  

  2. 포트폴리오 구성 전략
  3. 포트폴리오 예시
  4. 목업 디자인 활용 방법
  

  
  22강포트폴리오 프로젝트 별 페이지 디자인
  
  24강최종 발표 및 과정 마무리
  
• 21강1. 포트폴리오 구성 컨셉 잡기
  

  2. 포트폴리오 문서의 표지디자인과 기본 구성
  페이지 디자인 실습

  23강포트폴리오 제작 완성 및 크리틱
  

퍼블리싱 포트폴리오

HTML/CSS 파운데이션

• 
• 01강기초 스타일링(1)
  

  HTML에 CSS 적용하기
  CSS 기초 문법
  HTML 기초 문법
  id와 class 사용하기
  기초선택자, 가상선택자
  font 스타일링
  text 스타일링

  
  03강박스다루기-1
  

  박스로 생각하기
  박스의 성질
  박스의 종류
  넓이와 높이
  여백과 간격

  
  05강배치하기-1
  

  웹에서의 배치란?
  마크업에서 배치까지
  관계성 있는 배치
  block formatted context
  inline formatted context
  position:relative
  플롯팅
  클리어링

  
  
• 02강기초 스타일링(2)
  

  단위
  상속
  우선순위
  속성선택자

  04강박스다루기-2
  

  선긋기
  배경색과 배경이미지
  overflow, display, visibillity

  06강배치하기-2
  

  관계성 없는 배치
  position:absolute
  position:relative
  position:fixed
  박스가 보이는 순서

응용 트레이닝

• 
• 07강포털사이트의 게임 / 자동차 소식 영역
  

  플롯속성에 포커스를 맞추고 사용되는 실제 디자인을 통해 박스가 상황에 따라 어떻게 변형되는지를 선명하게 이해하고 다양하게 응용해 봅니다.

  
  
• 08강포털사이트의 만화/웹툰 영역
  

  클리어링에 포커스를 맞추고 플롯을 사용한 후 다양한 클리어링이 어떻게 응용되는지를 상황별로 실험해 봅니다. 또한 기초편 보다 깊이 있는 우선 순위 응용연습과 다양한 선택자를 이용한 구조적 사고를 연습합니다.

실전 크리틱

• 
• 09강구조설계와 레이아웃 / 헤더 영역과 상단 메뉴
  

  전체적인 컨텐츠와 디자인을 검토하여 CSS구조와 레이아웃 구조를 설계하기
  - 컨텐츠와 디자인 특성에 맞게 마크업 시작하기
  - 자바스크립트를 고려하고 확장성 있는 메뉴를 위한 마크업과 스타일링하기
  - 주요포인트: CSS구조, 네이밍규칙, 디자인구조파악, float&clear)

  
  11강컨텐츠 페이지
  

  각기 다른 컨텐츠들을 CSS로 핸들링 할 수 있도록 규칙을 만들어 내면서 작업하기
  주요포인트: 네이밍규칙, background, 음수마진, float&clear

• 10강브래드커럼스 / 서브메뉴 / 풋터
  

  접근성을 고려한 마크업과 추가되는 메뉴를 고려해 확장성있는 메뉴와 풋터 작업하기 주요포인트: vertical-align, background, float&clear)

반응형 웹과 jQuery

• 
• 12강반응형 웹에 사용 되는 개념들
  

  CSS3의 새로운 계산, 범위, 선택 방법
  반응형웹에서 중앙 정렬
  변하는 상자안의 이미지 다루기
  %, em, vm, vh 을 이용한 박스 사이징
  플렉서블하게 박스 다루기
  미디어쿼리와 뷰포트

  
  14강반응형 웹에 jQuery 사용하기
  

  DOM, javascript, jQuery 소개
  동적 효과 적용하기

  
  
• 13강반응형 웹 만들기
  

  실제 사이트를 선정하여 클론 코딩 클론 코딩 전과정 크리틱

취업을 위한 커리어코칭!

수업이 진행되는 중간마다 개별상담을 진행하고 취업하고자 하는 회사 또는 진학을 위한 이력서 및 자기소개서의 첨삭을 진행합니다.
과정이 끝났다고 모든 것이 끝난 것은 아닙니다. 포트폴리오 완성 외에도 준비해야 하는 사항에 있어서 최대한 지원하고 있습니다.

 강사소개

등록 절차 안내

온라인 수강신청 후 개별연락을 통해 상담을 진행합니다.
과정 선택이 어려운 경우, 본인에게 적합한 과정을 상담해 드립니다.

1. 후불제 안내

후불제 안내 페이지로 이동 후불제 신청

2. 일반 결제 안내