본문 바로가기

추천 검색어

실시간 인기 검색어

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

위키북스 오픈소스 웹 시리즈 51
위키북스 · 2013년 06월 28일
0.0 (0개의 리뷰)
평가된 감성태그가
없습니다
  • 모두를 위한 웹 디자인 대표 이미지
    모두를 위한 웹 디자인 대표 이미지
  • A4
    사이즈 비교
    210x297
    모두를 위한 웹 디자인 사이즈 비교 188x240
    단위 : mm
무료배송 이벤트 소득공제
10% 27,000 30,000
적립/혜택
1,500P

기본적립

5% 적립 1,500P

추가적립

  • 5만원 이상 구매 시 추가 2,000P
  • 3만원 이상 구매 시, 등급별 2~4% 추가 최대 1,500P
  • 리뷰 작성 시, e교환권 추가 최대 300원
배송안내
무료배송
배송비 안내
국내도서/외국도서
도서만 15,000원 이상 구매 시 무료배송
도서+교보Only(교보배송)을 함께 15,000원 이상 구매 시 무료배송

15,000원 미만 시 2,500원 배송비 부과

교보Only(교보배송)
각각 구매하거나 함께 20,000원 이상 구매 시 무료배송

20,000원 미만 시 2,500원 배송비 부과

해외주문 서양도서/해외주문 일본도서(교보배송)
각각 구매하거나 함께 15,000원 이상 구매 시 무료배송

15,000원 미만 시 2,500원 배송비 부과

업체배송 상품(전집, GIFT, 음반/DVD 등)
해당 상품 상세페이지 "배송비" 참고 (업체 별/판매자 별 무료배송 기준 다름)
바로드림 오늘배송
업체에서 별도 배송하여 1Box당 배송비 2,500원 부과

1Box 기준 : 도서 10권

그 외 무료배송 기준
바로드림, eBook 상품을 주문한 경우, 플래티넘/골드/실버회원 무료배송쿠폰 이용하여 주문한 경우, 무료배송 등록 상품을 주문한 경우
주문정보를 불러오는 중입니다.
서울시 종로구 종로 1

해외주문/바로드림/제휴사주문/업체배송건의 경우 1+1 증정상품이 발송되지 않습니다.

패키지

북카드

키워드 Pick

키워드 Pick 안내

관심 키워드를 주제로 다른 연관 도서를 다양하게 찾아 볼 수 있는 서비스로, 클릭 시 관심 키워드를 주제로 한 다양한 책으로 이동할 수 있습니다.
키워드는 최근 많이 찾는 순으로 정렬됩니다.

『모두를 위한 웹 디자인』는 단계적 기능 향상을 적용해 모든 사용자가 다양한 환경에서 사용할 수 있는 웹 페이지를 만드는 방법을 소개한다. 단계적 기능 향상의 개념을 설명하고, 그 개념이 적용된 웹 UI를 만들고, WAI-ARIA를 이용해 웹 접근성까지 고려한 최종 UI를 만드는 방법을 다양한 사례를 통해 설명한다.

작가정보

저자(글) 토드 파커

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

저자(글) 스콧 젤

저자 스콧 젤(Scott Jehl)은 그래픽 디자인을 전공했지만 그의 능력은 디자인과 개발을 넘나든다. 그는 필라멘트 그룹의 초기 멤버로서 New England Journal of Medicine, Footjoy Golf, Aspen Snowmass Resorts 같은 고객과 함께 일했다. 웹사이트의 사이트 맵을 시각적으로 만들어 주는 ajax 웹 애플리케이션인 WriteMaps.com을 운영 중이며, jQuery 디자인 팀의 멤버이기도 하다.

저자(글) 패티 톨랜드

