그누보드7 콘텐츠 템플릿 - Glitter Editorial

프로젝트 개요

Glitter Editorial은 GnuBoard7에서 글과 콘텐츠가 중심이 되는 사이트를 빠르게 시작할 수 있도록 제작한 범용 User Template입니다.

기업이나 서비스를 소개하는 일반적인 비즈니스 홈페이지와 달리, 콘텐츠의 발행 → 탐색 → 읽기 흐름을 중심으로 페이지와 데이터 구조를 구성했습니다.

독립 출판, 매거진, 저널, 기술 블로그, 아카이브처럼 글 자체가 사이트의 중심이 되는 환경을 대상으로 합니다.

단순히 Editorial 분위기의 디자인을 입히는 데 그치지 않고, 기존 GnuBoard7의 sirsoft-board를 콘텐츠 저장소로 활용하면서 이를 Editorial 화면에 적합한 구조로 변환합니다.

sirsoft-board
      │
      ▼
Editorial Content Adapter
      │
      ├── Home
      ├── Archive
      └── Article Reader

별도의 Article 데이터베이스나 Editorial CMS를 만들지 않습니다.

GnuBoard7의 게시판, 권한, Template Engine, JSON Layout, Routing 구조를 그대로 활용하면서
콘텐츠 중심 사이트에 필요한 별도의 정보 구조와 읽기 경험을 제공하는 것을 목표로 합니다.

따라서 콘텐츠 작성과 관리는 기존 sirsoft-board에서 그대로 이루어집니다. Glitter Editorial은 게시판 자체를 대체하는 것이 아니라,
게시판에 작성된 콘텐츠를 Home, Archive, Article Reader에 맞는 형태로 가져와 보여주는 User Template입니다.

이 때문에 게시판 관리의 유저화면 보기에서 표시되는 기존 게시판 목록/글보기 화면과 Glitter Editorial의 화면은 서로 다른 경로를 사용합니다.

주요 특징

Content-first Home

홈 화면은 브랜드나 서비스 소개보다 실제 콘텐츠를 먼저 보여주는 구조입니다.

• Lead Story
• Latest Stories
• Editorial Principles
• Mission
• Editorial Note
• 콘텐츠가 없을 때의 Empty State

게시물이 없는 경우에도 가짜 기사나 이미지를 표시하지 않고 콘텐츠 발행을 준비하는 상태로 자연스럽게 유지됩니다.

Editorial Archive

/articles는 일반적인 게시판 목록/글보기 화면을 그대로 꾸미는 방식이 아니라,
sirsoft-board의 콘텐츠를 가져와 탐색하기 위한 별도의 Editorial Archive로 구성했습니다.

따라서 게시판 관리의 유저화면 보기가 아니라,
Glitter Editorial이 활성화된 사이트의 /articles에서 Editorial 콘텐츠 목록을 확인합니다.

• sirsoft-board 기반 서버 Pagination
• 게시판 Category 기반 Section 탐색
• URL 기반 Page / Category 상태 유지
• Article 진입 후 기존 Archive Context 복원
• 이미지가 없어도 성립하는 목록 구조
• Mobile / Tablet / Desktop 대응

Category는 별도의 전역 Taxonomy를 만들지 않고 기존 게시판 내부 분류를 그대로 사용합니다.

Long-form Article Reader

Article Detail은 일반 게시판 상세 화면보다 장문 읽기 경험에 초점을 맞췄습니다.

• 읽기에 적절한 본문 폭
• 반응형 Typography
• Section / Author / Date Metadata
• Optional Hero Visual
• Plain Text / HTML Content Mode
• Heading
• Nested List
• Blockquote
• Inline / Block Code
• Figure / Image / Caption
• Archive Context 복귀

HTML 콘텐츠는 Sanitization 경계를 거쳐 렌더링하며, 이미지나 부가 Metadata가 없는 글도 완전한 Reader 화면으로 성립하도록 구성했습니다.

콘텐츠 구조

Home, Archive, Article은 서로 다른 방식으로 게시판 응답을 직접 처리하지 않습니다.

sirsoft-board의 데이터를 공통 Editorial Article Model로 정규화한 뒤 각 화면에서 사용합니다.

