책임감 있는 디자인은 바로 반응형 디자인이다. 다양한 디바이스를 대상으로 제공되는 웹사이트나 애플리케이션을 제작할 때 반드시 고려해야 할 속성으로 반응형 레이아웃이 있다. 그러나 레이아웃은 시작에 불과하다. 진정한 반응형 디자인을 위해서는 디바이스와 브라우저에서 제공하는 수많은 기능을 지원하고, 복잡한 인터페이스에서도 접근성을 유지하며 네트워크를 통해 웹사이트를 전달하는 방식도 발전시켜야 한다. 이 책은 반응형 디자인을 구현하는 과정에서 마주칠 수 있는 여러 가지 문제를 예제와 함께 자세히 알려주고 있다. 브라우저의 기능이나 제약에 관계없이 발생 가능한 여러 가지 접근성 및 성능 관련 문제를 사전에 제거해 최적화된 사용자 경험을 제공할 수 있게 될 것이다.

저자 : 스콧 젤 웹디자이너 겸 개발자. 플로리다 시그로브비치에서 살고 있다. 디자인, 프런트엔드 개발 스튜디오 필라멘트 그룹의 우수한 사람들과 함께 일하고 있으며 보스턴 글로브, 레고 그룹, 글로벌 뉴스 캐나다, 이베이 및 그 밖의 다양한 기업과도 함께 일하고 있다. 또한 ‘언 이벤트 어파트’를 비롯한 다양한 콘퍼런스에서 강연했다. 크로스 디바이스 개발을 위한 접근성, 지속 가능성, 성능 지향에 초점을 맞춘 깃허브 프로젝트를 발표하는 등 오픈소스 커뮤니티에 적극적으로 참여하고 있다. 역자 : 남기혁 고려대학교 컴퓨터학과에서 학사, 석사 과정을 마친 후 한국전자통신연구원(ETRI)에서 선임 연구원으로 근무하던 중에 (주)프리스티를 창업하여 소프트웨어 정의 네트워크(SDN) 제어 및 설정 검증 솔루션 개발 업무를 맡고 있다. 옮긴 책으로는 《전문가를 위한 The Hundred Page Machine Learning》 《C++》 《자율주행 자동차 만들기》 《Go 마스터하기》 등이 있다.

한국어판 출간에 앞서 추천의 글 서문 chapter 1 책임감 있는 디자인 chapter 2 지속성 있는 감지 방법 chapter 3 성능 고려하기 chapter 4 책임감 있게 전달하기 결론 감사의 글 참고 자료 참고 URL 찾아보기

서문
이 책의 핵심 주제는 접근성으로, 웹의 미래를 제시하는 최신 기능들을 최대한 살리는 동시에 서비스의 접근 범위를 확대하기 위한 방법에 대해 집중적으로 다루고 있다. 다양성은 웹의 본질이지 문제점이 아니다. 우리가 만드는 콘텐츠와 서비스를 가능한 한 모든 디바이스에서 접근할 수 있도록 최선을 다해야 한다. 이를 강조하는 것은 쉽게 할 수 있어서가 아니라 가치 있는 일이기 때문이다.

chapter 1 책임감 있는 디자인
반응형 디자인의 핵심 요소(가변 그리드, 가변 이미지, 미디어 쿼리)는 크로스 디바이스 인터페이스 디자인에서 중요한 역할을 한다. 하지만 반응형 디자인이 의존하고 있는 기능을 가만히 들여다보면 예상과 다르게 작동하거나 전혀 작동하지 않을 가능성이 있다. 웹사이트는 사용자의 예상치 못한 행동이나 네트워크 상태, 특이한 사용에도 잘 대처할 수 있어야 한다.

chapter 2 지속성 있는 감지 방법
요즘 나온 브라우저들은 워낙 다양하기 때문에 브라우저가 가진 기능과 제약 사항을 감지하는 기능은 사용자 경험을 제대로 전달하는 데 매우 중요한 요소가 되었다. 이런 감지 기능은 다양한 방식으로 구현할 수 있지만, 그중에서도 특히 사용자 경험을 좀더 책임감 있게 제공할 수 있는 방법이 몇 가지 있다.

chapter 3 성능 고려하기
성능 예산에 구체적으로 어떤 수치를 포함해야 할지를 파악하는 것은 쉽지 않을 뿐만 아니라 프로젝트마다 다르다. 처음부터 새롭게 시작하는 입장이라면 경쟁 웹사이트의 성능을 분석해서 얼마나 빠르게 해야 앞설 수 있는지 가늠해보는 것도 성능 예산에 대한 개념을 잡기 위한 좋은 방법이다. 웹사이트의 성능을 향상시키기 위해 코드를 추가할 때는 응답 시간의 상한선을 정해두고 이 선을 넘지 않도록 최선을 다해야 한다.

