강의에
들어가며

이제 코딩으로 스펙업!
디자인과 기술의 경계를 넘어라

본 강의는 단순한 속성 위주의 강의가 아닙니다.
깊이 있고 폭넓은 이해와 시야를 바탕으로 체계적이고 단계적인 훈련을 통해
실무에서도 응용 할 수 있는 참 능력이 되도록 하는 것이 목표입니다.

아는 것 VS 할 수 있다는 것

어? 코딩 좀 할 줄 아네! 빈틈 없는 코딩 실력으로 전문성을 높이고 취업 분야를 넓혀주는 봄아카데미의 교육과정

웹표준을 가르치는 곳은 많습니다.
그러나 체계적인 커리큘럼으로 수강생이 차근차근 배워나가는 즐거움을 누릴 수 있는 곳은 많지 않습니다.
봄아카데미의 웹퍼블리셔 양성 과정은 빈틈 없는 코딩 능력을 갖춤으로써 업무의 전문성을 높이고
취업 분야를 넓혀주는 것을 교육 목표로 삼고 있습니다

훈련생 유형에 따라 최대 수강료 전액 정부에서 지원합니다.
생각한 것을 웹상으로 구현할 수 있는 코딩 기술을 배워
포트폴리오를 제작하게 됩니다.

강의 대상

이런 분들에게 추천합니다!

그대 안에 아직 꽃피우지 않은 무한한 가능성이 남아 있습니다.

수강료 걱정 없이 취업
훈련을 받고 싶은 19살 김 군

디자인 분야에 급 흥미를
느낀 취업준비생 최 양

적성에 맞지 않아
회사를 박차고 나온 오 대리

새로운 도전을 준비하는
자영업자 박 대표

강의
주요 특징

오랜 강의 경험을 통해 완성한 커리큘럼

봄아카데미의 ‘웹퍼블리셔 양성 과정’은 그래픽디자이너로 시작해서 웹표준을 독학으로 공부하여
펜타브리드 수석 디렉터로 근무했던 정을수 강사가 세심하게 연구하고,
오랜 강의 경험을 통해 완성한 커리큘럼으로 지도합니다.

HTML/CSS 코드를 기초부터 차근차근 배운 뒤 업그레이드

기업에서 원하는 코딩 능력을 갖추는 것이 단기간에 쉽게 되지는 않습니다. 본 과정은 HTML/CSS 코드를
기초부터 차근차근 배운 뒤 업그레이드해 나가게 됩니다. 또한 강사로부터 습득한 지식을 복습하고,
수강생끼리 생각을 교류하여 사고의 근육을 키우며 개인의 부족한 부분을 채울 수 있도록 스터디그룹을
진행합니다.
커뮤니케이션 능력 및 실전 업무 경험

기업에서는 혼자가 아닌 팀 단위로 업무를 추진합니다. 본 과정에서 강사의 지도아래 수강생끼리
팀프로젝트를 진행하게 됩니다. 자신의 아이디어를 정리해서 제시하고, 각자의 의견을 교류하며
발전시켜나감으로써 회의를 진행하는 데 필요한 커뮤니케이션 능력을 키우고, 토론에서 도출된 결론을
구현해봄으로써 실전 업무를 경험하게 됩니다.
책임지는 포트폴리오

포트폴리오 기획을 마치면 필요한 자료를 수집하고 제작하여 훈련기간 후반에 발표합니다. 다른 수강생과
강사의 피드백을 받아 포트폴리오를 발전시켜 최종 완성합니다. 포트폴리오 완성이 늦어져서 훈련기간을
경과한 경우에는 봄아카데미에서 별도의 과정을 개설하여 포트폴리오가 완성될 때까지 끝까지 책임지고
지도합니다.
취업 연계활동 지원

또한 이력서와 자기소개서를 취업컨설턴트에게 첨삭 받고 모의면접을 진행하는 등 취업(창업)연계활동을
지원합니다.

잠깐! 강의를 수강하기 전에 알아둘 점은?

※디자인에 대한 기초지식과 현재 수준을 테스트 받은 뒤 과정에 대한 참여 의지와 열정,태도를
확인하는 인터뷰가 진행됩니다. 본 과정을 원활히 진행하고, 수강생이 겪는 시행착오를 줄이기위해
인터뷰를 통과한 분만이 본 과정을 수강하게 됩니다.

강의
커리큘럼

강의는 어떻게 진행 되나요?

