CSS3를 실무에 사용할 웹 디자이너와 개발자를 위한 책. 이론과 실무를 겸비한 15년 경력의 CSS3 분야의 전문가인 저자는 미디어쿼리, CSS 선택자, 모조 클래스, 다중 칼럼, CSS 애니메이션 등 현대 웹 디자인에서 강조되는 CSS3의 주요 기법을 상세히 설명하고, 그 모든 시각적인 결과를 상세히 보여준다. 또, 플렉서블 박스 레이아웃, 템플릿 레이아웃, CSS 계산함수와 사이클, 이미지 스프라이트 등 실험적이지만 이미 구현되고 있는 미래 지향적인 스타일 정의 기법을 예제와 함께 알기 쉽게 소개한다.

이 책은 함축적인 기술언어로 작성된 CSS3 명세서의 내용을 이해하기 쉬운 방식으로 설명하고, 지금 당장 모든 브라우저에서 CSS3로 할 수 있는 일을 한눈에 보여준다. 아울러 현장감 넘치는 예제와 좋은 디자인에 대한 원칙을 바탕으로 여러분의 CSS 활용 능력을 확장시켜서 평범한 마크업 문서를 놀랍도록 스타일이 살아있는 웹 페이지로 바꿀 수 있는 방법을 설명한다.

이 책을 통해 익힐 수 있는 최신 CSS3 기능은 다음과 같다.

■ 외곽선, 그림자 드리우기, 기타 시각 효과를 사용해서 텍스트에 스타일 부여
■ 배경 이미지의 생성과 세밀한 위치 설정, 크기 조절 기법
■ 이벤트에 의한 전환 효과와 애니메이션 구현으로 웹 페이지에 생동감 부여
■ 텍스트와 이미지에 2D와 3D 변환 효과 적용
■ 부드러운 색상의 전환 효과를 적용해서 만드는 선형, 원형 계조 색상
■ 스마트폰과 태블릿 등의 기기를 위한 모바일 웹사이트 구현

이 책의 초반부는 많은 브라우저에서 정상적으로 구현되고, 일상적으로 활용할 수 있는 CSS 속성을 주로 다뤘고, 책의 중반부로 넘어가면서 다소 실험적이거나 향후 채택될 가능성이 있는 기술을 소개했다. 그리고 마지막 몇 개 장은 아직 일반적으로 구현되지 않았지만 머지않은 장래에 구현될 속성의 작동 방식에 대해 CSS3 명세를 풀어서 설명하기도 했다.

이 책의 끝 부분에는 본문 내용으로 다루지 못한, 좀 더 세부적인 자료를 담은 2개의 부록이 있다. 부록 A에는 CSS3의 각종 기능 구현 여부를 다양한 브라우저에서 테스트해서 한눈에 볼 수 있게 정리한 참고자료를 수록했고, 부록 B에는 CSS3 활용에 도움을 줄 온라인 자료, 기타 유용한 도구, 그리고 흥미를 끄는 시연 예제를 담았다.

이 책의 독자를 위해 마련된 웹사이트인 http://www.thebookofcss3.com/에서 이 책에 수록된 모든 예제와 시연 결과, 부록 등을 최신 버전으로 갱신한 정보를 볼 수 있다.

오랜 기간 동안 인터넷 산업에 종사해온 사람들에게 CSS3는 큰 화젯거리였다. 지난 2006년 나는 CSS3.info를 시작했는데, 피터는 여기서 표준안의 개발과 이것이 브라우저에서 실제로 어떻게 보이는지에 대해 글을 쓰기 시작했다. CSS3.info 사이트를 운영하면서, 그 누구보다도 열정적으로 CSS3에 대해 실험하고 글을 쓰는 피터의 모습을 충분히 볼 수 있었기에, 이 책에 대한 추천사를 다른 사람이 아닌 내가 쓰는 건 어쩌면 당연한 일이 아닐까 생각한다.

CSS3는 마침내 주류의 대열에 들어섰다. 신세대 브라우저(파이어폭스 4, 구글 크롬, 인터넷 익스플로러 9 등)의 등장과 함께 웹 디자인 커뮤니티에 속한 우리 같은 사람들이 오랜 기다림에 대한 보상을 받게 된 것이다. 이제는 CSS3의 강력함과 유연성에 힘입어 다양한 브라우저에서 미디어 쿼리를 이용할 수 있고, 이전보다 똑똑해진 배경 이미지를 사용할 수 있으며, 웹 폰트 역시 손쉽게 적용할 수 있다.

곧 CSS3를 사용할 개발자에게 이 책은 최고의 교본이 될 것이라 생각한다. 이 책을 통해 여러분은 어떤 기능이 작동하는지, 또 어떤 기능이 구현되지 않는지를 알 수 있고, 명세서의 크고 작은 모든 수정사항도 확인할 수 있다. 특히 이 책을 통해 여타 자료에서는 접하기 어려운 CSS3의 전환 효과와 2D, 3D 변환에 대해서도 자세히 살펴볼 수 있다.

