추가 적립 안내

이 책은 다양한 기기, 플랫폼, 브라우저 환경 하에서 사용자 중심의 반응형 웹 개발에 필요한 핵심 기술 요소를 한 권의 책에 일목요연하게 담아 냈다. HTML5, CSS3, 자바스크립트를 활용한 다양한 예제부터 이미지와 그래픽, 멀티미디어 처리까지 폭넓고 자세히 설명돼 있다.

★ 요약 ★

다양한 기기, 플랫폼, 브라우저 환경 하에서 사용자 중심의 반응형 웹 개발에 필요한 핵심 기술 요소를 한 권의 책에 일목요연하게 담아 냈다. HTML5, CSS3, 자바스크립트를 활용한 다양한 예제부터 이미지와 그래픽, 멀티미디어 처리까지 폭넓고 자세히 설명돼 있다. 또한 이 책에 수록된 풍부한 참고 자료는 웹 개발에 필요한 입체적인 지식과 식견을 얻기에 충분하다. 복잡한 웹 플랫폼에서 최적의 사용자 경험을 제공하는 웹 프로그래밍을 목표로 한다면 이 책에서 설명한 내용을 반드시 살펴보기 바란다.

★ 이 책에서 다루는 내용 ★

■ 다양한 기기에서 콘텐츠를 알맞게 표시하는 방법
■ 지오로케이션(Geolocation), 방향 전환(Orientation), 웹스토리지(Web Storage)를 비롯한 최신 API를 사용해 기기와 상호 작용하도록 웹사이트를 디자인하는 방법
■ 성가신 플러그인을 사용하지 않고 크로스 플랫폼오디오와 비디오를 통합하는 방법
■ SVG로 고해상도 기기에서 이미지와 그래픽을 확장 가능하게 만드는 방법
■ 강력한 HTML5 요소를 사용해 더 나은 웹사이트를 디자인하는 방법

★ 이 책의 구성 ★

이 책에서 설명하지 않을 내용을 솔직히 말하는 것에서부터 시작하겠다. 플랫폼마다의 우수성을 목표로 한 디자인 방법은 이 책에서 다루지 않는다. 내가 잘 모르는 것을 가르칠 수는 없기 때문이다. 내가 디자이너가 아닌 개발자가 된 데는 이유가 있다. 내가 포토샵 작업을 하면 마치 권투 글로브를 낀 둔한 손으로 마우스를 움직여 만든 것처럼 보이는 결과물이 나오기 때문이다.
이 책에서 설명할 내용은 다중 기기에서 작동하거나 목표로 삼는 단일 기기 종류에 맞춘 사이트를 구축할 수 있는 최신 코딩 방법과 기술이다(기술 자체는 모두 1장에서 설명하므로 여기서 세부내용을 다루지는 않겠다).
다음과 같이 매우 중요한 두 가지 사항을 유념하며 이 책을 읽어야 한다.

■ 웹 개발 기술의 범위는 매우 방대해서 이 책 한 권에서 모두를 다룰 수는 없다. 따라서 이 책에서는 다양한 기기에 걸쳐 웹 프로젝트를 구축할 때 필요하다고 여겨지는 핵심 기법이나 기술을 위주로 다루었다.
■ 이 책에 있는 내용이 모두 폭넓게 적용될 수 있는 것은 아니다. 적어도 이 책에서 설명하는 유형은 그렇지 않다. 웹은 지속적으로 발달하고 있고, 책 출판이란 특정한 한 순간을 하나의 스냅샷으로 담는다는 것을 의미한다. 몇 가지는 변화할 것이고, 몇 가지는 쇠퇴하여 사라질 것이다. 시간이 흘러도 비교적 내용이 유효한 책을 만들기 위해, 벤더 전용 기술보다는 공개 표준을 기반으로 한 기술과 브라우저에서 이미 어느 정도 구현된 기술만을 책에서 다뤘다.

웹 개발자라면 다음과 같은 태도를 보여야 한다. 지속적으로 정보를 얻어라. 웹 표준 개발에 있어 최신 상태를 유지하라. 호기심과 함께 즐기면서 이들을 가장 중요시하라. 여러분은 지식 공유를 기반으로 한 산업분야에서 작업할 정도로 운이 좋은 사람들이다. 이 책에서 언급되는 인물들과 웹 사이트를 찾아보고 스스로 자원을 구하고 트위터에도 가입하고 웹 개발자 커뮤니티 지역 모임에 참석해보라. 웹 개발 작업을 할 때만큼 흥분되는 시간도 없지만, 추가적으로 다른 활동에도 참여해서 이를 진정으로 이용할 필요가 있다.

