CSS는 sass, less, stylus, css-crush, myth, rework 등 다양한 전처리기(preprocessor)가 있습니다. 저는 sass를 쓴지 1년 반 정도 되었습니다. 무척 편리해서 이제는 sass 없이 스타일 시트를 만드는 게 이젠 더 불편합니다. 그에 반면 HTML 전처리기는 크게 필요성을 느끼지 못해서 사용하지 않았습니다. 대략적인 개념은 알고 있으나 이번 기회를 통해 각각 비교해보고 실무에 적용할 수 있는지 판단해 보려고 합니다. 설치 과정보다는 기본 사용방법 위주로 정리하였습니다. 마크업을 더 빠르게 작성하는 방법을 찾길 바라며 글을 시작하겠습니다.

1. Haml

공식 : http://haml.info/

깃헙 : https://github.com/haml/haml (★ 3049)

소개

Haml(HTML abstraction Markdup Language)은 인라인 코드를 사용하지 않고 모든 웹 문서의 HTML을 명확하고 간단하게 설명하는 데 사용되는 마크업 언어입니다. Haml은 대부분의 Ruby on Rails 애플리케이션에 사용되는 템플릿 언어인 PHP, ASP 및 ERB와 같은 인라인 페이지 템플레이팅 시스템을 대체합니다. 그러나 Haml은 템플릿 자체에 HTML을 명시적으로 코딩 할 필요가 없습니다. 동적 콘텐트를 생성하는 코드가 있는 HTML 자체에 대한 설명이기 때문입니다.

기본 예제

Haml에서는 태그 이름 앞에 %를 붙입니다. (예: %strong %div %body %html)

%div

<div></div>

아이디와 클래스를 넣는 방법

방법(1) 짧고 간략한 방법

%div#message.code Hello, World!

방법(2) 길지만 명확한 방법

%div{:id => "message", :class => code} Hello, World!

방법(1), 방법(2) 모두 아래와 같이 변환됩니다.

<div id="message" class="code">Hello World</div>

좀 더 복잡한 예제

%tag를 쓰지 않으면 기본으로 div를 지칭합니다.

#content
  .left.column
    %h2 Welcome to our site!
    %p= print_information
  .right.column
    = render :partial => "sidebar"

<div id='content'>
  <div class='left column'>
    <h2>Welcome to our site!</h2>
    <p><%= print_information %></p>
  </div>
  <div class="right column">
    <%= render :partial => "sidebar" %>
  </div>
</div>

2. Markdown

가이드 : https://guides.github.com/features/mastering-markdown/

소개

마크다운 (Markdown)은 마크업 언어의 일종으로, 존 그루버(John Gruber)와 아론 스워츠(Aaron Swartz)가 만들었습니다. 읽기도 쓰기도 쉽다는 장점이 있습니다. 그루버는 마크다운으로 작성한 문서를 HTML로 변환하는 펄 스크립트도 만들었습니다. 확장자는 .md를 씁니다. (출처 : 나무위키)

사용되는 곳

Tumblr, Reddit, Github, Stack Overflow, Trello 등

3. Pug(구 Jade)

공식 : https://pugjs.org/api/getting-started.html

깃헙 : https://github.com/pugjs/pug (★ 12921)

소개

Pug(구 Jade)는 Haml의 영향을 크게 받아 자바스크립트로 구현 된 Node.js 및 브라우저 용 고성능 템플릿 엔진입니다.

기본 예제

doctype html
html(lang="en")
  head
    title= pageTitle
    script(type='text/javascript').
      if (foo) {
         bar(1 + 5)
      }
  body
    h1 Jade - node template engine
    #container.col
      if youAreUsingJade
        p You are amazing
      else
        p Get on it!
      p.
        Jade is a terse and simple
        templating language with a
        strong focus on performance
        and powerful features.

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Jade</title>
    <script type="text/javascript">
      if (foo) {
         bar(1 + 5)
      }
    </script>
  </head>
  <body>
    <h1>Jade - node template engine</h1>
    <div id="container" class="col">
      <p>You are amazing</p>
      <p>
        Jade is a terse and simple
        templating language with a
        strong focus on performance
        and powerful features.
      </p>
    </div>
  </body>
