최근 웹 페이지에 접근할 수 있는 다양한 모바일 기기가 등장하면서 반응형 웹 디자인이 주목받기 시작했다. 이 책은 기존의 고정폭 기반 디자인을 어떻게 반응형 디자인으로 작성할 수 있는지에 대한 완벽한 가이드를 제공한다. 그리고 HTML5와 CSS3를 사용해 반응형 디자인 방법론을 한층 더 발전시킬 수 있는 방법을 제시한다. 아직까지 반응형 웹 디자인에 대해 다루는 자료가 많지 않은 국내 실정에서, 이 책은 프론트엔드 개발자와 디자이너에게 웹사이트를 어떻게 반응형 웹으로 제작할 수 있는지를 알려주는 좋은 지침서가 될 것이다.


[ 소개 ]

하나의 디자인으로 모든 환경에서 동작하는 웹 사이트 제작!

지금처럼 반응형 웹 디자인의 필요성이 크게 대두된 적이 없었다. 태블릿과 스마트폰 그리고 디지털 TV에 이르기까지 웹에 접근하는 데 사용되는 디바이스의 수가 크게 증가함에 따라, 다양한 스크린 크기와 이와 관련한 사용자 경험에 대해 많은 사항을 고려해야 한다. 반응형으로 제작된 웹 페이지는 현재의 디바이스뿐만 아니라 미래에 등장할 디바이스에도 디바이스에 최적화된 콘텐츠를 제공할 수 있다.

웹사이트가 모든 스크린 크기에서 아름답게 보일 수 있도록 ‘반응형 디자인’ 방법론으로 웹사이트를 디자인하는 방법을 배운다. 그리고 HTML5와 CSS3로 반응형 웹 디자인을 향상시킨다. 이 책은 프론트엔드 웹 개발자에게 미래가 될 새로운 기술과 기법을 이해하는 데 실질적인 도움을 줄 것이다.


[ 이 책에서 다루는 내용 ]

■ 웹 디자인에서 가장 인기 있는 주제인 반응형 웹 디자인의 정의와 이를 마스터해야 하는 이유
■ 간결하고 빠르며, 풍부한 의미를 지닌 HTML5의 작성 방법과 주요 기능
■ CSS3 미디어 쿼리를 사용해 미디어별로 다른 스타일을 적용하고 이를 디자인에 통합하는 방법
■ 웹 페이지와 미디어를 유동형으로 만드는 방법
■ 이미지 대신 CSS3로 배경색 그레이디언트와 텍스트 섀도, 박스 섀도를 만드는 방법
■ 모더나이저로 구형 브라우저의 단점을 수정하는 방법


[ 이 책의 대상 독자 ]

모바일용 웹사이트와 대형 디스플레이용 웹사이트를 따로 제작하고 있는가? 또는 ‘반응형 디자인’에 대해 들어봤지만 어떻게 HTML5와 CSS3를 반응형 디자인에 적용할 수 있는지 확신하지 못하고 있는가? 그렇다면 이 책은 경쟁자보다 먼저, 반응형 디자인으로 자신의 웹 페이지를 한 단계 발전시키는 데 필요한 모든 것을 제공해줄 것이다.

현재 HTML 4.01과 CSS 2.1로 고정폭 웹사이트를 제작하고 있는 웹 디자이너와 웹 개발자를 대상으로 하는 이 책은 HTML5와 CSS3로 어떻게 모든 스크린 크기에 적용 가능한 반응형 웹사이트를 제작할 수 있는지 설명한다.


[ 이 책의 구성 ]

1장 ‘HTML5와 CSS3, 반응형 웹 디자인 시작하기’에서는 다양한 예를 통해 반응형 웹 디자인을 정의한다. 또한 HTML5와 CSS3를 사용할 때의 장점을 설명한다.

2장 ‘미디어 쿼리: 다양한 뷰포트의 지원’에서는 미디어 퀴리가 무엇이고, 어떻게 작성하는지, 또한 디바이스의 성능에 따라 CSS 스타일을 어떻게 적용하는지 설명한다.

