추가 적립 안내

『반응형 웹 디자인』은 반응형 웹 디자인을 소개하는 책이다. 이것은 화면 사이즈가 다른 각 디바이스(PC, 태블릿, 스마트폰)에 대하여 최적화된 사이트를 구현하기 위한 제작 방법이다. 각 디바이스에 최적화된 페이지를 1개의 HTML로 구현하고, 화면 사이즈를 표준으로 하여 사이트의 전환을 실행하는 것을 알려준다.

반응형 웹 디자인이란?

화면 사이즈가 다른 각 디바이스(PC, 태블릿, 스마트폰)에 대하여 최적화된 사이트를 구현하기 위한 제작 방법입니다. 미국의 디자이너인 Ethan Marcotte가 고안하여 2010년 5월에 발표한 것이 그 시작입니다.

반응형 웹 디자인의 최대 특징은 다음의 두 가지입니다.

- 각 디바이스에 최적화된 페이지를 1개의 HTML로 구현함.
- 화면 사이즈를 표준으로 하여 사이트의 전환을 실행함.

멀티 디바이스 대응이란?

웹 사이트의 멀티 디바이스 대응을 한마디로 말하면 다음과 같이 정의할 수 있습니다.

“여러 디바이스(기기)에서 정확하게 표시, 이용 가능한 사이트를 제작하는 것”

즉, 사용자가 사용하고 있는 디바이스마다 웹 사이트의 표시 방법을 최적화하는 것이 멀티 디바이스 대응이라고 할 수 있습니다. 현재는 PC뿐만이 아니라 스마트폰, 태블릿, 게임기, 텔레비전 등 여러 디바이스에 브라우저가 탑재되어 있어, 이러한 다양한 디바이스로부터 웹 사이트나 서비스(Facebook이나 Twitter 등)에 접근하는 유저가 급증하고 있습니다. 그 때문에, 웹 사이트 제공자는 각 디바이스에서 정확히 표현하고, 이용할 수 있는 사이트를 제작하는 것이 필요합니다.

출판사 리뷰

이 책은 스마트폰, 태블릿, PC 등의 갖가지 디바이스에 대응하는 사이트를 원 소스(1개의 HTML 파일)에서 구현하는 제작 방법인 “반응형 웹 디자인”의 설명서입니다. 이 책에서는 “반응형 web이란 어떠한 제작 방법인가?” “어떻게 구현할 것인가?”라는 기본적인 것부터 샘플 사이트의 제작을 통한 구체적인 코딩 방법에 이르기까지, 반응형 웹 디자인에 관한 여러 내용을 상세하게 설명하고 있습니다.

디자인 제작을 위한 [헤더], [글로벌 내비게이션], [푸터] 등의 페이지를 구성하는 주요한 요소나 [상품 일람 페이지]나 [문의 게시판] 등 주요한 페이지마다 실질적 예와 샘플을 가지고 디자인 시의 사고방식이나 코딩 방법을 친절하게 설명하고 있습니다. 또한 이 책 후반부에서는 제작한 사이트를 테스트하는 방법에 대하여 상세하게 설명하고 있습니다. 반응형 웹 디자인 사이트는 그 특징상 이제까지의 PC 사이트와는 다른 시점의 테스트가 필요하며 독자적인 노하우가 요구됩니다. 이 책에서는 이러한 것들도 친절하게 설명하므로 PC 사이트 제작 경험자들에게도 읽을 만할 가치가 있는 책이라고 생각합니다. 또한 이 책의 마지막에는 인기가 높은 CMS(contents management system)인 [WordPress]로 반응형 웹 디자인을 구축
하는 방법에 대해서도 간단히 언급하고 있습니다.

“멀티 디바이스 대응”이라는 말은 수년 전에는 그다지 통용되는 말이 아니었지만, 최근 급속히 인식되고 중요시되고 있습니다.

현재의 웹 사이트로는 충분하지 않은가?

스마트폰이나 태블릿에는 통상 풀 브라우저가 탑재되어 있기 때문에, 일부의 기능을 제외하고 거의 모든 웹 사이트를 조회할 수 있습니다. 하지만 현재의 웹 사이트의 대부분은 PC에서의 조회를 전제로 제작되고 있기 때문에 주로 아래의 문제 및 과제가 발생합니다.

- 페이지 로딩에 시간이 소요됨
- 페이지 디자인이 크게 작성되어 있어 조회하기 어려움
- 비대응 플러그인이 존재함

독자대상
초중급

예제코드 다운로드
http://www.bjpublic.co.kr > 도서자료 > 소스코드 다운로드

서문. 멀티 디바이스 대응: 사이트의 필요성과 과제

01. 지금 요구되고 있는 웹 사이트
- 멀티 디바이스 대응이란
- 멀티 디바이스 대응의 필요성
- 현재의 웹 사이트로는 충분하지 않은가

02. 멀티 디바이스 대응 방법
- 여러 가지 멀티 디바이스 대응
- 기존 방법의 과제
- 사용자 에이전트에 따른 자동 전환 방법의 장점
---- COLUMN 다양화된 스마트폰 관련 환경

