모두를 위한 웹 디자인(단계적 기능 향상을 이용한)(위키북스 오픈소스 웹 시리즈 51)

단계적 기능 향상(Progressive Enhancement)과 리치 인터넷 애플리케이션에 대한 접근 표준(WAI-ARIA)을 적용한 웹 UI 만들기!



이 책에서는 단계적 기능 향상을 적용해 모든 사용자가 다양한 환경에서 사용할 수 있는 웹 페이지를 만드는 방법을 소개한다.



단계적 기능 향상의 개념을 설명하고, 그 개념이 적용된 웹 UI를 만들고, WAI-ARIA를 이용해 웹 접근성까지 고려한 최종 UI를 만드는 방법을 다양한 사례를 통해 설명한다. 또 사용자들이 접속하는 환경에 따라 그 환경에서 지원 가능한 기능과 스타일을 선택할 수 있게 브라우저의 지원 범위를 확인하는 스크립트들을 이용해 UI 모듈의 스타일과 기능 구현을 선택할 수 있는 방식을 소개하고, 각 예제 UI에 그 기법을 적용해 설명한다.



각 예제의 UI를 만들기 위한 시맨틱 마크업의 작성, CSS의 적용, 기능과 동작을 위한 스크립트를 순서대로 차근차근 설명함으로써 누구든지 각 과정을 따라 하기만 하면 결과물을 만들 수 있는 형태로 구성돼 있다. 그리고 UI의 목적과 형태에 맞게 WAI-ARIA를 적용해 웹 접근성을 개선하기 위한 실무적인 방법을 소개한다.



《출판사 리뷰》



단계적 기능 향상은 다양한 사용자에게 가능한 최상의 경험을 제공하는 것을 목적으로 삼고, 코드 작성과 테스트도 단순화하는 웹 개발 접근법이다. 사람들이 사이트에 어떤 기기를 통해 접근하든(아이폰이나 최신 사양의 컴퓨터, 또는 스크린리더를 이용해) 이해하고 사용하기 쉬운 경험이 돼야 하고 가능한 한 모든 기능을 이용할 수 있어야 한다.



이 책이 바로 그렇게 하는 방법을 보여 줄 것이다. 이 책은 단계적 기능 향상의 원리와 장점을 이해하기 위한 실무 가이드일 뿐 아니라 여러분이 디자이너이든 개발자든 상관없이 단계적 기능 향상을 구현하는 구체적인 코드와 스크립트를 언제, 어느 부분에 어떻게 적용하는지 알려줄 것이다.



★ 이 책에서 다루는 내용 ★



◎ 일반적인 코딩 방식이 사용자를 배려하지 않는 이유와 단계적 기능 향상이 좀 더 포괄적으로 접근하는 대안이 될 수 있는 방법

◎ 복잡한 인터페이스 디자인을 분석하고, 어떤 환경에서도 동작하는 시맨틱 HTML 경험의 기초를 다지고, 그 위에 개선 사항을 안전하게 추가하는 방법

◎ 기능 향상을 적용할 수 있는 기기에만 기능 향상을 반영하는 데 도움이 되는 브라우저 테스트

◎ 단계적 기능 향상을 적용하기 위한 HTML, CSS, 자바스크립트 코드 작성의 실무 사례와 HTML5와 CSS3 기법을 효과적으로 적용할 수 있는 사례

◎ 범용적인 접근을 보장하기 위한 WAI-ARIA 및 키보드 지원과 같은 접근성 기능 적용 방법

◎ 시맨틱 HTML을 프로젝트에 바로 적용할 수 있는 jQuery 기반 위젯을 비롯한 슬라이더, 탭, 트리 컨트롤, 차트와 같은 인터랙티브 컴포넌트로 변환하는 구체적인 기법

▣ 00장: 단계적 기능 향상을 이용한 디자인 사례



더 넓어진 웹 세상

- 모든 사람이 웹을 이용하고 있거나 곧 그렇게 될 것이다.

- 사용자의 기대감 이끌기

- 사용자 접근성 필요 증대

- 다른 기기를 이용한 웹 접속의 증가

- 기기와 브라우저의 질긴 생명의 끈

웹 2.0의 지뢰들

- 브라우저에 대한 편협한 관점

- "자바스크립트가 꼭 필요"하다면 많은 사용자가 떠날 것이다.

- CSS는 또 다른 오류가 발생할 잠재성이 있다

- 부가기능의 블랙 박스

- 새로운 기기는 예상하지 못한 인터랙션 규칙을 동반한다.

단계적 기능 향상이 방법이다



[1부] 테스트 주도적인 단계적 기능 향상 접근법



▣ 01장: 접근 방식



브라우저 성능 테스트

단계적 기능 향상을 위한 계획 : 자세히 살펴보기

설계에서 적용까지: 단계적 기능 향상을 적용한 개발 요소 만들기

실전에 적용하기



▣ 02장: 단계적 기능 향상 적용하기 : 자세히 살펴보기



자세히 살펴보기 개요

- 콘텐츠 계층구조 정의와 컴포넌트 HTML 매핑

