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