간편결제, 신용카드 청구할인
삼성카드 6% (20,310원)
(삼성카드 6% 청구할인)
인터파크 롯데카드 5% (20,520원)
(최대할인 10만원 / 전월실적 40만원)
북피니언 롯데카드 30% (15,120원)
(최대할인 3만원 / 3만원 이상 결제)
NH쇼핑&인터파크카드 20% (17,280원)
(최대할인 4만원 / 2만원 이상 결제)
Close

인클루시브 디자인 패턴 : 접근성 있는 웹디자인하기

원제 : Inclusive Design Patterns
소득공제

2013년 9월 9일 이후 누적수치입니다.

판매지수 249
?
판매지수란?
사이트의 판매량에 기반하여 판매량 추이를 반영한 인터파크 도서에서의 독립적인 판매 지수입니다. 현재 가장 잘 팔리는 상품에 가중치를 두었기 때문에 실제 누적 판매량과는 다소 차이가 있을 수 있습니다. 판매량 외에도 다양한 가중치로 구성되어 최근의 이슈도서 확인시 유용할 수 있습니다. 해당 지수는 매일 갱신됩니다.
Close
공유하기
정가

24,000원

  • 21,600 (10%할인)

    1,200P (5%적립)

할인혜택
적립혜택
  • I-Point 적립은 출고완료 후 14일 이내 마이페이지에서 적립받기한 경우만 적립됩니다.
  • 추가혜택
    배송정보
    •  당일배송을 원하실 경우 주문시 당일배송을 선택해주세요.
    • 서울시 강남구 삼성로 512변경
    • 배송지연보상 안내
    • 무료배송
    • 해외배송가능
    주문수량
    감소 증가
    • 이벤트/기획전

    • 연관도서

    • 사은품(5)

    책소개

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

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

    출판사 서평

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

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

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

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

    목차

    한국어판 출간에 앞서
    추천의 글
    들어가며

    문서
    단락
    블로그 포스트
    패턴에 의한 평가
    내비게이션 영역
    메뉴 버튼
    인클루시브 프로토타입
    제품 목록
    필터 위젯
    등록 폼
    테스트 주도 마크업

    참고 자료

    본문중에서

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

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

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

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

    내비게이션 영역
    위키피디아는 보조 기술에서 차례를 찾을 수 있게

    ‘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)

    관련이미지

    저자소개

    헤이던 피커링 [저] 신작알림 SMS신청 작가DB보기
    생년월일 -
    출생지 -
    출간도서 0종
    판매수 0권

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

    생년월일 -
    출생지 -
    출간도서 0종
    판매수 0권

    자바와 웹 전문가로서 교육과 컨설팅을 주로 했으며, 오랜 기간 전자 금융 업무를 담당했다. 현재 한 금융기관의 재무회계 시스템 구축 프로젝트에 참여하고 있다. 에이콘출판사의 『톰캣 최종분석』(2005), 『리액트 네이티브 앱 제작 원론』(2018) 등 다수의 IT 서적을 번역했다.

    로드니 렘 [감수]
    생년월일 -
    출생지 -
    출간도서 0종
    판매수 0권

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

    스티브 포크너 [감수]
    생년월일 -
    출생지 -
    출간도서 0종
    판매수 0권

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

    윤좌진 [감수]
    생년월일 -
    출생지 -
    출간도서 0종
    판매수 0권

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

    이 책과 내용이 비슷한 책 ? 내용 유사도란? 이 도서가 가진 내용을 분석하여 기준 도서와 얼마나 많이 유사한 콘텐츠를 많이 가지고 있는가에 대한 비율입니다.

      리뷰

      0.0 (총 0건)

      구매 후 리뷰 작성 시, 북피니언 지수 최대 600점

      리뷰쓰기

      기대평

      작성시 유의사항

      평점
      0/200자
      등록하기

      기대평

      0.0

      교환/환불

      교환/환불 방법

      ‘마이페이지 > 취소/반품/교환/환불’ 에서 신청함, 1:1 문의 게시판 또는 고객센터(1577-2555) 이용 가능

      교환/환불 가능 기간

      고객변심은 출고완료 다음날부터 14일 까지만 교환/환불이 가능함

      교환/환불 비용

      고객변심 또는 구매착오의 경우에만 2,500원 택배비를 고객님이 부담함

      교환/환불 불가사유

      반품접수 없이 반송하거나, 우편으로 보낼 경우 상품 확인이 어려워 환불이 불가할 수 있음
      배송된 상품의 분실, 상품포장이 훼손된 경우, 비닐랩핑된 상품의 비닐 개봉시 교환/반품이 불가능함

      소비자 피해보상

      소비자 피해보상의 분쟁처리 등에 관한 사항은 소비자분쟁해결기준(공정거래위원회 고시)에 따라 비해 보상 받을 수 있음
      교환/반품/보증조건 및 품질보증 기준은 소비자기본법에 따른 소비자 분쟁 해결 기준에 따라 피해를 보상 받을 수 있음

      기타

      도매상 및 제작사 사정에 따라 품절/절판 등의 사유로 주문이 취소될 수 있음(이 경우 인터파크도서에서 고객님께 별도로 연락하여 고지함)

      배송안내

      • 인터파크 도서 상품은 택배로 배송되며, 출고완료 1~2일내 상품을 받아 보실 수 있습니다

      • 출고가능 시간이 서로 다른 상품을 함께 주문할 경우 출고가능 시간이 가장 긴 상품을 기준으로 배송됩니다.

      • 군부대, 교도소 등 특정기관은 우체국 택배만 배송가능하여, 인터파크 외 타업체 배송상품인 경우 발송되지 않을 수 있습니다.

      • 배송비

      도서(중고도서 포함) 구매

      2,000원 (1만원이상 구매 시 무료배송)

      음반/DVD/잡지/만화 구매

      2,000원 (2만원이상 구매 시 무료배송)

      도서와 음반/DVD/잡지/만화/
      중고직배송상품을 함께 구매

      2,000원 (1만원이상 구매 시 무료배송)

      업체직접배송상품 구매

      업체별 상이한 배송비 적용