또한 실제 GnuBoard7 데이터에 없는 Editorial 개념을 Template에서 임의로 만들어내지 않는 것을 원칙으로 했습니다.

예를 들어:

• created_at을 published_at으로 재해석하지 않습니다.
• Category는 현재 Board 내부의 Section으로만 사용합니다.
• 대표 이미지가 없으면 이미지 영역 자체를 생략합니다.
• Guest 작성자 이름을 영구적인 Author Identity로 취급하지 않습니다.
• Article URL은 기존 Post의 Numeric ID를 사용합니다.

즉, 새로운 Editorial CMS를 G7 안에 다시 만드는 대신 기존 콘텐츠 계약을 Editorial 사이트에 맞게 표현하는 작은 Adapter Layer를 두었습니다.

디자인

Glitter Editorial은 종이 매체의 편집 감각을 참고하지만 장식적인 Magazine UI를 그대로 재현하는 것을 목표로 하지는 않습니다.

디자인의 중심은 다음과 같습니다.

• Paper-like neutral surface
• Serif 중심 Typography
• 넓은 Whitespace
• 명확한 콘텐츠 위계
• 장문 Reading Measure
• 비대칭 Editorial Composition
• 이미지에 의존하지 않는 구조
• Mobile부터 Wide Desktop까지 이어지는 Responsive Layout

본문 영역을 반복적인 카드, Shadow, Gradient, Badge로 구획하지 않습니다.

또한 섹션마다 가로 실선을 반복하기보다 Typography, Spacing, Alignment, Grid Rhythm으로 콘텐츠의 관계를 표현하도록 구성했습니다.

GnuBoard7 Integration

Glitter Editorial은 기존 G7 확장 구조 안에서 동작합니다.

• GnuBoard7 Template Engine
• User Template
• JSON Layout
• React Component
• Template Routing
• i18n
• sirsoft-board
• Guest Permission Contract
• Template Lifecycle
• Prebuilt Production Assets

별도의 Core 수정 없이 설치할 수 있습니다.

게시판과 Editorial 화면의 관계

Glitter Editorial은 sirsoft-board의 기본 게시판 화면을 교체하는 게시판 스킨이 아닙니다.

게시판은 콘텐츠의 작성, 저장, 권한 관리를 담당하고 Glitter Editorial은 해당 콘텐츠를 사이트의 Editorial 화면에서 표현합니다.

게시판에서 콘텐츠 작성
        │
        ▼
sirsoft-board
        │
        ▼
Editorial Content Adapter
        │
        ├── /          Home
        ├── /articles  Archive
        └── Article    Reader

따라서 관리자에서 게시판을 만든 뒤 유저화면 보기로 이동하는 기존 게시판 화면과 Glitter Editorial의 Home / Archive / Article Reader는 동일한 화면이 아닙니다.

다국어

현재 다음 언어를 제공합니다.

• 한국어 (ko)
• 영어 (en)

Template의 고정 UI 문구는 language key로 관리하며 실제 게시글 제목과 본문 같은 동적 콘텐츠는 원본 데이터를 사용합니다.

기술 스택

• GnuBoard7
• PHP 8.2+
• Laravel 12.x
• React
• TypeScript
• JSON Layout
• Vite
• DOMPurify
• sirsoft-board

Production CSS / JavaScript가 Release에 포함되므로 일반적인 Template 설치를 위해 별도의 Node.js Production Build를 수행할 필요는 없습니다.

현재 상태

Open Beta — v0.1.0-beta.25

현재 구현된 주요 범위는 다음과 같습니다.

• Content-first Home
• Lead / Latest Stories
• Editorial Archive
• Backend Pagination
• Category Filtering
• List Context Round-trip
• Long-form Article Reader
• HTML / Text Rendering
• Content Sanitization
• Responsive Editorial UI
• 한국어 / 영어
• G7 Template Lifecycle
• 독립 GitHub Repository
• ZIP / TAR.GZ Release Package

현재 테스트는 66/66 통과했으며 TypeScript Type Check, Production Build, JSON Validation과 주요 Home / Archive / Article 회귀 검증을 완료했습니다.

현재 제한사항

아직 다음 기능을 Template에서 임의로 추가하지 않았습니다.

• 전용 published_at
• Article Slug
• Global Editorial Section
• Author Archive
• Related Stories
• Search
• Popular / Trending
• Manual Featured Story
• 별도의 Editorial DB / CRUD / Module

