이전
목록
다음

G7 콘텐츠 재구성 템플릿 - Glitter Directory

GnuBoard7의 기존 Board 콘텐츠를 Directory와 Listing 중심의 탐색 화면으로 재구성하는 사용자용 시드(seed) 템플릿

Glitter Gim
Glitter Gim
프로필 보기이 회원 글보기이 회원의 댓글보기
2026-09-27 (일) 07:47:08 조회 39
https://glitter-directory.glitter.kr glitter-node/glitter-directory
문의하기
G7 콘텐츠 재구성 템플릿 - Glitter Directory
PHP 8.2+ / Laravel 12.x / React 19 / TypeScript / Vite / DOMPurify / CSS / JSON Layout

개요

Glitter Directory는 별도의 Directory 전용 데이터 모델이나 관리 시스템을 만들지 않습니다.
기존 G7의 Board, Category, Post를 각각 Directory, Category, Listing으로 표현하고, 사용자가 목록을 탐색하고 상세 내용을 읽는 흐름에 집중합니다.

  • Board → Directory
  • Category → Category
  • Post → Listing
  • Post Detail → Listing Detail

주요 기능

Directory Home

/ 또는 /directory에서 공개 가능한 Board를 Directory 카드 형태로 확인할 수 있습니다.

각 Directory 카드에서는 Board 이름, 설명, Listing 수 등을 확인할 수 있으며, 원하는 Directory를 선택해 Listing Explorer로 이동합니다.

로딩, 오류, 재시도, 빈 상태도 별도로 처리되어 있어 단순한 랜딩 화면이 아니라 Directory discovery 역할을 합니다.

Listing Explorer

Directory 안에서는 다음 기능을 사용할 수 있습니다.

  • Category 탐색
  • Board 범위 검색
  • 현재 검색/Category 상태 표시
  • 탐색 조건 초기화
  • Board 기본 정렬
  • 최신순
  • 오래된순
  • 조회수 높은순
  • Grid/List 보기 전환
  • 숫자 페이지네이션
  • 일반 빈 상태와 필터 결과 없음 상태 구분

검색, Category, 정렬, 보기 방식, 페이지 등의 탐색 상태는 URL query를 중심으로 유지됩니다.

따라서 새로고침하거나 Listing Detail로 이동한 뒤 목록으로 돌아와도 기존 탐색 흐름을 이어가기 쉽습니다.

Grid / List

Listing은 Grid 또는 List 형태로 볼 수 있습니다.

Listing Card에서는 실제 데이터가 있는 경우 다음 정보를 표시할 수 있습니다.

  • 제목
  • Thumbnail
  • Category
  • Content preview
  • 작성자
  • 작성일
  • 조회수
  • NEW 표시

Grid는 화면 폭에 따라 3열, 2열, 1열로 대응하며, List 역시 모바일에서는 세로형 카드 구조로 전환됩니다.

Listing Detail

Listing Detail에서는 다음 정보를 확인할 수 있습니다.

  • Breadcrumb
  • Directory 이름
  • Listing 제목
  • Category
  • 작성일
  • 작성자
  • 본문
  • 목록으로 돌아가기
  • 이전/다음 Listing

본문은 원본 Post의 content mode에 따라 평문 또는 HTML로 표시됩니다.

HTML 콘텐츠는 DOMPurify 기반으로 정제한 뒤 렌더링합니다.

기본 Board 정렬 상태에서는 이전/다음 Listing 탐색을 제공하며, 사용자가 최신순·오래된순·조회수순 같은 별도 정렬을 선택한 경우에는 Board navigation 순서와 달라질 수 있기 때문에 이전/다음 링크를 표시하지 않습니다.

페이지네이션

Glitter Directory는 숫자 페이지네이션을 제공합니다.

전체 페이지 수를 정확히 알 수 있는 경우에는 현재 페이지, 첫 페이지, 마지막 페이지, 생략 부호 등을 사용합니다.

API에서 전체 수가 제한적으로 제공되는 경우에는 존재하지 않는 마지막 페이지를 임의로 만들지 않고, has_more_pages 정보를 기준으로 다음 페이지를 제공합니다.

Glitter Translate 선택 연동

Glitter Translate는 필수 의존성이 아닙니다.

플러그인이 설치되어 있고 활성화된 경우:

  • Listing 목록의 제목 번역
  • Listing Detail의 제목 및 본문 번역

을 사용할 수 있습니다.

Glitter Translate가 없거나 번역 요청이 실패하면 원본 Board/Post 콘텐츠를 그대로 표시합니다.

즉, 기본 Directory 기능은 Translate 없이도 동작합니다.

G7 인증 및 계정 연동

다음 사용자 화면을 제공합니다.

  • 로그인
  • 회원가입
  • 계정
  • 현재 사용자 표시
  • 로그아웃
  • 관리자 링크
  • 프로필 및 비밀번호 변경

Glitter Directory가 별도의 인증 시스템이나 계정 DB를 구현하는 것은 아니며, G7 Core의 인증·사용자 API를 화면에 연결하는 방식입니다.

Theme

다음 Theme 모드를 지원합니다.

  • System
  • Light
  • Dark

System 모드에서는 운영체제의 prefers-color-scheme 설정을 반영하며, 선택한 Theme은 저장됩니다.

UI 색상은 semantic CSS variable을 중심으로 구성되어 있습니다.

반응형 UI

