청구할인 안내(인터파크 제휴카드) | 안내
북피니언 롯데카드 30% (최대할인 3만원 / 3만원 이상 결제)
하나SK 북&카드 30% (최대할인 3만원 / 3만원 이상 결제)
EBS 롯데카드 20% (최대할인 3만원 / 3만원 이상 결제)
인터파크 NEW 우리V카드 10% (최대할인 3만원 / 3만원 이상 결제)
인터파크 현대카드 7% (최대할인 3만원 / 3만원 이상 결제)
Close

2013년 9월 9일 이후 누적수치입니다.

반응형 디자인 실무 : 레이아웃을 넘어 성능과 접근성 관점에서 바라본

원제 : Implementing Responsive Design
판매지수 16
?
판매지수란?
사이트의 판매량에 기반하여 판매량 추이를 반영한 인터파크 도서에서의 독립적인 판매 지수입니다. 현재 가장 잘 팔리는 상품에 가중치를 두었기 때문에 실제 누적 판매량과는 다소 차이가 있을 수 있습니다. 판매량 외에도 다양한 가중치로 구성되어 최근의 이슈도서 확인시 유용할 수 있습니다. 해당 지수는 매일 갱신됩니다.
Close
정가

30,000원

  • 27,000 (10%할인)

    1,500P (5%적립)

  • (1건)

    27,000원 ~(10%할인)

    [특급]

  • 중고판매

    이 책을 인터파크에
    판매하세요

할인혜택
  • 22,000원 [롯데카드] 5만원이상 구매시 5천원 할인!할인쿠폰
  • 22,000원 [외환카드] 5만원이상 구매시 5천원 할인!할인쿠폰
  • 22,000원 [하나카드] 5만원이상 구매시 5천원 할인!할인쿠폰
적립혜택자동적립
배송정보
주문수량
감소 증가
  • 이벤트/기획전

  • 연관도서(53)

  • 사은품(2)

출판사 서평

반응형 디자인에 대한 논의가 활발하게 이루어지고 있는 가운데, 이 책은 미국 브레이킹 디벨롭먼트(Breaking Development) 등의 다양한 웹 컨퍼런스에서 회자되는 논의들을 종합적으로 정리하고 최근 프로젝트와 연구를 공개하면서, 다양한 실제 사례 코드를 수록했다. 웹 사이트 레이아웃을 넘어 성능과 접근성 관점에서 반응형 디자인을 어떻게 구현하면 좋을지 다양한 사례와 함께 알아본다.

이 책에서 다루는 내용

- 플루이드(fluid) 레이아웃, 미디어 쿼리, 플루이드 미디어의 조합을 활용해 반응형 사이트 구축
- 프로젝트 시작부터 반응형 워크플로 적용
- 다양한 디바이스에서 콘텐츠 개선
- 풍부한 사용자 경험을 제공하기 위한 기능 탐지 및 서버 측 개선 기법 활용

추천사

"미래 지향적이며 다중 스크린을 지원하는 웹 사용자 경험을 만들기 위해 필요한 테크닉과 고려사항의 보고(寶庫)다."
- 브래드 프로스트 / R/GA 뉴욕 지사 모바일 웹 전략가

"오늘날 (그리고 앞으로 다가올) 급변하는 웹을 좀 더 잘 이해하고 개발하는 데 관심이 있는 사람이면, 훌륭한 연구에 기반한 매력적인 이 책을 통해 누구나 혜택을 받을 것이다."
- 스테파니 리거 / 이부(Yiibu) 디자이너

