반응형 웹디자인

출간에 앞서
저자 인사말
번역 감수
서문

1장 반응형 웹
안전벨트 채우기
반응형 아키텍쳐
성공으로 가는 길

2장 가변 그리드
가변적인 타입세팅
가변 그리드 제작하기
가변 margin과 padding

3장 가변 이미지
마크업, 마크업으로 돌아가기
가변 이미지
결코 쉽지 않은 작업이기에
가변적으로 깔린 배경 이미지
overflow를 사랑하는 법 배우기
콘텐츠와 타협하기
아직 실체적 효과가 없는 가변 그리드와 가변 이미지

4장 미디어 쿼리
치료 시작하기
직면한 문제
반응형을 향해 떠밀려 가다
보다 반응적인 로봇
미디어 쿼리 실행하기
호환성에 관한 이야기
왜 가변적이어야 하는가?

5장 반응형으로 변형하기
컨텍스트의 문제
모바일 우선주의
반응형 워크플로우를 향하여
책임감 있는 반응형 디자인
점진적 향상 적용하기
전진하며 반응형 유지하기

감사의 말
사례집
참조
인덱스
A BOOK APART 소개
저자 소개

제가 느낀 흥미로운 사실은, 건축가는 건축이라는 매체가 주는 태생적인 제약을 극복하고자 애쓴다는 것입니다. 반면 웹디자이너는 새로운 기기와 새로운 변화를 맞이하면서 스스로 부여한 제약을 극복하도록 강요받고 있습니다. 우리는 태생적으로 가변적이던 웹을 제한했지만 이제 다시 풀어줄 때가 되었습니다.

특정 기기나 브라우저에 맞춰 서로 단절된 디자인 설계를 하기보다는 동일한 경험 측면에서 디자인을 다루어야 합니다. 다시 말해 가변적이면서도 기기에 적절하게 맞추어지는 사이트를 만들 수 있다는 것입니다.
즉, 반응형 웹디자인responsive web design을 사용해야 합니다. 디자이너로서 우리가 원하는 통제권을 포기하지 않으면서도 웹에 내재된 가변성을 살릴 수 있습니다. 단지 표준기술을 적용하고, 온라인 디자인에 대한 우리의 철학을 조금만 변경하는 것으로도 말이죠.
(중략)

여전히 저에게는 루크의 '모바일 우선주의' 철학이 기능성과 관련된 문제를 만났을 때 도움이 됩니다. 모바일 사용자를 위해 만든 인터페이스를 비활성화시키면 과연 그 밖의 다른 고객에게 가치가 있을까요? 유도 질문처럼 들리겠지만 대답하기는 쉽지 않을 것입니다.

왜냐하면 무엇보다 웹디자인이란 올바른 질문을 할 수 있느냐의 문제이기 때문입니다. 바로 반응형 웹디자인이 그렇습니다. 반응형 웹디자인은 웹의 내재된 가변성에 맞추어 더욱 완벽한 사이트를 제작하는 해법입니다. 첫 장에서 반응형 디자인의 속성은 가변 그리드, 가변 이미지, 미디어 쿼리라고 했습니다. 그러나 실제로 이러한 것은 사용자가 직면하고 있는 문제, 즉 끊임없이 증가하는 다양한 기기와 브라우저 안에서 콘텐츠를 배열하는 프레임 워크에 대한 해결책을 명확히 표현하기 위한 어휘에 불과합니다.

우리가 사용자의 요구에 대해 기꺼이 조사하고, 이러한 속성을 신중하게 적용한다면 반응형 웹디자인은 실로 강력한 접근 방법이 될 것입니다.

여러분의 반응형 웹디자인 경험담이 어떨지 기대가 되는군요!
(중략)

-'전진하며 반응형 유지하기' 중에서