Pug(퍼그) 템플릿 엔진이란? 설치부터 간결한 문법까지 핵심 정리

HTML 템플릿 엔진 Pug 란?

웹 개발을 하다 보면 정적인 HTML만으로는 표현하기 어려운 동적인 화면 구성이 필요할 때가 많습니다. 사용자의 행동이나 데이터 변경에 따라 웹페이지의 내용이 실시간으로 바뀌어야 하는 경우죠. 이때 등장하는 것이 바로 템플릿 엔진(Template Engine)입니다. 오늘은 다양한 템플릿 엔진 중에서도 간결한 문법으로 주목받는 Pug에 대해 알아보겠습니다.

템플릿 엔진, 왜 필요할까요?

기본적인 웹페이지 구조를 만드는 HTML은 그 자체로는 정적인 마크업 언어입니다. 즉, 정해진 내용만 보여줄 뿐, 스스로 데이터를 가져오거나 조건에 따라 다른 내용을 보여주는 등의 동적인 기능을 수행할 수 없습니다.

물론 자바스크립트를 이용하면 HTML 요소를 동적으로 조작할 수 있지만, 복잡한 페이지 구조를 모두 자바스크립트 문자열 조합이나 DOM 조작으로 처리하는 것은 비효율적이고 코드 관리도 어려워집니다.

템플릿 엔진은 이러한 문제를 해결하기 위해 등장했습니다. 템플릿 엔진은 미리 정의된 템플릿(HTML 구조와 유사한 형태)에 동적인 데이터나 로직(주로 자바스크립트 사용)을 결합하여 최종적인 HTML 문서를 생성하는 도구입니다. 이를 통해 개발자는 데이터와 화면 표현 로직을 분리하여 보다 효율적이고 깔끔하게 코드를 관리할 수 있습니다. Pug 외에도 Nunjucks, EJS, Handlebars 등 다양한 템플릿 엔진이 존재합니다.

Pug 소개: 간결함으로 HTML을 완성하다

Pug(퍼그)는 Node.js 환경에서 자주 사용되는 대표적인 템플릿 엔진 중 하나입니다. 과거에는 'Jade'라는 이름으로 불렸습니다. Pug의 가장 큰 특징은 매우 간결하고 가독성 높은 문법입니다.

HTML의 복잡한 여닫는 태그(<tag>, </tag>) 대신, 들여쓰기(indentation)를 사용하여 요소의 포함 관계를 정의합니다. 이는 파이썬(Python)의 문법과 유사하여 코드를 훨씬 짧고 보기 좋게 만들어 줍니다.

Pug 설치 및 Express 연동 방법

Pug는 주로 Node.js 웹 프레임워크인 Express와 함께 사용됩니다. Express에서 Pug를 뷰 엔진(View Engine)으로 사용하기 위한 설치 및 설정 과정은 다음과 같습니다.

  1. Pug 설치: 프로젝트 폴더에서 npm을 이용하여 Pug를 설치합니다.

    npm install pug

  2. Express 설정: Express 애플리케이션 설정 파일(보통 app.js 또는 server.js)에서 Pug를 뷰 엔진으로 사용하도록 설정합니다.

    const express = require('express');
const path = require('path');

const app = express();

// 1. 템플릿 파일들이 위치할 폴더 지정 (기본값은 'views')
app.set('views', path.join(__dirname, 'views'));

// 2. 사용할 템플릿 엔진 지정
app.set('view engine', 'pug');

// ... (라우터 등 나머지 설정)

app.listen(3000, () => {
  console.log('Server is running on port 3000');
});
    • app.set('views', ...): Pug 템플릿 파일(.pug)들이 위치할 디렉토리를 설정합니다. 보통 프로젝트 루트에 views 폴더를 생성하여 사용합니다.
    • app.set('view engine', 'pug'): Express에게 렌더링할 뷰 엔진으로 'pug'를 사용하겠다고 알려줍니다. 이제 .pug 확장자를 가진 파일을 찾아 렌더링하게 됩니다.

Pug의 주요 문법 및 특징

Pug의 매력은 독특하고 간결한 문법에 있습니다. 몇 가지 주요 특징을 살펴보겠습니다.

  • 들여쓰기 기반 구조: HTML의 여닫는 태그 대신 들여쓰기로 부모-자식 관계를 표현합니다. 들여쓰기가 끝나면 해당 태그 범위도 끝납니다.

    ul
  li Item 1
  li Item 2 // ul 태그 안에 li 두 개 포함
p Next paragraph // ul 태그 밖에 있는 p 태그

  • 태그와 내용 작성: 태그 이름 뒤에 공백을 두고 내용을 작성하면 해당 태그의 콘텐츠가 됩니다.

    h1 Welcome to Pug
p This is a paragraph.

    (변환 결과: <h1>Welcome to Pug</h1><p>This is a paragraph.</p>)

  • 속성(Attributes) 정의: 태그 이름 뒤에 소괄호 ()를 사용하여 속성을 정의합니다. 여러 속성은 쉼표(,)나 공백으로 구분합니다.

    a(href='https://example.com', target='_blank') Link
img(src='image.jpg' alt='My Image')

    (변환 결과: <a href="https://example.com" target="_blank">Link</a><img src="image.jpg" alt="My Image">)

  • ID 및 클래스(Class) 사용: CSS 선택자와 유사하게 #으로 ID를, .으로 클래스를 간편하게 지정할 수 있습니다. 태그 이름 없이 사용하면 기본적으로 div 태그가 생성됩니다.

    #myId My Div with ID
.myClass My Div with Class
button#submitButton.btn.btn-primary Submit

    (변환 결과: <div id="myId">My Div with ID</div><div class="myClass">My Div with Class</div><button id="submitButton" class="btn btn-primary">Submit</button>)

  • 여러 줄 텍스트: 파이프(|) 문자를 사용하여 여러 줄의 텍스트를 쉽게 입력할 수 있습니다.

    p
  | This is the first line.
  | This is the second line.

    (변환 결과: <p>This is the first line. This is the second line.</p>)

  • 스크립트 및 스타일: script. 또는 style. 뒤에 들여쓰기를 하여 자바스크립트나 CSS 코드를 직접 삽입할 수 있습니다.

    head
  script.
    function greet() {
      console.log('Hello from Pug!');
    }

마무리

Pug는 HTML을 보다 간결하고 효율적으로 작성할 수 있도록 도와주는 강력한 템플릿 엔진입니다. 들여쓰기 기반의 문법은 처음에는 낯설 수 있지만, 익숙해지면 코드의 양을 줄이고 가독성을 크게 향상시킬 수 있습니다. 특히 Node.js와 Express 환경에서 웹 개발을 진행한다면, Pug는 충분히 고려해볼 만한 매력적인 선택지가 될 것입니다. 직접 사용해보면서 Pug의 간결함과 편리함을 경험해보시길 바랍니다.