머리로 이해되고 손으로 익숙해져 스스로 응용할 수 있을 만큼의 실력을 갖출 수 있도록
깊이 있고 폭넓은 이해와 시야를 바탕으로 체계적이고 단계적인 훈련으로 진행됩니다.

세부 커리큘럼

Section 1 웹표준 기초

[01]
개념과 준비
시멘틱 마크업

미디어의 이해
웹 기초
웹표준의 개요

[02]
시멘틱 마크업

HTML 기초문법
태그별 의미와 사용
구조의 이해

[03]
기초 스타일(1)

CSS 기초 문법
선택자
상속

[04]
기초 스타일(2)

우선순위
단위

[05]
폰트와 텍스트 스타일

폰트 스타일링
텍스트 스타일링

[06]
박스다루기(1)

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

[07]
박스다루기(2)

선긋기, 배경
overflow
display
visibillity

[08]
배치하기(1)

웹에서의 배치란?
마크업에서 배치까지
관계성 있는 배치

[09]
배치하기(2)

플롯팅
클리어링

[10]
배치하기(3)

관계성이 없는 배치
position
visual stack level

[11]
폼

입력양식 기본
접근성 있는 양식

[12]
표

표짜기 기본
접근성 있는 표

Section 2 웹표준 응용

[13]
구조설계와 레이아웃

전체적인 컨텐츠와 디자인을 검토하여
CSS구조와 레이아웃 구조를 설계하기

[14]
기본정보 페이지

컨텐츠에 대한 구조적인 관점의 네이밍하기

[15]
제품소개 페이지

동일한 컨텐츠를 최소한의 CSS를 사용하여
효율성 있게 작업하기

[16]
서비스소개 페이지

각기 다른 컨텐츠들을 관리하기 쉽도록 규칙을 만들기

[17]
일반양식과 회원가입

디자인 상황을 고려한 접근성있는 입력양식

[18]
게시판/표

한 사이트에 사용되는 다양한 테이블 스타일 모듈화

[19]
브래드커럼스 / 서브메뉴 / 풋터

접근성을 고려한 마크업 위치선정과
확장성있는 메뉴와 풋터 만들기

[20]
상단메뉴

자바스크립트를 고려하고 확장성 있는
메뉴를 위한 마크업과 스타일링

[21]
메인 페이지

조밀하고 복잡한 메인 페이지 작업하기

[22]
통합 응용 실습 테스트

웹표준 기초 응용을 테스트해 볼 수 있는 실기 시험

Section 3 HTML5/CSS3

[23]
HTML5/CSS3 개요 / 의미의 확장

웹의 미래
달라진 점
추가된 의미와 태그

[24]
리치미디어와 웹폼 / 폰트와 텍스트

비디오와 오디오
캔버스 태그
확장된 기능의 폼
텍스트와 관련된 새로운 표현들

[25]
박스를 위한 새로운 표현들

둥근모서리 박스, 그림자
투명도 조절
다양한 배경사용

[26]
트랜지션과 트랜스폼

CSS만으로 쉽게 부드러운 이징효과를 주고 변형시키는 방법

[27]
애니메이션과 키프레임

CSS만으로 다양한 동작과 움직임 만들기

[28]
실습

HTML5/CSS3 통합 실습

Section 4 멀티디바이스와 반응형 웹

[29]
이해와 접근

멀티디바이스 컨텐츠 설계에 대한 우선순위

[30]
플루이드 레이아웃

유연한 크기제어,단위,폰트,레이아웃 설계

[31]
미디어 쿼리

미디어 쿼리란,뷰포트,사용방법

Section 5 j-Query와 Javascript 기초

[32]
움직임과 j-Query의 이해

웹에서의 동작
Javascript와 라이브러리
j-Query의 사용

[33]
선택자 (1)

DOM
\$()팩터리함수
CSS선택자
속성선택자

[34]
선택자 (2)

DOM
()팩터리함수
CSS선택자
속성선택자

[35]
이벤트 (1)

기본 이벤트
합성이벤트

[36]
이벤트 (2)

이벤트 전파
이벤트 객체와 대상
이벤트 기본동작, 이벤트 핸들러

[37]
효과 (1)

인라인 CSS 변경
숨김과 보이기
효과와 속도
동시효과와 연속효과

[38]
효과 (2)

페이드 토글
프로퍼티 애니메이션
CSS 위치변경

[39]
DOM 다루기

