Homebrewery 스니펫 시스템 개요

Homebrewery는 마크다운(Markdown) 구문만으로 D&D(Dungeons & Dragons) 공식 규칙서 스타일의 문서를 생성하는 오픈소스 렌더링 엔진입니다. 이 시스템의 핵심 생산성 도구는 '스니펫(Snippets)'으로, 사전 정의된 마크다운 블록과 CSS 클래스를 결합하여 복잡한 레이아웃을 자동화합니다.

스니펫 아키텍처 및 분류

에디터의 snippetbar 컴포넌트는 텍스트, 스타일, 스니펫, 메타데이터 뷰로 구분됩니다. 스니펫은 내부적으로 themes/V3/5ePHB/snippets.js와 같은 테마별 설정 파일에 정의되어 있으며, 다음과 같은 카테고리로 추상화됩니다.

1. 텍스트 포맷팅 및 레이아웃 블록

• 타이포그래피 프리셋: H1~H6 헤더에 D&D 공식 폰트(Modesto, MrEaves 등)와 자간을 자동 적용합니다.
• 콜아웃(Callout) 박스: {{note}} 또는 {{descriptive}} 클래스를 사용하여 중요 규칙이나 플레이버 텍스트를 시각적으로 분리합니다.

2. 게임 로직 데이터 템플릿

• 주문(Spell) 블록: 시전 시간, 사거리, 구성 요소 등 표준 파라미터를 구조화된 마크다운 테이블로 변환합니다.
• 몬스터 스탯 블록: 능력치 배열, 내성 굴림, 행동 패턴을 공식 규칙서 레이아웃에 맞게 정렬합니다.

3. 테이블 및 스타일 오버라이드

• 데이터 테이블: 클래스 진행표나 주문 목록을 위한 반응형 마크다운 테이블을 생성합니다.
• CSS 오버라이드: page 레벨에서 배경색을 제거하거나(무잉크 모드), 드롭캡(Drop Cap) 스타일을 토글하는 인라인 스타일 스니펫을 제공합니다.

스니펫 인젝션 및 중첩 메커니즘

기본적인 스니펫은 커서 위치에 마크다운 텍스트를 직접 삽입합니다. 그러나 고급 스니펫은 서브스니펫(Subsnippets) 구조를 가질 수 있으며, 이는 UI에서 드롭다운 화살표로 표시됩니다. 또한 베타(Beta) 태그가 붙은 스니펫은 실험적인 CSS 그리드(Grid) 레이아웃을 테스트하는 데 사용됩니다.

마크다운 스니펫 구현 예시

다음은 Homebrewery의 커스텀 마크다운 파서가 처리하는 대표적인 스니펫 구조입니다. 중괄호 {{ }}는 특정 CSS 클래스를 래핑하는 Homebrewery의 확장 구문입니다.

주문(Spell) 데이터 블록

{{spell
# 파이어볼 (Fireball)
*3레벨 방출 마법*

**시전 시간** : 1 행동
**사거리** : 150피트
**구성 요소** : V, S, M (유황과 구아노)
**지속 시간** : 순간

지정한 지점을 중심으로 반경 20피트 구형의 화염이 폭발합니다. 범위 내의 모든 생물은 민첩 내성 굴림을 굴려 실패 시 8d6 화염 피해를, 성공 시 절반의 피해를 입습니다.
}}

몬스터 스탯 블록

{{monster,frame
# 스켈레톤 (Skeleton)
*중형 언데드, 질서 악*

**방어도** : 13 (천갑)
**생명력** : 13 (2d8 + 4)
**이동 속도** : 30피트

| 근력 | 민첩 | 건강 | 지능 | 지혜 | 매력 |
|:---:|:---:|:---:|:---:|:---:|:---:|
| 10 | 14 | 15 | 6 | 8 | 5 |

**취약점** : 관타
**면역** : 독
**감각** : 암흑시야 60피트, 수동 지각 9
**언어** : 생전 알던 언어 이해(말 못함)

**단검** : 근접 무기 공격: +4 적중, 도달 5피트, 목표물 하나. 적중 시 1d4 + 2 관통 피해.
}}

사용자 정의 스니펫 확장

프로젝트의 기본 스니펫 외에도 사용자 정의 스니펫을 등록하여 워크플로우를 최적화할 수 있습니다. 에디터의 스니펫 뷰에서 'User Snippets' 섹션을 수정하면 되며, 이 데이터는 로컬 스토리지 또는 사용자 데이터 디렉토리에 JSON/JS 객체 형태로 직렬화되어 저장됩니다. 커스텀 스니펫을 작성할 때는 themes/V3/5ePHB/snippets.js의 객체 스키마를 참조하여 name, desc, gen (생성 함수) 속성을 정확히 매핑해야 합니다.