수고하셨습니다. 지금까지 9주 동안 html의 기초와 웹사이트를 퍼블리싱하는 법을 살펴보았습니다. 항상 기초가 탄탄해야 이후에 더욱 심도있는 내용을 이해할 수 있다는 점을 숙지하시기 바랍니다. 이제 남은 6주간의 수업에서 사이트를 더욱 돋보이게 해 줄 몇가지 내용들을 더 살펴볼 것입니다.

5/9 반응형 디자인(Responsive Design)

디지털 디자인이 인쇄디자인과 가지는 가장 큰 차이점 두 가지는 소리, 영상과 같은 멀티미디어를 활용할 수 있다는 점이고, 다른 하나는 사용자의 디바이스에 최적화 된 서로다른 레이아웃을 구현할 수 있다는 점입니다. 후자를 통해서 80%이상을 차지하는 모바일 사용자를 위한 전용 레이아웃을 표현할 수 있고 이를 반응형 디자인(Responsive Desing)이라고 합니다. 몇 가지 태그를 추가하고 800px와 같이 절대값으로 표현된 박스의 폭을 100%와 같이 상대적인 수치로 변경하는 것을 통해서 모바일에 최적화 된 화면을 표현할 수 있습니다.

5/16 모바일 메뉴 만들기

메뉴의 개수가 적다면 데스크탑과 마찬가지로 모든 메뉴를 노출할 수 있겠지만, 작은 모바일 화면에서는 일반적으로 메뉴를 감추고, 중요한 메뉴는 메인페이지에서 커다른 이미지 썸네일로 빠르게 접근할 수 있도록 사용자의 맥락을 고려하는 것이 일반적인 모바일 디자인입니다. <nav>태그 속에 들어있는 메뉴들을 반응형 디자인을 통해 모바일에서 보았을 때는 메뉴버튼을 누르면 튀어나오도록 하는 가장 기본적인 모바일 메뉴를 만들어봅시다.

5/23 튀어나오는 메뉴(애니메이션)

플래시 없이도 CSS를 사용해서 간단한 애니메이션을 구현할 수 있습니다! 웹 퍼블리싱에서의 애니메이션은 화려한 시각적효과를 주기 보다는 사용자의 경험을 끊지 않고 자연스럽게 연결하기 위한 수단입니다. 물론, 잘 사용한다면 충분히 화려한 효과도 줄 수 있겠지요. transition과 animation을 검색해서 내용을 살펴보세요. 그다지 어렵지 않습니다.

5/30 라이브러리 사용해보기

스크롤에 반응하는 애니메이션이나, 첫화면에서 이미지 슬라이더와 같이 웹을 훨씬 더 강력하게 만들어주는 수백가지의 플러그인이 있습니다. 자바스크립트를 사용하는 방법을 몰라도 라이브러리를 사용해서 여러분의 웹사이트를 훨씬 더 풍부하게 만들 수 있지요. 슬라이더, 지도, 휴대폰 센서를 활용할 수 있게 만드는 라이브러리를 적용해봅시다!

6/5 사이트의 완성

2주간 남은 기간동안 사이트를 완성해봅시다. 푸터에는 다양한 링크를 삽입해서 사용자들이 한 페이지를 다 읽고 나서 다른 페이지로 갈 수 있는 여지를 마련하고, 같은 수업의 다른 좋은 사이트들을 메인 하단에 썸네일로 소개해줄 수도 있습니다. 사람들이 얼마나 들어왔는지 Google Analytics코드를 삽입할수도 있구요. 6/12 완성된 사이트를 다같이 리뷰합시다.