인클루시브 디자인 패턴

접근성 있는 웹디자인하기

헤이던 피커링 저자(글) · 이태상 번역 · 로드니 렘 , 스티브 포크너, 윤좌진 감수

웹액츄얼리코리아 · 2020년 01월 03일

책 소개

한 명의 사용자도 놓치지 않으려면 어떻게 해야 할까?
《인클루시브 디자인 패턴(Inclusive Design Patterns)》이 그 대안이 되어줄 것이다.

인클루시브 디자인은 사용자가 겪을 수 있는 모든 상황과 조건을 고려한 디자인을 말한다. 따라서 이 디자인이 적용된 웹을 경험하는 사용자라면 별다른 노력 없이도 쉽게 웹사이트에 접근할 수 있다. 이 책은 누구라도 접근할 수 있는 인터페이스를 만드는 데 실제로 적용할 수 있는 인클루시브한 디자인 패턴에 대해 알려준다. 또 저자가 이미 검증한 HTML과 CSS·자바스크립트 라이브러리, WAI-ARIA 역할 및 콘텐츠 접근성 지침의 올바른 사용법, 반응형 디자인에서 일반적인 접근성 문제를 해결하는 방법, 건너뛰기 링크를 다루는 방법, 내비게이션 영역 및 랜드마크의 효율적인 활용법, 버튼이나 폼을 유지하는 방법 등을 구체적으로 설명한다. 웹디자인에 대한 이론적 개념이 아닌, 실무에 바로 적용할 수 있는 노하우를 상세하게 안내해준다. 이 책을 덮는 순간 여러분은 인클루시브한 디자인을 구현해내는 진정한 전문가가 돼 있을 것이다.

작가정보

저자(글) 헤이던 피커링

실용주의 디자이너, 엔지니어, 작가, 편집자, 일러스트레이터로 파시엘로그룹, BBC, 스매싱 매거진과 함께 일했다. 웹을 인클루시브하게 만드는 새롭고 혁신적인 방안에 관심이 많다. 특히 사용자 연구, 시스템적 사고, 전통적인 시맨틱 HTML과 관련된 사항을 다룬다. 최근에는 ‘더 넷 어워즈’에서 올해의 디자이너로 선발되었으며 저서로는 《Inclusive Components》가 있다. 글쓰기나 코딩, 강연을 하지 않는 시간에는 정신 건강과 관련된 활동을 하며 지낸다.

번역 이태상

자바와 웹 전문가로 주로 교육과 컨설팅 분야에 종사했으며 오랜 기간 전자금융 업무를 담당했다. 현재 금융기관의 재무회계 시스템 구축 프로젝트에 참여하고 있다. 옮긴 책으로는 《웹디자이너를 위한 자바스크립트》 《인간다운 Git》을 비롯해 다수의 IT 서적이 있다.

감수 로드니 렘

독일 남부를 근거지로 하는 웹개발자이다. 풀스택 프리랜서로 10여 년을 활동한 후에 도이치텔레콤의 스마트홈 플랫폼 퀴비콘에서 프런트엔드 개발에 참여하고 있다. URI.js3와 ally.js4의 제작자이며, 브라우저에서 LibSass를 구동하게 하는 Sass.js5 개발에도 참여했다. 그리고 세계 최초로 버기필(buggyfill)을 만들었다.

감수 스티브 포크너, 윤좌진

스티브 포크너
웹 접근성 수석 컨설턴트이자 TPG 캐피털 기술 이사이다. 2006년 파시엘로그룹에 합류했으며 그전에는 비전오스트레일리아의 웹 접근성 수석 컨설턴트였다. 또한 접근성 테스트 도구인 Web Accessibility Toolbar 개발을 지휘하고 있다. W3C 웹 플랫폼 워킹그룹과 ARIA 워킹그룹을 포함한 여러 단체에서 활동하고 있으며, 여러 W3C 표준 명세 편집자이기도 하다.

윤좌진
네이버 Group&CIC Band 웹 서비스 개발자이다. 2006년부터 웹 표준과 웹 접근성에 관심을 가지기 시작했다. 커뮤니티 활동과 웹 접근성 평가 활동을 통해 웹 접근성을 알리는 활동을 했고, “웹 접근성을 고려한 콘텐츠 제작 기법 2.0”과 “한국형 웹 콘텐츠 접근성 지침 2.1” 제작에 참여했다.

목차

• 한국어판 출간에 앞서
  추천의 글
  들어가며
  
  문서
  단락
  블로그 포스트
  패턴에 의한 평가
  내비게이션 영역
  메뉴 버튼
  인클루시브 프로토타입
  제품 목록
  필터 위젯
  등록 폼
  테스트 주도 마크업
  
  참고 자료

