---

layout: post

title: CSS 개발의 생산성을 높이는 도구들

category: web development

description: 웹표준에 따라 CSS로 개발 할 경우 까다롭고 성가신 부분들이 제법 있습니다. CSS 개발 작업 시에 생산성을 높일 수 있는 몇 가지 도구를 소개합니다. CSS 프레임워크, SASS, Compass 같은 도구들입니다.

---

<p><img class="attachment right" src="http://farm6.static.flickr.com/5219/5535334248_eacd7eede0_m.jpg" alt="" width="240" height="120" />CSS는 웹사이트 디자인에 사용하는 도구다. 개념도 복잡하지 않고 문법도 간단하기 때문에 Box 모델이나 플로팅(floating) 같은 몇 가지 기본 개념만 익히고 나면 약간의 코딩 만으로 웹사이트에 멋진 비주얼 요소를 집어넣을 수가 있다. 그렇지만 매번 웹사이트를 만들 때마다 일일이 처음부터 CSS 작업을 하는 일은 경우에 따라서는 제법 성가시고 품이 많이 가는 일이기도 하다. 특히 IE의 비정상적인 작동을 바로잡기 위한 핵(Hack) 까지 고려한다면 더욱 그렇다. CSS 개발의 생산성을 높여주는 몇 가지 도구들에 대해 알아보자.</p>

<h3>1. CSS 프레임워크</h3>

<p>CSS 프레임워크(framework)는 미리 만들어 놓은 일종의 CSS 모듈이다. CSS 프레임워크를 사용하면 페이지의 기본 레이아웃에서부터 타이포그라피, 폼 디자인, 버튼 등 많은 부분의 디자인을 "날로 먹을 수"가 있다. 물론 모든 "프레임워크"가 그러하듯, CSS 프레임워크도 언제나 "최선"의 선택인 것은 아니며, 어떤 디자이너나 개발자들은 CSS 프레임워크 자체에 거부감을 가지기도 한다. 그렇지만 CSS 프레임워크가 개발 생산성을 높여줄 수 있다는 점에서는 이론의 여지가 없다. 그만큼 그 종류도 다양하기 때문에 오히려 어떤 것을 선택하느냐가 더 고민이 되는 경우가 많지만, 몇 가지 대표적인 것들만 소개하면 다음과 같다.</p>

<ul>

<li><a class="external" title="http://960.gs/" href="http://960.gs/">960 Grid System</a></li>

<li><a class="external" title="http://www.blueprintcss.org/" href="http://www.blueprintcss.org/">Blueprint</a></li>

<li><a class="external" title="http://elasticss.com/" href="http://elasticss.com/">Elastic CSS Framework</a></li>

<li><a class="external" title="http://developer.yahoo.com/yui/grids/" href="http://developer.yahoo.com/yui/grids/">YUI Grid CSS</a></li>

<li><a class="external" title="http://lessframework.com/" href="http://lessframework.com/">Less Framework</a></li>

</ul>

<p>이들 중 대부분의 CSS 프레임워크는 소위 "그리드(grid) 디자인"에 기반하지만, 자바스크립트와 함께 사용하여 UI 효과를 내는 것들도 있고, 또 최근에는 HTML5/CSS3를 이용한 CSS 프레임워크들이 많이 등장하고 있다.</p>

<h3>2. SASS와 LESS</h3>

<p>SASS와 LESS는 일종의 CSS 전처리기(pre-processor)다. 조금 더 간단하고 구조화된 문법으로 코드를 작성하면 자동으로 CSS 파일을 생성해 주기 때문에 CSS 개발의 생산성을 폰이는 데에 꼭 필요한 도구이기도 하다. 특히 믹스인(Mixin)이라는 개념은 일종의 '모듈'을 만드는 것으로서, CSS 코드 재활용을 높이고 생산성을 높여주는 좋은 개념이다. SASS는 루비(ruby) 언어로 작성되었고, 그래서 주로 루비/레일스 프로젝트에서 많이 사용되지만 반드시 그래야 하는 건 아니다.</p>

<p>LESS(앞서 소개한 Less Framework과는 별개)도 SASS와 개념은 유사하지만, CSS파일의 생성이 자바스크립트 파서(parser)를 통해 클라이언트 측에서 이루어진다는 점에서, 서버측에서 컴파일이 이루어지는 SASS와 구별된다. 물론 LESS는 Node.js 환경에서도 작동한다. 이들 도구의 홈페이지는 각각 다음과 같다.</p>

<ul>

<li>SASS <a href="http://sass-lang.com/">http://sass-lang.com/</a></li>

<li>LESS <a href="http://lesscss.org/">http://lesscss.org/</a></li>

</ul>

<h3>3. Compass</h3>

<p>마지막으로 소개할 도구는 일종의 CSS 개발 자동화 도구인 Compass다. 이 도구를 이용하면 앞서 소개한 CSS Framework를 명령행에서 바로 설치할 수도 있고, SASS 컴파일을 자동화 시킬 수도 있으며, 무엇보다도 SASS와 결합하여 CSS의 구성요소를 모듈단위로 쪼개서 SASS 모듈의 재활용성을 높이는 역할을 하는, 일종의 메타(meta) CSS 프레임워크라 할 수 있다. Compass의 사용법은 <a class="external" title="http://compass-style.org/" href="http://compass-style.org/">Compass 사이트</a>에 자세히 소개되어 있으니 참조하면 된다.</p>