서브메뉴
검색
본문
Powered by NAVER OpenAPI
-
-
반응형 디자인 실무 (레이아웃을 넘어 성능과 접근성 관점에서 바라본)
저자 : 팀 카들렉
출판사 : 에이콘출판
출판년 : 2014
ISBN : 9788960775206
책소개
미국 브레이킹 디벨롭먼트(Breaking Development) 등의 다양한 웹 컨퍼런스에서 회자되는 논의들을 종합적으로 정리하고 최근 프로젝트와 연구를 공개하면서, 다양한 실제 사례 코드를 수록한 책. 웹 사이트 레이아웃을 넘어 성능과 접근성 관점에서 반응형 디자인을 어떻게 구현하면 좋을지 다양한 사례와 함께 알아본다.
플루이드(fluid) 레이아웃, 미디어 쿼리, 플루이드 미디어의 조합을 활용해 반응형 사이트 구축, 프로젝트 시작부터 반응형 워크플로 적용, 다양한 디바이스에서 콘텐츠 개선, 풍부한 사용자 경험을 제공하기 위한 기능 탐지 및 서버 측 개선 기법 활용 등을 다룬다.
플루이드(fluid) 레이아웃, 미디어 쿼리, 플루이드 미디어의 조합을 활용해 반응형 사이트 구축, 프로젝트 시작부터 반응형 워크플로 적용, 다양한 디바이스에서 콘텐츠 개선, 풍부한 사용자 경험을 제공하기 위한 기능 탐지 및 서버 측 개선 기법 활용 등을 다룬다.
[알라딘에서 제공한 정보입니다.]
출판사 서평
★ 요약 ★
반응형 디자인에 대한 논의가 활발하게 이루어지고 있는 가운데, 이 책은 미국 브레이킹 디벨롭먼트(Breaking Development) 등의 다양한 웹 컨퍼런스에서 회자되는 논의들을 종합적으로 정리하고 최근 프로젝트와 연구를 공개하면서, 다양한 실제 사례 코드를 수록했다. 웹 사이트 레이아웃을 넘어 성능과 접근성 관점에서 반응형 디자인을 어떻게 구현하면 좋을지 다양한 사례와 함께 알아본다.
★ 이 책에서 다루는 내용 ★
■ 플루이드(fluid) 레이아웃, 미디어 쿼리, 플루이드 미디어의 조합을 활용해 반응형 사이트 구축
■ 프로젝트 시작부터 반응형 워크플로 적용
■ 다양한 디바이스에서 콘텐츠 개선
■ 풍부한 사용자 경험을 제공하기 위한 기능 탐지 및 서버 측 개선 기법 활용
★ 저자 서문 ★
웹과 같이 동적인 매체 관련 작업의 도전 과제는 놀라울 정도의 다양성과 신속한 진화에 있다. 이는 흥미로운 부분이기도 하다.
반응형 디자인은 시작에 불과하다. 웹의 잠재력을 만족시키기 위해 한걸음 나아가는 것이지만, 단지 한걸음일 뿐이다. 현재 다양성의 관점에서 웹에 대해 생각하는 것은, 앞으로 다가올 다양성을 대비할 수 있게 해줄 것이다.
이 책에서는 주로 데스크톱, 모바일 디바이스, 태블릿에 초점을 맞추었다. 그러나 또 다른 홍수가 곧 다가온다. 스마트TV가 앞으로 각광받을 예정이고, 이에 따라 새로운 근심거리를 가득 몰고 올 것이다. 대부분 스마트TV는 여러분이 일터에서 사용하는 모니터와 동일한 해상도를 공유한다. 스크린에서 0.6미터 떨어져 있는 사람과 3.7미터 떨어져서 소파에 앉은 사람을 모두 만족시킬 수 있도록 레이아웃을 조정하는 작업은 그 자체로 충분치 않을 것이다.
스마트카라고 불리는 커넥티드 카(connected cars) 또한 인기가 빠르게 상승하는 중이다. 메르세데스 벤츠, 포드, 아우디는 이미 자동차에 인터넷 연결 기능을 탑재하고 있다. 자동차의 대시보드에 탑재된 이러한 애플리케이션의 보안성에 의문을 가질 수 있겠지만, 이미 그와 상관없이 순조롭게 진행 중이다.
차와 TV 역시 시작에 불과하다. 진공청소기, 창유리, 냉장고 같은 커넥티드 디바이스들도 모두 작업에 착수하고 있다.
나는 도입부에서, 디바이스 관련 다가오는 좀비 묵시록에 관한 스콧 젠슨의 기사를 언급한 바 있다. 기술이 점점 더 합리적인 가격에 제공됨에 따라 웹이 활성화된 디바이스의 수는 신속하게 증가하고 있다. 웹은 단일 디바이스에 제한된 플랫폼이 아니다.
사람들은 이미 콘텐츠 시프팅(contents shifting)을 초보 수준으로 활용하고 있다. 인스타페이퍼(Instapaper)나 리더빌리티(Readability) 같은 서비스는 데스크톱에서 무언가를 찾아내 저장하고, 추후에 휴대폰이나 태블릿에서 이 내용을 읽을 수 있게 해준다.
W3C는 2011년 10월, 주변 디바이스를 발견하기 위한 스펙을 작업 중이라고 발표했다5. 콘텐츠 시프팅의 잠재력을 완전히 다른 수준으로 받아들일 수 있는 문을 열어주는 내용이다. 일례를 들면, 콘텐츠를 찾기 위해 휴대폰을 사용한 후 근처 TV에서 그 콘텐츠를 다시 재생하는 것이 될 수 있다.
인터넷 익스플로러10, 크롬17+, 파이어폭스11+에서는 이미 지원되고, 사파리, 오페라, iOS, 오페라 모바일에서는 일부가 지원되는 웹 소켓(WebSockets) 같은 기술은 브라우저와 서버 간에 상호작용을 할 수 있도록 세션을 열어 준다. 이는 다중 사용자 상호작용은 물론 다중 디바이스 상호작용의 지평을 연다.
디바이스 간의 간극은 급속히 줄어든다. 이에 따라 레이아웃에 대한 우리의 관심도 점차 줄어들고 있다. 더 많은 디바이스가 연결됨에 따라 웹의 본질인 상호작용성은 점점 더 무시하기 힘들어진다. 손에 쥔 디바이스 이상을 바라봐야 하고, 그보다는 오히려 총체적인 경험의 배치를 고려해야 한다.
웹은 믿을 수 없을 만큼 강력한 매체로, 수많은 센서에 반응할 수 있고 디바이스의 물리적인 벽을 넘어설 수 있다. 단지 레이아웃에 대응하는 데 안주하지 말고, 우리 스스로에게 도전해보자.
반응형 디자인에 대한 논의가 활발하게 이루어지고 있는 가운데, 이 책은 미국 브레이킹 디벨롭먼트(Breaking Development) 등의 다양한 웹 컨퍼런스에서 회자되는 논의들을 종합적으로 정리하고 최근 프로젝트와 연구를 공개하면서, 다양한 실제 사례 코드를 수록했다. 웹 사이트 레이아웃을 넘어 성능과 접근성 관점에서 반응형 디자인을 어떻게 구현하면 좋을지 다양한 사례와 함께 알아본다.
★ 이 책에서 다루는 내용 ★
■ 플루이드(fluid) 레이아웃, 미디어 쿼리, 플루이드 미디어의 조합을 활용해 반응형 사이트 구축
■ 프로젝트 시작부터 반응형 워크플로 적용
■ 다양한 디바이스에서 콘텐츠 개선
■ 풍부한 사용자 경험을 제공하기 위한 기능 탐지 및 서버 측 개선 기법 활용
★ 저자 서문 ★
웹과 같이 동적인 매체 관련 작업의 도전 과제는 놀라울 정도의 다양성과 신속한 진화에 있다. 이는 흥미로운 부분이기도 하다.
반응형 디자인은 시작에 불과하다. 웹의 잠재력을 만족시키기 위해 한걸음 나아가는 것이지만, 단지 한걸음일 뿐이다. 현재 다양성의 관점에서 웹에 대해 생각하는 것은, 앞으로 다가올 다양성을 대비할 수 있게 해줄 것이다.
이 책에서는 주로 데스크톱, 모바일 디바이스, 태블릿에 초점을 맞추었다. 그러나 또 다른 홍수가 곧 다가온다. 스마트TV가 앞으로 각광받을 예정이고, 이에 따라 새로운 근심거리를 가득 몰고 올 것이다. 대부분 스마트TV는 여러분이 일터에서 사용하는 모니터와 동일한 해상도를 공유한다. 스크린에서 0.6미터 떨어져 있는 사람과 3.7미터 떨어져서 소파에 앉은 사람을 모두 만족시킬 수 있도록 레이아웃을 조정하는 작업은 그 자체로 충분치 않을 것이다.
스마트카라고 불리는 커넥티드 카(connected cars) 또한 인기가 빠르게 상승하는 중이다. 메르세데스 벤츠, 포드, 아우디는 이미 자동차에 인터넷 연결 기능을 탑재하고 있다. 자동차의 대시보드에 탑재된 이러한 애플리케이션의 보안성에 의문을 가질 수 있겠지만, 이미 그와 상관없이 순조롭게 진행 중이다.
차와 TV 역시 시작에 불과하다. 진공청소기, 창유리, 냉장고 같은 커넥티드 디바이스들도 모두 작업에 착수하고 있다.
나는 도입부에서, 디바이스 관련 다가오는 좀비 묵시록에 관한 스콧 젠슨의 기사를 언급한 바 있다. 기술이 점점 더 합리적인 가격에 제공됨에 따라 웹이 활성화된 디바이스의 수는 신속하게 증가하고 있다. 웹은 단일 디바이스에 제한된 플랫폼이 아니다.
사람들은 이미 콘텐츠 시프팅(contents shifting)을 초보 수준으로 활용하고 있다. 인스타페이퍼(Instapaper)나 리더빌리티(Readability) 같은 서비스는 데스크톱에서 무언가를 찾아내 저장하고, 추후에 휴대폰이나 태블릿에서 이 내용을 읽을 수 있게 해준다.
W3C는 2011년 10월, 주변 디바이스를 발견하기 위한 스펙을 작업 중이라고 발표했다5. 콘텐츠 시프팅의 잠재력을 완전히 다른 수준으로 받아들일 수 있는 문을 열어주는 내용이다. 일례를 들면, 콘텐츠를 찾기 위해 휴대폰을 사용한 후 근처 TV에서 그 콘텐츠를 다시 재생하는 것이 될 수 있다.
인터넷 익스플로러10, 크롬17+, 파이어폭스11+에서는 이미 지원되고, 사파리, 오페라, iOS, 오페라 모바일에서는 일부가 지원되는 웹 소켓(WebSockets) 같은 기술은 브라우저와 서버 간에 상호작용을 할 수 있도록 세션을 열어 준다. 이는 다중 사용자 상호작용은 물론 다중 디바이스 상호작용의 지평을 연다.
디바이스 간의 간극은 급속히 줄어든다. 이에 따라 레이아웃에 대한 우리의 관심도 점차 줄어들고 있다. 더 많은 디바이스가 연결됨에 따라 웹의 본질인 상호작용성은 점점 더 무시하기 힘들어진다. 손에 쥔 디바이스 이상을 바라봐야 하고, 그보다는 오히려 총체적인 경험의 배치를 고려해야 한다.
웹은 믿을 수 없을 만큼 강력한 매체로, 수많은 센서에 반응할 수 있고 디바이스의 물리적인 벽을 넘어설 수 있다. 단지 레이아웃에 대응하는 데 안주하지 말고, 우리 스스로에게 도전해보자.
[알라딘에서 제공한 정보입니다.]
목차정보
1장_ 어디든지, 도처에 존재하는 웹
___우리가 잘못 접근했던 것
___디바이스가 몰려 온다
______디스플레이 크기
______네트워크 속도
______표준 지원
______입력 도구
______상황
___별도의 사이트
______분기
___반응형이 되기
______진보적 개선 전략
___반응형 디자인에 대한 또 다른 책이 필요한 이유
___언급할 내용
___대상 독자들
___코드 예제
___참조 사이트
2장_ 플루이드 레이아웃
___레이아웃 옵션
______고정 너비
______플루이드 레이아웃
______엘라스틱 레이아웃
______하이브리드 레이아웃
______어떤 접근법이 가장 반응형일까
___폰트 크기 결정
______픽셀
______엠
______백분율
______보너스 라운드: 렘
______어떤 접근법이 가장 반응형일까
______픽셀로부터 변환하기
___그리드 레이아웃
______콘텐츠 아웃
______그리드 설정
___고정 너비와 플루이드 너비의 혼합
______테이블 레이아웃 - 올바른 방법
___마무리
3장_ 미디어 쿼리
___뷰 포트
______아닌 경우를 제외하고는 픽셀은 픽셀일 뿐
______뷰 포트 태그와 속성
___미디어 쿼리 구조
______미디어 타입
______미디어 표현식
______논리적 키워드
______규칙
___내부에 끼워 넣기 VS 외부에 두기
___미디어 쿼리 순서
______데스크톱 다운
______모바일 업
___핵심 사용자 경험을 만들어라
___브레이크 포인트 결정?
______콘텐츠 따라가기
______더 넓은 스크린을 위한 개선
______좀 더 유연한 미디어 쿼리를 위해 엠 사용하기
___내비게이션
______토글하기
___인터넷 익스플로러 지원
___마무리
4장_ 반응형 미디어
___무엇이 문제인가
______성능
___선택적으로 모바일에 이미지 제공하기
______자바스크립트
______matchMedia 소개
___반응형 이미지 전략
______브라우저와 맞서기
______포기하기
______서버로 가기
___반응형 이미지 옵션
______Sencha.io Src
______적응성 있는 이미지
______잠깐, 여기서 정답은 무엇일까
___배경 이미지
______우리가 해결하는 동안
___고해상도 디스플레이
______SVG
___기타 고정 너비 리소스
______비디오
______광고
___마무리
5장_ 계획
___반응형 선택
___고려사항
______성능
______상황
______콘텐츠 타협
______시간 투자
______지원
______광고
______결론
___사이트 분석을 고려하라
______왜곡된 사이트 분석
______어떤 통계가 중요한가
______왜곡된 시장점유율 통계
___콘텐츠를 고려하라
______콘텐츠 감사
______페이지 테이블
___어디로 가고 있는지 고려하라
______일부에 최적화된, 다수에 접근 가능한
___크로스 디바이스 사용자 경험을 고려하라
___테스트 베드를 준비하라
______실제 디바이스
______에뮬레이터
______제3업체의 서비스
___마무리
6장_ 디자인 워크플로
______마일리지는 다를 수 있다
______상호적인 매체
______협업
______시스템 내에서 생각하기
___모바일 먼저 생각하기
______모바일이 폭증하고 있다
______모바일이 여러분을 집중하게 한다
______모바일이 여러분의 능력을 확장시킨다
___도구
______와이어 프레임
______목업
______스타일 가이드
___마무리
7장_ 반응형 콘텐츠
___콘텐츠 작업 시작
___콘텐츠 종류
______목적
______생성
______구조
___언제, 어떤 콘텐츠를 표시할지 여부
______콘텐츠 제거
______콘텐츠 개선
___언제 콘텐츠 순서를 바꿔야 하나
______다시, 구조
___가야할 곳
______코드 수프
______아장아장 걷기
______API 만들기
___마무리
8장_ RESS
___사용자 에이전트 탐지
______사용자 에이전트 문자열 해부
______사용자 에이전트 문자열로 무엇을 할 수 있나
___기능 탐지
______모더나이저
______서버로 이동
___사용자 에이전트 탐지와 기능 탐지 결합
___RESS: 양측 세계의 최선책
___혼란 상태
___WURFL 설치
______구성
___기능 탐지
______전화 걸기
______터치에 최적화하기
___마무리
9장_ 반응형 경험
___센서 시스템
___네트워크
______무엇을 할 수 있나
___컨텍스트
______컨텍스트 분류
______관찰하고 조사하라
___기능
______HTML5 입력 타입
______API
___마무리
맺음말_ 미래를 생각하며
___우리가 잘못 접근했던 것
___디바이스가 몰려 온다
______디스플레이 크기
______네트워크 속도
______표준 지원
______입력 도구
______상황
___별도의 사이트
______분기
___반응형이 되기
______진보적 개선 전략
___반응형 디자인에 대한 또 다른 책이 필요한 이유
___언급할 내용
___대상 독자들
___코드 예제
___참조 사이트
2장_ 플루이드 레이아웃
___레이아웃 옵션
______고정 너비
______플루이드 레이아웃
______엘라스틱 레이아웃
______하이브리드 레이아웃
______어떤 접근법이 가장 반응형일까
___폰트 크기 결정
______픽셀
______엠
______백분율
______보너스 라운드: 렘
______어떤 접근법이 가장 반응형일까
______픽셀로부터 변환하기
___그리드 레이아웃
______콘텐츠 아웃
______그리드 설정
___고정 너비와 플루이드 너비의 혼합
______테이블 레이아웃 - 올바른 방법
___마무리
3장_ 미디어 쿼리
___뷰 포트
______아닌 경우를 제외하고는 픽셀은 픽셀일 뿐
______뷰 포트 태그와 속성
___미디어 쿼리 구조
______미디어 타입
______미디어 표현식
______논리적 키워드
______규칙
___내부에 끼워 넣기 VS 외부에 두기
___미디어 쿼리 순서
______데스크톱 다운
______모바일 업
___핵심 사용자 경험을 만들어라
___브레이크 포인트 결정?
______콘텐츠 따라가기
______더 넓은 스크린을 위한 개선
______좀 더 유연한 미디어 쿼리를 위해 엠 사용하기
___내비게이션
______토글하기
___인터넷 익스플로러 지원
___마무리
4장_ 반응형 미디어
___무엇이 문제인가
______성능
___선택적으로 모바일에 이미지 제공하기
______자바스크립트
______matchMedia 소개
___반응형 이미지 전략
______브라우저와 맞서기
______포기하기
______서버로 가기
___반응형 이미지 옵션
______Sencha.io Src
______적응성 있는 이미지
______잠깐, 여기서 정답은 무엇일까
___배경 이미지
______우리가 해결하는 동안
___고해상도 디스플레이
______SVG
___기타 고정 너비 리소스
______비디오
______광고
___마무리
5장_ 계획
___반응형 선택
___고려사항
______성능
______상황
______콘텐츠 타협
______시간 투자
______지원
______광고
______결론
___사이트 분석을 고려하라
______왜곡된 사이트 분석
______어떤 통계가 중요한가
______왜곡된 시장점유율 통계
___콘텐츠를 고려하라
______콘텐츠 감사
______페이지 테이블
___어디로 가고 있는지 고려하라
______일부에 최적화된, 다수에 접근 가능한
___크로스 디바이스 사용자 경험을 고려하라
___테스트 베드를 준비하라
______실제 디바이스
______에뮬레이터
______제3업체의 서비스
___마무리
6장_ 디자인 워크플로
______마일리지는 다를 수 있다
______상호적인 매체
______협업
______시스템 내에서 생각하기
___모바일 먼저 생각하기
______모바일이 폭증하고 있다
______모바일이 여러분을 집중하게 한다
______모바일이 여러분의 능력을 확장시킨다
___도구
______와이어 프레임
______목업
______스타일 가이드
___마무리
7장_ 반응형 콘텐츠
___콘텐츠 작업 시작
___콘텐츠 종류
______목적
______생성
______구조
___언제, 어떤 콘텐츠를 표시할지 여부
______콘텐츠 제거
______콘텐츠 개선
___언제 콘텐츠 순서를 바꿔야 하나
______다시, 구조
___가야할 곳
______코드 수프
______아장아장 걷기
______API 만들기
___마무리
8장_ RESS
___사용자 에이전트 탐지
______사용자 에이전트 문자열 해부
______사용자 에이전트 문자열로 무엇을 할 수 있나
___기능 탐지
______모더나이저
______서버로 이동
___사용자 에이전트 탐지와 기능 탐지 결합
___RESS: 양측 세계의 최선책
___혼란 상태
___WURFL 설치
______구성
___기능 탐지
______전화 걸기
______터치에 최적화하기
___마무리
9장_ 반응형 경험
___센서 시스템
___네트워크
______무엇을 할 수 있나
___컨텍스트
______컨텍스트 분류
______관찰하고 조사하라
___기능
______HTML5 입력 타입
______API
___마무리
맺음말_ 미래를 생각하며
[알라딘에서 제공한 정보입니다.]