3장 ‘유동형 레이아웃 적용’에서는 유동형 레이아웃의 장점을 설명하고, 어떻게 현재의 고정폭 디자인을 쉽게 유동형 레이아웃으로 변환하는지, 그리고 CSS 프레임워크를 사용해 빠르게 반응형 디자인의 프로토타입을 만드는 방법을 보여준다.

4장 ‘반응형 디자인을 위한 HTML5’에서는 HTML5로 코딩할 때의 여러 가지 장점(간결한 코드, 시맨틱 요소, 오프라인 캐싱, 보조 기술 사용을 위한 WAI-ARIA)을 살펴본다.

5장 ‘CSS3: 선택자, 타이포그래피, 컬러 모드’에서는 원하는 요소를 쉽게 선택하고 변환할 수 있는 강력한 CSS3 선택자에 대해 설명한다. 또한 CSS3의 @font-face 규칙을 사용해 아름다운 웹 타이포그래피를 만드는 방법과, RGB(A), HSL(A) 같은 새로운 CSS3 컬러 모드에 대해서도 설명한다.

6장 ‘CSS3의 멋진 기능’에서는 어떻게 순수하게 CSS3만으로 텍스트 섀도와 박스 섀도 그리고 그레이디언트를 만드는지 보여준다. 또한 여러 개의 배경 이미지를 추가하는 방법과 폰트로 아이콘을 만드는 방법을 다룬다.

7장 ‘CSS3 트랜지션, 트랜스폼 그리고 애니메이션’에서는 다른 기술의 도움 없이 순수하게 CSS3만으로 화면상의 요소에 애니메이션 효과를 적용하고 트랜스폼하는 방법을 다룬다.

8장 ‘HTML5와 CSS3로 폼 정복’에서는 최신 스마트폰에서 데스크탑에 이르기까지 모든 브라우저에서 동작하는 크로스 브라우저 폼을 구현하는 방법을 보여준다.

9장 ‘크로스 브라우저 반응형 도전 과제 해결’에서는 구형 인터넷 익스플로러를 반응형으로 만드는 방법과 모바일 디바이스에서 긴 링크 목록을 메뉴로 변환해 제공하는 방법, 고화질 디스플레이용으로 별도의 콘텐츠를 제공하는 방법, 그리고 모더나이저를 사용해 조건부로 자원을 로드하는 방법에 대해 설명한다.

[ 저자 서문 ]

여러분의 웹사이트를 ‘모바일’ 버전으로 만들 필요가 있다고 생각한다면, 다시 한 번 생각해보기 바란다. 반응형 웹 디자인(responsive web design)으로 스마트폰부터 데스크탑에 이르는 모든 디바이스에 잘 어울리는 하나의 디자인을 제공할 수 있다. 반응형 디자인은 추가적인 노력 없이 모든 사용자의 스크린에 적용될 수 있으며, 현재뿐 아니라 미래의 디바이스에 이르기까지 최상의 사용자 경험을 제공할 것이다.

이 책은 기존의 고정폭 기반 디자인을 어떻게 반응형 디자인으로 작성할 수 있는지에 대한 완벽한 가이드를 제공한다. 그리고 반응형 디자인 방법론에, HTML5와 CSS3가 제공하는 가장 최신의 그리고 유용한 기술을 적용해 이전보다 훨씬 더 유지하기 쉽고 간결한 디자인을 만드는 방법을 제시한다. 또한 코드를 작성하고, 이미지와 파일을 배포하는 공통적인 베스트 프랙티스(모범 사례)도 설명한다.

HTML과 CSS만 알고 있다면, 지금 바로 반응형 웹 디자인을 작성할 수 있다.


[ 저자 소개 ]

벤 프레인 (Ben Frain)
프론트엔드 디자이너이자 개발자로서, 전 세계의 고객 및 디자인 기관과 프리랜서로 10년 넘게 일하고 있다. 또한 기술 기고가로 일하며 맥 플랫폼과 미래 기술, 웹사이트 디자인, 항공산업의 기술 시스템에 대한 다양한 출판물을 발간했다.
영국 샐퍼드대학교에서 미디어와 공연학을 전공했으며, TV 드라마의 무명 연기자로 일했다. 또한 잘 알려지지 않은(그의 말에 따르면) 네 편의 시나리오를 집필했으며, 아직도 그중 하나는 팔릴 것이라 믿고 있다. 일 외적으로는, 체력과 그의 아내가 허락하는 한 계속해서 실내축구를 즐기려고 한다.
홈페이지 www.benfrain.com과 트위터 twitter.com/benfrain에서 그를 만날 수 있다.


