홈앤서비스 SK BROADBAND

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

▣ 요약: 미래를 내다보다