강의계획서 학습과정명구분교재명저자명출판사출판연도비고 웹디자인주교재웹디자인이론과실습강은정한빛아카데미 09 학습목표 웹디자인을처음시작하며기초부터차근차근배우고자하는학생들을위해이론과실습, 심화를병행하여학습할수있도록구성하였다. 다양한이론적배경을익히고, 이를각장별실습을통해적용할수있도록하여실무능력을향상시킨다. 웹디자인은눈에보이지않는웹이라는특수한환경을함께고려해서작업하기때문에디자인제작에필요한여러요소들, 배너를비롯하여메인그래픽이미지, 타이틀그래픽, 카드 UI 등실용적인예제들을하나하나만들어보며직접웹페이지를제작할수있는능력을배양한다. 학점 학점 정원 0명. 학기 : 월 ~ 6월 (5주). 겨울계절학기 : 월 ~ 월 (8주) 수업기간. 여름계절학기 : 7월 ~ 8월 (8주) ( 학사일정참고 ). 학기 : 9월 ~ 월 (5주) 주당시수 / 총시수 시간 / 60시간 교 강사명 백금란등 5명 수강료 55,000원 성적평가방법 ( 평가요소 ) 중간고사 기말고사 과제물 출결 기타 합계 비고 0% 0% 0% 0% 0% 00% 기타- 수시시험 학습과정명 웹디자인 주차별수업 ( 강의 실험 실습등 ) 내용 주 별 차시 주차별수업 ( 강의 실험 실습등 ) 내용 과제및기타참고사항 ) 강의주제 : 웹디자인의기초 웹디자인수업의목표에대해이해하기 웹디자인의이해와기능을알아보기 웹디자인이발전되어온역사소개하기 웹디자인을하기위해필요한여러가지요소에대하여소개하 기 웹디자인의개발프로세스이해하기 ) 강의세부내용 ( 이론 ): 웹디자인수업소개와웹디자인의개념과 목적을학습한다. 웹디자인의기능과초창기웹사이트부터반응 형웹디자인의출현까지의역사를살펴보고웹디자이너가갖춰 야할요소와웹디자이너의역할을통해웹디자인의필요한요 소를알아본다. 마지막으로웹사이트를제작하기위해단계별로 알아보며웹디자인개발을위한프로세스를이해한다. 강의형식및방법 : 강의및질의응답, 토론 - -
토론 : 수업내용과관련된내용을토론주제로제시 ) 강의주제 : 웹디자인의요소 웹을디자인할때필수로고려해야할요소들에대해소개하기 웹디자인을개발할때적용되는디자인의원리이해하기 ) 강의세부내용 ( 실습 ): 웹디자인의요소로정보디자인과기술디자인, 시각디자인요소에대하여알아보고웹디자인에적용되는원리인가시성, 그룹핑, 그리드시스템, 강조성, 일관성에대하여학습하여웹디자인의요소들을분석한다. ) 강의주제 : 웹그리드시스템 웹디자인에서그리드시스템에대한이해와그리드시스템의종류소개하기 그리드시스템의생성을돕는도구와그리드시스템에영상을주는요소들에대하여이해하기 ) 강의세부내용 ( 이론 ): 그리드시스템의개념과그리드가중요한이유, 그리드의주요용어, 웹에서의그리드시스템을알아보고그리드시스템의종류로칼럼그리드, 계층그리드, 박스, 리스트형그리드에대하여학습한다. 그리드생성을돕는웹사이트와포토샵플러그인의사용방법을이해하고그리드시스템에영향을주는요소들을살펴본다. ) 강의주제 : 웹그리드시스템 다양한그리드시스템을적용한여러웹사이트를분석하기 컬러로구분되어있는레이아웃을알아보고이를직접만들기 ) 강의세부내용 ( 실습 ): 그리드시스템을적용한웹사이트를분석해보고컬러로구분된레이아웃을직접만들어보면서그리드시스템에대하여이해한다. ) 강의주제 : 웹디자인레이아웃 레이아웃에대한기초를이해하기 사이트를제작하기위해기본적인웹페이지의구성소개하기 전형적인페이지의레이아웃에대하여이해하기 ) 강의세부내용 ( 이론 ): 레이아웃의기본개념과목적을이해하고기본웹페이지의구성을알아보기위해웹페이지의시각적계층구조와웹디자인레이아웃의화면정렬, 레이아웃영역, 레이아웃의영역별구분에대하여학습한다. 마지막으로전형적인페이지레이아웃의개념과설계방법에대하여학습한다. 의및실습 - -
질의응답 5 ) 강의주제 : 웹디자인레이아웃 웹사이트의메인페이지와서브페이지에대한레이아웃영역을구분하여레이아웃을이해하기 ) 강의세부내용 ( 실습 ): 레이아웃의영역구분에대하여알아보고웹사이트에서메인페이지와서브페이지각각의페이지에서의레이아웃영역구분을실습을통해직접구현해본다. ) 강의주제 : 웹컬러시스템 웹사이트제작시사이트를디자인하기위한컬러를이해하기 컬러선택을돕는웹디자인의도구를소개하기 웹사이트의컬러를계획하기 ) 강의세부내용 ( 이론 ): 웹디자인의컬러시스템을이해하기위하여컬러의역할과종류, 웹컬러코드에대하여이해하고컬러선택을돕는도구로 colorfavs, 어도비컬러cc, colorhunt, colors, colorcrush를소개한다. 그후웹에서컬러배색, 채도, 컬러별특징을통해컬러계획을학습한다. ) 강의주제 : 웹컬러시스템 컬러콘셉트에대한웹컬러시스템의차트를정리하기 ) 강의세부내용 ( 실습 ): 웹디자인에서의컬러콘셉트에대한차트를정리해보고예제를직접구현해보면서컬러콘셉트에하여이해하고분석한다. ) 강의주제 : 웹타이포그래피 웹사이트의타이포그래피에대하여이해하기 타이포그래피의주요용어소개 웹사이트디자인시사용되는폰트사용에대한방법이해하기 ) 강의세부내용 ( 이론 ): 웹페이지에서쓰는타이포그래피를알아보고자주쓰이는세리프체와산세리프체의종류들에대하여살펴본뒤서체를선택하는기준을이해한다. 타이포그래피작업을위해주요용어를알아보고웹폰트를적용하고사용하는방법을익힌다. 마지막으로타이포그래피를돕는도구에대하여알아보면서실제웹페이지에서타이포그래피를사용할수있도록학습한다. ) 강의주제 : 웹타이포그래피 - -
웹타이포그래픽의그래픽글자와기본글자작업을통해타이포 그래피학습하기 ) 강의세부내용 ( 실습 ): 그래픽의대해서기초와개념을익히고그래 픽글자와기본글자에대하여예제를통해학습한다. 이후직접 새로운그래픽글자를작업하여웹타이포그래피의사용방법을익힌다. ) 강의주제 : 웹이미지보정하기 웹사이트에디자인되는이미지보정에대해이해하기 ) 강의세부내용 ( 이론 ): 웹디자인의요소를만들기위한방법에대 하여알아보고포토샵에서이미지를보정하는방법과사례를학습 하여웹이미지를보정하는방법을이해한다. 강의형식및방법 : 강의및질의응답, 토론 토론 : 수업내용과관련된내용을토론주제로제시 ) 강의주제 : 웹이미지보정하기 6 웹이미지보정방법으로배경을흰색으로보정하기, 청량한느낌으로보정하기, 모노톤으로보정하기, 중심인물이나사물을강조하 기, 역동적으로보정하기에대하여보정방법소개하기 ) 강의세부내용 ( 실습 ): 웹이미지보정방법으로배경을흰색으로 보정하기, 청량한느낌으로보정하기, 모노톤으로보정하기, 중심 인물이나사물을강조하기, 역동적으로보정하기에대하여실습예제를통해각각을적용해보면서웹이미지를자유롭게보정하 는방법을익힌다. ) 강의주제 : 배너제작 웹사이트의배너를제작하기위해배너소개와배너이해하기 7 ) 강의세부내용 ( 이론 ): 웹디자인에서배너를제작하기위해배너가무엇인지기본개념을알아보고배너의종류와크기에대하여이해한다. 마지막으로배너의디자인스타일을살펴보면서배너디자인방법에대하여학습한다. ) 강의주제 : 배너제작 웹사이트의배너를제작하기위해배경을단순화한배너와배경에필터를적용한배너를직접제작하여배너이해하기 ) 강의세부내용 ( 실습 ): 웹디자인에서배너를사용하는방법에대하 차과제 (5점) : ~8장까지의실습보고서, 실습프로젝트 -웹사이트의 ( 레이아웃구성과웹타이포그래피, 보정된이미지를포함한 ) 메인페이지제작하기 (9주차제출, 기간내미제출시감점 ) 여살펴보고배경을단순화한배너를제작해보고배경에필터를 적용한배너를제작해본다. 마지막으로직접새로운배너를제작해보면서배너사용방법을익힌다. - -
8 9 0 중간고사 ) 강의주제 : 메인그래픽이미지제작 메인그래픽이미지를제작하기위해웹사이트의메인그래픽이미지에대한이해하고메인그래픽이미지를직접제작하기 활용도가높은배경효과를통해메인그래픽제작하기 ) 강의세부내용 ( 이론 ): 웹에서말하는스타일과메인그래픽이미지의스타일을알아보고메인그래픽이미지를제작하는방법을통해메인그래픽이미지를이해하고이를통해실제메인그래픽이미지를제작해보면서활용도가높은배경효과를제작하는방법에대하여학습한다. ) 강의주제 : 타이틀그래픽제작 웹사이트의타이틀그래픽을제작하기위한타이틀을이해하기 웹페이지중서브페이지의타이틀그래픽구현하기 ) 강의세부내용 ( 실습 ): 타이틀의기본개념과타이틀분류방법, 타이틀그래픽스타일에대하여알아보고가이드라인을활용하여타이틀을제작하는방법을학습한다. 마지막으로일관성있는서브페이지의타이틀그래픽을제작하는방법을예제를통해구현한다. ) 강의주제 : 카드 UI 제작 웹사이트의 UX 개선을위한카드 UI의이해와카드 UI 제작과정에대하여학습하기 ) 강의세부내용 ( 이론 ): 카드 UI의구성과좋은카드 UI 콘텐츠, 카드 UI 디자인스타일을통해카드 UI를이해하고카드 UI의제작과정을타깃설정부터콘텐츠정의, 제목설정, 이미지선택, 문장입력, 디자인통일의순서대로알아본다. ) 강의주제 : 카드 UI 제작 실제웹사이트에사용될카드 UI를직접제작해보기 ) 강의세부내용 ( 실습 ): 실제웹디자인의기본요소인카드 UI를제작하는과정을학습하고예제를통해직접제작해봄으로카드 UI 에대하여이해한다. ) 강의주제 : 디자인콘셉트 - 5 -
웹사이트의디자인콘셉트를알아보기위해디자인리서치진행하기 디자인콘셉트를정의하여디자인에대하여전반적으로이해하기 ) 강의세부내용 ( 이론 ): 웹디자인을제작하기위해시각적디자인스타일이나감성적표현스타일에대하여알아보면서여러디자인을리서치한다. 그후디자인콘셉트의개념과디자인콘셉트를정의하는방법에대하여학습한다. ) 강의주제 : 디자인콘셉트 웹사이트의디자인콘셉트를정의하기 ) 강의세부내용 ( 실습 ): 웹디자인을제작하기위해디자인콘셉트를정의하는휴대폰프로모션웹사이트예제를통해디자인콘셉트를이해하고정리한다. ) 강의주제 : 플랫디자인 웹사이트의플랫디자인개념에대하여소개하고이해하기 플랫디자인에적합한디자인스타일에대하여이해하기 ) 강의세부내용 ( 이론 ): 플랫디자인을소개하고스큐어모피즘, 플랫디자인, 머티리얼디자인을통해플랫디자인의장점과특징을알아본다. 플랫디자인에적합한면분할레이아웃디자인과메트로디자인, 카드디자인에대하여학습한다. ) 강의주제 : 플랫디자인 웹사이트의플랫디자인을제작하기위해면분할플랫디자인소개와구현하기 ) 강의세부내용 ( 실습 ): 실제로예제를통해면분할플랫디자인의제작과정을이해해보고새로운아이디어를가지고플랫디자인을각자제작해본다. ) 강의주제 : 반응형웹사이트디자인 웹사이트중반응형웹사이트의디자인을이해하고반응형웹디자인의제작사례를소개하기 ) 강의세부내용 ( 이론 ): 반응형웹의개념과반응형웹의특징과구성을알아보고반응형웹디자인의패턴을이해한다. 그후반응형웹디자인의실제제작사례를살펴보고제작과정을통해반응형웹디자인을분석한다. - 6 - 수시시험 (0 점 ) - 쪽지시험실시 -
) 강의주제 : 반응형웹사이트디자인 실제반응형웹디자인을제작하여반응형웹사이트를이해하기 ) 강의세부내용 ( 실습 ): 예제를통해반응형웹디자인을제작해보고스스로디자인한반응형웹디자인을제작해보며반응형웹디자인에대하여학습한다. ) 강의주제 : 웹사이트제작을위한 HTML 기초 웹사이트제작을위해 HTML 기초와 HTML 태그의구성알아보 기 ) 강의세부내용 ( 이론 ): 웹사이트제작을위해 HTML 의개념과현 재사용하는 HTML5 의특징, HTML 의기본구성을통해 HTML 태 그의구성을이해한다. 강의형식및방법 : 강의및질의응답, 토론 토론 : 수업내용과관련된내용을토론주제로제시 ) 강의주제 : 웹사이트제작을위한 HTML 기초 웹사이트를제작하기위하여포토샵을사용하여 HTML 을구현하 기 ) 강의세부내용 ( 실습 ): 실제웹페이지를제작하기위해포토샵을 이용하여 HTML 을구현해본다. 마지막으로스스로디자인한웹페 이지를 HTML 을통해제작해보면서웹디자인을이해한다., 총정리 5 기말고사 강의계획서주차별내용은교 강사에따라변동될수있습니다. 차과제 (5점) : 9~5장까지의실습보고서, 실습프로젝트 -반응형웹사이트의메인페이지를직접디자인한배너와메인그래픽이미지, 카드 UI를포함하여제작하기 (5주차제출, 기간내미제출시감점 ) - 7 -