반응형 웹 디자인: 멀티 디바이스 웹 최적화를 위한

 

 

 

멀티 디바이스 웹 최적화를 위한

 

 

반응형 웹 디자인

 

 

저자 야마자키 다이스케

역자 김대희

 

출간예정일 2013년 8월 21일 (수)

정가 24,000원

페이지 296

판형 175 * 230

ISBN 978-89-94774-44-2 (93000)

 

키워드 HTML5, CSS3, 웹 최적화, 웹 표준, JavaScript, WordPress, 웹 퍼블리싱

원서정보 レスポンシブWebデザイン

 

관련분류

- 웹기획/디자인 > 웹디자인

- 웹개발 > HTML/CSS

- 웹/컴퓨터/쇼핑몰/게임 > 홈페이지/블로그 > HTML/CSS

 

소스코드 다운로드

 

http://bjpublic.webhard.co.kr

ID: webhard

PASS: webhard

폴더명: 반응형 웹 디자인(소스코드)

 

도서구입

[YES24]  [인터파크도서] 

 

 

책 소개

 

반응형 웹 디자인이란?

 

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

 

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

 

- 각 디바이스에 최적화된 페이지를 1개의 HTML로 구현함.

- 화면 사이즈를 표준으로 하여 사이트의 전환을 실행함.

 

 

멀티 디바이스 대응이란?

 

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

 

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

 

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

 

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

 

 

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

 

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

 

- 페이지 로딩에 시간이 소요됨

- 페이지 디자인이 크게 작성되어 있어 조회하기 어려움

- 비대응 플러그인이 존재함

 

 

독자대상

초중급

 

 

 

저자소개

 

야마자키 다이스케

 

- 애플리케이션 크리에이터 팀: Venezia-Works 대표

- 주식회사 우오즈 시스템: Web Professional Fellow

- 디지털 헐리우드 강사 (온라인 스쿨: 웹 애플리케이션 강좌, PHP 강좌, 시부야교: 애플리케이션 크리에이터 전공 등 다수)

- @IT [HTML5 어플리케이션 만들자] 기사 연재, 닛케이 소프트웨어, 닛케이 BP,

- Software Design, IT Pro, WebCreators 등의 Web 업계 관련 잡지에서의 정보

- 전달부터 Web 기술자 인재 육성, JointApps 어소시에이션 멤버 참가 등 다방면으로 활동

- impress.js를 간단하게 조작 가능한 [Impress.js design] 등을 오픈 소스로 공개

 

 

 

역자소개

 

김대희

 

2003년 강남대학교 컴퓨터 공학 졸업

2006년 ~ 2009년 ㈱ラック 개발부 대리 근무

2010년 ~ 2011년 CSLAC 개발부 과장 근무

2011년 ~ ㈜인포섹 관제사업본부 차장 근무 중

 

 

 

목차

 

 

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

 

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 반응형 웹 디자인 지원 도구

 

 

 

출판사 리뷰

 

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

 

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