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>기타 참고 사이트
- HTML을 Jade로 바꿔주는 사이트
- Jade Syntax Documentation by example
- Jetbrains Plugin
- Jetbrains Using Pug (Jade) Template Engine
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>
기타 참고 사이트
결론
Haml의 핵심 원칙(마크업은 군더더기 없이 아름다워야 한다)은 매우 마음에 드나 딱히 끌리는 부분은 없었습니다. 저의 목적은 순수 html markup이지 erb 문서가 아니어서 그런 것 같습니다. Markdown은 깃헙이나 트렐로에서 사용되기 때문에 개발자라면 기본으로 익혀야 합니다. (비개발자도 쉽게 익힐 수 있습니다.) 하지만 마크다운을 개발을 위한 마크업 작성에 사용하기는 불가능 해 보입니다.
Pug(구 Jade)가 그나마 가장 나은 것 같습니다. 깃헙 스타 개수(Pug > Slim > Haml)만 봐도 그렇습니다. Slim은 초반에 익혀야 할 것들이 너무 많고, 문서가 보기가 매우 불편한 느낌이 들었습니다.
찾아보면서 느낀 점은 CSS 전처리기와 마찬가지로 HTML 전처리기도 인덴트(들여쓰기)가 제일 중요하다는 걸 느꼈습니다. 그렇다 보니 콘텐츠가 길어질 경우 개행에 대한 처리가 공통적으로 필요한데, Pug가 가장 편리한 방법인 것 같습니다.
Pug를 사용하려면 Node.js(Express)를 써야 하는데 뭔가 배보다 배꼽이 더 큰 느낌이 들었습니다. 실제 FE 템플릿을 개발하시는 분들에게는 당장 도움이 될 수도 있겠으나 마크업을 작성하는 입장에서는 어느 것도 당장 도움이 되지는 않다고 결론냈습니다.
webstorm을 사용하면 여는 태그와 닫는 태그 둘 중 하나만 수정하여도 짝 맞추어 수정이 됩니다. 태그를 쓸 때에도 Emmet을 활용하면 빠르게 작성할 수 있습니다. 역시나 마크업을 위해 전처리기를 사용하는 것보다는 Emmet을 더 잘 활용하는 것이 나은 것 같습니다.
'개발일지' 카테고리의 다른 글
| [Vue] SyntaxError: The requested module '/node_modules/lottie-web/build/player/lottie.js?v=b1d5819a' does not provide an export named 'default' (at lottie.vue:6:1) (0) | 2023.09.14 |
|---|---|
| [Svelte] 스벨트 시작하기 (0) | 2023.03.08 |
| [직무상식] CLI (Command Line Interfase) 명령 줄 인터페이스 (0) | 2016.08.29 |
| [HTML] email client 이메일 템플릿 만들기 (0) | 2016.07.25 |
| [UX] 티스토리 과거글 발행 제한 (6) | 2016.07.19 |
