소프트웨어 설계 분야에서는 이미 오래 전부터 디자인 패턴이 정립되어 널리 사용되고 있다. 디자인 패턴은 더욱 효율적이며 사용성이 높고 유지보수하기 쉬운 프로그램을 바랬던 많은 이의 노력과 경험의 산물이다. 웹 기술의 기본이 되는 마크업과 스타일시트도 마찬가지다. ‘이런 디자인이나 레이아웃이 필요할 때는 이렇게 하면 된다’는 공식 같은 체계가 존재한다면 손쉬운 적용이 가능해져 웹 개발이 한결 편리해질 것이다.
하지만 마크업과 스타일시트 영역에는 그러한 패턴을 누구도 체계적으로 정리한 유례가 없었다. 따라서 개발자의 필요에 따라 재사용이 불가능한 수작업 코딩을 매번 하든지 웹 디자인 도구를 이용한 유연하지 못한 개발을 하는 수밖에 없었다. HTML5와 CSS3는 많은 부분이 정해졌지만 지금도 계속해서 발전하고 있으니 어떠한 패턴을 찾는다는 것은 쉽지 않아 보였다. 그러나 이 책의 저자는 놀랍도록 섬세한 분류를 통해 각 특성마다 몇 가지 패턴을 만들어냈다.
나는 이 책을 번역하기에 앞서 전체적인 구성을 훑어보면서 상당히 충격을 받았다. 처음에 CSS를 본격적으로 학습할 때 봤던 책들처럼 일일이 설명을 나열하는 방식과는 근본적으로 달랐다. 나처럼 CSS에 대한 지식을 갖춘 사람이 아니더라도 이 책을 보면 HTML이나 CSS를 부담 없이 배울 수 있고 쉽게 적용할 수 있겠다는 생각이 들었다. 이 책을 보면 이젠 이런 식으로 패턴화하는 것이 가능하다는 생각을 누구나 할 수도 있다. 그러나 이 책이 나오기 전까지는 이런 식으로 각 특성의 분류를 통해 조립해 쓸 수 있게 패턴으로 만든다는 생각을 누구도 하지 못했거나 실천으로 옮기지 못했을 것이다. 다시 말해, 이렇게 패턴화한 작업도 무척 대단하지만 패턴화 자체가 더욱 대단하고 참신하다.
이 책의 또 한 가지 장점은 설명하는 내용을 한눈에 보면서 이해할 수 있는 예제 그림이다. 번역을 하는 내내 마크업과 스타일시트를 한글에 맞게 조금 수정하거나 위치를 조정한 후 브라우저에서 열어 결과를 보면서 ‘이 좋은 책이 왜 이제서야’ 하는 생각이 들었다. 이런 패턴이 진작에 나와서 나도 이런 방식으로 CSS를 공부했다면 상황마다 어떤 것을 어떻게 적용해야 할지 잊어버리지 않고 체계적인 방식으로 더욱 쉽게 쓸 수 있었을 것이다. 이 책은 Cookbook과는 조금 다르다. 웹 개발자나 디자이너가 필요한 상황을 찾아서 거기 나온 패턴을 적용할 수 있다는 점에서 형식은 Cookbook과 비슷하다. 그러나 패턴의 특성상 원하는 요건이 여러 가지일 땐 그 요건을 구현하기 위해 각 패턴을 일렬로 나열하여 사용하거나 이름으로 부를 수 있는 조립적 성질이 있다는 점이 다르다. 말 그대로 어떤 요소 안에 글자를 왼쪽 정렬로 배치하면서 글자 대신 그림을 표시하고 싶다면, 글자를 왼쪽 정렬하는 패턴과 글자 대신 그림으로 표시하는 패턴을 동시에 적용하면 된다.
이 책의 각 절은 패턴의 이름이다. 패턴마다 부르기 쉬운 짧은 이름이 있어서 여러 요건을 동시에 구현해야 한다고 가정할 때, 각 패턴명을 쭉 나열해 부름으로써 토의나 대화가 가능하다. 그렇게 패턴명을 나열해서 이야기하는 것만으로 듣는 상대방은 어떤 구현이 필요한지 길게 설명하지 않아도 바로 이해하고 즉시 필요한 다수의 패턴을 적용할 수 있다. 이것이 패턴의 궁극적인 목적이다. 나아가 패턴명을 그대로 마크업 요소의 클래스명이나 아이디명으로 사용하면 더욱 개발이 쉬워진다. 개발할 때마다 각 패턴에 대한 자신만의 애용하는 이름을 정해두고 사용한다면, 마치 기계로 찍어내듯이 신속하고 빠른 개발이 가능해진다. 웹을 포함한 모든 소프트웨어 분야에서 템플릿이나 패턴이 중요한 이유가 바로 이 때문이다. 공식 같은 틀이 있고 거기에 간결한 명칭이 있다면 그것을 사용할수록 더욱 편해진다.
이 책의 몇몇 용어가 생소할 수도 있을 텐데 그 점에 대해서 읽는 분들의 양해를 구한다. 패턴이라는 특성상 그 과정에서 저자가 이 책을 쓴 의도와 지향점이 있고 패턴만의 특수한 용도가 있다 보니 생소한 표현이 있다. 그러나 그것들은 알기 쉬운 예제 코드와 캡처 그림을 보면서 손쉽게 습득할 수 있고 실전 개발이나 디자인에 3회 이상 적용하다보면 자연히 몸에 베어 기억하기 어렵지 않을 것이다. 어떠한 것이든 처음 생겨난 개념이나 체계는 낯설고 학습이 필요하지만 한 번만 해놓고 나면 습관처럼 편해지는 법이니 거부감을 갖기보단 먼저 한 번 직접 보고 실습해본 후 평가하길 바란다.
이 책은 웹 개발자나 웹 디자이너에겐 가히 혁신이라고 생각한다. 번역 과정에서 용어를 조율하는 등의 문제로 인해 많은 어려움에 부딪혔지만 분명히 많은 이에게 엄청난 도움을 줄 것이라고 믿는다. 또한 이 책을 읽은 사람과 그렇지 않은 사람은 분명히 작업 효율과 이해의 깊이에 커다란 차이가 있게 되리라는 확신이 든다. 그만큼 나는 처음부터 이 책의 내용에 충격을 받았고 패턴화 방식과 활용도를 높이 평가하며 결과적으로 이 책에 대한 애착도 크다. 쏟아지는 업무량에도 이 책의 편집과 고된 수정 작업을 끝까지 책임져주시고 지속적인 피드백을 해주신 박민아 편집자님께 깊은 감사를 전하며 이 글을 맺는다.
옮긴이_김지원
---「옮긴이의 말」 중에서

