[언더스탠딩 웹표준 응용 17기 (토)]

강의에
들어가며

웹표준, 왜 디자이너가 배워야 하는가?

좋은 웹 디자인은 HTML/CSS에 대한 충분한 이해로부터 시작됩니다!
현재의 웹 사이트들은 대부분 블슈어를 디자인하는 것처럼 픽셀을 기반으로 디자인 되고 있습니다.

하지만 웹페이지는 적게는 몇십페이지 많게는 수만페이지가 될 수 있으므로,
규칙을 기반으로 디자인 되어야 하며 이렇게 만들어진 웹페이지야말로 웹다운 큰 힘을 갖게됩니다.

그러므로 웹디자이너는 크리에이티브한 시각 언어를 규칙 안에 담아 내어
현장감 있는 디자인을 만들어 낼 수 있어야 합니다.

강의
주요 특징

어떻게 제대로 배울 수 있을까요?

단순히 아는 것 VS 할 수 있는 것

사실 HTML/CSS는 쉽게 전문가가 아니더라도 사용할 수 있도록 보편성을 철학으로
설계된 언어입니다. 하지만 프로 작업자로서 실제 디자인을 코드로 만들 수 있게
되기까지 배우기는 쉽지 않은 것이 사실입니다.

머리로 이해되고 손으로 익숙해져 스스로 응용할 수 있을 만큼 친절하게
단계별로 학습할 수 있는가이드가 많지 않은 것도 그 이유중 하나입니다.
보통의 책과 강의는 속성 설명 위주의 내용이 대부분이기 때문입니다

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

앞으로의 모든 미디어는 소프트웨어, 텔레비전, 방송, 그리고 이북에 이르기까지
모든 미디어를 HTML/CSS가 통합해 나갈 기세입니다.
이것은 기존의 북 디자인, 웹 디자인 그리고 3D의 각각의 아웃풋이
웹이라는 하나의 아웃풋으로 통합된다는 뜻입니다.

그렇기에 이 시리즈는 디자이너 분들에게 HTML/CSS를 마음껏 주무를 수 있는
디자인 도구로 만들어 드리겠다는 목표를 가지고 있으며,
HTML/CSS에 대해 좀 더 진지하고 의욕적으로 배우고 싶은 분들을 위해 만들어지게 되었습니다.

전 과정에 걸쳐 실무에서의 강사의 경험을 최대한 살리고
기존의 책이나 강의의 기능 명세를 알아보는 방식의 단순한 학습이 아닌
통합적인 이해를 바탕으로 머리와 손으로 익혀질 수 있는 배움이 될 수 있도록 교육방식을 디자인하였습니다.

PROFESSIONAL

10년 이상의 실무 경력과
교육 경험을 가진 최고의 강사

EASY

처음 시작하는 분도 충분히
이해할 수 있도록 쉬운 설명

VISUAL

어려운 개념 및 원리를
시각적인 방법을 통해 설명

INSPIRE

강사의 실무 경험에서 얻은
기술과 디자인의 인사이트 경험

TRAINING

현장에서 사용되는 예제 및 실습을
통한 진정한 실무 훈련

PORTFOLIO

구직 및 이직에 필요한 수준 높은개인별 포트폴리오 제작

강의
커리큘럼

Understanding 시리즈의 응용편에서는
무엇을 다루나요?

응용편에서는 실제 디자인을 통해 응용해서 만들수 있는 능력을 키워나갑니다.
수업의 큰 흐름을 만드는데 있어서 가장 어렵고 시간이 걸리는 부분과 기초편에서 다루지 못한 속성들을 포함하고 있는 실제 웹사이트의 부분들을 엄선하여 진행하게 됩니다.
단순하고 큼직한 부분부터 시작하여 복잡하고 오밀조밀한 디자인까지를 실습을 통해 소화해 내면서
자세한 설명을 더하는 방식으로 진행됩니다.

코드는 흔히 머리와 손으로 익혀진다고 말합니다. 이해만 있고 해보지 않으면 자신감이 없고 반대로 깊은 이해가 없이 손으로 해보기만 한다면 왜 이렇게 디자인이 깨지는지 왜 이런 속성이 필요하고 앞으로는 어떻게 될지를 예측할 수 없는 반쪽 공부가 되어 버립니다.

즉 기초편의 탄탄하고 깊은 이해에 응용편의 실제적이고 자세한 기법을 훈련함으로서 그림이 아닌 코드를 이용해 모양을 만들 수 있는데 필요한 사고 방법에 숙달하는 수업이라고 할 수있습니다.
또한 실제 사이트를 캡춰하여 실습과 설명을 반복하면서 특정 상황에서의 의미있는 태그 사용, 접근성
그리고 좋은 디자인과 크로스브라우징을 동시에 생각하여 그 중 가장 많을 것을 얻을 수 있는 방법을 해당 상황에서 선택하는 훈련을 하게 됩니다.

