dev-goraebap · Nov 10, 2026 · Nov 10, 2026
diff --git a/plugins/webcraft/dist/claude/plugins/webcraft/.claude-plugin/plugin.json b/plugins/webcraft/dist/claude/plugins/webcraft/.claude-plugin/plugin.json
@@ -1,6 +1,6 @@
 {
   "name": "webcraft",
-  "version": "0.10.0",
+  "version": "0.11.0",
   "description": "웹 플랫폼 개발 지침(프론트·디자인 시스템·백엔드·API·DB·아키텍처)과 프로젝트 연결",
   "author": {
     "name": "dev-goraebap"

diff --git a/plugins/webcraft/dist/claude/plugins/webcraft/package.json b/plugins/webcraft/dist/claude/plugins/webcraft/package.json
@@ -1,6 +1,6 @@
 {
   "name": "webcraft",
-  "version": "0.10.0",
+  "version": "0.11.0",
   "private": true,
   "type": "module"
 }
diff --git a/.../claude/plugins/webcraft/skills/design-system/references/composed-components.md b/.../claude/plugins/webcraft/skills/design-system/references/composed-components.md
@@ -18,6 +18,7 @@ arc42: "8.8"
 | 파일 올리기 칸 | 고르기·끌어 놓기·형식과 크기 확인 | [upload](https://github.com/dev-goraebap/dev.goraebap/tree/main/site/src/shared/ui/composites/upload) |
 | 상태 화면 | 빈 목록·결과 없음·없는 대상·실패의 그림과 문구 | [state](https://github.com/dev-goraebap/dev.goraebap/tree/main/site/src/shared/ui/composites/state), [기준](data-states.md) |
 | 본문 칸 | 종이 위의 리치 본문: 블록 메뉴·선택 서식 도구·표·미디어 | [editor](https://github.com/dev-goraebap/dev.goraebap/tree/main/site/src/shared/ui/composites/editor) |
+| 문서 편집기 | 종이(A4)로 나가는 문서: 상단 서식 막대·페이지 나누기·페이지 설정·머리말·바닥글·내보내기 | [document](https://github.com/dev-goraebap/dev.goraebap/tree/main/site/src/shared/ui/composites/document) |
 | 그룹 머리 | 그룹 이름·개수·접기, 스크롤에 붙는 띠 | [list-group](https://github.com/dev-goraebap/dev.goraebap/tree/main/site/src/shared/ui/composites/list-group) |
 
 구현이 없는 조합을 메뉴에 빈 항목으로 만들지 않습니다. 제품 고유 조합(아이콘 표시 고르기, 전역 검색 팔레트, 프로필 패널)은 프로젝트가 소유합니다.
@@ -102,3 +103,19 @@ HTML 임베드는 올린 HTML을 본문 안의 격리된 틀로 미리 봅니다
 떠 있는 메뉴(블록 메뉴·선택 서식 도구·`/` 목록·표 메뉴)는 그림자를 줄이고 1px 테두리로 구분합니다. 본문 속 인라인 코드는 바탕 없이 고정폭 글자에 옅은 밑줄로 보입니다.
 
 글자색·배경색은 테마 색에서 만든 값(CSS 변수)으로 저장해 라이트·다크를 따릅니다. 다른 곳에서 가져온 본문에 직접 지정한 색(hex)은 그대로 보이지만 테마를 따르지 않습니다.
+
+## 문서 편집기
+
+정의서·보고서·계약서처럼 종이(A4)로 나가는 문서를 쓰고 읽는 화면에 씁니다. 일반 제목·본문 양식은 본문 칸을 씁니다. 본문 칸과 달리 문서 편집기는 본문 위에 늘 붙은 상단 서식 막대(`EditorToolbar`)를 둡니다. 막대 순서는 확대/축소(− 배율 +), 되돌리기·다시 하기, 블록 종류, 굵게·기울임·밑줄·취소선·코드, 색, 링크, 정렬, 목록 3종, 넣기 메뉴(표·이미지·파일·코드·Mermaid·인용·구분선), 서식 지우기이며 오른쪽 끝에 문서 설정·페이지 모양·보기 전환을 둡니다. 막대는 한 줄에 두고 좁으면 줄을 바꿉니다. 가로 스크롤은 쓰지 않습니다. 메뉴를 열 때 스크롤바가 생겼다 사라지며 막대가 흔들리기 때문입니다. 위·아래 첨자와 들여쓰기는 선택 서식 도구의 더 보기와 Tab·Shift+Tab에 둡니다.
+
+보기는 "페이지"(쪽마다 나눠 보기)와 "페이지 없음"(나누지 않고 읽는 폭 한 열) 두 가지이며 이 용어로 부릅니다. 휴대폰은 늘 페이지 없음입니다. 문서 데이터(본문 JSON)는 페이지를 모릅니다. 페이지 나누기는 화면의 장식(간격)이며 저장하지 않으므로, 같은 본문을 다른 용지로 다시 나눌 수 있고 MCP·Markdown·버전 기능은 그대로 씁니다.
+
+페이지 설정(`PageSetup`)은 본문과 따로 문서에 저장합니다. 용지(A4·A5·Letter), 방향(세로·가로), 여백 네 방향(mm), 페이지 사이 간격(px), 머리말(왼쪽·오른쪽), 바닥글(왼쪽·가운데·오른쪽), 머리말·바닥글의 가장자리 거리(mm), 첫 페이지 다르게를 담습니다. 머리말·바닥글 글에는 `{page}`(이 페이지 번호)와 `{total}`(전체 페이지 수)을 씁니다. 편집 화면 오른쪽의 문서 설정 칸(탭: 문서 / 머리말 · 바닥글)에서 바꾸며, 바꾸면 쓴 내용과 실행 취소 기록을 지킨 채 다시 나눕니다. 페이지 모양(`PageLook`)은 보는 사람의 화면 설정이라 문서에 저장하지 않습니다. 연한 바탕(기본: 페이지 바깥을 테마에 맞춰 아주 옅게 다른 색으로 칠하고, 상세 안에서는 페이지 자체를 옅게 칠해 페이지 사이 틈으로 가름)과 구분선(같은 바탕에 페이지 사이에만 실선·점선·점·물결 가로선) 두 가지이며 다크 모드도 같습니다. 그림자는 다크에서 묻히므로 기대지 않습니다.
+
+페이지는 맨 위 블록 단위로 넘기고, 목록은 항목, 표는 행 단위로 넘깁니다. 4줄 이상인 문단은 넘치는 줄부터 다음 페이지로 잇고 3줄 이하는 통째로 넘기며, 첫 페이지에 한 줄만 남으면 통째로 넘깁니다. 제목은 다음 블록과 함께 넘어가 페이지 끝에 홀로 남지 않습니다. 한 페이지보다 큰 도표·코드·그림은 나누지 않습니다.
+
+편집 화면에서 머리말·바닥글 영역(종이 위·아래 여백 전체)에 포인터를 올리면 본문과의 경계에 점선, 옅은 바탕, 오른쪽에 연필 단추가 보입니다. 누르거나 두 번 누르면 설정 칸의 그 자리로 갑니다. 빈 영역에는 올렸을 때 "머리말 추가"가 보입니다. 종이 위에서 바로 글을 고치지는 않습니다. 편집 화면은 대화상자가 아니라 전체 페이지이며, 머리 줄은 본문 수정 화면(`BodyEditPage`)과 같이 페이지 수, 저장 상태, 저장(Ctrl/⌘+S), 취소(고친 것이 있으면 확인), 완료를 둡니다.
+
+읽기(상세) 화면은 다른 상세와 같은 `DetailLayout`입니다. 오른쪽 정보 칸에 페이지 항목(`PagesPill`, "N페이지")을 두고, 누르면 페이지 목록(번호와 대표 제목, 새 제목 없이 이어지는 페이지는 "이어짐")이 열려 고른 페이지로 갑니다. 왼쪽 페이지 목록 사이드바는 두지 않습니다. 내보내기(`ExportMenu`)는 내려받기 아이콘과 묶음 메뉴로, 내보내기 묶음(PDF로 저장, 인쇄)과 공유 묶음(링크 복사)을 둡니다. 서버에서 PDF를 만드는 앱은 `onSavePdf`를 넘기고, 주지 않으면 브라우저 인쇄 창을 엽니다. DOCX는 다루지 않습니다. 인쇄의 한계는 [인쇄와 PDF](print.md)를 따릅니다.
+
+부품은 `DocumentEditor`(편집), `DocumentView`(읽기), `model.ts`(모드·페이지 설정·페이지 모양), `pagination.ts`(Tiptap 확장 `Pagination`), `PageCanvas`(종이 틀·머리말·바닥글), `DocumentSettings`, `PageLookMenu`, `ZoomControl`, `ExportMenu`, `PagesPill`, `usePagedFrame`(편집과 읽기가 함께 쓰는 연결)입니다. 상단 막대는 composites/editor의 `EditorToolbar`입니다. 채택할 때는 composites/editor·popup·property를 함께 옮깁니다.
diff --git a/...dist/claude/plugins/webcraft/skills/design-system/references/pattern-catalog.md b/...dist/claude/plugins/webcraft/skills/design-system/references/pattern-catalog.md
@@ -15,7 +15,7 @@ arc42: "8.8"
 | Composites (조합 부품) | 다이얼로그·곁에 여는 내용·검색·필터·표시·속성·올리기·상태·본문 칸 | [조합 부품](composed-components.md), [다이얼로그](dialog.md), [검색·필터·표시](search-filter.md) | [composites](https://github.com/dev-goraebap/dev.goraebap/tree/main/site/src/shared/ui/composites) |
 | Layouts (레이아웃) | 앱 셸·사이드바·모바일 탐색·페이지 머리·툴바·목록·상세·설정·옆 패널 | [앱 셸](app-layout.md), [페이지 배치](layout-patterns.md) | [layouts](https://github.com/dev-goraebap/dev.goraebap/tree/main/site/src/shared/ui/layouts) |
 | Patterns (사용 패턴) | 여러 화면에 걸리는 동작 계약: 라우트 마스킹, 조건의 주소, 대기·빈 상태·실패, 행 클릭·키보드 | [라우트 마스킹](route-masking.md), [데이터 상태](data-states.md), [입력과 상호작용](interaction-patterns.md) | [patterns](https://github.com/dev-goraebap/dev.goraebap/tree/main/site/src/shared/ui/patterns) |
-| Playground (플레이그라운드) | 앞의 요소로 만든 기능 단위 앱 16개: 인박스, 이슈, 로그인, 문서함, 설정, 일정, 결재 신청, 권한 설정, 댓글·대화, 활동 기록, 가져오기, 오류·권한 페이지, 폴더 탐색, 태그 관리, 사용자 관리, 처음 시작 | [생성 양식](creation-form.md), [미리보기 패널](peek.md), 이 문서 | [playground](https://github.com/dev-goraebap/dev.goraebap/tree/main/site/samples/playground) |
+| Playground (플레이그라운드) | 앞의 요소로 만든 기능 단위 앱 17개: 인박스, 이슈, 로그인, 문서함, 설정, 일정, 결재 신청, 권한 설정, 댓글·대화, 활동 기록, 가져오기, 오류·권한 페이지, 폴더 탐색, 태그 관리, 사용자 관리, 처음 시작, 문서 편집기 | [생성 양식](creation-form.md), [미리보기 패널](peek.md), 이 문서 | [playground](https://github.com/dev-goraebap/dev.goraebap/tree/main/site/samples/playground) |
 
 Primitives와 Composites는 재사용 코드의 단위입니다. Layouts와 Patterns는 공간과 행동의 기준이며 더 큰 부품이라는 이유로 분류하지 않습니다. 기능 하나를 작은 앱 하나로 묶어 본뜰 수 있게 한 것은 Playground이고, 여러 앱이 함께 지키는 여는 방식·상태·조작이면 Patterns입니다. Playground는 앱마다 느낌이 확실히 다른 화면만 다루고 같은 모양의 화면은 한 앱에서만 다룹니다. Patterns의 견본은 따로 화면을 만들지 않고 Playground 앱을 그 상태로 띄웁니다. 기존 앱과 느낌이 다른 화면이 필요하면 Playground에 새 앱을 더합니다. 같은 구현을 여러 설명에서 참조하되 코드와 규칙의 원본은 한 곳에 둡니다. 파일 배치는 공식 FSD 지침에 맡기고 상태·캐시·URL·초안은 frontend 지침을 따릅니다. 접근성·반응형·키보드·문구는 모든 범주의 공통 검토 기준이며 [문구·본문과 검증](content-and-review.md)을 따릅니다.
 

diff --git a/.../webcraft/dist/claude/plugins/webcraft/skills/design-system/references/print.md b/.../webcraft/dist/claude/plugins/webcraft/skills/design-system/references/print.md
@@ -43,3 +43,9 @@ arc42: "8.7"
 ## 화면 전용 요소
 
 화면 전용 도구(복사·편집·크게 보기·내려받기 단추)는 인쇄에서 감춥니다. 편집기가 본문 끝에 늘 두는 빈 문단과 마지막 여백도 지웁니다. 쪽 끝에 걸치면 빈 쪽 하나가 더 생기기 때문입니다.
+
+## 페이지로 나눈 문서
+
+문서 편집기의 문서 보기는 인쇄할 때 앱 틀을 빼고 문서만 찍습니다(`data-print-root`). 페이지 설정의 용지·여백과 머리말·바닥글은 `@page` 규칙으로 씁니다. 종이 안 글자 크기는 앱 화면 크기와 관계없이 데스크톱 값으로 고정합니다. 인쇄할 때는 종이 폭이 휴대폰 글자 규칙을 켜기 때문입니다.
+
+브라우저 인쇄는 화면의 페이지 경계와 다를 수 있습니다. 이 환경의 Chrome에서는 인쇄의 글자 폭이 화면보다 약 2% 좁게 그려져 줄바꿈이 한 줄씩 달라졌고, 화면에서 넘긴 블록 앞의 강제 넘김을 따르지 않은 사례도 있었습니다. 화면과 같은 경계가 꼭 필요하면 서버에서 같은 조판으로 PDF를 만듭니다.
diff --git a/plugins/webcraft/dist/codex/plugins/webcraft/.codex-plugin/plugin.json b/plugins/webcraft/dist/codex/plugins/webcraft/.codex-plugin/plugin.json
@@ -1,6 +1,6 @@
 {
   "name": "webcraft",
-  "version": "0.10.0",
+  "version": "0.11.0",
   "description": "웹 플랫폼 개발 지침(프론트·디자인 시스템·백엔드·API·DB·아키텍처)과 프로젝트 연결",
   "author": {
     "name": "dev-goraebap"

diff --git a/plugins/webcraft/dist/codex/plugins/webcraft/package.json b/plugins/webcraft/dist/codex/plugins/webcraft/package.json
@@ -1,6 +1,6 @@
 {
   "name": "webcraft",
-  "version": "0.10.0",
+  "version": "0.11.0",
   "private": true,
   "type": "module"
 }
diff --git a/...t/codex/plugins/webcraft/skills/design-system/references/composed-components.md b/...t/codex/plugins/webcraft/skills/design-system/references/composed-components.md
@@ -18,6 +18,7 @@ arc42: "8.8"
 | 파일 올리기 칸 | 고르기·끌어 놓기·형식과 크기 확인 | [upload](https://github.com/dev-goraebap/dev.goraebap/tree/main/site/src/shared/ui/composites/upload) |
 | 상태 화면 | 빈 목록·결과 없음·없는 대상·실패의 그림과 문구 | [state](https://github.com/dev-goraebap/dev.goraebap/tree/main/site/src/shared/ui/composites/state), [기준](data-states.md) |
 | 본문 칸 | 종이 위의 리치 본문: 블록 메뉴·선택 서식 도구·표·미디어 | [editor](https://github.com/dev-goraebap/dev.goraebap/tree/main/site/src/shared/ui/composites/editor) |
+| 문서 편집기 | 종이(A4)로 나가는 문서: 상단 서식 막대·페이지 나누기·페이지 설정·머리말·바닥글·내보내기 | [document](https://github.com/dev-goraebap/dev.goraebap/tree/main/site/src/shared/ui/composites/document) |
 | 그룹 머리 | 그룹 이름·개수·접기, 스크롤에 붙는 띠 | [list-group](https://github.com/dev-goraebap/dev.goraebap/tree/main/site/src/shared/ui/composites/list-group) |
 
 구현이 없는 조합을 메뉴에 빈 항목으로 만들지 않습니다. 제품 고유 조합(아이콘 표시 고르기, 전역 검색 팔레트, 프로필 패널)은 프로젝트가 소유합니다.
@@ -102,3 +103,19 @@ HTML 임베드는 올린 HTML을 본문 안의 격리된 틀로 미리 봅니다
 떠 있는 메뉴(블록 메뉴·선택 서식 도구·`/` 목록·표 메뉴)는 그림자를 줄이고 1px 테두리로 구분합니다. 본문 속 인라인 코드는 바탕 없이 고정폭 글자에 옅은 밑줄로 보입니다.
 
 글자색·배경색은 테마 색에서 만든 값(CSS 변수)으로 저장해 라이트·다크를 따릅니다. 다른 곳에서 가져온 본문에 직접 지정한 색(hex)은 그대로 보이지만 테마를 따르지 않습니다.
+
+## 문서 편집기
+
+정의서·보고서·계약서처럼 종이(A4)로 나가는 문서를 쓰고 읽는 화면에 씁니다. 일반 제목·본문 양식은 본문 칸을 씁니다. 본문 칸과 달리 문서 편집기는 본문 위에 늘 붙은 상단 서식 막대(`EditorToolbar`)를 둡니다. 막대 순서는 확대/축소(− 배율 +), 되돌리기·다시 하기, 블록 종류, 굵게·기울임·밑줄·취소선·코드, 색, 링크, 정렬, 목록 3종, 넣기 메뉴(표·이미지·파일·코드·Mermaid·인용·구분선), 서식 지우기이며 오른쪽 끝에 문서 설정·페이지 모양·보기 전환을 둡니다. 막대는 한 줄에 두고 좁으면 줄을 바꿉니다. 가로 스크롤은 쓰지 않습니다. 메뉴를 열 때 스크롤바가 생겼다 사라지며 막대가 흔들리기 때문입니다. 위·아래 첨자와 들여쓰기는 선택 서식 도구의 더 보기와 Tab·Shift+Tab에 둡니다.
+
+보기는 "페이지"(쪽마다 나눠 보기)와 "페이지 없음"(나누지 않고 읽는 폭 한 열) 두 가지이며 이 용어로 부릅니다. 휴대폰은 늘 페이지 없음입니다. 문서 데이터(본문 JSON)는 페이지를 모릅니다. 페이지 나누기는 화면의 장식(간격)이며 저장하지 않으므로, 같은 본문을 다른 용지로 다시 나눌 수 있고 MCP·Markdown·버전 기능은 그대로 씁니다.
+
+페이지 설정(`PageSetup`)은 본문과 따로 문서에 저장합니다. 용지(A4·A5·Letter), 방향(세로·가로), 여백 네 방향(mm), 페이지 사이 간격(px), 머리말(왼쪽·오른쪽), 바닥글(왼쪽·가운데·오른쪽), 머리말·바닥글의 가장자리 거리(mm), 첫 페이지 다르게를 담습니다. 머리말·바닥글 글에는 `{page}`(이 페이지 번호)와 `{total}`(전체 페이지 수)을 씁니다. 편집 화면 오른쪽의 문서 설정 칸(탭: 문서 / 머리말 · 바닥글)에서 바꾸며, 바꾸면 쓴 내용과 실행 취소 기록을 지킨 채 다시 나눕니다. 페이지 모양(`PageLook`)은 보는 사람의 화면 설정이라 문서에 저장하지 않습니다. 연한 바탕(기본: 페이지 바깥을 테마에 맞춰 아주 옅게 다른 색으로 칠하고, 상세 안에서는 페이지 자체를 옅게 칠해 페이지 사이 틈으로 가름)과 구분선(같은 바탕에 페이지 사이에만 실선·점선·점·물결 가로선) 두 가지이며 다크 모드도 같습니다. 그림자는 다크에서 묻히므로 기대지 않습니다.
+
+페이지는 맨 위 블록 단위로 넘기고, 목록은 항목, 표는 행 단위로 넘깁니다. 4줄 이상인 문단은 넘치는 줄부터 다음 페이지로 잇고 3줄 이하는 통째로 넘기며, 첫 페이지에 한 줄만 남으면 통째로 넘깁니다. 제목은 다음 블록과 함께 넘어가 페이지 끝에 홀로 남지 않습니다. 한 페이지보다 큰 도표·코드·그림은 나누지 않습니다.
+
+편집 화면에서 머리말·바닥글 영역(종이 위·아래 여백 전체)에 포인터를 올리면 본문과의 경계에 점선, 옅은 바탕, 오른쪽에 연필 단추가 보입니다. 누르거나 두 번 누르면 설정 칸의 그 자리로 갑니다. 빈 영역에는 올렸을 때 "머리말 추가"가 보입니다. 종이 위에서 바로 글을 고치지는 않습니다. 편집 화면은 대화상자가 아니라 전체 페이지이며, 머리 줄은 본문 수정 화면(`BodyEditPage`)과 같이 페이지 수, 저장 상태, 저장(Ctrl/⌘+S), 취소(고친 것이 있으면 확인), 완료를 둡니다.
+
+읽기(상세) 화면은 다른 상세와 같은 `DetailLayout`입니다. 오른쪽 정보 칸에 페이지 항목(`PagesPill`, "N페이지")을 두고, 누르면 페이지 목록(번호와 대표 제목, 새 제목 없이 이어지는 페이지는 "이어짐")이 열려 고른 페이지로 갑니다. 왼쪽 페이지 목록 사이드바는 두지 않습니다. 내보내기(`ExportMenu`)는 내려받기 아이콘과 묶음 메뉴로, 내보내기 묶음(PDF로 저장, 인쇄)과 공유 묶음(링크 복사)을 둡니다. 서버에서 PDF를 만드는 앱은 `onSavePdf`를 넘기고, 주지 않으면 브라우저 인쇄 창을 엽니다. DOCX는 다루지 않습니다. 인쇄의 한계는 [인쇄와 PDF](print.md)를 따릅니다.
+
+부품은 `DocumentEditor`(편집), `DocumentView`(읽기), `model.ts`(모드·페이지 설정·페이지 모양), `pagination.ts`(Tiptap 확장 `Pagination`), `PageCanvas`(종이 틀·머리말·바닥글), `DocumentSettings`, `PageLookMenu`, `ZoomControl`, `ExportMenu`, `PagesPill`, `usePagedFrame`(편집과 읽기가 함께 쓰는 연결)입니다. 상단 막대는 composites/editor의 `EditorToolbar`입니다. 채택할 때는 composites/editor·popup·property를 함께 옮깁니다.