chapter 4 책임감 있게 전달하기
가장 바람직한 것은 사용자가 어떤 디바이스를 사용하는지에 상관없이 사용자가 꼭 필요로 하는 콘텐츠와 기능만 전달하는 것이다. 웹사이트는 단순히 페이지를 모아두는 곳이 아니다. 조금만 방심해도 그 복잡함에 짓눌리기 쉬운 시스템에 가깝다. 아직 기술이 발전하는 과도기 상태에 있지만 더 가볍고 화려한 사용자 경험을 어느 정도 제공할 여지는 충분히 있다. 앞으로 어떤 미래가 펼쳐질지 기대를 가지고 지켜보자.

결론
웹은 광범위한 접근과 포용성을 전제로 만들어졌다. 여기에 여러 가지 기술을 독특하고 계층화된 방식으로 응용함으로써 어느 누구도 배제하지 않으면서 더 높이 쌓기 위한 토대를 제공할 수 있다. 이러한 목표를 달성하기 위해서는 창의적으로 사고하고, 책임감 있게 제작하고, 항상 사용자를 가장 먼저 생각하는 자세가 필요하다.

단순히 다양한 화면 크기에 대처하는 데 그치지 않고 모든 디바이스에 보편적이고 지속적으로 적용할 수 있는 웹사이트와 앱을 만들기 위해 ‘책임감 있는 디자인’이 필요하다! 우리가 제공하는 콘텐츠와 서비스를 가능한 한 모든 기기에서 접근할 수 있도록 하는 것은 가치 있는 일이다. 웹은 접근 가능한 휴대용 디바이스의 폭발적인 인기 덕분에 유래 없는 광범위한 접근성을 갖게 되었다. 하지만 여기에 한 가지 문제가 있다. 웹은 생각보다 연약하다. 웹은 네트워크 연결이 갑자기 끊기거나 로딩 시간이 길어지는 등 불확실한 요소가 많다. 이는 우리가 디자인한 요소들이 사용자에게 제대로 전달되지 못할 가능성으로 이어진다. 지리적 위치나 기술적 배경 등 열악한 환경에 있는 사용자가 물론 목표로 삼는 사용자층이 아닐 수도 있다. 하지만 모든 사람을 수용할 수 있는 웹사이트를 제작하는 것은 곧 고객층을 확대할 수 있는 기회가 된다. 웹 접근성이 향상될수록 웹사이트의 사용자층은 더욱 두꺼워진다. 따라서 웹사이트를 사용하며 만나게 되는 다양한 장애를 감당하는 능력과 HTML, CSS, 이미지와 같은 자원을 선별적으로 전달하는 능력 등이 더욱 중요한 기능으로 대두할 것이다. 끊임없이 변화하는 웹 디바이스마다 디자인하지 말고, 하나의 경험을 다양한 측면으로 제공해야 한다. 접근 범위도 넓고, 사용하기도 편하고, 지속적으로 발전할 수 있도록 웹사이트를 제작하기 위해서는 반응형 디자인에 책임감 있는 개발 원칙을 몇 가지 더 보완해야 할 필요가 있다. ㆍ 사용성: 화면 크기와 디바이스가 다양한 환경에서 콘텐츠와 기능을 어떻게 표현해야 할지 고민해야 한다. 중단점을 찾고, 모듈 방식으로 디자인하고, 터치와 다양한 인터페이스를 고려해 디자인한다. ㆍ 접근성: 웹을 시각적으로 접근하는 사용자뿐만 아니라 다른 형태로 접근하는 사용자와도 웹사이트가 상호작용할 수 있도록 디자인해야 한다. 예를 들어, CSS를 사용하면 간결하고 가벼울 뿐만 아니라 네이티브 HTML 폼 요소만으로도 장애를 가진 사용자들이 컨트롤에 접근할 수 있다. ㆍ 지속성: 브라우저가 가진 기능과 제약 사항을 감지하는 것은 사용자 경험을 제대로 전달하는 데 매우 중요한 요소다. 지속성 있는 크로스 브라우저 코드 작성이 필요하다. ㆍ 성능: 성능은 사용자 경험의 핵심 요소다. 가장 바람직한 것은 사용자가 어떤 디바이스를 사용하는지에 상관없이 사용자에게 꼭 필요한 콘텐츠와 기능만 최적화해 전달하는 것이다. 이러한 책임감 있는 개발 원칙과 패턴을 적용하면 브라우저의 기능이나 제약에 관계없이 발생 가능한 여러 가지 접근성 및 성능 관련 문제에 최적화된 사용자 경험을 제공할 수 있을 것이다. 이는 오늘날 웹 개발에서 중요한 요소일 뿐만 아니라 앞으로 등장할 브라우저에 대비하는 것이기도 하다. ◆이 책에서 다루는 내용 -중단점 찾기 -모듈 방식으로 디자인하기 -터치와 다양한 인터페이스를 고려한 디자인 -디바이스 감지 -기능 감지 -책임감 있는 미디어 쿼리 -성능 예산 -요청 과정의 블로킹 최소화하기 -웹으로 전달할 파일 준비하기 -HTML, CSS, 이미지, 폰트, 자바스크립트 전달