무엇보다도 구축하고자 하는 대상에 대해 가장 훌륭한 구상방법을 생각하라. 웹 사이트를 구축하려 한다면 ‘웹과 모바일을 위한 사이트 구축’만을 생각하지 말고 어디에서나 작동할 수 있는 사이트 구축을 생각하라. 사용자가 사이트를 사용하는 방식, 사이트로부터 원하는 정보, 그리고 지금 당장은 아니더라도 미래에 개발자로서 그들의 목표를 충족시킬 수 있도록 수행해야 하는 작업을 생각해야 한다. 지난 5년간 웹은 크게 변화해왔다. 다음 5년 후 웹이 어떻게 될지 누가 장담할 수 있겠는가?

★ 추천의 글 ★

이 책에는 유용하고 중요한 정보가 가득하다. 이 책의 내용을 숙지한 다음 다양한 기기와 모든 브라우저에서 테스트 하라. 그러면 여러분의 상사에게 인정받을 수 있으며 사용자에게 즐거움을 줄 수 있다. 또한 더 나은 웹을 만들고 개방성을 계속 유지할 수 있다.
-브루스 로슨(Bruce Lawson) / 『HTML5 첫걸음』의 저자

이 책 역시CSS에 관한 저자의 저서 『The Book of CSS3』와 마찬가지로 모던 웹 플랫폼에 필요한 내용을 잘 담아 냈다. 다양한 기술 수준의 웹 개발자들에게 실질적으로 가장 필요한 정보가 간결하게 기술돼 있다.
-스티븐 헤이(Stephen Hay) / 『Responsive Design Workflow』의 저자

저자는 멋진 실전 코드 작성과 웹 기술에서 최상의 최신 개발유지 사이의 균형을 잘 잡고 있다. 또한 어려운 기술 주제를 명쾌하고 재미있게 설명하는 타고난 재능이 있다.
-크리스 밀스(Chris Mills) / 오페라 소프트웨어의 개발자 담당 매니저 겸 『Practical CSS3』의 저자

1장 웹 플랫폼
1.1 용어에 대한 참고사항
1.2 대상 독자와 필요 지식
1.3 정확한 용어 이해
1.4 진정한 HTML5
___HTML5 템플릿
___새로운 모범 사례
1.5 CSS3와 그 이후
___벤더 전용 접두사
___CSS 프레임워크와 프리프로세서
1.6 브라우저 지원
1.7 테스트, 테스트, 그리고 더 많은 테스트
1.8 요약
1.9 추가 자료

2장 구조와 시맨틱
2.1 HTML5의 새로운 요소
___왜 만들었나
___HTML5 섹셔닝 요소의 단점
2.2 WAI-ARIA
2.3 시맨틱 마크업의 중요성
2.4 마이크로포맷
2.5 RDFa
2.6 마이크로데이터
___마이크로데이터 API
___마이크로데이터, 마이크로포맷, RDFa
___Schema.org
___리치 스니펫
2.7 데이터 속성
___데이터 속성 API
___제이쿼리와 데이터 속성
___시장에서의 데이터 속성
2.8 웹 컴포넌트: 마크업의 미래?
2.9 요약
2.10 추가 자료

3장 기기 반응형 CSS
3.1 미디어 쿼리
___크기를 기반으로 한 미디어 기능
___미디어 쿼리 결합과 부정
___잠깐 참고: 픽셀에 대한 모든 것
___화면 해상도 미디어 쿼리
___기기 적응
___입력 매커니즘의 미디어 기능
___그밖의 미디어 기능
3.2 자바스크립트에서의 미디어 쿼리
3.3 적응형 웹 디자인과 반응형 웹 디자인의 비교
___box-sizing 프로퍼티
___길이 값의 동적 계산
3.4 뷰포트에 상대적인 길이 단위
___루트에 상대적인 단위
___모바일 퍼스트와 콘텐츠 분기점
3.5 반응형 디자인과 대체 객체
___이미지 문제
___HTML5 반응형 이미지 해결책
3.6 요약
3.7 추가 자료

4장 CSS 레이아웃에 대한 새로운 접근법
4.1 다중 열
___간격과 규칙
___병합과 줄바꿈
4.2 유연한 박스
___유연한 박스모델 선언
___콘텐츠 순서 변경
___컨테이너 내부 정렬
___유연성 추가
___줄바꿈과 흐름
4.3 그리드 레이아웃
___그리드 선언과 정의
___그리드 선 반복
___그리드에 항목 배치
___정렬과 스택
___그리드 레이아웃 구문
___그리드 레이아웃 용어에 대해
___그리드 템플릿
4.4 향후 전망
4.5 요약
4.6 추가 자료

