목차 일부

Part 1 웹디자이너로 가는 첫 걸음
   Chapter 1 인터넷의 꽃, 웹디자인 ... 22
      1. 인터넷이란 무엇인가? ... 23
      2. 웹디자인의 개요 ... 24
      3. 웹디자인의 특징과 구성 ... 26
        1) 웹디자인의 특징 ... 26
        2) 웹디자인의 구성 ... 27
      4. ...

더보기

목차 전체

Part 1 웹디자이너로 가는 첫 걸음
   Chapter 1 인터넷의 꽃, 웹디자인 ... 22
      1. 인터넷이란 무엇인가? ... 23
      2. 웹디자인의 개요 ... 24
      3. 웹디자인의 특징과 구성 ... 26
        1) 웹디자인의 특징 ... 26
        2) 웹디자인의 구성 ... 27
      4. 웹사이트를 만드는 사람들 ... 33
      5. 웹디자이너란? ... 34
      6. 웹디자이너의 중요성 ... 35
      Tips : 웹디자이너는요... ... 40
      Tips : 웹디자이너가 되려면 학원을 꼭 다녀야 하나요? ... 41
   Chapter 2 유형별로 살펴본 웹사이트의 특징 ... 42
      1. 기업 웹사이트(Corporate Website) ... 43
        1) 인트로 페이지(Intro Page) ... 43
        2) 메인 페이지(Main Page) ... 45
        3) 서브 페이지(Sub Page) ... 46
      2. 전자상거래 웹사이트(E-commerce Website) ... 49
        1) 메인 페이지(Main Page) ... 49
        2) 서브 페이지(Sub Page) ... 51
      3. 포탈 웹사이트(Portal Website) ... 55
        1) 일반 포탈 ... 55
        2) 전문 포탈 ... 56
        3) 여성 포탈 ... 56
        4) 교육 포탈 ... 57
      4. 인터넷 방송 웹사이트(Web Casting Website) ... 59
        1) 메인 페이지(Main Page) ... 59
        2) 서브 페이지(Sub Page) ... 60
      5. 인터넷 잡지 웹사이트(E-zine Website) ... 61
        1) 메인 페이지(Main Page) ... 61
        2) 서브 페이지(Sub Page) ... 63
      6. 개인 웹사이트(Personal Website) ... 64
        1) 인트로 페이지(Intro Page) ... 64
        2) 서브 페이지(Sub Page) ... 65
      Tips : 종류별 홈페이지 순위 사이트 ... 67
      Tips : 포탈 사이트와 허브 사이트 ... 68
   Chapter 3 웹디자인을 위한 기본적인 작업 환경 ... 70
      1. Mac과 PC ... 71
        1)맥(Mac)의 특징 ... 71
        2) PC의 특징 ... 72
      2. 모니터 고르기 ... 74
      3. 그밖의 필수 하드웨어 ... 75
        1) 스캐너 ... 75
        2) 타블렛(또는 디지타이저) ... 76
        3) 컬러프린터 ... 76
        4) 스피커 ... 77
        5) 디지털카메라 ... 77
        6) 전용선 ... 77
        7) 허브(Hub) ... 78
        8) 서버(Server) ... 78
      4. 그래픽 프로그램 ... 78
        1) 포토샵(Adobe Photoshop) ... 78
        2) 일러스트레이터(Adobe Illustrator) ... 80
        3) 파이어웍스(Macromedia Fireworks) ... 80
        4) 플래시(Macromedia Flash) ... 81
        5) 라이브모션(Adobe LiveMotion) ... 82
      5. HTML 편집기 ... 82
        1) 드림위버(Macromedia Dreamweaver) ... 83
        2) 고라이브(Adobe GoLive) ... 84
        3) 울트라에디트(Ultra Edit) ... 84
      6. 아이디어 스케치북 ... 85
      7. 메신저와 커뮤니티 ... 86
      Tips : 맥과 PC에서의 입력장치 ... 88
      Tips : 그래픽 프로그램 효과적으로 이용하기 ... 89
   Chapter 4 프로가 되기 위한 준비 ... 90
      1. 웹디자이너가 되는 방법 ... 91
      2. 웹디자이너의 필수 조건 ... 102
      3. 공부, 또 공부... ... 105
        1) 업그레이드되는 프로그램 ... 105
        2) 진화하는 HTML ... 106
        3) 웹서핑 ... 106
        4) 디자인 감각 키우기 ... 107
      4. 디자인 감각은 타고나는 것일까? ... 107
        1) 색채 감각 ... 108
        2) 디자인 레이아웃 표현 감각 ... 112
      5. 포트폴리오(Portfolio)의 제작 ... 113
        1) 포트폴리오란? ... 114
        2) 포트폴리오 만들기 ... 114
      Tips : 디자인 전공자와 비전공자 ... 118
      Tips : 공모전에 참여하기 ... 119