저자 패티 톨랜드(Patty Toland)는 필라멘트 그룹의 설립 파트너다. 20년 넘게 해 온 기업 및 교육 단체와의 컨설팅 경험을 필라멘트로 가져왔고, 다양한 미디어에 걸친 커뮤니케이션에 집중하고 있다. 그녀의 전문성은 브랜딩, 요소 분석, 정보 설계, 시스템 디자인, 글쓰기를 포함해 정보와 커뮤니케이션 전략을 개발하는 데 있다. 그녀는 필라멘트 그룹의 설립 멤버로서 ZEFER Corp., US Peace Corps, Kohn Cruikshank Inc., 하버드 비즈니스 스쿨에서 일했다.

저자 메기 코스텔로 와치스(Maggie Costello Wachs)는 필라멘트 그룹의 코딩과 산출물을 담당하고 있다. 그녀는 생산되는 모든 내용의 품질을 확인한다. 프론트 엔드 코딩에 대한 그녀의 전문성은 단계적 기능 향상을 적용해 최적으로 동작하는 표준 호환 마크업, CSS, 스크립트를 만드는 데 집중돼 있다. 필라멘트 그룹의 초기 멤버로서 Monitor Group과 ZEFER Corp.에서 일했다.

역자 남덕현은 SK커뮤니케이션즈, NHN에서 UI개발 업무를 담당했다. 『제프리 젤드만의 웹표준 가이드』(위키북스, 2007) 감수, 『CSS 완벽 가이드』(위키북스, 2009), 『스타일로 말해요』(위키북스, 2010)를 번역했다. 웹과 맥, 그리고 책읽기를 좋아하고, 글쓰기와 번역에 관심을 갖고 있다. SK커뮤니케이션즈 UI개발팀에서 근무하고 있다.

목차

  • ▣ 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)과 리치 인터넷 애플리케이션에 대한 접근 표준(WAI-ARIA)을 적용한 웹 UI 만들기!

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

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

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

《출판사 리뷰》

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

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

★ 이 책에서 다루는 내용 ★

◎ 일반적인 코딩 방식이 사용자를 배려하지 않는 이유와 단계적 기능 향상이 좀 더 포괄적으로 접근하는 대안이 될 수 있는 방법
◎ 복잡한 인터페이스 디자인을 분석하고, 어떤 환경에서도 동작하는 시맨틱 HTML 경험의 기초를 다지고, 그 위에 개선 사항을 안전하게 추가하는 방법
◎ 기능 향상을 적용할 수 있는 기기에만 기능 향상을 반영하는 데 도움이 되는 브라우저 테스트
◎ 단계적 기능 향상을 적용하기 위한 HTML, CSS, 자바스크립트 코드 작성의 실무 사례와 HTML5와 CSS3 기법을 효과적으로 적용할 수 있는 사례
◎ 범용적인 접근을 보장하기 위한 WAI-ARIA 및 키보드 지원과 같은 접근성 기능 적용 방법
◎ 시맨틱 HTML을 프로젝트에 바로 적용할 수 있는 jQuery 기반 위젯을 비롯한 슬라이더, 탭, 트리 컨트롤, 차트와 같은 인터랙티브 컴포넌트로 변환하는 구체적인 기법

기본정보

상품정보
ISBN 9788998139278
발행(출시)일자 2013년 06월 28일
쪽수 492쪽
크기
188 * 240 * 30 mm / 904 g
총권수 1권
시리즈명
위키북스 오픈소스 웹 시리즈
원서명/저자명 Designing with progressive enhancement : building the Web that works for everyone/Jehl, Scott

Klover

Klover 리뷰 안내
교보를 애용해 주시는 고객님들이 남겨주신 평점과 감상을 바탕으로, 다양한 정보를 전달하는 교보문고의 리뷰 서비스입니다.
1.리워드 안내
구매 후 90일 이내에 평점과 10자 이상의 리뷰 작성 시 e교환권 200원을 적립해 드립니다.
e교환권은 적립 일로부터 180일 동안 사용 가능합니다.
리워드는 작성 후 다음 날 제공되며, 발송 전 작성 시 발송 완료 후 익일 제공됩니다.
리워드는 리뷰 종류별로 구매한 아이디당 한 상품에 최초 1회 작성 건들에 대해서만 제공됩니다.
판매가 1,000원 미만 도서의 경우 리워드 지급 대상에서 제외됩니다.
한달 후 리뷰
구매 후 30일~ 120일 이내에 작성된 두 번째 구매리뷰에 대해 한 달 후 리뷰로 인지하고 e교환권 100원을 추가 제공합니다.

