단계적 기능 향상을 이용한 모두를 위한 웹 디자인

▣ 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 스크립트 사용하기

▣ 요약: 미래를 내다보다

최근 몇 년 간 웹은 많은 변화를 겪었다. PC 중심의 웹이 모바일 중심으로 이동했고, 그에 맞춰 사람들의 행동 패턴이나 사고 방식도 크게 바뀌었다. 스마트폰은 이제 누구나 쓰는 필수품으로 자리 잡았고, 버스나 지하철에서 스마트폰을 들여다보지 않는 사람이 거의 없을 정도다.

웹의 중심이 PC에서 모바일로 자연스럽게 옮겨지면서 모바일 환경에 대응하기 위한 웹을 만드는 기술과 방법도 iOS나 안드로이드와 같은 운영체제를 위한 네이티브 앱, 모바일 웹과 앱을 연동하는 하이브리드 앱, 그리고 모바일 웹 등의 형태로 점점 다양해지고 있다.

빠르게 변화하는 속도만큼이나 새로운 기술과 방법들이 쏟아져 나오고, 환경에 적응하지 못한 기술들은 개발자나 사용자에게 외면받기도 한다. 장밋빛 미래가 펼쳐질 것처럼 관심과 집중을 받던 기술이나 플랫폼이 한순간에 역사의 뒤안길로 사라져가는 사례들을 우리는 그동안 심심찮게 봐왔다. 이런 환경에서 웹을 만든다고 할 때, 가능하면 특정 기술이나 플랫폼에 국한되지 않고, 범용적으로 다양한 환경에서, 그리고 더 많은 사람들이 접근할 수 있게 만들고 싶을 것이다. 미래를 예측할 수 없는 불확실한 환경에서 어쩌면 이것은 현실과 동떨어진 이상적인 것이라고 말할지도 모르겠다. 이 이상이 현실이 될 수는 없는 걸까?

이와는 살짝 다른 측면에서 그동안 먼나라 얘기로만 인식돼 왔던 웹 접근성에 대해 생각해 보자.
올해 4월부터 장애인 차별 금지법이 시행되면서 그동안 밀린 숙제로만 여겨졌던 웹 접근성 확보는 이제 필수사항이 됐다. 하지만 이론적으로 알고 있는 방법들을 실제 서비스에 적용하는 것은 생각처럼 쉬운 일은 아니다. 웹접근성 확보를 위해 어떤 부분에서는 기존에 잘못된 방법으로 적용돼 있던 것을 전체적으로 손봐야 하는 일이 생길 수도 있다. 기초부터 제대로 만들지 않고 임시방편으로 그때그때 대응하다 보면 결국에는 돌이킬 수 없는 상황을 맞이하게 될 것이다. 겉으로 보이는 높은 완성도도 중요하지만 그보다 내부적으로 탄탄한 기초를 잡는 것이 더 우선돼야 한다. 그렇게 하는 것이 모든 사람들이 웹을 사용할 수 있게 하는 최선의 방법일 것이다.

이 책은 그동안 우리가 머리로는 알고 있어도 실무에서는 어느 정도 무시하고 지나쳤던 내용에 대해 다시 한번 생각해 보게 한다. 웹 접근성에 대한 내용도 그렇고, 기본적인 사용성과 UX에 대한 내용도 그렇다. 그동안 깊이 생각해 보지 않고 맹목적으로 트렌드에 이끌려 사용해 오던 기술과 UI 구현에 대해 한번 더 생각해 보고 지난 작업들을 돌아보게 한다.

혹시 당신이 개발자라면, 그동안 최신 사양의 PC와 모바일 환경에서만 볼 수 있는 웹 페이지를 만들어 오지는 않았는가? 사업적인 측면을 고려한다면 금전적인 부분과 작업 일정이 중요한 사항이기 때문에 어쩔 수 없이 대응 범위를 세부적으로 정하고 진행할 수밖에 없다고 생각할지도 모르겠다.

한 가지 다른 예로, 컴퓨터를 배워 보시겠다고 돋보기 안경을 쓰고 브라우저로 인터넷 포털에 어렵게 접속하고 계시는 나이 드신 부모님으로부터 화면 글씨가 작으니 더 크게 바꿔달라는 부탁을 받아본 적이 있는가? 그런 부모님에게 폰트 크기가 12 픽셀로 고정된 사이트를 어떻게 크게 보여드려야 할지 난감한 고민에 빠져 본 적이 있는가? 사실 그 시점에서 부모님에게 중요하면서 꼭 필요한 것은 레이아웃이 조금 틀어져 보이는 사이트의 겉모습이 아니라 크게 조정될 수 있는 텍스트다.

웹은 모두를 위한 것이다. 일반적으로 모든 사람들이 그렇게 생각하고 있다. 하지만 실제로 웹을 만들어 보면 꼭 그런 건 아니구나, 라는 생각이 들기도 한다. 모든 프로젝트에는 QA 통과 기준이 있다. 생각해 보면 모두를 위한 웹을 만드는 것인데 대응 기준 자체가 있다는 것이 말이 안 되는 것이다. 머리로는 이해가 되지만 서비스의 특성이나 기능 구현을 생각해 본다면 현실적으로 받아들이기에는 조금 힘든 생각이기도 하다.

그처럼 받아들이기 힘든 부분을 가능하게 하려면 일정 부분은 포기해야 할 수도 있다. 하지만 웹 페이지가 모든 사용자에게 똑같은 모습으로 보이기보다는 동일한 사용성을 갖추는 것이 더 중요한 과업이라 생각한다. 그런 측면에서 봤을 때, 이 책에서 다루고 있는 단계적 기능 향상(Progressive Enhancement)은 모두를 위한 웹을 만들기 위한 하나의 방법론이 될 수 있을 것이다. 특정 기술이나 플러그인에 국한되지 않고 웹에서 사용되는 기본적인 HTML, CSS, 자바스크립트를 이용해 차근차근 설명해 나간다. 아직까지 국내에서는 초기 단계라고 볼 수 있는 웹 접근성에 대한 설명과 대응 방법도 다루고 있기 때문에 실제로 개발 중인 프로젝트에 바로 적용할 수 있는 내용도 많을 것이다.

웹 분야와 관련된 좋은 원서가 있으면 그것을 좀 더 빨리 번역해서 국내에 소개하고 싶었던 개인적인 바람으로 이 책의 번역을 시작하게 됐다. 좋은 것은 함께 나누고 함께 알면 좋겠다는 생각을 항상 하고 있기 때문이다. 비록 그 바람이 빠른 시간 안에 이뤄지지는 않았지만 이 책에 담긴 생각과 내용은 여전히 훌륭하다고 생각한다. 이 책을 번역하면서 웹에 대한 최신 기술과 트렌드에 관심을 가지는 것도 중요하지만 웹에 대한 근본적이면서 지속적인 고민도 필요하다는 점을 느꼈다. 부디 이 책에서 설명하는 개념과 예제가 실제로 이 책을 읽는 독자들에게 많은 도움이 됐으면 하는 바람이다.

흔히, 점진적 향상이라고도 번역되는 'Progressive Enhancement'를 이 책에서는 '단계적 기능 향상'이라고 번역했다. '점진적'이라는 용어를 경사가 있는 오르막 길에 비유한다면 '단계적'이라는 용어를 계단에 비유할 수 있을까? '점진적 향상'보다는 '단계적 기능 향상'이라는 용어가 이 책에서 설명하는 내용을 좀 더 구체화하는 데 적절하다고 생각했다.
- 역자 서문 중에서