Part Ⅰ. 웹디자인의 핵심 요소
   Chapter 1. 웹디자인이란 무엇인가? ... 32
      웹디자인 피라미드 ... 32
      웹사이트 구축 ... 33
        웹 개발 모델 ... 35
      사용자를 위한 사이트 구축 ... 36
        유틸리티(Utility)와 유용성(Usability) ... 37
      종이부터 소프트웨어까지 ... 37
      웹의 GUI 계승 ... 38
      컨텐트의 초점 ... 39
      사이트의 첫인상 ... 40
        사용자가 받는 가치 ... 41
      표현형태(Form)와 기능(Function)의 조화 ... 42
      좋은 웹디자인이란? ... 43
        웹사이트 평가 ... 45
      웹디자인 검색 ... 45
      보는 것이 원하는 것이다 ... 46
      요약 ... 47
   Chapter 2. 웹디자인 방법 ... 48
      웹디자인 방법론의 필요 ... 48
      Ad Hoc 방법 ... 49
      기본 모델 ... 49
        수정 Waterfall 모델 ... 51
        Joint Application Development : JAD 모델 ... 51
      웹 프로젝트에 접근 ... 53
      웹 프로젝트의 목적과 문제점 ... 53
        브레인스토밍(Brainstorming) ... 54
        목표를 접힌다 ... 54
      사용자 ... 55
        사용자 개인 정보 ... 55
      필요한 조건들 ... 56
      사이트 계획 ... 56
      디자인 단계 해부 ... 58
        Block Comps ... 59
        스크린 및 종이 Camps ... 59
        The Mock Site ... 62
      베타 사이트 작업 ... 62
      테스트 ... 62
        사용자 테스트 ... 64
      사이트 오픈과 그 후 ... 64
      현실 세계에 오신 것을 환영합니다 ... 64
      요약 ... 65
   Chapter 3. 사용자를 위한 디자인 ... 66
      유용성(Usability) ... 66
      웹상의 사용자는 어떤 사람인가? ... 68
      공통적인 사용자의 특성 ... 69
        시력 ... 70
      기억력 ... 71
      응답 및 반응시간 ... 73
      자극 ... 77
        Thresholds ... 77
        칵테일파티 효과(Cocktail­Party Effect) ... 78
        Sensory Adaptation ... 78
      이동 능력 ... 79
      사용자의 세계 ... 80
        사용자 횐경 ... 81
      사용자의 일반적인 타입 ... 82
        그래픽 유저 인터페이스(GUI)에 관한 협약 ... 83
      웹(Web)에 관한 협약 ... 84
      접근성(accessibility) ... 86
      유용한 사이트의 구축 ... 89
      유용성이 가장 중요하다 ... 92
      경험을 통제하는 삶은 누구인가? ... 92
      요약 ... 93
Part Ⅱ. 사이트 구성 및 네비게이션
   Chapter 4. 사이트 타입과 구성 ... 96
      일반적인 웹사이트 타입 ... 96
        상호대화형 사이트 대 정적인 사이트 ... 97
      동적인 사이트 ... 98
      사이트 구조 ... 99
        논리적 사이트 구성 모델 ... 100
        계층구조 ... 103
      사용자와 사이트 구조 ... 108
