소개하기 ... xxii 1. 시작하기 ... 1 작업에 대한 린다의 조언 ... 2 학습과정 ... 3 스스로 공부하기 ... 4 자신의 디자인 감각을 향상시키기 ... 4 어떤 기술이 중요한가? ... 4 웹 디자인 기술 ... 4 웹 디자이너 되기의 첫 단계 ... 5 포트폴리오의 중요성 ... 5 제작단가에 대해서 알기 ... 6 웹 디자인 일자리를 구하는 방법 ... 7 제작단가에 대한 자료 ... 7 검색 엔진 활용하기 ... 8 전부 믿으면 안된다 ... 9 하드웨어의 선택 ... 10 매킨토시 또는 윈도우즈 중에 어떤 것을 선호하는가? ... 10 맥과 PC ... 10 맥의 장점 ... 11 PC의 장점 ... 11 어떤 플랫폼이 좋을까? ... 11 시스템 요구사항 ... 12 할인 상점 ... 14 소프트웨어 ... 14 이미지 편집 프로그램들 ... 15 요점 정리 ... 16 2. HTML 편집기 ... 17 그래픽 책에서 왜 HTML을 다루는가? ... 18 HTML이란 무엇인가? ... 18 HTML은 왜 디자인하기에 힘든 것인가? ... 19 HTML을 꼭 배워야만 하는가? ... 20 HTML을 배우는 법 ... 21 HTML 온라인 자료 ... 22 중요한 HTML 용어 ... 22 HTML에 대한 소개 ... 23 HTML 편집기 ... 24 구입하기 전에 데모버전으로 테스트해보기 ... 25 HTML 편집 환경 ... 25 각 브라우저 환경에 대한 비교표 ... 27 요점 정리 ... 28 3. 전략 ... 29 첫 번째 단계 ... 30 스토리보드 작성하기 ... 32 실제 사례 분석 : 스토리보드에서 제작까지 ... 33 흐름 도표 만들기 ... 34 내비게이션에 대한 접근 ... 35 내비게이션에 대한 접근 ... 36 사이트 구조 ... 37 추천 도서 ... 38 Ducks In A Row를 위한 브레인스토밍 목록 ... 38 메타포 ... 38 도움이 되는 메타포와 방해가 되는 메타포 ... 39 요점 정리 ... 40 4. 웹 제작 환경 ... 41 각 브라우저간의 차이점 ... 42 브라우저와 HTML의 차이점에 대한 자료들 ... 43 호환성에 대한 지침 ... 44 AOL브라우저 ... 45 모든 플랫폼에서 호환되는 색상 교정에 대한 문제 ... 46 감마값의 차이 ... 47 공장에서 세팅된 평균 감마값 ... 47 명암과 대비에 대한 이해 ... 48 높은 해상도와 낮은 해상도 ... 49 포토숍 환경설정 ... 50 비트 심도(Bit Depth) ... 51 모니터 비트 심도 ... 52 모니터의 비트 심도를 바꾸는 방법 ... 53 문자의 차이 ... 54 모니터 크기에 대한 고려 ... 55 웹TV ... 56 웹TV지원 ... 57 지원되지 않는 HTML태그들 ... 57 웹TV 디자인 팁 ... 58 브라우저와 웹TV의 비교 ... 59 요점정리 ... 60 5. 웹 파일 포맷 ... 61 비트맵과 벡터 ... 62 손실과 무손실 ... 64 GIF발음 ... 64 GIF압축 ... 65 인터페이스 GIF ... 66 투명한 GIF ... 67 애니메이션 GIF ... 68 JPEG ... 69 점진적인 JPEG과 표준 JPEG ... 71 PNG ... 72 감마 보정 ... 73 알파 채널 투명도 ... 73 PNG에 대한 자료들 ... 73 디지털 워터마크 ... 74 MNG ... 75 요점 정리 ... 76 6. 작은 용량의 그래픽 ... 77 파일 크기와 다운로드 속도 ... 78 이미지 크기에 상관없이 다운로드 속도에 영향을 주는 것들 ... 78 파일 크기는 실제로 얼마나 될까 ... 79 포토숍 아이콘도 용량을 차지한다 ... 79 파이어웍스(Fireworks)와 이미지레디(ImageReady)에서의 파일 크기 ... 80 자신의 이미지 스타일 판단하기 ... 81 디더링을 하지 않고 GIF로 저정한 사진 ... 82 JPEG으로 저장한 사진들 ... 82 디더링을 해서 GIF로 저장한 사진 ... 83 디더링을 하지않고 GIF로 저장한 그래픽 ... 84 JPEG으로 저장한 그래픽 ... 84 디더링을 해서 GIF로 저장한 그래픽 ... 85 작은 용량의 JPEG만들기 ... 86 옛 버전의 웹 브라우저에 대하여 ... 86 JPEG 예제 ... 87 작은 JPEG을 만들기 위한 포토숍 플러그인 ... 88 한번 JPEG으로 저장한후 다시 JPEG으로 저장하지 말라 ... 88 작은 GIF만들기 ... 89 비트 심도는 파일 크기에 영향을 미친다 ... 90 안티-알리아스(Anti-Alias)와 알리아스(Alias) ... 91 알리아스된 아트워크 ... 92 라인 아트 기반의 이미지를 위한 GIF ... 93 GIF 컬러 팔레트 ... 93 디더링과 밴딩 ... 94 디더링(Dithering) ... 96 GIF압축의 네 가지 법칙 ... 97 포토숍을 이용하여 GIF 파일의 색상 수 줄이기 ... 98 이미지레디(ImageReady)에서 색상 수 줄이기 ... 99 이미지레디에서의 자동 설정 ... 99 파이어웍스(Fireworks)에서 색상 수 줄이기 ... 100 페인트숍 프로(Paintshop pro)에서 색상 수 줄이기 ... 101 윈도우 16팔레트 ... 101 복합적인 이미지 ... 102 GIF 최적화를 위한 포토숍 플러그인 ... 103 온라인에서 파일 크기 줄이기 : GIFWizard ... 104 애니메이션 GIF ... 105 작은 PNG 파일 만들기 ... 106 일괄 처리 ... 107 포토숍 액션(Action) ... 107 포토숍과 이미지레디의 일괄 처리 ... 108 이미지레디의 드롭렛(Droplet) ... 109 파이어웍스의 일괄 처리 ... 110 디바벨라이저(Debabelizer)의 일괄 처리 ... 111 이미지 최적화에 대한 자료 ... 111 요점 정리 ... 112 7.색상 교정 문제 ... 113 RGB와 CMYK ... 114 RGB와 ICC 프로파일 ... 115 sRGB란 무엇인가? ... 115 ICC 컬러 프로파일이란 무엇인가? ... 117 ICC와 sRGB에 대한 필자의 견해 ... 118 도움이 될 만한 URL ... 118 감마에 대한 문제 ... 119 포토숍5.0에서의 sRGB ... 120 5.0에서 sRGB를 끄는 방법 ... 120 정확한 색상을 요하는 웹 사이트 ... 121 요점 정리 ... 122 8. 브라우저에서 안전한 색상 ... 123 브라우저에서 안전한 팔레트란 무엇인가 ... 124 브라우저에서 안전한 색상 도표(수학적인 값에 따라 구성) ... 126 브라우저에서 안전한 색상 도표(색조에 따라 구성) ... 128 브라우저에서 안전한 팔레트가 존재하는 이유 ... 130 브라우저에서 안전한 색상이 정말 중요한 것인가? ... 130 브라우저에서 안전한 색상 팔레트를 사용하는 시기 ... 131 16진수 기반의 색상 ... 132 안전하지 않은 색상들은 변화된다! ... 133 일러스트레이션 기반의 아트워크 ... 134 사진 기반의 아트워크 ... 135 브라우저에서 안전한 색상을 사용하는 방법 ... 136 브라우저에서 안전한 16진수 색상 선택하기 ... 136 다른 변환 방법 ... 137 16진수 색상 선택에 도움을 주는 것들 ... 138 팬톤사의 안전한 해결책 ... 139 CMYK는 브라우저에서 안전하게 보여지지 않는다 ... 139 브라우저에서 안전한 색상 선택하기 ... 140 CLUT란 무엇인가 ... 140 브라우저에서 안전한 스위치 팔레트를 포토숍에서 불러오는 방법 ... 141 이미지레디에서 팔레트 불러오기 ... 142 브라우저에서 안전한 팔레트를 파이어웍스로 불러오기 ... 143 GIF 아트워크가 브라우저에서 제대로 보여지는지 확인하는 방법 ... 144 포토숍에서의 GIF파일 ... 144 이미지레디에서 안전하게 디스플레이되는 GIF파일 ... 145 파이어웍스에서 안전하게 디스플레이되는 GIF파일 ... 145 벡터 기반의 소프트웨어 : 일러스트레이터와 프리핸드 ... 146 일러스트레이터 8.0의 안전한 색상들 ... 146 일러스트레이터 8.0의 스와치로 작업하는 방법 ... 146 일러스트레이터 7.0과 8.0의 CMYK 문제 ... 147 프리핸드 8.0으로 작업하기 ... 148 브라우저에서 안전한 색상을 유지할 수 없는 JPEG 아트워크 ... 149 복합적인 이미지 ... 150 포토숍에서 GIF로 저장된 복합적인 이미지 ... 150 파이어웍스에서 GIF로 저장된 복합적인 이미지 ... 151 이미지레디에서 GIF로 저장된 복합작인 이미지 ... 152 브라우저에서 불안전한 색상의 이미지 ... 153 요점정리 ... 154 9. 색상의 미학 ... 155 색상에 대한 전문용어 ... 156 색상 주제 정하기 ... 158 색상의 관계에 대한 용어 ... 158 웹 디자인에 색상 대비 적용하기 ... 160 색상 대비를 위한 도구 ... 162 Coloring Web Graphics.2 ... 162 색상을 조화시키는 포토숍 플러그인 ... 166 가독성 ... 167 색상 갤러리 ... 168 요점 정리 ... 172 10. 색상과 관련된 HTML 태그 ... 173 기본 색상 ... 174 색상 속성 ... 174 BODY 태그 ... 175 링크 색상 ... 176 16진수 대신에 사용할 수 있는 색상 이름 ... 177 색상 이름은 브라우저에서 안전한 경우가 적다 ... 177 넷스케이프에서의 색상 속성 ... 178 FONT태그 ... 178 TABLE태그 ... 179 요점정리 ... 180 11. 기본 링크 ... 181 링크 설절하기 ... 182 링크된 이미지 ... 183 이미지의 테두리 없애기 ... 183 넓이와 높이의 중요성 ... 184 비트맵의 축소와 확대 ... 185 WIDTH와 HEIGHT를 이용한 시각 효과 ... 185 ALT 속성의 중요성 ... 186 미국의 장애인 법률 ... 187 섬네일과 큰 이미지 ... 188 다른 매체로 링크시키기 ... 190 사운드와 무비 파일 ... 190 파일 타입과 HTML ... 190 링크된 그래픽에 대한 미적 조언 ... 191 요점 정리 ... 192 12. 배경 타일 ... 193 배경 타일 만들기 ... 194 타일 패턴의 크기 결정 ... 195 화면을 채우는 배경 ... 196 패턴화된 타일을 위한 파일 포맷 ... 198 이음새를 있게 할 것인가, 말 것인가, 그것이 문제로다 ... 199 이음새 ... 199 이미지레디와 포토숍을 이용하여 이음새 없애기 ... 200 이미지레디에서 이음새 없는 타일 만들기 ... 200 포토숍에서 이음새 없는 타일 만들기 ... 201 한 방향으로 길게 이어진 타일 ... 202 배경의 미학 ... 203 요점 정리 ... 204 13. 투명한 아트워크 ... 205 투명도란 무엇인가? ... 206 투명도 가장하기 ... 207 마스킹을 쓰는 방법 ... 207 트릭을 쓰는 방법 ... 207 브라우저의 환경설정 ... 208 투명하게 보이도록 꾸밀 수 없는 패턴 타일 ... 208 GIF 투명도 ... 209 전문가와 안티알리아싱 ... 210 GIF 투명도로 부드러운 외곽, 글로, 그림자 효과 내기 ... 211 GIF 투명도를 위한 툴과 테크닉 ... 212 이미지레디의 GIF 투명도 ... 212 파이어웍스의 GIF 투명도 ... 214 포토숍 5.0의 GIF 투명도 ... 215 GIF89a에 대해서 ... 215 PNG투명도 ... 217 요점 정리 ... 218 14. 선, 버튼, 강조점 ... 219 수평선 ... 220 HTML 방식의 수평선 ... 221 장식적인 수평선 태그 ... 222 수평선과 배경 타일 ... 224 자신만의 방법으로 수평선 만들기 ... 224 포토숍5.0으로 선 만들기 ... 225 수직선 ... 228 클립 아트가 제공하는 선 ... 228 강조점 ... 229 HTML로 강조점을 넣은 목록 ... 229 순위 목록과 정의 목록 만들기 ... 230 조직화된 순위 목록 ... 231 사용자 정의 강조점 만들기 ... 232 자신만의 강조점 아트워크 만들기 ... 233 포토숍에서 레이어 이펙트 설정을 이용해 버튼 만들기 ... 234 클립아트버튼 ... 235 요점 정리 ... 236 15. 이미지맵 ... 237 클라이언트 사이드와 서버 사이드 이미지 맵 ... 238 클라이언트 사이드 이미지맵의 코드 ... 240 서버 사이드 이미지맵 ... 241 서버 사이드 클라이언트 사이드 이미지맵을 혼합해서 사용하기 ... 242 ALT 태그의 중요성 ... 243 Width와 Height 속성의 중요성 ... 243 이미지맵은 진정 필요한 것인가? ... 244 주석이란 무엇인가? ... 244 파이어웍스로 이미지맵 만들기 ... 245 이미지레디로 이미지맵 만들기 ... 246 이미지맵에 대한 기타 자료 ... 247 요점정리 ... 248 16. 웹 타이포그래피 ... 249 필수적인 타이포그래피 용어 ... 250 HTML에서 불가능한 요소들 ... 251 타아포그래픽에 대한 학습 ... 252 마이크로소프트사의 타이포그래피 ... 252 미학적인 고려 ... 253 웹 페이지 인쇄하기 ... 253 HTML 기반의 타이포그래피 ... 254 HTML 폰트의 선택 ... 255 FONT FACE 태그 ... 256 Verdana와 Georgia ... 256 맥과 PC의 폰트 크기 차이 ... 257 그래픽 기반의 타이포그래피 ... 258 알리아스와 안티알리아스 ... 258 활자 디자인을 위해 파이어웍스 사용하기 ... 259 온라인 폰트에 대한 자료들 ... 260 텍스트 그래픽을 위해 HTML 작성하기 ... 261 폰트 임베딩이란 무엇인가? ... 262 트루독(TrueDoc) ... 262 트루타입 임베딩과 오픈타입 ... 263 보안 범위 ... 264 임베딩에 반대하는 서체 디자이너들 ... 265 PDF란 무엇인가? ... 266 플래시에 대해서 ... 267 요점 정리 ... 268 17. 정렬과 테이블 ... 269 웹 페이지는 얼마나 큰가? ... 270 HTML 태그를 이용한 정렬 ... 271 텍스트 정렬 태그와 속성 ... 272 HTML을 이용한 행간 ... 273 이미지 정렬 태그 ... 274 가로 세로 여백을 위한 태그 ... 274 WIDTH와 HEIGHT 속성 ... 276 HTML 대신에 아트워크 이용하기 ... 277 WIDTH와 HEIGHT 속성으로 여백 만들기 ... 277 테이블을 이용한 정렬 ... 278 데이터 테이블 ... 278 HTML 테이블 태그 ... 279 페이지 레이아웃을 위한 그래픽 테이블 ... 282 퍼센트와 픽셀 ... 282 퍼센트 기반의 테이블 ... 282 픽셀 기반의 테이블 ... 283 테이블을 끝내라! ... 284 테이블을 이용해 들여쓰기 ... 285 WYSIWYG 테이블 ... 286 이미지 편집 소프트웨어의 테이블 기능 ... 287 요점 정리 ... 288 18. 프레임 ... 289 프레임이란 무엇인가? ... 290 프레임의 긍정적인 면과 부정적인 면 ... 291 프레임에 대한 기본 지식 ... 292 프레임 배우기 ... 293 프레임세트를 위한 코드 ... 293 테두리 두께를 증가시키기 위한 코드 ... 293 테두리를 없애기 위한 코드 ... 294 컨텐츠를 자르기 위한 코드 ... 294 상대적인 위치를 정하기 위한 코드 ... 294 프레임을 포함시키기 위한 코드 ... 295 타깃 지정하기 ... 296 container.html 안의 코드 ... 296 타깃으로서 프레임을 이용하기 위한 코드 ... 297 프레임세트를 대치하기 위한 코드 ... 297 프레임을 위한 타깃 태그 ... 297 재미있는 프레임 ... 298 여섯 개의 프레임으로 분리된 프레임세트를 위한 코드 ... 302 블리딩된 테두리를 간단하게 제작하기 ... 302 프레임을 대체하기 위한 페이지 ... 303 요점정리 ... 304 19. 계층적인 스타일 시트 ... 305 스타일 시트란 무엇인가? ... 306 스타일 시트 분석 ... 307 '계층적인'의 의미는? ... 307 옛 버전의 브라우저에서 스타일을 안 보이게 하기 ... 308 외부, 내부, 인라인 스타일 시트 ... 309 활자와 측정 단위 ... 310 타이포그래피 작업하기 ... 311 선택자(Selectors) ... 312 ID와 CLASS ... 312 절대적인 위치 정하기 ... 313 DIV와 절대적인 위치 정하기 ... 314 텍스트와 이미지를 레이어로 쌓기 ... 315 텍스트와 이미지를 레이어로 쌓기 위한 코드 ... 316 코드 분석 ... 318 WSIWYG편집기 ... 319 요점 정리 ... 320 20. 웹을 위한 스캐닝 기법 ... 321 해상도를 어떻게 정할까? ... 322 스캐닝 용어 사전 ... 323 스캐닝 장비 ... 323 디지털 카메라와 DV ... 324 스캔 대신에 이용할 수 있는 포토 CD ... 325 포토숍5.0에서 이미지 크기 조절하기 ... 326 Indexed Color 모드에서 크기를 조절하자 말라 ... 327 망점 스크린의 패턴과 무아레 ... 328 이미지 프로세싱 테크닉 ... 330 Leveis ... 330 색조 / 채도 ... 331 요점 정리 ... 332 21. GIF 애니메이션 ... 333 애니메이션의 미학 ... 334 애니메이션 GIF포맷 ... 335 애니메이션 GIF가 지원하는 기능 ... 335 애니메이션 GIF에 대한 자료 ... 335 GIF 애니메이션 용어 해설 ... 336 애니메이션을 만드는 방법 ... 338 일반적인 애니메이션 전문용어 ... 339 프레임-바이-프레임 GIF 애니메이션을 위한 툴과 테크닉 ... 340 파이어웍스에서의 프레임 애니메이션 ... 341 이미지레디에서의 모션 그래픽 ... 342 파이어웍스에서 애니메이션을 위한 트위닝 ... 343 그밖의 GIF 애니메이션 툴 ... 344 요점 정리 ... 346 22. 자바스크립트 ... 347 자바스크립트의 간략한 역사 ... 348 자바스크립트 배우기 ... 349 롤오버 ... 350 롤오버 아트워크 만들기 ... 350 대치하기의 예 ... 351 가리키기의 예 ... 351 복합적인 방법의 예 ... 351 롤오버를 위한 포토숍 레이어 ... 352 롤오버 잘라내기 ... 352 이미지레디에서 잘라내고 최적화하기 ... 353 파이어웍스에서 간단히 롤오버 제작하기 ... 354 파이어웍스에서의 롤오버 ... 356 파이어웍스로 제작한 테이블 안의 롤오버 ... 357 드림위버에서의 롤오버 ... 358 드림위버에서 대치하기 방법의 롤오버 제작 ... 358 드림위버에서 대칳기 방법의 롤오버 코드 ... 359 드림위버에서 가리키기 방법의 롤오버 제작 ... 360 드림위버에서 가라키기 방법의 롤오버 코드 ... 361 드림위버에서 복합적인 방법의 롤오버 제작 ... 362 드림위버에서 복합적인 방법의 롤오버 코드 ... 364 호환성 점검 ... 365 브라우저에 대한 호환성 점검 ... 368 호환성 점검을 위한 코드 ... 368 별개의 윈도우 띄우기 ... 369 별개의 윈도우를 띄우기 위한 코드 ... 369 요점 정리 ... 370 23. 마이나믹 HTML ... 371 DHTML 개관 ... 372 계층적인 스타일 시트 ... 372 자바스크립트 ... 372 플러그인 ... 372 DOM ... 372 DHTML의 멋진 기능 ... 373 DHTML 제대로 사용하기 ... 373 레이어 ... 374 애니메이션 ... 376 드래그 앤 드롭 ... 380 DHTMLzone ... 385 요점 정리 ... 386 24 퀵타임 3.0 ... 387 퀵타임에 대한 이해 ... 388 웹을 위해 향상된 기능 ... 388 퀵타임 3.0의 웹 환경 ... 389 '포스터'무비 ... 389 HREF,스프라이트와 텍스트 트랙 ... 389 다양한 데이터 전송률의 예 ... 390 스트리밍 ... 391 이미지 포맷 지원 ... 391 DV 캠코더 지원 ... 391 QTVR 지원 ... 391 일반적인 퀵타임 명령어 ... 392 퀵타임의 부정적인 면 ... 392 디지털 비디오 용어 해설 ... 393 요점 정리 ... 394 25. 플래시와 쇽웨이브 ... 395 플러그인의 신뢰성 ... 396 플러그인 페이지로 방문객 보내기 ... 396 플래시 파일 포맷 ... 397 플래시 배우기 ... 398 플래시에서 드로잉하기 ... 398 플래시 자료들 ... 398 장면과 심벌 ... 399 심벌 만들기 ... 399 심벌과 장면의 관리 ... 399 타임라인과 키프레임 ... 400 롤오버 버튼 ... 400 버튼에 사운드 더하기 ... 401 플래시의 상호대화성 ... 402 플래시와 웹의 통합성 ... 403 SWF를 포함하는 HTML 프레임 ... 404 쇽웨이브 컨텐츠 ... 405 쇽웨이브 파일 저장하기 ... 405 디렉터 7에 대한 소개 ... 406 디렉터의 인터페이스 ... 406 새로운 웹 관련 기능 ... 408 디렉터와 플래시를 위한 애프터쇽 ... 409 요점 정리 ... 410 26. 시각 디자이너를 위한 HTML ... 411 HTML 파일명을 위한 프로토콜 ... 412 일반적인 파일명 ... 412 파일 확장자 ... 412 상대적인 또는 절대적인 파일 경로명 ... 413 문제 해결 ... 414 여러분의 페이지 체크하기 ... 414 페이지 업로드하기 ... 415 일반적인 HTML 태그 ... 416 표제어 태그 ... 416 본문 태그 ... 416 텍스트를 위한 정렬 태그와 속성 ... 416 텍스트 태그 ... 417 수평선 태그 ... 417 링크 태그와 속성 ... 417 이미지를 위한 정렬 태그와 속성 ... 418 이미지 태그 ... 418 목록 태그와 속성 ... 418 주석 태그 ... 418 테이블 태그 ... 419 프레임 태그와 속성 ... 419 주석 태그 ... 419 요점 정리 ... 420 27 웹 그래픽 자료 ... 421 디자인 회의 ... 422 디지털 아트 교육 프로그램 ... 422 도움이 될 만한 URL ... 424 웹 사이트 디자인 갤러리 ... 424 잡지 ... 424 용어 설명 ... 425 찾아 보기 ... 431