Part 2 웹디자이너가 알아야 할 필수 이론
   Chapter 1 웹사이트의 전략과 기획 ... 122
      1. 웹사이트 목적 설정 ... 123
        1) 누구를 위한 사이트인가? ... 123
        2) 무엇을 보여주기 위함인가? ... 135
      2. 브레인스토밍(Brainstorming) ... 138
        1) 브레인스토밍이란 무엇인가? ... 138
        2) 왜 브레인스토밍을 사용해야 하는가? ... 138
      3. 웹사이트 벤치마킹(Benchmarking) ... 140
        1) 관련 사이트 조사와 벤치마킹 ... 140
        2) 벤치마킹은 어떻게 하는 것일까? ... 142
        3) 성공한 벤치마킹의 예 ... 145
      4. 러프 스케치(Rough Sketch) ... 146
      5. 스토리보드(Storyboard) 작성 ... 147
        1) 홍보용 홈페이지 ... 148
        2) 상거래용 홈페이지 ... 150
      6. 사이트 구조 설계 ... 151
        1) 디렉토리(Directory) 생성하기 ... 151
        2) 네이밍 룰(Naming Rule) 정하기 ... 154
      Tips : 웹기획자가 되기 위한 조건 ... 157
   Chapter 2 네비게이션 디자인 ... 158
      1. 웹사이트 네비게이션(Navigation) ... 159
        1) 편리한 네비게이션을 위한 베이직 엘리먼트의 역할 ... 160
        2) 위치에 따른 켄텐츠의 중요도 ... 162
      2. 프레임(Frame)의 구조와 특징 ... 164
        1) 프레임(Frame)의 이해 ... 165
        2) 프레임(Frame)의 요소 ... 170
        3) 프레임(Frame)과 디자인 ... 177
      3. 메뉴와 타이틀 ... 179
        1) 메뉴의 구성과 배치 ... 179
        2) 타이틀(Title) 디자인 ... 185
      4. 잘못된 네비게이션 ... 186
      Tips : 프레임의 타겟 ... 188
      Tips : GUI? 구이? ... 189
   Chapter 3 웹페이지 디자인 ... 190
      1. 웹 그래픽의 특징 ... 191
        1) 그래픽 디자인과 웹 그래픽 디자인 ... 191
        2) 웹 그래픽 디자인의 환경 ... 192
        3) 브라우저 안의 홈페이지 ... 195
      2. 포토샵으로 웹디자인하기 ... 196
        1) 파일 생성하기 ... 197
        2) 가이드로 영역 나누기 ... 197
        3) 로고와 메인 메뉴 디자인 ... 198
        4) 서브 메뉴 디자인 ... 199
        5) 타이틀 디자인 ... 199
        6) 켄텐츠 부분의 스타일 디자인 ... 200
        7) 그림 자르기 ... 201
      3. GIF와 JPG, 그리고 PNG ... 203
        1) GIF(Graphic Interchange Format) ... 205
        2) JPG(Joint Photographic Experts Group) ... 206
        3) PNG ... 207
      4. 벡터(Vector)와 비트맵(Bitmap) ... 208
        1) 벡터(Vector) ... 208
        2) 비트맵(Bitmap) ... 209
      5. 안티알리아스(Anti-alias)와 알리아스(Alias) ... 210
      6. 그래픽 원본 소스의 보존 ... 211
      7. 인터넷 TV(Internet-TV) 디자인 ... 212
      8. 무선 인터넷(Mobile Internet) 디자인 ... 213
        1) 무선 인터넷(Mobile Internet)이란? ... 213
        2) 무선 인터넷(Mobile Internet) 디자인 ... 214
      Tips : 잡지와 웹진과의 차이점 ... 216
      Tips : 포토샵에서 그림 쉽게 자르는 팁 ... 218
   Chapter 4 웹에서의 타이포그래피(Typography) ... 220
      1. 타이포그래피(Typography)란? ... 221
      2. 타이포그래피(Typography)의 특징 ... 224
        1) 의미를 내포하는 디자인 ... 224
        2) 정보 디자인의 대표적인 이미지 ... 224
        3) 플래시에서 더욱 돋보이는 키네틱(Kinetic) 타이포그래피 ... 225
      3. 폰트와 타이포그래피 ... 226
        1) 세리프와 산세리프(Serif & San Serif) ... 227
        2) 폰트와 가독성 ... 227
      4. 타이포그래피(Typography) 관련 사이트 ... 231
        1) 국내 타이포그래피 관련 사이트 ... 231
        2) 해외 타이포그래피 관련 사이트 ... 233
      Tips : 윈도우에서 폰트 설치하기 ... 234
   Chapter 5 깔끔한 HTML 만들기 ... 236
      1. 웹에디터의 선택 ... 237
        1) 위지윅(WYSIWYG) 방식의 웹에디터 ... 238
        2) 일반 텍스트에디터 ... 245
      2. HTML 소스 다듬기 ... 247
        1) 소스 정돈은 왜 해야 할까요? ... 247
        2) 소스 정돈은 어떻게 해야 할까요? ... 249
      3. CSS의 활용 ... 257
        1) CSS란? ... 257
        2) CSS의 사용 방법 ... 259
        3) CSS의 적용 방법 ... 261
        4) CSS 활용하기 ... 263
      4. SSI 방식의 인크루딩(Including)의 편리함 ... 264
        1) Include를 사용하는 방법 ... 264
        2) Include를 사용한 예 ... 266
      Tips : 새 창 띄우기 ... 274
      Tips : 자주 사용하는 CSS 예제 ... 276
   Chapter 6 인터랙티브 애니메이션 ... 278
      1. GIF Animation ... 279
        1) GIF Animation의 특징 ... 279
        2) 이미지레디(Adobe ImageReady)로 GIF Animation 만들기 ... 280
      2. Shockwave Animation ... 283
        1) Shockwave Animation의 특징 ... 283
        2) Shockwave Animation을 제작하는 프로그램 ... 284
        3) 플래시 관련 강좌 사이트 ... 288
      Tips : 동영상 메일 보내기 ... 291
