이번에 처음 CSS Framework를 찾아봤는데 아직 그 역사가 짧아서인지 구분이 좀 명확하지 않은 듯한 느낌이지만 이것저것 찾아보니 크게 미리 정의된 스타일에 맞게 class만 지정해서 사용하는 방식과 심플한 문법으로 CSS를 작성하면 컴파일을 통해서 완전한 CSS가 나오는 형태 2가지로 분류할 수 있는 것 같습니다.
전자에 해당하는 프레임워크들에는 Blueprint, 960 Grid System, YAML, Elastic, Less Framework 4등이 있습니다. 프레임워크별로 특성들이 있겠지만(저도 종류별로 만져본 것은 아니라서...) 대표적으로 제공하는 Grid같은 경우 프레임워크에서 제공하는 CSS파일을 받아서 페이지에 적용하고 가이드대로 class만 적용하면 복잡한 레이아웃도 간단하게 잡을 수 있도록 제공하고 있습니다. 후자같은 경우는 Sass나 LESS가 대표적입니다.(여기서 LESS는 앞의 Less Framework 4와는 다릅니다.) Sass나 LESS는 변수를 사용한다거나 공통적인 부분을 함수로 분리해서 재사용하는 등 약간의 프로그래밍적인 요소들이 추가되어 쉽게 작성할 수 있게 해주고 이를 컴파일해서 일반적인 CSS파일로 만들어주는 방식을 취합니다. 그런면에서 프레임워크라는 용어는 솔직히 적합하지 않은 면이 있다고 생각합니다.
Blueprint 설정하기
이번에 개인적으로 웹사이트를 만들면서 CSS로 레이아웃을 잡는게 힘들어서 Blueprint를 적용해보고 있습니다. Blueprint의 소스는 Github에서 관리되고 있어서 개발중인 소스도 받을 수 있으면 공식사이트에서도 다운로드받을 수 있습니다. 현재 최신 버전은 1.0입니다. Blueprint가 제공하는 간단한 샘플페이지가 제공되고 있으며 간단한 Quick Start Tutorial을 제공되고 있고 nettuts+의 포스팅정도가 제공하는 문서의 전부입니다. 처음 Blueprint를 만져보았을 때는 문서가 꽤 부실한 느낌이라 약간 헤메기는 했는데 약간 사용해보면 사용하기는 꽤 간단한 편입니다. 간단히 문서로 사용방법만 익히고는 Cheat Sheet를 참고하는게 더 사용하기 편한 것 같습니다.
Blueprint를 사용하려면 기본적으로 아래 3개의 CSS파일을 인클루드해야 합니다.
<link rel="stylesheet" href="css/blueprint/screen.css" type="text/css" media="screen, projection">
<link rel="stylesheet" href="css/blueprint/print.css" type="text/css" media="print">
<!--[if lt IE 8]>
<link rel="stylesheet" href="css/blueprint/ie.css" type="text/css" media="screen, projection">
<![endif]-->
screen.css는 일반적인 스크린화면용 스타일이고 print.css는 프린트를 위한 스타일이며 ie.css는 IE호환성을 맞추기 위한 스타일입니다. Blueprint는 3가지 레이어를 제공하고 있는데 CSS Reset, Typography, Grid입니다. CSS Reset은 각 브라우저의 차이점을 맞춰주기 위한 부분이고 Typography는 글자에 대한 사이즈나 색을 조정하고 Grid는 그리드 레이아웃을 맞추기 위한 레이어입니다.
Blueprint 사용하기
<div class="container">
<header class="span-24 success">Header</header>
<article class="span-16 ">Article</article>
<aside class="span-6 prepend-2 last ">Sidebar</aside>
<footer class="span-24 error">Footer</footer>
</div>
위와같이 각 엘리먼트에 class를 지정해주는 것 만으로 아래와 같은 레이아웃을 구성할 수 있습니다.
사용하는 각 클래스는 Quick Start Tutorial이나 Cheat Sheet를 참고하면 됩니다. Blueprint는 기본적으로 1024x768해상도에 맞춰진 950px로 최대폭이 맞춰져 있습니다.(다른 사이즈가 필요하면 커스터마이징을 해야 합니다.) 950px를 기준으로 30px짜리 폭에 10px의 마진을 가진 24개의 컬럼으로 한 로우가 기본적으로 구성됩니다. 그리고 Grid를 사용하는 곳을 감짜는 엘리먼트가 container로 클래스가 지정되어야 사용이 가능합니다. 각 로우는 sapn-x라는 클래스로 x의 위치에 숫자를 넣어서 폭만큼의 칸을 지정하면 되고 각 로우의 마지막 컬럼에는 last라는 클래스를 지정합니다. append-x는 현재 컬럼의 앞에 prepend-2는 현재컬럼의 뒤에 추가해줄 컬럼갯수를 지정해 주면 됩니다. 24개의 컬럼을 기준으로 필요한만큼 폭을 정해주면 다양한 레이아웃을 간단하게 만들수 있습니다.
showgrid라는 클래스를 주면 위와같이 Grid를 보여주어서 레이아웃을 잡을때 참고하기가 좋습니다. 그외의 클래스들은 문서를 참고해 보면 쉽게 그 내용을 파악할 수 있습니다.
그외 Blueprint를 커스터마이징하기 위한 Blueprint나 BLUECALC등의 도구들도 제공되고 있어서 필요한 크기의 그리드를 만들어서 사용할 수 도 있습니다.
Conclusion
사실 프레임워크라는 용어를 부르기 민망할 정도이고 미리 정의된 스타일셋 정도의 수준에 가깝습니다. 다양한 스타일이 정의되어 있기 때문에 성능이나 디테일한 면에서는 직접 스타일을 잡아서 정의한 것에 비하면 부족한 것이 사실이지만 생산성면에서는 훨씬 뛰어날 꺼라고 생각되고 전문적으로 마크업과 CSS를 잡아주는 사람이 따로 없다면 상당한 수준의 레이아웃을 쉽게 구성할 수 있기 때문에 괜찮은 선택이라고 생각됩니다.
기본적인 레이아웃을 잡은 뒤에 CSS는 얼마든지 재정의할 수 있기 때문에 다루기도 쉽고 개인적으로 만드는 사이트에 적용해보고 있는데 꽤 만족하고 있는 편입니다. CSS는 브라우저별의 차이도 많고 CSS의 특성이나 경험을 많이 해보지 않으면 다양한 레이아웃에서 원하는 스타일을 적용하기가 쉽지 않고 상당히 피곤합니다. 저같은 경우는 마크업과 CSS에 관심은 있지만 주업무롤은 아니기 때문에 한계도 있는데 Blueprint를 사용하니까 쾌적하고 좋더군요. ㅎ
2