몇 년 전, 사진 업계의 전설인 체이스 자비스(Chase Jarvis)는 "가장 좋은 카메라는 여러분이 지금 손에 들고 있는 카메라다."라는 명언을 남겼다. 처음 들었을 땐 조금은 충격적인 주장이었지만, 이는 사실이었다. 완벽한 장면은 거의 대부분 계획에 따라 찍히는 것이 아니다. 오히려, 소리 없이 슬그머니 다가온다. 늦은 오후 산책길에서 만난 햇빛은 단풍잎을 완벽하게 비춘다. 또한 갓 태어난 딸이 방금 두 다리를 딛고 처음으로 일어섰다. 이런 순간들과 같이, 라이카(Leica) 카메라가 방 한 켠 선반 위에 잠들어 있다든지, 차에 캐논 레블(Rebel)을 놓고 온 것은 중요하지 않다. 사진의 품질이 조잡하든 상관없이, 여러분은 주머니 속에 이미 카메라를 가지고 있고, 우연히 갑작스럽게 나타났다 곧 사라지는 순간을 포착할 수 있다는 사실이 중요할 뿐이다. 자비스의 아이디어에 편승하여 스테파니 리거는, 최고의 브라우저는 여러분이 현재 사용하는 것임을 주장해 왔다. 결국 인생은 예측할 수 없다. 기회는 순식간에 지나간다. 영감은 빠르고 강렬하게 머리를 스친다. 여러분이 암 연구원이라고 상상해보라. 종양의 성장을 억제하는 신체의 고유한 능력을 촉진시키기 위해, 인터페론-감마 생산을 증가시키기 위한 방법을 찾으며 몇 달 동안 엄청난 조사에 혼신을 다해 왔다. 왠지 정답에 가까이 온 것 같다는 느낌이 들지만 그저 손에 닿지 않는다. 그러다 어느 날 아침, 뜨거운 물로 샤워를 하면서 몸을 씻어 내리는 중에 간절히 원하던 아이디어가 느닷없이 여러분을 찾아온다. 유레카! 이제 깨달았다고 생각한다. 지난 주에 읽었던 논문을 다시 참조할 필요가 있을 뿐이지만 말이다. 물방울을 떨어뜨리면서 욕조에서 일어나 욕실 매트에 올라선다. 수건으로 물기를 닦지도 않고 바로 욕실 선반에 놓인 모바일 디바이스를 집어들고 해당 저널 사이트로 찾아 들어가자, 그 논문에 대한 일반 정보와 구독 여부를 묻는 프롬프트를 띄우는 웹사이트의 간이(light) 버전이 브라우저에 나타난다. 어쩔 수 없이 '전체 사이트 보기' 링크를 찾아서 클릭하고자 페이지를 스크롤 다운할 때마다, 손가락에 묻은 물이 스크린에 자국을 남긴다. 스크린이 로드되면 알 만한 위원회에서만 디자인할 수 있는 조각보 같은 홈페이지 위 약 9,000미터 상공에서 화면이 빙빙 돌고 있음을 깨닫는다. 몇 분 동안 두 손가락으로 화면을 늘렸다가 줄였다가, 글자를 입력하고 나서야 결국 원하는 논문을 찾아내지만, PDF 서식이라 지금의 이 작은 스크린에서는 글 읽기가 거의 불가능하다는 것을 깨닫는다. 낙심하여 휴대폰을 내려 놓고 다시 샤워를 하면서 실망감을 모두 씻어내기를 기대한다. 가슴 아프게도 모바일에서 웹을 브라우징하는 것은 매우 자주 좌절스러운(그리고 가끔은 인간성을 포기해야 하는) 시도다. 하지만 꼭 그래야 할 필요는 없다. 이 책의 본문에서 내 친구 팀(Tim)은 각 사용자가 환상적인 사용자 경험을 제공받을 수 있도록, 사용자 디바이스의 기능에 최적화되고 사용자의 시간, 인내심, 데이터 제한을 고려한 사이트를 만들 때 사용할 수 있는(그리고 실제로 사용해야 하는) 수단과 단계의 전체적인 윤곽을 명확하게 그려준다. 그가 소도시에 산다고 무시하지 말라. 팀은 이 주제에 대해 안팎으로 통달해 있다. 나는 이 책에서 많은 것을 배웠고 여러분도 그러리라고 믿는다.
- 애론 거스타프슨 / Adaptive Web Design 저자

목차

1장. 어디든지, 도처에 존재하는 웹
우리가 잘못 접근했던 것
디바이스가 몰려 온다
디스플레이 크기
네트워크 속도
표준 지원
입력 도구
상황
별도의 사이트
분기
반응형이 되기
진보적 개선 전략
반응형 디자인에 대한 또 다른 책이 필요한 이유
언급할 내용
대상 독자들
코드 예제
참조 사이트