책 속으로

문서
이 책의 다른 장에서는 모듈이나 컴포넌트로서의 여러 인터페이스 패턴을 개별적으로 살펴볼 것이다. 하지만 그 패턴들이 궁극적으로 웹 문서에 포함된다는 사실을 인식하지 않는다면 아무 의미가 없다. - p. 23

단락
처음 상상한 것보다 단락 디자인에는 고려할 사항이 더 많이 있다. 우리는 서체, 행간, 폭, 양쪽 맞춤, 대비, 포커스 표시 등을 살펴보면서 매우 다양한 사람들에게 알맞은 단락을 만드는 올바른 방향으로 나아갈 준비를 갖추었다. - p. 68

블로그 포스트
블로그 포스트는 블로그의 주요 콘텐츠를 형성한다. 이 장에서는 퍼머링크Permalink(또는 고유 주소)로 접근할 수 있는 인클루시브한 블로그 포스트의 구조에 대해 알아보자. 이때 반드시 시맨틱 구조와 소스 순서를 생각해야 한다. 또한 효과적인 링크 텍스트, 비디오 콘텐츠와의 결합, 그리고 콘텐츠 편집자의 작업을 덜어주는 자동화된 플로 시스템flow system 제작에 대해서도 살펴볼 것이다. - p. 71

패턴에 의한 평가
처음부터 인클루시브 디자인 방법을 교육하고 훈련하는 것이 훨씬 더 가치 있고 효과적이다. 패턴에 의한 개선은 디자인 싱킹을 개선 과정에 포함시킴으로써 고객이 현재 제품을 수정하는 데 도움을 주며, 미래의 인클루시브 디자인 의사결정에도 신뢰를 불어넣는다. - p. 111

내비게이션 영역
위키피디아는 보조 기술에서 차례를 찾을 수 있게 〈h2〉 ‘Contents’를 제공한다. 각 절에 링크된 차례는 사실상의 내비게이션 랜드마크다. 따라서 상위 요소에 role="navigation"을 부여해 위키피디아보다 더 보기 좋게 만들 수 있다. 각 링크는 페이지 안의 해당 절에 대응하는 프래그먼트 식별자(fragment identifier)를 가리킨다. - p. 137

메뉴 버튼
메뉴는 늘 충분히 넓은 뷰포트에 있어야 한다. 특히 모바일과 같은 손바닥만한 크기에서 터치 조작을 해야 하는 경우에 더욱 그렇다. 예컨대 햄버거 메뉴를 터치로 조작하게 할 때는 각별히 고민해야 한다. 류머티즘성관절염으로 손동작에 제한이 있는 사용자들도 포용해야 하기 때문이다. - p. 167

인클루시브 프로토타입
어떤 모양과 느낌의 사용자 경험을 갖게 할 것인지보다 사용자 행동을 어떻게 실행할 것인지를 먼저 생각해야 한다. 미학과 기쁨에 대해 생각하는 것은 현 단계에서는 너무 먼 이야기다. 지금 필요한 것은 사용성을 위한 프로토타입이며 프로토타이핑 경험을 인클루시브하게 만들수록 더 많은 사용자가 유용성을 얻게 될 것이다. - p. 170

제품 목록
제품 목록은 사용자가 검색한 다음에 반환되는 사진들이다. 개별 제품이 어떻게 보이고 설명되어 있는지 참고 그림과 콜투액션을 포함해서 살펴보아야 한다. 결국 목표는 사용자가 제품을 사게 하는 것이다. - p. 184

필터 위젯
가능하면 XHR(XML Http Request)를 통해 콘텐츠가 다시 채워지게 해야 한다. 그렇게 하면 페이지를 새로고침하지 않아도 새 콘텐츠가 추가되며, 포커스가 그대로 남아 있으므로 키보드 사용자는 위젯에서 콘텐츠로 바로 진행할 수 있게 된다. - p. 216

등록 폼
남아 있는 가장 큰 과제는 인클루시브한 폼 검증 경험을 제공하는 것이다. 유효성 검증에는 많은 유동적인 부분이 있으며 일부 사용자에게 조화롭지 못하고 쓸모없는 경험을 주기도 한다. 이에 대한 해법은 유효성 검증 과정에서 관점을 분리시켜 다음과 같은 두 가지 핵심 메시지를 전달하는 데 있다. - p. 256

테스트 주도 마크업
테스트 주도 마크업 방식이 일반적인 접근성 테스트 방식과 다른 점은 명확하다. a11y.css와 같은 CSS 기반의 북마클릿이나 tenon.io와 같은 고급 API를 사용하면 포괄적인 의미의 에러도 나타나게 해준다. 이는 특히 WCAG를 준수할 때 더욱 중요하다. - p. 283