이 책에서도 소개하고 있는 매트릭스 함수 같은 내용은 누구나 쉽게 이해할 수 있는 내용은 아니지만, 피터는 복잡한 매트릭스 함수를 대신해서 이해하기 쉽고 사용하기도 훨씬 간편한 CSS3의 함수를 소개하고 이를 활용할 수 있는 예제까지 상세히 소개하고 있으니, 이는 대단한 업적이라 할 만하다.

CSS3는 웹 디자이너의 작업을 지원하기 위해 항상 새로운 제안을 받아들이고, 그 영역을 확장하고 있는 프리젠테이션 문서의 표준이다. 디자이너의 한 사람으로서, 나 역시 CSS3가 앞으로 어떤 새로운 기회를 가져다 줄지 기대가 크다. 하지만 지금은 무엇보다도 이 책을 통해 CSS3에 숨겨진 값진 보물을 찾아 나설 때다.

• 주스트 드 바크(Joost de Valk) / Yoast.com의 창업자, 대표이사

이 책은 지난 5년간 웹과 인쇄 분야의 CSS3에 대해 쓴 글을 모은 결과물이다. 브라우저와 CSS를 둘러싼 환경은 단기간에 많은 변화를 겪었고, 미처 따라가기 힘들 정도로 많은 기능과 구현 기법이 지속적으로 등장하고 있다. CSS3 명세서는 최종 사용자가 아닌 브라우저 제작사 같은 구현 담당자를 우선적으로 고려해서 함축적인 기술 언어로 작성됐기 때문에 일상적인 참고용 자료로 사용하기에 어려움이 있었다. 그래서 나는 이 책을 쓰면서 명세서와 웹 개발자 사이의 간격을 좁혀보겠다는 의지를 다졌다.

이 책의 초반부는 많은 브라우저에서 정상적으로 구현되고, 일상적으로 활용할 수 있는 CSS 속성을 주로 다뤘고, 책의 중반부로 넘어가면서 다소 실험적이거나 향후 채택될 가능성이 있는 기술을 소개했다. 그리고 마지막 몇 개의 장은 아직 일반적으로 구현되지 않았지만 머지않은 장래에 구현될 속성의 작동 방식에 대해 CSS3 명세서를 풀어서 설명하기도 했다. 책의 내용 가운데 혹시 실수가 있다면, 이는 순전히 나의 이해 부족에 따른 것이다.