Part 3 실전으로 익히는 웹사이트 제작 과정
   Chapter 1 팀원 구성 ... 294
      1. 프로젝트 매니저(PM) ... 295
      2. 기획자(Planner or Director) ... 297
      3. 웹디자이너(Web Designer) ... 299
      4. 웹코더(Web Coder) ... 301
      5. 프로그래머(Programmer) ... 302
      6. 클라이언트(Client) ... 304
      Tips : 클라이언트와 즐겁게 일하는 10가지 방법 ... 306
   Chapter 2 기존 사이트 분석 ... 308
      1. 화면별 웹페이지 문제점 지적 ... 309
        1) 인트로 화면 ... 309
        2) 서브 화면 ... 310
        3) 그 외의 화면들 ... 311
        4) 전체적인 네비게이션에 대한 문제점 ... 312
      2. 디자인 개선 방향 ... 312
      3. 컨텐츠 분석 ... 314
      Tips : 웹사이트를 제작할 때 기본적으로 지켜야 할 사항 ... 316
   Chapter 3 기본 컨셉과 방향 결정 ... 318
      1. 프로젝트의 개요 ... 319
      2. 역할과 목표 ... 320
        1) 홈페이지의 목표와 역할 ... 320
        2) 홈페이지의 전략 ... 321
      3. 디자인 컨셉(Concept) ... 322
      Tips : 메타포(Metaphors)란 무엇인가? ... 323
   Chapter 4 웹사이트 기획 ... 324
      1. 경쟁사 벤치마킹 ... 325
      2. 컨텐츠 기획 ... 326
      3. 디렉토리 생성과 네이밍 롤 정하기 ... 327
      4. 네비게이션 구성 ... 329
        1) 기본 화면 모드는 어떤 사이즈로 할 것인가? ... 330
        2) 프레임을 어떻게 이용할 것인가? ... 331
        3) 메뉴는 어느 쪽에 배치할 것인가? ... 332
        4) 전체적인 정렬은 어느 쪽으로 할 것인가? ... 333
      5. 러프 스케치 해보기 ... 335
      Tips : 수직과 수평으로 Center 정렬하기 ... 336
   Chapter 5 포토샵으로 그래픽 작업하기 ... 338
      1. 디자인 시안 ... 339
        1) 포토샵에서 새 창 열기 ... 339
        2) 바탕이미지 만들기 ... 340
        3) 배경 위에 컨텐츠 영역 만들기 ... 342
        4) 로고와 메인 메뉴 ... 344
        5) 내용 부분의 스타일 ... 346
        6) 완성한 그림 변형해 보기 ... 346
      2. 시안 선택 ... 349
      3. 수정, 보완 및 초안 완성 ... 350
        1) 답답한 느낌을 피하기 위한 수정 ... 351
        2) 좀더 깔끔한 이미지 처리를 위한 수정 ... 351
        3) 메뉴와 내용의 구분을 확실히 하기 위한 수정 ... 352
        4) 동영상을 가미하기 위한 부분 설정 ... 352
      4. 주요 화면 디자인(디자인 가이드라인) ... 353
        1) 각 메뉴별 대표 화면 만들기 ... 353
        2) 디자인 가이드라인 ... 354
      5. 그림 저장 ... 356
      Tips : 포토샵에서 Color Balance와 Hue／Saturation을 이용하여 배색하기 ... 360
   Chapter 6 플래시로 애니메이션 만들기 ... 362
      1. 메인 메뉴 애니메이션 만들기 ... 363
      2. 인트로 애니메이션 만들기 ... 369
      Tips : Swish 살짝 들여다보기 ... 382
   Chapter 7 HTML로 브라우저에 띄우기 ... 384
      1. 절대경로와 상대경로 ... 385
      2. HTML 먼저 저장하기 ... 387
      3. Page Properties ... 388
      4. 테이블 만들기 ... 390
      5. 테이블 분할하기 ... 391
      6. 테이블 안에 이미지 불러오기 ... 393
      7. 플래시 파일 불러오기 ... 401
      Tips : 내게 맞는 HTML 에디터는 어떻게 고르는 것이 좋을까? ... 405
   Chapter 8 자바스크립트로 포트폴리오 만들기 ... 406
      1. 이미지 소스 만들고 저장하기 ... 407
      2. 드림위버에서 레이어를 이용해 이미지 불러오기 ... 408
      3. Show-Hide Layers로 스크립트 생성하기 ... 414
      Tips : 자바스크립트 소스 내 것으로 만들기 ... 419
   Chapter 9 ASP로 입력 폼 만들기 ... 420
      1. 드림위버로 기본 화면 생성하기 ... 421
      2. 입력 폼 만들기 ... 423
      3. ASP로 프로그램 짜기 ... 427
        1) 입력 화면 ... 427
        2) 전송하기 ... 430
        3) 리스트 화면 ... 432
        4) 상세 화면 ... 436
      4. SQL 데이터베이스 둘러보기 ... 437
      Tips : ASP 파일을 웹에디터에서 편집하기 ... 439
   Chapter 10 최종 검수와 마무리 작업 ... 440
      1. 최종 검수 ... 441
      2. 마무리 작업 ... 444
      Tips : 플러그인의 종류 ... 446
   Chapter 11 웹서버에 올리기 ... 448
      1. FTP 전용 프로그램 이용하기 ... 449
      2. 드림위버 이용하기 ... 451
      Tips : FTP로 파일 올릴 때 주의해야 할 것 ... 455