</html>

기타 참고 사이트

4. Slim

공식 : http://slim-lang.com/

깃헙 : https://github.com/slim-template/slim (★ 4149)

소개

Slim은 어설프게 숨기지 않고 핵심 부분에 대한 구문을 줄이는 것을 목표로 하는 템플릿 언어입니다. Slim의 초기 디자인은 홈페이지에서 볼 수 있습니다. 그것은 표준 HTML 템플릿(<,>, 닫는 태그 등)에서 얼마나 많은 것을 제거 할 수 있는지 알아보기 위한 연습으로 시작되었습니다. 더 많은 사람들이 Slim에 관심을 갖게됨에 따라 기능이 향상되었고 구문의 유연성도 향상되었습니다.

Slim은 단순함을 유지하기 위해 노력할 것이지만, 읽을 수 있는 구문에 대한 모든 사람의 정의가 동일하지는 않습니다. Docs에서 옵션을 볼 수 있습니다. Slim은 Temple과 Tilt를 사용합니다. Slim이 어떻게 작동 하는지 배우고 싶다면 이 프로젝트를 공부해야 합니다.

기본 예제

body
  h1 id="headline"
    | Welcome to my site.
    | Line feed

<body>
  <h1 id="headline">
    Welcome to my site.Line feed
  </h1>
</body>

기타 참고 사이트

HTML을 Slim으로 바꿔주는 사이트

결론

Haml의 핵심 원칙(마크업은 군더더기 없이 아름다워야 한다)은 매우 마음에 드나 딱히 끌리는 부분은 없었습니다. 저의 목적은 순수 html markup이지 erb 문서가 아니어서 그런 것 같습니다. Markdown은 깃헙이나 트렐로에서 사용되기 때문에 개발자라면 기본으로 익혀야 합니다. (비개발자도 쉽게 익힐 수 있습니다.) 하지만 마크다운을 개발을 위한 마크업 작성에 사용하기는 불가능 해 보입니다.

Pug(구 Jade)가 그나마 가장 나은 것 같습니다. 깃헙 스타 개수(Pug > Slim > Haml)만 봐도 그렇습니다. Slim은 초반에 익혀야 할 것들이 너무 많고, 문서가 보기가 매우 불편한 느낌이 들었습니다.

찾아보면서 느낀 점은 CSS 전처리기와 마찬가지로 HTML 전처리기도 인덴트(들여쓰기)가 제일 중요하다는 걸 느꼈습니다. 그렇다 보니 콘텐츠가 길어질 경우 개행에 대한 처리가 공통적으로 필요한데, Pug가 가장 편리한 방법인 것 같습니다.

Pug를 사용하려면 Node.js(Express)를 써야 하는데 뭔가 배보다 배꼽이 더 큰 느낌이 들었습니다. 실제 FE 템플릿을 개발하시는 분들에게는 당장 도움이 될 수도 있겠으나 마크업을 작성하는 입장에서는 어느 것도 당장 도움이 되지는 않다고 결론냈습니다.

webstorm을 사용하면 여는 태그와 닫는 태그 둘 중 하나만 수정하여도 짝 맞추어 수정이 됩니다. 태그를 쓸 때에도 Emmet을 활용하면 빠르게 작성할 수 있습니다. 역시나 마크업을 위해 전처리기를 사용하는 것보다는 Emmet을 더 잘 활용하는 것이 나은 것 같습니다.

저작자표시 비영리 변경금지

'개발일지 > 2016' 카테고리의 다른 글

[CSS Drawing] 01. Sally (Line Friends) (2)	2016.11.10
[CSS] Fancy progress bar (0)	2016.10.31
[리눅스] vi, vim 단축키 (0)	2016.10.21
[리눅스] 디렉토리 구조 (0)	2016.10.20
[리눅스] 터미널 및 셸 기초 사용법 (0)	2016.10.20

[HTML] HTML Preprocessor 비교 (Haml / Markdown / Jade / Slim)

1. Haml

2. Markdown

3. Pug(구 Jade)

4. Slim

결론

'개발일지 > 2016' 카테고리의 다른 글

티스토리툴바