Jekyll content 변수란 무엇인가?

content 간단 설명

지킬(Jekyll)에서 {{ content }}라는 변수는 꽤 중요하지만, 이렇다 할 설명이 없어 제가 이해한 대로 간단하게 설명해 보려고 합니다. 그렇다 보니 정확하지 않을 수도 있습니다.

한마디로 요약하자면 렌더링된 컨텐츠를 보여주는 영역입니다. 하지만 이렇게 설명하면 쉽지 않으니 조금이라도 간단하게 풀어보려고 합니다.

한눈에 보기

글이 조금 길어서 핵심만 먼저 정리합니다. 자세한 내용은 아래 섹션에서 다룹니다.

{{ content }}는 렌더링된 본문이 끼워지는 자리입니다. (빈 액자에 사진을 끼우는 것과 같습니다.)
렌더링된 컨텐츠 = 마크다운/HTML 본문이 빌드 과정에서 HTML로 변환된 결과물입니다.
무엇이 렌더링되는가는 front matter 유무가 가르고, _로 시작하는 폴더는 추가로 컬렉션 등록이 필요합니다.
레이아웃은 home → page → default로 체인을 이루며, 선언은 위로, 렌더링은 안에서 밖으로 채워집니다.

용어 설명

본문에서 자주 나오는 용어를 먼저 정리합니다.

front matter : 파일 맨 위 ---로 감싼 YAML 설정 블록. layout, title 등을 적습니다.
컬렉션 : 같은 성격의 문서를 모아 다루는 폴더 단위. _posts처럼 지킬이 미리 정해둔 예약 컬렉션과, 직접 만들어 _config.yml에 등록하는 커스텀 컬렉션이 있습니다.
리퀴드(Liquid) : {% %}, {{ }} 같은 문법으로 데이터를 다루는 지킬 템플릿 언어.
렌더링 : 마크다운/HTML 본문을 레이아웃에 끼워 최종 HTML로 변환하는 과정.

렌더링된 컨텐츠란 무엇인가?

{{ content }}는 렌더링된 컨텐츠(포스트 등)를 보여주는 변수라고 설명합니다. 렌더링된 컨텐츠란, 마크다운이나 HTML로 작성한 문서의 본문이 지킬 빌드 과정에서 HTML로 변환된 결과물을 의미합니다. (이 결과물이 최종적으로 _site의 html 파일로 생성됩니다.)

_posts는 지킬의 예약 컬렉션이라 별도 설정 없이 렌더링되고, 루트의 about.md처럼 언더스코어 없는 일반 파일도 그냥 렌더링됩니다. 하지만 제 사이트의 _archives, _standalone처럼 언더스코어로 시작하는 커스텀 컬렉션 폴더는 _config.yml에 등록하고 output: true를 주어야 각 문서가 페이지로 렌더링되어 {{ content }}로 표시됩니다.

예시

collections:
  standalone:
    output: true
    sort_by: order
  archives:
    output: true

컬렉션 등록 자체를 안 하면 지킬은 _로 시작하는 그 폴더를 통째로 무시하고, 등록만 하고 output: true를 빼면 리퀴드에서 읽을 수는 있어도 개별 페이지로는 출력되지 않습니다.

렌더링을 가르는 건 폴더가 아니라 front matter

한 가지 헷갈리기 쉬운 점이 있습니다. 위 컬렉션 규칙은 _로 시작하는 폴더에만 적용되고, assets처럼 언더스코어 없는 일반 폴더는 별도 설정 없이 빌드에 포함되어 _site로 넘어갑니다. 다만 그게 전부 “렌더링”되는 건 아닙니다.

일반 폴더에서 렌더링 여부를 가르는 건 front matter의 유무입니다.

파일	동작
front matter 있음	레이아웃을 거쳐 렌더링, `{{ content }}` 적용
front matter 없음	변환 없이 그대로 복사 (이미지·폰트 등)

예를 들어 제 사이트의 assets/404.html은 에셋 폴더에 있지만 front matter에 layout: page가 있어서 정상적으로 렌더링됩니다. “에셋 폴더라서”가 아니라 “front matter가 있어서” 렌더링되는 것입니다. 반대로 같은 폴더의 이미지 파일은 front matter가 없으니 그냥 복사만 됩니다.

content 레이아웃 체인