- 기초 마크업, 최소한의 안전 스타일 만들기

- 마크업, 스타일, 스크립트 개선사항 적용하기

사례 1: 뉴스 웹 사이트에서의 구조와 구성 계획하기

- 콘텐츠 구성과 네이밍 평가하기

- 콘텐츠 구성을 위한 기본 HTML 계층구조 특성 이용

- 내비게이션 구조잡기

- 레이어 콘텐츠와 애니메이션 콘텐츠 적용

- 동적인 필더링과 정렬 지원

사례 2: 결제 페이지 프로세스, 유효성, 데이터 전송

- 결제 페이지 디자인 파헤치기

- 접근성을 보장하기 위한 폼 마크업

- 제약사항과 검증절차 적용하기

- 기본 경험과 향상된 경험 결합하기

사례 3 : 인터랙티브한 데이터의 시각화

- 예산 라인 그래프를 위한 기초 마크업 선택

- 접근성이 높은 슬라이더 폼의 기초 마크업 만들기

- 파이 그래프 만들기

사례 4: 브라우저에서 모든 기능이 지원되는 포토 매니저

- 글로벌 내비게이션 요소 마크업하기

- 복잡한 앨범과 다중 인터랙션 지원하기

- 사용자 정의 폼과 오버레이 메뉴 만들기

- 뒤로 가기 버튼 지원하기

'자세히 살펴보기'를 적용할 때 필요한 체크리스트



▣ 03장: 의미있는 마크업 만들기



텍스트와 이미지 마크업

- 의미있는 마크업 텍스트를 표현하기 위한 요소

- 리스트(List)

- 표를 이용한 데이터(tabular data)

- 이미지(Images)

- 리치 미디어(Embedded rich media)

- 외부 페이지 콘텐츠 추가하기

인터랙티브한 콘텐츠 마크업하기

- 앵커 링크

- 폼 구조

- 폼 제어

페이지의 문맥 작성하기

- 블록 vs. 인라인 요소를 사용할 때 알아야 할 것

- ID와 class를 이용해 요소 인식하기

- WAI-ARIA 랜드마크 role을 이용해 메인 페이지 인식하기

- 읽을 수 있는 코드 순서 유지하기

- title 어트리뷰트를 이용하라

HTML 문서 설정하기

- DOCTYPE

- 문서의 헤더

접근성 추가하기

- 접근성 가이드라인과 법률 표준

- 웹 콘텐츠 접근성 가이드라인 (Web Content Accessibility Guidelines, WCAG)



▣ 04장: 효과적으로 스타일 적용하기



페이지에 CSS 적용하기

- 외부 스타일스트에서 스타일 운영하기

- 외부 스타일시트 연결하기

- 의미있는 명명 규칙 사용하기

기본 경험과 향상된 경험 스타일 입히기

- 기본 경험을 제공하는 안전한 스타일

- 향상된 경험을 제공하는 스타일 적용하기

접근성 고려하기

브라우저의 비일관성과 버그 다루기

- 조건부 주석

- 일반적인 이슈와 해결책



▣ 05장: 스크립트를 이용한 향상과 인터랙션



자바스크립트 올바르게 참조하기

- 인라인 자바스크립트 사용 금지

- 외부 자바스크립트 참조하기

기본 경험에서 자바스크립트 위치 이해하기

스크립트 향상을 위한 실무 사례

- 콘텐츠가 준비되면 스크립트를 실행하라

- 마크업에 동작 적용하기

- 자바스크립트를 이용해 향상된 마크업 만들기

- 콘텐츠의 노출 관리하기

- 스타일 향상 적용하기

사용성과 접근성의 유지와 강화

- 키보드 접근 적용하기

- WAI-ARIA 어트리뷰트 지정하기

- 접근성 테스트

- 뒤로 가기 버튼의 관리



▣ 06장: 브라우저 성능 테스트



EnhanceJS : 성능 테스트 프레임워크

EnhanceJS의 매커니즘 : 테스트 방법

EnhanceJS를 이용해 개선사항 적용하기

EnhanceJS 설정

- 추가 스타일시트 로딩하기

- 추가 스크립트 로딩하기

- 경험 토글 링크 수정하기

- EnhanceJS의 pass/fail 조정하기

EnhanceJS 테스트 세트 확장하기

- EnhanceJS 옵션으로 테스트 세트 수정하기

- EnhanceJS의 인스턴스 생성하기

- 디버깅을 위한 성능 테스트 경고 활성화

서버에서 EnhanceJS 최적화하기



[2부] 단계적 기능 향상 적용하기



▣ 07장: 단계적 기능 향상을 적용한 위젯 만들기



위젯 코딩 방법

위젯 예제 다루기

예제 코드 내려받기



▣ 08장: 접을 수 있는 콘텐츠



자세히 살펴보기

접근이 쉬운 접을 수 있는 콘텐츠 만들기

- 기초 마크업과 스타일

- 향상된 마크업과 스타일

- 접을 수 있는 스크립트 적용