세부 커리큘럼

언더스탠딩 웹표준 실무 응용

[01]
응용 LEVEL 1

플롯속성에 포커스를 맞추고 사용되는 실제 디자인을 통해 박스가 상황에 따라
어떻게 변형되는지를 선명하게 이해하고 다양하게 응용해 봅니다.
실습1. 구)네이버 오늘의 캐스트 영역
실습2. 구)다시보는 캐스트 영역

[02]
응용 LEVEL 2

클리어링에 포커스를 맞추고 플롯을 사용한 후 다양한 클리어링이 어떻게
응용되는지를 상황별로 실험해 봅니다. 또한 기초편 보다 깊이 있는
우선 순위 응용연습과 다양한 선택자를 이용한 구조적 사고를 연습합니다.
실습3. 구)네이버 오픈 캐스트 영역
실습4. 구)네이버 주제별 캐스트의 카/테크 영역

[03]
접근성 있는 표 사용

표짜기에 대한 이해와 더불어 스크린리더가 표를 어떻게 읽고 어떻게
접근성을 갖출 수 있는지를 배우며 디테일한 디자인을 입힐 수 있도록 깊이
표의 속성과 더불어 트렌드에 맞는 표 디자인을 위한 방법을 알아봅니다.
표짜기 기본과 활용
접근성 있는 표
표를 위한 CSS응용
실습5. 게시판

[04]
접근성 있는 입력양식 사용

여러가지 입력양식을 쉽고 통일감 있게 배우며,
접근성을 위해 어떤점에유의 해야하는지를 살펴봅니다.
아울러 트렌드에 맞는 입력양식 폼을 위한CSS기법을 알아봅니다.
입력양식 기본과 활용
접근성 있는 양식
양식을 위한 CSS응용
실습6. 입력양식

[05]
응용 LEVEL 3

포지션에 포커스를 맞추고 상자를 다루는 법을 계속해서 응용 연습하며
기초편에서 배우지 않은 비주얼 스택구조, IR기법등을 배우고
장단점에 맞게응용해 봅니다.
실습7. 구)네이버 주제별 캐스트의 게임 영역
실습8. 구)네이버 로그인 영역

[06]
응용 LEVEL 4

여러가지 입력양식을 쉽고 통일감 있게 배우며,
접근성을 위해 어떤점에 유의 해야하는지를 살펴봅니다.
아울러 트렌드에 맞는 입력양식 폼을 위한 CSS기법을 알아봅니다.
실습9. 구)네이버 주제별 캐스트의 만화 영역
실습10. 구)네이버 주제별 캐스트의 만화 영역

[07]
응용 LEVEL 5

실제 웹사이트의 소개페이지를 선정해 해당 상황에서의 레이아웃을 살펴보고
응용해 봅니다. 또한 디자인 상황에 맞는 네이밍과 적절한 구조화를 연습합니다.
2단 레이아웃
3단 레이아웃
flexible 레이아웃

[08]
웹표준 실무 스킬

웹 접근성 기초와 원칙
사이트 규모별 CSS구조 설계
실무에서의 업무 셋팅

강사에
관하여

정을수

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

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)

강의
뒷 이야기

이런 시간이 되었어요

"안녕하세요 선생님. 저 맨 앞에서 들었던 학생이에요. 개념이 제대로 잡히는 것 같아서 너무 만족스러워요.
특히 플롯 개념을 잘 알게 되어서 기뻐요 ^^ 항상 좋은 수업 전달해 주셔서 감사합니다."

"마냥 어려운 외계어로만 보이는 코딩이어서 엄두도 못내던 차에, 강사님이 디자이너 출신이시면서 설명을
매우 쉽게 해 주신다는 추천을 받고 강의를 듣게 되었습니다.
추천받은 대로 한 달 동안 배운 강의 내용이 알차게 머리 속에 정리되었어요.
감사하구요! 요즘 주변 디자인 전공 친구들에게도 추천중입니다 호호~"

"정을수 강사님, 이 어려운 HTML을 공부할 수 있다는 맘을 먹게 된 것은 순전히 선생님 강의가 있어서 입니다. ^^
지금도 알쏭달쏭 하지만 계속 공부하여 손에 익는 그날까지 해보려구요. "

"유재용 실장님 소개로 수강을 듣게 되었습니다. 웹표준, HTML, CSS … 막연하게 생각하던 개념을 쉽고 재밌게
가르쳐 주셔서 듣는 내내 집중하게 되었구요. 디자인만 오래 하다가 새로운 분야에 첫 발을 잘 내딘 것 같아서 좋구요~
앞으로 궁금한 사항이나 질문들 지속적으로 커뮤니케이션이 되었으면 좋겠습니다."