[ 옮긴이의 말 ]

최근 1, 2년 사이 웹 페이지에 접근할 수 있는 다양한 모바일 기기가 등장하면서 반응형 웹 디자인이 주목을 받기 시작했다. 반응형 웹 디자인이란 데스크탑, 태블릿, 모바일 등 사용자의 다양한 디바이스 환경에 따라 웹이 알아서 반응하도록 디자인하는 것이다. 기존에는 데스크탑용 웹사이트와 모바일용 웹사이트를 따로 제작해야 했지만 반응형 웹을 적용하면 하나의 디자인으로 다양한 크기의 디바이스에 모두 잘 어울리는 웹사이트를 제작할 수 있다. 또한 이로 인해 웹사이트의 운영과 유지보수 비용의 절감 효과를 기대할 수 있다.

아직까지 국내에는 반응형 웹 디자인을 다루는 자료가 많지 않다. 이 책은 반응형 웹 디자인에 관심이 있는 프론트엔드 개발자와 디자이너에게 반응형 웹 디자인이 무엇이고, 웹사이트를 어떻게 반응형 웹으로 제작할 수 있는지를 알려주는 좋은 지침서가 될 것이다.

지식을 갖고 있다는 것과 그것을 남에게 가르친다는 것은 별개의 이야기다. 마찬가지로 책의 내용을 이해하는 것과, 그것을 다른 사람에게 전달하기 위해 글로 표현하는 것에는 큰 차이가 있다. 처음 이 책의 번역을 맡기로 했을 때, 내가 이해한 내용을 단순히 우리말로 옮기면 된다고 쉽게 생각했었다. 그러나 한 장, 한 장 우리말로 옮겨가면서 단어 하나, 조사 하나의 차이가 내용을 얼마나 이해하기 쉽거나 어렵게 만들 수 있는지 깨달았고, 단어 하나를 선택하는 데도 많은 고민을 했다.

꽤 많은 노력을 기울였지만, 저자의 의도를 충분히 전달하지 못하거나 잘못 번역된 부분이 있을지도 모르겠다. 잘못된 부분이나 책의 내용과 관련한 어떠한 의견이든 보내주시면 소중히 받고 오류는 차후에 있을 증쇄 시에 반영하며 의견은 좋은 자료로서 참고하겠다.


[ 옮긴이 소개 ]

류영선
소프트웨어 엔지니어로서 오랫동안 웹 브라우저와 웹 서버를 개발했다. 그 경험을 바탕으로 현재는 W3C와 다양한 국제 표준화 단체에서 웹과 관련된 표준화 업무를 담당하고 있다. 최근에는 웹 기술을 PC에서 벗어나 모바일이나 DTV, 디지털 사이니지(Digital Signage), 자동차 등 다양한 디바이스에 접목하는 오픈 웹 플랫폼(Open Web Platform)에 관심을 갖고 관련 기술에 대한 연구를 진행하고 있다.

목차

• 1장 HTML5와 CSS3, 반응형 웹 디자인 시작하기
  • 왜 스마트폰이 중요한가?(구형 IE가 중요하지 않은 이유)
  • 반응형 디자인이 항상 올바른 선택인가?
  • 반응형 웹 디자인의 정의
  • 반응형 디자인이 전부인가?
  • 반응형 웹 디자인의 예
    • 뷰포트 테스트 툴
    • 영감을 주는 온라인 소스
  • HTML5가 왜 좋은가?
    • HTML5 코딩으로 시간 절약하기
    • 새로운 HTML5 시맨틱 태그 요소
  • 반응형 웹 디자인 그 이상을 가능하게 하는 CSS3
    • 결론: CSS3는 아무런 문제도 발생시키지 않는다
    • 어떻게 CSS3로 일상적인 디자인 문제를 해결할 수 있는가?
  • 이미지가 필요 없다
  • CSS3의 여타 기능
  • 지금 바로 HTML5와 CSS3를 사용할 수 있을까?
  • 반응형 웹 디자인이 마법의 해결책은 아니다
  • 고객에게 웹사이트가 모든 브라우저에서 동일하게 보이지 않는다는 사실을 가르치자
  • 정리
    