* 강연, 공연, 여행, 동영상, 사은품, 기프트카드 상품은 지급 제외
2.운영 원칙 안내
Klover 리뷰를 통한 리뷰를 작성해 주셔서 감사합니다. 자유로운 의사 표현의 공간인 만큼 타인에 대한 배려를 부탁합니다.
일부 타인의 권리를 침해하거나 불편을 끼치는 것을 방지하기 위해 아래에 해당하는 Klover 리뷰는 별도의 통보 없이 삭제될 수 있습니다.
  • 도서나 타인에 대해 근거 없이 비방을 하거나 타인의 명예를 훼손할 수 있는 리뷰
  • 도서와 무관한 내용의 리뷰
  • 인신공격이나 욕설, 비속어, 혐오발언이 개재된 리뷰
  • 의성어나 의태어 등 내용의 의미가 없는 리뷰

리뷰는 1인이 중복으로 작성하실 수는 있지만, 평점계산은 가장 최근에 남긴 1건의 리뷰만 반영됩니다.
3.신고하기
다른 고객이 작성리뷰에 대해 불쾌함을 느끼는 경우 신고를 할 수 있으며, 신고 자가 일정수준 이상 누적되면 작성하신 리뷰가 노출되지 않을 수 있습니다.

구매 후 리뷰 작성 시, e교환권 200원 적립

문장수집

문장수집 안내
문장수집은 고객님들이 직접 선정한 책의 좋은 문장을 보여주는 교보문고의 새로운 서비스입니다. 마음을 두드린 문장들을 기록하고 좋은 글귀들은 "좋아요“ 하여 모아보세요. 도서 문장과 무관한 내용 등록 시 별도 통보 없이 삭제될 수 있습니다.
리워드 안내
구매 후 90일 이내에 문장수집 작성 시 e교환권 100원을 적립해드립니다.
e교환권은 적립 일로부터 180일 동안 사용 가능합니다. 리워드는 작성 후 다음 날 제공되며, 발송 전 작성 시 발송 완료 후 익일 제공됩니다.
리워드는 한 상품에 최초 1회만 제공됩니다.
주문취소/반품/절판/품절 시 리워드 대상에서 제외됩니다.

구매 후 리뷰 작성 시, e교환권 100원 적립

이 책의 첫 기록을 남겨주세요

교환/반품/품절 안내

상품 설명에 반품/교환 관련한 안내가 있는 경우 그 내용을 우선으로 합니다. (업체 사정에 따라 달라질 수 있습니다.)

이벤트
TOP

저자 모두보기

매장별 재고 및 도서위치

할인쿠폰 다운로드

  • 쿠폰은 주문결제화면에서 사용 가능합니다.
  • 다운로드한 쿠폰은 마이 > 나의 통장 에서 확인 가능합니다.
  • 도서정가제 적용 대상 상품에 대해서는 정가의 10%까지 쿠폰 할인이 가능합니다.
  • 도서정가제 적용 대상 상품에 10% 할인이 되었다면, 해당 상품에는 사용하실 수
    없습니다.

