이 글은 크몽 재능인, socurites님이 원고를 기고하셨습니다.
작년에 마틴 파울러님이 쓴 “DSL, 고객과 함께 하는 도메인 특화 언어(인사이트 출판사)”를 번역을 했었다.
첫 번역 작업이니만큼 쉽지는 않았지만, 많은 것들을 배울 수 있었다. 책이 출판되고 나서야 실제 적용 사례에 관심을 갖기 시작했는데, 적용사례가 생각보다 많지 않았던 것 같다.
요즘에는 트위터 부트스트랩(Bootstrap)을 배우는 중인데, 알맞은 사례를 찾을 수 있어서 관련 내용을 써보려고 한다. 사실 이미 책에서 소개되었던 내용이었는데, 너무 게을러서 찾아보지 못했었다.
CSS는 DSL이다.
“DSL, 고객과 함께 하는 도메인 특화 언어”의 10장, “Zoo of DSLs”에서 CSS를 DSL의 사례로 들었다. CSS가 DSL인 이유로 아래의 특징을 들었다.
- CSS는 도메인 전문가가 읽을 뿐만 아니라, 도메인 전문가가 직접 작성하기도 한다.
CSS를 작성하는 사람은 자신을 프로그래머가 아닌 웹 디자이너로 본다. 다시 말해 CSS에서 도메인 전문가는 웹 디자이너다. - CSS는 선언적 컴퓨팅 모델을 가진다.
범용 프로그래밍 언어가 “이것을 해라,그리고 나서 저것을 해라”라는 식으로 명령형 모델을 가지는 것과는 달리, CSS는 선언적이다. - CSS는 특정 도메인에 특화된 언어다.
웹 생태계에서 CSS는 HTML 요소에 대한 스타일을 적용하기 위해서 사용된다. 전체 웹 어플리케이션을 CSS만을 사용해서 개발할 수는 없다.
CSS에는 추상화 기능이 부족하다
대다수의 DSL과 마찬가지로 CSS에는 새로운 추상화를 만들 수 있는 방법이 아예 없다. DSL이 특정 도메인에 특화되어 제한적인 방식으로만 사용할 수 있기 때문이다. 그래서 CSS에는 아쉬운 점이 몇가지 있다. 아래의 예를 보자.
h1, h2 {
color: #926C41;
font-family: sans-serif;
}
b {
color: #926C41;
}
*.sidebar {
color: #928841;
font-size: 80%;
font-family: sans-serif;
}
두 요소에 동일한 색상 코드(#926C41)를 사용했다. 프로그래밍 세계에서 중복은 해악이므로, 이러한 색상 코드를 추상화할 수 있는 기능이 있었다면 더욱 좋았을 것이다. 또한 사이즈나 여백을 조작할 때 필요한 산술연산도 CSS에는 없다.
DSL 상위 레이어 만들기
CSS DSL에 부족한 기능을 추상 레이어로 얹어서, 새로운 DSL을 만들 수 있다. 예를 들어 앞의 코드를 다음과 같이 만들어 볼 수 있다.
@baseColor : #926C41
h1, h2 {
color: @baseColor;
font-family: sans-serif;
}
b {
color: @baseColor;
}
*.sidebar {
color: #928841;
font-size: 80%;
font-family: sans-serif;
}
물론 CSS 자체에서 이러한 기능을 제공하지는 않는다. 하지만 CSS을 추상화한 새로운 형식의 DSL을 만들어서 아래와 같은 절차로 처리해볼 수 있다.
CSS를 추상화한 DSL 사례
사실 위의 설명을 그대로 따르는 DSL이 이미 만들어졌다. 이러한 DSL의 예로 LESS, SASS 등이 있다. 이처럼 DSL의 상위에 추상 레이어를 만들어서 새로운 DSL을 정의할 때 주의할 점은, 기반 DSL(여기서는 CSS)과 유사해야 한다는 점이다. 실제로 SASS나 LESS는 CSS와 동일한 속성명을 사용한다.
Share Your Talents! 