CSS Grid로 구현하는 Ghost CMS 반응형 레이아웃

Ghost CMS에서 컨텐츠의 너비를 효과적으로 제어하고 반응형 디자인을 구현하는 것은 사용자 경험에 있어 매우 중요합니다. 이번 포스트에서는 .gh-canvas 클래스를 활용한 CSS Grid 기반의 레이아웃 시스템에 대해 자세히 알아보겠습니다.

핵심 CSS 코드 분석

.gh-canvas {
  /* 메인 컨텐츠 영역의 최대 너비를 1200px로 제한하되, 
     양쪽 여백(gap)을 고려하여 반응형으로 조절 */
  --main: min(var(--content-width, 1200px), 100% - var(--gap) * 2);
  
  /* 와이드 영역의 너비를 계산 - 컨테이너 전체 너비에서 컨텐츠 너비를 뺀 나머지를 양쪽으로 분할 */
  --wide: minmax(0, calc((var(--container-width, 1600px) - var(--content-width, 1000px)) / 2));
  
  /* 풀 너비 영역 - 최소 gap만큼의 여백을 보장하며 나머지 공간을 모두 사용 */
  --full: minmax(var(--gap), 1fr);
  
  /* CSS Grid 레이아웃 활성화 */
  display: grid;
  
  /* Grid 컬럼을 7개 영역으로 정의: full-wide-main-wide-full 구조로 구성 */
  grid-template-columns: 
    [full-start] var(--full) 
    [wide-start] var(--wide) 
    [main-start] var(--main) 
    [main-end] var(--wide) 
    [wide-end] var(--full) 
    [full-end];
}

레이아웃 구조의 이해

이 CSS Grid 시스템은 다음과 같은 3가지 레이아웃 영역을 제공합니다:

1. Main 영역 (main-start ~ main-end)

• 일반적인 텍스트 컨텐츠가 위치하는 중앙 영역
• 최대 1200px 너비로 제한되어 가독성을 보장
• 모바일에서는 양쪽 여백을 유지하며 자동으로 축소

2. Wide 영역 (wide-start ~ wide-end)

• 이미지나 코드 블록 등 더 넓은 공간이 필요한 컨텐츠용
• Main 영역보다 넓지만 전체 너비는 아닌 중간 크기
• 시각적 강조가 필요한 요소에 적합

3. Full 영역 (full-start ~ full-end)

• 화면 전체 너비를 활용하는 영역
• Hero 이미지, 배경이 있는 섹션 등에 사용
• 최소 여백만 유지하며 최대한 넓게 표시

실제 사용 예시

<!-- Main 영역: 일반 텍스트 -->
<div class="gh-canvas">
  <p>이것은 일반적인 본문 텍스트입니다.</p>
</div>

<!-- Wide 영역: 강조 컨텐츠 -->
<div class="gh-canvas">
  <figure style="grid-column: wide">
    <img src="example.jpg" alt="예시 이미지">
  </figure>
</div>

<!-- Full 영역: 전체 너비 활용 -->
<div class="gh-canvas">
  <section style="grid-column: full; background: #f0f0f0;">
    <h2>전체 너비 섹션</h2>
  </section>
</div>

장점과 활용 팁

반응형 디자인 자동 구현 CSS 변수와 minmax(), calc() 함수를 활용하여 별도의 미디어 쿼리 없이도 자연스러운 반응형 레이아웃이 구현됩니다.

유연한 컨텐츠 배치 Grid 라인 이름을 활용하여 각 요소가 어느 영역에 위치할지 직관적으로 지정할 수 있습니다.

성능 최적화 CSS Grid는 브라우저 네이티브 기능으로 JavaScript 없이도 복잡한 레이아웃을 효율적으로 처리합니다.

커스터마이징 방법

CSS 변수를 수정하여 레이아웃을 원하는 대로 조정할 수 있습니다:

.gh-canvas {
  --content-width: 900px;  /* 메인 컨텐츠 너비 조정 */
  --container-width: 1400px;  /* 전체 컨테이너 너비 조정 */
  --gap: 20px;  /* 여백 크기 조정 */
}

Ghost CMS Code Injection으로 적용하기

이 CSS 코드를 실제 Ghost 사이트에 적용하는 방법을 단계별로 알아보겠습니다.

1. Ghost 관리자 페이지 접속

• Ghost 사이트의 /ghost 경로로 접속하여 관리자 로그인

2. Code Injection 메뉴로 이동

• 좌측 메뉴에서 Settings → Code injection 클릭

3. Site Header에 CSS 추가