적립예정포인트 안내

  • 통합포인트 안내

    • 통합포인트는 교보문고(인터넷, 매장), 핫트랙스(인터넷, 매장), 모바일 교보문고 등 다양한 곳에서 사용하실 수 있습니다.
    • 상품 주문 시, 해당 상품의 적립률에 따라 적립 예정 포인트가 자동 합산되고 주문하신 상품이 발송완료 된 후에 자동으로 적립됩니다.
    • 단, 쿠폰 및 마일리지, 통합포인트, e교환권 사용 시 적립 예정 통합포인트가 변동될 수 있으며 주문취소나 반품시에는 적립된 통합포인트가 다시 차감됩니다.
  • 통합포인트 적립 안내

    • 통합포인트는 도서정가제 범위 내에서 적용됩니다.
    • 추가적립 및 회원 혜택은 도서정가제 대상상품(국내도서, eBook등)으로만 주문시는 해당되지 않습니다.
  • 기본적립) 상품별 적립금액

    • 온라인교보문고에서 상품 구매시 상품의 적립률에 따라 적립됩니다.
    • 단 도서정가제 적용 대상인 국내도서,eBook은 15%내에서 할인율을 제외한 금액내로 적립됩니다.
  • 추가적립) 5만원 이상 구매시 통합포인트 2천원 추가적립

    • 5만원 이상 구매시 통합포인트 2천원 적립됩니다.
    • 도서정가제 예외상품(외서,음반,DVD,잡지(일부),기프트) 2천원 이상 포함시 적립 가능합니다.
    • 주문하신 상품이 전체 품절인 경우 적립되지 않습니다.
  • 회원혜택) 3만원이상 구매시 회원등급별 2~4% 추가적립

    • 회원등급이 플래티넘, 골드, 실버 등급의 경우 추가적립 됩니다.
    • 추가적립은 실결제액 기준(쿠폰 및 마일리지, 통합포인트, e교환권 사용액 제외) 3만원 이상일 경우 적립됩니다.
    • 주문 후 취소,반품분의 통합포인트는 단품별로 회수되며, 반품으로 인해 결제잔액이 3만원 미만으로 변경될 경우 추가 통합포인트는 전액 회수될 수 있습니다.

제휴 포인트 안내

제휴 포인트 사용

  • OK CASHBAG 10원 단위사용 (사용금액 제한없음)
  • GS&POINT 최대 10만 원 사용
더보기

구매방법 별 배송안내

지역별 도착 예정일

수도권 지역

배송 일정 안내 테이블로 결제 완료 시간, 도착예정일 결제 완료 시간 컬럼의 하위로 평일 0시 ~ 12시 토요일 0시 ~ 11시 평일 12시 ~ 22시 평일 12시 ~ 24시 토요일 11시 ~ 21시 을(를) 나타낸 표입니다.
결제 완료 시간 도착예정일
평일 0시 ~ 12시

토요일 0시 ~ 11시
당일배송 오늘

당일배송 오늘
평일 12시 ~ 22시

평일 12시 ~ 24시

토요일 11시 ~ 21시
새벽배송 내일 07시 이전

내일

일요배송 일요일

수도권 외 (천안, 대전, 울산, 부산, 대구, 창원)

배송 일정 안내 테이블로 결제 완료 시간, 도착예정일 결제 완료 시간 컬럼의 하위로 월~토 0시 ~ 11시 30분 을(를) 나타낸 표입니다.
결제 완료 시간 도착예정일
월~토 0시 ~ 11시 30분
당일배송 오늘