5장 모던 자바스크립트
5.1 자바스크립트의 새로운 기능
___async와 defer 속성
___addEventListener 메소드
___DOMContentLoaded 이벤트
___입력 이벤트
___자바스크립트에서의 CSS 선택자
___getElementsByClassName() 메소드
___클래스와의 상호작용
5.2 자바스크립트 라이브러리
___제이쿼리
___옙놉
___모더나이저
___머스타시
5.3 폴리필과 심
5.4 테스트와 디버깅
5.5 요약
5.6 추가 자료

6장 기기 API
6.1 지오로케이션
6.2 방향전환
6.3 전체 화면
6.4 진동
6.5 배터리 상태
6.6 네트워크 정보
6.7 카메라와 마이크
6.8 웹 스토리지
6.9 드래그앤드롭
6.10 파일 작업
6.11 모질라의 파이어폭스 OS와 WebAPI
6.12 폰갭과 네이티브 래퍼
6.13 요약
6.14 추가 자료

7장 이미지와 그래픽
7.1 벡터와 비트맵 비교
7.2 SVG
___SVG 이미지 분석
___링크된 SVG 파일
___내장된 SVG
___SVG 필터
___SVG와 CSS의 융합
___SVG의 단점
7.3 canvas 요소
___이미지 처리
___WebGL
7.4 SVG와 캔버스 선택 시점
7.5 요약
7.6 추가 자료

8장 새로운 폼
8.1 새로운 입력 타입
8.2 새로운 속성
___autofocus
___placeholder
___autocomplete
___spellcheck
___multiple
___form
8.3 datalist
8.4 화면상 컨트롤과 위젯
___number
___date
___color
8.5 사용자에게 정보 표시하기
___progress
___meter
___output
8.6 클라이언트 측 폼 유효성 검사
8.7 제약 조건 유효성 검사 API
8.8 폼과 CSS
8.9 요약
8.10 추가 자료

9장 멀티미디어
9.1 미디어 요소
___video 요소의 추가 속성
___다중 소스 파일
___대체 방안
___자막과 캡션
___인코딩
9.2 미디어 분할
9.3 미디어 API
___네트워크와 준비 상태
___오디오와 비디오를 위한 추가 프로퍼티
9.4 미디어 이벤트
9.5 고급 미디어 상호작용
___웹 오디오 API
___WebRTC
9.6 요약
9.7 추가 자료

10장 웹 앱
10.1 웹 앱
___호스트형 앱과 패키지형 앱
___매니페스트 파일
___W3C 위젯
10.2 하이브리드 앱
___폰갭
___티타늄
10.3 TV 앱
10.4 웨비노스
10.5 애플리케이션 캐시
___앱 캐시 파일의 콘텐츠
___캐싱 순서
___앱 캐시 API
10.6 요약
10.7 추가 자료

11장 향후 전망
11.1 웹 컴포넌트
___템플릿
___데코레이터
___커스텀 요소
___섀도 DOM
___통합
11.2 CSS의 미래
___리전
___익스클루전
___머나먼 미래의 레이아웃
___기능 쿼리
___캐스케이딩 변수
11.3 요약
11.4 추가 자료

부록 A 브라우저 지원
부록 B 참고자료

★ 저자 서문 ★

웹은 전례 없는 혁신을 겪고 있다. 얼마 전만 해도 마이크로소프트라는 한 회사가 웹 시장을 장악하고 있었으며, 2003년에는 인터넷 익스플로러(IE)가 전 세계 컴퓨터에서 95%나 사용되었다. 이와 같은 시장 장악으로 인해 개발자들은 안정된 시장이라는 이점을 누릴 수 있었지만 심각한 단점도 존재했다. 바로 마이크로소프트가 IE에 대한 중요치 않은 작업을 종료하기로 결정했으며 경쟁의 부족과 폐쇄적인 환경의 결과로 웹의 혁신이 정체되었다는 점이다.
현재 상황도 별반 다르지 않다. 고작 네다섯 개의 주요 브라우저 벤더가 존재하고, 비슷한 수의 주요 운영체제가 있으며, 항상 이보다 더 많은 업체가 관여한다. 어도비는 플래시와 앱에서 오픈 웹으로 초점을 돌렸으며 삼성이나 닌텐도 같은 기술 회사는 구글, 애플, 마이크로소프트 같은 주요 업체와 합류하여 웹의 미래와 그를 위한 구축 방식을 그려나가는 데 참여하고 있다.
웹에 접속하는 방식 역시 크게 변했다. 그 예로 기기를 생각해보자. 웹은 더 이상 데스크톱이나 노트북에 국한되지 않는다. 스마트폰, 태블릿, 게임 콘솔 등 손가락으로 다 셀 수 없을 만큼 현존하는 기기의 종류는 매우 다양하다.
이 책은 이렇듯 어디서든 웹을 접할 수 있는 새로운 시대에 프론트엔드(frontend) 웹 개발에 관한 내용을 담고 있다. 즉 멀티기기 세상의 예견과 함께 일류 웹 사이트, 앱, 또는 오픈 웹 기술을 기반으로 구축하는 방식에 대해 배운다. 이 책은 그저 모바일 웹 사이트나 스마트 TV 앱을 만드는 방법에 관한 내용이 아니라, 어디에서나 최상의 경험을 제공하는 사이트를 구축할 수 있는 현재와 가까운 미래 웹 기술의 최신 경향에 관한 내용이다.
머리말 끝부분에서 이 책을 통해 배울 내용을 더 자세히 설명하겠으나 우선은 오늘날 놀라울 정도로 다양한 웹 기반 기기에 대해 언급하고자 한다.

