이전 글에서 CSS 프리프로세서인 Less라는 프로그램을 사용하면 웹브라우저가 인식할 수 있는 CSS 파일을 자바스크립트 라이브러리가 자동으로 만들어줍니다. 대부분의 경우 이러한 방법을 사용하지 않고 less 파일을 CSS 파일로 변환하는 컴파일러를 사용합니다. 그래야 로딩속도가 빨라지기 때문이죠. 이번 글에서는 Less 컴파일러 중 인기가 높은 Simpless와 Winless에 대해 알아보겠습니다.
1. SimpLESS
위 링크를 클릭해서 다음의 웹사이트로 이동합니다.
사용하는 OS에 따라서 화면이 다르게 나올겁니다. 윈도우로 접속하면 윈도우 아이콘이 활성화된 위와같은 화면이 나오고 맥으로 접속하면 사자 아이콘이 활성화돼서 각각의 프로그램을 내려받을 수 있도록 해놨습니다. 2개월간을 해결 못했던 프로그램입니다. 이 프로그램은 설치하면 설치가 되는 것이 아니라 이 프로그램이 사용할 수 있는 환경을 만드는 타이타늄이라는 프로그램 모듈을 설치합니다. 2개월간 해결을 못했다는 의미는 이 프로그램을 C드라이브가 아닌 하드디스크에 내려받아서 압축을 풀고 설치한 다음에 실행을 하면 전혀 반응이 없습니다. 이런 프로그램 처음봅니다. 만일 다른 드라이브에서 실행 중이라면 압축해제한 프로그램의 폴더를 C드라이브의 아무곳에나 이동해서 SimpLESS 를 실행하면 바로 화면이 나타납니다. 이런 간단한 것을 가지고 2개월이나 고생했습니다. 이 프로그램의 개발자 사이트에서도 실행이 안된다고 여러가지 의문을 제기하고 사용을 포기하고 다른 프로그램으로 이전하거나 하는 사람도 있던데 개발자가 이런 사실을 모르고 있었다는 것이 참 이상하더군요. 그래서 댓글을 달아놓긴 했습니다.
less.zip이전 글에서 사용한 파일입니다. 이 파일을 압축해제하고 index.html 파일을 열면 다음과 같습니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8" />
<title>less</title>
<link rel="stylesheet" type="text/css" href="style.css">
<script src="less-1.3.1.min.js" type="text/javascript"></script>
</head>
<body>
<div>
<header>
<h1>index</h1>
</header>
</div>
</body>
</html>
이전 글에서는 less 파일을 자동으로 컴파일하기 위해서 자바스크립트 라이브러리를 사용했지만 여기서는 컴파일러 프로그램을 사용할 것이므로 자바스크립트는 필요없습니다. 그러니 <script src="less-1.3.1.min.js" type="text/javascript"></script>를 제거합니다. 그리고 같은 폴더에 css 파일이 만들어지므로 rel을 stylesheet로, 스타일시트 경로를 style.css로 수정합니다. 그리고 css 파일을 직접 사용하게 되므로 wamp 서버나 앱타나 스튜디오를 사용하지 않아도 됩니다.
SimpLESS 프로그램을 실행하면 위와같은 창이 나타납니다. 사용법은 아주 간단합니다. 현재 작업중인 폴더를 클릭해서 이 창의 안으로 끌어다 놓기만 하면 됩니다. 이프로그램은 간단하지만 여러개의 버튼이 있어서 사용법을 알아보기 위해 less 스타일시트에 속성과 값을 아래처럼 추가합니다.
@baseColor: #333;
body {
font-family: Helvetica, Arial, sans-serif;
background-color: lighten(@baseColor, 50%);
border: 1px solid darken(@baseColor, 10%);
color: @baseColor;
background: linear-gradient(top, #e3e3e3 10%, white);
}
CSS3의 그래디언트 효과입니다. 이것을 왜 추가했느냐하면 이 프로그램의 특징인 prefixr 기능을 사용해보기 위해서입니다. 저장을 한 다음 SimpLESS 창에 대해 알아봅니다.
여러곳에 아이콘이 있는데 좌측에는 새로고침, 파일명 바꾸기 아이콘이 있고 우측에는 닫기, prefixr, minify, love 아이콘이 있습니다. 이 창에 less 파일을 놓은 후에 새로고침 아이콘을 클릭하면 css 파일이 만들어집니다. 위 화면에서 다른 설정을 수정한 다음에는 새로고침 아이콘을 클릭하면 css 파일에 적용이됩니다. 새로고침 아이콘을 처음에 한번만 클릭해 놓으면 이 프로그램이 계속 지켜보는 상태(Watch)가 됩니다. 텍스트 편집기에서 less 파일을 수정하고 저장하면 css 파일에도 자동으로 바뀌므로 이 아이콘을 클릭할 필요는 없습니다. 폴더 아이콘을 클릭하고 파일명을 변경할 수도 있습니다.
prefixr 아이콘은 CSS3에서 그래디언트 효과와 같이 아직 표준이 안돼서 웹브라우저 별로 접두어를 달아야하는 CSS 규칙을 less파일에 삽입한 경우 이 아이콘을 활성화시키면 웹브라우저 별로 별도의 접두어를 만들지 않아도 자동으로 만들어줍니다. 위 아이콘은 활성화된 상태입니다.
minify 아이콘은 CSS 파일의 내용을 축약형으로 할 것인지 아니면 알아보기 쉽게 기본형으로 할 것인지 선택할 수 있도록 합니다. 현재 상태는 꺼진 상태입니다. 워낙에 아이콘 색이 흐릿해서 구별하기 위해 꺼놨습니다. love 아이콘은 활성화시키면 스타일시트에 이 프로그램으로 만들어졌다는 안내 글이 나타나도록 합니다.
하단의 쓰레기통 아이콘은 위창에 수많은 프로젝트를 이동해서 사용할 수 있는데 이 모든 less 파일을 제거하는 아이콘입니다. 그러면 각 상태별로 이미지를 확인해보겠습니다.
body {
font-family: Helvetica, Arial, sans-serif;
background-color: #b3b3b3;
border: 1px solid #1a1a1a;
color: #333333;
background: -webkit-linear-gradient(top, #e3e3e3 10%, #ffffff);
background: -moz-linear-gradient(top, #e3e3e3 10%, #ffffff);
background: -o-linear-gradient(top, #e3e3e3 10%, #ffffff);
background: -ms-linear-gradient(top, #e3e3e3 10%, #ffffff);
background: linear-gradient(top, #e3e3e3 10%, #ffffff);
padding: 10px;
}
/* This beautiful CSS-File has been crafted with LESS (lesscss.org) and compiled by simpLESS (wearekiss.com/simpless) */
prefixr 아이콘을 활성화, minify 비활성화, love 활성화 상태에서 컴파일된 CSS 파일입니다.
body{font-family:Helvetica,Arial,sans-serif;background-color:#b3b3b3;border:1px solid #1a1a1a;color:#333;background:-webkit-linear-gradient(top, #e3e3e3 10%, #fff);background:-moz-linear-gradient(top, #e3e3e3 10%, #fff);background:-o-linear-gradient(top, #e3e3e3 10%, #fff);background:-ms-linear-gradient(top, #e3e3e3 10%, #fff);background:linear-gradient(top, #e3e3e3 10%, #fff);padding:10px;}
prefixr 아이콘과 minify 아이콘을 활성화, love 아이콘은 비활성화한 상태에서 새로고침하면 위처럼 스타일시트가 나옵니다. 축약형은 공백이 없어서 알아보기 힘들므로 실제 웹사이트에 적용하고자 하면 용량도 축소되므로 이런 축약형으로 사용하는 것이 좋습니다.
2. Winless
위 링크를 클릭하면 아래의 화면으로 이동합니다.
Download 버튼을 클릭해서 내려받습니다.
설치한 후 실행하면 위와같은 창이 나옵니다. 기능은 SimpLESS와 같지만 prefixr가 없습니다. File 메뉴를 클릭하면 설정할 수 있는 메뉴가 있습니다. Minify by default 에 체크하면 기본적으로 축약된 css 파일이 만들어집니다.
두 개의 less 컴파일러를 알아봤는데 이들 프로그램은 less 파일을 직접 수정할 수가 없고 파일이 잘못 작성돼도 앱타나 스튜디오를 사용하지 않는다면 에러를 찾을 수가 없습니다. 그래서 인기있는 프로그램인 Crunch 컴파일러에 대해서 다음글에서 알아보겠습니다. 이 프로그램은 텍스트 편집기와 같은 기능을 하므로 less, css 파일을 직접 작성, 수정도 할 수 있지만 다른 파일은 열수도 없어서 편집이 불가능합니다.