Part 4 최강! 웹디자이너를 위하여
   Chapter 1 인터넷 홍보 전략 ... 458
      1. 인터넷 마케팅의 정의 ... 459
        1) 인터넷 마케팅의 장점 ... 459
        2) 인터넷 마케팅의 단점 ... 461
      2. 웹사이트의 효과적인 홍보 방법 ... 462
        1) 검색엔진에 등록 ... 462
        2) 배너광고 이용 ... 466
        3) E-mail 서비스 ... 468
        4) 이벤트 활용 ... 469
        5) 무료 컨텐츠 서비스 ... 470
        6) 오프라인(Off0Line) 광고 ... 471
        7) 도메인 활용 ... 471
      3. 마케팅 성공 사례 ... 473
      Tips : 톡톡 튀는 배너광고를 위한 필수 사항 ... 476
      Tips : 마케팅과 CRM ... 477
   Chapter 2 제안서 만들기 ... 478
      1. 프로젝트 수주를 위한 준비 ... 479
        1) 후보 업체를 선정하는 방법 ... 479
        2) 후보 업체를 선정하는 기준 ... 481
        3) 프레젠테이션이란? ... 482
      2. 제안요청서와 제안서 ... 483
        1) 프로젝트의 개요 ... 483
        2) 현황 안내 ... 484
        3) 제안 요청 내역 ... 485
      3. 제안서의 예 ... 486
      Tips : 제안서는 무엇으로 만들까? ... 490
      Tips : 파워포인트에 날개 달기 ... 491
   Chapter 3 디자인 소스 구하기 ... 492
      1. 부자 디자이너, 가난한 디자이너? ... 493
      2. 이미지 소스 구하기 ... 494
        1) 타 웹사이트에서 가져오기 ... 494
        2) 이미지 슬라이드 사용권 구입 ... 495
        3) 로열티 프리(Royalty Free) 이미지 시디 구입 ... 497
        4) 직접 제작한 이미지 ... 498
      3. 사운드 소스 구하기 ... 499
      4. 폰트 구하기 ... 501
        1) 한글폰트 ... 501
        2) 영문폰트 ... 502
        3) 딩뱃폰트 ... 503
      Tips : 무료로 이미지를 다운받을 수 있는 사이트 ... 504
   웹에서의 저작권 ... 506
      1. 저작권이란? ... 507
        1) 저작권 등록 대상 ... 508
        2) 저작물의 요건 ... 508
      2. 웹에서의 저작권 FAQ ... 509
      3. 홈페이지에서 명시하는 Copyright ... 511
      Tips : 저작권이 걸려 있는 이미지를 몰래 사용하다 들키면? ... 516
      Tips : Copyright는 알겠는데, Copyleft는 뭐지? ... 517
   Chapter 5 웹 애널리시스(Web Analysis) ... 518
      1. 웹 로그 분석 ... 519
        1) 웹 로그 분석이란 무엇인가? ... 519
        2) 웹 로그 분석을 왜 하는 것인가? ... 519
        3) 웹 로그 분석은 어떻게 하는 것일까? ... 520
      2. 웹사이트에 대한 분석 ... 522
        1) 유저 인터페이스 관점 ... 522
        2) 디자인의 관점 ... 523
        3) 기타 환경적인 요건 ... 525
      3. 통계로 본 인터넷 ... 526
      Tips : 디자인 측면에서의 분석 ... 532
      Tips : 웹사이트 분석은 누가 하는 것일까? ... 533
   Chapter 6 영원한 동반자, 웹프로그래머 ... 534
      1. 웹디자이너와 웹프로그래머의 영역 ... 535
      2. 닭이 먼저냐? 달걀이 먼저냐? ... 537
      3. 웹프로그래머와의 조화 ... 538
      4. 웹프로그램 엿보기 ... 539
        1) 웹서버의 종류 ... 540
        2) 프로그래밍의 종류 ... 541
      Tips : 추천! 웹프로그램 교육 학원 ... 544
      Tips : 웹프로그래머는요... ... 546
   Chapter 7 프리랜서(Free-lancer) 에 도전하자 ... 548
      1. 프리랜서(Free-lancer)의 장단점 ... 549
        1) 프리랜서의 장점 ... 549
        2) 프리랜서의 단점 ... 550
      2. 인터넷에 집 짓자 - 비즈니스도 하자! ... 552
        1) 홈페이지 내용 구성 ... 552
        2) 홈페이지 홍보하기 ... 553
      3. 견적서 만들기 ... 555
        1) 견적서에 꼭 들어가야 할 항목 ... 555
        2) 견적 산출 방법 ... 556
      4. 프리랜서와 회사와의 계약 ... 558
        1) 계약은 어떻게 하는 것일까? ... 558
        2) 계약서에 들어가야 할 필수 항목 ... 559
        3) 계약서의 한 예 ... 561
      5. 프리랜서, 자유를 향한 힘찬 발걸음 ... 564
      Tips : 기업이냐, 프리랜서냐에 따라 계약 조건이 달라질 수 있다? ... 568
      Tips : 계약서는 꼭꼭 씁시다. ... 569
Appendix
   Appendix 1 나만의 클립아트 만들기 ... 572
      1. 불렛(Bullet) 만들기 ... 573
        가장 기본적인 Bullet ... 573
        동글동글 귀여운 Bullet ... 578
        한눈에 쏘옥 들어오는 Bullet ... 581
        움직이는 GIF Animation Bullet ... 585
      2. 타이틀(Title) 만들기 ... 587
        깔끔하고 단순한 타이틀 ... 587
        관련 사진을 이용한 타이틀 ... 591
        타이포그래피를 이용한 타이틀 ... 594
        그밖의 기능성 타이틀 ... 597
      3. 버튼(Button) 만들기 ... 600
      4. 아트워크 만들기 ... 609
   Appendix 2 웹디자이너를 위한 북마크 ... 618
      1. Best Flash Homepages ... 619
      2. Best Layout Homepages ... 649
Index ... 679

더보기 닫기