제1장. 반응형 웹 디자인의 기본

01. 반응형 웹 디자인이란
- 반응형 웹 디자인을 구성하는 기술
- 반응형 웹 디자인의 장점
- 반응형 웹 디자인의 단점
- 반응형 웹 디자인의 구축 사례
---- COLUMN. 반응형 웹 디자인 사이트를 모아놓은 Media Queries

02. 미디어 쿼리 사용 방법
- 미디어 쿼리의 기본
- 미디어 쿼리를 사용
- 스타일의 작성 순서

03. 플루이드 그리드의 지정
- 플루이드 그리드의 기본
- 고정 레이아웃에 따른 페이지 제작
- 고정 레이아웃에서 가변 레이아웃으로 변환
- 플루이드 그리드와 미디어 쿼리의 조합

04. 플루이드 이미지의 지정

제2장. 사이트 제작 워크 플로우와 사이트 설계의 기본

01. 반응형 웹 디자인의 제작 워크 플로우
- 종래의 제작 워크 플로우와의 차이
---- COLUMN. 와이어 프레임 작성 도구
- 사전 디자인은 필요함
- 올바른 워크 플로우를 위하여
---- COLUMN. Adobe Edge Reflow

02. 터치 디바이스용의 디자인
- 터치 디바이스의 특징
---- COLUMN. iOS 휴먼 인터페이스 가이드라인

03. 대상 브라우저와 대상 디바이스 결정
- 대응 정도의 수준 분배
- 대상 OS
- 대상 브라우저
---- COLUMN. 구 버전의 IE 대응이 중요
- 대상 디바이스

04. Mobile First
- 왜 Mobile First인가
- Mobile First의 예
---- COLUMN. 보다 깊은 Mobile First를 배우기 위한 사이트

제3장. HTML5 + CSS3의 기초 지식과 기본 코딩

01. HTML5 기초 지식
- HTML5란
- HTML5 요소, 속성
- HTML5에서 HTML 작성은 어떻게 바뀌는가
---- COLUMN. 애플리케이션이라는 측면에서 본 HTML5

02. CSS3 기초 지식
- CSS3에서 추가된 주요 속성
- HTML5 & CSS3의 지원상황 확인

03. HTML5 페이지 템플릿 작성
- DOCTYPE 선언과 문자 인코딩 설정
- viewport 설정
- 리셋 CSS 설정
---- COLUMN. 여러 리셋 CSS
- 구 버전 IE에 대응하기 위한 스크립트 로딩

04. CSS3 템플릿 작성
- 브레이크 포인트란
- 픽셀 밀도와 devicePixelRatio
---- COLUMN. 고해상도 디스플레이에서 이미지가 희미해지는 문제
- 브레이크 포인트의 결정 방법
---- COLUMN. 기존 사이트 브레이크 포인트를 조사하는 방법

제4장. 반응형 웹 사이트 제작 ①

01. 사이트 제작 시의 힌트와 실습 개요
- 4장과 5장의 구성
- 실습에서 제작하는 사이트 개요
- HTML 템플릿 작성
- CSS 템플릿 작성

02. 헤더 디자인 & 제작
- 헤더 코딩

03. 글로벌 내비게이션 디자인 & 제작
- 반응형 웹 디자인의 글로벌 내비게이션
- 글로벌 내비게이션 코딩

04. 콘텐츠 영역 디자인 & 제작
- 콘텐츠 영역의 단 구성
- 단 구성 전환 방법
- 콘텐츠 영역 코딩

05. 푸터 디자인 & 제작
- 푸터 코딩
---- COLUMN. 가변 레이아웃 + 고정 레이아웃

제5장. 반응형 웹 사이트 제작 ②

01. 상품 일람 페이지 디자인 & 제작
- 상품 일람 페이지 코딩

02. 입력 폼 디자인 & 제작
- 입력 폼 코딩

03. 이미지 슬라이드 쇼 도입
---- COLUMN. 템플릿 제네레이터 Responsify

제6장. 반응형 웹 사이트 테스트

01. 테스트 방법의 개요
- 주요 테스트 방법
- 실제 기기 테스트 방법
---- COLUMN. Windows 7의 IE10

02. 시뮬레이터와 에뮬레이터에 의한 사이트 테스트
- Chrome Developer Tools
- Coda 2
- IETester
- iOS 시뮬레이터
---- COLUMN. iPhoney
- Android 에뮬레이터
---- COLUMN. 그 밖의 테스트 도구

제7장. WordPress를 이용한 구축 및 편리한 도구 & 플러그 인

01. Word Press의 템플릿
- 미디어 쿼리 확인과 변경
- viewport 확인과 변경

02. WordPress 테마의 이용
---- COLUMN. WordPress 테마를 소개하는 designer themes

03. 편리한 도구 & 플러그 인
- RESPONSIVE WEB DESIGN SKETCH SHEETS
- Responsivator
- VIEWPORT RESIZER
- Resizer (Chrome)
---- COLUMN. Firefox 반응형 웹 디자인 지원 도구