이 책은 CSS3로 HTML5를 꾸미는 각종 기법을 주제로 한다. 어디에든 바로 사용할 수 있는 350여가지 디자인 패턴이 수록되어 있는데, 각 디자인 패턴은 모듈식이며 맞춤화가 가능하므로 여러 패턴을 조합해서 무궁무진한 디자인을 만들 수 있다.
각 디자인 패턴은 철저히 테스트한 후 크롬, 파이어폭스, 인터넷 익스플로러, 오페라, 사파리를 비롯한 주요 웹 브라우저에서 작동하는지 검증했다. 이 책만 있으면 개발자는 이제 더 이상 편법, 눈속임, 끝없는 테스트, 하나의 수정사항을 여러 브라우저에서 잘 돌아가게 조정하는 등 귀찮은 일은 하지 않아도 된다.
디자인 패턴을 활용하기란 코드를 복사해서 붙여 넣고 몇몇 값을 수정하는 것만큼이나 쉽다. 어느 값을 수정할 수 있는지, 그 값 수정으로 인해 결과에 어떤 영향이 미치는지 바로 알 수 있어서 제대로 돌아갈지 염려할 필요 없이 자신이 의도한 정확한 스타일과 레이아웃을 작성할 수 있다.
또한 단순한 레시피에 그치지 않고, CSS의 유용한 여러 기능을 체계적으로 설명하고 그런 기능을 HTML에 연동하여 재사용 가능하도록 패턴화했다. 각 패턴마다 직관적 이름을 부여해서 찾아보거나 말하기 쉽게 했다. 접근성과 모범 사례를 각각 디자인 패턴, 실습 예제, 소스코드로 발전시켰다.
이 책은 참고서처럼 처음부터 끝까지 순서대로 읽으면서 자신에게 필요한 해법을 찾을 수 있다. 각 예제마다 화면 캡처를 비롯해 관련 HTML 코드와 CSS 코드를 수록해 놓아 각 디자인 패턴이 어떠한 원리인지를 손쉽게 알 수 있다. 각 디자인 패턴에 대한 설명도 곁들여 놓았으므로 패턴의 원리를 읽으면서 해당 예제 코드를 연구하기도 간편하다.
각 디자인 패턴은 주제별로 정리해 놓았으며, 사용 가능한 모든 CSS 명령은 다른 책과 차별화된 문맥으로 깊이 있게 다루었다. 모든 디자인 패턴은 접근성이 높고 모범 사례를 따르기에, 이 책의 모든 페이지는 읽을 가치가 있으며 설계하고 코딩하는 동안 개발자에게 있어 훌륭한 참고 자료가 된다.
지은이_ 미셸 바우어, 디오니시오스 시노디노스, 빅터 섬너