루비 템플릿 엔진 완벽 가이드: ERB vs HAML vs Slim 비교 분석

ERB는 템플릿 엔진입니다.

템플릿 엔진을 사용하면 HTML과 Ruby 코드를 섞어서 작성할 수 있으며, 이를 통해 데이터베이스의 데이터를 활용해 웹 페이지를 동적으로 생성할 수 있습니다.

ERB는 Rails에서 뷰(view)를 렌더링할 때 사용되는 기본 템플릿 엔진입니다.

참고: Rails는 Ruby 표준 라이브러리의 ERB 클래스 대신 erubi라는 구현체를 사용합니다.

이 글 뒷부분에서 살펴보겠지만, ERB를 사용하기 위해 꼭 Rails가 필요한 것은 아닙니다.

먼저 ERB의 문법, Ruby 프로젝트에서 ERB를 사용하는 방법, 그리고 HAML과 같은 다른 템플릿 엔진과의 비교까지 차근차근 알아보겠습니다.

그럼 시작해 볼까요?

Embedded Ruby (ERB) 기초 튜토리얼

ERB 템플릿은 .html.erb 또는 .erb 확장자로 끝나는 파일입니다.

ERB 템플릿 안에 작성하는 모든 내용은 기본적으로 HTML입니다.

단, 특수 태그를 사용하는 경우에는 예외입니다!

예시를 보겠습니다:

<h1>
  Hello <%= name %>!
</h1>

<%= %> 태그는 템플릿 엔진이 내부의 Ruby 코드를 평가한 결과값으로 치환됩니다.

마치 문자열 보간(string interpolation)과 비슷하죠!

<%= %>에 포함된 등호(=)에 주목하세요.

이 등호는 ERB에게 태그 내부의 내용을 화면에 렌더링하라고 지시하는 역할을 합니다.

반대로 루프나 조건문처럼 실행 결과를 직접 출력할 필요가 없는 코드를 작성할 때는 등호를 생략해야 합니다. 그렇지 않으면 불필요한 값까지 함께 출력됩니다.

잘못된 ERB 태그를 사용하면 에러가 발생할 수도 있으니 주의하세요.

조건문 예시입니다:

<% if @favorite_food == "chocolate" %>
  초콜릿을 좋아하시나요? 저희 최고급 프리미엄 초콜릿 바를 만나보세요!
<% else %>
  이번 달 사람들이 가장 많이 구매한 인기 간식 TOP 10을 확인하세요.
<% end %>

위 코드는 ERB 조건문(if statement)입니다. 일반적인 Ruby if문과 동일하지만, 특수한 템플릿 문법으로 감싸져 있어 페이지가 사용자에게 렌더링될 때 코드가 평가되고 그 결과로 치환됩니다.

다음은 ERB 반복문(loop)입니다:

<% @books.each do |book| %>
  <%= book.title %>
  <%= book.author %>
  <br>
<% end %>

책 객체 배열이 주어지면, 위 코드는 줄바꿈을 사이에 두고 모든 책의 제목과 저자를 출력합니다.

Rails를 사용 중이라면 관련 컨트롤러 액션을 호출할 때 이 템플릿이 자동으로 렌더링됩니다.

Rails 없이 ERB 사용하기

Rails 외부 환경에서 ERB를 활용해 리포트나 정적 웹사이트를 생성하고 싶다면…

아래와 같이 구현할 수 있습니다:

require 'erb'

Book     = Struct.new(:title, :author)
template = ERB.new(File.read('template.erb'))

template.result_with_hash(books: [Book.new("test"), Book.new("abc")])

이 코드가 정상적으로 동작하려면 템플릿 파일 안의 @books를 books로 변경해야 합니다.

Rails는 "변수 바인딩(variable binding)"이라는 메타프로그래밍 기법을 사용합니다.

이것이 바로 Rails가 컨트롤러의 인스턴스 변수를 템플릿과 공유하는 방식입니다. 하지만 Rails 없이 ERB를 사용할 때는 해시를 전달하는 방식(result_with_hash 메서드)이 더 깔끔한 해결책입니다.

어떻게 생각하시나요?

템플릿 엔진 비교하기

자, 이제 여러 템플릿 엔진들을 서로 비교해 보겠습니다.

Tilt 젬(gem)을 사용하면 모든 엔진에 손쉽게 접근할 수 있습니다. Tilt는 Faraday와 유사한 어댑터(adapter) 역할을 하는 젬입니다.

예제 코드:

require 'tilt'
Tilt::ErubiTemplate.new("test.erb").render

require 'tilt/haml'
Tilt::HamlTemplate.new("test.haml").render

require 'slim'
Slim::Template.new("test.slim").render

다음은 각 구현체 간 벤치마크 결과입니다:

Comparison:
     erubi:     5786.0 i/s
       ERB:     4438.8 i/s - 1.30x  slower
      Haml:     1340.0 i/s - 4.32x  slower
      Slim:      724.1 i/s - 7.99x  slower

벤치마크를 보면 erubi와 ERB가 압도적인 성능을 보여주며, HAML과 Slim은 상대적으로 느린 처리 속도를 기록했습니다.

HAML 문법은 다음과 같습니다:

%head
  %title Ruby Templating Engines
  = 123 * 2
%body
  - foo.each do |bar|
    %p
      This Is Cool

일반 HTML과 상당히 다르기 때문에 익숙해지는 데 시간이 필요합니다.

그보다 더 간결한 것이 바로 Slim 문법입니다:

head
  title Ruby Templating Engines
  = 123 * 2
body
  - foo.each do |bar|
    p
      | This Is Cool

Slim은 여러 줄로 된 콘텐츠 블록을 표현할 때 파이프(|) 문자를 사용하지만, Haml에서는 그럴 필요가 없다는 차이점이 있습니다.

이번에는 GitHub 저장소 기준으로 프로젝트 현황을 비교해 보겠습니다:

그렇다면 어떤 엔진을 선택해야 할까요?

대부분 개인적인 선호도의 문제라고 생각합니다.

하지만 한 가지는 분명합니다:

프로젝트마다 하나의 엔진을 선택하고, 해당 프로젝트의 모든 템플릿을 그 엔진으로 통일해서 작성하세요.

여러 엔진을 섞어서 사용하는 것은 피하는 것이 좋습니다.

저는 개인적으로 ERB 템플릿을 고수하는 편입니다…

적절한 에디터 스니펫(snippet)과 확장 지원만 있다면 추가로 입력해야 하는 코드량도 많지 않습니다.

게다가 나중에 다른 엔진으로 전환하고 싶을 때를 대비해 ERB 변환 도구(상호 변환 지원)도 여럿 존재하니 걱정할 필요가 없습니다.

마무리 정리

지금까지 Ruby의 템플릿 엔진에 대해 알아보았습니다!

핵심을 요약하면, ERB는 HTML과 Ruby를 자연스럽게 혼합할 수 있는 강력하고 빠른 템플릿 엔진이며, HAML과 Slim은 더 간결한 문법을 제공하지만 성능 면에서는 다소 느립니다. 프로젝트에 맞는 엔진을 선택하고 일관성 있게 사용하는 것이 가장 중요합니다.

유용한 글이었다면 주변에 공유해 주시고, 아직 구독하지 않으셨다면 뉴스레터(구독자 9,000명 이상)를 구독하여 이런 멋진 콘텐츠를 계속 받아보세요.

읽어주셔서 감사합니다 🙂