"기초부터 차근차근 듣다보니 이해도 잘 되고 유익한 강의였습니다.
^_^ 강의 하시느라 수고 많으셨구요 추운데 감기 조심하세용~ 감사합니다 ^^"

"알기 쉽게 설명해 주셔서 그동안 궁금했던 부분들이 싹~ 해결되는 느낌이었어요.
실무에도 많은 도움이 되고 있어요. 기회가 된다면 한번 더 듣고 싶네요. ^^"

"아직까지 많이 부족하지만 웹표준의 개념이 자리 잡히게 되서 너무나 좋았습니다.
구조나 여러 방면에서 아직 공부해야하고 생각할 것들이 많지만 열심히 노력해서 가르쳐 주신 부분들
잊지 않고 발전해 나가겠습니다. 그동안 수고하셨어요!!"

"웹표준 실전편이라 어려워 혹시라도 수업에 따라가지 못할까봐 걱정도 되었지만 강사님이 하나하나 자세히
알려주셔서 웹표준 공부에 큰 도움이 되었고 자신감도 붙은 것 같습니다. 수강생 한명 한면의 눈높이에 맞춘 강의라
너무 재미있게 배울 수 있었습니다. 지난 3개월동안 수고 많으셨고 감사합니다. ^_^"

"봄아카데미에서는 매킨토시를 사용하는 새로운 경험을 할 수 있어서 좋았습니다.
정을수 강사님이 실무에서 해온 노하우를 잘 설명해주시고 모르는 부분들은 이해하기 쉽게 알려주셔서 현업에서
사용하기에 너무 좋은 것 같습니다."

"수강생들이 이렇게 하면 어떨까요 할때 "그것도 좋은 생각이네요" 하면서 한 방향의 일방적인 수업이 아니라
서로 의견을 주고 받을 수 있는 수업이라서 학생들에게 생각할 수 있는 기회들을 주고 적용하게 되는 수업입니다."

질문 있어요

더 궁금한게 있어요.

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

A. 본 과정의 수강생은 대부분이 비전공자이며, 기초부터 차근차근 눈높이에 맞춰 강의를 진행합니다.
웹퍼블리셔 과정의 특성상 논리적인 사고와 문제 해결 능력을 필요하지만 개인의 열정과 노력이 있다면
수업을 따라가시는 데 무리가 없을 것입니다.

Q. 본 강의를 듣기 위해 먼저 배워야 할 내용이 있나요?

A. 필수 선행 과정은 없으나, HTML태그, CSS 속성의 기초에 대해 어느 정도 공부를 하고 오시면
수업을 이해하고 사이트를 만드는 데 도움이 됩니다.

Q. 본 과정만으로 웹퍼블리셔가 될 수 있을까요?

A. 좋은 웹퍼블리셔가 되는 것은 좀더 장기적으로 보는 것이 좋습니다. 본 수업에서 웹퍼블리셔로서의 기본 원리와
기술 구현에 대한 깊은 이해를 바탕으로, 열정을 가지고 반복 훈련하신다면 수업 후에 웹퍼블리셔로
좋은 시작을 하실 수 있습니다.

Q. 강의 후에 과제는 어는 정도 내 주시나요?

A. 강의시간에 배운내용에 대한 복습을 위하여 과제로 내주고 있으며,
다양한 실무 과제 부여 후 개별 피드백을 제공합니다.

Q. 주 2~3회 강의로 충분한 교육을 받을 수 있을까요?

A. 수업에서 핵심 개념과 지식을 배우고 실습을 하지만, 수강시간 이외에는 본인의 의지를 가지고
실무 능력 향상을 위한 반복 훈련을 하시는 것으로 생각하시는 것이 바람직 합니다.

Q. 지금 직장에서 일을 병행하면서도 수강이 가능할까요?

A. 일과 병행하여 수업을 들으시는 수강생 분들이 많습니다. 수업시간에 집중하고, 복습은 시간이 나는 대로
꾸준히 하고, 오히려 배움의 내용을 하시는 업무에 바로 연결해 가시면
더 실제적이고 좋은 성장과 결과를 얻을 실 수 있을 것입니다.

Q. 따로 개인별 준비물이 필요한가요?

A. 강의실에는 실습을 위한 iMac PC가 개인별로 세팅되어 있고, 웹퍼블리셔 과정 진행에 필요한
텍스트 에디터(Sublime Text), 포토샵 프로그램이 설치되어 있습니다.
개인별로 간단한 필기도구만 준비해오시면 됩니다.

교육기간 교육시간 강 사 모집인원 수 강 료	\| 2018년 06월 09일 ~ 07월 14일(총 6회) \| 주1일(토) 09:30~13:30 \| 정을수 \| 20명 \| 237600 원
할인혜택	\| 국비지원