속성 조작하기
요소 삽입/이동/복사
CSS 나누기

[40]
패러럴 스크롤 만들기

시간차로 스크롤하며 컨텐츠를 보여주는 UI구현하기

[41]
슬라이딩 메뉴 만들기

마우스가 오버 되면 부드럽게
하위 메뉴가 나타나는 메뉴 구현하기

[42]
롤링 베너 만들기

가로 혹은 세로로 롤링되면서 컨텐츠를 보여주는 UI 구현하기

Section 6 포트폴리오 제작

[43]
공통 포트폴리오 1 (HTML5/CSS3)

사이트 선정, 구조 및 동작 설계

[44]
공통 포트폴리오 1 (HTML5/CSS3)

마크업,스타일 / 크리틱

[45]
공통 포트폴리오 1 (HTML5/CSS3)

마크업,스타일 / 크리틱

[46]
공통 포트폴리오 1 (HTML5/CSS3)

j-Query / 크리틱

[47]
공통 포트폴리오 1 (HTML5/CSS3)

코드다듬기와 정리하기 / 크리틱

[48]
공통 포트폴리오 2 (모바일 우선 반응형 웹)

사이트 선정, 구조및 동작설계 / 크리틱

[49]
공통 포트폴리오 2 (모바일 우선 반응형 웹)

마크업, 스타일 / 크리틱

[50]
공통 포트폴리오 2 (모바일 우선 반응형 웹)

마크업, 스타일 / 크리틱

[51]
공통 포트폴리오 2 (모바일 우선 반응형 웹)

j-Query / 크리틱

[52]
공통 포트폴리오 2 (모바일 우선 반응형 웹)

코드다듬기와 정리하기 / 크리틱

[53]
개인 포트폴리오 (페러럴 스크롤)

사이트 선정, 구조및 동작설계 / 크리틱

[54]
개인 포트폴리오 (페러럴 스크롤)

마크업, 스타일 / 크리틱

[55]
개인 포트폴리오 (페러럴 스크롤)

마크업, 스타일 / 크리틱

[56]
개인 포트폴리오 (페러럴 스크롤)

j-Query / 크리틱

[57]
개인 포트폴리오 (페러럴 스크롤)

코드다듬기와 정리하기 / 크리틱

[58]
팀작업 포트폴리오 (Templet Working)

업무분담및 역할분담
스케줄짜기
사이트선정
구조및 동작설계

[59]
팀작업 포트폴리오 (Templet Working)

마크업, 스타일 / 크리틱

[60]
팀작업 포트폴리오 (Templet Working)

j-Query / 크리틱

강사에
관하여

정 을 수

(현) 프리랜서 디렉터 및 디자이너
(현) 봄아카데미 웹표준 강사
(전) 펜타브리드 수석 디렉터
(전) 메가존 웹표준화 팀장

2014~현재, Vom Academy 웹표준 강의
2013~현재, (사)한국인터넷전문가협회 웹표준 강의
2011~2014, 아카데미정글 웹표준 강의
2013. 한국디자인진흥원 국가기간전략산업직종
UX/UI 디자인 4기 교육
2013. Godpeople.com 디자인팀 웹표준 교육
2013. 에스원 웹사이트 웹접근성 고도화 (디렉터)
2012. 에스원 웹사이트 구축 (PM)
2012. 현대 아산정주영 웹사이트 구축 (PM)
2012. 현대자동차국내판매 웹사이트 구축 (UI 디렉터)
2012. 삼성HSPOSM 웹사이트 구축 (PM)
2012. 코스콤 웹접근성 고도화 (PM)
2011. U+ 통합웹사이트 구축 (UI개발 PL)
2010. 신한카드 웹사이트 (UI개발 PL)
2009. 삼성모바일닷컴 웹사이트 (UI개발 PL)

포트폴리오

100% 스스로 코딩한 반응형
웹사이트 포트폴리오 제작

웹퍼블리셔 스페셜리스트 강의에 참여한 학생들은 아래와 같은 수준의
반응형 웹사이트를 직접 제작하게 됩니다.

진로 분야

웹퍼블리셔 양성 과정 진로 분야

웹퍼블리셔 양성 과정에 참여한 학생들의 진로 분야는 다음과 같습니다.

질문 있어요

더 궁금해요

Q. 내일배움카드의 훈련비 지원은 어떻게 되나요?

A. 훈련생의 유형에 따라 최소 70%에서 최대 100% 국비지원이 가능합니다.