출판사 서평

오늘날 대부분의 사람들은 웹사이트 또는 애플리케이션 사용자다. 하지만 저마다 제각각인 상황과 조건에서 웹에 접근하기 때문에 특정 대상을 기준으로 만들어진 웹사이트는 결국 다른 많은 사용자를 소외시키게 된다. 접근성 있는 웹사이트라면 난독증 같은 읽기장애가 있거나 기술 지식이 부족한 사용자도 어려움 없이 사용할 수 있어야 하며, 네트워크가 느린 환경에서도 콘텐츠는 가능한 한 빨리 사용자에게 도달해야 한다. 그것이 사용자가 웹사이트를 방문하는 목적이다.
개발자나 디자이너는 웹사이트 사용자의 다양성을 인정하고 가능한 모든 유형의 사용자에게 접근성 있는 웹사이트를 만들 수 있어야 한다.
바로 지금이 인클루시브 디자인을 도입해야 할 때다. 인클루시브 디자인의 핵심은 특별한 집단을 대상으로 하지 않고 어떤 집단이든 함부로 배제하지 않는다. 인클루시브 디자인을 적용하면 다양한 사용자를 포용할 뿐 아니라 보다 넓은 시장을 확보할 수 있다.

사용자를 먼저 생각하는 웹디자인
그동안 웹디자인 책은 프레임워크나 전처리기 등을 사용해 개발 속도를 높이고, 개발자의 작업 흐름을 개선하고, 편하게 디자인하는 방법에 대해서만 이야기했다. 하지만 이 책에서는 온전히 웹사이트 사용자의 입장에서 어떻게 하면 그들이 더 쉽고 편하게 웹을 사용할 수 있는가를 고민한다. HTML, CSS, 자바스크립트, SVG 등 표준 웹 기술이 제공 가능한 것들에 대해 소개하지만 그것은 직접적으로 사용자 경험의 품질을 개선하는 경우에만 집중해 설명한다. 이를테면 정보 전달에서 중요한 역할을 하는 텍스트의 경우, 한 단락 안에서 한 줄의 길이, 정렬 스타일, 서체 등 사용자 입장에서 보기 좋은 것들을 요소별로 설명한다. 사용자가 웹사이트를 사용할 때 접하게 되는 요소들을 하나하나 짚어가며 어떤 것이 사용자가 사용하기 편안한지 사례와 함께 보여준다. 이 책에서 얻은 정보들을 설계 과정의 초기 단계부터 적용한다면 접근성 있는 인터페이스를 유지할 수 있게 될 것이다. 또한 번거롭고 불필요한 코드 없이 인클루시브한 웹사이트를 디자인하고 구축하는 방법을 정확히 알게 될 것이다.

왜 인클루시브 디자인인가
인클루시브 디자인을 적용하면 능숙하게 사이트를 다루는 사용자의 이해도 향상될 뿐아니라 초보 사용자도 소외되지 않는다. 읽는 데 어려움이 있는 사람들에게 적합한 서체를 선택한다면 모든 사람이 만족하는 결과에 도달할 수 있다.
인클루시브 디자인의 가장 큰 장점은 기존 방식들보다 결코 어렵거나 복잡하지 않다는 것이다. 이 책은 포용성이라는 렌즈를 통해 통상적인 웹 인터페이스 패턴들을 검토함으로써 더욱 폭넓은 사용자를 얻을 수 있는 방법을 제시하고 있다.

시행착오 없이 적용하는 인클루시브 디자인
접근성 전문가인 저자는 이론적인 개념이 아닌, 실무에 바로 적용할 수 있는 인클루시브 디자인의 여러 사례를 매우 구체적으로 알려준다. 시각장애인을 위한 서비스, 네트워크 환경이나 외부에서 접속하는 사용자 등 다양한 경우에 걸맞은 코드도 적용해볼 수 있다. 그 밖에도 WAI-ARIA 역할, 콘텐츠 접근성 지침, 랜드마크 역할, 키보드 접근성, 사용성을 위한 프로토타이핑 등 접근성에 관한 모든 것을 세세하게 설명하고 있다. 또 실무에 적용할 수 있는 수십 가지 실용적인 인터페이스 구성 요소와 인클루시브 디자인의 작업 방식도 담겨 있다.
이 책을 통해 여러분은 시행착오 없이 접근성 있는 웹사이트를 디자인하고 구축하는 방법을 자신하게 될 것이다.

기본정보

ISBN	9791185885247
발행(출시)일자	2020년 01월 03일
쪽수	288쪽
크기	151 * 216 * 24 mm / 498 g
총권수	1권