배송 유의사항

  • 새벽배송과 일요배송은 수도권 일부 지역을 대상으로 합니다. 상품 상세페이지에서 도착 예정일을 확인해 주세요.
  • 수도권 외 지역에서 선물포장하기 또는 사은품을 포함하여 주문할 경우 당일배송 불가합니다.
  • 무통장입금 주문 후 당일 배송 가능 시간 이후 입금된 경우 당일 배송 불가합니다.
  • 새벽배송의 경우 공동 현관 출입 번호가 누락 되었거나 틀릴 경우 요청하신 방법으로 출입이 어려워, 부득이하게 공동 현관 또는 경비실 앞에 배송 될 수 있습니다.
  • 학교, 관공서, 회사 등 출입 제한 시간이 있는 곳은 당일배송, 새벽배송, 일요배송이 제공되지 않을 수 있습니다.
  • 공휴일과 겹친 토요일, 일요일은 일요일 배송에서 제외됩니다. 일요배송은 한정 수량에 한해 제공됩니다. 수량 초과 시 일반배송으로 발송되니 주문 시 도착 예정일을 확인해 주세요.
  • 주문 후 배송지 변경 시 변경된 배송지에 따라 익일 배송될 수 있습니다.
  • 수도권 외 지역의 경우 효율적인 배송을 위해 각 지역 매장에서 택배를 발송하므로, 주문 시의 부록과 상이할 수 있습니다.
  • 각 지역 매장에서 재고 부족 시 재고 확보를 위해 당일 배송이 불가할 수 있습니다.
  • 기상악화로 인한 도로 사정으로 일부 지역의 배송 지연이 발생될 수 있습니다.
  • 출고 예정일이 5일 이상인 상품의 경우(결제일로부터 7일 동안 미입고), 출판사 / 유통사 사정으로 품/절판 되어 구입이 어려울 수 있습니다. 이 경우 SMS, 메일로 알려드립니다.
  • 분철상품 주문 시 분철 작업으로 인해 기존 도착 예정일에 2일 정도 추가되며, 당일 배송, 해외 배송이 불가합니다.
  • 해외주문도서는 해외 거래처 사정에 의해 품절/지연될 수 있습니다.
  • 스페셜오더 도서나 일서 해외 주문 도서와 함께 주문 시 배송일이 이에 맞추어 지연되오니, 이점 유의해 주시기 바랍니다.

바로드림존에서 받기

  1. 1
    주문하기
    매장 선택 후 바로드림으로 주문해주세요.
  2. 2
    매장 방문하기
    도서가 준비되면 휴대폰으로 알림을 보내드려요.
    매장에 방문해주세요.
  3. 3
    상품 받기
    바로드림존에서 바코드를 제시하고 상품을 받아보세요.

이용 안내

  • 바로드림은 전국 교보문고 매장 및 교내서점에서 이용 가능합니다.
  • 잡지 및 일부 도서는 바로드림 이용이 불가합니다.
  • 각 매장 운영시간에 따라 바로드림 이용 시간이 달라질 수 있습니다.
  • '픽업박스에서 찾기' 주문 시 도서 5권 이하의 경우에만 주문 가능합니다.

수령 안내

  • 안내되는 재고수량은 서비스 운영 목적에 따라 상이할 수 있으므로 해당 매장에 문의해주시기 바랍니다.
  • 바로드림 주문 후 재고가 실시간 변동되어, 수령 예상 시간에 수령이 어려울 수 있습니다.
  • 픽업박스 보관함 부족 또는 픽업박스에 보관이 불가한 사이즈일 경우 바로드림존에 보관합니다.

취소/교환/반품 안내

  • 주문 후 7일간 찾아가지 않으시면, 자동으로 결제가 취소됩니다.
  • '픽업박스에서 찾기' 주문의 경우 보관완료 알림 이후 3일이 경과 되면 자동으로 주문이 취소 됩니다.
  • 취소된 금액은 결제수단의 승인취소 및 예치금으로 전환됩니다.
  • 교환/반품은 수령하신 매장에서만 가능합니다.

사은품 관련 안내

  • 바로드림 서비스는 일부 1+1 도서, 경품, 사은품 등이 포함 되지 않습니다.

음반/DVD 바로드림시 유의사항

  • 음반/DVD 상품은 바로드림 주문 후 수령점 변경이 불가합니다. 주문 전 수령점을 꼭 확인해 주세요.
  • 사은품(포스터,엽서 등)은 증정되지 않습니다.
  • 커버이미지 랜덤발매 음반은 버전 선택이 불가합니다.
  • 광화문점,강남점,대구점,영등포점,잠실점은 [직접 찾아 바로드림존 가기], [바로드림존에서 받기] 로 주문시 음반 코너에서 수령확인이 가능합니다
  • 선물 받는 분의 휴대폰번호만 입력하신 후 결제하시면 받는 분 휴대폰으로 선물번호가 전달됩니다.
  • 문자를 받은 분께서는 마이 > 주문관리 > 모바일 선물내역 화면에서 선물번호와 배송지 정보를 입력하시면 선물주문이 완료되어 상품준비 및 배송이 진행됩니다.
  • 선물하기 결제하신 후 14일까지 받는 분이 선물번호를 등록하지 않으실 경우 주문은 자동취소 됩니다.
  • 또한 배송 전 상품이 품절 / 절판 될 경우 주문은 자동취소 됩니다.

