frontend

11ty(Eleventy) 완벽 가이드: 성능 중심의 정적 사이트 생성과 Tailwind CSS 통합

# 11ty # Eleventy # SSG # TailwindCSS # daisyUI # WebPerformance
11ty logo and Tailwind CSS integration conceptual diagram

웹 생태계에는 수많은 정적 사이트 생성기(SSG)가 존재하지만, **11ty(Eleventy)**만큼 본질에 집중하며 개발자에게 자유를 주는 도구는 드뭅니다. 자바스크립트 프레임워크의 무거운 런타임 없이도 순수 HTML을 가장 효율적으로 생성할 수 있는 11ty의 매력과 실무 활용법을 알아봅니다.

목차

  1. 왜 11ty인가? 정적 사이트 생성의 새로운 기준
  2. 11ty 시작하기: 프로젝트 초기 설정
  3. Tailwind CSS와 daisyUI 플러그인 통합
  4. 실무 최적화: 개발자 팁과 트러블슈팅
  5. 자주 묻는 질문(FAQ)

왜 11ty인가? 정적 사이트 생성의 새로운 기준

11ty(Eleventy) 공식 홈페이지에서는 스스로를 “심플한 정적 사이트 생성기”라고 소개합니다. 하지만 그 단순함 뒤에는 Zero-config 기반의 강력한 유연성이 숨어 있습니다.

보통 Next.js나 Gatsby 같은 프레임워크는 클라이언트 측 자바스크립트 번들을 필수로 동반합니다. 반면 11ty는 빌드 타임에 모든 것을 처리하여 클라이언트 사이드 자바스크립트 비중을 0에 가깝게 만들 수 있습니다. 이는 구글의 Core Web Vitals 점수를 극대화하는 데 결정적인 역할을 합니다.

11ty의 핵심 장점:

  • 언어의 유연성: HTML, Markdown, Liquid, Nunjucks, Handlebars 등 10가지 이상의 템플릿 언어를 지원합니다.
  • 독립성: 특정 프레임워크(React, Vue 등)에 종속되지 않아 유지보수가 용이합니다.
  • 속도: 빌드 속도가 매우 빠르며, 결과물은 단순한 HTML 파일이기에 호스팅 비용이 저렴합니다.

11ty 시작하기: 프로젝트 초기 설정

11ty 프로젝트를 시작하는 과정은 매우 직관적입니다. 별도의 복잡한 CLI 설치 없이 npm을 통해 바로 구성할 수 있습니다.

1. 프로젝트 초기화 및 설치

먼저 프로젝트 폴더를 생성하고 eleventy 패키지를 설치합니다.

# 폴더 생성 및 이동
mkdir my-11ty-site && cd my-11ty-site

# npm 초기화
npm init -y

# 11ty 설치
npm install @11ty/eleventy --save-dev

2. 기본 페이지 작성

index.md 파일을 생성하여 내용을 작성합니다. 11ty는 기본적으로 프로젝트 루트의 파일을 스캔하여 HTML로 변환합니다.

---
layout: layout.njk
title: "나의 첫 11ty 사이트"
---
# 안녕하세요!
11ty로 만든 정적 페이지입니다.

Tailwind CSS와 daisyUI 플러그인 통합

11ty의 강력함은 PostCSS와의 조합에서 나옵니다. 특히 디자인 시스템을 빠르게 구축하기 위해 daisyUI를 11ty에 통합하는 과정을 살펴보겠습니다.

1. 의존성 설치

Tailwind CSS와 daisyUI, 그리고 빌드 프로세스를 도와줄 도구들을 설치합니다.

npm install -D tailwindcss postcss autoprefixer daisyui
npx tailwindcss init

2. Tailwind 설정 (tailwind.config.js)

11ty가 생성하는 HTML 파일 내의 클래스를 감지할 수 있도록 경로를 지정합니다.

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./src/**/*.{njk,md,html}",
    "./src/_includes/**/*.njk",
  ],
  theme: {
    extend: {},
  },
  plugins: [require("daisyui")], // daisyUI 플러그인 추가
}

3. 빌드 스크립트 구성

package.json에 11ty와 Tailwind를 동시에 실행할 수 있는 스크립트를 추가합니다. npm-run-all 같은 도구를 사용하면 편리합니다.

"scripts": {
  "start": "run-p watch:*",
  "watch:eleventy": "eleventy --serve",
  "watch:tailwind": "tailwindcss -i ./src/css/input.css -o ./_site/css/style.css --watch",
  "build": "eleventy && tailwindcss -i ./src/css/input.css -o ./_site/css/style.css --minify"
}

개발자의 팁: 레이아웃 파일 활용 > 11ty에서 _includes/layout.njk 파일을 만들어 <link rel="stylesheet" href="/css/style.css">를 포함하세요. 모든 페이지에 공통 디자인이 적용됩니다. daisyUI의 컴포넌트(Button, Navbar 등)를 바로 사용할 수 있게 됩니다.

실무 최적화: 개발자 팁과 트러블슈팅

11ty를 실무에 적용할 때 가장 자주 겪는 문제는 Static Assets(이미지, 폰트) 관리입니다. 11ty는 기본적으로 소스 폴더의 모든 파일을 복사하지 않습니다.

Passthrough Copy 설정

eleventy.config.js 파일에서 특정 폴더를 빌드 결과물에 포함하도록 명시해야 합니다.

module.exports = function(eleventyConfig) {
  // CSS, 이미지, 폰트 폴더를 그대로 복사
  eleventyConfig.addPassthroughCopy("src/assets");
  eleventyConfig.addPassthroughCopy("src/css");

  return {
    dir: {
      input: "src",
      output: "_site"
    }
  };
};

자주 묻는 질문(FAQ)

1. 11ty는 React나 Vue 컴포넌트를 사용할 수 없나요? 11ty 자체는 HTML 생성이 목적이지만, Web Components를 사용하거나 특정 페이지에만 소량의 JS 프레임워크를 수동으로 로드하여 혼합해서 사용할 수 있습니다. 다만, 완전한 SPA 경험을 원한다면 Astro가 더 나은 대안일 수 있습니다.

2. 데이터베이스의 데이터를 가져와서 페이지를 생성할 수 있나요? 네, _data 폴더 내에 JS 파일을 만들어 외부 API를 호출하면 빌드 시점에 해당 데이터를 기반으로 수천 개의 페이지를 동적으로 생성할 수 있습니다.

3. daisyUI 테마를 변경하려면 어떻게 하나요? tailwind.config.js의 daisyui 설정 객체 내에 themes 배열을 추가하고, HTML 태그에 data-theme="dark" 속성을 부여하면 간단히 제어 가능합니다.

지금까지 11ty의 기초와 Tailwind CSS 연동 방법을 살펴보았습니다. 복잡한 프레임워크의 무게에서 벗어나 웹의 본질적인 성능을 추구하신다면 11ty는 최선의 선택이 될 것입니다.

설정 과정이 복잡하게 느껴진다면, 제가 미리 구성해둔 포트폴리오 프로젝트를 참고해 보세요. 전체 구조를 한눈에 파악하실 수 있습니다. 11ty로 생성한 포트폴리오 프로젝트 GitHub 링크

이 글이 마음에 드셨나요?

로딩 중...