<style>
.gh-canvas {
  /* 메인 컨텐츠 영역의 최대 너비를 1200px로 제한하되, 
     양쪽 여백(gap)을 고려하여 반응형으로 조절 */
  --main: min(var(--content-width, 1200px), 100% - var(--gap) * 2);
  
  /* 와이드 영역의 너비를 계산 - 컨테이너 전체 너비에서 컨텐츠 너비를 뺀 나머지를 양쪽으로 분할 */
  --wide: minmax(0, calc((var(--container-width, 1600px) - var(--content-width, 1000px)) / 2));
  
  /* 풀 너비 영역 - 최소 gap만큼의 여백을 보장하며 나머지 공간을 모두 사용 */
  --full: minmax(var(--gap), 1fr);
  
  /* CSS Grid 레이아웃 활성화 */
  display: grid;
  
  /* Grid 컬럼을 7개 영역으로 정의: full-wide-main-wide-full 구조로 구성 */
  grid-template-columns: 
    [full-start] var(--full) 
    [wide-start] var(--wide) 
    [main-start] var(--main) 
    [main-end] var(--wide) 
    [wide-end] var(--full) 
    [full-end];
}
</style>

4. 저장 및 적용

• Save 버튼을 클릭하여 변경사항 저장
• 사이트를 새로고침하여 변경사항 확인

테마별 셀렉터 차이점 주의사항

⚠️ 중요: 테마에 따른 셀렉터 변경

Ghost의 다양한 테마들은 각각 다른 CSS 클래스명과 구조를 사용합니다. 위에서 사용한 .gh-canvas는 Ghost의 기본 Casper 테마 기준입니다.

주요 테마별 컨텐츠 컨테이너 셀렉터:

Casper (기본 테마)

css

.gh-canvas { /* 위 코드 그대로 사용 */ }

Dawn 테마

css

.gh-content { 
  /* Dawn 테마의 메인 컨텐츠 컨테이너 */
  /* 위 CSS Grid 코드 적용 */
}

Massively 테마

css

.post-content {
  /* Massively 테마의 포스트 컨텐츠 영역 */
  /* 위 CSS Grid 코드 적용 */
}

Source 테마

css

.content-wrapper {
  /* Source 테마의 컨텐츠 래퍼 */
  /* 위 CSS Grid 코드 적용 */
}

현재 테마의 셀렉터 찾기

방법 1: 개발자 도구 활용

1. 사이트에서 F12 키로 개발자 도구 열기
2. Elements 탭에서 포스트 컨텐츠 영역 검사
3. 컨텐츠를 감싸는 주요 컨테이너 클래스명 확인

방법 2: 테마 파일 직접 확인

1. Ghost 관리자에서 Design → Change theme → Advanced → View theme files
2. post.hbs 파일에서 컨텐츠 컨테이너 구조 확인

방법 3: 범용 적용 만약 정확한 셀렉터를 찾기 어렵다면, 더 구체적인 셀렉터를 사용할 수 있습니다:

css

/* 범용 적용 예시 */
article .post-content,
.gh-canvas,
.content-wrapper,
.gh-content {
  /* 위의 CSS Grid 코드 */
}

테마 업데이트 시 주의사항

• 테마가 업데이트되면 커스텀 CSS가 초기화될 수 있습니다
• Code Injection을 통한 CSS는 테마 업데이트에 영향을 받지 않으므로 권장됩니다
• 테마 변경 시에는 새로운 테마의 셀렉터에 맞게 CSS를 수정해야 합니다

적용 전 테스트 방법

실제 적용 전에 브라우저 개발자 도구에서 테스트해보는 것을 권장합니다:

1. 포스트 페이지에서 개발자 도구 열기
2. Console 탭에서 다음 코드로 임시 적용:

javascript

// 현재 테마의 컨텐츠 컨테이너 찾기
const contentContainer = document.querySelector('.gh-canvas') || 
                        document.querySelector('.gh-content') || 
                        document.querySelector('.post-content');

if (contentContainer) {
  console.log('찾은 컨테이너:', contentContainer.className);
  // 임시로 CSS 적용해보기
  contentContainer.style.display = 'grid';
}

이러한 CSS Grid 레이아웃 시스템을 통해 Ghost CMS에서 전문적이고 반응형인 블로그 디자인을 구현할 수 있습니다. 테마에 맞는 올바른 셀렉터를 사용하여 컨텐츠의 성격에 따라 적절한 영역을 선택하면, 최적의 읽기 경험을 제공할 수 있을 것입니다.