이 책에서 다루는 내용

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

저자 서문

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

옮긴이의 말

우리는 모바일 웹과 PC 웹이 함께 존재하는 세상에 살고 있다. 두 가지 웹은 대상 장치가 다르다. PC 웹을 모바일에서 보면 해상도가 맞지 않거나 일부만 보인다거나, 글자 크기도 제멋대로다. 사실 이런 차이가 있기만 하면 다행인 것이, 심지어는 PC 웹을 PC에서 보더라도 해상도를 변경하면 글자 크기는 그대로이거나, 깨져 보이는 현상이 발생하곤 한다. 이는 기술적 문제가 아닌 디자인에서의 결함이다. 장치 및 접근 환경의 변화에 대응할 수 있는 디자인이 아닌 고정된 디자인이라는 것이다.

이렇게 모바일 웹과 PC 웹이 별도로 존재하는 현재 상황에 대해 다양한 시각이 존재하는데, 한 쪽은 이러한 별개 웹의 존재는 필연적이라 보고, 다른 한 쪽은 지금 상태를 또 다른 기술적 진보를 위한 과도기적인 상태로 본다.

내가 여기서 의미한 기술적 진보는 바로 이 책에서 다루는 '반응형 디자인(Responsive Design)'이다. 반응형 디자인은 말 그대로 사용자 환경에 반응하여 최적의 사용자 경험을 제공하기 위한 디자인이다. 이렇게 사용자 환경에 최적화된 사이트를 만들 때 필요한 도구와 방법, 단계에 대한 설명을 이 책에서 저자는 실제 코드 예시와 함께 찬찬히 풀어나간다. 이 책을 읽고 나면 전반적인 반응형 디자인에 대한 윤곽과 내용이 확실히 머릿속에 들어올 것이다. 이 책에서 가장 좋았던 점은 반응형 웹 디자인 커뮤니티의 구성원들이 기고한 기사들이었다. 각 기사들에는 구성원들의 다양한 실제 경험이 녹아 있어 책 한 권을 읽는 데 전혀 지루하지 않았고 멈춤이 없었다. 여러분도 이 책을 통해 새로운 지식을 얻고 목적했던 것을 이루리라 믿어 의심치 않는다.