Q. 코드를 전혀 모르는 사람도 이 과정들 들을 수 있나요?

A. 예, 가능합니다. 본 과정은 비전공자의 눈높이에서 기초부터 차근차근 배울 수 있도록 진행합니다.
과정이 진행되는 동안 교육 내용을 이해하고, 잘 따라온다면 좋은 결실을 맺을 수 있습니다.

Q. 강의를 마치면 과제는 어느 정도인가요?

A. 배운 내용에 대한 복습을 위해 과제를 부여하고 있습니다. 과제에 대한 피드백을 개별적으로 제공합니다.

Q. 수업 준비물이 필요한가요?

A. 아니오. 강의실에서 실습할 수 있는 아이맥 PC가 세팅되어 있고, 어도비사의 일러스트레이터와 포토샵 최신 버전이
설치되어 있습니다. 물론, 개인 노트북을 지참하셔도 되며, 간단한 필기도구와 종이를 준비해오면 됩니다. 교재는
자체 제작된 교안을 무상으로 배포합니다.

Q. 본 과정을 마치면 웹퍼블리셔가 될 수 있나요?

A. 예,웹퍼블리셔가 될 수 있습니다.하지만 좋은 웹퍼블리셔가 되기 위해서는 좀 더 장기적으로 보는 것이 좋습니다.
본 과정을 통해 기본기를 다지고 자바스크립트와 제이쿼리 등을 공부하여 본인의 실무 능력을 더 키우신다면 유능한
웹퍼블리셔가 될 수 있습니다.

수강을 하려면

수업 신청 과정

본 과정은 강의시작일로부터 한 달이상 이전부터 강의 신청을 해야 합니다.
내일배움카드 대상자 선발 규정상 1~4단계까지 최소 한 달 이상 소요되기 때문입니다.
자세한 사항은 상담을 통해 친절히 안내해드리겠습니다.

HRD-Net(www.hrd.go.kr) 개인회원 가입 후 구직자 페이지에서 훈련동영상을 시청합니다.
워크넷(www.work.go.kr)개인회원 가입 후 이력서를 작성하여 구직신청과 구직인증을 합니다.
실거주지 관할 고용센터를 방문하여 내일배움카드 발급을 신청하신 후 본 과정의 훈련기관인
봄아카데미에 방문해서 디자인에 대한 기초지식과 현재 수준을 테스트 받은 뒤 인터뷰를
실시합니다.

훈련참여 대상자를 선발하기 위하여 직업경력, 직업능력수준, 직업훈련 경험 등
직업훈 련 필요성에 관한 훈련상담을 받는 단계입니다.
주의할 점은 구직(취업) 의사가 없는 구직자(실업자)는 지원대상이 아니라는 것입니다.
또한 취업(창업) 희망직종과 관련 없는 훈련은 참여가 불가능합니다.
훈련직종(분야)을 변경하고자 하는 경우 재상담을 받아야 하니 신중히 선택해야 합니다.

본 과정을 실시하는 봄아카데미에 방문하여 수강을 신청합니다.

지문인식에 의한 출결관리동의서를 제출한 경우 지문인식기로 출석을 체크하며, 동의하지않은
경우 직업훈련카드로 출석을 체크합니다. 지각, 조퇴 또는 외출 3회 시 1일 결석 처리되며, 지각,
조퇴 또는 외출로 1일 훈련시간의 50% 미만 참여 시 결석으로 처리됩니다.
예비군·민방위훈련, 취업·창업을 위한 시험, 입사시험, 기능경진대회, 경조사 등의 사유로
훈련을 받지 못한 경우는 출석으로 인정됩니다.
전체 출석률이 80%이상인 경우에만 해당 훈련과정이 ‘수료’처리 됩니다.

본 과정에 대해 더 궁금한 사항은 상담을 통해 자세히 안내 받을 수 있습니다.

Section 1 웹표준 기초

Section 2 웹표준 응용

Section 3 HTML5/CSS3

Section 4 멀티디바이스와 반응형 웹

Section 5 j-Query와 Javascript 기초

Section 6 포트폴리오 제작

정 을 수

수강 후기

수강 후기

교육기간 교육시간 강 사 모집인원 수 강 료	\| 2018년 06월 29일 ~ 11월 20일 \| 주 4일(월~목) 13:20~18:20 \| 정을수 \| 20명(선착순 모집) \| 전화 문의	수강 신청