• 2장 미디어 쿼리: 다양한 뷰포트의 지원
  • 지금 바로 미디어 쿼리를 사용할 수 있다
  • 왜 반응형 디자인에 미디어 쿼리가 필요한가?
    • 미디어 쿼리 구문
    • 미디어 쿼리로 판단할 수 있는 사항
    • 미디어 쿼리로 디자인 변경
    • 반응형 디자인을 위해 미디어 쿼리를 사용하는 가장 좋은 방법
  • 첫 번째 반응형 디자인
    • 당황스럽겠지만, 우리의 디자인은 고정폭으로 되어 있다
    • 반응형 디자인: 이미지를 가능한 한 경제적으로 만들기
    • 작은 뷰포트에서의 콘텐츠 클리핑 문제
  • 최신 브라우저의 페이지 자동 크기 조정 기능 중단하기
  • 다양한 크기의 뷰포트를 지원하기 위한 고정 디자인
  • 반응형 디자인에서는 콘텐츠가 항상 먼저 와야 한다
  • 미디어 쿼리는 솔루션의 일부일 뿐이다
    • 유동형 레이아웃이 필요하다
  • 정리
    
• 3장 유동형 레이아웃 적용
  • 고정 레이아웃은 미래 경쟁력이 없다
  • 왜 비례형 레이아웃이 반응형 웹 디자인에 꼭 필요한가?
  • 고정 레이아웃을 비례형 레이아웃으로 수정
    • 기억해야 할 공식
    • 비례 요소를 위한 컨텍스트 설정
    • 항상 컨텍스트를 염두에 두자
  • 타이포그래피를 위해 픽셀보다는 ems를 사용
  • 유동형 이미지
    • 뷰포트에 맞게 이미지 크기 조절하기
    • 특정 이미지를 위한 특정 규칙
    • 유동형 이미지에 제동 장치 추가
    • 다양한 max-width 속성
  • 화면 크기에 따른 다양한 이미지 제공
    • 적응형 이미지 설정
  • 유동형 그리드와 미디어 쿼리를 함께 사용
  • CSS 그리드 시스템
    • 그리드 시스템으로 빠른 사이트 구축
  • 정리
    
• 4장 반응형 디자인을 위한 HTML5
  • HTML5의 어떤 부분을 지금 바로 사용할 수 있는가?
    • 대부분의 사이트를 HTML5로 작성할 수 있다
    • 폴리필과 심, 그리고 모더나이저
  • HTML5 페이지 작성 방법
    • HTML5의 경제성
    • HTML5 마크업으로의 합리적인 접근 방법
    • 강력한 < a > 태그
    • 더 이상 사용하지 않는 HTML 기능
  • HTML5의 새로운 시맨틱 요소
    • < section > 요소
    • < nav > 요소
    • < article > 요소
    • < aside > 요소
    • < hgroup > 요소
    • < header > 요소
    • < footer > 요소
    • < address > 요소
  • HTML5 구조적 요소의 실제 사용법
    • 사이트의 메인 콘텐츠는 어떤가?
  • HTML5 텍스트 레벨 시맨틱
    • < b > 요소
    • < em > 요소
    • < i > 요소
    • 마크업에 텍스트 레벨 시맨틱 적용하기
  • WAI-ARIA로 사이트에 웹 접근성 추가하기
    • ARIA의 랜드마크 역할
  • HTML5의 미디어 삽입
  • HTML5 방식으로 비디오와 오디오 추가하기
    • 대체 소스 파일 제공
    • 구형 브라우저를 위한 폴백 제공
    • 거의 동일하게 동작하는 오디오와 비디오 태그
  • 반응형 비디오
  • 오프라인 웹 애플리케이션
    • 오프라인 웹 애플리케이션 핵심 요약
    • 웹 페이지를 오프라인에서 동작하게 만들기
    • 매니페스트 파일 이해하기
    • 오프라인 매니페스트 파일에서 자동으로 페이지 로딩하기
    • 버전 주석
    • 오프라인으로 사이트 보기
    • 오프라인 웹 애플리케이션 문제 해결
  • 정리
    