바로드림 서비스 안내

  1. STEP 01
    매장 선택 후 바로드림 주문
  2. STEP 02
    준비완료 알림 시 매장 방문하기
  3. STEP 03
    바로드림존에서 주문상품 받기
  • 바로드림은 전국 교보문고 매장 및 교내서점에서 이용 가능합니다.
  • 잡지 및 일부 도서는 바로드림 이용이 불가합니다.
  • 각 매장 운영시간에 따라 바로드림 이용 시간이 달라질 수 있습니다.

수령 안내

  • 안내되는 재고수량은 서비스 운영 목적에 따라 상이할 수 있으므로 해당 매장에 문의해주시기 바랍니다.
  • 바로드림 주문 후 재고가 실시간 변동되어, 수령 예상시간에 수령이 어려울 수 있습니다.

취소/교환/반품 안내

  • 주문 후 7일간 찾아가지 않으시면, 자동으로 결제가 취소됩니다.
  • 취소된 금액은 결제수단의 승인취소 및 예치금으로 전환됩니다.
  • 교환/반품은 수령하신 매장에서만 가능합니다.

사은품 관련 안내

  • 바로드림 서비스는 일부 1+1 도서, 경품, 사은품 등이 포함되지 않습니다.

음반/DVD 바로드림시 유의사항

  • 음반/DVD 상품은 바로드림 주문 후 수령점 변경이 불가합니다. 주문 전 수령점을 꼭 확인해주세요.
  • 사은품(포스터,엽서 등)은 증정되지 않습니다.
  • 커버이미지 랜덤발매 음반은 버전 선택이 불가합니다.
  • 광화문점,강남점,대구점,영등포점,잠실점은 [직접 찾아 바로드림존 가기], [바로드림존에서 받기] 로 주문시 음반코너에서 수령확인이 가능합니다.
  1. STEP 01
    픽업박스에서 찾기 주문
  2. STEP 02
    도서준비완료 후 휴대폰으로 인증번호 전송
  3. STEP 03
    매장 방문하여 픽업박스에서 인증번호 입력 후 도서 픽업
  • 바로드림은 전국 교보문고 매장 및 교내서점에서 이용 가능합니다.
  • 잡지 및 일부 도서는 바로드림 이용이 불가합니다.
  • 각 매장 운영시간에 따라 바로드림 이용 시간이 달라질 수 있습니다.

수령 안내

  • 안내되는 재고수량은 서비스 운영 목적에 따라 상이할 수 있으므로 해당 매장에 문의해주시기 바랍니다.
  • 바로드림 주문 후 재고가 실시간 변동되어, 수령 예상시간에 수령이 어려울 수 있습니다.

취소/교환/반품 안내

  • 주문 후 7일간 찾아가지 않으시면, 자동으로 결제가 취소됩니다.
  • 취소된 금액은 결제수단의 승인취소 및 예치금으로 전환됩니다.
  • 교환/반품은 수령하신 매장에서만 가능합니다.

사은품 관련 안내

  • 바로드림 서비스는 일부 1+1 도서, 경품, 사은품 등이 포함되지 않습니다.

음반/DVD 바로드림시 유의사항

  • 음반/DVD 상품은 바로드림 주문 후 수령점 변경이 불가합니다. 주문 전 수령점을 꼭 확인해주세요.
  • 사은품(포스터,엽서 등)은 증정되지 않습니다.
  • 커버이미지 랜덤발매 음반은 버전 선택이 불가합니다.
  • 광화문점,강남점,대구점,영등포점,잠실점은 [직접 찾아 바로드림존 가기], [바로드림존에서 받기] 로 주문시 음반코너에서 수령확인이 가능합니다.