제가 만든 사이트를 예로 들자면 _layouts/page는 글·페이지 본문을 감싸는 중간 공통 레이아웃입니다. 해당 파일에 content가 존재하는데

  <!-- main article content -->
  <section class="article__content">
    {{ content }}
  </section>

여기서 {{ content }} 부분이 핵심입니다. 각 파일의 front matter에 layout: page라고 작성되어 있는 파일들의 내용이 이 자리에 렌더링되어 표시됩니다.

쉽게 말하면 <section>은 빈 액자고, content는 그 액자에 끼울 사진입니다. 액자(레이아웃)는 미리 만들어두고, 페이지마다 다른 사진(내용)을 끼우게 됩니다.

예를 들어 제 사이트의 _standalone/contact는 연락처 화면인데 해당 파일은 부모 레이아웃으로 page를 가리키고 있어, 파일의 내용이 page 파일의 {{ content }} 부분에 채워집니다.

렌더링 결과

<!-- main article content -->
<section class="article__content">
  <p>문의가 있다면 가능한 범위에서 답변드립니다.</p>
  <h4>GitHub — <strong><a href="https://github.com/Laaatte" target="_blank" rel="noopener noreferrer">Laaatte</a></strong></h4>
</section>

하지만 page 파일 혼자서 모든 html 렌더링을 담당하는 건 아니고, 최종적으로 _layouts/default에 모든 컨텐츠가 렌더링됩니다.

default 파일에는 사이트 전체의 골격(<head>, <header>, <main>, <footer>)이 잡혀 있고, <main> 안에 {{ content }}가 자리하고 있어서, 앞서 만들어진 page 레이아웃의 결과물이 이 자리에 통째로 들어오게 됩니다. page.html이 부모 레이아웃으로 default를 가리키고 있기 때문입니다.

최종 렌더링 결과

<!DOCTYPE html>
<html lang="ko">
  <head>...</head>
  <body>
    <header>...</header>

    <main id="main-content" class="layout-container">
      <article class="article">
        <section class="article__content">
          <p>문의가 있다면 가능한 범위에서 답변드립니다.</p>
          <h4>GitHub — <strong><a href="https://github.com/Laaatte" target="_blank" rel="noopener noreferrer">Laaatte</a></strong></h4>
        </section>
      </article>
    </main>

    <footer>...</footer>
  </body>
</html>

contact.md의 본문이 → page의 <section> 안에 → 그게 다시 default의 <main> 안에 차곡차곡 쌓여서 최종 HTML이 완성됩니다.

index.html이 home을 가리키는 이유

앞서 설명만 보면 index.html(웹사이트 루트)는 layout: default를 가리켜야 할 것 같지만, 그렇게 설정하면 바로 default 레이아웃을 렌더링하게 되어 빈 화면만 보이게 됩니다.

레이아웃 default일 때

index.html이 레이아웃 page를 가리킬 때

레이아웃 page일 때

layout: page로 설정했을 땐 article 영역만 잡혀 있고 내용은 비어 있습니다. 즉, home.html이 가진 About, Recent, Archive 같은 실제 내용이 빠진 상태입니다.

그래서 index.html은 layout: home을 가리킵니다. 이렇게 하면 home의 내용 → page의 <section> 안에 → default의 <main> 안에 단계별로 채워지면서 최종 화면이 완성됩니다.

전체 흐름을 정리하면, 레이아웃 선언은 위로 거슬러 올라가고 렌더링은 안에서 밖으로 채워집니다.

[레이아웃 선언 방향]
index.html  ─ layout: home
home.html   ─ layout: page
page.html   ─ layout: default
default.html  (최상위, 부모 없음)

[렌더링 채워지는 방향]
home 내용 → page의 <section> → default의 <main> → 최종 HTML

이처럼 index.html이 layout: home을 가리키기 때문에 결국 home의 내용이 사이트 첫 화면이 됩니다.

변경 기록

2026-05-11 : 최초 작성
2026-05-16 : 내용 보강 및 정확도 수정
- 렌더링된 컨텐츠란 무엇인가 섹션 추가
- 컬렉션 렌더링 설명 정확도 수정
- front matter 기준 렌더링 단락 추가
- 레이아웃 체인 흐름도 분리
- 한눈에 보기 요약 추가
- 용어 설명 섹션 추가