CSS3 명세서 외에도 웹과 관련된 방대한 자료원인 모질라 개발자 네트워크(Mozilla Developer Network, https://developer.mozilla.org/)에서 기술 선도자의 경험과 실험의 결과에서 우러나온 참신하고도 소중한 자료를 많이 얻을 수 있었다. 코드 예제에 사용된 다양한 텍스트는 오픈 북 서비스를 운영하는 구텐베르그 재단(http://www.gutenberg.org/)의 공개 자료에서 가져왔다. 또한 이 책에 사용된 이미지 가운데 내가 직접 작성하지 않은 이미지는 해당 부분에 작성자의 이름과 출처를 표시했다.

피터 개스통(Peter Gaston) 닷컴 거품이 일던 시기에 웹에 뛰어들어 지난 11년 동안 전문적인 웹 개발자로 활동해왔다. 그간 오렌지(Orange), 스카이프(Skype), 시스코 시스템스(Cisco Systems)와, 팬이기도 한 아스날(Arsenal) 축구팀 등의 고객을 위해 에이전시와 기업의 일원으로, 혹은 프리랜서로 프로젝트에 참여했다. 지금은 런던의 쇼어디치에 있는 포크(Poke) 디지털 에이전시에서 일한다.

주로 HTML, CSS, 자바스크립트를 이용해 사용자 측 개발을 전문적으로 수행하며, 웹 표준과 시맨틱 마크업에 대해 해박한 지식을 갖고 있다. 자신의 블로그 http://www.broken-links.com/에 웹 기술 관련 글을 쓰고 있는 피터 개스통은 오랜 기간 http://www.css3.info/에 글을 기고해왔으며, Dev.Opera와 영국판 닷넷 매거진(미국에서는 실용적인 웹 디자인으로 유명)에서도 집필진으로 활동했다. 런던의 웹 개발자 커뮤니티 회합과 다른 공공 행사에서 연사로 참여했으며, 미래엔 좀 더 많은 기고와 강연을 할 계획이다.

브리스톨에서 태어났지만 런던에서 16년을 살았고, 최근 7년간은 그의 아내 애나와 함께하고 있다. 독서를 좋아해서 순수 문학 작품과 역사는 물론, 심리학 서적까지 즐겨 읽으며 독립 만화와 독립 영화의 열렬한 팬이기도 하다.

소셜과 모바일 시대를 맞아, 디자이너로서, 혹은 UI 개발자로서 익혀야 할 내용이 끝 없이 쏟아지고 있습니다. 스타일을 담당하는 CSS3는 객체지향적인 스타일 정의 기법과 Sass 같은 익스텐션, 그리고 이를 구현하기 위한 Compass 등의 프레임워크를 적극 도입하는 분위기입니다.

또, 지난 몇 년간 애플리케이션 중심의 프로그래밍 작업이 대중화 되면서 CSS3 역시 독자적인 스타일 정의 기법보다는 HTML5 API, 자바스크립트 프레임워크와 연결해서 DOM 요소를 직접 조작하거나, 스타일 요소를 동적으로 바인딩 하는 등, 프로그래밍에 가까운 스타일 정의 기법이 널리 사용되고 있습니다.

이러한 상황에서, CSS3를 실무적으로 활용하려면 스타일 정의 전반에 대한 내용과 특정한 시각 효과를 구현하기 위한 세부 내용을 꽤 상세히 알고 있어야 합니다. 사용자 문맥과 감정을 고려하고, 콘텐츠 흐름을 반영한 디자인을 하기 위해서는 먼저 CSS3의 세부 요소가 시각적으로 어떤 의미가 있는지 파악해 나갈 필요가 있는 것입니다.

피터 개스통은 이 책을 통해 현대 웹 디자인에서 강조되는 CSS3의 주요 기법을 상세히 설명하고, 그 모든 시각적인 결과를 낱낱이 보여주고 있습니다.

모바일 시대와 함께 전성기를 맞은 미디어 쿼리, 스타일 정의의 기초이자 UI 개발의 단서가 될 선택자, 그리고 지칭하기 힘든 대상을 쉽게 가리킬 수 있게 해주는 모조 클래스와 모조 요소는 코드 기반의 웹 디자인을 위한 필수 요소라 할 수 있습니다.

iOS 7과 안드로이드 킷캣 이후 강조되고 있는 웹 폰트와 동적으로 적용 가능한 텍스트 효과와 타이포그래피 스타일, 웹은 물론, 인쇄 등 다채로운 레이아웃 구성을 위한 다중 칼럼도 소셜과 모바일 콘텐츠 시대에 매우 중요한 요소입니다.

최근 웹 디자인의 주요 트렌드라고 할 수 있는 패럴랙스(Parallax) 디자인에서 거의 빠짐 없이 사용되는 전환 효과와 애니메이션, 다양한 화면 크기에 대응하기 위한 또 다른 전략인 유동적인 박스 레이아웃, 실험적이지만 외부 프레임워크와의 연결을 통해 유연성을 극대화한 템플릿 레이아웃에 대해서도 상세히 설명합니다.

책의 종반부에는 상대좌표 중심의 모바일 레이아웃 작업에 유용하게 사용할 수 있는 계산함수, 반복적인 작업을 대신해 줄 사이클, 웹 기반 게임 구현에 적극 사용될 이미지 스프라이트 등 단편적인 검색만으로는 결코 찾을 수 없는 깊이 있는 스타일 정의 기법을 소개합니다.

CSS3를 실무에 활용할 독자를 위해 꼼꼼히 써 내려간 이 책은 결코 가볍다고 할 수 없는 분량과 내용이지만, 웹 디자이너로서, 그리고 UI 개발자로서 차별화된 경쟁력을 갖추는 데 큰 도움이 되리라 생각합니다.

동준상 넥스트플랫폼 대표로서 모바일과 소셜 애플리케이션 분야에서 UI 개발과 UX 표준화 일을 한다. 한국생산성본부, KT, 삼성전자, 신세계, 국민은행 등에서 모바일 프로젝트를 위한 UX 디자인과 UI 개발 강의를 하고, 관련 교재를 집필했다. 2010년 이후 두산중공업 등 20여 개의 기업 프로젝트, 50여 개의 스타트업 지원 프로젝트에 참여했다. 중소기업진흥원 청년프론티어 심사위원(2014년), KT 앱 챌린지(2013년) 심사위원, 글로벌 앱 챌린지(2012년) 심사위원이었고, 한국콘텐츠진흥원 기술심사 및 멘토로 활동하고 있다.

번역서로 에이콘출판사에서 펴낸 『HTML5 Multimedia Development Cookbook 한국어판』(2012), 『jQuery UI 1.8 한국어판』(2012), 『The iOS 5 Developer’s Cookbook 한국어판』(2012), 『The Core iOS 6 Developer’s Cookbook 한국어판』(2013), 『The Advanced iOS 6 Developer's Cookbook (Fourth Edition) 한국어판』(2013), 『자바스크립트로 하는 유니티 게임 프로그래밍』(2014)이 있다.