Ghost 에서 CSS Grid를 활용한 반응형 컨텐츠 레이아웃 최적화 가이드

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에서 전문적이고 반응형인 블로그 디자인을 구현할 수 있습니다. 테마에 맞는 올바른 셀렉터를 사용하여 컨텐츠의 성격에 따라 적절한 영역을 선택하면, 최적의 읽기 경험을 제공할 수 있을 것입니다.