• 5장 CSS3: 선택자, 타이포그래피, 컬러 모드
  • 프론트엔드 개발자가 CSS3로 할 수 있는 일
    • 인터넷 익스플로러 버전 6, 7, 8에서의 CSS3 지원
    • CSS3를 사용한 웹 페이지 설계와 개발
  • CSS 규칙 분석
  • 벤더 프리픽스의 사용법
  • 빠르고 유용한 CSS3 트릭
    • 반응형 디자인을 위한 CSS3 다중 열
    • 단어 넘김
  • 새로운 CSS3 선택자와 사용법
    • CSS3 속성 선택자
    • CSS3 구조 의사클래스
    • 의사엘리먼트 개정
  • 사용자 정의 웹 타이포그래피
    • @font-face CSS 규칙
    • @font-face로 웹 폰트 구현
  • @font-face 제목 문제 해결
    • 사용자 정의 @font-face 타이포그래피와 반응형 디자인
  • 새로운 CSS3의 컬러 포맷과 알파 투명도
    • RGB 컬러
    • HSL 컬러
    • IE6, IE7, IE8을 위한 폴백 컬러
    • 알파 채널
  • 정리
    
• 6장 CSS3의 멋진 기능
  • CSS3 텍스트 섀도
    • 16진수, HSL, RGB 색상
    • 픽셀 또는 em, rem
    • 텍스트 섀도 방지
    • 양각 텍스트 섀도 효과
    • 다중 텍스트 섀도
  • 박스 섀도
    • 인셋 섀도
    • 다중 섀도
  • 배경색 그레이디언트
    • 선형 배경색 그레이디언트
    • 원형 배경색 그레이디언트
    • 그레이디언트 반복
  • 배경색 그레이디언트 패턴
  • 반응형 디자인을 위한 CSS3 고려사항
  • CSS3 속성 함께 사용하기
  • 다중 배경 이미지
    • 배경 크기
    • 배경 위치
    • 배경 속성을 약식으로 사용하기
  • 그 외의 CSS3 기능
  • 반응형 디자인에 꼭 필요한 크기 조절이 가능한 아이콘
  • 정리
    
• 7장 CSS3 트랜지션, 트랜스폼 그리고 애니메이션
  • CSS3 트랜지션의 정의와 사용법
    • 트랜지션 속성
    • 반응형 웹사이트를 위한 재미있는 트랜지션 효과
  • CSS3 2D 트랜스폼
    • 트랜스폼할 수 있는 것
  • CSS3 3D 트랜스폼
    • 3D 효과 분석
    • 3D 트랜스폼은 아직 준비가 되어 있지 않다
  • CSS3 애니메이션
    • CSS3 트랜스폼과 애니메이션의 동시 적용
  • 정리
    
• 8장 HTML5와 CSS3로 폼 정복
  • HTML5 폼
    • HTML5 폼의 구성요소
    • 플레이스홀더
    • 필수
    • 오토포커스
    • 자동완성
    • 리스트와 데이터리스트 요소
    • HTML5 입력 형식
    • 날짜와 시간 입력
  • 비지원 브라우저를 위한 폴리필
  • CSS3로 HTML5 폼 스타일링하기
    • 폼에 특화된 CSS3 의사클래스 선택자
  • 정리
    
• 9장 크로스 브라우저 반응형 도전 과제 해결
  • 점진적인 향상과 우아한 성능 저하
    • 현실
  • 구형 인터넷 익스플로러를 수정할 것인가?
    • 통계
    • 개인적인 선택
  • 모더나이저: 프론트엔드 개발자의 만능칼
    • 모더나이저로 스타일 문제 해결
    • 모더나이저로 구형 IE에 HTML5 요소 지원 추가
    • 인터넷 익스플로러 6, 7, 8 버전에 min과 max 미디어 쿼리 기능 추가
    • 모더나이저로 조건부 로딩하기
  • 내비게이션 링크를 드롭 메뉴로 변경(조건부)
  • 고해상도 디바이스(미래)