2장. 플루이드 레이아웃
레이아웃 옵션
고정 너비
플루이드 레이아웃
엘라스틱 레이아웃
하이브리드 레이아웃
어떤 접근법이 가장 반응형일까
폰트 크기 결정
픽셀

백분율
보너스 라운드: 렘
어떤 접근법이 가장 반응형일까
픽셀로부터 변환하기
그리드 레이아웃
콘텐츠 아웃
그리드 설정
고정 너비와 플루이드 너비의 혼합
테이블 레이아웃 - 올바른 방법
마무리

3장. 미디어 쿼리
뷰 포트
아닌 경우를 제외하고는 픽셀은 픽셀일 뿐
뷰 포트 태그와 속성
미디어 쿼리 구조
미디어 타입
미디어 표현식
논리적 키워드
규칙
내부에 끼워 넣기 VS 외부에 두기
미디어 쿼리 순서
데스크톱 다운
모바일 업
핵심 사용자 경험을 만들어라
브레이크 포인트 결정
콘텐츠 따라가기
더 넓은 스크린을 위한 개선
좀 더 유연한 미디어 쿼리를 위해 엠 사용하기
내비게이션
토글하기
인터넷 익스플로러 지원
마무리

4장. 반응형 미디어
무엇이 문제인가
성능
선택적으로 모바일에 이미지 제공하기
자바스크립트
matchMedia 소개
반응형 이미지 전략
브라우저와 맞서기
포기하기
서버로 가기
반응형 이미지 옵션
Sencha.io Src
적응성 있는 이미지
잠깐, 여기서 정답은 무엇일까
배경 이미지
우리가 해결하는 동안
고해상도 디스플레이
SVG
기타 고정 너비 리소스
비디오
광고
마무리

5장. 계획
반응형 선택
고려사항
성능
상황
콘텐츠 타협
시간 투자
지원
광고
결론
사이트 분석을 고려하라
왜곡된 사이트 분석
어떤 통계가 중요한가
왜곡된 시장점유율 통계
콘텐츠를 고려하라
콘텐츠 감사
페이지 테이블
어디로 가고 있는지 고려하라
일부에 최적화된, 다수에 접근 가능한
크로스 디바이스 사용자 경험을 고려하라
테스트 베드를 준비하라
실제 디바이스
에뮬레이터
제 3 업체의 서비스
마무리

6장. 디자인 워크플로
마일리지는 다를 수 있다
상호적인 매체
협업
시스템 내에서 생각하기
모바일 먼저 생각하기
모바일이 폭증하고 있다
모바일이 여러분을 집중하게 한다
모바일이 여러분의 능력을 확장시킨다
도구
와이어 프레임
목업
스타일 가이드
마무리

7장. 반응형 콘텐츠
콘텐츠 작업 시작
콘텐츠 종류
목적
생성
구조
언제, 어떤 콘텐츠를 표시할지 여부
콘텐츠 제거
콘텐츠 개선
언제 콘텐츠 순서를 바꿔야 하나
다시 구조
가야할 곳
코드 수프
아장아장 걷기
API 만들기
마무리

8장. RESS
사용자 에이전트 탐지
사용자 에이전트 문자열 해부
사용자 에이전트 문자열로 무엇을 할 수 있나
기능 탐지
모더나이저
서버로 이동
사용자 에이전트 탐지와 기능 탐지 결합
RESS: 양 측 세계의 최선책
혼란 상태
WURFL 설치
구성
기능 탐지
전화 걸기
터치에 최적화하기
마무리

9장. 반응형 경험
센서 시스템
네트워크
무엇을 할 수 있나
컨텍스트
컨텍스트 분류
관찰하고 조사하라
기능
HTML5 입력 타입
API
마무리

10장. 맺음말 - 미래를 생각하며

본문중에서