porous, semiporous, solid 사이트 구조 ... 109
      깊은 사이트 대 얕은 사이트 ... 111
      특정한 타입의 웹사이트 ... 112
        상업용 사이트 ... 112
        정보제공용 사이트 ... 113
        오락용 사이트 ... 114
        탐색용 사이트 ... 114
        커뮤니티 사이트 ... 114
        예술적 사이트 ... 115
        개인 사이트 ... 115
      사이트 구조를 고르는 방법 ... 115
      요약 ... 117
   Chapter 5. 네비게이션 이론 및 실습 ... 118
      네비게이션 ... 118
      여기가 어디지? ... 119
        웹에서의 정확한 주소인 URL ... 119
        페이지 라벨과 사이트 라벨 ... 120
        페이지와 사이트 스타일 및 위치 ... 122
        내가 있었던 곳은 어디인가? ... 123
      어디로 가야 하지? ... 126
      네비게이션의 위치 ... 126
        상단(Top) 부분의 네비게이션 ... 127
        하단(Bottom)의 네비게이션 ... 128
        좌측(Left) 네비게이션 ... 129
        우측(Right) 네비게이션 ... 135
        중앙 네비게이션 ... 136
      네비게이션의 일관성 ... 137
        화면 위치에 따른 네비게이션의 의미 ... 138
      네비게이션과 스크롤링 ... 139
      네비게이션과 마우스 이동 ... 140
      프레임 ... 140
        프레임으로 인한 문제점 ... 142
        프레임의 사용 ... 143
      서브윈도우(Subwindows) ... 151
      북마크(Bookmarking) ... 153
        네비게ㅣ션에서 절대 하지 말아야 할 일들(Navigation No­No's) ... 154
      요약 ... 156
   Chapter 6. 링킹 : 텍스트, 버튼, 아이콘 및 그래픽 ... 158
      기본적인 웹 링킹 모델 ... 158
        구조적인 링크 대 비구조적인 링크 ... 158
        정적인 링크 대 종적인 링크 ... 159
      링크의 종류 ... 159
        텍스트 링크 ... 159
        그래픽 텍스트 링크 ... 161
        버튼 ... 165
        아이콘 ... 171
        이미지 맵 ... 173
        다른 링크 양식 ... 177
      링크를 실행할 경우의 문제점 : 유동성, 피드맥, 지원 ... 178
        유용한 링크 ... 178
        롤오버(Rollover) ... 185
        사용자의 기대 ... 195
      Scope Notes 사용 ... 197
        TITLE ... 197
        롤오버 메시지 ... 198
        상태 바 메시지 ... 202
      키보드 지원 링크 ... 204
      발전된 웹 링킹 모델 ... 205
      링크의 유지관리 ... 205
        재전송되 페이지(Redirection Pages) ... 206
      요약 ... 207
   Chapter 7. 검색 및 디자인 ... 208
      웹 검색엔진 ... 208
      웹 검색의 개요 ... 208
      사용자의 검색 방법 ... 209
        1. 쿼리를 만든다. ... 210
        2. 검색을 실행하고 결과를 기다린다. ... 210
        3. 결과를 검토한다. ... 210
        4. 결과를 가지고 무엇을 할지 결정한다. ... 210
      검색엔진의 작동방식 ... 211
        페이지 수집 ... 211
        페이지 인덱싱 ... 211
      검색엔진 홍보 ... 214
        검색엔진에 등록 ... 214
        로봇의 배제 ... 215
        Robots.txt ... 215
        (META) 태그를 이용한 로봇 통제 ... 216
      검색엔진 최적화 ... 217
        (Meta) 태그 ... 217
        TITLE과 파일명 ... 218
        적절한 텍스트 컨텐트 ... 219
        링크와 입구지점 ... 219
        트릭 ... 220
        배너광고 ... 221
      로컬 검색의 필요 ... 223
      검색도구를 추가하는 방법 ... 224
      검색 인터페이스 디자인 ... 225
        검색을 시작할 때 ... 225
        기본 검색 인터페이스 디자인 ... 226
      전문검색양식 ... 228
      결과 페이지 디자인 ... 230
        검색결과가 없는 페이지 ... 232
      요약 ... 234
   Chapter 8. 사이트맵, 인덱스 및 그 외 네비게이션 보조수단 ... 236
      검색 ... 236
      사이트맵 ... 237
        텍스트 사이트맵 ... 237
        그래픽 사이트맵 ... 239
      사이트맵 지다인 ... 241
        여러분의 현재 위치 ... 242
      선택에 따라 범위와 내용을 표시 ... 245
      사이트맵 제작 ... 246
      "지리학적" 네비게이션의 이점 ... 247
      사이트인덱스 ... 247
      사이트 투어 ... 248
      도움말 시스템 ... 249
        도움말을 사용하는 경우 ... 249
        복잡한 도움말 시스템 ... 251
      용어해설 ... 253
      새소식("What's New")난 ... 255
      요약 ... 255
Part Ⅲ. 페이지 디자인의 요소
   Chapter 9. 페이지 타입과 레이아웃 ... 258
      페이지란 무엇인가? ... 258
      페이지 사이즈 ... 259
        화면 사이즈를 다루는 법 ... 263
      페이지 마진 ... 270
      페이지 타입 ... 272
      입구 페이지 ... 273
        스플레쉬 페이지 ... 273
        홈페이지 ... 274
        서브페이지 : 네비게이션과 컨텐트 ... 277
        컨텐트 페이지 ... 279
        작업 중심 페이지 ... 283
      출구 페이지 ... 287
      웹디자인 방법 ... 289
        텍스트 디자인 ... 289
        상징적 디자인 및 테마가 있는 디자인 ... 290
        GUI 중심의 디자인 ... 291
        형식에 얽매이지 않는 디자인 ... 292
      레이아웃 사례 ... 293
        TLB 페이지 ... 293
        Header­Footer 페이지 ... 293
        Floating 윈도우 페이지 ... 295
        신축성 있는 페이지 ... 298
      무난한 사이트 디자인 방법 ... 299
      요약 ... 300
   Chapter 10. 텍스트 ... 302
      문제는 매체이다 ... 302
        그래픽을 이용한 텍스트 컨트롤 ... 303
        텍스트 레이아웃에 대한 무관심 ... 305
        현대의 Baskerville이 되라 ... 305
      타이포그라픽 Terminology 101 ... 306
      폰트 ... 307
        비례적인 폰트와 monospaced 폰트 ... 308
      다운 가능한 폰트 ... 309
        넷스케이프의 다이나믹 폰트 ... 310
        마이크로소프트의 다이나믹 폰트 ... 311
        폰트 스타일의 세팅 ... 312
        폰트 사이즈 ... 315
      텍스트 레이아웃 ... 316
        텍스트 정렬 ... 316
        한 줄의 길이 ... 320
        줄 간격 ... 320
        자간과 단어 간격 ... 321
      글꼴의 단계 설정 ... 324
        제목과 소제목 ... 324
        문단과 섹션을 지정 ... 326
      테이블 포맷 ... 334
      세부사항 ... 337
        특수문자 사용시 주의 ... 337
      보기 좋은 텍스트 레이아웃 ... 338
        특별한 텍스트 효과 ... 339
      웹상의 텍스트 디자인 문제 ... 342
        웹상에서의 칼럼 ... 343
        여백이 좋은가 나쁜가? ... 344
      항상 소비되는 매체를 생각하라 ... 345
      웹에서의 글쓰기 ... 345
        읽기와 스캐닝 ... 345
        선형이 아닌 방법으로 컨텐트를 연결 ... 346
        사용에 주의를 요하는 단어 ... 347
      요약 ... 347
   Chapter 11. 색상, 이미지 및 백그라운드 ... 348
      색의 기본 ... 348
      웹의 색상 ... 350
        비트 수 ... 350
        웹에서의 색상 선정 ... 351
        브라우저 안전 색상 ... 352
        Hybrid 색상 ... 354
        HTML과 색상 ... 354
        CSS와 색상 ... 359
        색상을 줄이는 문제 ... 361
      색과 유용성 ... 363
        색의 의미 ... 363
        대조의 문제 ... 364
      이미지 ... 365
        이미지의 사용 ... 365
        HTML과 이미지 : 〈IMG〉태그 ... 366
        이미지 타입 ... 370
        이미지 관련 문제 ... 377
        조각낸 이미지 ... 382
        벡터기반의 예술 : 플래시 ... 384
      백그라운드 이미지 ... 385
        문서 전체의 백그라운드 ... 385
      요약 ... 393
   Chapter 12. GUI를 이용한 interactivity 구축 ... 394
      웹사이트와 기존의 GUI ... 394
      GUI 디자인 작업 ... 397
      윈도우 ... 397
        새 윈도우 열기 ... 399
      전체화면윈도우 ... 401
      서브윈도운 ... 402
        경고 대화상자 ... 402
        확인(confirm) 대화상자 ... 406
        Prompt 대화상자 ... 407
      양식(Forms) ... 409
        라벨 ... 409
        텍스트 필드 ... 410
      패스워드 필드 ... 412
        다중 텍스트 입력 필드 ... 413
        체크박스 ... 416
        라디오 버튼 ... 417
      풀다운 메뉴 ... 424
        풀다운 메뉴를 사용한 네비게이션 ... 427
      스크롤된 리스트 ... 430
      Push 버튼 ... 431
        리셋 버튼 ... 431
        전송(Submit) 버튼 ... 432
        이미지 버튼 ... 433
        파일 업로드 컨트롤 ... 434
      유용한 폼 ... 435
        필수항목 ... 437
        탭 기능 ... 438
        첫 번째 필드 ... 439
        키보드 단축키 ... 439
      폼의 인증 ... 444
        필드 마스크 ... 446
        사용 불가능한 필드 ... 447
        읽기 전용 필드 ... 449
        기본값 ... 451
        인터넷 익스플로러의 자동완성기능 ... 451
      최신 웹 GUI 요소 ... 452
        트리(tree) 네비게이션 ... 453
        탭을 이용한 인터페이스 ... 454
        슬라이더 ... 454
        컨텍스트 메뉴 ... 455
      웹사이트와 프로그램간의 동일화 ... 456
      요약 ... 457
Part Ⅳ. 기술과 웹디자인
   Chapter 13. 웹 기술과 그 디자인 효과 ... 460
      웹 기술의 문제점들 ... 460
      브라우저 ... 461
        브라우저 감지 ... 465
      HTML ... 469
      HTML의 규칙 ... 470
        HTML 규칙 ... 472
        XHTML ... 479
      HTML 프레젠테이션 ... 480
      CSS ... 481
        CSS의 사용법 ... 483
        CSS 실전 ... 486
      HTML／CSS 페이지 제작 ... 489
      XML ... 492
      프로그래밍과 웹디자인 ... 497
      서버측 프로그래밍 ... 498
        CGI프로그램 ... 499
      클라이언트측 프로그래밍 ... 502
        헬퍼(Helper) ... 502
        플러그인 ... 504
        ActiveX ... 507
        자바 ... 509
      자바스크립트 ... 512
        자바스크립트의 버전 ... 514
        Fall­Through 스크립트 ... 514
        객체감지 ... 515
        스크립트를 지원하지 않는 브라우저 ... 515
        에러를 잡는 자바스크립트 ... 516
        링크된 스크립트 ... 518
        자바스크립트 스타일 ... 518
        불필요하게 긴 자바스크립트 코드 ... 519
        자바스크립트의 사용 ... 520
      쿠키 ... 521
      멀티미디어 웹디자인 ... 522
      애니메이션 ... 522
      사운드 ... 524
        디지털 오디오의 기본 ... 524
        오디오 파일 포맷과 압축 ... 524
        간단한 웹 오디오 ... 525
        간간한 오디오 실전예제 ... 526
        스트리밍 오디오 ... 527
        유용성과 오디오 파일 ... 527
      비디오 ... 528
        디지털 비디오의 기본 ... 528
        비디오 파일 포맷과 압축 ... 529
      요약 ... 530
   Chapter 14. 사이트 전송 및 관리 ... 532
      전송의 중요성 ... 532
      웹 프로토골 ... 533
        HTTP ... 534
      도메인네임 서비스 ... 541
      웹서버 ... 542
        웹서버 컴포넌트 ... 543
        웹서버 소프트웨어 ... 544
        웹서버의 위치 ... 547
      아웃소싱 웹호스팅 ... 548
        공유 호스팅(Shared Hosting) ... 548
        전용 호스팅(Dedicated Hosting) ... 549
      웹서버 관리 ... 550
        웹서버 보안 ... 551
      컨텐트 유지관리 ... 553
      사용법 분석 ... 556
        사이트 사용법 분석 ... 558
      프라이버시 ... 563
      컨텐트 ... 564
      요약 ... 566
Part Ⅴ. 미래의 방향
   Chapter 15. 웹디자인의 미래 ... 570
      가까운 미래 ... 570
        HTML의 과거 ... 570
        모든 것의 혼합 ... 572
        XML : 좋을 수도 있고 나쁠 수도 있다 ... 574
        사용자 규칙 ... 575
      광대역의 발생 ... 576
        Non­PC 기반의 웹 액세스 ... 576
        브라우저는 필수품이 되고 있다 ... 577
        한계가 없는 웹 액세스 ... 578
      커뮤니티의 효과 ... 579
        컨텐트 과부하 문제 ... 580
        Agents ... 582
      웹 라이프스타일 ... 583
      요약 ... 584
Part Ⅵ. 부록
   부록 A. 핵심 웹사이트 디자인 규칙 ... 588
      웹디자인 소개 ... 588
      웹디자인 과정 ... 588
      사용자를 위한 디자인 ... 589
      사이트 타입과 설계 ... 590
        네비게이션 이론과 실제 ... 591
      링킹 : 텍스트, 버튼, 아이콘 및 그래픽 ... 592
      검색 및 디자인 ... 592
      텍스트 ... 594
      색상, 이미지 및 백그라운드 ... 595
      웹 기술과 그 디자인 효과 ... 597
      사이트 전송 및 관리 ... 599
      웹디자인의 미래 ... 600
   부록 B. 사이트 평가 샘플 ... 602
      평가의 시작 ... 602
        사전 정보 ... 603
        네비게이션 예비 검사 ... 603
        사이트 식별 예비 검사 ... 604
        목적 예비 검사 ... 604
        관객 검사 ... 604
      일반적이 사이트의 특징들 ... 605
        사이트의 구조 ... 605
        전송 ... 607
        사이트 전송 특성 ... 608
      시각적인 부분 및 레이아웃 설문 예제 ... 609
        시각적인 부분 및 레이아웃 설문 예제 ... 609
      컨텐트 ... 613
        일반적인 컨텐트 통계 ... 613
      기술사용 ... 615
        HTML ... 616
        CSS ... 618
        XML ... 619
      프로그래밍 ... 620
        서버측의 기술 ... 621
        클라이언트 컴포넌트 기술 ... 623
        쿠키 ... 624
      브라우저 지원 ... 625
        브라우저 문제 ... 626
      네비게이션 ... 626
        일반적인 네비게이션 ... 627
        검색 ... 630
        네비게이션 보조 ... 632
        Help 시스템 ... 634
      최종점수 ... 635
      평가 폼 ... 635
      개발자 평가 범위를 넘어서 : 로그분석 및 사용자 테스트 ... 636
        사전정보 ... 637
        일반적인 사이트의 특징 ... 638
        기술사용 ... 644
        프로그래밍 ... 648
        클라이언트 컴포넌트 기술 ... 650
        브라우저 지원 ... 650
        네비게이션 ... 652
        네비게이션 보조 ... 657
        최종 점수 ... 659
   부록 C. 폰트 ... 660
      HTML : (FONT)요소 ... 660
        FACE ... 660
        SIZE ... 663
        COLOR ... 664
        (FONT)와 (TABLE) ... 664
        (BASEFONT) ... 666
      폰트와 CSS ... 666
        font­family ... 667
        font­size ... 668
        font­style ... 668
        font­weight ... 668
        font­variant ... 669
        font ... 669
        CSS에 의해서 지원되는 단위 ... 669
      교차플랫폼에서 크기 문제 ... 670
      다운 가능한 폰트 ... 671
        넷스케이프의 Dynamic Font ... 671
        마이크로소프트의 Dynamic Font ... 672
   부록 D. 색상 참고자료 ... 674
      HTML 색상 사용 ... 679
        (BODY)태그에 Color 속성을 설정 ... 679
        (FONT)색상 ... 679
        색상 있는 테이블 셀 ... 679
      CSS 색상값 ... 680
        세 자리의 헥사코드 색상값 ... 680
        RGB 색상값 ... 680
        퍼센트를 사용한 RGB 색상값 ... 680
      브라우저 안전색상 ... 680
   Index ... 683