접을 수 있는 스크립트 사용하기



▣ 09장: 탭 메뉴



자세히 살펴보기

탭 메뉴 만들기

- 기초 마크업과 스타일

- 향상된 마크업과 스타일

- 탭 메뉴 스크립트

좀 더 개선하기

- 즐겨 찾기와 방문기록(뒤로 가기 버튼) 탐색

- 자동으로 회전하는 탭

- 외부 탭 콘텐츠 참조하기

- 아코디언처럼 보이기

탭 스크립트 이용하기



▣ 10장: 툴팁



자세히 살펴보기

title 콘텐츠로 툴팁 만들기

- 기초 마크업과 스타일

- 향상된 마크업과 스타일

- 향상된 툴팁 스크립트

앵커 링크로 툴팁 만들기

외부 소스로 툴팁 만들기

툴팁 스크립트 사용하기



▣ 11: 트리구조 메뉴



자세히 살펴보기

트리 메뉴 만들기

- 기초 마크업과 스타일

- 향상된 마크업과 스타일

- 향상된 트리 스크립트

트리 메뉴 스크립트 이용하기



▣ 12장: HTML5 canvas를 이용한 그래프



자세히 살펴보기

기초 마크업

그래프에 접근성 추가하기

- 테이블 데이터 파싱하기

- 데이터를 가시화하기 위해 canvas 이용하기

- 향상된 테이블 스타일 적용하기

- 데이터 접근성 유지하기

canvas 그래프 좀 더 살펴 보기: visualize.js 플러그인



▣ 13장: 대화 상자와 오버레이 메뉴



자세히 살펴보기

대화상자 만들기

- 기초 마크업과 스타일

- 향상된 마크업과 스타일

- 개선된 대화상자 스크립트

대화상자 좀 더 깊이 살펴보기

대화상자 스크립트 이용하기



▣ 14장: 버튼



자세히 살펴보기

input 기반 버튼 스타일 만들기

- 기초 마크업과 스타일

- 향상된 마크업과 스타일

- hover 상태 스크립트 작성

버튼에 좀 더 복잡한 비주얼 적용하기

- 기초 마크업과 스타일

- 향상된 마크업과 스타일

- input을 button으로 변경하는 스크립트

input을 button으로 변경하는 스크립트 이용하기

버튼 좀 더 깊이 살펴보기



▣ 15장: 체크박스, 라디오 버튼, 별점



자세히 살펴보기

사용자 정의 체크박스 만들기

- 기초 마크업

- 향상된 마크업과 스타일

- 체크박스 스크립트

사용자 정의 라디오 버튼 만들기

- 기초 마크업

- 향상된 마크업과 스타일

- 라디오 버튼 스크립트

사용자 정의 input 좀 더 살펴보기 : 별점 위젯

- 기초 마크업

- 향상된 마크업과 스타일

- 별점 위젯 스크립트 만들기

사용자 정의 input과 별점 스크립트 사용하기



▣ 16장: 슬라이더



자세히 살펴보기

슬라이더 만들기

- 기초 마크업과 스타일

- 향상된 마크업과 스타일

- 슬라이더 스크립트

슬라이더 스크립트 이용하기



▣ 17장: 셀렉트 메뉴



자세히 살펴보기

접근성이 고려된 사용자 정의 셀렉트 만들기

- 기초 마크업과 스타일

- 향상된 마크업과 스타일

- 향상된 사용자 정의 셀렉트 스크립트

사용자 정의 셀렉트 좀 더 살펴보기: 최신 옵션 스타일 적용

사용자 정의 셀렉트 스크립트 이용하기



▣ 18장: 리스트 빌더



자세히 살펴보기

리스트 빌더 만들기

- 기초 마크업과 스타일

- 향상된 마크업과 스타일

- 리스트 빌더 스크립트

리스트 빌더 좀 더 살펴보기: 다중 선택, 정렬, 자동완성, 문맥 메뉴

- 다중 선택

- 드래그 앤 드롭 정렬

- 자동 완성

- 문맥 메뉴

리스트 빌더 스크립트 사용하기



▣ 19장: 파일첨부



자세히 살펴보기

사용자 정의 파일 input 만들기

- 기초 마크업과 스타일

- 향상된 마크업과 스타일

- 사용자 정의 파일 input 스크립트

사용자 정의 파일 input 스크립트 사용하기



▣ 요약: 미래를 내다보다

토드 파커 저자 토드 파커(Todd Parker)는 무선 전화기와 팜(Palm)에서부터 터치스크린 태블릿, 키오스크, 웹사이트에 이르기까지 다양한 기기의 기술적 이슈와 인터페이스의 제약 조건을 최대한 활용하는 여러 기능과 높은 접근성을 제공하는 직관적인 인터페이스 제작과 관련된 10년 이상의 경험을 가지고 있다. 그는 필라멘트 그룹 설립의 초기 멤버로서 ZEFER Corp와 CSC Consulting에서 선임 UX 디자이너로 일했다. 토드의 작업은 Communication Arts Magazine에서 디자인의 우수성을 인정받았다.