★ 옮긴이의 말 ★

“Because the people who are crazy enough to think they can change the world, are the ones who do.”(자기들이 세상을 바꿀 수 있다고 생각할 정도로 미친 사람들이야말로 진정 세상을 바꾸는 사람들이기 때문이다)
-Think Different 중(애플 TV 광고, 1998)

웹 환경은 변했고, 변하는 중이며, 계속 변화할 것이다. 2007년 아이폰의 등장으로 비롯된 모바일 빅뱅은 웹 환경에 큰 변혁을 불러왔다. 몇 해 전까지만 해도 인터넷 익스플로러와 웹이 동의어처럼 사용됐지만 크롬, 파이어폭스, 오페라 브라우저가 더 이상 낯설지 않게 됐다. 하지만 이로 인한 기기 종류, 화면 크기, 사용 기술 등의 다양화는 개발자들에게 큰 도전이 되었다.
이와 같은 ‘복잡성’의 시기에 ‘단순성’을 추구하기 위해 이 책이 쓰여졌다. 이 책의 의미는 다양한 최신 웹 기술 트렌드 중에서 핵심 요소에 집중하고, 이에 대한 프로그래밍 방식까지 살펴보는 전형적인 ‘T자형’ 책이다. 이 책의 의미는 급변하는 환경에서 방향을 제시하는 배의 ‘방향키’와 같은 존재라는 데 있다. 이 책을 통해 미래 웹에 대한 전망과 함께 프로그래밍 방법에 대한 혜안(insight)을 동시에 얻을 수 있다.
이 책은 웹 트렌드의 전반적인 현황과 웹 플랫폼의 주요 개념에 대한 설명으로 시작해 웹의 구조, 반응형 디자인, CSS 레이아웃, 자바스크립트 라이브러리, 기기 관련 API, 이미지와 그래픽, 폼 처리, 멀티미디어 활용, 다양한 웹 애플리케이션, 그리고 향후 전망까지 넓고 깊게 해당 내용을 살펴보며 현재뿐만 아니라 미래 멀티플랫폼에서 사용자 중심의 반응형 웹 개발에 필요한 내용을 한 권의 책으로 잘 정리하였다. 또한 예제 위주의 ‘쿡북cookbook’ 형태로 구성되어 있어 필요할 때마다 해당 내용을 빠르고 쉽게 찾아볼 수 있다. 그리고 각 장의 마지막 부분에는 본문과 관련된 정보가 있는 링크가 정리돼 있어 다양한 식견을 얻고 통찰력을 넓히는 데 도움을 준다. 참고로 각 장에서 설명한 코드와 링크는 모두 별도 파일로 정리했으며, 에이콘출판사 웹사이트 도서정보페이지(http://www.acornpub.co.kr/book/modern-web)에서 내려받을 수 있다.
세상이 복잡해지고 빠르게 변할수록 ‘본질fundamental’에 집중해야 한다. 이 책이 하루가 다르게 변하는 모던 웹 관련 최신 기술의 본질에 한 걸음 다가갈 수 있는 기회가 되었으면 좋겠다. 그리고 이러한 새로운 기술이 ‘왜(Why)’ 필요하고, ‘어떻게(How)’ 사용하며, ‘무엇(What)’인지에 대한 질문에 해답을 찾는 데 조금이나마 도움이 되었으면 하는 바람이다.
마지막으로 이 책에서 설명한 모던 웹의 기술을 활용해 자신만의 새로운 가치를 창출할 수 있길 바란다. 또한 이 책을 선택한 열정에 경의를 표하며 다시 한 번 이 글을 읽고 있는 여러분께 감사의 말을 전하고 싶다.
모두의 건승을 빈다.