특히 현재 Article SEO는 Browser Runtime과 Server-side Renderer가 동일한 동적 Content Source를 아직 공유하지 못하는 부분이 있어 일부 Metadata가 Generic Fallback을 사용합니다.

이 부분은 향후 Content Source Bootstrap Contract를 정리하면서 개선할 예정입니다.

이런 사이트에 추천합니다

• 독립 출판 사이트
• 온라인 매거진
• 저널
• 기술 블로그
• 에세이 사이트
• 뉴스·칼럼 사이트
• 연구·기록 아카이브
• 조직의 콘텐츠 허브
• GnuBoard7 기반 콘텐츠 사이트
• G7 User Template 구조를 참고하려는 개발자

프로젝트 방향

Glitter Editorial은 GnuBoard7 안에 또 하나의 CMS를 만드는 프로젝트가 아닙니다.

기존 G7이 이미 제공하는 게시판, 권한, API, Template Lifecycle을 최대한 활용하고, 콘텐츠 중심 사이트에 실제로 필요한 부분만 Editorial Contract로 추가하는 방향으로 개발하고 있습니다.

Business Template과 Editorial Template의 차이를 단순한 색상이나 Typography의 차이로 만들기보다,

무엇을 보여주는 사이트인가에 따라 데이터의 흐름과 페이지 구조도 달라져야 한다.

는 관점에서 출발했습니다.

GnuBoard7에서 콘텐츠 중심 사이트를 바로 시작할 수 있으면서, 동시에 새로운 User Template을 설계할 때 참고할 수 있는 범용 Editorial 기반 템플릿을 목표로 합니다.

요구사항

GnuBoard7

GnuBoard7 >= 7.0.9

PHP

PHP 8.2+

필수 확장

• 게시판 모듈 (sirsoft-board >= 1.1.0)

Glitter Editorial의 Article 콘텐츠는 sirsoft-board의 게시물을 사용하므로 게시판 모듈이 반드시 설치되어 있어야 합니다.

현재 버전에서는 sirsoft-page를 필수 dependency로 사용하지 않습니다.

관리자에서 템플릿만 설치

• 템플릿 ID: glitter-editorial, user 템플릿, 버전 v0.1.0-beta.24

1. GitHub 저장소에서 설치

관리자 → 템플릿 관리 → 수동 설치 → GitHub

아래 저장소 URL을 입력합니다.

https://github.com/glitter-node/glitter-editorial

설치 완료 후 Glitter Editorial 템플릿을 활성화합니다.

2. ZIP 패키지 설치

GitHub Release에서 다음 패키지를 다운로드합니다.

• ZIP 템플릿 패키지를 다운로드

다운로드한 ZIP 패키지를 다음 경로에서 설치합니다.

관리자 → 템플릿 관리 → 수동 설치 → 파일 업로드

설치 완료 후 Glitter Editorial 템플릿을 활성화합니다.

3. 게시판 콘텐츠 사용

Glitter Editorial은 별도의 Article 관리 기능을 만들지 않고 기존 sirsoft-board에 작성된 게시물을 콘텐츠로 사용합니다.

따라서 글 작성과 관리는 기존 게시판에서 진행합니다.

관리자에서 게시판 생성
        ↓
게시판에 글 작성
        ↓
Glitter Editorial
        ↓
Home / Archive / Article Reader

게시판의 유저화면 보기는 기존 게시판 화면으로 이동하는 기능이며, Glitter Editorial의 Article Reader로 이동하는 기능은 아닙니다.

Editorial 콘텐츠 목록은 Glitter Editorial이 활성화된 사이트의 다음 경로에서 확인합니다.

/articles

게시물이 정상적으로 제공되고 있다면 해당 콘텐츠를 기반으로 Archive와 Article Reader가 구성됩니다.

4. 설치 후 생성된 페이지의 로드 에러 발생 시

관리자 → 환경설정 → 고급 → 캐시 모두 삭제

Demo / Repository

Demo

https://glitter-editorial.glitter.kr/

GitHub

https://github.com/glitter-node/glitter-editorial

Release

v0.1.0-beta.25

라이선스

MIT License

Copyright © 2026 Glitter.kr