웹과 같이 동적인 매체 관련 작업의 도전 과제는 놀라울 정도의 다양성과 신속한 진화에 있다. 이는 흥미로운 부분이기도 하다. 반응형 디자인은 시작에 불과하다. 웹의 잠재력을 만족시키기 위해 한걸음 나아가는 것이지만, 단지 한걸음일 뿐이다. 현재 다양성의 관점에서 웹에 대해 생각하는 것은, 앞으로 다가올 다양성을 대비할 수 있게 해줄 것이다. 이 책에서는 주로 데스크톱, 모바일 디바이스, 태블릿에 초점을 맞추었다. 그러나 또 다른 홍수가 곧 다가온다. 스마트TV가 앞으로 각광받을 예정이고, 이에 따라 새로운 근심거리를 가득 몰고 올 것이다. 대부분 스마트TV는 여러분이 일터에서 사용하는 모니터와 동일한 해상도를 공유한다. 스크린에서 0.6미터 떨어져 있는 사람과 3.7미터 떨어져서 소파에 앉은 사람을 모두 만족시킬 수 있도록 레이아웃을 조정하는 작업은 그 자체로 충분치 않을 것이다. 스마트카라고 불리는 커넥티드 카(connected cars) 또한 인기가 빠르게 상승하는 중이다. 메르세데스 벤츠, 포드, 아우디는 이미 자동차에 인터넷 연결 기능을 탑재하고 있다. 자동차의 대시보드에 탑재된 이러한 애플리케이션의 보안성에 의문을 가질 수 있겠지만, 이미 그와 상관없이 순조롭게 진행 중이다. 차와 TV 역시 시작에 불과하다. 진공청소기, 창유리, 냉장고 같은 커넥티드 디바이스들도 모두 작업에 착수하고 있다. 나는 도입부에서, 디바이스 관련 다가오는 좀비 묵시록에 관한 스콧 젠슨의 기사를 언급한 바 있다. 기술이 점점 더 합리적인 가격에 제공됨에 따라 웹이 활성화된 디바이스의 수는 신속하게 증가하고 있다. 웹은 단일 디바이스에 제한된 플랫폼이 아니다. 사람들은 이미 콘텐츠 시프팅(contents shifting)을 초보 수준으로 활용하고 있다. 인스타페이퍼(Instapaper)나 리더빌리티(Readability) 같은 서비스는 데스크톱에서 무언가를 찾아내 저장하고, 추후에 휴대폰이나 태블릿에서 이 내용을 읽을 수 있게 해준다. W3C는 2011년 10월, 주변 디바이스를 발견하기 위한 스펙을 작업 중이라고 발표했다5. 콘텐츠 시프팅의 잠재력을 완전히 다른 수준으로 받아들일 수 있는 문을 열어주는 내용이다. 일례를 들면, 콘텐츠를 찾기 위해 휴대폰을 사용한 후 근처 TV에서 그 콘텐츠를 다시 재생하는 것이 될 수 있다. 인터넷 익스플로러10, 크롬17+, 파이어폭스11+에서는 이미 지원되고, 사파리, 오페라, iOS, 오페라 모바일에서는 일부가 지원되는 웹 소켓(WebSockets) 같은 기술은 브라우저와 서버 간에 상호작용을 할 수 있도록 세션을 열어 준다. 이는 다중 사용자 상호작용은 물론 다중 디바이스 상호작용의 지평을 연다. 디바이스 간의 간극은 급속히 줄어든다. 이에 따라 레이아웃에 대한 우리의 관심도 점차 줄어들고 있다. 더 많은 디바이스가 연결됨에 따라 웹의 본질인 상호작용성은 점점 더 무시하기 힘들어진다. 손에 쥔 디바이스 이상을 바라봐야 하고, 그보다는 오히려 총체적인 경험의 배치를 고려해야 한다. 웹은 믿을 수 없을 만큼 강력한 매체로, 수많은 센서에 반응할 수 있고 디바이스의 물리적인 벽을 넘어설 수 있다. 단지 레이아웃에 대응하는 데 안주하지 말고, 우리 스스로에게 도전해보자.
(/ 저자서문 중에서)

저자소개

팀 카들렉(Tim Kadlec) [저] 신작알림 SMS신청 작가DB보기
생년월일 -
출생지 -
출간도서 1종
판매수 31권

