이미 소장하고 있다면 판매해 보세요.
|
1장 웹에 대한 재발견
고급 CSS 소개 5 어떤 툴을 사용해야 할까? 5 고급 CSS를 사용해야 하는 이유 6 앞으로의 웹은 어떤 모습일까? 10 접근성은 지원해야 하는 옵션이 아니라 디자인 그 자체다 12 새로운 개념을 탑재한 고급 CSS에 다가가기 16 고급 CSS의 기본 개념 23 사이트가 모든 브라우저에서 똑같이 보여야 하는 것은 아닙니다 25 쓸 수 있는 모든 CSS 선택자를 사용합니다 25 가능하면 새로나온 CSS3를 사용해서 한발 앞서 갑니다 30 CSS로 표현하기 어려운 부분은 자바스크립트와 DOM을 사용합니다 30 가능하면 핵과 필터를 사용하지 않습니다 31 의미있는 이름을 사용하고 마이크로포맷을 사용합니다 33 아이디어를 공유하고 다른 사람들과 협력합니다 41 왜 이제서야 고급 CSS를 사용할 수 있는가? 47 예상하지 못한 CSS의 사용 49 브라우저 지원 등급화 51 발견하고 진행하고 영감받아서 앞으로 나아가기 53 컨텐츠 중심의 디자인 55 컨텐츠 중심의 접근 57 흔히 볼 수 있는 최적화되지 않은 CSS 레이아웃 59 스타일과 상관없이 최적화하기 60 시맨틱 = 의미 65 CSS 옷 벗는 날 65 의미를 마크업으로 변환하기:마크업 골든벨 66 컨텐츠의 의미 파악하기 76 계속 의미있게 작업하기 76 세상 모든 것을 마크업으로 79 전 세계는 리스트로 만들 수 있다 79 눈에 보이는 대로 리스트 사용하기 82 샌프란시스코에 가면 hCard를 보내세요 86 세상을 더 넓게 보는 훈련 88 시작점은 컨텐츠 88 이제 웹에 적용해볼 단계 97 2장 웹을 만드는 새로운 방법 완벽한 방법론을 찾아가는 과정 101 더 좋은 방법 찾기 101 컨텐츠 기반의 프로세스 103 컨텐츠 수집 107 화면구성도 작성 109 과거의 화면 구성도가 실패할 수밖에 없는 이유 111 화면 구성도는 반드시 필요한가? 112 과거의 화면 구성도와 동적인 표현 113 grey box 방법을 활용한 개선된 접근법 117 자세히 표현하기 위해 "심볼" 사용하기 119 시안 작업 121 빠르게 디자인 작업 진행하기 121 시안에 마크업 가이드 추가하기 122 인터랙티브 프로토타입 사용하기 125 실제 동작하는 인터랙티브 프로토타입 125 재사용 가능한 코드 만들기 127 화면구조와 프로토타입을 잘 만드는 방법 127 위지윅: 보는 것만큼 얻지 못할 수도 있다 128 인터랙티브 프로토타입 실제 만들어 보기 131 개발환경(브라우저) 선택하기 131 브라우저 익스텐션 사용하기 131 엘리먼트를 최소로 사용하기 134
마크업 유효성 검사 134 플로트 대신 포지션 사용하기 134 CSS 정돈하기 136 프로세스 실제 적용해 보기 141 무엇을 만들 것인가 141 컨텐츠 중심의 마크업 작성 142 CSS로 디자인 입혀가기 158 레이아웃 만들기 158 body부터 스타일 시작하기 159 작업 공유하기 166 기본 컬러 스타일 166 브랜드 영역 167 로고 부분 추가하기 167 네비게이션 꾸미기 169 하단 푸터 영역 표시하기 173 타이포그래피 스타일 완성 176 사이트를 만들 기반의 완성 179 3장 디자인과 웹 그리드 기반 디자인 183 디자이너와 그리드 185 황금비율과 3분할 법칙 187 완벽하게 유동적인 레이아웃 197 균등 분할 그리드 디자인 198 실제 사이트에서 그리드가 적용된 모습 201 Subtraction 201 Airbag Industries 204 제프 크로프트 사이트 분석 206 비얼의 블로그 분석 208 우리 주변에서 찾을 수 있는 그리드 211 신문 211 전통적인 8단 디자인 구성 213 최근 유행하는 6단 디자인 217 그밖의 신문 레이아웃 221 웹디자인에 새로운 그리드 적용하기 225 뉴스 분석 225 그리드부터 접근하기 226 비법을 전수해 드립니다 229 상세한 영역 조정 229 이미지 처리 230 일상생활에서 디자인에 영감을 줄 수 있는 것들 233 홈페이지 다시 꾸미기 233 무드 보드에 대하여 236 디자인 스크랩북 만들기 238 잡지에서 찾아볼 수 있는 인터페이스 243 타이포그래피 리소스 243 플래시 디자인에 대한 재검토 247 이미지나 사진을 활용한 작업 248 웹에서의 예술 활동 255 디자인은 단순히 매력적인 비주얼을 만드는 과정이 아니다 255 기술, 밖으로 눈을 돌리자 256 무드 고조시키기 259 주변을 둘러보자 261 목적이 뚜렷한 스크랩북 만들기 265 예술 미학으로서의 웹디자인 267 디자이너들은 더 발전해야 합니다 267 4장 고급 CSS 고급 CSS 273 절대 포지션 274 상대 포지션 287 플로트 응용 293 사이드바 만들기 298 여러 기법 조합하기 301 CSS3 313 통합 작업 313 새로운 표준을 만드는 작업에 참여하기 315 미래로의 시간여행 316 CSS3의 선택자 모듈을 사용한 디자인 316 배경색을 사용해서 가독성 높이기 317 배경과 외곽선 모듈을 사용한 디자인 320 복수 배경 이미지를 사용한 디자인 325 다단 구조 만들기 335 다단구조 레이아웃 모듈을 사용한 디자인 341 고급 레이아웃 모듈 345 다시 그리드로 돌아가서 346 고급 레이아웃 모듈을 사용한 디자인 351 마치면서 359 |
|
본론으로 들어가기에 앞서 책을 간단히 소개하는 이 글을 한번 읽어보시기 바랍니다.
책장을 한장 한장 넘기다보면 이 책의 디자인 스타일을 금방 파악할 수 있을 것입니다. 구성이 매우 아름답지 않습니까? 이 책에는 사진과 예시들이 가득합니다. 지루한 마크업과 CSS 코드를 반복하기보다 이미지를 사용해서 잘 설명하고 있습니다. 실제로 사용 가능할 정도의 예시들을 보여주면서 웹과 관련된 주제를 적절히 설명하고 있습니다. 코드와 관련된 책을 이렇게 잘 만들어도 되나 싶습니다. 저는 그런 부분을 여러분에게 강조하고 싶습니다. 제목을 통해서 나타나듯이 『웹디자인 2.0 고급 CSS』는 또 하나의 코드로 가득찬 책이 아닙니다. 이 책은 디자인과 코드가 잘 조화되고 어우러지도록 만들어졌습니다. 원하는 디자인을 만들기 위해서 어떤 코드를 적절히 사용해야 하는지에 대한 내용으로 되어 있습니다. 제약이 많은 실제 업무 보다는 그것을 벗어나서 새로운 시도를 하면서 작업할 수 있도록 합니다. 책에 들어 있는 내용이지만, 야후 같은 거대한 온라인 공간의 경우 구식 브라우저를 지원할 뿐만 아니라 새로운 브라우저를 사용하는 사람들에게는 최상의 경험을 제공하고 있습니다. 이러한 새로운 기술들은 머지 않아 곧 쓰이기 마련입니다. 여러분도 미리 배우고 준비 해서 앞으로 만들 사이트에 넣어야 할 내용입니다. 이 책에서는 여러분이 앞으로 사용할 기술에 대해 잘 보여주고 있습니다. 같은 관점에서 이 책은 2005년 초반에 나왔던 어떤 책과 비슷한 면이 있다고 할 수 있습니다. 이 책의 편집자인 몰리 홀즈쉬랙과 제가 같이 썼던 『The Zen of CSS Design』이라는 책을 읽어 보신 분도 있을 것입니다. 그 책에서 우리는 CSS를 코드라고 생각하기보다는 잘 만든 디자인 예시를 디자인 이론에 입각해서 설명하면서 보여주고 그것을 CSS로 표현하고자 애썼습니다. 만약 여러분이 그 책을 봤다면 이 책은 그 다음에 꼭 봐야 하는 책입니다. 『The Zen of CSS Design』을 통해 CSS 기반 디자인으로도 훌륭한 모양의 디자인을 만들 수 있다는 것을 알았고, 결국 비주얼 디자이너가 얼마나 잘하냐에 따라 다양한 가능성이 생길 수 있다는 것을 알았습니다. 이제 『웹디자인 2.0 고급 CSS』를 통해서 미래에 웹을 어떻게 만들 것인가에 대해 고민해 보시기 바랍니다. 그리고 또 중요한 것은 다른 기술서적과 달리 이 책은 순차적으로 과정을 따라가며 모든 것을 배우는 그런 책이 아니라는 점입니다. 이 책에서 여러분에게 개념을 알려주고 영감을 줄 수 있긴 하겠지만, 실제로 현재의 웹을 새로운 수준으로 끌어올리는 것은 모두 여러분의 몫입니다. 『웹디자인 2.0 고급 CSS』는 현재 웹에서 어떻게 해야 하는지를 설명하고 있지 않습니다. 현재의 웹을 어떻게 더 발전 시킬 것인가에 대해 이야기 합니다. 이제 과거에 연연하기보다는, 출발점에 섰다고 생각하고 앞으로 일어날 일을 생각해야 할 때입니다. 이 책은 여러분 앞에 펼쳐질 미래에 어떤 일이 일어날지를 시사해 줄 것입니다. 데이브 셰어 2006년 10월 --- 서문 |
|
첫 직업으로 웹 관련 일을 시작했던 2000년, 누구나 그랬듯이 웹을 더 예뻐 보이게 만들기 위한 각종 편법들을 생각하며 많은 시간을 보냈다. 이미지며 텍스트며 가리지 않고 오직 보이는 모양을 위해 잘라내고, 원하는 모양을 만들기 위한 아이디어들을 디자이너와 개발자에게 전하면서 컴퓨터를 전공한 웹기획자라는 것을 자랑스럽게 생각했던 시기였다.
그 이후 무언가 더 좋은 방법이 없을까 찾아보는 과정에서 외국에서 사용하는 방식들에 눈을 뜨게 되었다. 그때는 웹표준인지도 알지 못한 채 단순한 기법이라고만 여긴 채 남들에게 열심히 추천을 해주기도 했었다. 허나 웹 에이전시에서 먹고 살기 위해서는 기존에 하던 디자인과 테이블 위주 코드를 생성할 수밖에 없는 환경이었다. 2005년 지인이었던 박수만님에게 받은 『실용예제로 배우는 웹표준』이라는 책을 읽으면서 드디어 한글로도 이런 책이 나오는구나 하는 반가움에 마음이 들떴다. 하지만 한편, 과연 우리나라 사이트에서 이런 코드를 볼 수 있는 날이 오긴 할까라는 부정적인 생각도 들 수밖에 없었다. 그러나 그 이후 국내에도 웹표준에 대한 관심이 많이 높아지고, 웹 제작환경에서도 'UI 개발'이라는 이름이 생겨날 만큼 많은 변화가 있었다. 과거에 비하면 수많은 사이트들이 코드상으로 웹표준 기반 사이트로 탈바꿈하고 있다. 물론 아직 웹 제작 프로세스 전체가 웹표준 혹은 의미있는 웹에 맞게 완벽하게 진행되고 있다고 할 수는 없다. 또 웹이 변하는 만큼 앞으로 나올 수많은 기술을 익히고 끊임없이 발전을 해야 하기 때문에 완벽한 방법이라는 것은 영원히 없을지도 모른다. 이 책의 원제는 Transcending CSS이다. 웹은 지속적으로 바뀌고 기술은 끊임없이 발전하고 있기 때문에 누구든 뒤처지지 않기 위해서 새로 나올 것에 대해 관심이 많다. 이렇듯 새로운 관점에 기반한 'transcending CSS'라는 개념을 이 책에서는 '고급 CSS'라고 표현했다. 비록 이 책의 일부 예제들이 현재 여러분이 쓰고 있는 브라우저에서 제대로 보이지 않더라도 미래를 대비하는 마음으로 새로운 기법과 개념에 대해 관심을 가져야 한다. --- 역자 서문 |
|
『웹디자인 2.0 고급 CSS』는 단지 멋진 최근 CSS 기법을 사용하는 기술적인 부분을 논하는 책이 아니다. 여러분이 날마다 쓰고 있는 CSS를 최대한 활용해서 멋진 디자이너나 아티스트가 되는 여정을 알려준다. 『웹디자인 2.0 고급 CSS』는 낡은 기법에서 벗어나 새로운 기술을 활용하는 방법을 강조한다. 다양한 방법을 시도함으로써 기존과는 다른 디자인 결과물을 만들어 낼 뿐만 아니라 디자인 작업 자체를 빠르고 효율적으로 진행할 수 있는 방법을 찾는 것을 목표로 삼는다. 그러기 위해 여러분은 디자인과 기술적인 면 모두에서 지속적으로 새로운 내용을 습득해 나가야 한다.
|