목차 일부
Part Ⅰ. 웹디자인의 핵심 요소
Chapter 1. 웹디자인이란 무엇인가? ... 32
웹디자인 피라미드 ... 32
웹사이트 구축 ... 33
웹 개발 모델 ... 35
사용자를 위한 사이트 구축 ... 36
유틸리티(Utility)와 유용성(Usability) ... 37
...
더보기
목차 전체
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
더보기 닫기