Desktop, Tablet, Mobile 화면을 고려한 반응형 구성을 제공합니다.

  • Directory Card: 3열 → 2열 → 1열
  • Listing Grid: 3열 → 2열 → 1열
  • Listing List: 모바일에서 세로형 구조
  • Explorer controls: 좁은 화면에서 줄바꿈/세로 배치
  • Mobile Header/Menu
  • Account 화면 모바일 대응

접근성

현재 구현에는 다음과 같은 접근성 요소가 포함되어 있습니다.

  • semantic heading 및 navigation 구조
  • aria-label
  • aria-current
  • aria-pressed
  • aria-expanded
  • aria-live
  • 오류 상태의 role="alert"
  • focus-visible
  • Escape 키를 이용한 메뉴 닫기
  • 메뉴 종료 후 trigger focus 복귀

다국어 UI

Template 자체 UI는 다음 언어를 제공합니다.

  • Korean
  • English

UI 문구는 translation key를 사용합니다.

Board 이름, Category, Post 내용과 같은 실제 콘텐츠는 원본 API 값을 표시하며, 콘텐츠 전체를 자동 번역하는 기능은 기본 제공하지 않습니다.

템플릿의 경계

Glitter Directory는 기존 G7 Board를 Directory 방식으로 보여주는 프레젠테이션 템플릿입니다.

다음과 같은 별도 Directory 플랫폼 기능은 커스텀 영역으로 보고
현재 템플릿의 범위에 포함하지 않습니다.

  • Directory 전용 DB
  • 별도 Listing entity
  • Directory 전용 관리자 CRUD
  • 독립 검색 엔진
  • 리뷰 / 평점
  • 즐겨찾기
  • 예약
  • 결제
  • 지도 / 위치 기반 검색
  • 구조화 주소
  • 영업시간
  • 가격
  • 거리 계산
  • 추천 엔진
  • Faceted filter
  • 자동 번역 시스템

이러한 기능을 별도로 구현하기보다는, G7의 기존 Board 데이터를 재사용하면서 Directory 탐색 UI를 제공하는 데 범위를 두고 있습니다.

활용 예시

현재 구조로 다음과 같은 Board를 Directory 형태로 구성할 수 있습니다.

  • 업체 또는 기관 목록
  • 프로젝트 목록
  • 작품·포트폴리오 목록
  • 자료·리소스 모음
  • 링크 모음
  • 공개 게시판 기반 카탈로그
  • Category로 분류되는 콘텐츠 목록

주소, 가격, 예약 가능 여부, 영업시간처럼 별도의 구조화 필드가 핵심인 서비스보다는, 제목·본문·Category·작성자·날짜·조회수·Thumbnail 중심의 콘텐츠 Directory에 적합합니다.

기술 구성

  • GnuBoard7 User Template
  • G7 >= 7.0.11
  • sirsoft-board >= 1.1.2
  • React 19 peer dependency
  • TypeScript
  • Vite
  • DOMPurify 3.3.1
  • CSS
  • JSON Layout

0.10.0

0.10.0은 현재 Board-based Directory Template 범위의 feature-complete baseline입니다.

이번 버전에서는 Explorer 영역을 정리하고, 검색·Category·정렬·보기 방식·초기화 흐름을 한 곳에서 다루도록 정돈했으며, 현재 탐색 상태와 필터 결과가 없는 경우를 더 명확하게 표현하도록 개선했습니다.

향후 0.10.x 업데이트는 새로운 기능 확장보다는 버그 수정, 접근성, 반응형, 호환성, 보안과 같은 maintenance 중심으로 진행됩니다.

요구사항

GnuBoard7

GnuBoard7 >= 7.0.11

PHP

PHP 8.2+

필수 확장

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

정확한 최소 버전은 Release의 template.json dependency 정의를 기준으로 합니다.

관리자에서 템플릿 설치

  • 템플릿 ID: glitter-directory
  • Template Type: User Template
  • 현재 버전: v0.10.0

1. GitHub 저장소에서 설치

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

아래 저장소를 사용합니다.

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

설치가 완료되면 Glitter Directory를 활성화합니다.

2. ZIP 패키지 설치

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

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

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

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

3. 설치 후 화면 로드 오류가 발생하는 경우

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

를 실행한 뒤 다시 확인합니다.

저장소

GitHub

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

Release

https://github.com/glitter-node/glitter-directory/releases/tag/v0.10.0

Release Packages

License

MIT License

Copyright © Glitter.kr

이 개발자의 다른 프로젝트

그누보드7 예약 모듈 - glitter-reservation

코어 수정 없이 붙여 사용하는 그누보드7 예약 모듈로, 신청·인증·조회·취소·관리까지 예약 흐름 전체를 모듈 단위로 제공합니다.

그누보드7 상담예약 템플릿 - Glitter Academy Core

GnuBoard7 Template 엔진 기반으로 상담예약 사이트 구성을 위한 초기 템플릿 예제로 설계되었습니다.

그누보드7 커뮤니티 템플릿 - SIRsoft Community

쇼핑몰(이커머스 의존)을 제거하고 커뮤니티 기능에 집중한 경량 사용자 템플릿, ID : sirsoft-comm
전체 38개 프로젝트 보기

댓글 (0)

로그인 후 댓글을 남길 수 있습니다.
아직 댓글이 없습니다. 첫 번째 댓글을 남겨보세요!