북부 위스콘신 주에서 일하는 웹 개발자다. 소기업과 대형 퍼블리셔, 산업형 기업에서 다양하게 일한 경험은, 그로 하여금 웹 기술의 주의 깊은 활용이 모든 규모의 사업에 어떤 영향을 미칠 수 있는지 파악하게 해주었다. 팀은 모바일 디바이스용 웹 디자인과 개발을 다루는 최초의 컨퍼런스 중 하나인 '브레이킹 디벨롭먼트(Breaking Development)'의 공동 설립자다. 웹에 굉장한 열정을 갖고 있고 다양한 웹 컨퍼런스에서 자신이 깨달은 것에 대해 발표하는 모습을 자주 찾아볼 수 있다. [Web Performance Daybook Volume 2]를 공저했고, 블로그(http://timkadlec.com

펼쳐보기
생년월일 -
출생지 -
출간도서 0종
판매수 0권

KAIST 전산학과 학부를 졸업하고 오라클 아시아 첨단 기술연구소 및 한국오라클, 삼성전자에서 근무한 후 현재 오픈스택 커뮤니티 공헌자이자 기술작가로 활동하며 서울대 기술경영정책과정에서 석사과정을 밟고 있다. 클라우드 아키텍트이자 엔지니어이며, CISA 자격증을 취득했고, NAND 플래시 메모리 최적화 모바일 및 임베디드 DBMS 미국 특허(7856522)를 고안한 바 있다.
오라클 월간 매거진에 데이터베이스 성능 최적화 방법론을 기고했고, 에이콘출판사에서 펴낸 [한눈에 보는 실전 클라우드 프로젝트](2013)라는 책을 저술했다. 한국IT비즈니스진흥협회(koIPA)에

펼쳐보기

이 상품의 시리즈

에이콘 웹 프로페셔널 시리즈(총 69권 / 현재구매 가능도서 54권)

펼쳐보기

리뷰

0.0 (총 0건)

등록된 리뷰중 당선작을 선정하여, 도서상품권을 드립니다.

리뷰쓰기

기대평

작성시 유의사항

평점
0/200자
등록하기

기대평

0.0

교환/환불

교환/환불 방법

‘마이페이지 > 취소/반품/교환/환불’ 에서 신청함, 1:1 문의 게시판 또는 고객센터(1577-2555) 이용 가능

교환/환불 가능 기간

고객변심은 출고완료 다음날부터 14일 까지만 교환/환불이 가능함

교환/환불 비용

고객변심 또는 구매착오의 경우에만 2,500원 택배비를 고객님이 부담함

교환/환불 불가사유

반품접수 없이 반송하거나, 우편으로 보낼 경우 상품 확인이 어려워 환불이 불가할 수 있음
배송된 상품의 분실, 상품포장이 훼손된 경우, 비닐랩핑된 상품의 비닐 개봉시 교환/반품이 불가능함

소비자 피해보상

소비자 피해보상의 분쟁처리 등에 관한 사항은 소비자분쟁해결기준(공정거래위원회 고시)에 따라 비해 보상 받을 수 있음
교환/반품/보증조건 및 품질보증 기준은 소비자기본법에 따른 소비자 분쟁 해결 기준에 따라 피해를 보상 받을 수 있음

기타

도매상 및 제작사 사정에 따라 품절/절판 등의 사유로 주문이 취소될 수 있음(이 경우 인터파크도서에서 고객님께 별도로 연락하여 고지함)

배송안내

  • 인터파크 도서 상품은 택배로 배송되며, 출고완료 1~2일내 상품을 받아 보실 수 있습니다

  • 출고가능 시간이 서로 다른 상품을 함께 주문할 경우 출고가능 시간이 가장 긴 상품을 기준으로 배송됩니다.

  • 군부대, 교도소 등 특정기관은 우체국 택배만 배송가능하여, 인터파크 외 타업체 배송상품인 경우 발송되지 않을 수 있습니다.

  • 배송비

도서(중고도서 포함) 구매

2,000원 (1만원이상 구매 시 무료배송)

음반/DVD/잡지/만화 구매

2,000원 (2만원이상 구매 시 무료배송)

도서와 음반/DVD/잡지/만화/
중고직배송상품을 함께 구매

2,000원 (1만원이상 구매 시 무료배송)

업체직접배송상품 구매

업체별 상이한 배송비 적용