Top

The Modern Web [웹의 미래를 책임지는 멀티플랫폼 반응형 웹 프로그래밍]

  • 원서명The Modern Web: Multi-Device Web Development with HTML5, CSS3, and JavaScript (ISBN 9781593274870)
  • 지은이피터 개스통
  • 옮긴이홍영표, 최윤정
  • ISBN : 9788960775374
  • 28,000원
  • 2014년 03월 31일 펴냄 (절판)
  • 페이퍼백 | 356쪽 | 188*250mm
  • 시리즈 : 웹 프로페셔널

판매처

  • 현재 이 도서는 구매할 수 없습니다.
파일다운로드

책 소개

요약

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

★ 부록 B에 실려있는 참고 사이트 URL은 여기에서 다운 받으세요.

이 책에서 다루는 내용

■ 다양한 기기에서 콘텐츠를 알맞게 표시하는 방법
■ 지오로케이션(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』의 저자

저자/역자 소개

저자 서문

웹은 전례 없는 혁신을 겪고 있다. 얼마 전만 해도 마이크로소프트라는 한 회사가 웹 시장을 장악하고 있었으며, 2003년에는 인터넷 익스플로러(IE)가 전 세계 컴퓨터에서 95%나 사용되었다. 이와 같은 시장 장악으로 인해 개발자들은 안정된 시장이라는 이점을 누릴 수 있었지만 심각한 단점도 존재했다. 바로 마이크로소프트가 IE에 대한 중요치 않은 작업을 종료하기로 결정했으며 경쟁의 부족과 폐쇄적인 환경의 결과로 웹의 혁신이 정체되었다는 점이다.

현재 상황도 별반 다르지 않다. 고작 네다섯 개의 주요 브라우저 벤더가 존재하고, 비슷한 수의 주요 운영체제가 있으며, 항상 이보다 더 많은 업체가 관여한다. 어도비는 플래시와 앱에서 오픈 웹으로 초점을 돌렸으며 삼성이나 닌텐도 같은 기술 회사는 구글, 애플, 마이크로소프트 같은 주요 업체와 합류하여 웹의 미래와 그를 위한 구축 방식을 그려나가는 데 참여하고 있다.

웹에 접속하는 방식 역시 크게 변했다. 그 예로 기기를 생각해보자. 웹은 더 이상 데스크톱이나 노트북에 국한되지 않는다. 스마트폰, 태블릿, 게임 콘솔 등 손가락으로 다 셀 수 없을 만큼 현존하는 기기의 종류는 매우 다양하다.

이 책은 이렇듯 어디서든 웹을 접할 수 있는 새로운 시대에 프론트엔드(frontend) 웹 개발에 관한 내용을 담고 있다. 즉 멀티기기 세상의 예견과 함께 일류 웹 사이트, 앱, 또는 오픈 웹 기술을 기반으로 구축하는 방식에 대해 배운다. 이 책은 그저 모바일 웹 사이트나 스마트 TV 앱을 만드는 방법에 관한 내용이 아니라, 어디에서나 최상의 경험을 제공하는 사이트를 구축할 수 있는 현재와 가까운 미래 웹 기술의 최신 경향에 관한 내용이다. 머리말 끝부분에서 이 책을 통해 배울 내용을 더 자세히 설명하겠으나 우선은 오늘날 놀라울 정도로 다양한 웹 기반 기기에 대해 언급하고자 한다.

저자 소개

피터 개스통(Peter Gasston)

13년 이상 정부 기관과 기업에서 웹 개발자로 일하고 있다. 『The Book of CSS3』의 저자이기도 한 개스통은 스매싱 매거진(Smashing Magazine), 어 리스트 어파트(A List Apart), 닷넷 매거진(.net Magazine) 등에도 글을 기고하고 있다. 웹 개발자 블로그인 ‘브로큰링크스(Broken Links, http://broken-links.com/)’를 운영하고 있으며 영국 런던에 거주한다.

옮긴이의 말

“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)’인지에 대한 질문에 해답을 찾는 데 조금이나마 도움이 되었으면 하는 바람이다.

마지막으로 이 책에서 설명한 모던 웹의 기술을 활용해 자신만의 새로운 가치를 창출할 수 있길 바란다. 또한 이 책을 선택한 열정에 경의를 표하며 다시 한 번 이 글을 읽고 있는 여러분께 감사의 말을 전하고 싶다.

모두의 건승을 빈다.

옮긴이 소개

홍영표

대학에서 전자전기공학을 전공했고 LG CNS를 거쳐 현재 금융회사 정보시스템부에 근무하고 있으며 카이스트(KAIST) 경영대학 정보경영 석사과정에 재학 중이다. 최신 IT 기술을 활용한 비즈니스 혁신과 융합에 관심이 많으며 기술을 통해 더 나은 미래를 만드는 데 일조하고자 한다. 옮긴 책으로는 『제이콥 닐슨의 모바일 사용성 컨설팅 보고서』(2013), 『HTML & CSS: 웹사이트 개발과 디자인 기초』(2012), 『HTML5+CSS3+자바스크립트의 정석』(2012), 『스프링 인 액션(제3판)』(2012), 『Professional iPhone and iPad Database Application Programming 한국어판』(2012), 『아이폰 & 아이패드 인 액션』(2011)이 있다.

최윤정

대학에서 국어국문학을 전공했으며 2012년 애플 홍콩 지사에서 아이폰 영문 매뉴얼과 시리(Siri)의 한글화 등의 현지화 작업을 계기로 IT에 관심을 갖게 되었다. 향후 훌륭한 국내 IT 서적을 세계에 알리고 기술의 사회적 공유와 가치 있는 나눔을 실천하고자 노력 중이다.

목차

목차
  • 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 참고자료

도서 오류 신고

도서 오류 신고

에이콘출판사에 관심을 가져 주셔서 고맙습니다. 도서의 오탈자 정보를 알려주시면 다음 개정판 인쇄 시 반영하겠습니다.

오탈자 정보는 다음과 같이 입력해 주시면 됩니다.

(예시) p.100 아래에서 3행 : '몇일'동안 -> 며칠동안

정오표

정오표

[2014.06.16]

p160 밑에서 셋째 줄
여러분이 지시하는 → 주변의

p229
본문 14째 줄 < input type="text" spellcheck lang="es"> → < input type="text" spellcheck= "true" lang="es">

p306 첫줄 오타
렌더링되는 방법 보여준다. -> 렌더링되는 방법을 보여준다.

p309
주의 박스 오타
body 내의 콘테츠는 -> body 내의 콘텐츠는

아래에서 둘째 줄 오타
흥미로운 동적 페이지 레이아웃 제작하는 데 -> 흥미로운 동적 페이지 레이아웃을 제작하는 데

p316 본문 첫줄 오타
스크롤링은 컨텐이너, 특히 ~ -> 스크롤링은 컨테이너, 특히 ~

p129
본문 12째 줄
그림 4-9 위에 영문 텍스트 Figure 4-8 shows a few different values for comparison. -> Figure 4-8 shows a few different values for comparison. -> 그림 4-9는 몇 가지 값을 넣어 동작을 확인해본 모습이다.

p188 첫 줄 코드부 띄어쓰기 오류
<videoautoplay></video> -> <video autoplay></video>

p196 코드 정렬 수정, 2번, 4번, 5번 행의 코드 들여쓰기
target.addEventListener('drop', function (e) {
e.preventDefault();
var files = e.dataTransfer.files[0]
,
reader = new FileReader();
reader.addEventListener('load', function (evt)
var img = document.createElement('img');
img.src = evt.target.result;
target.appendChild(img);
}, false);
reader.readAsDataURL(files);
reader.addEventListener('error', function (evt)
console.log(evt.target.error.code)
}, false);
}, false)

p280 본문 밑에서 셋째줄 오타
JSON 포맷이이며, -> JSON 포맷이며

p285 코드부 주석 번역 모두 누락
// All PhoneGap-related functions -> // 모든 폰갭 관련 함수
// Backup data -> // 자료 백업

p286
10.3절 본문 밑에서 4째줄 오역
개발의 각 부분은 자체적인 개발과~ -> 참여 회사마다 자체적인 개발과~