도서 소득공제 안내

  • 도서 소득공제란?

    • 2018년 7월 1일 부터 근로소득자가 신용카드 등으로 도서구입 및 공연을 관람하기 위해 사용한 금액이 추가 공제됩니다. (추가 공제한도 100만원까지 인정)
      • 총 급여 7,000만 원 이하 근로소득자 중 신용카드, 직불카드 등 사용액이 총급여의 25%가 넘는 사람에게 적용
      • 현재 ‘신용카드 등 사용금액’의 소득 공제한도는 300만 원이고 신용카드사용액의 공제율은 15%이지만, 도서·공연 사용분은 추가로 100만 원의 소득 공제한도가 인정되고 공제율은 30%로 적용
      • 시행시기 이후 도서·공연 사용액에 대해서는 “2018년 귀속 근로소득 연말 정산”시기(19.1.15~)에 국세청 홈택스 연말정산간소화 서비스 제공
  • 도서 소득공제 대상

    • 도서(내서,외서,해외주문도서), eBook(구매)
    • 도서 소득공제 대상 상품에 수반되는 국내 배송비 (해외 배송비 제외)
      • 제외상품 : 잡지 등 정기 간행물, 음반, DVD, 기프트, eBook(대여,학술논문), 사은품, 선물포장, 책 그리고 꽃
      • 상품정보의 “소득공제” 표기를 참고하시기 바랍니다.
  • 도서 소득공제 가능 결제수단

    • 카드결제 : 신용카드(개인카드에 한함)
    • 현금결제 : 예치금, 교보e캐시(충전에한함), 해피머니상품권, 컬쳐캐쉬, 기프트 카드, 실시간계좌이체, 온라인입금
    • 간편결제 : 교보페이, 네이버페이, 삼성페이, 카카오페이, PAYCO, 토스, CHAI
      • 현금결제는 현금영수증을 개인소득공제용으로 신청 시에만 도서 소득공제 됩니다.
      • 교보e캐시 도서 소득공제 금액은 교보eBook > e캐시 > 충전/사용내역에서 확인 가능합니다.
      • SKpay, 휴대폰 결제, 교보캐시는 도서 소득공제 불가
  • 부분 취소 안내

    • 대상상품+제외상품을 주문하여 신용카드 "2회 결제하기"를 선택 한 경우, 부분취소/반품 시 예치금으로 환원됩니다.

      신용카드 결제 후 예치금으로 환원 된 경우 승인취소 되지 않습니다.

  • 도서 소득공제 불가 안내

    • 법인카드로 결제 한 경우
    • 현금영수증을 사업자증빙용으로 신청 한 경우
    • 분철신청시 발생되는 분철비용

알림 신청

아래의 알림 신청 시 원하시는 소식을 받아 보실 수 있습니다.
알림신청 취소는 마이룸 > 알림신청내역에서 가능합니다.

단계적 기능 향상을 이용한 모두를 위한 웹 디자인
UX를 고려한 웹 UI 만들기
신고

신고 사유를 선택해주세요.
신고 내용은 이용약관 및 정책에 의해 처리됩니다.

허위 신고일 경우, 신고자의 서비스 활동이 제한될 수 있으니 유의하시어
신중하게 신고해주세요.

판형알림

  • A3 [297×420mm]
  • A4 [210×297mm]
  • A5 [148×210mm]
  • A6 [105×148mm]
  • B4 [257×364mm]
  • B5 [182×257mm]
  • B6 [128×182mm]
  • 8C [8절]
  • 기타 [가로×세로]
EBS X 교보문고 고객님을 위한 5,000원 열공 혜택!
자세히 보기

해외주문양서 배송지연 안내

현재 미국 현지 눈폭풍으로 인해
해외 거래처 출고가 지연되고 있습니다.

해외주문양서 주문 시
예상 출고일보다 배송기간이 더 소요될 수 있으니
고객님의 너그러운 양해 부탁드립니다.

감사합니다.