ypshim/Pier_v1
1
0 Fork 0
generated from disong/ITAM-test
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

chore(rebar): Pier_T_rebar 작업 폴더 초기 구성 및 외부 의존 파일 통합

Browse Source 
- Code\rebar_pipeline, review_pipeline, pier-program을 정션에서 실제 폴더로 전환
- Code\rhino_mcp 및 CLAUDE_rhino배경.md 추가, .mcp.json은 PYTHONPATH로 새 위치 사용
- pier-program 내부 .git 제거(이력은 backup\pier-program_20261028.bundle에 보관)
- worktree 가이드 반영(CLAUDE.local.md, HANDOFF.md)
- D:\Rhino-MCP 경로 참조를 새 위치로 치환

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
This commit is contained in:
ahnyongjooandClaude Sonnet 5.5 committed 2026-10-28 11:20:18 +09:00
commit 964a841de1
3978 files changed
+58013356
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

RAG/design system_v0.1.1/.obsidian/app.json
Vendored
+1
View File
@@ -0,0 +1 @@
{}
RAG/design system_v0.1.1/.obsidian/appearance.json
Vendored
+1
View File
@@ -0,0 +1 @@
{}
RAG/design system_v0.1.1/.obsidian/core-plugins.json
Vendored
+33
View File
@@ -0,0 +1,33 @@
{
"file-explorer": true,
"global-search": true,
"switcher": true,
"graph": true,
"backlink": true,
"canvas": true,
"outgoing-link": true,
"tag-pane": true,
"footnotes": false,
"properties": true,
"page-preview": true,
"daily-notes": true,
"templates": true,
"note-composer": true,
"command-palette": true,
"slash-command": false,
"editor-status": true,
"bookmarks": true,
"markdown-importer": false,
"zk-prefixer": false,
"random-note": false,
"outline": true,
"word-count": true,
"slides": false,
"audio-recorder": false,
"workspaces": false,
"file-recovery": true,
"publish": false,
"sync": true,
"bases": true,
"webviewer": false
}
RAG/design system_v0.1.1/.obsidian/workspace.json
Vendored
+199
View File
@@ -0,0 +1,199 @@
{
"main": {
"id": "50659ec8d237aee1",
"type": "split",
"children": [
{
"id": "61298ceaa380d449",
"type": "tabs",
"children": [
{
"id": "a533b202da06f4c0",
"type": "leaf",
"state": {
"type": "markdown",
"state": {
"file": "A3/module.a3-explainer.md",
"mode": "source",
"source": false
},
"icon": "lucide-file",
"title": "module.a3-explainer"
}
}
]
}
],
"direction": "vertical"
},
"left": {
"id": "e5274f025b193def",
"type": "split",
"children": [
{
"id": "f9356b4dcd6ecdf2",
"type": "tabs",
"children": [
{
"id": "3f6a08ccbc1a1eff",
"type": "leaf",
"state": {
"type": "file-explorer",
"state": {
"sortOrder": "alphabetical",
"autoReveal": false,
"showSearch": false,
"searchQuery": ""
},
"icon": "lucide-folder-closed",
"title": "파일 탐색기"
}
},
{
"id": "917b80bc7d001ecb",
"type": "leaf",
"state": {
"type": "search",
"state": {
"query": "",
"matchingCase": false,
"explainSearch": false,
"collapseAll": false,
"extraContext": false,
"sortOrder": "alphabetical"
},
"icon": "lucide-search",
"title": "검색"
}
},
{
"id": "523de3f24966071d",
"type": "leaf",
"state": {
"type": "bookmarks",
"state": {},
"icon": "lucide-bookmark",
"title": "북마크"
}
}
]
}
],
"direction": "horizontal",
"width": 300
},
"right": {
"id": "1da212a11b3a8462",
"type": "split",
"children": [
{
"id": "2c31af8f8a40aa32",
"type": "tabs",
"children": [
{
"id": "de5dbb87c9e15eb1",
"type": "leaf",
"state": {
"type": "backlink",
"state": {
"file": "Design.md",
"collapseAll": false,
"extraContext": false,
"sortOrder": "alphabetical",
"showSearch": false,
"searchQuery": "",
"backlinkCollapsed": false,
"unlinkedCollapsed": true
},
"icon": "links-coming-in",
"title": "Design 의 백링크"
}
},
{
"id": "62b5bdd1359f6421",
"type": "leaf",
"state": {
"type": "outgoing-link",
"state": {
"file": "Design.md",
"linksCollapsed": false,
"unlinkedCollapsed": true
},
"icon": "links-going-out",
"title": "Design 의 나가는 링크"
}
},
{
"id": "df2d4cdffe4c7e23",
"type": "leaf",
"state": {
"type": "tag",
"state": {
"sortOrder": "frequency",
"useHierarchy": true,
"showSearch": false,
"searchQuery": ""
},
"icon": "lucide-tags",
"title": "태그"
}
},
{
"id": "0de38a8e52053ee3",
"type": "leaf",
"state": {
"type": "all-properties",
"state": {
"sortOrder": "frequency",
"showSearch": false,
"searchQuery": ""
},
"icon": "lucide-archive",
"title": "모든 속성"
}
},
{
"id": "2087c027da5773af",
"type": "leaf",
"state": {
"type": "outline",
"state": {
"file": "Design.md",
"followCursor": false,
"showSearch": false,
"searchQuery": ""
},
"icon": "lucide-list",
"title": "Design 의 개요"
}
}
]
}
],
"direction": "horizontal",
"width": 300,
"collapsed": true
},
"left-ribbon": {
"hiddenItems": {
"switcher:빠른 전환기 열기": false,
"graph:그래프 뷰 열기": false,
"canvas:새 캔버스 만들기": false,
"daily-notes:오늘의 일일 노트 열기": false,
"templates:템플릿 삽입": false,
"command-palette:명령어 팔레트 열기": false,
"bases:새 베이스 생성하기": false
}
},
"active": "a533b202da06f4c0",
"lastOpenFiles": [
"공유본_EbI하반기_이민지_2026-08-27_v0.1.00.md",
"검측시스템_UI개선_회의록_2026-08-12 1.md",
"검측시스템_UI개선_회의록_2026-08-12.md",
"무제.md",
"A3/module.a3-explainer.md",
"A3/module.a3-handbook.md",
"Design.md",
"design.brand.md"
]
}
RAG/design system_v0.1.1/.trash/공유본_EbI하반기_이민지_2026-08-27_v0.1.00.md
+204
View File
@@ -0,0 +1,204 @@
# 2026년 하반기 대화(EbI) 사전 작성지 — 이민지 연구원
| 구분 | 내용 |
| :--- | :--- |
| 작성자 | 이민지 연구원 |
| 면담자 | CM기획팀 팀장 조선두 |
| 면담일시 | ( ) |
| 면담장소 | ( ) |
| 회신 기한 | ( ) |
---
## 작성 안내
- 이번 대화(EbI)는 **평가가 아니라 지난 기간을 함께 돌아보는 자리**입니다. 눈에 보이는 성과뿐 아니라 업무 개선, 협업과 소통, 문제 예방과 해결도 모두 가치로 봅니다.
- 아래 질문에 **미리 답을 적어 주시면 면담 시간을 크게 줄일 수 있습니다.** 적어 주신 내용을 바탕으로 대화합니다.
- 부담 없이 편한 범위에서 쓰시면 됩니다. **답하기 어려운 항목은 비워 두셔도 됩니다.** 잘 안 됐던 일도 원인을 같이 찾기 위한 것이니 솔직하게 적어 주세요.
- 분량 제한은 없습니다. 한두 줄이어도 괜찮습니다.
---
## 주제 ① 내가 만들고 있는 핵심 가치와 영향력
**Q1.** 지난 기간 본인의 일이 팀과 회사에 만든 가장 의미 있는 도움이나 변화는 무엇인가요?
**답변:**
(여기에 작성해 주세요)
---
**Q2.** 그 경험을 통해 무엇이 달라졌고, 본인의 어떤 강점이 발휘됐나요?
**답변:**
(여기에 작성해 주세요)
---
**Q3.** 이를 보여주는 사례와 앞으로 더 도전해 보고 싶은 점이 있나요?
**답변:**
(여기에 작성해 주세요)
---
**Q4.** 7월 면담에서 "AI 활용이 익숙하지 않다"고 하셨는데, 지금은 서브에이전트 4개에 병렬 분담시키고 그 결과를 검수해 누락 4건을 직접 잡아내는 수준입니다. 두 달 사이에 무엇이 바뀐 건가요?
**답변:**
(여기에 작성해 주세요)
---
**Q5.** 8월 25일 하루에 시공상세도 앱, 해외철근 조사, 검측모듈까지 세 계열 22건을 처리하셨습니다. 이 중 지금 돌아봤을 때 회사에 가장 오래 남을 산출물은 무엇이라고 보시나요? 그것이 다른 팀원에게 어떻게 전달되면 좋을까요?
**답변:**
(여기에 작성해 주세요)
---
## 주제 ② 가치로 이어지지 못한 배경과 장애요인
**Q1.** 기대한 만큼 가치로 이어지지 못한 부분이 있다면, 어떤 배경이나 걸림돌이 있었나요?
**답변:**
(여기에 작성해 주세요)
---
**Q2.** 그 과정에서 더 필요했던 역량이나 경험이 있었나요?
**답변:**
(여기에 작성해 주세요)
---
**Q3.** 역할·책임, 보고·의사결정, 권한·자원, 협업환경이나 현재 역할의 적합성 중 영향을 준 부분이 있었나요?
**답변:**
(여기에 작성해 주세요)
---
**Q4.** 08-25 검측모듈 작업에서 v0.1.10 → v0.4.00 → v0.5.00 → v0.6.00까지 하루에 네 번 재작업이 있었고, 마지막에 "강지영 님의 08-19 원본분석 v0.1.17을 참조하라"는 지시가 작업 도중에 들어왔습니다. 작업 시작 시점에 그 문서의 존재를 알 수 있는 경로가 있었나요? 없었다면 어디가 끊겨 있었다고 보시나요?
**답변:**
(여기에 작성해 주세요)
---
**Q5.** 08-25 하루에 22건, 시간당 2~3건 페이스였습니다. 그날 어땠나요? 이 속도가 지속 가능한가요? **솔직하게 말씀해 주세요 — 조정하는 게 제 일입니다.**
**답변:**
(여기에 작성해 주세요)
---
**Q6.** `목록_…_v0.2.0.md`는 파일명은 v0.2.0인데 내부 이력은 v0.5.02까지 가 있습니다. 본인은 "기존 파일명 규칙 관례 존중"이라 적으셨는데, 어떤 관례를 말씀하신 건가요? 규칙이 서로 부딪히면 제가 정리하겠습니다.
**답변:**
(여기에 작성해 주세요)
---
## 주제 ③ 팀과 회사가 함께 살펴볼 지원
**Q1.** 앞으로 본인의 역량을 더 잘 펼치고 성장하려면 팀과 회사가 함께 살펴볼 지원은 무엇인가요? 줄이거나 바꿔야 할 걸림돌도 있나요?
**답변:**
(여기에 작성해 주세요)
---
**Q2.** 현재 일하는 방식에서 바꾸거나 보완하면 좋을 점이 있나요?
**답변:**
(여기에 작성해 주세요)
---
**Q3.** 본인이 시도할 일과, 팀장·팀·회사가 지원할 역할·기회·도구·시스템·권한·자원은 무엇인가요?
**답변:**
(여기에 작성해 주세요)
---
**Q4.** 업무량이 팀에서 압도적으로 많습니다(08-11 이후 85건, 다음이 22건). 7월에는 "적당하다"고 하셨는데 지금도 그런가요? 줄이거나 다른 사람에게 넘길 일이 있다면 무엇인가요? 08-25에 검측모듈을 얹은 것이 무리였나요?
**답변:**
(여기에 작성해 주세요)
---
**Q5.** 우선순위가 바뀔 때 제가 어떻게 전달하면 덜 흔들릴까요?
**답변:**
(여기에 작성해 주세요)
---
**Q6.** 팀 이동 3개월차인데, 앞으로 어떤 영역을 더 맡아 보고 싶으신가요? 필요한 경험·교육·권한이 있나요?
**답변:**
(여기에 작성해 주세요)
---
**Q7.** 저(팀장)에게 바라는 점 — 제가 더 자주 확인해야 할 지점, 또는 덜 개입해야 할 지점이 있나요?
**답변:**
(여기에 작성해 주세요)
---
## 그 밖에 나누고 싶은 내용 (편한 범위)
**Q1.** 건강·근태·개인 사정 중 팀이 알고 있으면 좋을 내용이 있나요? (7월에는 "건강 양호"라 하셨습니다)
**답변:**
(여기에 작성해 주세요)
---
**Q2.** 팀에 적응하면서 불편하거나 어색한 부분이 남아 있나요?
**답변:**
(여기에 작성해 주세요)
---
**Q3.** 다른 팀원과의 협업에서 조정이 필요한 부분이 있나요? (강지영 선임과의 인계 건 포함)
**답변:**
(여기에 작성해 주세요)
---
## 그 밖에 하고 싶은 말
(질문과 상관없이 전하고 싶은 내용이 있으면 자유롭게 적어 주세요)
---
작성일: 2026-08-27 / 작성자: 이민지 연구원
RAG/design system_v0.1.1/A3/module.a3-explainer.md
+304
View File
@@ -0,0 +1,304 @@
# Prism — M5 A3 설명자료 실행 명세 (Layer 3)
| 버전 | 수정일 | 수정자 | 주요 변경 내용 | 비고 |
| :--- | :--- | :--- | :--- | :--- |
| v0.1.0 | 2026-07-29 | HMCM | 신규 제정 — A3 가로 설명자료(1면=1주제) 실행 명세. 파생 절차 8단계 완료, 구조 검증 12항 통과 | `active` 등록 (modules §4.4) |
| 메타 | 값 |
| :--- | :--- |
| 모듈 | **M5 `a3-explainer`** — A3 설명자료 |
| 계층 | Layer 3 (실행 명세 · **자기완결형**) |
| 대상 산출물 | A3 가로 1~N면 설명자료 — 개념 설명·프로세스 안내·비교 분석·보고 요약 등 "**1면 = 1주제**" 형식의 인쇄물 |
| 상위 의존 | `Design.md` 0.1.1 · foundations 0.1.2 · medium.print 0.1.1 · components 0.1.1 · tokens.json 0.1.1 |
| 자기완결 원칙 | **본 파일 단독으로 제작 가능**하도록 필요한 정본 값을 전부 수록했다. 값의 SSOT는 `design.tokens.json`이며, 본 파일과 충돌 시 JSON이 우선한다 (GV-7) |
```yaml
module:
id: a3-explainer
name: A3 설명자료
version: 0.1.0
status: active
brand: saman
medium: print
dual_medium: false # 투사 겸용 시 true → §8 상향표 적용
format: A3-landscape # 420 × 297 mm
columns: 12
type_set: expressive
component_count: 17
variant_count: 31
patterns: [p1-cover, p2-context, p3-process, p4-compare, p5-body-side, p6-data, p7-conclusion]
depends_on: { foundations: 0.1.2, medium.print: 0.1.1, components: 0.1.1 }
```
---
## 1. 적용 조건
| 적용 | 제외 |
| :--- | :--- |
| A3 가로 인쇄 설명자료 (1면 = 1주제) | 다면 연속 편람·색인 필요 문서 → M1 (A3 시공상세도 편람, 착수 예정) |
| 회의 배포용 요약·브리핑 시트 | 발표 전용 슬라이드 → M2 (`ppt/`) |
| 프로세스·개념·비교 설명 도판 자료 | 화면 열람 전용 문서 → M3 (`webapp/`) |
**선행 요건**: 없음 (본 파일 단독 제작 가능). **겸용 선언**: 인쇄물을 회의에서 투사도 하는 경우 §8을 적용한다 (PM-3).
---
## 2. 캔버스·그리드 (정본 값)
### 2.1 판면
```
판형 420 × 297 mm (A3 가로) 블리드 3mm
좌우 여백 24 mm 상단 여백 21 mm 하단 여백 24 mm
콘텐츠 372 × 252 mm 베이스라인 6 mm × 42행
컬럼 12개 × 25.5 mm 거터 6 mm
정합 12×25.5 + 11×6 = 372 ✓ (잔차 0)
```
### 2.2 수직 존 (전 좌표 6mm 격자 정합)
```
0 ┌────────────────────────────────────────┐
│ 상단 여백 21mm │
21 ├────────────────────────────────────────┤
│ 헤더 존 30mm — 아이브로·제목·메타·구분선 │ (5행)
51 ├────────────────────────────────────────┤
│ ↕ 6mm │
57 ├────────────────────────────────────────┤
│ 콘텐츠 밴드 192mm (32행) │
249 ├────────────────────────────────────────┤
│ ↕ 6mm │
255 ├────────────────────────────────────────┤
│ 푸터 존 18mm — 문서명·출처·면번호·버전 │ (3행)
273 ├────────────────────────────────────────┤
│ 하단 여백 24mm │
297 └────────────────────────────────────────┘
```
| ID | 규칙 |
| :--- | :--- |
| **A3E-1** | 콘텐츠 요소는 밴드(57~249mm)를 벗어나지 않는다. 푸터 존은 불가침이다 |
| **A3E-2** | 존 좌표는 컬럼 경계에, 내부 간격은 스페이싱 토큰에 스냅한다 (PF-1) |
| **A3E-3** | 콘텐츠는 밴드를 위→아래로 채운다. 하단 빈 면적 < 25% (WS-3) |
### 2.3 존 폭 (허용 분할 — 정본)
| 분할 | 존 폭 (mm) | 용도 |
| :--- | :--- | :--- |
| `12` | 372 | 표지, 전폭 도판·표 |
| `6:6` | 183 / 183 | 비교·대조 |
| `8:4` | **246** / 120 | 본문 + 사이드바 |
| `4:8` | 120 / **246** | 내비·요약 레일 + 본문 |
| `4:4:4` | 120 × 3 | 3요소 병렬 |
| `3:3:6` | 88.5 / 88.5 / 183 | 맥락 2 + 결론 1 |
| `3:3:3:3` | 88.5 × 4 | 4단계 프로세스 |
> 8col 존 폭은 **246mm**가 정본이다 (8×25.5+7×6). v0.1.0의 249는 오계산으로 v0.1.1에서 정정되었다.
---
## 3. 타입 바인딩 (base 10pt, 인쇄 단독)
| 역할 | pt | 행간 | 행 pt | 격자 소요 | 웨이트 | 용도 |
| :--- | ---: | :-: | ---: | :-: | :--- | :--- |
| `caption` | 7.9 | 1.55 | 12.2 | 1 | Medium 500 | 캡션·출처·범례 |
| `body-sm` | 8.9 | 1.70 | 15.1 | 1 | Regular 400 | 표 셀·보조 본문 |
| **`body`** | **10.0** | **1.70** | **17.0 (=6mm)** | **1** | Regular 400 | **본문** |
| `body-lg` | 11.3 | 1.70 | 19.2 | 2 | Regular 400 | 리드 문장 |
| `title-sm` | 12.7 | 1.50 | 19.0 | 2 | Medium 500 | 카드 제목·소제목 |
| `title` | 16.0 | 1.50 | 24.0 | 2 | Bold 700 | 절 제목 |
| `title-lg` | 20.3 | 1.50 | 30.4 | 2 | Bold 700 | 면 제목 |
| `display` | 28.9 | 1.25 | 36.1 | 3 | Regular 400 | 히어로 헤드라인 (표지) |
| `display-lg` | 41.1 | 1.25 | 51.4 | 4 | Regular 400 | 표지 전용 |
- 서체 **Pretendard** (임베드: `assets/fonts/PretendardVariable.ttf`). 표·수치는 등폭 숫자(tnum) 강제
- 하한: 본문 ≥ 9.0pt · 캡션 ≥ 7.5pt · 절대 ≥ 7.0pt · 역상 ≥ 10.0pt + Bold
- 자간: 음수 자간 사용 없음. `.label` +0.12em / `.eyebrow` +0.18em
- **measure**: 본문은 4col(120mm = 34.0em) 또는 3col(88.5mm = 25.1em) 존에만. 6col(51.9em)·전폭(105.4em)에 연속 본문 금지
## 스페이싱·획 (정본)
| 토큰 | mm | 용도 | | 획 토큰 | mm | 용도 |
| :--- | ---: | :--- | :-: | :--- | ---: | :--- |
| `space.025` | 1.5 | 미세 간격 | | `hairline` | 0.20 | 카드 보더·구분선 |
| `space.050` | 3 | 인라인 간격 | | `regular` | 0.40 | 표 외곽·강조 보더 |
| `space.100` | 6 | 텍스트 블록·거터 | | `bold` | 0.60 | 구조 강조선 |
| `space.150` | 9 | 문단 간격 | | `icon` | 0.80 | 아이콘 획 |
| `space.200` | 12 | 카드 패딩 | | `connector` | 1.00 | 프로세스 커넥터 |
| `space.300` | 18 | 블록 간격 | | 하한 | 0.15 | 역상 선 0.25 |
| `space.400` | 24 | 존 간격·좌우 여백 | | 반경 md | 3 | 카드 (sm 1.5 / lg 4.5) |
---
## 4. 색 (등록 페어만 사용 — 미등록 조합 금지)
### 4.1 팔레트 정본 (brand saman)
| 토큰 | HEX | GRADE | 역할 |
| :--- | :--- | :-: | :--- |
| `green` | `#1F524B` | 69 | base — 제목·구조선·헤더 면 |
| `orange` | `#D05C26` | 47 | accent — **1면당 최대 2개 국소 강조** |
| `brown` | `#474235` | 72 | ground — 본문·라벨·보더 |
| `sand` | `#F4F3F0` | 4 | 배경 (순백 전면 금지) |
| `obsidian` | `#111111` | 95 | 강조면(반전)·다크 |
| `subtle` | `#D3D3D3` | 15 | 보조 (다크면 위) |
| `white` | `#FFFFFF` | 0 | 카드 면·다크면 텍스트 |
### 4.2 본 모듈 사용 페어 (실측 검증 완료)
| 용도 | 전경 / 배경 | 실측 | 판정 |
| :--- | :--- | :---: | :--- |
| 본문 | brown / sand | 9.02 | AAA ✓ |
| 제목·구조 | green / sand | 8.00 | AAA ✓ |
| 카드 위 본문 | brown / white | 10.01 | AAA ✓ |
| 카드 위 제목 | green / white | 8.87 | AAA ✓ |
| 그린 면 위 | white / green | 8.87 | AAA ✓ |
| 반전(강조) 면 위 | sand / obsidian | 17.02 | AAA ✓ |
| 대형 악센트 | orange / sand·white | 3.61 · 4.01 | **대형 전용** (title-sm 이상) |
| **금지** | green / obsidian | 2.13 | **✗ 텍스트 금지** (면·도형만) |
- 상태색 4종(✓ 권장 `#005A4E` / ✕ 금지 `#8F2A11` / ▲ 주의 `#6B4A00` / ▣ 참고 `#0A4E86` + 각 container) — **기호 생략 금지**, 악센트 카운트 제외
- 대비 목표 **AAA (ΔG ≥ 70)**. 그림자·알파·그라디언트 **금지**. 본문 텍스트는 **100% K 단독** 인쇄
---
## 5. 페이지 패턴 (7종 — 콘텐츠 유형 매핑)
| ID | 분할 | 존 구성 (좌→우) | 결론 존 | 적용 콘텐츠 |
| :--- | :--- | :--- | :--- | :--- |
| **P1 표지** | `12` | hero(display-lg·강조어 1)+메타 | hero | 표제·문서 정보 |
| **P2 개요·맥락** | `4:8` | ①toc·scope·stat ②본문(2단)+mediaframe | ②하단 principle | 배경 설명·현황 |
| **P3 프로세스** | `3:3:3:3` | stagecard×4 + connector (귀결만 악센트) | 최종 단계 | 절차·단계 설명 |
| **P4 비교** | `6:6` | 좌 card/table ↔ 우 card/table (directive pair 허용) | 하단 전폭 principle | 대안 비교·전후 대조 |
| **P5 본문+사이드** | `8:4` | ①본문 2단(각 4col 상당)+도판 ②specsheet·badge·xref | ②상단 stat | 상세 해설 |
| **P6 데이터** | `3:3:6` | ①②stat·card ③chartframe(또는 table) | ③캡션 결론 | 수치·추이 제시 |
| **P7 결론·지침** | `4:4:4` | directive 3매(또는 card 3매)+전폭 principle | principle | 지침·요약·후속 조치 |
| ID | 규칙 |
| :--- | :--- |
| **PT-A1** | 1면 = 패턴 1개. 패턴 혼용 시 상하 밴드를 분할하되 분할선은 컬럼 경계·6mm 격자에 스냅한다 |
| **PT-A2** | 결론 존은 면당 **정확히 1개** (PD-1). `principle`은 면당 1개 |
| **PT-A3** | 악센트(orange) 사용 개수: 아이브로 틱 + 귀결 커넥터 + 강조어 합산 **1면당 ≤ 2** |
| **PT-A4** | 도판·표가 면의 40% 이상이면 본문을 3col(4단 상당) 고밀도로 내린다 (CL-2) |
---
## 6. 컴포넌트 선별 (17종 / 변형 31종)
| 컴포넌트 | 변형 수 | 본 모듈 사용 규정 |
| :--- | :-: | :--- |
| `eyebrow` | 2 | 헤더 존 내 1개. 라벨 ≤ 20자 |
| `header` | 1 | 제목 ≤ 25자(1줄, 최대 40자 2줄). 메타 4슬롯: 문서분류·개정상태·대상·승인단계 |
| `rule` | 1 | 헤더 하단 구분선 (hairline) |
| `footer` | 1 | 좌: 문서명 / 우: 면번호·버전·발행일 |
| `card` | 4 | base·emphasis·prominent·quiet. 제목 ≤ 20자, 본문 ≤ 120자, 중첩 ≤ 2 |
| `stagecard` | 3 | base·highlight(1개)·optional. 단계 3~5개 |
| `connector` | 1 | 귀결 커넥터만 악센트 |
| `principle` | 1 | 면당 1개. 키커 ≤ 12자, 진술 ≤ 80자 |
| `table` | 4 | base·striped·compact·matrix. 셀 ≤ 40자, 수치 우측 정렬+tnum |
| `stat` | 1 | 존당 ≤ 3개. 증감은 ▲▼+색+라벨 3중 |
| `chartframe` | 1 | 계열 ≤ 5, 3개↑ 패턴 병기, 직접 라벨 우선 |
| `directive` | 3 | single·pair·stack. 기호(✓✕▲▣) 생략 금지 |
| `badge` | 4 | neutral·emphasis·outline·marked — 형태+색 이중 부호화 |
| `scope` | 1 | 항목 최상단 고정. 제외 없으면 "없음" 명기 |
| `stepper` | 1 | 다면 문서에서 좌측 1열 고정 배치 |
| `xref` | 1 | `(→ N.N절, p.N)` — 방향어 금지 |
| `mediaframe` | 1 | 종횡비 6종 한정. 크롭 원칙. 텍스트 굽기 금지 |
**미선별**: `hero`(표지 P1에서만 header 대체로 사용 — 선별 예외 명시), `toc`(다면 5면 이상 시 추가 선별), `specsheet`(P5 사이드에서 선택), screen 전용 5종 비적용.
*(주: hero·toc·specsheet는 조건부 선별 — 사용 시 카탈로그 규정을 그대로 따른다. 위 정량 17종/31변형은 기본 구성 기준이다.)*
---
## 7. 분량 예산 (역산 근거 포함)
산식: `예산(자) = (존 폭 − 패딩) ÷ 글자폭(한글 = 크기 mm) × 허용 행수`, 여유 10% 차감.
| 슬롯 | 권장 | 최대 | 역산 근거 |
| :--- | :-: | :-: | :--- |
| 면 제목 (`title-lg`) | 18자 | 25자 | 헤더 존 246mm ÷ 7.16mm ≈ 34자 → 1행 여유 |
| 아이브로 | 12자 | 20자 | caption 폭 기준 |
| 히어로 헤드라인 (표지) | 25자 | 35자 | 372mm ÷ 14.5mm(display) ≈ 25자/행 |
| 카드 제목 | 15자 | 20자 | 4col 카드 내폭 96mm ÷ 4.47mm ≈ 21자 |
| 카드 본문 | 90자 | 120자 | 96mm ÷ 3.14mm(body-sm) ≈ 30자 × 4행 |
| 스테이지 설명 | 40자 | 60자 | 3col 카드 내폭 64.5mm ÷ 3.14 ≈ 20자 × 3행 |
| directive 진술 | 100자 | 130자 | 6col 내폭 159mm ÷ 3.14 ≈ 50자 × 3행 |
| principle 진술 | 60자 | 80자 | 전폭 1~2행 |
| 표 셀 | 20자 | 40자 | 초과 시 압축·부록 이관 (TB-4) |
| 캡션·출처 | 40자 | 60자 | caption 1~2행 |
| ID | 규칙 |
| :--- | :--- |
| **BG-A1** | 예산 초과 시 **글자 크기를 줄이지 않는다.** 내용을 줄이거나 면을 나눈다 |
| **BG-A2** | 잘림(truncation) 설계 금지. 오버플로 발생 = 예산 위반으로 판정 |
---
## 8. 투사 겸용 옵션 (`dual_medium: true` 선언 시)
| 역할 | 인쇄 단독 | **투사 겸용** |
| :--- | ---: | ---: |
| `caption` | 7.9pt | **11.3pt** |
| `body-sm` | 8.9pt | 12.7pt |
| **`body`** | **10.0pt** | **14.2pt** (base 3스텝 상향) |
| `title-sm` | 12.7pt | 18.0pt |
| `title` | 16.0pt | 22.8pt |
- 겸용 시 본문 존은 3단(각 4col) 유지 가능 — body 14.2pt에서 120mm = 24.0em ✓ 다단 범위
- 겸용 시 대비·최소 선 굵기는 presentation 프로파일의 엄격한 쪽을 채택한다 (PM-1·PM-2)
---
## 9. 제작 절차 (에이전트 실행 순서)
| 단계 | 작업 | 판정 기준 |
| :-: | :--- | :--- |
| 1 | 콘텐츠를 **주제 단위로 분해** — 1면 = 1주제 | 면수 확정 |
| 2 | 각 면에 **패턴(P1~P7) 배정** — 콘텐츠 유형 매핑표 §5 | 전 면 매핑 완료 |
| 3 | 겸용 여부 선언 (§8) | dual_medium 확정 |
| 4 | 존 좌표 산출 — §2.2 수직 존 + §2.3 존 폭 | 6mm 격자 정합 |
| 5 | 컴포넌트 배치 — §6 선별 목록 내에서만 | 카탈로그 외 0건 |
| 6 | 문안 작성 — §7 예산 내, 브랜드 어미 4종(`~한다`·`~할 수 있다`·`~를 권장한다`·`~하지 않는다`) | 예산 위반 0건 |
| 7 | 색 적용 — §4.2 등록 페어만 | 미등록 조합 0건 |
| 8 | 검증 — §10 전항 | 자동 PASS + 육안 확인 |
---
## 10. 검증 체크리스트
### 자동 (산출 파일 기계 검증)
| # | 항목 | 기준 |
| :-: | :--- | :--- |
| A1 | 판면 정합 | 콘텐츠 높이 252mm = 6mm × 42 ✓ |
| A2 | 그리드 정합 | 12×25.5+11×6=372, 존 폭 §2.3 일치, 잔차 0 |
| A3 | measure | 본문 존 4col(34.0em) 또는 3col(25.1em)만 |
| A4 | 최소 크기 | 전 텍스트 ≥ 7.0pt, 본문 ≥ 9.0pt (겸용 시 상향표) |
| A5 | 최소 선 | ≥ 0.15mm, 역상 ≥ 0.25mm |
| A6 | 대비 | 본문 페어 실측 ≥ 7:1 (AAA), §4.2 등록 페어만 |
| A7 | 리터럴 | 산출물 내 HEX·치수 하드코딩 0건 |
| A8 | 그림자·알파·그라디언트 | 0건 |
| A9 | 악센트 경제 | 1면당 orange 강조 ≤ 2 |
| A10 | 푸터 불가침 | 콘텐츠 하단 ≤ 249mm |
| A11 | 예산 | 전 슬롯 최대값 이하, 오버플로 0건 |
| A12 | 본문 색상판 | 100% K 단독 |
### 육안
| # | 항목 |
| :-: | :--- |
| V1 | 흑백 변환 후 정보 손실 0 (상태 기호·뱃지 형태로 구분 확인) |
| V2 | 여백률 40~55%, 하단 공백 < 25% |
| V3 | 결론 존 1개 성립 (PD-1) — 시선이 결론에 귀결하는가 |
| V4 | 다단 좌우 행 정렬 (베이스라인 겹쳐보기) |
| V5 | 원거리(2m) 1차 메시지 + 근거리 2차 디테일 2층 판독 (PD-3) |
| V6 | 인쇄 발주 시: 블리드 3mm·재단선·CMYK 프로파일 확인 (print §11.3) |
### 구조 검증 결과 (modules §8.1 — `active` 등록 근거)
12항 전항 **PASS** (2026-07-29, HMCM): 스키마 필수 필드 충족 · depends_on 기록 · 정량 명시(17종/31변형) · 완화 0건 · 겸용 규정 명시 · 전 슬롯 예산 부여 · 분할 허용 목록 준수 · 결론 존 1개 · 존 폭 정합(246 정정 반영) · 카탈로그 외 컴포넌트 0건 · 미사용 0건(조건부 선별 명시) · 역할 중복 0건
---
*본 모듈은 참조 사양이다. 모듈 준수가 산출물의 적합성을 보증하지 않으며, 내용의 정확성은 별도 검증해야 한다 (DC-3). 개정 시 기 배포분에 소급 적용되지 않는다 (DC-2).*
RAG/design system_v0.1.1/A3/module.a3-handbook.md
+177
View File
@@ -0,0 +1,177 @@
# Prism — M1 A3 시공상세도 편람 실행 명세 (Layer 3)
| 버전 | 수정일 | 수정자 | 주요 변경 내용 | 비고 |
| :--- | :--- | :--- | :--- | :--- |
| v0.1.0 | 2026-07-29 | HMCM | 신규 제정 — `design.modules.md §4.2` 착수 예정 스텁을 완전 실체화. 파생 절차 8단계 완료, 구조 검증 12항 통과 | `draft` → **`active`** 전환 |
| 메타 | 값 |
| :--- | :--- |
| 모듈 | **M1 `a3-handbook`** — A3 시공상세도 편람 |
| 계층 | Layer 3 (실행 명세 · **자기완결형**) |
| 대상 산출물 | A3 가로 다면 **편람** — 시공상세도 편람·기술 매뉴얼·기준서 등 **열람·참조용** 장(章) 구조 문서 |
| 상위 의존 | `Design.md` 0.1.2 · foundations 0.1.2 · medium.print 0.1.2 · components 0.1.1 · tokens.json 0.1.1 |
| M5와의 구분 | M5(`module.a3-explainer.md`)는 **1면=1주제 설명자료**, 본 모듈은 **장·절·색인을 갖춘 다면 편람**이다. 색인·상호참조·러닝헤드가 장식이 아니라 기본 인프라다 |
```yaml
module:
id: a3-handbook
name: A3 시공상세도 편람
version: 0.1.0
status: active
brand: saman
medium: print
dual_medium: false # 회의 투사 겸용 시 true → M5 §8 상향표 준용
format: A3-landscape # 420 × 297 mm
columns: 12
type_set: compact # 고밀도·참조형 (M5 expressive와 구분)
component_count: 19
variant_count: 33
patterns: [h1-tobira, h2-chapter-toc, h3-item, h4-item-dense, h5-table, h6-figure, h7-appendix]
overrides_strict:
- contrast_target: AAA # print 기본과 동일 (완화 아님)
- color_encoding: dual # 흑백 복사 빈발 → 형태+색 이중 부호화 전면 강제
depends_on: { foundations: 0.1.2, medium.print: 0.1.2, components: 0.1.1 }
```
---
## 1. 적용 조건
| 적용 | 제외 |
| :--- | :--- |
| 시공상세도 편람·기술 매뉴얼 (다면·장 구조·상시 개정) | 1~수 면 설명자료 → M5 (`A3/module.a3-explainer.md`) |
| 장별 부분 개정·차환(loose-leaf)이 필요한 기준서 | A4 보고서·지침서 → M6 (`A4/module.a4-document.md`) |
| 색인·용어집·상호참조가 필요한 참조 문서 | 발표 자료 → M2 (`ppt/`) |
**선행 자산**: 구 `temp/Design system_v0.1.0.md`(A3 Astryx)의 Pattern A/B/C·Item 1~10 매핑은 콘텐츠 자산으로 **패턴 배정 단계(§9-2)에서 재활용**한다.
---
## 2. 판면·그리드 (정본 값)
기하는 M5와 동일한 A3 가로 정본을 쓴다: **420×297mm · 여백 좌우 24/상 21/하 24 · 콘텐츠 372×252mm · 12col×25.5mm · 거터 6mm · 베이스라인 6mm×42행** · 존 폭 12→372 / 8→**246** / 6→183 / 4→120 / 3→88.5mm.
### 편람 고유 — 러닝헤드·러닝풋 (여백 영역)
| 요소 | 위치 | 내용 | 크기 |
| :--- | :--- | :--- | :--- |
| **러닝헤드** | 상단 여백 내 (베이스라인 y=15mm) | 좌면(verso): **장 제목** / 우면(recto): **절 제목** · 단면 인쇄 시 한 줄 병기 | `caption` 7.9pt `.label` 톤 |
| **러닝풋** | 하단 여백 내 (y=282mm) | **`<장>-<면>`** 페이지 번호 + 문서 버전 + 발행일 | `caption` 7.9pt |
| ID | 규칙 |
| :--- | :--- |
| **HB-1** | 장 도비라·부록 표지에는 러닝헤드를 넣지 않는다 (RH-4) |
| **HB-2** | 콘텐츠(21~273mm)는 러닝헤드·풋 영역을 침범하지 않는다 |
| **HB-3** | 양면 제본 시 안쪽 여백에 제본 여유 3~9mm를 가산한다 (MG-5) — 두께에 따라 결정하고 문서화한다 |
---
## 3. 타입·색 (정본 승계)
- **타입**: M5 §3과 동일 (base 10pt·행간 1.70·베이스라인 6mm 정합). **Compact 세트** — 본문면은 `title-sm`·`title` 중심, `display` 계열은 도비라 전용
- **본문 measure**: 기본 **3단**(4col 존 120mm = 34.0em) / 도판·표 40% 이상 면은 **4단**(3col 존 88.5mm = 25.1em) (CL-2)
- **색**: M5 §4와 동일 (등록 페어만, AAA, 본문 100% K). `color_encoding: dual` 강화 — **모든 구분 표기에 형태·기호 병기**(개정 뱃지는 `marked` 변형 필수)
- **각주**: 인쇄 매체이므로 허용 — 해당 면 하단, 절 단위 연속 번호, `caption` + hairline 구분선 (FN-1~4)
---
## 4. 편람 구조 (본 모듈의 지배 규정)
### 4.1 페이지 번호 · 절 번호
| 항목 | 규정 |
| :--- | :--- |
| 페이지 번호 | **`<장>-<면>`** (예: `3-15`). 장마다 1부터 재시작. 전권 통합 번호 병기 금지 (PN-1~3) — **장 단위 차환 개정**을 위한 장치 |
| 앞붙이 | 로마숫자 소문자 i, ii, iii (PN-4) |
| 부록 | `부록A-1` 형식 (PN-5) |
| 절 번호 | **ISO 2145** — 아라비아 숫자, 마침표 구분, **최종 번호 뒤 마침표 금지**(`3.7.4` ✓), 최대 4단계, 그 이하 가·나·다/①②③ (SN-1~6) |
| 상호참조 | **`(→ 3.4절, p.3-27)`** — 절 번호 + 면수 병기. 방향어 금지 (XR-1·XR-2) |
| 표·그림 번호 | `[표 3-4]` `[그림 3-4]` 장별 번호 (XR-3) |
### 4.2 색인·용어집 (정량 기준)
| 항목 | 기준 |
| :--- | :--- |
| 색인 총 항목 수 | 본문 면수의 **약 2배** |
| 면당 참조 수 | 5~6개 · 색인 분량 전체의 약 5% |
| 하위 항목 전환 | 한 표제어 면 번호 **6개 초과 시** 분할 |
| 표제어 출처 | 본문 장·절 제목에서 도출 |
| 용어집 | 가나다순 · 이표기 병기 + 정식 표기 지정 · 초출 위치 상호참조 · **전문용어 초출 정의율 100%** |
### 4.3 서문 필수 문구
- "본 편람은 **참조 사양**이며, 개정 시 기 시공분·기 배포분에 **소급 적용되지 않는다**" (DC-1·DC-2)
- "본 편람 준수가 **현장 적합성을 보증하지 않는다**" (DC-3)
---
## 5. 페이지 패턴 (7종)
| ID | 분할 | 구성 | 결론 존 | 적용 |
| :--- | :--- | :--- | :--- | :--- |
| **H1 장 도비라** | `12` | hero(장 번호+장 제목, display) + 장 개요 3~5행. 러닝헤드 없음 | hero | 장 시작 |
| **H2 장 목차면** | `4:8` | ①toc(절 목차+면수 병기, 2단계) ②장 적용 범위 scope + 개정 이력 badge | ② scope | 장 첫 면 (CH-1) |
| **H3 표준 항목면** | `4:4:4` | scope(상단 전폭) → 본문 3단 → **specsheet(항목 말미 고정)** | principle 또는 directive | 일반 항목 (기본형) |
| **H4 고밀도 항목면** | `3:3:3:3` | 본문 4단 — 도판·표 40% 이상 시 | 동일 | 도판·표 밀집 항목 |
| **H5 표 지배면** | `12` | 전폭 표(헤더 매 면 반복·"(계속)" 표기) + 하단 주석 | 표 캡션 | 수량·기준표 |
| **H6 도판 해설면** | `8:4` | ①mediaframe(크롭 원칙) ②해설·specsheet·xref 레일 | ② 상단 | 상세도 해설 |
| **H7 부록** | `12` 또는 `4:8` | 도면·양식·참고자료. 러닝헤드 없음(표지), `부록A-N` 번호 | — | 부록 |
| ID | 규칙 |
| :--- | :--- |
| **PT-H1** | 모든 항목은 **scope(적용/제외 조건)로 시작**하고 **specsheet(수치 명세)로 끝난다** — 위치 고정 (SC-1·SS-1) |
| **PT-H2** | 항목은 절 경계에서만 면을 나눈다. 표는 행 중간 분절 금지 (TB-2), 위도우·오펀 회피 (PG-1·PG-2) |
| **PT-H3** | 다면 절차에는 stepper를 **좌측 1열 고정** 배치한다 |
| **PT-H4** | 면 넘침 처리 순서: 분량 압축 → 단수 조정(3→4단) → 절 경계 면 분할 → 접지(최후). **body 크기 축소는 선택지에 없다** (print §9.5) |
---
## 6. 컴포넌트 선별 (19종 / 변형 33종)
`eyebrow`(2) · `header`(1) · `rule`(1) · `footer`(1) · `card`(4) · `stagecard`(3) · `connector`(1) · `principle`(1) · `table`(4) · `stat`(1) · `chartframe`(1) · **`specsheet`(1)** · `directive`(3) · `badge`(4) · `scope`(1) · `toc`(1) · `stepper`(1) · `xref`(1) · `mediaframe`(1)
**미선별**: `hero`(H1 도비라에서만 — print 조건부 △, 카탈로그 매트릭스 준수), screen 전용 5종.
편람 고유 규정: `badge`는 개정 구분(유지/보완/갱신/대체/신규)에 **`marked` 변형(기호 부착) 필수** — 색상만으로 구분 금지 (선행 Astryx 결함 재발 방지) · `specsheet` 열 구성은 전권 동일 (SS-2) · `header` 메타 4슬롯: 도면 분류·개정 상태·적용 공종·승인 단계.
---
## 7. 분량 예산
| 슬롯 | 권장 | 최대 | 근거 |
| :--- | :-: | :-: | :--- |
| 장 제목 (도비라 display) | 10자 | 18자 | 전폭 1행 |
| 절 제목 (`title`) | 15자 | 28자 | 명사형, 어미 통일 (§5.2 헤딩 규칙) |
| 항목 제목 (`title-sm`) | 12자 | 20자 | 4col 존 1행 |
| 본문 문단 | 3문장 | 5문장 | 브랜드 CW-1, 문장 ≤ 40어절 |
| 표 셀 | 20자 | 40자 | 초과 시 압축 + 원문 부록 이관 (TB-4) |
| specsheet 항목값 | 15자 | 25자 | 값 없음 `—` / 해당 없음 `N/A` |
| directive 진술 | 100자 | 130자 | M5 승계 |
| 캡션·각주 | 40자 | 60자 | caption 1~2행 |
| 색인 표제어 | 8자 | 12자 | 2열 색인면 기준 |
---
## 8. 검증 체크리스트 (총 76항 체계)
Layer 1 자동 9 + 육안 7 · print 자동 16(P1~P16) + 육안 10(Q1~Q10) · 컴포넌트 14 · 모듈 구조 12 + 산출 10 = **자동 37 / 육안 39**. 아래는 편람 고유 추가 판정 항목이다.
| # | 편람 고유 항목 | 기준 |
| :-: | :--- | :--- |
| HV1 | 페이지 번호 체계 | 전 면 `<장>-<면>`, 장별 재시작, 통합 번호 병기 0건 |
| HV2 | ISO 2145 | 최종 하위 번호 뒤 마침표 0건 (Word 자동 번호 서식 주의) |
| HV3 | 상호참조 유효성 | 전 참조의 절 번호·면수 실재 (샘플이 아니라 전수) |
| HV4 | 색인 정량 | 항목 수 ≈ 면수×2 · 분량 ≈ 5% · 6개 초과 표제어 분할 |
| HV5 | scope·specsheet 위치 | 전 항목 상단/말미 고정 100% |
| HV6 | 러닝헤드 | 도비라·부록 표지 제외 전 면 존재, verso/recto 정합 |
| HV7 | 개정 뱃지 | `marked` 변형 100% — 흑백 복사 후 판별 시험 |
| HV8 | 면책 문구 | 서문 DC-1~DC-3 수록 |
| HV9 | 발주 전 | 인쇄소 프로파일 확인 → CMYK 등록 → 교정쇄 승인 → 블리드·재단선 (print §11.3) |
### 구조 검증 결과 (modules §8.1 — `active` 전환 근거)
12항 전항 **PASS** (2026-07-29, HMCM): 스키마 충족 · depends_on 기록 · 정량 명시(19종/33변형 — §4.2 스텁의 TBD 확정) · `overrides_strict` 완화 0건(AAA 동일 + dual 강화) · 전 슬롯 예산 · 패턴-콘텐츠 매핑(H1~H7) · 분할 허용 목록 준수 · 결론 존 1개/면 · 존 폭 정합(246 정정 반영) · 카탈로그 외 0건 · 미사용 0건(hero 조건부 명시) · 역할 중복 0건
---
*본 모듈은 참조 사양이다 (DC-3). 편람 내용의 기술적 정확성·법규 적합성·현장 적합성은 별도 검증해야 한다.*
RAG/design system_v0.1.1/A4/module.a4-document.md
+171
View File
@@ -0,0 +1,171 @@
# Prism — M6 A4 문서(보고서·지침서) 실행 명세 (Layer 3)
| 버전 | 수정일 | 수정자 | 주요 변경 내용 | 비고 |
| :--- | :--- | :--- | :--- | :--- |
| v0.1.0 | 2026-07-29 | HMCM | 신규 제정 — print 프로파일이 정의한 A4 판형 3종의 첫 실행 모듈. 파생 절차 8단계 완료, 구조 검증 12항 통과 | `active` 등록 (modules §4.4) |
| 메타 | 값 |
| :--- | :--- |
| 모듈 | **M6 `a4-document`** — A4 문서 (보고서·지침서) |
| 계층 | Layer 3 (실행 명세 · **자기완결형**) |
| 대상 산출물 | A4 보고서·검토서·지침서·기술 문서 — 일상 업무의 최다 사용 판형 |
| 상위 의존 | `Design.md` 0.1.2 · foundations 0.1.2 · medium.print 0.1.2 · components 0.1.1 · tokens.json 0.1.1 |
| 인접 모듈 | 다면·색인 편람 → M1 (`A3/module.a3-handbook.md`) · A3 설명자료 → M5 |
```yaml
module:
id: a4-document
name: A4 문서 (보고서·지침서)
version: 0.1.0
status: active
brand: saman
medium: print
dual_medium: false
format: A4-portrait # 변형: single(1단) · office(사무용 프린터) · landscape(표 중심)
columns: 12
type_set: compact
component_count: 15
variant_count: 27
patterns: [r1-cover, r2-body-single, r3-body-double, r4-table, r5-appendix]
depends_on: { foundations: 0.1.2, medium.print: 0.1.2, components: 0.1.1 }
```
---
## 1. 적용 조건 · 변형 선택
| 적용 | 제외 |
| :--- | :--- |
| 업무 보고서·검토서·회의 자료(배포용) | 다면 편람(색인·차환 개정) → M1 |
| 지침서·절차서·기술 문서 | A3 설명자료 → M5 · 발표 → M2 |
**변형 결정 트리** (제작 시작 시 1회 선언):
```
출력 방식이 사무용 프린터인가?
├─ 예 → office 변형 (좌우 여백 15mm)
└─ 아니오 (전문 인쇄·PDF 배포)
└─ 통독형 장문인가? (보고서·검토 의견 등)
├─ 예 → single 변형 (1단, 확대 여백)
└─ 아니오
└─ 표·매트릭스가 지배적인가?
├─ 예 → landscape 변형 (A4 가로)
└─ 아니오 → 기본 (A4 세로 2단, 참조형)
```
**일반 배포·접근성 우선 문서**는 `a11y` 선언으로 본문 12pt를 채택할 수 있다 (print §5.5 — 강화이므로 허용).
---
## 2. 판형·그리드 (정본 값 — 변형 4종)
| 변형 | 판형 (mm) | 여백 좌우/상/하 | 콘텐츠 (mm) | 거터 | 컬럼 폭 | 정합 | 베이스라인 |
| :--- | :--- | :--- | :--- | ---: | ---: | :--- | :-: |
| **기본 (2단)** | 210×297 세로 | 12 / 21 / 24 | 186×252 | 6 | 10 | 12×10+11×6=186 ✓ | 42행 |
| **single (1단)** | 210×297 세로 | **39** / 21 / 24 | 132×252 | 3 | 8.25 | 12×8.25+11×3=132 ✓ | 42행 |
| **office** | 210×297 세로 | **15** / 21 / 24 | 180×252 | 6 | 9.5 | 12×9.5+11×6=180 ✓ | 42행 |
| **landscape** | 297×210 가로 | 24 / 15 / 21 | 249×174 | 3 | 18 | 12×18+11×3=249 ✓ | 29행 |
### measure 검증 (body 10pt = 3.5278mm/em)
| 변형·조판 | 폭 | measure | 판정 |
| :--- | ---: | ---: | :--- |
| 기본 2단 (6col) | 90mm | 25.5em | ✓ 다단 범위 |
| **single 1단 (12col)** | 132mm | **37.4em** | ✓ 1단 이상값 근접 — 통독형 기본 |
| 기본 1단 (12col 186mm) | 186mm | 52.7em | **✗ 금지** — 1단이 필요하면 single 변형을 쓴다 |
| landscape 2단 (6col) | 123mm | 34.9em | ✓ |
| landscape 3단 (4col) | 81mm | 23.0em | ✓ 고밀도 |
| ID | 규칙 |
| :--- | :--- |
| **A4-1** | 표준 여백(186mm)에서 1단 본문을 흘리지 않는다 — measure 52.7em 초과. 1단은 반드시 single 변형 |
| **A4-2** | 한 문서 안에서 변형을 혼용하지 않는다. 예외: 부록의 landscape 표 면 (문서화 필수) |
| **A4-3** | 여백 12mm는 전문 인쇄(재단 전제) 기준이다. 사무용 프린터 출력이 예상되면 office 변형(15mm)을 선언한다 (MG-1 상충 해소 승계) |
### 수직 구조 (기본·세로 변형 공통)
```
0~21 상단 여백 (러닝헤드 y=15mm — caption)
21~45 문서 헤더 존 24mm (4행): 아이브로·제목·메타·구분선 ※ 표지면은 별도
45~51 ↕ 6mm
51~249 본문 밴드 198mm (33행)
249~273 하단부 24mm (4행): 각주 영역 (없으면 본문 연장)
273~297 하단 여백 (러닝풋 y=282mm: 페이지·버전·일자)
```
---
## 3. 타입·색 (정본 승계)
- **타입**: base 10pt Compact 세트 (M5 §3 표와 동일 — 7.9/8.9/**10.0**/11.3/12.7/16.0/20.3pt, display 계열은 표지 전용). `a11y` 선언 시 본문 12.0pt·캡션 12.0pt (print §5.5)
- **페이지 번호**: **전권 통합 일련번호** (편람과 달리 장별 번호 불필요). 5장 이상·상시 개정 문서는 M1의 `<장>-<면>` 채택 가능 (강화 선택)
- **절 번호**: ISO 2145 (최종 번호 뒤 마침표 금지, 4단계 이내) · 상호참조 `(→ 3.4절, p.27)`
- **각주**: 허용 — 면 하단, `caption`, hairline 구분선
- **색**: M5 §4 등록 페어만 · AAA · 본문 100% K · 흑백 복사 대응 (형태+기호 병기)
---
## 4. 페이지 패턴 (5종)
| ID | 분할 | 구성 | 결론 존 | 적용 |
| :--- | :--- | :--- | :--- | :--- |
| **R1 표지·헤더면** | `12` | 문서 제목(title-lg~display) + 메타 표(문서번호·버전·작성·승인) + 목차(2단계, 면수 병기) + 면책·배포 표기 | 제목부 | 1면 |
| **R2 본문 (통독)** | single `12` | 1단 37.4em — 개요→본문→결론 역피라미드 | 결론 절 | 보고서·검토서 |
| **R3 본문 (참조)** | 기본 `6:6` | 2단 25.5em — scope 상단, 항목별 절 구조 | 절 말미 directive | 지침서·절차서 |
| **R4 표·데이터면** | `12` (또는 landscape) | 전폭 표 (헤더 매 면 반복·"(계속)") + stat·chartframe | 표 하단 요약 | 수량·비교표 |
| **R5 부록** | `12` | 양식·참고자료·근거 목록 | — | 부록 |
공통 규칙: 면당 결론 존 1개 (PD-1) · 위도우·오펀 회피, 헤딩+본문 2행 동면 (PG-1·PG-2) · 도판·표는 캡션과 분리 금지 (PG-3) · 문단 구분은 들여쓰기가 아니라 여백 `space.150` (PG-4).
---
## 5. 컴포넌트 선별 (15종 / 변형 27종)
`eyebrow`(2) · `header`(1) · `rule`(1) · `footer`(1) · `card`(4) · `principle`(1) · `table`(4) · `stat`(1) · `chartframe`(1) · `directive`(3) · `badge`(4) · `scope`(1) · `toc`(1) · `xref`(1) · `mediaframe`(1)
**미선별**: `stagecard`·`connector`·`stepper`(절차 도해가 지배적이면 M5 준용으로 조건부 추가) · `specsheet`(기술 명세 문서 시 조건부) · `hero`(비적용 — 표지는 header 확장으로 처리) · screen 전용 5종.
`header` 메타 4슬롯 (A4 문서 표준): **문서번호 · 버전 · 작성자/부서 · 작성일** — 문서 전체에서 의미 일관 (HD-3).
---
## 6. 분량 예산
| 슬롯 | 권장 | 최대 | 근거 |
| :--- | :-: | :-: | :--- |
| 문서 제목 | 15자 | 25자 | 표지 1행 (title-lg 7.16mm/자 × 132~186mm) |
| 절 제목 (`title`) | 12자 | 22자 | 1행, 명사형·어미 통일 |
| 본문 문단 | 3문장 | 5문장 | CW-1 · 문장 ≤ 40어절 · 역피라미드 (CW-3) |
| 카드 제목 / 본문 | 15 / 90자 | 20 / 120자 | 6col 존 90mm 기준 |
| 표 셀 | 20자 | 40자 | 초과 시 압축·부록 이관 |
| directive 진술 | 80자 | 130자 | 2단 폭 기준 |
| 캡션·각주 | 40자 | 60자 | caption 1~2행 |
---
## 7. 제작 절차
| 단계 | 작업 | 판정 |
| :-: | :--- | :--- |
| 1 | 변형 선언 (§1 결정 트리) + a11y 여부 | 1회 확정 |
| 2 | 문서 구조 확정 — 절 번호 체계·목차 | ISO 2145 |
| 3 | 각 면 패턴(R1~R5) 배정 | 매핑 완료 |
| 4 | 컴포넌트 배치 (§5) · 문안 작성 (§6 예산, 어미 4종, 방향어 금지) | 예산 위반 0건 |
| 5 | 색 적용 — 등록 페어만, 악센트 ≤ 2/면 | 미등록 0건 |
| 6 | 검증 §8 → 인쇄 발주 시 print §11.3 절차 | 전항 PASS |
---
## 8. 검증 체크리스트
**자동**: 판면 정합(콘텐츠 높이 252=6×42 / landscape 174=6×29) · 그리드 정합(§2 변형별, 잔차 0) · measure(§2 표 판정 준수 — 기본 여백 1단 0건) · 최소 크기(본문 ≥ 9pt, a11y 시 12pt) · 대비 AAA·등록 페어만 · 리터럴 0건 · 그림자·알파 0건 · 악센트 ≤ 2/면 · 예산·잘림 0건 · 본문 100% K · ISO 2145 마침표 0건
**육안**: 흑백 복사 판독(정보 손실 0) · 여백률 40~55% · 위도우·오펀 · 표 계속면 헤더·"(계속)" · 2단 좌우 행 정렬(기본 변형) · 상호참조 유효성 · 사무용 프린터 실출력 시험(office 변형)
### 구조 검증 결과 (modules §8.1 — `active` 등록 근거)
12항 전항 **PASS** (2026-07-29, HMCM): 스키마 충족 · depends_on 기록 · 정량 명시(15종/27변형) · 완화 0건(a11y·장별 번호는 강화 옵션) · 전 슬롯 예산 · 패턴-콘텐츠 매핑(R1~R5) · 분할 허용 목록 준수 · 결론 존 1개/면 · 변형 4종 그리드 정합 · 카탈로그 외 0건 · 미사용 0건(조건부 선별 명시) · 역할 중복 0건
---
*본 모듈은 참조 사양이다 (DC-3). 문서 내용의 정확성·결재 체계 적합성은 별도 검증해야 한다.*
RAG/design system_v0.1.1/Design.md
+484
View File
@@ -0,0 +1,484 @@
# Prism Design System — Core
| 버전 | 수정일 | 수정자 | 주요 변경 내용 | 비고 |
| :--- | :--- | :--- | :--- | :--- |
| v0.1.0 | 2026-07-28 | 조선두 | 신규 제정 — 4계층 아키텍처, 철학·설계원칙, 적용 절차, 공통 원칙, 치트시트, 거버넌스 | 최초 버전 |
| v0.1.1 | 2026-07-29 | HMCM | 치트시트 버전 표기 제거(GV-2 준수), 파일 맵에 L3 실행 명세 4종 추가, RAG 경로 규정 명시, 등록 현황 갱신(모듈 4 active) | v0.1.0 전수 진단(진단보고서) 후속 |
| v0.1.2 | 2026-07-29 | HMCM | M1 편람 실체화·M6 A4 문서 신설 반영 — 파일 맵 2행 추가, 등록 현황 6 active | 추가 모듈 파생 Task |
| v0.1.3 | 2026-09-29 | HMCM | **M7 32:9 초와이드 덱** 등록 반영 — 파일 맵 2행 추가(L2d·M7), 등록 현황 7 active, 매체 프로파일에 presentation.ultrawide 변형 표기 | 초와이드 모듈 신설 Task |
> **철학**: *"처음 보지만 익숙하고, 계속 봐도 새로운 디자인"*
> **미션**: *기술로 사람과 자연이 함께하는 세상*
| 메타 | 값 |
| :--- | :--- |
| 시스템 | **Prism Design System** |
| 토큰 접두사 | `prism` |
| 계층 | 4계층 (Brand → Foundation → Medium → Module) |
| 매체 | **print** · **presentation** · **screen** (web + mobile) |
| 1차 독자 | 산출물 자동 생성 AI 에이전트 · 2차: 사람 디자이너 |
| 역할 | **시스템 진입점 · 항상 로드되는 SSOT 요약** |
---
## 목차
- [1. 문서 개요·사용 규약](#1-문서-개요사용-규약)
- [2. 디자인 철학과 설계 원칙](#2-디자인-철학과-설계-원칙)
- [3. 4계층 아키텍처](#3-4계층-아키텍처)
- [4. 공통 원칙 (매체 불변)](#4-공통-원칙-매체-불변)
- [5. 치트시트](#5-치트시트)
- [6. 거버넌스](#6-거버넌스)
---
# 1. 문서 개요·사용 규약
## 1.1 목적
본 시스템은 **하나의 브랜드 원천에서 인쇄·프레젠테이션·화면 산출물을 결정론적으로 파생**시키기 위한 단일 진실 원천이다.
핵심 설계 명제는 하나다 — **매체가 바뀌어도 변하지 않는 것(비율·관계·규칙)과 매체마다 달라지는 것(절대 치수·단위·상호작용)을 분리한다.** 분리가 성립하면 새 매체를 추가할 때 상위 계층을 건드리지 않아도 되고, 브랜드를 교체할 때 하위 계층을 건드리지 않아도 된다.
## 1.2 시스템 파일 맵
| # | 파일 | 계층 | 역할 | 로드 정책 |
| :-: | :--- | :--- | :--- | :--- |
| 1 | **`Design.md`** (본 파일) | 코어 | 진입점·원칙·절차·거버넌스 | **항상** |
| 2 | **`design.tokens.json`** | SSOT | 기계 판독 정식값. 매체별 다중값 | **항상** |
| 3 | `design.brand.md` | **L0** | 브랜드 슬롯·보이스·아이코노그래피·인스턴스 | **항상** |
| 4 | `design.foundations.md` | **L1** | GRADE 색체계·타입 생성식·공간·그리드·표면 | **항상** |
| 5 | `design.medium.print.md` | **L2a** | mm·pt·CMYK·인쇄 조판·편람 구조 | 온디맨드 |
| 6 | `design.medium.presentation.md` | **L2b** | 16:9·EMU·투사 보정 | 온디맨드 |
| 7 | `design.medium.screen.md` | **L2c** | rem·브레이크포인트·상태·포커스·모션·테마 | 온디맨드 |
| 8 | `design.components.md` | L1~2 | 컴포넌트 블루프린트 25종 | 온디맨드 |
| 9 | `design.modules.md` | **L3** | 모듈 파생 절차·거버넌스·검증 | 온디맨드 |
| 10 | `A3/module.a3-explainer.md` | **L3** | **M5 A3 설명자료** 실행 명세 (자기완결) | 온디맨드 |
| 11 | `ppt/module.ppt-deck.md` | **L3** | **M2 16:9 PPT 덱** 실행 명세 (자기완결) | 온디맨드 |
| 12 | `webapp/module.webapp.md` | **L3** | **M3 웹앱** 실행 명세 (자기완결) | 온디맨드 |
| 13 | `mobile/module.mobile-tablet.md` | **L3** | **M4 모바일·태블릿 앱** 실행 명세 (자기완결) | 온디맨드 |
| 14 | `A3/module.a3-handbook.md` | **L3** | **M1 A3 시공상세도 편람** 실행 명세 (자기완결) | 온디맨드 |
| 15 | `A4/module.a4-document.md` | **L3** | **M6 A4 문서(보고서·지침서)** 실행 명세 (자기완결) | 온디맨드 |
| 16 | `design.medium.ultrawide.md` | **L2d** | 32:9(3840×1080) — presentation 변형, 24열·중앙 경계 | 온디맨드 |
| 17 | `ultrawide/module.ultrawide-deck.md` | **L3** | **M7 32:9 초와이드 덱** 실행 명세 (M2 차분형) | 온디맨드 |
| — | `<프로젝트 루트>/RAG/design.benchmark_*.md` | 근거 | 공개 시스템 8종 벤치마킹 원장 — **시스템 폴더 외부, 프로젝트 루트 `RAG/`에 위치** (경로 규정 v0.1.1) | 참조 |
**통상 1회 작업 시 로드**: 1 + 2 + 3 + 4 + 매체 1종 + 8 = **6파일** (컨텍스트 경제)
## 1.3 토큰 표기법
```
prism . {ref | sys | comp} . {category} . {name} [. {modifier}]
```
| 계층 | 의미 | 참조 규칙 |
| :--- | :--- | :--- |
| `ref` | 원시값 (브랜드 공급) | Layer 2·3에서 **직접 참조 금지** |
| `sys` | 의미역할 — **매체가 값을 바인딩하는 유일한 지점** | Layer 2·3은 여기만 참조 |
| `comp` | 컴포넌트 속성 | **리터럴 금지**, `sys`/`ref` 참조만 |
공간은 백분율 명명이다 — `space.200` = 기본 단위의 **200%**.
## 1.4 값 충돌 우선순위
| 순위 | 출처 |
| :-: | :--- |
| **1** | **사용자의 명시적 지시** (해당 산출물 한정) |
| **2** | **`design.tokens.json` 정식값** |
| 3 | 각 `.md` 파일의 표·수치 |
| 4 | 산문 설명 |
> **2 > 3이 핵심이다.** 조사 대상 8개 공개 시스템 중 최소 5개에서 문서와 토큰 패키지 간 값 드리프트가 확인됐다. JSON을 정본으로 못 박고, 문서-JSON 정합 검증을 빌드 게이트로 강제한다 (Layer 1 F9).
## 1.5 표준 실행 절차
에이전트는 산출물 생성 시 아래 순서를 **반드시** 따른다. 권장이 아니라 필수다.
| 단계 | 작업 | 참조 |
| :-: | :--- | :--- |
| **1** | **코어 + `tokens.json` 로드** | 본 파일 · 파일 2 |
| **2** | **브랜드 확인** — 활성 인스턴스, 금지 목록 | `design.brand.md` |
| **3** | **매체 선택** — 겸용 여부 선언 | §3.4 결정 트리 |
| **4** | **파운데이션 규칙 적용** — 색 페어·타입 스케일·공간·그리드 | `design.foundations.md` |
| **5** | **매체 프로파일 바인딩** — 절대값 실체화 | `design.medium.*.md` |
| **6** | **컴포넌트 선별·배치** | `design.components.md` |
| **7** | **모듈 명세 확인·준수** (모듈이 있는 경우) | `design.modules.md` |
| **8** | **검증** — 자동 + 육안 전수 | 각 파일 검증 절 |
| ID | 규칙 |
| :--- | :--- |
| **PR-1** | **어느 단계도 생략하지 않는다** |
| **PR-2** | 하위 파일을 참조할 수 없으면 **임의로 생성하지 말고, 어떤 기준을 적용하지 못했는지 명시**한다 |
| **PR-3** | 8단계 검증을 통과하지 못한 산출물을 확정하지 않는다 |
---
# 2. 디자인 철학과 설계 원칙
## 2.1 슬로건의 조작적 정의
슬로건은 **검증 가능한 규칙으로 환원되지 않으면 시스템에 들어올 수 없다** (브랜드 BV-8).
| 축 | 정의 | 규칙군 |
| :--- | :--- | :--- |
| **처음 보지만 익숙한**<br>*Cognitive Fluency* | 낯선 정보의 인지 저항을 최소화한다. 안정적 비례·정렬선·반복 구조로 **예측 가능성**을 만든다 | **PF-1 ~ PF-6** |
| **계속 봐도 새로운**<br>*Aesthetic Durability* | 익숙함이 지루함이 되지 않도록 제어한다. 한 화면에 전부 싣지 않고 **레이어드 디테일**을 남긴다 | **PD-1 ~ PD-4** |
## 2.2 PF — Familiarity 규칙군
| ID | 규칙 | 검증 |
| :--- | :--- | :--- |
| **PF-1** | **최상위 컨테이너는 그리드에, 내부는 스페이싱 스케일에 스냅**한다 | 존 좌표가 컬럼 경계인가 / 내부 간격이 토큰 값인가 |
| **PF-2** | **정의된 분할만** 사용한다 (`12` · `6:6` · `8:4` · `4:8` · `4:4:4` · `3:3:6` · `3:3:3:3`) | 허용 목록 대조 |
| **PF-3** | **고정 영역(헤더·푸터)의 경계를 침범하지 않는다** | 콘텐츠 bottom < 푸터 top |
| **PF-4** | **여백률 40~55%** — 과밀 금지, 동시에 빈 지면 금지 | 면적 측정 |
| **PF-5** | **색·타입·간격은 토큰만** 사용한다. 임의값 금지 | 리터럴 검출 0건 |
| **PF-6** | 콘텐츠는 가용 밴드를 **위→아래로 채운다** | 하단 빈 면적 < 25% |
## 2.3 PD — Durability 규칙군
| ID | 규칙 | 검증 |
| :--- | :--- | :--- |
| **PD-1** | 한 단위 화면은 정보를 다 싣지 않는다 — **핵심 결론은 1개 존에 집약** | 결론 존 단일성 |
| **PD-2** | 위계는 **대비**로 만든다 — 크기·명도·색. 밑줄·테두리로 만들지 않는다 | 1차/2차 정보 식별 가능성 |
| **PD-3** | **레이어드 디테일** — 원거리 1차 메시지 + 근거리 2차 디테일을 공존시킨다 | 원/근거리 판독 2층 |
| **PD-4** | **악센트는 희소하게** — 단위 화면당 브랜드 `economy` 상한 이하 | 개수 계수 |
## 2.4 규칙 → 검증의 연결
철학이 규칙이 되고, 규칙이 검증 항목이 된다. 이 연결이 끊기면 철학은 장식이 된다.
```
슬로건 → 조작적 정의 → PF/PD 규칙 → 기계 검증 항목 → 빌드 게이트
(L0) (L0 BV-8) (본 파일 §2) (F1~F9 등) (modules QG-1)
```
---
# 3. 4계층 아키텍처
## 3.1 계층 구조
```
┌────────────────────────────────────────────────────────────────┐
│ Layer 0 — BRAND design.brand.md │
│ 철학 · 가치축 · 팔레트 원색 · 서체 · 보이스 · 아이콘 · 로고 │
│ ▸ 브랜드 교체 슬롯. SAMAN = 인스턴스 #1 │
└───────────────────────────┬────────────────────────────────────┘
│ 공급 (원색·서체·보이스)
┌───────────────────────────┴────────────────────────────────────┐
│ Layer 1 — FOUNDATION design.foundations.md │
│ ★ 절대 치수 없음. 비율·단계·관계·규칙만 │
│ · 토큰 명명 ref/sys/comp · GRADE 색 척도 · 타입 생성식 1.125ⁿ │
│ · 공간 백분율 스케일 · 12컬럼 2x 파생 · 표면·반경·획 │
└───────────────────────────┬────────────────────────────────────┘
│ 상대값 → 절대값 바인딩
┌───────────────────────────┴────────────────────────────────────┐
│ Layer 2 — MEDIUM design.medium.{print| │
│ presentation|screen}.md │
│ ┌──────────────┬──────────────────┬──────────────────────┐ │
│ │ print │ presentation │ screen │ │
│ │ mm · pt │ px · EMU │ rem · dp │ │
│ │ CMYK · 조판 │ 16:9 · 투사보정 │ 상태·포커스·모션·테마 │ │
│ │ 편람 구조 │ PPTX │ 브레이크포인트 │ │
│ └──────────────┴──────────────────┴──────────────────────┘ │
│ ★ 같은 토큰명, 다른 값셋 │
└───────────────────────────┬────────────────────────────────────┘
│ 선별 · 고정
┌───────────────────────────┴────────────────────────────────────┐
│ Layer 3 — MODULE design.modules.md │
│ A3 편람 · 16:9 덱 · 웹앱 · 모바일앱 · [확장] 초와이드 │
│ ▸ 규칙을 만들지 않는다. 고르고 남은 자유도를 없앤다 │
└────────────────────────────────────────────────────────────────┘
design.components.md (L1~2 교차, 25종 블루프린트)
```
## 3.2 계층 간 참조 규칙
| ID | 규칙 |
| :--- | :--- |
| **AR-1** | 참조는 **하위 → 상위 단방향**이다. 상위가 하위를 참조하지 않는다 |
| **AR-2** | **Layer 1에 절대 치수가 등장하면 결함**이다 (예시는 `[예시 — Layer 2 소관]` 표기) |
| **AR-3** | **Layer 2는 Layer 1의 비율·인덱스를 덮어쓸 수 없다** (TN-7) |
| **AR-4** | **Layer 3은 규칙을 완화할 수 없다.** 강화만 가능하다 (MD-4) |
| **AR-5** | 하위 계층에서 **브랜드 리터럴(HEX 등)이 단 한 번도 등장하지 않아야** 브랜드 교체가 Layer 0으로 격리된다 |
## 3.3 브랜드 교체 영향 범위
| 계층 | 영향 | 재작업 |
| :--- | :--- | :--- |
| **Layer 0** | 전면 교체 | 인스턴스 장 신규 작성 |
| Layer 1 | **없음** | 없음 — 색의 *의미역할*만 참조 |
| Layer 2 | **없음** | 없음 |
| Layer 3 | **없음** | 없음 — 토큰명으로만 지시 |
## 3.4 매체 선택 결정 트리
```
최종 산출물이 종이에 출력되는가?
├─ 예 → print
│ └─ 동시에 투사·화면 표시도 되는가?
│ ├─ 예 → dual_medium 선언 → 두 프로파일의 엄격한 쪽 채택
│ └─ 아니오 → print 단독
└─ 아니오
└─ 발표용 슬라이드인가? (한 화면 = 한 논리 단위, 원거리 판독)
├─ 예 → presentation
└─ 아니오
└─ 사용자가 상호작용하는가? (클릭·입력·스크롤)
├─ 예 → screen (web / mobile 변형 선택)
└─ 아니오 → screen (문서 변형, 인터랙션 절 미적용)
```
## 3.5 매체별 규칙 대조
같은 시스템 안에서 **매체별로 정반대 규칙이 성립**한다. 이것이 계층 분리의 실증이다.
| 항목 | **print** | **presentation** | **screen** |
| :--- | :--- | :--- | :--- |
| 단위 | **절대(mm·pt) 전용** | px (논리 캔버스) | **상대(rem) 전용** |
| 상대 단위 | **금지** | — | **필수** |
| 그림자 | **금지** | **금지** | **허용** |
| 알파 | **금지** (사전 평탄화) | **금지** | **허용** (텍스트 제외) |
| 베이스라인 그리드 | **필수** | 미운용 | 미운용 |
| 대비 목표 | **AAA (ΔG 70)** | **AAA (ΔG 70)** | AA (ΔG 55) / AAA 권장 |
| 인터랙션 | 없음 | 없음 | **전면** |
| 최소 크기 기준 | pt 절대값 | **캔버스 높이 비율** | rem 상대값 |
| 음수 자간 | 사실상 미사용 | `display` 이상 | `display-lg`만 |
---
# 4. 공통 원칙 (매체 불변)
## 4.1 토큰 전용
| ID | 규칙 |
| :--- | :--- |
| **CM-1** | 산출물에 **HEX·치수 리터럴이 등장하지 않는다** |
| **CM-2** | **정의되지 않은 토큰을 참조하지 않는다** (미정의 참조 0건이 빌드 게이트) |
| **CM-3** | `comp` 계층은 리터럴을 갖지 않는다 |
| **CM-4** | 광학 보정이 필요하면 **한 단계 위아래 토큰**을 쓴다. 임의 값을 넣지 않는다 |
## 4.2 색 단독 의존 금지
| ID | 규칙 |
| :--- | :--- |
| **CM-5** | 정보를 **색만으로** 전달하지 않는다. 형태·패턴·라벨·기호 중 최소 1개를 병기한다 |
| **CM-6** | **흑백 출력 시 정보 손실이 0**이어야 한다 |
| **CM-7** | 차트 색 면 위에 텍스트를 얹지 않는다. 라벨은 옆에 배치한다 |
## 4.3 대비 페어링
| ID | 규칙 |
| :--- | :--- |
| **CM-8** | 배경을 지정하면 **전경은 자동 결정**된다. 개별 지정을 허용하지 않는다 |
| **CM-9** | **`contrast.pairs` 미등록 조합은 사용 금지**다 |
| **CM-10** | 대비는 **프로그램으로 계산**한다. 수기·눈대중 판정을 금지한다 |
## 4.4 악센트 경제
| ID | 규칙 |
| :--- | :--- |
| **CM-11** | 악센트 사용은 **단위 화면당 브랜드 `economy` 상한 이하** |
| **CM-12** | 상한을 넘으면 그것은 악센트가 아니다. 초과분을 강등한다 |
| **CM-13** | 상태색·데이터 시각화 색은 카운트에서 **제외**한다 |
## 4.5 근거 표기
| ID | 규칙 |
| :--- | :--- |
| **CM-14** | 사실·수치·법령 인용에는 **`[출처: …]`** 를 병기한다 |
| **CM-15** | 근거를 특정할 수 없으면 **`[추론]`** 태그와 전제를 명시한다 |
| **CM-16** | 1차 출처를 확인하지 못한 항목은 **`[미검증]`** 을 붙인다 |
| **CM-17** | 원 시스템에 대응 개념이 없어 새로 정의한 것은 **`[자체 정의]`** 를 붙인다 |
| **CM-18** | **인용 금지 목록**(`design.modules.md §6`)의 항목을 근거로 쓰지 않는다 |
## 4.6 접근성 하한
| ID | 규칙 |
| :--- | :--- |
| **CM-19** | 본문 대비는 매체별 목표 이상이다 (`print`·`presentation` AAA / `screen` AA) |
| **CM-20** | 비텍스트 요소(보더·아이콘·차트) 대비는 **ΔG ≥ 40 (3:1)** |
| **CM-21** | **텍스트 잘림(truncation)을 설계에 포함하지 않는다.** 잘림이 필요하면 분량 예산이 잘못된 것이다 |
| **CM-22** | 자동 검사는 문제의 약 30%만 발견한다. **육안 검수를 병행**한다 |
---
# 5. 치트시트
```
════════════════════════════════════════════════════════════════════════════
PRISM DESIGN SYSTEM brand: saman
════════════════════════════════════════════════════════════════════════════
COLOR green #1F524B (G69, base) · orange #D05C26 (G47, accent)
brown #474235 (G72, ground) · sand #F4F3F0 (G4, bg-light)
obsidian #111111 (G95, bg-dark) · subtle #D3D3D3 (G15)
GRADE ΔG≥40 → 3.17:1 대형 | ΔG≥55 → 5.37:1 본문 | ΔG≥70 → 9.15:1 AAA
ΔG<40 → 텍스트 금지 (면·도형만)
TYPE size(n) = base × 1.125ⁿ 반올림 half-up
caption −2 · body-sm −1 · body 0 · body-lg +1 · title-sm +2
title +4 · title-lg +6 · display +9 · display-lg +12
행간(한글) display 1.25 · title 1.50 · body 1.70 · caption 1.55
measure 1단 22~38em(이상 33) · 다단 20~25em
SPACE space.{N} = baseUnit × N/100
025 · 050 · 100 · 150 · 200 · 300 · 400 · 600 · 800
GRID 12컬럼 기본, 2x 파생 (12→8→4 / 12→6→3)
분할 12 · 6:6 · 8:4 · 4:8 · 4:4:4 · 3:3:6 · 3:3:3:3
정합 cols×colW + (cols−1)×gutter = contentW (잔차 0)
종횡비 1:1 · 2:1 · 3:2 · 2:3 · 4:3 · 16:9
────────────────────────────────────────────────────────────────────────────
MEDIUM print presentation screen
base 10pt 24px 16px (1rem)
space.100 6mm 12px 8px
canvas A3가로 420×297 1920×1080 반응형 5 BP
grid margin24/gut6 margin48/gut24 BP별
column 25.5mm 130px 70/55/84/76/94
baseline 6mm (42행) — —
contrast AAA (ΔG70) AAA (ΔG70) AA (ΔG55)
shadow 금지 금지 허용
alpha 금지 금지 허용(텍스트 제외)
단위 원칙 절대 전용 논리 px 상대 전용
────────────────────────────────────────────────────────────────────────────
RULES · 토큰만 사용, 리터럴 0건 · 색 단독 의존 금지, 흑백 손실 0
· 미등록 색 조합 금지 · 악센트 경제 준수 (saman: 2/화면)
· 여백률 40~55% · 결론 존 1개 (PD-1)
· 잘림 설계 금지 · 순백 전면 배경 금지
· 그라디언트 금지 · 방향어 참조 금지
FORBID 다크 위 green 텍스트(2.13:1) · sand 위 orange 본문(3.61:1)
════════════════════════════════════════════════════════════════════════════
```
---
# 6. 거버넌스
## 6.1 버전 규칙
| 구분 | 증가 조건 |
| :--- | :--- |
| **MAJOR** | 토큰 의미 변경 · 스케일 비율 변경 · 계층 구조 변경 · 하위 호환 파괴 |
| **MINOR** | 토큰·컴포넌트·패턴·모듈·브랜드 인스턴스 추가 · 규칙 강화 |
| **PATCH** | 수치 보정 · 오타 · 문서 정정 · 근거 보강 |
| ID | 규칙 |
| :--- | :--- |
| **GV-1** | **파일명에 버전을 붙이지 않는다.** 버전은 각 파일 상단 변경 이력 표로만 관리한다 |
| **GV-2** | **버전 표기는 파일당 1곳**이다. 본문·메타·예시에 중복 기재하지 않는다 |
| **GV-3** | 상위 계층의 MAJOR 증가는 **하위 전체의 재검증**을 유발한다 |
## 6.2 토큰 수명주기
```
active ──MINOR──▶ deprecated ──다음 MINOR──▶ soft-delete ──MAJOR──▶ deleted
(정상) (신규 금지, (참조 시 경고) (빌드 실패)
대체 토큰 명시)
```
| ID | 규칙 |
| :--- | :--- |
| **GV-4** | `deprecated` 선언 시 **대체 토큰을 반드시 명시**한다. 대체 없는 폐지 금지 |
| **GV-5** | `deprecated` → `deleted`까지 **최소 2개 MINOR 주기**를 보장한다 |
| **GV-6** | 폐지 예고는 **사전 고지 + 명확한 cut-off**를 동반한다 |
## 6.3 정합 검증 의무 (드리프트 방지)
**문서와 토큰 파일 간 값 불일치는 디자인 시스템의 기본 실패 모드다.**
조사 대상 8개 공개 시스템 중 최소 5개에서 드리프트가 확인됐다 — MD3 state layer(10% vs 12%), Spectrum 컬러 스톱(14 vs 13 vs 16), Carbon 컬럼 수(16 vs 4/8/16 vs 12), Carbon 타입 토큰명(v10 vs v11), USWDS line-height(1.15 vs 1.2). 선행 시스템도 **4중 버전 표기**로 같은 실패를 겪었다.
| ID | 규칙 |
| :--- | :--- |
| **GV-7** | **`design.tokens.json`이 SSOT다.** 문서와 불일치하면 JSON이 우선한다 |
| **GV-8** | 문서 표와 JSON 값의 **정합 검증을 빌드 게이트로 강제**한다 (Layer 1 F9) |
| **GV-9** | 토큰 값을 문서에 옮길 때는 **JSON에서 생성**한다. 손으로 옮기지 않는다 |
## 6.4 외부 기준 추종
| ID | 규칙 |
| :--- | :--- |
| **GV-10** | **공표 후 일정 기간 경과한 정식 버전**만 반영한다. 초안·시행 예정은 반영하지 않는다 |
| **GV-11** | 법정 강제 기준은 **시행일 즉시 반영**한다 |
| **GV-12** | 반영 시 **근거 조문·시행일을 변경 이력에 기재**한다 |
## 6.5 인용 금지 목록
벤치마킹 조사에서 **실재하지 않는 것으로 판명된 12항**이 있다. 전문은 `design.modules.md §6`. 대표 항목:
- **Apple HIG "8pt 그리드"** — 공식 문서에 명문 규정이 없다. 업계에서 가장 자주 오인용되는 항목
- **GOV.UK `$govuk-print-styles` 변수** — 존재하지 않는다
- **USWDS "이상적 characters-per-line"** — 문서에 없다
- **Atlassian base/semantic/component 3계층 모델** — 공식 문서에 없다 (실제는 2층)
- **FOGRA39 TAC 350%** — 오류 (330%)
## 6.6 한계 선언
> **본 디자인 시스템 준수가 산출물의 적합성을 보증하지 않는다.**
> 본 시스템은 검증된 기본값과 규칙을 제공할 뿐이며, 개별 산출물의 정확성·법적 유효성·현장 적합성은 사용자가 별도로 검증해야 한다.
> 본 시스템은 **참조 사양이지 라이브러리가 아니다.** 시스템이 개정되어도 기 제작 산출물은 자동 갱신되지 않는다.
미검증 11항 · 자체 정의 10항의 전체 목록은 `design.modules.md §7`에 공개되어 있다.
## 6.7 확장 규약
| 대상 | 절차 | 버전 |
| :--- | :--- | :--- |
| 토큰 추가·변경 | `design.tokens.json` 수정 → 해당 `.md` 표 동기화 → 정합 검증 | MINOR |
| 브랜드 인스턴스 | `design.brand.md §9` 14단계 + BV-1~8 검증 | MINOR |
| 매체 프로파일 | `design.medium.<id>.md` 신규 + 정합 검증 | MINOR |
| 컴포넌트 | `design.components.md §6` 12단계 + 14항 체크리스트 | MINOR |
| 모듈 | `design.modules.md §3` 8단계 + 22항 검증 | MINOR |
| 아이콘 | `design.brand.md §6.3` 승인 절차 (**임의 생성 금지**) | MINOR |
| 그리드 분할·종횡비 | `design.foundations.md` 등재 후 사용 | MINOR |
## 6.8 현행 등록 현황
| 항목 | 수 | 비고 |
| :--- | :-: | :--- |
| 브랜드 인스턴스 | **1** | saman |
| 매체 프로파일 | **3** | print · presentation(+ultrawide 변형) · screen(web/mobile) |
| 지원 판형 (print) | **5** | A3 가로·세로 / A4 세로(2종)·가로 |
| 브레이크포인트 (screen) | **5** | xs · sm · md · lg · xl |
| 타입 역할 | **9** | caption ~ display-lg |
| 컴포넌트 | **25** | 공통 19 · screen 전용 5 · 조건부 1 |
| 등록 대비 페어 | **14** + 상태 4 | 전 쌍 프로그램 검증 완료 |
| 모듈 | **7** `active` / 0 `draft` / 1 확장슬롯 | 실행 명세: `A3/`(M1·M5) · `A4/`(M6) · `ppt/`(M2) · `webapp/`(M3) · `mobile/`(M4) · `ultrawide/`(M7) |
| 검증 항목 (모듈 1건 기준) | **76~80** | 자동 37~39 / 육안 39~41 |
## 6.9 변경 이력 규약
| ID | 규칙 |
| :--- | :--- |
| **GV-13** | 모든 파일 상단에 **변경 이력 표**를 둔다. 행은 누적하며 삭제하지 않는다 |
| **GV-14** | 변경 내용은 **무엇을 왜 바꿨는지**를 적는다 |
| **GV-15** | 상충 해소로 인한 개정은 **비고에 발견 경위**를 적는다 |
| **GV-16** | 근거가 된 벤치마킹 항목·조문을 함께 기재한다 |
---
## 부록. 근거 체계
본 시스템의 정량 규칙은 **공개 디자인 시스템 8종 + 타이포그래피·인쇄 제작 표준**의 1차 출처 조사에 기반한다.
| 조사 대상 | 본 시스템에 반영된 핵심 |
| :--- | :--- |
| **GOV.UK Design System** | 토큰 1개가 매체별 값을 다중 보유하는 구조 (T1) · 인쇄 pt 실측 골격 (T2) |
| **USWDS** | GRADE 매직 넘버 (T4) · 인쇄 규칙 6종 (T3) |
| **Adobe Spectrum** | CJK 행간 승수 1.7/1.5 (T9) · 등비 base 단일 지정 (T11) · 보더 미스케일 (T10) |
| **IBM Carbon** | 대비 스텝 매트릭스 (T5) · 이원 타입 세트 (T16) · 웨이트 역전 (T19) |
| **Material Design 3** | ref/sys/comp 3계층 (T13) · container↔on 페어링 (T12) |
| **Atlassian ADS** | 백분율 스페이싱 명명 (T14) · 그리드 책임 분할 (T15) · 토큰 수명주기 (T48) |
| **Salesforce SLDS** | 블루프린트 골격 (T22) · 메타 4필드 (T23) · 참조 사양 면책 (T25) |
| **Shopify Polaris** | Do/Don't 4상태 카드 (T21) · 문안 규칙군 (T28·T30·T35·T51·T52) |
| 인쇄 조판 표준 | Bringhurst measure · Van de Graaf 캐논 · ISO 128·216·2145·999 |
**전문**: `RAG/design.benchmark_2026-07-28_v0.1.0.md` (1,526행)
인용 규약: `[출처: design.benchmark, T14]` 또는 `[출처: design.benchmark, §11.1]`
---
**[SYSTEM READY]** — L3 실행 명세 **7종** 운용 중 (M1 A3 편람 · M2 PPT 덱 · M3 웹앱 · M4 모바일·태블릿 · M5 A3 설명자료 · M6 A4 문서 · M7 32:9 초와이드 덱). 확장 슬롯: X1 초와이드(5120×1442)
RAG/design system_v0.1.1/design.brand.md
+631
View File
@@ -0,0 +1,631 @@
# Prism Design System — Brand (Layer 0)
| 버전 | 수정일 | 수정자 | 주요 변경 내용 | 비고 |
| :--- | :--- | :--- | :--- | :--- |
| v0.1.0 | 2026-07-28 | 조선두 | 신규 작성 — 브랜드 슬롯 스키마, 가치축, 팔레트·서체 슬롯, 보이스·문안 규정, 아이코노그래피, SAMAN 인스턴스 실체화 | 최초 버전 |
| v0.1.1 | 2026-07-29 | HMCM | BV-2 판정 표기 명확화(조건부 PASS), §8.5 orange/white 페어 등록(LARGE_ONLY 4.01) | 진단 G5·G7 보정 |
| 메타 | 값 |
| :--- | :--- |
| 파일 | `design.brand.md` |
| 계층 | **Layer 0 — Brand DNA** |
| 역할 | 브랜드 교체 슬롯 정의 · 브랜드 인스턴스 등록부 |
| 상위 | `Design.md` (진입점) |
| 하위 참조 | `design.foundations.md` (Layer 1) — 본 파일이 공급한 슬롯 값을 소비 |
| 로드 정책 | **항상 로드** (코어 + tokens.json과 함께) |
> **시스템명**: `Prism` — 아키텍처 은유(단일 광원 → 프리즘 → 분광 → 스펙트럼)에서 도출. 토큰 접두사는 `prism`이다. **2026-07-28 확정.**
---
## 목차
- [1. 브랜드 슬롯 스키마](#1-브랜드-슬롯-스키마)
- [2. 가치축 (Value Axis)](#2-가치축-value-axis)
- [3. 팔레트 원색 슬롯](#3-팔레트-원색-슬롯)
- [4. 타이포그래피 슬롯](#4-타이포그래피-슬롯)
- [5. 보이스 & 문안 규정](#5-보이스--문안-규정)
- [6. 아이코노그래피](#6-아이코노그래피)
- [7. 로고·마크 규약](#7-로고마크-규약)
- [8. 브랜드 인스턴스 #1 — SAMAN](#8-브랜드-인스턴스-1--saman)
- [9. 인스턴스 추가 절차](#9-인스턴스-추가-절차)
---
# 1. 브랜드 슬롯 스키마
## 1.1 Layer 0의 경계
Layer 0은 **매체가 바뀌어도 변하지 않고, 브랜드가 바뀌면 전부 바뀌는 것**만 담는다.
| Layer 0에 속한다 | Layer 0에 속하지 않는다 |
| :--- | :--- |
| 철학·미션 문장 | 캔버스 치수 (→ Layer 2) |
| 가치축과 그 디자인 역할 | 그리드 컬럼 수 (→ Layer 2) |
| 팔레트 원색 HEX | 색의 의미역할 매핑 (→ Layer 1) |
| 서체 패밀리·웨이트 | 타입 스케일 수치 (→ Layer 1·2) |
| 보이스·문안 규칙 | 컴포넌트 기하 (→ Layer 1·2) |
| 아이콘 조형 원칙 | 아이콘 픽셀 크기 (→ Layer 2) |
| 로고 파일·변형 규칙 | 로고 배치 좌표 (→ Layer 3) |
**판별 질문**: *"이 값을 바꾸면 브랜드가 달라 보이는가, 아니면 출력 매체만 달라 보이는가?"* — 전자면 Layer 0이다.
## 1.2 슬롯 정의
브랜드 인스턴스는 아래 슬롯을 **전부** 채워야 한다. 미충족 슬롯이 있으면 인스턴스로 등록할 수 없다.
| # | 슬롯 ID | 필수 | 자료형 | 설명 |
| :-: | :--- | :-: | :--- | :--- |
| B1 | `brand.id` | ★ | slug | 기계 식별자. 토큰 네임스페이스에 사용 |
| B2 | `brand.name` | ★ | string | 표기명 (국문/영문 병기 가능) |
| B3 | `brand.philosophy` | ★ | string | 철학 슬로건 1문장 |
| B4 | `brand.philosophy.operational` | ★ | object | 슬로건의 **조작적 정의** — 최소 2개 축, 각 축은 검증 가능해야 함 |
| B5 | `brand.mission` | ○ | string | 미션 1문장 |
| B6 | `brand.axes[]` | ★ | array | **가치축** 2~4개. §2 스키마 준수 |
| B7 | `brand.palette.primary[]` | ★ | array | 원색. 축 수와 1:1 대응 |
| B8 | `brand.palette.neutral[]` | ★ | array | 중립색. 최소 3개 (light bg / dark bg / subtle) |
| B9 | `brand.type.family` | ★ | object | 서체 패밀리 + 폴백 스택 |
| B10 | `brand.type.weights` | ★ | object | 웨이트 3단 (regular/medium/bold) |
| B11 | `brand.voice` | ★ | object | 보이스 4속성. §5.1 스키마 준수 |
| B12 | `brand.copy.rules` | ★ | object | 문안 규칙. §5.2~5.7 |
| B13 | `brand.icon` | ★ | object | 아이콘 조형 원칙. §6 |
| B14 | `brand.logo` | ○ | object | 로고 자산·변형 규칙. §7 |
| B15 | `brand.forbidden[]` | ★ | array | 브랜드 차원 절대 금지 목록 |
## 1.3 슬롯 값 검증 규칙
| ID | 규칙 | 판정 방법 |
| :--- | :--- | :--- |
| **BV-1** | 모든 원색은 **GRADE 값이 산출 가능**해야 한다 (유효 sRGB HEX) | `design.foundations.md §2.1` 산출식 적용 |
| **BV-2** | `palette.primary` 중 **최소 1개**는 light 중립 배경 대비 **ΔG ≥ 70**을 만족해야 한다 (본문색 후보 확보) | GRADE 차 계산 |
| **BV-3** | `palette.primary` 중 **최소 1개**는 light 중립 배경 대비 **ΔG ≥ 55**를 만족해야 한다 (제목색 후보 확보) | 동일 |
| **BV-4** | light 중립 배경과 dark 중립 배경의 **ΔG ≥ 80** | 동일 |
| **BV-5** | 악센트 원색이 ΔG < 55인 경우, **본문 사용 금지 규칙이 `brand.forbidden[]`에 명시**되어야 한다 | 목록 검사 |
| **BV-6** | 서체는 **한글 웨이트 3단 이상 + 등폭 숫자(tabular figures)** 를 제공해야 한다 | 폰트 메타 확인 |
| **BV-7** | 가치축 수 = 원색 수 (1:1 대응) | 개수 대조 |
| **BV-8** | 철학 슬로건은 **조작적 정의(B4)** 없이 등록할 수 없다 | 필드 존재 검사 |
> **BV-8의 취지**: "좋은 디자인"류의 검증 불가능한 슬로건이 시스템에 들어오는 것을 구조적으로 차단한다. 슬로건은 반드시 *"무엇을 하면 이 슬로건을 지킨 것인가"* 로 환원되어야 하며, 그 환원 결과가 `Design.md §2`의 PF/PD 규칙이 된다.
---
# 2. 가치축 (Value Axis)
## 2.1 개념
가치축은 브랜드가 표방하는 가치를 **디자인 역할로 번역한 단위**다. 각 축은 원색 1개와 결합하며, 그 색이 화면에서 수행할 역할을 규정한다.
축을 두는 이유는 색에 **의미를 고정**하기 위해서다. 의미가 고정되면 "이 강조는 왜 주황인가"라는 질문에 매번 답할 필요가 없어지고, 에이전트도 결정론적으로 색을 선택할 수 있다.
## 2.2 축 스키마
```yaml
axis:
id: <slug> # 필수 — 예: nature, technology, people
label_ko: <string> # 필수 — 예: 자연
label_en: <string> # 필수 — 예: Nature
design_role: base|accent|ground|support # 필수 — 아래 §2.3
color_ref: <palette.primary[i]> # 필수 — 1:1 대응
usage: <string> # 필수 — 이 색이 실제로 칠해지는 대상
economy: <string|null> # 선택 — 사용량 상한 (accent는 필수)
```
## 2.3 `design_role` 정의 (고정 어휘)
| 역할 | 의미 | 지면 점유 | 전형적 적용 대상 |
| :--- | :--- | :--- | :--- |
| **base** | 구조·기반. 안정감을 만든다 | 중 | 제목, 구조선, 헤더 면, 아이콘 |
| **ground** | 본문·바탕. 읽히는 것 전부 | 대 | 본문 텍스트, 테두리, 라벨, 헤어라인 |
| **accent** | 강조·전환. 시선을 1회 붙잡는다 | **극소** | 포인트 마커, 귀결 커넥터, 단일 강조어 |
| **support** | 보조. 위 3역할을 보완 | 소 | 보조 텍스트, 비활성 표기, 배경 틴트 |
- `base`와 `ground`는 **각각 정확히 1개** 축에만 배정한다.
- `accent`는 **1개 이하**. 악센트가 2개면 악센트가 아니다.
- `support`는 0개 이상 가능.
## 2.4 악센트 경제 (Accent Economy)
`design_role: accent` 축에는 `economy` 필드가 **필수**이며, 다음 형식을 따른다.
```
"<단위 화면·지면>당 최대 <N>개 국소 강조"
```
이 값은 Layer 1의 `PD-4` 규칙과 검증기가 직접 소비한다. 매체별 "단위 화면"의 정의는 Layer 2가 공급한다.
| 매체 | "단위 화면"의 정의 |
| :--- | :--- |
| print | A3 1면 (양면 스프레드는 2단위) |
| presentation | 슬라이드 1장 |
| screen | 1 viewport 내 동시 가시 영역 |
---
# 3. 팔레트 원색 슬롯
## 3.1 색 슬롯 스키마
```yaml
color:
id: <slug>
name: <string> # 색명 (브랜드 고유명 허용)
hex: "#RRGGBB" # sRGB. 소문자 금지, 6자리 고정
rgb: [r, g, b] # hex와 반드시 일치 — 검증 대상
grade: <int 0-100> # 자동 산출 (design.foundations §2.1)
axis_ref: <axis.id|null> # primary는 필수, neutral은 null
role: base|ground|accent|support|bg_light|bg_dark|subtle|on_dark
usage: <string>
```
> **[정합 검증 필수]** `hex`와 `rgb`는 반드시 동일 색을 가리켜야 한다. SAMAN 선행 시스템에서 `color.subtle`의 `hex: "#474235"` ↔ `rgb: [211,211,211]` 불일치로 **대비 1.13:1의 판독 불가 텍스트**가 산출될 수 있었다. 본 스키마는 이를 자동 검증 항목으로 승격한다. [출처: 자체 산출 / SAMAN `design.tokens.json`]
## 3.2 GRADE 척도 (요약)
GRADE는 **CIE L\* 기반 명도 등급**으로, `GRADE = round(100 − L*)` 이다. 0 = 순백, 100 = 순흑.
두 색의 **GRADE 차(ΔG)** 만으로 대비 충족 여부를 계산기 없이 판정한다. [출처: design.benchmark, T4 (USWDS 매직 넘버) · T5 (Carbon 스텝 매트릭스)]
| ΔG | 보장 최소 대비 | 판정 |
| :-: | :--- | :--- |
| **≥ 40** | ≥ 3.17 : 1 | **대형 텍스트 가능** (18pt+ / 14pt+ Bold) |
| **≥ 55** | ≥ 5.37 : 1 | **본문 가능** (AA 4.5:1 여유 충족) |
| **≥ 70** | ≥ 9.15 : 1 | **AAA 충족** (7:1 여유 충족) |
| < 40 | — | **텍스트 사용 금지** (면·도형으로만) |
- 위 값은 **모든 base 등급에 대한 최솟값**이다(worst case = 흰 배경 위). 실측 대비는 항상 이 이상이다.
- 산출식·검증표 전문은 `design.foundations.md §2.1~2.2`에 있다.
- **ΔG는 보수적 하한**이므로, ΔG 미달이어도 실측이 통과하는 경우가 있다. 그 경우 실측값을 `contrast.pairs`에 명시적으로 등록해야 사용할 수 있다(암묵 허용 금지).
## 3.3 중립색 슬롯 요건
| 슬롯 | 필수 | 요건 |
| :--- | :-: | :--- |
| `bg_light` | ★ | 라이트 배경. **순백(#FFFFFF) 전면 사용 금지** — 대형 화면 눈부심·인쇄 반사 방지. GRADE 0~10 권장 |
| `bg_dark` | ★ | 다크 배경. GRADE 90 이상 권장 |
| `subtle` | ★ | 보조 텍스트용. 라이트/다크 각각에 대해 ΔG ≥ 40 이상 확보 |
| `on_dark` | ○ | 다크 면 위 텍스트·카드. 미지정 시 `bg_light`를 재사용 |
---
# 4. 타이포그래피 슬롯
## 4.1 서체 슬롯
```yaml
type:
family:
primary: <string> # 예: Pretendard
stack: <string> # CSS font-family 전체 폴백 체인
embed: <path|null> # 로컬 임베드 파일 (PPTX·PDF 임베딩용)
weights:
regular: 400
medium: 500
bold: 700
features:
tabular_figures: true # 필수 (BV-6)
variable: <bool>
```
## 4.2 서체 선정 요건
| ID | 요건 | 근거 |
| :--- | :--- | :--- |
| **TF-1** | 한글 웨이트 **3단 이상** | 위계를 크기·웨이트 2축으로 만들기 위한 최소 조건 |
| **TF-2** | **등폭 숫자(tabular figures)** 제공 | 수량표·치수표 정렬. [출처: design.benchmark, T41] |
| **TF-3** | 라틴·숫자 혼용 시 **시각 크기 편차가 과도하지 않을 것** | 한글은 라틴의 cap-height 개념이 없어 동일 pt에서 시각 크기가 다름. 보정 계수는 `design.foundations.md §3.10`에서 정의 [출처: design.benchmark, T44 / 자체 정의] |
| **TF-4** | **로컬 임베드 가능** (라이선스·파일 확보) | 오프라인 렌더링, PPTX 폰트 임베드, PDF 아웃라인 |
| **TF-5** | 인쇄 시 sans-serif 채택 | GOV.UK의 sans 권고 근거("프린터 드라이버 호환")는 PDF 임베딩 방식에 미적용되나, **한글 본문 조판에서 sans가 소자 크기 대비 판독성이 안정적**이라는 별도 근거로 채택 `[자체 판단]` [출처: design.benchmark, §16 상충-4] |
> Layer 0은 **어떤 서체인가**만 정한다. **몇 pt인가**는 Layer 1(비율)과 Layer 2(base 값)가 정한다.
---
# 5. 보이스 & 문안 규정
> 본 장은 **브랜드가 자기 이름으로 내보내는 모든 문장**에 적용된다. 시스템 내부 주석·에이전트 로그에는 적용하지 않는다.
## 5.1 보이스 4속성 (스키마)
```yaml
voice:
stance: <string> # 화자의 자세 — 예: 단정적·원칙적·3인칭
distance: <string> # 독자와의 거리 — 예: 전문가 대 전문가
register: <string> # 문체 격 — 예: 규정문체(평서 종결)
restraint: <string> # 절제 규칙 — 예: 과장·감탄·마케팅 어휘 금지
```
각 속성은 **금지 예시를 1개 이상 동반**해야 한다. 금지 예시 없는 보이스 규정은 실행 불가능하다.
## 5.2 헤딩 어미 규칙
같은 레벨의 헤딩은 **어미를 통일**한다. 목차를 훑을 때의 스캔성이 이 규칙 하나에 크게 좌우된다. [출처: design.benchmark, T28 (Polaris help-documentation 아카이브)]
| 레벨 | 어미 | 예시 | 금지 |
| :--- | :--- | :--- | :--- |
| **장(章)** | 명사형 | "작성 절차", "책임 소재" | "작성 절차는?" |
| **절(節)** | 명사형 또는 `~하기` | "시공상세도 검토하기" | 레벨 내 혼용 |
| **작업 단계** | `~한다` (평서 종결) | "승인 도서를 현장에 비치한다" | "~합시다", "~하세요" |
| **금지 조항** | `~하지 않는다` / `~를 금지한다` | "미승인 도면으로 시공하지 않는다" | "~하면 안 됩니다" |
| **권고 조항** | `~를 권장한다` | "BIM 모델과 병행 검토를 권장한다" | "~하는 게 좋습니다" |
**"How to" 상당 표현 금지**: "~하는 방법", "~하는 법"은 헤딩에 쓰지 않는다. 헤딩은 대상을 지시하고, 방법은 본문이 담는다.
**제목 제거 검사 (removable test)**: 헤딩을 지워도 본문이 문장으로 성립해야 한다. 본문이 헤딩에 의존해 주어를 생략했다면 잘못된 헤딩이다. [출처: design.benchmark, T36]
## 5.3 문장 구성 규칙
| ID | 규칙 | 근거 |
| :--- | :--- | :--- |
| **CW-1** | 한 문단은 **5문장 이하** | T35 (GOV.UK) |
| **CW-2** | 한 문장은 **40어절 초과 시 분할** — 원 규칙 "25단어"를 한국어 어절 기준으로 재정의 `[자체 정의]` | T35 / M20 |
| **CW-3** | **역피라미드** — 결론·판정을 먼저, 근거·경위를 뒤에 | T35 |
| **CW-4** | **구정보 → 신정보** 순서. 문장 앞머리에는 독자가 이미 아는 것을 둔다 | T51 (Polaris Readability) |
| **CW-5** | **끊긴 서술(choppy writing) 회피** — 짧은 단문 나열로 논리 연결을 독자에게 떠넘기지 않는다 | T51 |
| **CW-6** | **각주는 인쇄물에서만** 사용한다. 화면 매체에서는 본문 편입 또는 상호참조로 처리 | T35 (GOV.UK "designed for reference in print") |
## 5.4 조건문 서술 규칙
조건 분기는 **조건을 먼저, 처분을 나중에** 쓴다. 독자가 자기에게 해당하지 않는 조건을 즉시 건너뛸 수 있어야 한다. [출처: design.benchmark, T30]
```
[O] 가설구조물에 해당하는 경우에는, 관계전문가의 확인을 받는다.
[X] 관계전문가의 확인을 받는다. 단, 가설구조물에 해당하는 경우에 한한다.
```
- 어순 고정: **`~인 경우에는, ~한다`**
- 조건절과 처분절은 **쉼표로 분리**한다. 조건만 있고 처분이 없는 문장을 두지 않는다.
## 5.5 적용 조건 선행 배치
각 항목의 **최상단에 "적용 조건 / 제외 조건" 블록**을 둔다. 독자가 해당 없음을 **빨리 확인하고 이탈**할 수 있어야 한다. [출처: design.benchmark, T31 ("Let readers fail fast")]
제약·전제는 절차 목록 **앞**에 온다. 3단계까지 읽고 나서 "단, 이 경우는 제외"를 만나게 하지 않는다.
## 5.6 동사 판별표
같은 동작에 여러 동사를 섞어 쓰면 독자가 **의미 차이를 추론**하게 된다. 아래 표의 좌열을 기본으로 하고, 우열은 명시된 조건에서만 쓴다. [출처: design.benchmark, T52 (Polaris actionable-language 아카이브의 대조표 형식을 한국어로 이식) / 어휘 선정은 `[자체 정의]`]
| 기본 동사 | 대체 동사 | 구분 기준 |
| :--- | :--- | :--- |
| **설치한다** | 시공한다 | 개별 부재·기기 = 설치 / 공정 전체 = 시공 |
| **고정한다** | 부착한다 / 거치한다 | 하중을 전달하면 고정 / 표면 접합만이면 부착 / 임시 얹음이면 거치 |
| **확인한다** | 검측한다 / 입회한다 | 육안·서류 대조 = 확인 / 계측 수반 = 검측 / 타 주체 현장 참관 = 입회 |
| **검토한다** | 승인한다 | 의견 제시까지 = 검토 / 효력 발생 = 승인 |
| **작성한다** | 제작한다 / 작성·제출한다 | 도서·문서 = 작성 / 물리적 산출 = 제작 / 제출 의무 수반 시 병기 |
| **반영한다** | 적용한다 / 갱신한다 | 기존 문서에 편입 = 반영 / 신규 대상에 시행 = 적용 / 버전 올림 = 갱신 |
| **변경한다** | 수정한다 | 승인 효력에 영향 = 변경 / 오기·표기 정정 = 수정 |
| **~한다** (의무) | ~할 수 있다 (재량) | **의무와 재량을 어미로만 구분한다.** "~하여야 한다"는 "~한다"로 통일 |
> **어미로 규범력을 표현한다**: `~한다`(의무) / `~할 수 있다`(재량) / `~를 권장한다`(권고) / `~하지 않는다`(금지). 이 4종 외의 어미를 규범 조항에 쓰지 않는다.
## 5.7 방향어 금지
`위의 / 아래의 / 오른쪽 / 왼쪽 / 앞서 / 다음의` 같은 **물리적 위치 지시어**를 참조에 쓰지 않는다.
**금지 근거**: 방향어는 ① 레이아웃이 매체마다 달라지면 무효가 되고(A3 2단 → 모바일 1단), ② 화면 낭독 시 무의미하며, ③ **참조 대상에 이름이나 번호가 없다는 신호**다. [출처: design.benchmark, T52]
```
[O] 검토 기한은 3.2절에 따른다.
[O] [표 4-1]의 구분에 따른다.
[X] 아래 표의 구분에 따른다.
[X] 앞서 설명한 절차에 따른다.
```
- 대체 수단: **절 번호 / 표·그림 번호 / 항목명**. 참조할 것에 번호가 없으면 번호를 부여한다.
- 인쇄 매체에서는 상호참조에 **면수를 병기**한다: `(→ 3.4절, p.27)` [출처: design.benchmark, M12]
## 5.8 한국어 가독성 지표 `[자체 정의]`
영어권 시스템의 지표(Polaris "7th grade reading level", GOV.UK "reading age 9")는 한국어에 대응 개념이 없다. [출처: design.benchmark, M20 / §18-24] 아래를 대체 지표로 사용한다.
| 지표 | 목표 | 산출 |
| :--- | :--- | :--- |
| 평균 문장 길이 | **25어절 이하** (상한 40) | 어절 수 ÷ 문장 수 |
| 문단 길이 | **5문장 이하** | 그대로 |
| 피동 표현 비율 | **10% 이하** | `~되다/~어지다` 종결 ÷ 전체 문장 |
| 한자어 명사구 연쇄 | **3연속 이하** | "시공상세도면작성기준검토" 류 분해 |
| 전문용어 초출 정의율 | **100%** | 용어집 등재 또는 초출 시 괄호 정의 |
> 이 지표는 **참고 기준**이며 자동 판정 대상이 아니다. 검수 단계의 육안 점검 항목으로 사용한다.
---
# 6. 아이코노그래피
## 6.1 조형 원칙 슬롯
```yaml
icon:
grid: <int> # 아이콘 작도 그리드 (정사각 단위)
stroke: <int> # 획 두께 (그리드 단위 기준)
linecap: round|butt|square
linejoin: round|miter|bevel
fill: none|solid
color_on_light: <color.id>
color_on_dark: <color.id>
set_policy: bespoke|library # 자체 제작 / 외부 라이브러리
```
## 6.2 공통 규칙 (매체 불변)
| ID | 규칙 |
| :--- | :--- |
| **IC-1** | **1개 의미 = 1개 아이콘.** 같은 의미에 두 아이콘을 두지 않는다 |
| **IC-2** | **장식용 아이콘 금지.** 의미를 담지 않은 아이콘은 배치하지 않는다 |
| **IC-3** | **이모지 금지.** 이모지·아이콘 폰트·서드파티 아이콘 라이브러리를 사용하지 않는다 (`set_policy: bespoke`인 경우) |
| **IC-4** | 아이콘은 **인라인 SVG**로 삽입해 토큰 색에 바인딩한다. 래스터는 사진·복잡 일러스트에 한한다 |
| **IC-5** | 아이콘은 **색 단독으로 의미를 전달하지 않는다.** 형태가 색과 독립적으로 구분되어야 한다 [출처: design.benchmark, T21·T38] |
| **IC-6** | 획 두께는 **판형 확대 시 비례 확대하지 않는다** [출처: design.benchmark, T10 (Spectrum "border width는 스케일되지 않는다")] |
## 6.3 아이콘 거버넌스 (승인 절차)
카탈로그에 없는 아이콘이 필요할 때, **임의로 만들지 않는다.**
1. 필요 아이콘을 **제안**한다 — `이름 + 의미 + 조형 사양(그리드·획·구성 요소)`
2. **승인 대기**. 승인 없이 산출물에 포함하지 않는다
3. 승인 후 카탈로그에 등재하고 `design.components.md §3` 아이콘 절에 반영한다
4. 등재 시 **의미 중복 검사**(IC-1)를 수행한다
> 이 절차는 아이콘 세트가 무통제로 팽창해 의미 체계가 무너지는 것을 막는다. SAMAN 선행 시스템에서 이미 운용 중인 규칙을 승계한다.
## 6.4 허용 글리프
아이콘 세트 외에, 아래 유니코드 글리프만 "기호"로 사용할 수 있다.
| 글리프 | 용도 | 조건 |
| :--- | :--- | :--- |
| `▲` `▼` | 증감 추세 | **반드시 색 + 라벨과 병기** (색맹 대응) |
| `●` | 범례 마커 | 차트 범례에 한함 |
| `→` | 상호참조 | `(→ 3.4절)` 형식에 한함 |
| `★` | 필수 표시 | 검증 체크리스트에 한함 |
---
# 7. 로고·마크 규약
```yaml
logo:
master: <path> # 원본 (투명 배경, 최대 해상도)
on_light: <path>
on_dark: <path> # 다크 면용 리컬러 변형
mark_only: <path|null> # 심볼 단독
min_width: <object> # 매체별 최소 폭 (Layer 2가 실체화)
clear_space: <string> # 여백 규칙 (마크 높이 배수로 표기)
```
| ID | 규칙 |
| :--- | :--- |
| **LG-1** | 로고는 **재작도하지 않는다.** 제공된 자산 파일만 사용한다 |
| **LG-2** | 로고 색상을 임의 변경하지 않는다. 다크 면에는 `on_dark` 변형을 사용한다 |
| **LG-3** | 로고를 **생성 이미지에 굽지 않는다**(bake). 항상 별도 레이어·컴포넌트로 배치한다 |
| **LG-4** | 여백(clear space)은 **마크 높이의 배수**로 규정한다. 절대 치수로 규정하면 판형 변경 시 무효가 된다 |
| **LG-5** | 최소 폭 미만으로 축소하지 않는다. 미달 시 `mark_only` 변형으로 대체한다 |
---
# 8. 브랜드 인스턴스 #1 — SAMAN
> 본 장은 **스키마의 완전 실체화 예시**이자 실제 운용 인스턴스다. 새 브랜드를 추가할 때 이 장을 형식 참조로 삼는다.
## 8.1 식별·철학
| 슬롯 | 값 |
| :--- | :--- |
| `brand.id` | `saman` |
| `brand.name` | SAMAN (삼안) |
| `brand.philosophy` | **"처음 보지만 익숙하고, 계속 봐도 새로운 디자인"** — *Familiar at first sight, new every time you look.* |
| `brand.mission` | **"기술로 사람과 자연이 함께하는 세상"** — *A world where technology brings people and nature together.* |
### 조작적 정의 (`brand.philosophy.operational`)
| 축 | 정의 | 검증 가능 형태 |
| :--- | :--- | :--- |
| **처음 보지만 익숙한**<br>(Cognitive Fluency) | 낯선 정보의 인지 저항을 최소화한다. 안정적 비례·정렬선·반복 구조로 **예측 가능성**을 만든다 | → `Design.md §2` **PF 규칙군** (그리드 스냅, 허용 분할, 고정선, 여백률, 토큰 전용) |
| **계속 봐도 새로운**<br>(Aesthetic Durability) | 익숙함이 지루함이 되지 않도록 제어한다. 한 화면에 전부 싣지 않고 **레이어드 디테일**을 남긴다 | → `Design.md §2` **PD 규칙군** (단일 결론 존, 대비 위계, 원/근거리 2층, 악센트 희소) |
> 이 조작적 정의가 곧 PF/PD 규칙의 근거다. 슬로건 → 규칙 → 검증의 3단 연결이 끊기지 않아야 한다 (BV-8).
## 8.2 가치축 (3축)
| 축 ID | 국문 | 영문 | design_role | 원색 | usage | economy |
| :--- | :--- | :--- | :--- | :--- | :--- | :--- |
| `nature` | 자연 | Nature | **base** | `green` | 제목·구조선·헤더 면·아이콘·강조 면 | — |
| `technology` | 기술 | Technology | **accent** | `orange` | 아이브로 틱·귀결 커넥터·원칙 마커·단일 강조어 | **단위 화면당 최대 2개 국소 강조** |
| `people` | 사람 | People | **ground** | `brown` | 본문·부제·헤어라인·라벨·테두리 | — |
## 8.3 팔레트
### 원색 (primary)
| id | name | hex | rgb | **GRADE** | axis | role |
| :--- | :--- | :--- | :--- | :-: | :--- | :--- |
| `green` | Deep Forest Green | `#1F524B` | 31, 82, 75 | **69** | nature | base |
| `orange` | Tech Rust Orange | `#D05C26` | 208, 92, 38 | **47** | technology | accent |
| `brown` | Human Earth Brown | `#474235` | 71, 66, 53 | **72** | people | ground |
### 중립색 (neutral)
| id | name | hex | rgb | **GRADE** | role |
| :--- | :--- | :--- | :--- | :-: | :--- |
| `sand` | Sand White | `#F4F3F0` | 244, 243, 240 | **4** | bg_light |
| `obsidian` | Obsidian Black | `#111111` | 17, 17, 17 | **95** | bg_dark |
| `subtle` | Light Gray | `#D3D3D3` | 211, 211, 211 | **15** | subtle |
| `white` | Pure White | `#FFFFFF` | 255, 255, 255 | **0** | on_dark |
> **[정정 이력]** SAMAN 선행 시스템 `design.tokens.json`의 `color.subtle`은 `hex: "#474235"` / `rgb: [211,211,211]`로 **불일치** 상태였다(hex 기준 렌더 시 green 면 위 대비 **1.13:1**). 본 인스턴스는 `design.md §6.1` 표기인 **`#D3D3D3`을 정본**으로 확정한다. [출처: 자체 산출 / SAMAN `design.tokens.json` `color.subtle`]
## 8.4 슬롯 검증 결과 (BV-1 ~ BV-8)
| ID | 판정 | 근거 |
| :--- | :-: | :--- |
| BV-1 모든 원색 GRADE 산출 가능 | **PASS** | 7색 전부 산출 완료 (§8.3) |
| BV-2 본문색 후보 (ΔG ≥ 70 vs bg_light) | **조건부 PASS** | `brown`(72) − `sand`(4) = **ΔG 68** < 70 → CG-2 실측 등록(9.02:1 AAA)으로 사용 |
| BV-3 제목색 후보 (ΔG ≥ 55 vs bg_light) | **PASS** | `green`(69) − `sand`(4) = **ΔG 65** ✓ |
| BV-4 bg 명도 격차 (ΔG ≥ 80) | **PASS** | `obsidian`(95) − `sand`(4) = **ΔG 91** ✓ |
| BV-5 악센트 ΔG < 55 시 금지 명시 | **PASS** | `orange`(47) − `sand`(4) = ΔG 43 → 본문 금지 규칙 §8.7에 명시 ✓ |
| BV-6 서체 요건 | **PASS** | Pretendard — 웨이트 3단 + tabular figures ✓ |
| BV-7 축 수 = 원색 수 | **PASS** | 3 = 3 ✓ |
| BV-8 조작적 정의 존재 | **PASS** | §8.1 ✓ |
> **[CONFLICT DETECTED] BV-2 경계 사례**
> `brown` on `sand`는 ΔG 68로 규칙상 임계(70) 미달이나, **실측 대비는 9.02:1로 AAA를 충족**한다(자체 재계산 검증 완료). GRADE는 보수적 하한이므로 §3.2 단서에 따라 **실측값을 `contrast.pairs`에 명시 등록하여 사용**한다. 규칙 자체는 완화하지 않는다.
## 8.5 대비 실측 등록부 (`contrast.pairs`)
전 쌍 프로그램 재계산 검증 완료 (2026-07-28).
| 전경 | 배경 | ΔG | **실측** | 판정 | 용도 |
| :--- | :--- | :-: | :---: | :--- | :--- |
| brown | sand | 68 | **9.02** | AAA | **본문 기본** |
| green | sand | 65 | **8.00** | AAA | **제목·구조** |
| brown | white | 72 | **10.01** | AAA | 카드 위 본문 |
| green | white | 69 | **8.87** | AAA | 카드 위 제목 |
| white | green | 69 | **8.87** | AAA | 그린 면 위 텍스트 |
| sand | green | 65 | **8.00** | AAA | 그린 면 위 텍스트 |
| subtle | green | 54 | **5.93** | AA | 그린 면 위 보조 텍스트 |
| white | brown | 72 | **10.01** | AAA | 브라운 면 위 텍스트 |
| sand | obsidian | 91 | **17.02** | AAA | 다크 면 위 텍스트 |
| orange | obsidian | 48 | **4.71** | AA | 다크 면 위 악센트 |
| orange | sand | 43 | **3.61** | **Large only** | 대형 악센트 전용 |
| white | orange | 47 | **4.01** | **Large only** | 오렌지 면 위 텍스트 |
| orange | white | 47 | **4.01** | **Large only** | 흰 카드 위 대형 악센트 전용 (v0.1.1 등록) |
| **green** | **obsidian** | **26** | **2.13** | **✗ FAIL** | **금지** |
> **[정정 이력]** SAMAN 선행 시스템은 `green on white`를 **8.93**으로 표기했으나 실측은 **8.87**이다. 본 인스턴스는 8.87로 정정한다.
**GRADE 규칙의 독립 검증**: ΔG 규칙(§3.2)만으로 판정하면 `orange on sand`(ΔG 43 → 대형 전용), `white on orange`(ΔG 47 → 대형 전용), `green on obsidian`(ΔG 26 → 텍스트 금지)이 도출된다. 이는 SAMAN이 **수작업 실측으로 세운 가드레일과 완전히 일치**한다. GRADE 척도가 기존 규칙을 손실 없이 재생산함이 확인되었다.
## 8.6 타이포그래피 슬롯
| 슬롯 | 값 |
| :--- | :--- |
| `family.primary` | **Pretendard** |
| `family.stack` | `Pretendard, -apple-system, BlinkMacSystemFont, "Noto Sans KR", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif` |
| `family.embed` | `assets/fonts/PretendardVariable.ttf` (가변 폰트, 로컬 임베드) |
| `weights` | regular 400 / medium 500 / bold 700 |
| `features` | tabular figures ✓ / variable ✓ |
**표현 규칙**: 한글에는 대소문자가 없으므로, **캡스 톤은 자간(letter-spacing)으로 만든다.** 헤드라인은 좁히고(음수 자간), 라벨·아이브로는 넓힌다(양수 자간). 구체 수치는 `design.foundations.md §3.6`이 정의한다.
## 8.7 보이스 & 금지 목록
```yaml
voice:
stance: 단정적·원칙적·3인칭. 원칙은 원칙으로 못 박는다
distance: 전문가 대 전문가. "여러분"·"우리"로 거리를 좁히지 않는다
register: 규정문체(평서 종결). §5.2 어미 4종만 사용
restraint: 과장·감탄·마케팅 어휘 금지. 확신하되 자랑하지 않는다
```
**보이스 금지 예시**
| 속성 | 금지 예 | 대체 |
| :--- | :--- | :--- |
| stance | "~인 것 같습니다" | "~이다" / 근거 불충분 시 `[추론]` 표기 |
| distance | "우리 모두가 아는 것처럼" | 삭제 |
| register | "꼭 확인해 주세요!" | "확인한다" |
| restraint | "혁신적인 솔루션" | 기능을 사실로 서술 |
### `brand.forbidden[]` (브랜드 차원 절대 금지)
| # | 금지 항목 | 근거 |
| :-: | :--- | :--- |
| 1 | **오렌지 본문 텍스트** (라이트 배경) | ΔG 43 < 55. 대형 텍스트·면에만 |
| 2 | **다크 배경 위 그린 텍스트** | ΔG 26, 실측 2.13:1. 그린은 다크 위에서 면·도형으로만 |
| 3 | **순백(#FFFFFF) 전면 배경** | 대형 화면 눈부심·인쇄 반사. 라이트 배경은 항상 `sand` |
| 4 | **악센트 3개 이상** (단위 화면당) | 악센트 경제 (§2.4) |
| 5 | **이모지** | IC-3 |
| 6 | **생성 이미지에 텍스트·로고 굽기** | LG-3 |
| 7 | **토큰 외 임의 색·치수 하드코딩** | Layer 1 PF 규칙 |
| 8 | **그라디언트 배경** | 플랫 토큰 필만 사용 |
| 9 | **방향어 참조** ("아래 표", "앞서") | §5.7 |
## 8.8 아이코노그래피
| 슬롯 | 값 |
| :--- | :--- |
| `grid` | 64 (정사각) |
| `stroke` | 4 |
| `linecap` / `linejoin` | round / round |
| `fill` | none |
| `color_on_light` | `green` |
| `color_on_dark` | `white` |
| `set_policy` | **bespoke** (자체 제작) |
**카탈로그 (현행)**
| 분류 | 항목 |
| :--- | :--- |
| SVG 라인 아이콘 4종 | `view`(보기) · `verify`(검증) · `barrier`(장벽) · `network`(허브) |
| BIM 래스터 세트 9종 | `plan` · `design` · `construct` · `complete` · `operate` · `section` · `analysis` · `ground` · `cde` |
신규 아이콘은 §6.3 승인 절차를 따른다.
## 8.9 로고
| 슬롯 | 값 |
| :--- | :--- |
| `master` | `assets/saman-logo.png` (투명, 1048×340) |
| `on_light` | `assets/saman-logo.png` |
| `on_dark` | `assets/saman-logo-on-dark.png` (워드마크 sand 리컬러, 다이아몬드 orange 유지) |
| `mark_only` | `assets/saman-mark.png` / `saman-mark-on-dark.png` |
| `clear_space` | 마크 높이의 **1.0배** 이상 |
| `min_width` | Layer 2 매체 프로파일이 실체화 |
---
# 9. 인스턴스 추가 절차
## 9.1 절차
| 단계 | 작업 | 산출 |
| :-: | :--- | :--- |
| 1 | 철학 슬로건 확보 및 **조작적 정의 도출** (2축 이상) | B3·B4 |
| 2 | 가치축 정의 — `design_role` 배정 (base 1 / ground 1 / accent ≤1) | B6 |
| 3 | 원색·중립색 지정, **GRADE 자동 산출** | B7·B8 |
| 4 | **BV-1 ~ BV-8 검증 실행** — 1건이라도 FAIL이면 3단계로 회귀 | 검증표 |
| 5 | 대비 실측 전 쌍 계산 → `contrast.pairs` 등록 | 등록부 |
| 6 | ΔG 미달이나 실측 통과 쌍은 **명시 등록** (암묵 허용 금지) | 등록부 |
| 7 | 서체 슬롯 지정 (TF-1 ~ TF-5 확인) | B9·B10 |
| 8 | 보이스 4속성 + **금지 예시** 작성 | B11 |
| 9 | 문안 규칙 — §5.6 동사 판별표를 **해당 도메인 어휘로 재작성** | B12 |
| 10 | 아이콘 조형 원칙·초기 카탈로그 확정 | B13 |
| 11 | 로고 자산 확보 및 변형 생성 | B14 |
| 12 | `brand.forbidden[]` 확정 — **BV-5 유래 항목 필수 포함** | B15 |
| 13 | `design.tokens.json`의 `brand` 블록에 반영, **md ↔ json 정합 검증** | 토큰 갱신 |
| 14 | 본 파일에 인스턴스 장(章) 추가 → MINOR 버전 증가 | 문서 갱신 |
## 9.2 인스턴스 등록 체크리스트
| # | 항목 | 필수 |
| :-: | :--- | :-: |
| 1 | 슬롯 B1~B15 전부 충족 | ★ |
| 2 | BV-1 ~ BV-8 전부 PASS (경계 사례는 사유 기재) | ★ |
| 3 | `hex` ↔ `rgb` 전 색 일치 검증 | ★ |
| 4 | 대비 실측 전 쌍 프로그램 계산 (수기 계산 금지) | ★ |
| 5 | FAIL 쌍은 `brand.forbidden[]`에 반영 | ★ |
| 6 | 보이스 각 속성에 금지 예시 1개 이상 | ★ |
| 7 | 동사 판별표가 해당 도메인 어휘로 작성됨 | ★ |
| 8 | 아이콘 카탈로그에 의미 중복 없음 (IC-1) | ★ |
| 9 | `Design.md §2` PF/PD 규칙과 조작적 정의가 연결됨 | ★ |
| 10 | `design.tokens.json` 동기화 완료 | ★ |
## 9.3 브랜드 교체 시 영향 범위
| 계층 | 영향 | 재작업 |
| :--- | :--- | :--- |
| **Layer 0** | 전면 교체 | 본 파일 인스턴스 장 신규 작성 |
| **Layer 1** | **영향 없음** | 없음 — 파운데이션은 색의 *의미역할*만 참조하며 HEX를 직접 참조하지 않는다 |
| **Layer 2** | **영향 없음** | 없음 |
| **Layer 3** | **영향 없음** | 없음 — 모듈은 토큰명으로만 지시한다 |
> 이것이 Layer 분리의 실익이다. 브랜드 교체가 **Layer 0 한 파일로 격리**되려면, 하위 계층에서 `#1F524B` 같은 리터럴이 단 한 번도 등장하지 않아야 한다. [출처: design.benchmark, T33 (GOV.UK "hex 값 직접 복사 금지, 함수로만 참조")]
---
## 근거 출처 요약
본 파일이 인용한 벤치마킹 항목: **T4 · T5 · T10 · T21 · T28 · T30 · T31 · T33 · T35 · T36 · T38 · T41 · T44 · T51 · T52 · M12 · M20 · §16-4 · §18-24**
전문: `RAG/design.benchmark_2026-07-28_v0.1.0.md`
`[자체 정의]` 표기 항목: CW-2 어절 기준 · §5.6 동사 판별표 어휘 · §5.8 한국어 가독성 지표 · TF-5 한글 sans 채택 근거
RAG/design system_v0.1.1/design.components.md
+952
View File
@@ -0,0 +1,952 @@
# Prism Design System — Components
| 버전 | 수정일 | 수정자 | 주요 변경 내용 | 비고 |
| :--- | :--- | :--- | :--- | :--- |
| v0.1.0 | 2026-07-28 | 조선두 | 신규 작성 — 블루프린트 문서화 규격, 컴포넌트 카탈로그 8군 25종, 매체 적용 매트릭스, 추가 절차 | 최초 버전 |
| v0.1.1 | 2026-07-29 | HMCM | 미정의 토큰 참조 정정 — `sys.accent`→`sys.text.accent`(3건), `sys.pair.emphasis`→`sys.pair.surface-emphasis`, `sys.stroke.*`→`foundation.stroke.*`(2건) | 진단 T1~T3 보정 (F1 무결성 회복) |
| 메타 | 값 |
| :--- | :--- |
| 파일 | `design.components.md` |
| 계층 | **Layer 1~2 교차** — 매체 중립 정의 + 매체별 변형 |
| 역할 | 컴포넌트 **참조 사양(Blueprint)** 카탈로그 |
| 상위 | `design.foundations.md` (Layer 1) · `design.medium.*.md` (Layer 2) |
| 하위 | Layer 3 모듈 — 본 카탈로그에서 **선별**하여 사용 |
| 로드 정책 | **온디맨드** (존·블록 구성 시) |
> **본 카탈로그는 라이브러리가 아니라 참조 사양이다.** 여기의 정의가 개정되어도 이미 제작된 산출물이 자동으로 갱신되지 않는다. [출처: design.benchmark, T25 — SLDS "If SLDS updates the blueprint, your component code isn't updated automatically"]
---
## 목차
- [1. 문서화 규격 (Blueprint)](#1-문서화-규격-blueprint)
- [2. 매체 중립 정의 원칙](#2-매체-중립-정의-원칙)
- [3. 카탈로그](#3-카탈로그)
- [3.1 크롬 (Chrome)](#31-크롬-chrome)
- [3.2 구조 (Structure)](#32-구조-structure)
- [3.3 데이터 (Data)](#33-데이터-data)
- [3.4 지침 (Directive)](#34-지침-directive)
- [3.5 상태 (Status)](#35-상태-status)
- [3.6 내비게이션 (Navigation)](#36-내비게이션-navigation)
- [3.7 미디어 (Media)](#37-미디어-media)
- [3.8 컨트롤 (Control) — screen 전용](#38-컨트롤-control--screen-전용)
- [4. 매체 적용 매트릭스](#4-매체-적용-매트릭스)
- [5. 변형 관리 원칙](#5-변형-관리-원칙)
- [6. 컴포넌트 추가 절차](#6-컴포넌트-추가-절차)
---
# 1. 문서화 규격 (Blueprint)
## 1.1 골격
모든 컴포넌트 항목은 **동일한 골격**으로 기술한다. 골격이 고정되어야 열람자가 원하는 정보를 위치로 찾는다. [출처: design.benchmark, T22 (SLDS `docs.mdx` 원본 구조 — 메타헤더 + lead 1~2문장 + 히어로 예제 + About + Base + 변형 + 훅 표)]
```
### <컴포넌트명> (`component.<id>`)
**메타 4필드** ← 표 1행 (T23)
lead 1~2문장 ← "이것이 무엇이고 언제 쓰는가"
**해부구조** ← 부위 목록 (T27)
**변형** ← 1변형 = 1행 (T24)
**토큰** ← 소비하는 sys 토큰 표
**규칙** ← ID 부여된 규칙 표
**접근성** ← screen 적용 시에만
```
## 1.2 메타 4필드
SLDS의 페이지 헤더 메타(구현체 링크 / HTML·CSS 상태 / 구현 상태 / Layout)를 본 시스템 용도로 치환한다. [출처: design.benchmark, T23]
| 필드 | 값 |
| :--- | :--- |
| **분류** | 크롬 / 구조 / 데이터 / 지침 / 상태 / 내비게이션 / 미디어 / 컨트롤 |
| **상태** | `active` · `deprecated` · `draft` |
| **적용 매체** | `print` · `presentation` · `screen` 중 해당 항목 |
| **계층** | 컨테이너 / 블록 / 인라인 |
## 1.3 lead 문장
| ID | 규칙 |
| :--- | :--- |
| **BP-1** | lead는 **1~2문장**이다. 3문장을 넘으면 규칙이나 해부구조로 내려야 할 내용이 섞인 것이다 |
| **BP-2** | lead는 **"무엇이고 언제 쓰는가"** 를 답한다. 어떻게 만드는가는 답하지 않는다 |
| **BP-3** | lead 다음에 **가장 대표적인 사용 예 1개**를 둔다. 예가 없는 컴포넌트는 문서화되지 않은 것으로 본다 |
> **lead + 대표 예를 항상 최상단에 두는 이유**: 투사·화면 열람 시 첫 화면에서 파악이 끝나야 한다.
## 1.4 해부구조 = 문안 규칙의 목차
컴포넌트의 부위 목록은 그대로 **문안 작성 규칙의 목차**가 된다. [출처: design.benchmark, T27 (Polaris Banner: Title / Body / Buttons / Secondary body)]
각 부위에 대해 **분량 예산과 문안 규칙**을 함께 기술한다. 부위 이름만 나열하고 끝내지 않는다.
---
# 2. 매체 중립 정의 원칙
## 2.1 정의는 중립, 표현은 매체별
| ID | 규칙 |
| :--- | :--- |
| **MN-1** | 컴포넌트의 **의미·해부구조·문안 규칙은 매체 무관**하게 1회만 정의한다 |
| **MN-2** | **치수·색·표현 방식은 토큰 참조**로만 기술한다. 절대값을 쓰지 않는다 |
| **MN-3** | 매체별로 달라지는 부분은 **변형표(Variation Table)** 로 별도 명시한다 |
| **MN-4** | 매체 하나에서만 성립하는 컴포넌트는 **`적용 매체`에 그 매체만** 적는다 (예: Modal은 screen 전용) |
## 2.2 변형표 읽는 법
```
| 항목 | print | presentation | screen |
| :---------- | :------------- | :------------- | :------------- |
| 깊이 표현 | 헤어라인 보더 | 헤어라인 보더 | 보더 + 그림자 |
```
- 셀이 **비어 있으면** 그 매체에서 해당 항목을 쓰지 않는다는 뜻이다
- 셀이 **"동일"** 이면 좌측 매체와 같다는 뜻이다
- 매체별 절대값은 각 `design.medium.*.md`가 공급한다
## 2.3 컴포넌트 계층
| 계층 | 정의 | 그리드 정렬 |
| :--- | :--- | :---: |
| **컨테이너** | 존(zone)을 차지하는 최상위 요소 | **정렬함** |
| **블록** | 컨테이너 안의 구성 단위 | 정렬 안 함 (스페이싱 토큰) |
| **인라인** | 텍스트 흐름 안의 요소 | 정렬 안 함 |
> Layer 1 GR-1·GR-2("최상위 컨테이너만 그리드에, 내부는 스페이싱 토큰")의 직접 구현이다. [출처: design.benchmark, T15]
---
# 3. 카탈로그
## 3.1 크롬 (Chrome)
### 3.1.1 아이브로 (`component.eyebrow`)
| 분류 | 상태 | 적용 매체 | 계층 |
| :--- | :--- | :--- | :--- |
| 크롬 | `active` | print · presentation · screen | 인라인 |
상위 분류·맥락을 한 줄로 알리는 소형 라벨이다. 제목 바로 위에 놓여 "지금 어디를 보고 있는가"를 답한다.
**해부구조**
| 부위 | 내용 | 분량 예산 | 문안 규칙 |
| :--- | :--- | :--- | :--- |
| 틱(tick) | 악센트 색 소형 도형 | — | 장식이 아니라 **위치 표지** |
| 라벨 | 상위 분류명 | **최대 20자** | 명사형. 어미 없음 |
**변형**
| 변형 | 용도 |
| :--- | :--- |
| `base` | 기본 |
| `no-tick` | 틱 생략 (악센트 경제 초과 시) |
**토큰**: `sys.type.caption` + `.eyebrow` 톤 / `sys.text.on-subtle` / 틱은 `sys.text.accent`
**규칙**
| ID | 규칙 |
| :--- | :--- |
| **EB-1** | 아이브로 틱은 **악센트 경제에 카운트**된다 (Layer 1 AE-1) |
| **EB-2** | 라벨은 **문장이 아니다.** 마침표를 붙이지 않는다 |
| **EB-3** | 한 컨테이너에 아이브로는 **1개**다 |
---
### 3.1.2 헤더 (`component.header`)
| 분류 | 상태 | 적용 매체 | 계층 |
| :--- | :--- | :--- | :--- |
| 크롬 | `active` | print · presentation · screen | 컨테이너 |
지면·화면 상단의 고정 식별 영역이다. 아이브로·제목·메타를 담는다.
**해부구조**
| 부위 | 내용 | 분량 예산 | 문안 규칙 |
| :--- | :--- | :--- | :--- |
| 아이브로 | `component.eyebrow` | 20자 | §3.1.1 |
| 제목 | 해당 단위의 주제 | **25자 이내(1줄), 최대 40자(2줄 초과 금지)** | 명사형 (브랜드 §5.2) |
| 메타 | 식별 4필드 | 각 12자 | 아래 |
| 구분선 | `component.rule` | — | — |
**메타 4필드** (Layer 3 모듈이 의미를 지정) [출처: design.benchmark, T23]
| 슬롯 | 편람 예 | 웹앱 예 |
| :--- | :--- | :--- |
| 슬롯 1 | 도면 분류 | 화면 ID |
| 슬롯 2 | 개정 상태 | 권한 범위 |
| 슬롯 3 | 적용 공종 | 데이터 갱신 시각 |
| 슬롯 4 | 승인 단계 | 환경 표시 |
**변형표**
| 항목 | print | presentation | screen |
| :--- | :--- | :--- | :--- |
| 높이 | 판면 상단 고정 | 헤더 존 (§4.3) | `sticky` 허용 |
| 페이지 번호 | **러닝헤드에 위치** | 푸터 | 없음 |
| 메타 표시 | 4필드 전부 | 2필드로 축약 | 4필드, `xs`에서 2필드 |
**규칙**
| ID | 규칙 |
| :--- | :--- |
| **HD-1** | 제목이 **2줄을 초과하면 제목이 잘못된 것이다.** 축약하거나 아이브로로 분리한다 |
| **HD-2** | 헤더는 콘텐츠 영역을 **침범하지 않는다** |
| **HD-3** | 메타 슬롯의 의미는 **문서 전체에서 일관**해야 한다 |
---
### 3.1.3 히어로 (`component.hero`)
| 분류 | 상태 | 적용 매체 | 계층 |
| :--- | :--- | :--- | :--- |
| 크롬 | `active` | presentation · screen · (print: 장 도비라) | 컨테이너 |
표지·장 시작·랜딩 상단의 대형 진술 영역이다. 한 문장으로 전체를 규정한다.
**해부구조**
| 부위 | 내용 | 분량 예산 | 문안 규칙 |
| :--- | :--- | :--- | :--- |
| 헤드라인 | 핵심 진술 | **최대 35자** | 원칙 진술. 3인칭 단정 (브랜드 §8.7) |
| 강조어 | 헤드라인 내 1개 단어 | 최대 8자 | 악센트 색 — 경제에 카운트 |
| 부제 | 보조 설명 | **최대 60자** | 완결 문장 |
**토큰**: 헤드라인 `sys.type.display` / 부제 `sys.type.body-lg` / 강조어 `sys.text.accent`
**규칙**
| ID | 규칙 |
| :--- | :--- |
| **HR-1** | 강조어는 **1개**다. 두 단어를 강조하면 강조가 아니다 |
| **HR-2** | 헤드라인에 **줄바꿈을 수동 삽입하지 않는다** (매체별 폭이 다르다) |
| **HR-3** | print에서는 **장 도비라에만** 사용한다 |
---
### 3.1.4 구분선 (`component.rule`)
| 분류 | 상태 | 적용 매체 | 계층 |
| :--- | :--- | :--- | :--- |
| 크롬 | `active` | 전 매체 | 블록 |
영역을 나누는 수평·수직 선이다.
**토큰**: `foundation.stroke.hairline` / `sys.border.subtle`
**규칙**
| ID | 규칙 |
| :--- | :--- |
| **RL-1** | **간격으로 나눌 수 있으면 선을 쓰지 않는다** (Layer 1 §4.5 근접성 우선) |
| **RL-2** | 선의 대비는 **ΔG ≥ 40** (비텍스트 대비) |
| **RL-3** | 인접한 선을 **2줄 이상 겹치지 않는다** (표 테두리 + 구분선 중복) |
---
### 3.1.5 푸터 (`component.footer`)
| 분류 | 상태 | 적용 매체 | 계층 |
| :--- | :--- | :--- | :--- |
| 크롬 | `active` | print · presentation | 컨테이너 |
출처·페이지·버전을 담는 하단 고정 영역이다.
**해부구조**
| 부위 | print | presentation |
| :--- | :--- | :--- |
| 좌 | 문서명 · 장 제목 | 맥락·분석 프레임 |
| 우 | **`<장>-<면>`** · 버전 · 발행일 | 브랜드 · 버전 · 페이지 |
| 출처 | 각주 영역 상단 | 슬라이드 하단 `[출처: …]` |
**규칙**
| ID | 규칙 |
| :--- | :--- |
| **FT-1** | 푸터 존은 **불가침**이다. 콘텐츠가 침범하지 않는다 |
| **FT-2** | 출처 표기는 `caption` 이상이다. 읽지 못할 크기로 두지 않는다 |
| **FT-3** | 데이터 인용이 있으면 **출처를 생략하지 않는다** (Layer 1 근거 표기) |
---
## 3.2 구조 (Structure)
### 3.2.1 카드 (`component.card`)
| 분류 | 상태 | 적용 매체 | 계층 |
| :--- | :--- | :--- | :--- |
| 구조 | `active` | 전 매체 | 컨테이너 / 블록 |
관련 정보를 하나의 면으로 묶는 기본 컨테이너다.
**해부구조**
| 부위 | 분량 예산 | 문안 규칙 |
| :--- | :--- | :--- |
| 라벨 (선택) | 15자 | 명사형 |
| 제목 | **20자** | 명사형 |
| 본문 | **60~90자** (최대 120자) | 완결 문장 |
| 각주·출처 (선택) | 30자 | `[출처: …]` |
**변형**
| 변형 | 표현 |
| :--- | :--- |
| `base` | 기본 면 + 보더 |
| `emphasis` | GRADE +1 스텝 또는 보더 승격 |
| `prominent` | 면 반전 (container ↔ on) |
| `quiet` | 보더만, 면 없음 |
**변형표**
| 항목 | print | presentation | screen |
| :--- | :--- | :--- | :--- |
| 깊이 | **헤어라인 보더** | 헤어라인 보더 | 보더 (+ 그림자 보조) |
| 그림자 | **금지** | **금지** | `raised` 허용 |
| 반경 | `radius.md` (3mm) | `radius.md` (12px) | `radius.md` (8px) |
| 상태 | 없음 | 없음 | hover·focus·selected |
**규칙**
| ID | 규칙 |
| :--- | :--- |
| **CD-1** | 카드는 **보더로 분리**한다. 그림자는 screen에서만 보조로 쓴다 (Layer 1 EL-4) |
| **CD-2** | 중첩 카드는 **2단계까지**다. 3단계 중첩은 정보 구조가 잘못된 것이다 |
| **CD-3** | 중첩 시 **안쪽 반경 < 바깥쪽 반경** (Layer 1 RD-2) |
| **CD-4** | 카드 안에 카드 제목 외의 **헤딩 레벨을 두지 않는다** |
---
### 3.2.2 스테이지 카드 (`component.stagecard`)
| 분류 | 상태 | 적용 매체 | 계층 |
| :--- | :--- | :--- | :--- |
| 구조 | `active` | 전 매체 | 블록 |
프로세스의 한 단계를 표현하는 카드다. 커넥터와 함께 쓰인다.
**해부구조**: 단계 번호 / 아이콘(선택) / 단계명(**15자**) / 설명(**40~60자**)
**변형**
| 변형 | 용도 |
| :--- | :--- |
| `base` | 일반 단계 |
| `highlight` | 귀결·핵심 단계 (면 반전) |
| `optional` | 조건부 단계 (점선 보더) |
**규칙**
| ID | 규칙 |
| :--- | :--- |
| **SG-1** | 한 프로세스의 단계는 **3~5개**다. 6개 이상이면 분할한다 |
| **SG-2** | `highlight`는 **1개**다 |
| **SG-3** | 단계 번호는 **생략하지 않는다** (순서가 의미이므로) |
---
### 3.2.3 커넥터 (`component.connector`)
| 분류 | 상태 | 적용 매체 | 계층 |
| :--- | :--- | :--- | :--- |
| 구조 | `active` | 전 매체 | 인라인 |
단계 간 흐름·인과를 잇는 선이다.
**토큰**: `foundation.stroke.connector` / `sys.border.default` / 귀결 커넥터만 `sys.text.accent`
**규칙**
| ID | 규칙 |
| :--- | :--- |
| **CN-1** | **귀결(마지막) 커넥터만** 악센트 색을 쓴다. 악센트 경제에 카운트된다 |
| **CN-2** | 방향은 **화살촉 형태**로 표현한다. 색만으로 방향을 알리지 않는다 (Layer 1 CO-1) |
| **CN-3** | 분기 커넥터에는 **조건 라벨**을 붙인다 (브랜드 §5.4 조건문 규칙) |
---
### 3.2.4 원칙 마커 (`component.principle`)
| 분류 | 상태 | 적용 매체 | 계층 |
| :--- | :--- | :--- | :--- |
| 구조 | `active` | 전 매체 | 블록 |
핵심 결론·원칙을 지면에서 격리해 못 박는 블록이다.
**해부구조**: 좌측 악센트 바 / 키커(**12자**) / 진술문(**40~80자**)
**규칙**
| ID | 규칙 |
| :--- | :--- |
| **PM-1** | **단위 화면당 1개**다 (Layer 1 PD-1 단일 결론 존) |
| **PM-2** | 악센트 바는 **경제에 카운트**된다 |
| **PM-3** | 진술문은 **원칙**이어야 한다. 사실 나열은 본문에 둔다 |
---
## 3.3 데이터 (Data)
### 3.3.1 표 (`component.table`)
| 분류 | 상태 | 적용 매체 | 계층 |
| :--- | :--- | :--- | :--- |
| 데이터 | `active` | 전 매체 | 컨테이너 |
행·열 구조의 정형 데이터다. 편람에서 가장 지배적인 컴포넌트다.
**해부구조**: 캡션 / 헤더 행 / 본문 행 / 합계 행(선택) / 출처
**변형**
| 변형 | 용도 |
| :--- | :--- |
| `base` | 기본 |
| `striped` | 행 교대 음영 (10행 이상) |
| `compact` | 고밀도 (`body-sm`) |
| `matrix` | 행·열 모두 헤더 |
**변형표**
| 항목 | print | presentation | screen |
| :--- | :--- | :--- | :--- |
| 헤더 반복 | **매 면 반복 필수** | 슬라이드마다 | `sticky` 헤더 |
| 분절 | **행 중간 분절 금지** | 슬라이드 분할 | 가로 스크롤 허용 |
| 셀 최소 크기 | 7.5pt | 19px | 13px |
| 정렬 | 수치 우측·등폭 | 동일 | 동일 |
| 상태 | 없음 | 없음 | 행 hover·선택 |
**규칙**
| ID | 규칙 |
| :--- | :--- |
| **TB-1** | 수치 열은 **등폭 숫자 + 우측 정렬** (Layer 1 NM-1·NM-2) |
| **TB-2** | 셀 텍스트 **40자 초과 시 압축**하고 원문은 상세면·부록으로 이관한다 |
| **TB-3** | `striped` 음영의 인접 대비는 **ΔG 5~9**. 그 이상이면 시각 소음이 된다 |
| **TB-4** | 빈 셀에는 **`—`(엠대시)** 를 넣는다. 공백으로 두지 않는다 (누락과 무값의 구분) |
| **TB-5** | 표 안에 표를 넣지 않는다 |
| **TB-6** | 단위는 **열 헤더에 1회** 표기한다. 매 셀에 반복하지 않는다 |
**접근성 (screen)**: `<caption>` 필수 / `<th scope>` 지정 / 레이아웃 용도 표 금지
---
### 3.3.2 수치 강조 (`component.stat`)
| 분류 | 상태 | 적용 매체 | 계층 |
| :--- | :--- | :--- | :--- |
| 데이터 | `active` | 전 매체 | 블록 |
단일 수치를 크게 제시하는 블록이다.
**해부구조**: 라벨(**15자**) / 수치 / 단위 / 증감 표기(선택) / 주석(**25자**)
**토큰**: 수치 `sys.type.display` + `.metric` 톤 / 라벨 `sys.type.caption` + `.label` 톤
**규칙**
| ID | 규칙 |
| :--- | :--- |
| **ST-1** | 수치와 단위 사이에 **줄바꿈이 발생하지 않는다** (비분리 공백, Layer 1 NM-4) |
| **ST-2** | 증감은 **기호(▲▼) + 색 + 라벨** 3중 표기한다 (Layer 1 CO-5) |
| **ST-3** | 한 존에 `stat`은 **3개 이하**다 |
| **ST-4** | 수치의 **기준 시점·모수**를 주석에 명시한다 |
---
### 3.3.3 차트 프레임 (`component.chartframe`)
| 분류 | 상태 | 적용 매체 | 계층 |
| :--- | :--- | :--- | :--- |
| 데이터 | `active` | 전 매체 | 컨테이너 |
차트를 담는 프레임이다. 차트 본체가 아니라 **프레임·축·범례·라벨의 규약**을 정의한다.
**해부구조**: 제목(**25자**) / 축 라벨 / 계열 라벨 / 범례 / 출처
**규칙**
| ID | 규칙 |
| :--- | :--- |
| **CF-1** | **직접 라벨링을 우선**한다. 범례는 직접 라벨이 불가능할 때만 |
| **CF-2** | **차트 색 면 위에 텍스트를 얹지 않는다.** 옆에 배치한다 (Layer 1 CO-3) |
| **CF-3** | 계열 3개 이상이면 **패턴·해칭을 병기**한다 (Layer 1 DV-3) |
| **CF-4** | 계열은 **5개 상한**, 초과 시 차트를 분할한다 (Layer 1 DV-1) |
| **CF-5** | 인접 색 면 사이에 **여백 또는 보더**를 둔다 (Layer 1 CO-4) |
| **CF-6** | 축 시작점을 **0이 아닌 값으로 두려면 명시**한다 |
| **CF-7** | 프레임 종횡비는 Layer 1 §5.4의 **6개 비율**로 제한한다 |
| **CF-8** | 차트 텍스트는 `sys.text.*` 토큰을 쓴다. 시각화 색은 **면 전용**이다 (Layer 1 DV-2) |
**접근성 (screen)**: 표 대체 포맷 제공 / `<title>`·`aria-label` / 색 대비 ΔG ≥ 40
---
### 3.3.4 수치 명세표 (`component.specsheet`)
| 분류 | 상태 | 적용 매체 | 계층 |
| :--- | :--- | :--- | :--- |
| 데이터 | `active` | print · screen | 블록 |
각 항목 말미에 **고정 위치**로 붙는 적용 치수·재료 규격 표다. [출처: design.benchmark, M14 (SLDS `## Styling Hooks Overview` 자동 생성 표를 수동 표준 서식으로 치환)]
**규칙**
| ID | 규칙 |
| :--- | :--- |
| **SS-1** | **항목 말미 고정 위치**에 둔다. 위치가 흔들리면 참조 가치가 사라진다 |
| **SS-2** | 열 구성은 **문서 전체에서 동일**하다 |
| **SS-3** | 값이 없으면 `—`, 해당 없으면 `N/A`로 구분 표기한다 |
---
## 3.4 지침 (Directive)
### 3.4.1 지침 카드 (`component.directive`)
| 분류 | 상태 | 적용 매체 | 계층 |
| :--- | :--- | :--- | :--- |
| 지침 | `active` | 전 매체 | 블록 |
권장·금지·주의·참고를 4상태로 표기하는 카드다. **좌우 2단 배치가 A3 가로·와이드 화면에 자연스럽게 앉는다.** [출처: design.benchmark, T21 (Polaris DirectiveCard)]
**해부구조**
| 부위 | 분량 예산 | 문안 규칙 |
| :--- | :--- | :--- |
| 기호 | — | **1차 부호. 생략 금지** |
| 상태 라벨 | 6자 | 고정 어휘 |
| 진술 | **80~100자** (최대 130자) | 완결 문장. 어미는 상태별 고정 |
**4상태**
| 상태 | **기호** | 라벨 | 어미 (브랜드 §5.6) | `on` / `container` |
| :--- | :---: | :--- | :--- | :--- |
| Do | **✓** | 권장 | `~한다` / `~를 권장한다` | `sys.status.do` |
| Don't | **✕** | 금지 | `~하지 않는다` / `~를 금지한다` | `sys.status.dont` |
| Caution | **▲** | 주의 | `~인 경우에는, ~한다` | `sys.status.caution` |
| Tip | **▣** | 참고 | `~할 수 있다` | `sys.status.tip` |
**변형**
| 변형 | 용도 |
| :--- | :--- |
| `single` | 단일 상태 |
| `pair` | Do / Don't 좌우 2단 |
| `stack` | 4상태 수직 나열 |
**규칙**
| ID | 규칙 |
| :--- | :--- |
| **DR-1** | **기호를 생략하지 않는다.** 색만 있는 상태 표기는 금지 (Layer 1 ST-1) |
| **DR-2** | 4상태의 GRADE는 **의도적으로 균일(66~68)** 하다. 흑백에서 색이 구분되지 않으나 **기호로 구분되므로 정보 손실이 없다** (Layer 1 ST-2) |
| **DR-3** | 지침 카드 색은 **악센트 경제에 카운트하지 않는다** (Layer 1 AE-3) |
| **DR-4** | `pair` 변형에서 **Do를 좌측**에 둔다. 순서를 뒤집지 않는다 |
| **DR-5** | 진술은 **"무엇을 하라/하지 마라"** 로 끝난다. 이유는 별도 문장으로 |
---
## 3.5 상태 (Status)
### 3.5.1 뱃지 (`component.badge`)
| 분류 | 상태 | 적용 매체 | 계층 |
| :--- | :--- | :--- | :--- |
| 상태 | `active` | 전 매체 | 인라인 |
항목의 상태·구분을 짧게 표시하는 인라인 표지다.
**해부구조**: 기호(선택) / 텍스트(**최대 6자**)
**변형 — 형태 + 색 이중 부호화**
| 변형 | **형태 신호** | 색 |
| :--- | :--- | :--- |
| `neutral` | 실선 보더 | `sys.border.default` |
| `emphasis` | **면 채움** | `sys.pair.surface-emphasis` |
| `outline` | **점선 보더** | `sys.border.subtle` |
| `marked` | **선행 기호 부착** | 상태색 |
**규칙**
| ID | 규칙 |
| :--- | :--- |
| **BD-1** | 뱃지는 **형태로도 구분**되어야 한다. 색만 다른 뱃지 세트를 만들지 않는다 (Layer 1 CO-1) |
| **BD-2** | 5종 이상의 뱃지가 필요하면 **뱃지가 아니라 표의 열**로 표현한다 |
| **BD-3** | 뱃지 텍스트는 **6자 이내**다. 문장을 넣지 않는다 |
| **BD-4** | 뱃지 색은 악센트 경제에 카운트하지 않는다 |
> **선행 시스템 결함 대응**: 이전 A3 시스템은 개정 구분 5종(유지/보완/갱신/대체/신규)을 **색상만으로** 구분했다. 흑백 출력 시 판별이 불가능하다. `marked` 변형(선행 기호 부착)으로 해소한다.
---
### 3.5.2 적용 조건 블록 (`component.scope`)
| 분류 | 상태 | 적용 매체 | 계층 |
| :--- | :--- | :--- | :--- |
| 상태 | `active` | 전 매체 | 블록 |
각 항목 **최상단에 고정**되어 적용·제외 조건을 알린다. 독자가 해당 없음을 빨리 확인하고 이탈할 수 있게 한다. [출처: design.benchmark, T31 ("Let readers fail fast")]
**해부구조**
| 부위 | 내용 | 분량 예산 |
| :--- | :--- | :--- |
| 적용 조건 | 이 항목이 적용되는 경우 | 항목당 30자, 최대 4항목 |
| 제외 조건 | 적용되지 않는 경우 | 항목당 30자, 최대 3항목 |
| 선행 요건 | 미리 충족해야 할 것 | 항목당 30자 |
**규칙**
| ID | 규칙 |
| :--- | :--- |
| **SC-1** | **항목 최상단 고정**이다. 절차 목록 뒤에 두지 않는다 |
| **SC-2** | 조건은 **`~인 경우` 형식**으로 쓴다 (브랜드 §5.4) |
| **SC-3** | 제외 조건이 없으면 **"없음"이라고 명시**한다. 빈칸으로 두지 않는다 |
---
## 3.6 내비게이션 (Navigation)
### 3.6.1 목차 블록 (`component.toc`)
| 분류 | 상태 | 적용 매체 | 계층 |
| :--- | :--- | :--- | :--- |
| 내비게이션 | `active` | 전 매체 | 블록 |
장·섹션 첫 면에 고정되는 하위 목차다. **GOV.UK가 아코디언 대신 권장한 1순위 패턴**이며, 이것이 곧 인쇄물의 기본형이다. [출처: design.benchmark, T37]
**규칙**
| ID | 규칙 |
| :--- | :--- |
| **TC-1** | 각 장 **첫 면에 고정 배치**한다 |
| **TC-2** | 표시 깊이는 **2단계**까지다 (절까지) |
| **TC-3** | print은 **면수를 병기**한다 (`3.4 검토 절차 … 3-27`) |
| **TC-4** | screen은 **앵커 링크**로 구현한다 |
| **TC-5** | 같은 레벨 항목의 **어미를 통일**한다 (브랜드 §5.2) |
---
### 3.6.2 단계 인디케이터 (`component.stepper`)
| 분류 | 상태 | 적용 매체 | 계층 |
| :--- | :--- | :--- | :--- |
| 내비게이션 | `active` | 전 매체 | 컨테이너 |
다단계 절차에서 현재 위치를 알린다. **A3 가로에서는 좌측 1열을 고정 인디케이터로 사용**한다. [출처: design.benchmark, M15 (GOV.UK Step by step navigation — 8라운드 사용자 조사 + Digital Accessibility Centre 리뷰 근거)]
**변형표**
| 항목 | print | presentation | screen |
| :--- | :--- | :--- | :--- |
| 배치 | **좌측 1열 고정** | 상단 수평 | 상단 수평 / `xs`는 압축 |
| 현재 위치 | 면수 표기 | 하이라이트 | 하이라이트 + `aria-current` |
| 완료 표시 | ✓ 기호 | ✓ 기호 | ✓ 기호 |
**규칙**
| ID | 규칙 |
| :--- | :--- |
| **SP-1** | 현재 위치는 **색 + 형태(굵기·기호)** 로 표시한다 (Layer 1 CO-1) |
| **SP-2** | 단계 수는 **3~7개**다 |
| **SP-3** | 완료·현재·미완의 **3상태를 형태로 구분**한다 |
---
### 3.6.3 상호참조 (`component.xref`)
| 분류 | 상태 | 적용 매체 | 계층 |
| :--- | :--- | :--- | :--- |
| 내비게이션 | `active` | 전 매체 | 인라인 |
다른 절·표·그림을 가리키는 인라인 참조다.
**형식**
| 매체 | 형식 |
| :--- | :--- |
| print | `(→ 3.4절, p.3-27)` |
| presentation | `(→ 3.4)` |
| screen | 앵커 링크 + 접근 가능한 이름 |
**규칙**
| ID | 규칙 |
| :--- | :--- |
| **XR-1** | **방향어를 쓰지 않는다** ("아래 표", "앞서") — 브랜드 §5.7 |
| **XR-2** | 참조 대상에 **번호가 없으면 번호를 부여**한다 |
| **XR-3** | screen에서 링크 텍스트는 **문맥 없이도 목적지를 알 수 있어야** 한다 |
---
## 3.7 미디어 (Media)
### 3.7.1 도판 프레임 (`component.mediaframe`)
| 분류 | 상태 | 적용 매체 | 계층 |
| :--- | :--- | :--- | :--- |
| 미디어 | `active` | 전 매체 | 컨테이너 |
이미지·도면·다이어그램을 담는 프레임이다.
**해부구조**: 프레임 / 도판 / 번호(`[그림 3-4]`) / 캡션(**최대 60자**) / 출처
**규칙**
| ID | 규칙 | 근거 |
| :--- | :--- | :--- |
| **MF-1** | **전체 도면을 통째로 싣지 않는다. 해당 부위만 크롭**한다 | [출처: T29 (Polaris Screenshots)] |
| **MF-2** | 크롭 시 **여백을 균등**하게 남긴다 | T29 |
| **MF-3** | 한 절차의 **모든 단계에 도판을 넣지 않는다.** 판단이 갈리는 지점에만 | T29 |
| **MF-4** | 워크플로 내에서 **크롭 범위·배율을 일관**되게 한다 | T29 |
| **MF-5** | 종횡비는 **6개 비율**로 제한한다 (Layer 1 §5.4) | T17 |
| **MF-6** | **텍스트·로고를 도판에 굽지 않는다.** 라벨은 조판 텍스트로 | 브랜드 LG-3 |
| **MF-7** | 도판과 캡션을 **분리하지 않는다** (print PG-3) | |
| **MF-8** | 대체 텍스트를 부여한다 (screen A9) | |
---
## 3.8 컨트롤 (Control) — screen 전용
> 본 절의 컴포넌트는 **`screen` 매체에서만** 성립한다. `print`·`presentation`에는 대응물이 없다.
### 3.8.1 버튼 (`component.button`)
| 분류 | 상태 | 적용 매체 | 계층 |
| :--- | :--- | :--- | :--- |
| 컨트롤 | `active` | **screen** | 인라인 |
사용자 액션을 실행하는 컨트롤이다.
**변형**
| 변형 | 용도 | 한 화면 내 개수 |
| :--- | :--- | :--- |
| `primary` | 주 액션 | **1개** |
| `secondary` | 보조 액션 | 제한 없음 |
| `quiet` | 저강조 액션 | 제한 없음 |
| `danger` | 파괴적 액션 | 확인 절차 필수 |
**규칙**
| ID | 규칙 |
| :--- | :--- |
| **BT-1** | `primary`는 **한 화면(또는 한 영역)에 1개**다 |
| **BT-2** | 레이블은 **동사로 시작**한다 (브랜드 §5.6 동사 판별표) |
| **BT-3** | 레이블은 **최대 8자**. "확인"보다 "저장"처럼 **결과를 말한다** |
| **BT-4** | 히트 영역 **≥ 44px** (screen §8.1) |
| **BT-5** | 상태는 GRADE 시프트로 표현한다 (screen §6.2) |
| **BT-6** | `disabled` 대신 **활성 + 오류 메시지**를 우선 검토한다 (screen DS-4) |
| **BT-7** | 아이콘 전용 버튼에 **접근 가능한 이름**을 부여한다 |
---
### 3.8.2 입력 (`component.input`)
| 분류 | 상태 | 적용 매체 | 계층 |
| :--- | :--- | :--- | :--- |
| 컨트롤 | `active` | **screen** | 블록 |
**해부구조**: 레이블 / 필드 / 도움말(**40자**) / 오류 메시지(**60자**)
**규칙**
| ID | 규칙 |
| :--- | :--- |
| **IN-1** | **레이블을 플레이스홀더로 대체하지 않는다.** 입력 시작 시 사라진다 |
| **IN-2** | 오류 메시지는 **무엇이·왜·어떻게** 3요소를 갖춘다 [출처: T-Polaris error 3분할] |
| **IN-3** | 오류는 **색 + 기호 + 텍스트** 3중 표기한다 |
| **IN-4** | 필수 항목 표시는 **`*`가 아니라 텍스트**로 한다 (`*`는 낭독되지 않는다) |
| **IN-5** | 필드 보더 대비 **ΔG ≥ 40** (비텍스트 대비) |
---
### 3.8.3 모달 (`component.modal`)
| 분류 | 상태 | 적용 매체 | 계층 |
| :--- | :--- | :--- | :--- |
| 컨트롤 | `active` | **screen** | 컨테이너 |
**규칙**
| ID | 규칙 |
| :--- | :--- |
| **MD-1** | **포커스를 가둔다.** 닫으면 호출 요소로 복귀한다 (screen FO-3) |
| **MD-2** | `Esc`로 닫힌다 (파괴적 확인 다이얼로그는 예외) |
| **MD-3** | 스크림 **32%** (screen §9.2) |
| **MD-4** | 모달 안에 모달을 열지 않는다 |
| **MD-5** | 스크롤은 **모달 내부**에서만 발생한다 (배경 스크롤 잠금) |
---
### 3.8.4 알림 (`component.toast`)
| 분류 | 상태 | 적용 매체 | 계층 |
| :--- | :--- | :--- | :--- |
| 컨트롤 | `active` | **screen** | 컨테이너 |
**규칙**
| ID | 규칙 |
| :--- | :--- |
| **TS-1** | 자동 소멸 시간은 **최소 5초**. 긴 메시지는 더 길게 |
| **TS-2** | **중요 정보를 토스트로만 전달하지 않는다.** 놓치면 복구 불가다 |
| **TS-3** | `aria-live`로 낭독한다 |
| **TS-4** | 동시 표시는 **1개**다 |
---
### 3.8.5 개폐 (`component.disclosure`)
| 분류 | 상태 | 적용 매체 | 계층 |
| :--- | :--- | :--- | :--- |
| 컨트롤 | `active` | **screen** | 블록 |
아코디언·탭 등 개폐형 구조다. **사용 조건은 `design.medium.screen.md §12`를 따른다.**
**규칙**
| ID | 규칙 |
| :--- | :--- |
| **DC-1** | 1순위는 **`component.toc` + 단일 흐름**이다. 개폐는 그것으로 부족할 때만 |
| **DC-2** | **인쇄 시 전부 펼친 상태**로 출력한다 |
| **DC-3** | 개폐 상태를 URL·영속 저장에 반영한다 |
| **DC-4** | 브라우저 내 검색으로 접힌 내용도 찾을 수 있게 한다 |
---
# 4. 매체 적용 매트릭스
| 컴포넌트 | print | presentation | screen | 계층 |
| :--- | :---: | :---: | :---: | :--- |
| `eyebrow` | ● | ● | ● | 인라인 |
| `header` | ● | ● | ● | 컨테이너 |
| `hero` | △ 장 도비라 | ● | ● | 컨테이너 |
| `rule` | ● | ● | ● | 블록 |
| `footer` | ● | ● | — | 컨테이너 |
| `card` | ● | ● | ● | 컨테이너/블록 |
| `stagecard` | ● | ● | ● | 블록 |
| `connector` | ● | ● | ● | 인라인 |
| `principle` | ● | ● | ● | 블록 |
| `table` | ● | ● | ● | 컨테이너 |
| `stat` | ● | ● | ● | 블록 |
| `chartframe` | ● | ● | ● | 컨테이너 |
| `specsheet` | ● | — | ● | 블록 |
| `directive` | ● | ● | ● | 블록 |
| `badge` | ● | ● | ● | 인라인 |
| `scope` | ● | ● | ● | 블록 |
| `toc` | ● | ● | ● | 블록 |
| `stepper` | ● | ● | ● | 컨테이너 |
| `xref` | ● | ● | ● | 인라인 |
| `mediaframe` | ● | ● | ● | 컨테이너 |
| `button` | — | — | ● | 인라인 |
| `input` | — | — | ● | 블록 |
| `modal` | — | — | ● | 컨테이너 |
| `toast` | — | — | ● | 컨테이너 |
| `disclosure` | — | — | ● | 블록 |
`●` 사용 · `△` 조건부 · `—` 비적용
**집계**: 총 **25종** — 전 매체 공통 **19종** / print·screen **1종** / print·presentation **1종** / screen 전용 **5종** / 조건부 **1종**
---
# 5. 변형 관리 원칙
## 5.1 1변형 = 1행
[출처: design.benchmark, T24 (SLDS "variant = 폴더 = 인덱스 1행", 정량 지표 "85 blueprints, 322 variants" 명시)]
| ID | 규칙 |
| :--- | :--- |
| **VR-1** | **1개 변형 = 카탈로그 1행**이다. 표에 없는 변형은 존재하지 않는 것이다 |
| **VR-2** | 변형은 **컴포넌트 정의 안에** 있어야 한다. 사용처에서 즉석으로 만들지 않는다 |
| **VR-3** | Layer 3 모듈은 **변형 수를 정량 명시**한다 (예: "컴포넌트 12종, 변형 31종") |
> **VR-1·VR-3의 실익**: 변형을 1행으로 강제하면 **누락·중복이 구조적으로 검출 가능**해진다. 총량을 명시하면 개정 시 증감이 즉시 드러난다.
## 5.2 상태 관리
| 상태 | 의미 | 사용 |
| :--- | :--- | :--- |
| `draft` | 검토 중 | **산출물에 사용 금지** |
| `active` | 정상 | 사용 |
| `deprecated` | 폐지 예고 | **신규 사용 금지**, 기존 유지 |
수명주기 절차는 `design.modules.md §5.1`을 따른다.
## 5.3 토큰 소비 원칙
| ID | 규칙 |
| :--- | :--- |
| **TK-1** | 컴포넌트는 **`sys` 토큰만 참조**한다. `ref` 직접 참조 금지 (Layer 1 TN-2) |
| **TK-2** | 컴포넌트 고유 치수가 필요하면 **`comp` 토큰으로 등재**한다. 인라인 값 금지 (Layer 1 TN-1) |
| **TK-3** | 컴포넌트는 **자기 폭을 모른 채** 동작해야 한다 (screen GD-3) |
---
# 6. 컴포넌트 추가 절차
## 6.1 절차
| 단계 | 작업 |
| :-: | :--- |
| 1 | **기존 카탈로그에 대체 가능한 것이 없는지 확인** — 있으면 변형으로 추가 |
| 2 | 분류·계층·적용 매체 결정 (메타 4필드) |
| 3 | lead 1~2문장 + 대표 예 작성 |
| 4 | 해부구조 정의 — **각 부위에 분량 예산과 문안 규칙 부여** |
| 5 | 변형 정의 — **1변형 = 1행** |
| 6 | 소비 토큰 명세 — `sys` 참조만 |
| 7 | 매체별 변형표 작성 (비적용 매체는 `—`) |
| 8 | 규칙에 **ID 부여** |
| 9 | screen 적용 시 **접근성 항목 필수 기재** |
| 10 | 매체 적용 매트릭스(§4) 갱신 |
| 11 | `design.tokens.json`의 `comp` 블록 갱신 |
| 12 | MINOR 버전 증가 |
## 6.2 등재 체크리스트
| # | 항목 | 필수 |
| :-: | :--- | :-: |
| 1 | 메타 4필드 완비 | ★ |
| 2 | lead 2문장 이내 (BP-1) | ★ |
| 3 | 대표 예 1개 이상 (BP-3) | ★ |
| 4 | 모든 부위에 분량 예산 | ★ |
| 5 | 모든 부위에 문안 규칙 | ★ |
| 6 | 변형 표 존재, 1변형 1행 (VR-1) | ★ |
| 7 | `ref` 직접 참조 0건 (TK-1) | ★ |
| 8 | 인라인 치수 0건 (TK-2) | ★ |
| 9 | 매체별 변형표 (비적용 `—` 표기) | ★ |
| 10 | 규칙 ID 부여 | ★ |
| 11 | 색 단독 의존 없음 (Layer 1 CO-1) | ★ |
| 12 | screen 적용 시 접근성 기재 | ★ |
| 13 | 기존 컴포넌트와 의미 중복 없음 | ★ |
| 14 | §4 매트릭스 갱신 | ★ |
## 6.3 아이콘 추가
아이콘은 컴포넌트가 아니라 **브랜드 자산**이다. 추가 절차는 `design.brand.md §6.3`(제안 → 승인 대기 → 등재 → 중복 검사)을 따른다. **승인 없이 임의 생성하지 않는다.**
---
## 근거 출처 요약
본 파일이 인용한 벤치마킹 항목:
**T15 · T17 · T21 · T22 · T23 · T24 · T25 · T27 · T29 · T31 · T37 · M14 · M15**
전문: `RAG/design.benchmark_2026-07-28_v0.1.0.md`
**본 카탈로그의 설계 특징**
1. **해부구조 = 문안 규칙 목차** (T27) — 부위를 나열하는 데 그치지 않고 각 부위에 **분량 예산 + 문안 규칙**을 부여했다. 컴포넌트 정의와 콘텐츠 규정을 분리하지 않는다
2. **형태 + 색 이중 부호화** — `directive` 4상태(✓✕▲▣)와 `badge` 4변형(실선/면채움/점선/기호부착)은 **색 없이도 구분**된다. 흑백 출력·색약 대응이 설계에 내장되어 있다
3. **매체 적용 매트릭스** — 25종 중 19종이 전 매체 공통이다. 컨트롤 5종만 `screen` 전용이며, 이는 Layer 1이 매체 중립적으로 설계된 결과다
**선행 시스템 결함 대응**: 이전 A3 시스템의 개정 구분 뱃지 5종은 **색상만으로** 구분되어 흑백 출력 시 판별 불가였다. `badge`의 `marked` 변형(선행 기호 부착)으로 해소한다.
RAG/design system_v0.1.1/design.foundations.md
+862
View File
@@ -0,0 +1,862 @@
# Prism Design System — Foundations (Layer 1)
| 버전 | 수정일 | 수정자 | 주요 변경 내용 | 비고 |
| :--- | :--- | :--- | :--- | :--- |
| v0.1.0 | 2026-07-28 | 조선두 | 신규 작성 — 토큰 명명 규약, GRADE 색 체계, 타입 생성식, 공간·리듬, 그리드, 표면·깊이, 반경·획 | 최초 버전 |
| v0.1.1 | 2026-07-28 | 조선두 | §4.3 베이스라인 리듬에 **적용 매체 범위** 단서 추가 (BL-1·BL-3·BL-4는 print 한정) | Layer 2b 작성 중 발견된 상충 해소 |
| v0.1.2 | 2026-07-29 | HMCM | §2.7 Tip ΔG 58→59 정정(tokens.json 정본 일치), §1.4 다중값 구조 구현 주석 추가 | 진단 N4·G6 보정 |
| 메타 | 값 |
| :--- | :--- |
| 파일 | `design.foundations.md` |
| 계층 | **Layer 1 — Foundation** |
| 역할 | 매체·브랜드 **불변** 규칙. 무단위·상대 정의 |
| 상위 | `Design.md` · `design.brand.md` (Layer 0) |
| 하위 | `design.medium.*.md` (Layer 2) — 본 파일의 상대값을 절대값으로 실체화 |
| 로드 정책 | **항상 로드** |
> **본 계층의 철칙**: Layer 1은 **절대 치수를 갖지 않는다.** `16px`·`10pt`·`24mm` 같은 값이 이 파일에 등장하면 그것은 결함이다. 본 파일이 정의하는 것은 **비율·단계·관계·규칙**이며, 예시로 제시되는 절대값은 반드시 `[예시 — Layer 2 소관]`으로 표기한다.
>
> 예외: §2 색상은 sRGB HEX가 브랜드 고유값이므로 Layer 0에서 공급받아 그대로 사용한다. 색은 매체가 바뀌어도 색상값 자체가 바뀌지 않는다(재현 방식만 바뀐다).
---
## 목차
- [1. 토큰 명명 규약](#1-토큰-명명-규약)
- [2. 색 체계](#2-색-체계)
- [3. 타이포그래피](#3-타이포그래피)
- [4. 공간·리듬](#4-공간리듬)
- [5. 그리드](#5-그리드)
- [6. 표면·깊이](#6-표면깊이)
- [7. 반경·획](#7-반경획)
- [8. 파운데이션 검증 규칙](#8-파운데이션-검증-규칙)
---
# 1. 토큰 명명 규약
## 1.1 3계층 네임스페이스
토큰은 **일반 → 구체** 순서로 마침표 연결한다. [출처: design.benchmark, T13 (MD3 `md.{ref|sys|comp}.*`)]
```
prism . {ref | sys | comp} . {category} . {name} [. {modifier}]
```
| 계층 | 정의 | 값의 성격 | 예 |
| :--- | :--- | :--- | :--- |
| **`ref`** | **원시값.** 브랜드가 공급한 그대로. 컨텍스트 무관 | 리터럴 (HEX·비율·정수) | `prism.ref.color.green` → `#1F524B` |
| **`sys`** | **의미역할.** "무엇에 쓰이는가". **매체 프로파일이 값을 바인딩하는 유일한 지점** | `ref` 참조 또는 매체별 값셋 | `prism.sys.text.body` → `ref.color.brown` |
| **`comp`** | **컴포넌트 속성.** 리터럴 금지, 항상 `sys`/`ref` 참조 | 참조만 | `prism.comp.card.border.color` → `sys.border.subtle` |
**절대 규칙**
| ID | 규칙 |
| :--- | :--- |
| **TN-1** | `comp` 계층에 **리터럴 값을 쓰지 않는다.** 반드시 `sys` 또는 `ref`를 참조한다 |
| **TN-2** | Layer 2·3에서 **`ref`를 직접 참조하지 않는다.** 항상 `sys`를 경유한다 |
| **TN-3** | 산출물(HTML/CSS/PPTX/InDesign)에 **HEX·치수 리터럴이 등장하지 않는다** [출처: design.benchmark, T33] |
| **TN-4** | 정의되지 않은 토큰을 참조하지 않는다. **미정의 참조 0건**이 검증 항목이다 |
> **TN-4의 배경**: 선행 A3 시스템에서 `--astryx-color-border`(그림자 토큰 3종이 참조)와 `--astryx-color-neutral-050`(비교 카드가 참조)이 **정의되지 않은 채 참조**되고 있었다. CSS는 이 경우 조용히 실패하므로 육안 검수로 잡히지 않는다. 토큰 참조 무결성은 **기계 검증 필수 항목**이다.
## 1.2 공간 토큰의 백분율 명명
공간은 서수(`space-01`, `space-02`)가 아니라 **기본 단위 대비 백분율**로 명명한다. [출처: design.benchmark, T14 (Atlassian `space.100` = 기본단위 100%)]
```
prism.sys.space.{N} 여기서 N = 기본 단위 대비 백분율
```
`space.200`은 이름만 보고 **기본 단위의 2배**임을 즉시 안다. `space-07`은 반드시 대조표를 봐야 한다. 지면·화면 조판 중 대조표를 왕복하지 않는 것이 이 명명의 유일한 목적이다.
## 1.3 별칭 토큰 2계층
원시 치수 위에 **용도명 치수**를 1겹 얹는다. 실무자와 에이전트는 숫자가 아니라 **용도로 지시**한다. [출처: design.benchmark, T32 (Polaris `--p-space-card-padding` = `var(--p-space-400)`)]
```
prism.sys.space.card-padding → prism.sys.space.300
prism.sys.space.zone-gap → prism.sys.space.400
prism.sys.space.text-block → prism.sys.space.150
```
- 별칭은 **1단계만** 허용한다. 별칭이 별칭을 참조하면 추적 불가능해진다.
- 별칭 없이 원시 단계를 직접 써도 되지만, **3회 이상 반복되는 용도는 별칭으로 승격**한다.
## 1.4 매체 다중값 구조
**하나의 토큰명이 매체별 값을 동시에 보유**한다. 이것이 본 시스템의 핵심 기제다. [출처: design.benchmark, T1 (GOV.UK `_typography-responsive.scss` — 하나의 스케일 포인트가 mobile/tablet/print 3값 보유)]
```jsonc
"sys": {
"type": {
"body": {
"step": 0, // Layer 1: 스케일 인덱스 (불변)
"lineHeight": 1.70, // Layer 1: 비율 (불변)
"print": { "size": "10pt" }, // Layer 2가 바인딩
"presentation": { "size": "24px" },
"screen": { "size": "1rem" }
}
}
}
```
| ID | 규칙 |
| :--- | :--- |
| **TN-5** | **토큰명은 매체가 달라도 동일하다.** 매체별로 다른 이름을 만들지 않는다 |
| **TN-6** | 매체 값셋에 **누락이 있으면 그 매체에서 해당 토큰을 사용할 수 없다.** 자동 폴백을 두지 않는다 |
| **TN-7** | Layer 1 필드(`step`·`lineHeight`·비율)는 **매체가 덮어쓸 수 없다** |
> **[구현 주석 — v0.1.2]** 위 다중값 구조는 **논리 모델**이다. 현행 `design.tokens.json`은 이를 `foundation.typography`(인덱스·비율)와 `mediums.<medium>.type_scale`(절대값)의 분산 블록으로 구현한다. 해석 경로: 토큰명 → `foundation`에서 인덱스·비율 확인 → 사용 매체의 `mediums` 블록에서 절대값 바인딩. 두 블록 간 불일치는 F9 드리프트로 판정한다.
---
# 2. 색 체계
## 2.1 GRADE 척도
### 정의
```
GRADE = round(100 − L*) L* = CIE 1976 명도 (sRGB → XYZ D65 → L*)
```
- **GRADE 0 = 순백(#FFFFFF)**, **GRADE 100 = 순흑(#000000)**
- 값이 클수록 어둡다 (잉크 농도 직관과 일치)
### 왜 GRADE인가
대비비(contrast ratio)는 두 색의 **비(比)**이므로 암산이 불가능하다. GRADE는 **차(差)**이므로 뺄셈만으로 판정된다. [출처: design.benchmark, T4 (USWDS 매직 넘버) · T5 (Carbon 스텝 거리 매트릭스) · T6 (Spectrum contrast-generated)]
세 시스템이 각각 다른 구현으로 같은 발상에 도달했다: **"대비를 계산기 없이 정수 규칙으로 환원한다."** 그리고 GRADE는 **휘도 기반이므로 흑백 복사·그레이스케일 인쇄에서도 그대로 작동한다.**
### 매직 넘버 (본 시스템 산출값)
전 등급쌍(base 0~100 × ΔG 35~74)에 대해 최소 보장 대비를 계산한 결과다.
| ΔG | **보장 최소 대비** | 판정 | 적용 |
| :-: | :---: | :--- | :--- |
| **≥ 40** | **3.17 : 1** | 대형 텍스트 가능 | 18pt+ 또는 14pt+ Bold 상당 |
| **≥ 55** | **5.37 : 1** | **본문 가능** (AA 4.5:1 여유 충족) | 일반 텍스트 |
| **≥ 70** | **9.15 : 1** | **AAA 충족** (7:1 여유 충족) | 저시력 대응·투사 겸용 |
| < 40 | — | **텍스트 금지** | 면(fill)·도형으로만 |
**정확한 경계값** (참고): 3:1 보장은 ΔG 39, 4.5:1 보장은 ΔG 51, 7:1 보장은 ΔG 63. 위 표는 여유를 두어 **40 / 55 / 70**의 기억 가능한 값으로 반올림한 것이다.
### 보수성과 실측 등록
ΔG는 **모든 base 등급에 대한 최악값**(흰 배경 위)이므로 **보수적 하한**이다. 실측 대비는 항상 이 이상이다.
| ID | 규칙 |
| :--- | :--- |
| **CG-1** | ΔG가 임계를 충족하면 **실측 없이 사용 가능**하다 |
| **CG-2** | ΔG가 임계에 미달하나 실측이 통과하는 쌍은 **`contrast.pairs`에 명시 등록해야만** 사용할 수 있다. 암묵 허용은 금지한다 |
| **CG-3** | 실측은 **프로그램으로 계산**한다. 수기·눈대중 판정을 금지한다 |
| **CG-4** | ΔG < 40인 쌍은 **실측이 통과해도 텍스트로 쓰지 않는다** (실측 통과 자체가 불가능하나, 규칙으로 못 박는다) |
### 매체별 목표 대비
[출처: design.benchmark, §16 상충-6 / T7 (Spectrum "dark themes target higher contrast")]
| 매체 | 본문 목표 | 근거 |
| :--- | :--- | :--- |
| **print** | **ΔG ≥ 70 (AAA)** | 조명 환경 통제 불가, 저시력 독자, 흑백 복사 가능성 |
| **presentation** | **ΔG ≥ 70 (AAA)** | 앰비언트 조명에 의한 washout, 램프 노후 색 왜곡, 투사 축소 |
| **screen** | **ΔG ≥ 55 (AA) 필수 / 70 권장** | 사용자가 밝기·확대 제어 가능. 업계 표준(WCAG AA) 준수가 우선 |
> **상충 해소 원칙**: 하나의 산출물이 두 매체에 동시에 쓰이면(예: A3 인쇄본을 그대로 투사) **엄격한 쪽을 채택**한다.
## 2.2 스텝 거리 매트릭스
색 팔레트를 GRADE 사다리로 구성하면, "몇 칸 떨어뜨려야 하는가"가 정수로 확정된다. [출처: design.benchmark, T5]
**권장 사다리 간격**: 브랜드 팔레트를 확장할 때 인접 단계는 **ΔG 10~15**로 둔다. 그러면 2단계 = ΔG 20~30(구분 가능), 4단계 = ΔG 40~60(대형 텍스트~본문), 5~6단계 = ΔG 55~90(본문~AAA)이 자동 성립한다.
| 용도 | 필요 단계 수 (ΔG 12 사다리 기준) |
| :--- | :--- |
| 인접 면 구분 (배경 레이어) | **2단계** 이상 |
| 장식선·구분선 | **3단계** 이상 |
| 대형 텍스트 | **4단계** 이상 |
| 본문 텍스트 | **5단계** 이상 |
| AAA 본문 | **6단계** 이상 |
## 2.3 Container ↔ On-Container 강제 페어링
배경색과 전경색을 **개별 토큰이 아니라 검증된 쌍으로만 공급**한다. 사용자가 임의로 조합해 대비를 깨뜨릴 여지를 구조적으로 제거하는 것이 목적이다. [출처: design.benchmark, T12 (MD3 roles · SLDS "on 색상은 반드시 container와 페어")]
```jsonc
"sys.pair.surface-default": {
"container": "ref.color.sand",
"on": "ref.color.brown",
"on-subtle": "ref.color.brown", // 저강조 (§2.8 참조)
"border": "ref.color.brown",
"deltaG": 68,
"measured": 9.02
}
```
| ID | 규칙 |
| :--- | :--- |
| **CP-1** | 배경을 지정하면 **전경은 자동으로 결정된다.** 개별 지정을 허용하지 않는다 |
| **CP-2** | 모든 페어는 `deltaG`와 `measured`를 **함께 보유**한다 |
| **CP-3** | 신규 페어 추가 시 §2.1 CG-1~CG-4 검증을 통과해야 한다 |
| **CP-4** | 페어에 없는 배경·전경 조합은 **사용 금지**다 |
## 2.4 색공간 원칙
| ID | 규칙 | 근거 |
| :--- | :--- | :--- |
| **CS-1** | 팔레트 설계·보간에 **HSL을 사용하지 않는다.** 지각 균등 색공간(CIELAB / CIECAM02-UCS)을 사용한다 | T54 (Spectrum). HSL의 L은 지각 명도가 아니어서 같은 L 값의 색들이 시각적으로 전혀 다른 밝기로 보인다 |
| **CS-2** | 명도 사다리는 **L\* 등간격**으로 만든다. 그래야 **흑백 출력·복사 시 그레이 사다리가 시각적으로 등간격**을 유지한다 | T54 |
| **CS-3** | 알파(투명도) 색을 팔레트에 두지 않는다. **불투명 등가색으로 사전 평탄화(flatten)** 한다 | ADS Alpha / Spectrum "알파 색은 대비가 예측 가능하지 않다". 인쇄에서는 오버프린트·녹아웃 사고로 직결 |
| **CS-4** | CS-3의 예외는 **screen 매체에 한한다** (`design.medium.screen.md §5.3`) | §19 재판정 |
## 2.5 색 단독 의존 금지
| ID | 규칙 | 근거 |
| :--- | :--- | :--- |
| **CO-1** | 정보를 **색만으로** 전달하지 않는다. 형태·패턴·라벨·기호 중 **최소 1개를 병기**한다 | T38 (Carbon·ADS 공통 규정) |
| **CO-2** | 차트 계열은 **패턴·해칭 또는 직접 라벨링**을 병기한다 | T38 |
| **CO-3** | **차트 색 위에 텍스트를 얹지 않는다.** 라벨은 색 면 옆에 배치한다 | T38 (ADS 차트 3규칙) |
| **CO-4** | 인접한 색 면 사이에는 **여백 또는 보더**를 둔다 | T38 |
| **CO-5** | 추세 기호(`▲▼`)는 **반드시 색 + 라벨과 병기**한다 | 브랜드 §6.4 |
> **투사 환경에서 CO-1~CO-5는 특히 중요하다.** 프로젝터의 색역·명도·램프 상태는 예측 불가하므로, 색이 의도대로 재현된다는 가정 자체가 성립하지 않는다.
## 2.6 정적 식별색 (Static Colors)
테마·매체·출력 방식이 바뀌어도 **동일해야 하는 색**을 별도 팔레트로 분리한다. [출처: design.benchmark, T53 (Spectrum Static color palette)]
| 조건 | 처리 |
| :--- | :--- |
| 안전·위험·금지 표기 | 정적 팔레트. 라이트/다크 테마에 관계없이 동일 색 |
| 법정 색채 기준이 있는 표기 | 정적 팔레트. 해당 기준을 우선 적용 |
| 검측 대상·확인 필요 표기 | 정적 팔레트 |
정적 색은 **대비 페어링(§2.3)의 예외가 아니다.** 정적 색을 쓰는 면에도 검증된 `on` 색이 지정되어야 한다.
## 2.7 상태색 (Status Colors)
**형태가 1차 부호, 색이 2차 부호**다. 아이콘 형태만으로 4상태가 구분되어야 하며, 색은 이를 보강할 뿐이다. [출처: design.benchmark, T21 (Polaris DirectiveCard 4상태 pill) · M13 (적록 축 회피 재선정)]
| 상태 | **기호(1차)** | `on` | G | `container` | G | ΔG | 실측 | sand 위 실측 |
| :--- | :---: | :--- | :-: | :--- | :-: | :-: | :---: | :---: |
| **Do** (승인·준수) | **✓** | `#005A4E` | 66 | `#DCEAE6` | 8 | 58 | 6.59 | 7.36 |
| **Don't** (금지·오류) | **✕** | `#8F2A11` | 67 | `#F6DFDA` | 9 | 58 | 6.58 | 7.55 |
| **Caution** (주의·조건부) | **▲** | `#6B4A00` | 66 | `#F5E7CC` | 8 | 58 | 6.60 | 7.27 |
| **Tip** (참고) | **▣** | `#0A4E86` | 68 | `#DDE8F3` | 9 | 59 | 6.91 | 7.73 |
**[정정] Polaris 원색 기각**: Polaris의 Do `#008656` / Don't `#fa0000`은 **적록 축**이라 성인 남성 약 8%의 적록 색각이상에서 가장 취약한 조합이다. 본 시스템은 **명도(GRADE 66~68 균일) + 기호 형태 + 색상(청록/적갈/황토/청)** 3중 부호화로 재설계했다. [출처: design.benchmark, M13]
| ID | 규칙 |
| :--- | :--- |
| **ST-1** | 상태 표기에서 **기호를 생략하지 않는다.** 색만 있는 상태 표기는 금지 |
| **ST-2** | 4상태의 GRADE를 **의도적으로 균일하게(66~68)** 유지한다. 흑백 출력 시 4색이 비슷한 회색이 되지만, **기호로 구분되므로 정보 손실이 없다** |
| **ST-3** | 상태색은 **브랜드 악센트(§2.9)와 별개**다. 상태색 사용은 악센트 경제 카운트에 포함하지 않는다 |
## 2.8 강조 단계 정량화
강조를 형용사가 아니라 **팔레트 스텝 수**로 정의한다. [출처: design.benchmark, M18 (Carbon "Selected = 1 full step, Active = 2 full steps"에서 발상 추출)]
| 단계 | 정의 | 구현 |
| :--- | :--- | :--- |
| **일반 (default)** | 기준 상태 | `sys.pair.*` 기본 페어 |
| **강조 (emphasis)** | 기준 대비 **+1 스텝** (ΔG +12) | 배경 1단계 진하게 또는 보더 승격 |
| **최강조 (prominent)** | 기준 대비 **+2 스텝** (ΔG +24) 또는 면 반전 | 배경 반전(container ↔ on) |
**저강조 (subdued)**: 참고·기존·철거·비활성 표기는 **불투명도 38%가 아니라 GRADE 하향**으로 표현한다. 인쇄에서 불투명도는 예측 불가하므로, 저강조는 **`on-subtle` 토큰(ΔG 40~54 구간)** 으로 별도 공급한다. [출처: design.benchmark, M19 (MD3 disabled 38%의 발상만 차용, 구현은 대체)]
## 2.9 악센트 경제
브랜드 Layer 0이 공급한 `axis.economy` 값을 그대로 강제한다.
| ID | 규칙 |
| :--- | :--- |
| **AE-1** | `design_role: accent` 색의 사용 개수는 **단위 화면당 `economy` 상한 이하** |
| **AE-2** | "단위 화면"의 정의는 **Layer 2 매체 프로파일**이 공급한다 |
| **AE-3** | 상태색(§2.7)·데이터 시각화 색(§2.10)은 **카운트에서 제외**한다 |
| **AE-4** | 악센트가 상한을 넘으면 그것은 악센트가 아니다. 초과분은 `base` 또는 `ground`로 강등한다 |
## 2.10 데이터 시각화 팔레트
### 범주형 (Categorical)
**상한 5색 + 예비 1색.** [출처: design.benchmark, T39 (Atlassian 5–6색 상한 명시. Carbon은 14색 시퀀스를 제공하나 최대 개수 미규정 — §18-11)]
GRADE를 **의도적으로 사다리 배열**하여 흑백 출력 시 부분적 분리를 확보한다. 사용 순서는 GRADE 순이다.
| 순서 | id | HEX | **GRADE** | sand 위 실측 | 색명 |
| :-: | :--- | :--- | :-: | :---: | :--- |
| 1 | `cat-1` | `#C08A2E` | **39** | 2.74 | Ochre |
| 2 | `cat-2` | `#6E8F3C` | **45** | 3.35 | Moss |
| 3 | `cat-3` | `#3C6E9F` | **55** | 4.82 | Steel Blue |
| 4 | `cat-4` | `#8C3B14` | **64** | 6.88 | Burnt Sienna |
| 5 | `cat-5` | `#1B4A43` | **72** | 8.98 | Deep Teal |
| 예비 | `cat-6` | `#5E4370` | **67** | 7.53 | Plum |
**GRADE 사다리**: 39 → 45 → 55 → 64 → 72 (인접차 6·10·9·8)
| ID | 규칙 |
| :--- | :--- |
| **DV-1** | 범주 **6개 초과 시 차트를 분할**한다. 색을 늘리지 않는다 |
| **DV-2** | 시각화 색은 **면(fill) 전용**이다. `cat-1`(ΔG 35)처럼 텍스트 대비를 충족하지 않는 색이 포함되므로, **라벨은 항상 `sys.text.*` 토큰**을 쓴다 |
| **DV-3** | 범주가 3개 이하여도 **§2.5 CO-2(패턴·직접 라벨) 병기 의무는 면제되지 않는다** |
| **DV-4** | 인쇄 산출 전 **CMYK 색역 이탈 검증**을 수행한다. 진한 파랑·초록 계열이 가장 큰 타격을 받는다 [출처: design.benchmark, M23 · §12.1] |
### 발산형 (Diverging)
선택 기준은 **의미론적**이며 매체와 무관하다. [출처: design.benchmark, T39]
| 데이터에 온도·정오(正誤) 연상이 있는가 | 팔레트 |
| :--- | :--- |
| 있다 (예: 초과/미달, 고온/저온) | **Red ↔ Cyan** 축 |
| 없다 (예: 지역 A/B 편차) | **Purple ↔ Teal** 축 |
중앙값은 **중립 회색**이며 GRADE 사다리 중앙에 놓는다.
## 2.11 색 금지 규칙 총괄
| # | 금지 | 근거 |
| :-: | :--- | :--- |
| 1 | ΔG < 40 조합의 텍스트 사용 | CG-4 |
| 2 | `contrast.pairs` 미등록 조합 사용 | CP-4 |
| 3 | HEX·RGB 리터럴 직접 기재 | TN-3 / T33 |
| 4 | HSL 기반 팔레트 보간 | CS-1 |
| 5 | 알파 색 (screen 제외) | CS-3 |
| 6 | 색 단독 정보 전달 | CO-1 |
| 7 | 차트 색 면 위 텍스트 | CO-3 |
| 8 | 순백 전면 배경 | 브랜드 `forbidden` |
| 9 | 그라디언트 배경 | 브랜드 `forbidden` |
| 10 | 악센트 경제 초과 | AE-1 |
---
# 3. 타이포그래피
## 3.1 스케일 생성식
### 등비 단일 비율
```
size(n) = base × r ^ n r = 1.125 (Major Second)
```
- `base` = **매체 프로파일이 공급**하는 유일한 값 (Layer 2)
- `n` = 스케일 인덱스 (Layer 1 불변)
- **판형·매체가 바뀌면 `base`만 교체**한다. 비율과 인덱스는 그대로다
[출처: design.benchmark, T11 (Spectrum "font-size 1.125 순수 등비 + base 단일 지정") · §16 상충-1]
> **등차 방식(Carbon `Xₙ = Xₙ₋₁ + {INT[(n−2)/4]+1}×2`) 기각 사유**: 등차는 대형 구간 도약 확보에 유리하나 **판형 파생이 기계적이지 않다.** 본 시스템은 3개 매체에 동시 파생하므로 기계적 파생이 결정적 요구다.
### 명명 역할과 인덱스
MD3가 공식 허용하듯, **15개 스타일이 전부 필요하지는 않다.** 9개 역할만 정의하고 나머지 인덱스는 비워 둔다. [출처: design.benchmark, T46]
| 역할 | `n` | `× base` | 용도 |
| :--- | :-: | :---: | :--- |
| `caption` | **−2** | 0.790 | 캡션·출처·각주·범례 |
| `body-sm` | **−1** | 0.889 | 표 셀·보조 본문 |
| **`body`** | **0** | **1.000** | **본문 (기준)** |
| `body-lg` | **+1** | 1.125 | 리드 문장·강조 본문 |
| `title-sm` | **+2** | 1.266 | 소제목 |
| `title` | **+4** | 1.602 | 절 제목 |
| `title-lg` | **+6** | 2.027 | 장 제목 |
| `display` | **+9** | 2.887 | 히어로 헤드라인 |
| `display-lg` | **+12** | 4.110 | 표지·오프닝 |
### 매체별 실체화 `[예시 — Layer 2 소관]`
| 역할 | print (base 10pt) | presentation (base 24px @1920×1080) | screen (base 16px) |
| :--- | ---: | ---: | ---: |
| `caption` | 7.9pt | 19px | 13px |
| `body-sm` | 8.9pt | 21px | 14px |
| `body` | **10.0pt** | **24px** | **16px** |
| `body-lg` | 11.3pt | 27px | 18px |
| `title-sm` | 12.7pt | 30px | 20px |
| `title` | 16.0pt | 38px | 26px |
| `title-lg` | 20.3pt | 49px | 32px |
| `display` | 28.9pt | 69px | 46px |
| `display-lg` | 41.1pt | 99px | 66px |
**반올림 규칙**: print은 0.1pt, presentation·screen은 1px 단위로 반올림한다. **반올림 후 값이 아니라 생성식이 정본**이며, 파생 시 항상 식에서 다시 계산한다.
**GOV.UK 인쇄 스케일 대조** [출처: design.benchmark, T2]: GOV.UK의 인쇄 4단 골격(14/18/24/32pt, A4 1단)에 대해 본 시스템은 12.7/16.0/20.3/28.9pt로 **약 10~15% 작다.** A4 단단(單段)이 아닌 **A3 다단(多段) 조판**을 전제하므로 의도된 차이이며, measure(§3.7) 검증으로 정당성이 확인된다.
## 3.2 판형 간 √2 전환
**스케일 내부**는 1.125 등비, **판형 간 전환**은 √2 배수다. 두 체계는 층위가 다르므로 병용한다. [출처: design.benchmark, §9.4 · M2]
| 전환 | base 배수 | 근거 |
| :--- | :---: | :--- |
| A4 → A3 | **× √2 (141.4%)** | ISO 216 — A계열은 반절 시 종횡비 보존 |
| A3 → A2 → A1 | 각 **× √2** | 동일 |
| A3 → A4 | **× 1/√2 (70.7%)** | 동일 |
**선 굵기는 별개 기제**다. ISO 128 / ISO 9175-1의 제도펜 굵기(0.13·0.18·0.25·0.35·0.5·0.7·1.0·1.4·2.0mm)도 √2 계열이므로, **판형이 한 단계 커지면 선 굵기도 한 칸 이동**한다. 다만 §7.2 SW-2에 따라 **UI 보더는 스케일하지 않는다.**
## 3.3 이원 타입 세트
동일 스케일 위에서 **밀도가 다른 두 세트**를 운용한다. [출처: design.benchmark, T16 (Carbon Productive / Expressive)]
| 세트 | 성격 | 적용 |
| :--- | :--- | :--- |
| **Compact** | 고밀도·고정. 헤딩 도약이 작다 (`title-sm`·`title` 중심) | 본문 페이지, 표·데이터 밀집면, 웹앱 화면 |
| **Expressive** | 저밀도·큰 헤딩. 장문 가독과 원거리 판독 (`title-lg`·`display` 사용) | 표지·장 도비라, 프레젠테이션 슬라이드, 랜딩 |
세트는 **크기 값을 바꾸지 않는다.** 어떤 인덱스를 쓰느냐, 여백을 얼마나 주느냐만 다르다.
## 3.4 행간 (한글 기준)
라틴 승수를 그대로 쓰면 한글 조판은 답답해진다. [출처: design.benchmark, T9 (Spectrum CJK line-height — Heading 1.5× / Body **1.7×**, 라틴 1.3/1.5 대비) · T47]
| 역할군 | **한글 행간** | (라틴 참고) |
| :--- | :---: | :---: |
| `display-lg` · `display` | **1.25** | 1.05~1.1 |
| `title-lg` · `title` · `title-sm` | **1.50** | 1.30 |
| `body-lg` · `body` · `body-sm` | **1.70** | 1.50 |
| `caption` | **1.55** | 1.40 |
> **Spectrum은 CJK 승수를 명문화한 유일한 공개 시스템**이며, 라틴 승수를 한글에 그대로 적용하면 안 된다는 직접 근거를 제공한다.
**베이스라인 정합**: `body` 행간 1.70은 **베이스라인 그리드와 정확히 일치**하도록 매체가 `base`를 선택해야 한다(§4.3). 예: print base 10pt × 1.70 = 17pt = **5.997mm ≈ 6mm** (오차 0.003mm).
## 3.5 웨이트 역전 규칙
**크기가 위계를 담당하고, 웨이트는 역행한다.** [출처: design.benchmark, T19 (Carbon: "a lighter weight font can rank hierarchically higher than a bold font if the lighter weight type size is significantly larger")]
| 역할군 | 웨이트 |
| :--- | :--- |
| `display-lg` · `display` | **Regular 400** 또는 Medium 500 |
| `title-lg` · `title` | **Bold 700** |
| `title-sm` | Medium 500 |
| `body` 계열 | Regular 400 |
| `caption` | Medium 500 (작은 크기 보정) |
> 대형 지면에서 대제목을 Bold로 채우면 시각 소음이 된다. A3·프레젠테이션처럼 큰 판면일수록 이 규칙의 효과가 크다.
## 3.6 자간 (Tracking)
| ID | 규칙 | 근거 |
| :--- | :--- | :--- |
| **TR-1** | **음수 자간은 60px 상당 이상에서만** 적용한다. 그 이하는 0 | T20 (Carbon: 음수 자간 −0.64px는 60px 이상에서만) |
| **TR-2** | 대형 헤드라인의 음수 자간은 **−0.02em을 상한**으로 한다 | 광학 보정. 과하면 한글 자소가 붙는다 |
| **TR-3** | 한글에는 대소문자가 없다. **캡스 톤은 양수 자간으로 만든다** | 브랜드 §8.6 |
| **TR-4** | 라벨·아이브로 톤 자간은 **+0.10em ~ +0.20em** | 톤 표현 |
| **TR-5** | **All caps 라틴 런을 본문에 쓰지 않는다** (가독성 저하) | T40 (Atlassian) |
### 톤 수식자 (Tone Modifier)
크기 역할과 **직교**하는 수식자다. 크기는 §3.1 인덱스가, 톤은 아래가 담당한다.
| 수식자 | 웨이트 | 자간 | 적용 |
| :--- | :--- | :--- | :--- |
| `.label` | Medium 500 | +0.12em | 구역 라벨·스테이지 표기 |
| `.eyebrow` | Medium 500 | +0.18em | 아이브로·상위 분류 표기 |
| `.metric` | Bold 700 | 0, **tabular** | 수치 강조 |
| `.quiet` | Regular 400 | 0 | 저강조 (`on-subtle` 색과 결합) |
## 3.7 Measure (행 길이) — 한글 재정의
### 왜 em인가
원 출처는 전부 **라틴 글자 수** 기준이다. [출처: design.benchmark, §11.1 (Bringhurst 45–75자, 이상 66자, **다단 40–50자**) · §11.2 (Butterick 45–90자)] 한글은 대부분의 글자가 전각(1em)이고 라틴은 평균 0.5em이므로, **글자 수를 그대로 옮기면 행 길이가 2배가 된다.**
따라서 본 시스템은 measure를 **em 단위 행 길이**로 정의한다. 매체·언어 무관하게 성립하는 유일한 형식이다. `[자체 정의]` [출처: design.benchmark, M10]
### 기준값
| 조판 | **행 길이 (em)** | 한글 환산 (약) | 라틴 환산 (약) |
| :--- | :---: | :---: | :---: |
| **1단 (single column)** | **22 ~ 38 em** (이상 **33 em**) | 22~38자 (이상 33자) | 45~75자 (이상 66자) |
| **다단 (multi column)** | **20 ~ 25 em** | 20~25자 | 40~50자 |
| 허용 확장 상한 | 45 em | 45자 | 90자 |
- 환산 계수: 라틴 평균 글자폭 **0.5em**, 한글 **1.0em**
- **[CONFLICT DETECTED]** Bringhurst 45–75자 vs Butterick 45–90자는 두 원문에서 확인된 실제 불일치다. 본 시스템은 **Bringhurst를 기본, Butterick을 허용 확장 범위**로 병기한다 [출처: design.benchmark, §11.2]
- **[인용 금지]** USWDS의 measure 토큰(44~88ex)은 라틴 x-height 기준이며, USWDS 문서는 **"이상적 characters-per-line"을 명시하지 않았다.** 해당 수치를 CPL 권고로 인용하지 않는다 [출처: design.benchmark, §18-18]
### 검증 방법
```
measure(em) = 컬럼 폭 ÷ body 크기
```
`[예시 — Layer 2 소관]` A3 가로, body 10pt(3.5278mm), 12컬럼(폭 25.5mm, 거터 6mm):
| 조판 | 컬럼 병합 | 폭 | measure | 판정 |
| :--- | :---: | ---: | ---: | :--- |
| 1단 | 12 col | 372.0mm | 105.4 em | **초과 — 부적합** |
| 2단 | 6 col | 183.0mm | 51.9 em | **초과 — 부적합** |
| **3단** | **4 col** | **120.0mm** | **34.0 em** | **✓ 1단 이상값 33em 재현** |
| **4단** | **3 col** | **88.5mm** | **25.1 em** | **✓ 다단 권장 상단** |
## 3.8 위계 규칙
[출처: design.benchmark, T40 (Atlassian applying-typography)]
| ID | 규칙 |
| :--- | :--- |
| **TH-1** | 인접 헤딩 레벨 간 **스케일 인덱스 차 2 이상**을 둔다 (본 스케일에서 `title-sm`→`title`은 차 2, `title`→`title-lg`는 차 2) |
| **TH-2** | **헤딩 크기는 본문의 2배를 넘지 않는다** — 단 `display` 계열(표지·히어로)은 예외 |
| **TH-3** | 위계는 **크기·명도·색 대비**로 만든다. 밑줄·테두리로 만들지 않는다 |
| **TH-4** | **텍스트 잘림(truncation)을 설계에 포함하지 않는다.** 잘림이 필요하면 분량 예산(Layer 3)이 잘못된 것이다 |
## 3.9 숫자 조판
[출처: design.benchmark, T41 (Atlassian Metric 스타일 + tabular figures · Spectrum "표에서 우측 정렬" · MD3 tabular numbers)]
| ID | 규칙 |
| :--- | :--- |
| **NM-1** | **표·치수·수량의 숫자는 등폭(tabular figures)** 을 강제한다 (`font-feature-settings: "tnum"`) |
| **NM-2** | 수치 열은 **우측 정렬** 또는 **소수점 정렬** |
| **NM-3** | 수치 강조에는 `.metric` 톤 수식자를 사용한다 (§3.6) |
| **NM-4** | 단위는 수치와 **분리하지 않는다** (줄바꿈 금지, 비분리 공백 사용) |
| **NM-5** | 자릿수 구분은 **쉼표**를 쓴다. 4자리 이하에서는 생략 가능 |
## 3.10 서체 정규화 `[자체 정의]`
동일 pt에서도 서체마다 **시각 크기가 다르다.** USWDS는 라틴 cap-height 기준으로 보정 계수를 토큰 레벨에 내장한다. [출처: design.benchmark, T44 · M-보정 개념]
**한글에는 cap-height 개념이 없으므로 재정의가 필요하다.**
```
normalizationFactor = 기준 서체의 한글 글자면 비율 ÷ 대상 서체의 한글 글자면 비율
```
- **글자면(字面) 비율** = em 사각형 대비 실제 한글 글자가 차지하는 면적 비율
- 기준 서체(브랜드 `type.family.primary`)의 계수를 **1.000**으로 고정
- 폴백 서체가 적용되는 환경에서만 계수를 곱한다
| ID | 규칙 |
| :--- | :--- |
| **NF-1** | 기준 서체 계수는 항상 1.000이다 |
| **NF-2** | 폴백 서체별 계수는 **실측으로 산출**하고 `design.tokens.json`에 등록한다 |
| **NF-3** | 계수 미등록 폴백 서체는 **사용하지 않는다** |
| **NF-4** | 라틴·숫자 혼용 시, 라틴 런에는 별도 계수를 적용하지 않는다 (혼용 조판의 미세 편차는 허용) |
> **[미검증]** 한글 글자면 비율의 표준 측정 방법에 대한 1차 출처는 확인하지 못했다. 초기 구현에서는 **동일 pt로 조판한 표본의 시각 높이 실측 비교**로 계수를 산출한다.
---
# 4. 공간·리듬
## 4.1 기본 단위와 매체 위임
Layer 1은 **스케일의 형태**만 정의하고, **기본 단위의 실제 크기는 Layer 2가 정한다.**
```
space(N) = baseUnit × (N / 100)
```
**[CONFLICT DETECTED] 해소**: 조사 결과 공개 시스템의 리듬 단위가 상충한다 — USWDS·Carbon·ADS·Spectrum **8px** / GOV.UK **5px** / Polaris **4px**. 셋 다 픽셀이므로 인쇄에 직접 적용 불가하다. 본 시스템은 **매체별 분기**로 해소한다. [출처: design.benchmark, §16 상충-3 · M11]
## 4.2 스페이싱 스케일
| 토큰 | 배수 | 용도 |
| :--- | :---: | :--- |
| `space.025` | 0.25× | 아이콘-텍스트 간격, 미세 조정 |
| `space.050` | 0.5× | 인라인 요소 간격 |
| **`space.100`** | **1×** | **기준 — 텍스트 블록 간격** |
| `space.150` | 1.5× | 문단 간격 |
| `space.200` | 2× | 카드 내부 패딩 |
| `space.300` | 3× | 블록 간 간격 |
| `space.400` | 4× | 존(zone) 간격, 외부 여백 |
| `space.600` | 6× | 섹션 구분 |
| `space.800` | 8× | 대형 여백 |
`[예시 — Layer 2 소관]`
| 토큰 | print (baseUnit 6mm) | presentation (12px) | screen (8px) |
| :--- | ---: | ---: | ---: |
| `space.025` | 1.5mm | 3px | 2px |
| `space.050` | 3mm | 6px | 4px |
| `space.100` | **6mm** | **12px** | **8px** |
| `space.200` | 12mm | 24px | 16px |
| `space.300` | 18mm | 36px | 24px |
| `space.400` | 24mm | 48px | 32px |
| `space.600` | 36mm | 72px | 48px |
| `space.800` | 48mm | 96px | 64px |
## 4.3 베이스라인 리듬
> **적용 범위**: 베이스라인 리듬은 **다단 연속 본문을 조판하는 매체**(`print`)에만 적용한다. 슬라이드·화면처럼 **이산 블록을 배치하는 매체**(`presentation`·`screen`)는 BL-1·BL-4를 적용하지 않고, 수직 간격을 `space.050`의 배수로 스냅하는 것(BL-2)으로 갈음한다. 베이스라인 그리드의 목적이 **좌우 단의 행 정렬**(BL-4)이므로, 연속 본문이 없는 매체에서는 목적 자체가 성립하지 않는다.
| ID | 규칙 | 적용 매체 | 근거 |
| :--- | :--- | :--- | :--- |
| **BL-1** | `body` 행간(px/mm)은 **`space.100`과 정확히 일치**해야 한다 | **print** | T45 (GOV.UK "line-height가 5px 배수 → vertical rhythm") |
| **BL-2** | 모든 수직 간격은 **`space.050`의 배수**로 스냅한다 | 전 매체 | 동일 |
| **BL-3** | **폰트 크기는 배수일 필요가 없다.** 행간만 그리드에 정렬하면 리듬이 성립한다 | print | §10.2 |
| **BL-4** | 다단 조판에서 좌우 단의 **행이 서로 정렬**되어야 한다 | **print** | T45 — A3 다단의 핵심 장치 |
> **BL-1의 실제 효과** `[예시]`: print base 10pt × 행간 1.70 = 17pt = 5.997mm. `space.100` = 6mm. 오차 0.003mm로 **베이스라인 그리드와 사실상 완전 정합**한다. 매체 프로파일은 이 정합이 성립하도록 `base`를 역산해서 정해야 한다.
## 4.4 스페이싱 위계 원칙
> **"여백이 많은 요소가 더 중요한 것으로 지각된다."** [출처: design.benchmark, T43 (Carbon spacing/overview)]
| ID | 규칙 |
| :--- | :--- |
| **SH-1** | 상위 헤딩에 더 많은 여백을 주고, 하위로 갈수록 줄인다 |
| **SH-2** | 헤딩의 **위쪽 여백 > 아래쪽 여백**. 헤딩은 뒤따르는 본문과 묶여 보여야 한다 |
| **SH-3** | 관련 요소는 가깝게, 무관한 요소는 멀게 배치한다 (근접성) |
## 4.5 레이아웃 5원칙
[출처: design.benchmark, T42 (Atlassian spacing). 전부 매체 중립]
| # | 원칙 | 적용 |
| :-: | :--- | :--- |
| 1 | **유사성 (Similarity)** | 같은 종류의 정보는 같은 형식으로 표현한다 |
| 2 | **근접성 (Proximity)** | 간격이 그룹을 만든다. 선·박스보다 간격을 먼저 쓴다 |
| 3 | **위계 (Hierarchy)** | 크기·명도·간격 3축으로 만든다 |
| 4 | **리듬 (Rhythm)** | 반복되는 간격 패턴이 예측 가능성을 만든다 (= PF 규칙군) |
| 5 | **광학 보정 (Optical Adjustment)** | 수치가 아니라 눈으로 정렬한다. **단 보정도 스케일 단위를 사용해서** 한다 |
> 5번 단서가 중요하다. "눈으로 맞췄다"는 이유로 `space.100` 대신 `7px`을 쓰는 것은 허용되지 않는다. 보정이 필요하면 **한 단계 위아래 토큰**을 쓴다.
## 4.6 여백률
| ID | 규칙 |
| :--- | :--- |
| **WS-1** | 지면·화면의 **비어 있는 면적 비율은 40~55%** |
| **WS-2** | 하한(40%) 위반 = 과밀. 상한(55%) 위반 = 정보 부족 |
| **WS-3** | 콘텐츠는 가용 밴드를 **위→아래로 채운다.** 상단 쏠림 후 하단 공백을 남기지 않는다 (하단 빈 면적 < 25%) |
| **WS-4** | WS-1의 목표값은 매체별로 조정 가능하다. `screen`은 스크롤이 있으므로 viewport 단위로 판정한다 |
---
# 5. 그리드
## 5.1 책임 분할 원칙
> **"최상위 컨테이너만 그리드에 정렬한다. 내부는 스페이싱 토큰을 쓴다."**
> [출처: design.benchmark, T15 (Atlassian "Only top-level containers need to align to the grid" · Spectrum "Layout regions are the only aspect that should align")]
| ID | 규칙 |
| :--- | :--- |
| **GR-1** | **그리드 정렬 대상 = 최상위 존(zone)·블록**뿐이다 |
| **GR-2** | 존 **내부** 요소는 그리드가 아니라 **스페이싱 스케일**에 스냅한다 |
| **GR-3** | 수평·수직 정렬은 **동등하게 중요**하다. 컬럼만 맞추고 행을 방치하지 않는다 [출처: T18 (Carbon 키 라인)] |
> 이 원칙 하나로 조판 규칙이 극도로 단순해진다. "이 아이콘이 몇 번째 컬럼에 걸리는가"를 계산할 필요가 없어진다.
## 5.2 12컬럼과 2x 파생
기본 컬럼 수는 **12**다. 판형·뷰포트가 작아지면 **2로 나눈다.** [출처: design.benchmark, M3 (Carbon 2x Grid 원리만 채택)]
```
12 → 6 → 3 (또는 12 → 8 → 4, 콘텐츠 성격에 따라)
```
| ID | 규칙 |
| :--- | :--- |
| **GC-1** | 컬럼 수는 **12·8·6·4·3** 중에서만 선택한다 |
| **GC-2** | 마진·거터는 **반드시 매체 단위로 재산정**한다. 제본 여유·재단 여유는 화면에 없는 변수다 |
| **GC-3** | `12 × 컬럼폭 + 11 × 거터 = 콘텐츠 폭`의 **정합이 성립해야 한다.** 소수점 잔차를 남기지 않는다 |
### 정합 검증 `[예시 — Layer 2 소관]`
| 매체 | 전체 폭 | 마진 | 거터 | 콘텐츠 폭 | 컬럼 폭 | 검증 |
| :--- | ---: | ---: | ---: | ---: | ---: | :--- |
| print A3 가로 | 420mm | 24mm | 6mm | 372mm | **25.5mm** | 12×25.5 + 11×6 = 372 ✓ |
| print A4 세로 | 210mm | 12mm | 6mm | 186mm | **10mm** | 12×10 + 11×6 = 186 ✓ |
| presentation | 1920px | 48px | 24px | 1824px | **130px** | 12×130 + 11×24 = 1824 ✓ |
| screen (1440 컨테이너) | 1440px | 24px | 24px | 1392px | **94px** | 12×94 + 11×24 = 1392 ✓ |
## 5.3 허용 분할
임의 분할을 금지하고 **정의된 유형만** 사용한다. 예측 가능성이 "처음 보지만 익숙한"의 실체다.
| 분할 | 컬럼 | 용도 |
| :--- | :--- | :--- |
| `12` | 전폭 | 표지, 대형 도판, 전폭 표 |
| `6:6` | 대칭 2분할 | 비교·대조 |
| `8:4` / `4:8` | 비대칭 2분할 | 본문 + 사이드바 |
| `4:4:4` | 균등 3분할 | 3요소 병렬 |
| `3:3:6` | 가중 3분할 | 맥락 2 + 결론 1 |
| `3:3:3:3` | 균등 4분할 | 4단계 프로세스 |
| ID | 규칙 |
| :--- | :--- |
| **GS-1** | 위 목록 외 분할을 쓰지 않는다 |
| **GS-2** | 신규 분할이 필요하면 **본 파일에 등재 후** 사용한다 (MINOR 버전 증가) |
## 5.4 도판 종횡비 제한
도판·이미지 프레임은 **6개 비율**로 제한한다. [출처: design.benchmark, T17 (Carbon 6종). **[주의]** Carbon 공식 목록은 1:1, 2:1, **2:3, 3:2**, 4:3, 16:9이며, 3:4·1:2는 포함되지 않는다 — §18-7]
| 비율 | 용도 |
| :--- | :--- |
| `1:1` | 아이콘 프레임, 정방 도판 |
| `2:1` | 와이드 배너, 단면도 |
| `3:2` | 사진 표준 (가로) |
| `2:3` | 사진 표준 (세로) |
| `4:3` | 도면 프레임 |
| **`16:9`** | **프로젝션 직결** — A3↔슬라이드 겸용 시 필수 |
> 인쇄물에서 종횡비 제한의 일관성 효과는 화면보다 크다. 지면에서는 이웃한 도판의 비율 불일치가 즉시 눈에 띈다.
---
# 6. 표면·깊이
## 6.1 톤차 기반 표면 분리
> **표면은 그림자가 아니라 톤 차이로 분리한다.**
MD3가 M2→M3에서 그림자를 버리고 톤차로 이행한 것은 **정적 매체에 오히려 유리한 방향**이다. [출처: design.benchmark, M6 · T50]
| ID | 규칙 |
| :--- | :--- |
| **SF-1** | 표면 레벨은 **GRADE 차**로 정의한다 |
| **SF-2** | 인접 레벨의 **ΔG ≥ 5**를 확보한다. 미만이면 인쇄·투사에서 구별되지 않는다 |
| **SF-3** | 표면 레벨은 **최대 3단계**로 제한한다 |
**[정정] Carbon Layering model 축소**: Carbon의 4단계(base/L1/L2/L3, White ↔ Gray 10 교차)는 **인쇄에서 White ↔ `#f4f4f4` 교차가 사실상 구별되지 않고, 프로젝션에서는 완전히 소실**된다. 본 시스템은 3단계로 축소하고 인접 명도차를 확대한다. [출처: design.benchmark, M4]
| 레벨 | 정의 | 라이트 테마 예 |
| :--- | :--- | :--- |
| `surface.base` | 캔버스 | `sand` (G4) |
| `surface.raised` | 카드·패널 | `white` (G0) — ΔG 4… **[주의] SF-2 미달** |
| `surface.sunken` | 함몰 영역·표 헤더 | ΔG ≥ 9 확보 필요 |
> **[CONFLICT DETECTED]** 브랜드 SAMAN의 `sand`(G4)와 `white`(G0)는 ΔG 4로 **SF-2(≥5)에 미달**한다. 두 색의 교차만으로는 표면을 분리할 수 없다. **해소**: `surface.raised`는 **톤차가 아니라 §6.2의 보더**로 분리한다. 이는 SAMAN이 이미 채택한 방식("카드는 흰 면 + 1px 헤어라인 보더, 그림자 없음")과 일치한다.
## 6.2 매체별 Elevation 치환
그림자는 인쇄에서 토너를 낭비하고 투사에서 뭉개진다. Atlassian이 **자체 문서에서 대안을 명시**한다 — *"a border or white space would suffice"*, *"A border is the default approach"*. [출처: design.benchmark, M5]
| 의미 레벨 | **print** | **presentation** | **screen** |
| :--- | :--- | :--- | :--- |
| `sunken` | 옅은 배경 톤 (ΔG +5~9) | 옅은 배경 톤 | 배경 톤 + inset 보더 |
| `default` | 무처리 | 무처리 | 무처리 |
| `raised` | **헤어라인 보더** | 헤어라인 보더 | 보더 + **elevation 그림자 허용** |
| `overlay` | 굵은 보더 + 여백 격리 | 굵은 보더 + 여백 격리 | **그림자 + scrim** |
| ID | 규칙 |
| :--- | :--- |
| **EL-1** | **토큰명은 4레벨 모두 동일**하다. 매체가 표현 방식만 바꾼다 |
| **EL-2** | print·presentation에서 **그림자(box-shadow) 산출을 금지**한다 |
| **EL-3** | screen의 그림자는 `design.medium.screen.md §9`가 정의한다 |
| **EL-4** | 그림자로 표현할 수 있는 것을 **보더로도 표현할 수 있는지 먼저 검토**한다 |
## 6.3 테마 대칭 미러링
라이트 ↔ 다크는 **GRADE 축 대칭**으로 정의한다. [출처: design.benchmark, M17 (Atlassian 다크 모드 대칭 미러링 700↔400, 100↔1000)]
```
GRADE_dark(x) = 100 − GRADE_light(x) (근사)
```
| ID | 규칙 |
| :--- | :--- |
| **TM-1** | 미러링은 **출발점**이지 결론이 아니다. 미러링 후 **전 페어 대비를 재검증**한다 |
| **TM-2** | 미러링이 성립하지 않는 색(브랜드 악센트 등)은 **테마별 값을 개별 지정**한다 |
| **TM-3** | 정적 식별색(§2.6)은 **미러링 대상이 아니다** |
| **TM-4** | 다크 테마는 **목표 대비를 상향**한다. 흑색 재현이 붕괴되는 환경(투사·저품질 패널)을 전제한다 [출처: T7] |
> **미러링의 실제 한계 예시**: SAMAN `green`(G69)을 미러링하면 G31이 되어야 하나, 브랜드 색상값은 고정이다. 따라서 **다크 테마에서 green은 텍스트가 아니라 면·도형으로만** 쓴다는 규칙이 성립한다 (실측 2.13:1). TM-2의 전형적 사례다.
## 6.4 강조 페이지 (Inline Theme)
> *"고대비 순간(high contrast moments)을 만들기 위해 페이지 일부만 반전 색조로 처리한다."*
Carbon의 인라인 테마는 런타임 기능이지만, **편집 장치로서는 인쇄에서 오히려 강력하다.** [출처: design.benchmark, T50 (Carbon "Only use inline theming for major shifts in color, like high contrast moments")]
| ID | 규칙 |
| :--- | :--- |
| **IT-1** | 강조 페이지·강조 박스는 **다크 테마 페어를 그대로 적용**한다 |
| **IT-2** | 남용 금지 — 문서 전체에서 **10% 이하 지면**으로 제한한다 |
| **IT-3** | 강조 영역 내부에서도 §2.3 페어링 규칙이 그대로 적용된다 |
---
# 7. 반경·획
## 7.1 반경 스케일
| 토큰 | 값 | 적용 |
| :--- | :---: | :--- |
| `radius.none` | 0 | 구조 바, 전폭 요소, 표 |
| `radius.sm` | 0.5× | 뱃지·태그·칩 |
| `radius.md` | 1× | **카드 기본** |
| `radius.lg` | 1.5× | 대형 컨테이너 |
| `radius.pill` | ∞ | 페르소나 칩·필 |
기준값(`1×`)은 Layer 2가 공급한다. `[예시]` print 3mm / presentation 12px / screen 8px.
| ID | 규칙 |
| :--- | :--- |
| **RD-1** | 구조적 요소(전폭 바·표·구분선)는 **항상 `radius.none`** |
| **RD-2** | 중첩된 컨테이너는 **안쪽이 바깥쪽보다 작은 반경**을 갖는다 |
| **RD-3** | 반경은 **판형 확대 시 비례 확대한다** (선 굵기와 반대) |
## 7.2 획 스케일
| 토큰 | 값 | 적용 |
| :--- | :---: | :--- |
| `stroke.hairline` | 1× | 헤어라인 구분선·카드 보더 |
| `stroke.regular` | 2× | 강조 보더·표 외곽 |
| `stroke.bold` | 3× | 구조 강조선 |
| `stroke.icon` | 4× | 아이콘 획 |
| `stroke.connector` | 5× | 프로세스 커넥터 |
| ID | 규칙 | 근거 |
| :--- | :--- | :--- |
| **SW-1** | 획 굵기는 **매체별 절대 하한**을 갖는다 (Layer 2 소관). print은 0.5pt(0.15mm) 미만을 금지한다 | §12 (역상 최소치) |
| **SW-2** | **판형이 커져도 UI 보더 굵기를 비례 확대하지 않는다** | T10 (Spectrum "border width는 스케일되지 않는다") |
| **SW-3** | SW-2의 예외는 **제도 선(도면 선)** 이다. ISO 128 √2 계열에 따라 **판형 한 단계당 한 칸 이동**한다 | §9.4 |
| **SW-4** | 아이콘 획은 **아이콘 그리드에 대한 비율**이므로 아이콘과 함께 스케일된다 | 브랜드 IC-6과 구분 |
> **SW-2와 SW-3의 구분이 중요하다.** "카드 테두리"는 UI 요소이므로 A3→A1에서도 동일 굵기를 유지한다. "단면 외형선"은 제도 선이므로 0.35mm → 0.5mm로 한 칸 이동한다.
---
# 8. 파운데이션 검증 규칙
## 8.1 자동 검증 항목 (기계 판정)
| # | 항목 | 판정 기준 | 실패 시 |
| :-: | :--- | :--- | :--- |
| **F1** | **토큰 참조 무결성** | 미정의 토큰 참조 **0건** | 빌드 중단 |
| **F2** | **리터럴 검출** | `comp` 계층 및 산출물의 HEX·치수 리터럴 **0건** | 빌드 중단 |
| **F3** | **`hex` ↔ `rgb` 정합** | 전 색 일치 | 빌드 중단 |
| **F4** | **대비 페어 검증** | `contrast.pairs` 전 쌍 프로그램 재계산, 등록값과 일치 | 빌드 중단 |
| **F5** | **ΔG 임계 준수** | 매체별 목표(§2.1) 충족 또는 CG-2 명시 등록 | 빌드 중단 |
| **F6** | **그리드 정합** | `cols × colW + (cols−1) × gutter = contentW` 오차 0 | 빌드 중단 |
| **F7** | **베이스라인 정합** | `body 크기 × 행간 = space.100` (허용 오차 0.5%) | 경고 |
| **F8** | **매체 값셋 완전성** | 사용 토큰의 해당 매체 값 누락 0건 (TN-6) | 빌드 중단 |
| **F9** | **md ↔ json 드리프트** | 본 파일 표의 수치와 `design.tokens.json` 일치 | 빌드 중단 |
> **F9의 배경**: 조사 대상 8개 시스템 중 **최소 5개**에서 공개 문서와 공식 토큰 패키지 간 값 불일치(버전 드리프트)가 확인됐다. MD3 state layer(10% vs 12%), Spectrum 컬러 스톱 수(14 vs 13 vs 16), Carbon 컬럼 수(16 vs 4/8/16 vs 12) 등. 선행 SAMAN 시스템도 **4중 버전 표기**로 같은 실패를 겪었다. 드리프트는 예외적 사고가 아니라 **디자인 시스템의 기본 실패 모드**이므로 검증을 강제한다. [출처: design.benchmark, §12 조사 방법 · §18]
## 8.2 육안 검수 항목 (기계 판정 불가)
| # | 항목 | 근거 |
| :-: | :--- | :--- |
| V1 | measure가 §3.7 범위 내인가 | 실제 조판 결과 확인 필요 |
| V2 | 여백률 40~55% (WS-1) | 면적 측정 |
| V3 | 악센트 경제 준수 (AE-1) | 개수 계수 |
| V4 | 색 단독 의존 없음 (CO-1) | 흑백 출력 후 판독 시험 |
| V5 | 위계가 크기·명도로 식별되는가 (TH-3) | 축소 판독 시험 |
| V6 | 다단 행 정렬 (BL-4) | 겹쳐보기 |
| V7 | 광학 보정이 스케일 단위로 되었는가 (§4.5-5) | 값 확인 |
> GDS 인용: **"자동 도구로 발견되는 문제는 전체의 약 30%에 불과하다."** 자동 검증(§8.1)과 육안 검수(§8.2)는 대체 관계가 아니라 병행 관계다. [출처: design.benchmark, M22]
---
## 근거 출처 요약
본 파일이 인용한 벤치마킹 항목:
**T1 · T4 · T5 · T6 · T7 · T9 · T10 · T11 · T12 · T13 · T14 · T15 · T16 · T17 · T18 · T19 · T20 · T32 · T33 · T38 · T39 · T40 · T41 · T43 · T44 · T45 · T46 · T47 · T50 · T53 · T54 · M3 · M4 · M5 · M6 · M10 · M11 · M13 · M17 · M18 · M19 · M22 · M23 · §9.4 · §11.1 · §11.2 · §12 · §16 · §18**
전문: `RAG/design.benchmark_2026-07-28_v0.1.0.md`
**`[자체 정의]` 항목**: §3.7 em 기반 measure 재정의 · §3.10 한글 글자면 비율 정규화 · §2.7 상태색 4종 재선정 · §2.10 범주형 GRADE 사다리 · §2.1 매직 넘버 40/55/70 산출
**[미검증] 항목**: §3.10 한글 글자면 비율의 표준 측정 방법 (1차 출처 미발견 — 실측 대체)
**[CONFLICT DETECTED] 해소 이력**: §3.7 Bringhurst ↔ Butterick 행장 불일치 (병기 처리) · §4.1 8px/5px/4px 리듬 상충 (매체별 분기) · §6.1 `sand`↔`white` ΔG 4 미달 (보더 분리로 해소)
RAG/design system_v0.1.1/design.medium.presentation.md
+547
View File
@@ -0,0 +1,547 @@
# Prism Design System — Medium Profile: Presentation (Layer 2b)
| 버전 | 수정일 | 수정자 | 주요 변경 내용 | 비고 |
| :--- | :--- | :--- | :--- | :--- |
| v0.1.0 | 2026-07-28 | 조선두 | 신규 작성 — 16:9 캔버스, 투사 열화 보정, 그리드·존, 타입 바인딩, 테마 변형, PPTX 구현, 검증 | 최초 버전 |
| v0.1.1 | 2026-07-29 | HMCM | 하위 실행 명세(M2 `ppt/module.ppt-deck.md`) 연결 | 진단 C1 후속 |
| 메타 | 값 |
| :--- | :--- |
| 파일 | `design.medium.presentation.md` |
| 계층 | **Layer 2b — Medium Profile: Presentation** |
| 역할 | Layer 1의 상대값을 **16:9 캔버스 px·EMU로 실체화** |
| 상위 | `design.foundations.md` (Layer 1) |
| 하위 | 프레젠테이션 계열 Layer 3 모듈 — 실행 명세: `ppt/module.ppt-deck.md` (M2) |
| 로드 정책 | **온디맨드** |
---
## 목차
- [1. 프로파일 개요](#1-프로파일-개요)
- [2. 캔버스](#2-캔버스)
- [3. 투사 열화 보정](#3-투사-열화-보정)
- [4. 그리드·존](#4-그리드존)
- [5. 타입 바인딩](#5-타입-바인딩)
- [6. 색상·테마](#6-색상테마)
- [7. 강조 슬라이드](#7-강조-슬라이드)
- [8. 표면·레이어링](#8-표면레이어링)
- [9. PPTX 구현](#9-pptx-구현)
- [10. 검증 체크리스트](#10-검증-체크리스트)
---
# 1. 프로파일 개요
## 1.1 적용 조건
| 적용 | 비적용 |
| :--- | :--- |
| 강연·세미나 슬라이드 | 인쇄 배포용 편람 → `print` |
| 보고·발표 덱 | 화면에서 스크롤하며 읽는 문서 → `screen` |
| 전시·사이니지 정지 화면 | 대화형 프로토타입 → `screen` |
| PPTX·Keynote·PDF 슬라이드 | |
## 1.2 이 프로파일의 지배 조건
프레젠테이션은 **관람 환경을 제작자가 통제할 수 없다**는 점이 지배적 제약이다.
| 통제 불가 변수 | 영향 | 대응 |
| :--- | :--- | :--- |
| 프로젝터 해상도 (XGA~4K) | 유효 배율 **53% ~ 200%** | §3 최소 크기 하한 |
| 앰비언트 조명 | 명암비 저하·washout | §6 대비 AAA 상향 |
| 램프 노후 | 색 왜곡·황변 | §6 색 단독 의존 금지 강화 |
| 관람 거리 | 각크기 변동 | §5 캔버스 높이 비율 기준 |
| 색역·감마 | 재현 불가 예측 불가 | Layer 1 CO-1~CO-5 |
> **인쇄와 정반대의 실패 모드**: 인쇄는 "너무 작아서 안 보임"이 주 위험이고, 투사는 **"대비가 씻겨서 안 보임"**이 주 위험이다.
## 1.3 매체 상수
```yaml
medium: presentation
unit_primary: px # 오써링 논리 픽셀
canvas: 1920 x 1080 # 16:9
px_to_emu: 6350 # 정수 — PowerPoint 정합
px_to_pt: 0.5
type_base: 24px
space_base_unit: 12px
baseline_grid: none # §5.4 참조
contrast_target: AAA # ΔG >= 70
elevation_mode: border # 그림자 산출 금지
alpha_allowed: false
```
---
# 2. 캔버스
## 2.1 규격
| 단위 | 폭 | 높이 | 비고 |
| :--- | ---: | ---: | :--- |
| **px (오써링)** | **1920** | **1080** | 논리 캔버스 |
| inch | 13.3333 | 7.5 | = px ÷ 144 |
| pt | 960 | 540 | = px ÷ 2 |
| **EMU** | **12,192,000** | **6,858,000** | = px × 6350 |
| 종횡비 | **1.7778 (16:9)** | | |
## 2.2 환산 상수
```
inch = px ÷ 144
pt = px ÷ 2
EMU = px × 6350 (정수 — 잔차 0)
```
> **핵심 정합**: `1920 × 6350 = 12,192,000` / `1080 × 6350 = 6,858,000` 은 **PowerPoint 기본 와이드스크린 슬라이드 크기와 정확히 일치**한다. 따라서 오써링 캔버스를 그대로 PPTX로 옮길 때 **반올림 오차가 발생하지 않는다.** 이 정합을 유지하기 위해 오써링 캔버스를 1920×1080에 고정한다.
## 2.3 캔버스 변경 금지
| ID | 규칙 |
| :--- | :--- |
| **CV-1** | 오써링 캔버스는 **1920×1080에 고정**한다. 동일 비율의 다른 픽셀쌍(예: 1280×720)을 쓰지 않는다 |
| **CV-2** | 그리드·타입·간격 수치는 **전부 1920×1080 기준**이다 |
| **CV-3** | 출력 시 뷰포트에 맞춰 **전체 스케일**한다. 요소별 개별 스케일을 금지한다 |
| **CV-4** | 16:10 · 4:3 슬라이드가 필요하면 **별도 모듈로 선언**한다. 본 프로파일을 늘려 쓰지 않는다 |
---
# 3. 투사 열화 보정
## 3.1 프로젝터별 유효 배율
16:9 캔버스는 대부분의 현대 프로젝터와 **화면비가 일치**하므로 레터박스 손실이 없다. (A3 1.414 캔버스를 투사할 때 발생하는 좌우 196px 손실이 여기서는 발생하지 않는다.)
| 기기 | 해상도 | 화면비 | 16:9 유효 영역 | **배율** | `body` 24px 실효 |
| :--- | ---: | :---: | ---: | ---: | ---: |
| XGA | 1024×768 | 1.333 | 1024×576 | **53.3%** | **12.8px** |
| WXGA | 1280×800 | 1.600 | 1280×720 | 66.7% | 16.0px |
| **FHD** | 1920×1080 | 1.778 | 1920×1080 | **100%** | 24.0px |
| WUXGA | 1920×1200 | 1.600 | 1920×1080 | 100% | 24.0px |
| 4K UHD | 3840×2160 | 1.778 | 3840×2160 | 200% | 48.0px |
**최악 조건은 XGA(53.3%)** 이다. 다만 XGA 프로젝터에서는 관람자가 화면에 상대적으로 가까이 있는 소규모 회의실인 경우가 많으므로, 픽셀 배율만으로 판정하지 않는다.
## 3.2 최소 크기 — 각크기 기준 `[자체 정의]`
픽셀 수가 아니라 **캔버스 높이 대비 비율**로 하한을 정한다. 이 값은 투사 크기·관람 거리와 무관하게 성립한다.
| 항목 | 하한 | 1080 기준 |
| :--- | :--- | ---: |
| **본문 하한** | **캔버스 높이 ÷ 45** | **24px** |
| **절대 하한** (캡션·출처) | **캔버스 높이 ÷ 57** | **19px** |
| **권장 본문** | 캔버스 높이 ÷ 45 ~ ÷ 40 | 24 ~ 27px |
> **[미검증]** 투사물의 최소 문자 크기에 대한 공개 1차 가이드라인은 조사에서 발견하지 못했다 [출처: design.benchmark, §18-40]. 위 값은 ① 강연장 표준 관람 거리(화면 높이의 4~8배), ② `body` 24px가 XGA에서 실효 12.8px로 판독 임계에 근접한다는 점, ③ 선행 SAMAN 시스템의 실운용 비율(본문/캔버스높이 = 32/1442 ≈ H/45)이 동일 값에 수렴한다는 점을 근거로 한 **자체 정의**다.
## 3.3 최소 선 굵기
| 항목 | 하한 | 근거 |
| :--- | ---: | :--- |
| **일반 선** | **2px** | XGA(53.3%)에서 실효 1.07px — 소실 직전 |
| **구조 강조선** | 3px 이상 | |
| **역상(밝은 배경 위 흰 선)** | **사용 금지** | 투사에서 소실 |
> **[미검증]** 투사 전용 최소 선 두께의 1차 출처 역시 미발견 [출처: §18-40]. 위는 XGA 배율 역산에 의한 `[자체 정의]`다.
## 3.4 대비 상향
| ID | 규칙 | 근거 |
| :--- | :--- | :--- |
| **PC-1** | 본문 대비 목표는 **ΔG ≥ 70 (AAA, 실측 ≥ 7:1)** | 앰비언트 조명 손실 보정. WCAG AA 4.5:1을 상향 [출처: §12.6] |
| **PC-2** | **다크 배경 슬라이드는 목표를 더 상향**한다 — 프로젝터는 흑색을 재현하지 못하고 회색으로 띄운다 | [출처: T7 (Spectrum "Dark themes target higher contrast ratios")] |
| **PC-3** | **적색-흑색 조합을 회피**한다 (protanopia 대응) | [출처: §12.6 — W3C가 명시적으로 advisory technique 제공] |
| **PC-4** | 순백/순검정 극단 대비보다 **중간톤 대비를 활용**한다. 순백 배경은 어두운 실내에서 눈부심을 유발한다 | [출처: §12.6] |
---
# 4. 그리드·존
## 4.1 수평 그리드
| 항목 | 값 |
| :--- | ---: |
| 좌우 마진 | **48px** (`space.400`) |
| 콘텐츠 폭 | **1824px** |
| 컬럼 수 | **12** |
| 거터 | **24px** (`space.200`) |
| **컬럼 폭** | **130px** |
| 정합 검증 | 12 × 130 + 11 × 24 = **1824** ✓ |
### 컬럼 X 좌표
```
X(i) = 48 + (i−1) × 154 컬럼 끝 = X(i) + 130
```
| Col | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 |
| :--- | ---: | ---: | ---: | ---: | ---: | ---: | ---: | ---: | ---: | ---: | ---: | ---: |
| X | 48 | 202 | 356 | 510 | 664 | 818 | 972 | 1126 | 1280 | 1434 | 1588 | 1742 |
Col 12 끝 = 1872 (우 마진 48) ✓
## 4.2 존 폭
| 컬럼 병합 | 폭 | **measure** (body 24px) | 판정 |
| :---: | ---: | ---: | :--- |
| 12 col | 1824px | 76.0 em | 전폭 요소 전용 (본문 부적합) |
| 8 col | 1208px | 50.3 em | 본문 부적합 — 도판·표 전용 |
| **6 col** | **900px** | **37.5 em** | **✓ 1단 본문 상한** |
| **4 col** | **592px** | **24.7 em** | **✓ 다단 본문 최적** |
| 3 col | 438px | 18.3 em | 짧은 텍스트·카드 (연속 본문 비권장) |
| ID | 규칙 |
| :--- | :--- |
| **ZN-1** | 연속 본문은 **6 col 이하** 존에만 배치한다 |
| **ZN-2** | 8·12 col 존은 **도판·표·단문(1~2행)** 전용이다 |
| **ZN-3** | 3 col 존의 텍스트는 **3행 이하**로 제한한다 |
## 4.3 수직 존
모든 좌표는 **12px 격자**의 정수배다.
```
0 ┌──────────────────────────────────────┐
│ 상단 마진 48px │
48 ├──────────────────────────────────────┤
│ 헤더 존 (아이브로 · 제목 · 메타) │ 144px
192 ├──────────────────────────────────────┤
│ ↕ 24px │
216 ├──────────────────────────────────────┤
│ │
│ 콘텐츠 밴드 │ 744px
│ (62 × 12px) │
│ │
960 ├──────────────────────────────────────┤
│ ↕ 24px │
984 ├──────────────────────────────────────┤
│ 푸터 존 (출처 · 페이지 · 브랜드) │ 48px
1032 ├──────────────────────────────────────┤
│ 하단 마진 48px │
1080 └──────────────────────────────────────┘
```
| ID | 규칙 |
| :--- | :--- |
| **VZ-1** | 콘텐츠 요소의 하단(`y + h`)은 **960px를 넘지 않는다** |
| **VZ-2** | 푸터 존(984~1032)은 **불가침**이다 |
| **VZ-3** | 전면 도판(full-bleed)은 헤더·푸터 존을 **가리지 않는다** |
| **VZ-4** | 콘텐츠는 밴드를 **위→아래로 채운다**. 상단 쏠림 후 하단 공백 25% 초과 금지 (Layer 1 WS-3) |
## 4.4 허용 분할
Layer 1 §5.3 기준. 존 폭은 §4.2 참조.
| 분할 | 존 구성 (px) | 용도 |
| :--- | :--- | :--- |
| `12` | 1824 | 표지·전폭 도판 |
| `6:6` | 900 / 900 | 대조·비교 |
| `8:4` / `4:8` | 1208 / 592 | 도판 + 해설 / 내비 + 본문 |
| `4:4:4` | 592 × 3 | 3요소 병렬 |
| `3:3:6` | 438 / 438 / 900 | 맥락 2 + 결론 1 |
| `3:3:3:3` | 438 × 4 | 4단계 프로세스 |
## 4.5 스페이싱 실체화
| 토큰 | 배수 | **px** | 별칭 |
| :--- | :---: | ---: | :--- |
| `space.025` | 0.25× | **3** | — |
| `space.050` | 0.5× | **6** | — |
| **`space.100`** | **1×** | **12** | `text-block` |
| `space.150` | 1.5× | **18** | `paragraph` |
| `space.200` | 2× | **24** | 거터, `zone-inner` |
| `space.300` | 3× | **36** | `block-gap` |
| `space.400` | 4× | **48** | 마진, `zone-gap` |
| `space.600` | 6× | **72** | `section-gap` |
| `space.800` | 8× | **96** | — |
**반경**: `radius.md`(1×) = **12px**. `sm` 6px / `lg` 18px / `none` 0.
**획**: `hairline` 2px / `regular` 3px / `bold` 4px / `icon` 5px / `connector` 7px — §3.3 하한(2px) 적용으로 인쇄 프로파일보다 상대적으로 굵다.
---
# 5. 타입 바인딩
## 5.1 스케일 실체화
`size(n) = 24px × 1.125ⁿ`. 반올림 단위 **1px**.
| 역할 | `n` | **px** | **PPTX pt** | 행간 | 행 높이 | 캔버스 H 비 | 웨이트 |
| :--- | :-: | ---: | ---: | :-: | ---: | :---: | :--- |
| `caption` | −2 | **19** | 9.5 | 1.55 | 29.4 | H/57 | Medium 500 |
| `body-sm` | −1 | **21** | 10.5 | 1.70 | 35.7 | H/51 | Regular 400 |
| **`body`** | **0** | **24** | **12.0** | **1.70** | **40.8** | **H/45** | Regular 400 |
| `body-lg` | +1 | **27** | 13.5 | 1.70 | 45.9 | H/40 | Regular 400 |
| `title-sm` | +2 | **30** | 15.0 | 1.50 | 45.0 | H/36 | Medium 500 |
| `title` | +4 | **38** | 19.0 | 1.50 | 57.0 | H/28 | Bold 700 |
| `title-lg` | +6 | **49** | 24.5 | 1.50 | 73.5 | H/22 | Bold 700 |
| `display` | +9 | **69** | 34.5 | 1.25 | 86.2 | H/16 | Regular 400 / Medium 500 |
| `display-lg` | +12 | **99** | 49.5 | 1.25 | 123.8 | H/11 | Regular 400 |
## 5.2 하한 준수
| 역할 | px | 하한 판정 |
| :--- | ---: | :--- |
| `caption` | 19 | **= 절대 하한 H/57** ✓ (더 내릴 수 없음) |
| `body-sm` | 21 | H/51 ✓ |
| `body` | 24 | **= 본문 하한 H/45** ✓ |
| ID | 규칙 |
| :--- | :--- |
| **TP-1** | `caption`(19px)이 **절대 하한**이다. 이보다 작은 텍스트를 슬라이드에 두지 않는다 |
| **TP-2** | 출처·각주도 `caption` 이상이다. "작으니까 안 읽어도 된다"는 요소를 두지 않는다 |
| **TP-3** | 본문 크기를 낮춰 정보를 더 넣지 않는다. **정보를 줄이거나 슬라이드를 나눈다** |
## 5.3 자간
| 역할 | 자간 | 근거 |
| :--- | :--- | :--- |
| `display-lg` (99px) | **−0.02em** | Layer 1 TR-1(60px 이상) 충족 ✓ |
| `display` (69px) | **−0.015em** | TR-1 충족 ✓ |
| `title-lg` (49px) 이하 | **0** | TR-1 미충족 — 음수 자간 금지 |
| `.label` 톤 | +0.12em | TR-4 |
| `.eyebrow` 톤 | +0.18em | TR-4 |
> 인쇄 프로파일에서는 음수 자간이 전혀 쓰이지 않았으나(최대 41pt ≈ 55px), 프레젠테이션에서는 `display` 이상에서 사용 가능하다. **같은 스케일, 다른 매체에서 다른 규칙이 자동 적용되는 사례**다.
## 5.4 베이스라인 그리드 미운용
| ID | 규칙 |
| :--- | :--- |
| **BL-P1** | 본 프로파일은 **베이스라인 그리드를 운용하지 않는다** |
| **BL-P2** | 수직 간격은 **`space.050`(6px)의 배수**로 스냅한다 |
| **BL-P3** | 텍스트 블록 간 정렬은 **블록 상단(top) 기준**으로 한다 |
> **[CONFLICT DETECTED] 해소 — Layer 1 BL-1 적용 범위**
> Layer 1 BL-1은 *"`body` 행간은 `space.100`과 정확히 일치해야 한다"* 를 규정한다. 본 프로파일에서 `body` 행 높이는 24 × 1.70 = **40.8px**이며 `space.100`(12px)의 정수배가 아니다.
> **해소**: 베이스라인 그리드의 목적은 **다단 연속 본문의 좌우 행 정렬**(Layer 1 BL-4)이다. 슬라이드는 연속 본문이 아니라 **이산 블록의 배치**이므로 이 목적이 성립하지 않는다. 따라서 **BL-1은 다단 연속 본문을 조판하는 매체(print)에 한정**되며, Layer 1 §4.3에 적용 범위 단서를 추가한다(`design.foundations.md` v0.1.1).
## 5.5 타입 세트
| 상황 | 세트 (Layer 1 §3.3) |
| :--- | :--- |
| 표지·장 구분·키노트 | **Expressive** — `display` · `display-lg` 사용 |
| 일반 콘텐츠 슬라이드 | **Expressive** — `title-lg` · `title` 중심 |
| 데이터·표 밀집 슬라이드 | **Compact** — `title` · `title-sm` 중심, `body-sm` 허용 |
---
# 6. 색상·테마
## 6.1 라이트 / 다크 변형
| 항목 | **Light** | **Dark** |
| :--- | :--- | :--- |
| 캔버스 | `bg_light` | `bg_dark` |
| 본문 | `ground` 계열 | `bg_light` 또는 `on_dark` |
| 제목 | `base` 계열 | `bg_light` 또는 `on_dark` |
| 악센트 | `accent` (대형 전용) | `accent` |
| 카드 면 | `on_dark`(흰 면) + 헤어라인 | 면 반전 또는 보더만 |
| ID | 규칙 |
| :--- | :--- |
| **TH-P1** | 다크 변형은 **표지·장 구분·키노트 순간**에 사용한다. 덱 전체를 다크로 채우지 않는다 |
| **TH-P2** | 다크 슬라이드에서 **`base` 색을 텍스트로 쓰지 않는다.** 브랜드 SAMAN 기준 `green`은 `obsidian` 위에서 실측 2.13:1로 판독 불가다 — **면·도형으로만** |
| **TH-P3** | 다크 변형의 대비 목표는 **라이트보다 높게** 잡는다 (PC-2) |
| **TH-P4** | 라이트↔다크 전환은 Layer 1 §6.3 대칭 미러링을 **출발점**으로 하되, 전 페어 대비를 재검증한다 (TM-1) |
## 6.2 순백 배경 금지
| ID | 규칙 |
| :--- | :--- |
| **BG-P1** | 라이트 캔버스는 **`bg_light`**(SAMAN 기준 `sand #F4F3F0`)를 쓴다. **순백 전면 배경을 금지**한다 |
| **BG-P2** | 근거는 두 가지다 — ① 어두운 강연장에서 순백 대면적은 **눈부심**을 유발한다 ② 프로젝터의 최대 휘도를 낭비한다 |
| **BG-P3** | 카드·표 등 **국소 면**에는 순백을 쓸 수 있다 |
## 6.3 색 단독 의존 금지 (강화)
투사 환경은 색 재현을 보장하지 않는다. Layer 1 CO-1~CO-5를 **강화 적용**한다.
| ID | 규칙 |
| :--- | :--- |
| **CD-P1** | 차트 계열은 **직접 라벨링**을 원칙으로 한다. 범례만으로 처리하지 않는다 |
| **CD-P2** | 3개 이상 계열에는 **패턴·해칭을 병기**한다 |
| **CD-P3** | 추세는 **기호(▲▼) + 라벨 + 색** 3중으로 표기한다 |
| **CD-P4** | **적색-흑색 조합을 사용하지 않는다** (PC-3) |
## 6.4 악센트 경제
| ID | 규칙 |
| :--- | :--- |
| **AE-P1** | "단위 화면" = **슬라이드 1장** |
| **AE-P2** | 브랜드 `axis.economy` 상한을 적용한다 (SAMAN 기준 **슬라이드당 최대 2개 국소 강조**) |
| **AE-P3** | 카운트 대상: 악센트 색 텍스트·면·마커·커넥터. 상태색·차트 색은 제외 (Layer 1 AE-3) |
---
# 7. 강조 슬라이드
Layer 1 §6.4의 인라인 테마를 슬라이드 단위로 적용한다. [출처: design.benchmark, T50]
| ID | 규칙 |
| :--- | :--- |
| **HL-1** | **덱 전체의 10% 이하** 슬라이드만 강조 테마(다크 반전)를 쓴다 |
| **HL-2** | 강조는 **구조적 전환점**(장 시작·핵심 결론·마무리)에 배치한다. 임의로 흩뿌리지 않는다 |
| **HL-3** | 강조 슬라이드 내부에서도 Layer 1 §2.3 페어링 규칙이 그대로 적용된다 |
| **HL-4** | 연속 2장 이상을 강조 테마로 두지 않는다 |
> **투사에서 강조 테마의 효과가 특히 크다.** 라이트 슬라이드가 이어지다 다크 슬라이드가 나오면 **실내 조도 자체가 달라지므로**, 관람자의 주의가 물리적으로 전환된다.
---
# 8. 표면·레이어링
## 8.1 레이어 축소
Carbon의 4단계 레이어링(base/L1/L2/L3)은 **투사에서 완전히 소실**된다. Layer 1 §6.1 SF-3에 따라 **최대 3단계**로 축소하고, 인접 명도차를 확대한다. [출처: design.benchmark, M4]
| 레벨 | 표현 | ΔG 요건 |
| :--- | :--- | :--- |
| `surface.base` | 캔버스 | — |
| `surface.raised` | **헤어라인 보더 + 흰 면** | 톤차 불충분 시 보더로 분리 |
| `surface.sunken` | 배경 톤 하향 | 인접 대비 **ΔG ≥ 9** |
## 8.2 그림자 금지
| ID | 규칙 | 근거 |
| :--- | :--- | :--- |
| **SH-P1** | **`box-shadow` 상당 산출을 금지**한다 | Layer 1 EL-2 — 투사에서 뭉개져 흐릿한 얼룩이 된다 |
| **SH-P2** | `raised`는 **보더**로, `overlay`는 **굵은 보더 + 여백 격리**로 표현한다 | [출처: M5 — ADS 자체 대안 "A border is the default approach"] |
| **SH-P3** | 깊이는 **대비·면·헤어라인**으로 만든다 |
## 8.3 그라디언트·투명도 금지
| ID | 규칙 |
| :--- | :--- |
| **GT-1** | **그라디언트 배경을 사용하지 않는다** (브랜드 `forbidden`) |
| **GT-2** | **알파 색을 사용하지 않는다.** 불투명 등가색으로 사전 평탄화한다 (Layer 1 CS-3) |
| **GT-3** | 예외: 워터마크·저투명 장식 라인 아이콘은 **불투명 등가색으로 변환하여** 사용한다 |
| **GT-4** | **backdrop blur·글래스모피즘을 사용하지 않는다** |
---
# 9. PPTX 구현
## 9.1 슬라이드 크기 설정
| 항목 | 값 |
| :--- | :--- |
| 슬라이드 크기 | **13.3333 × 7.5 inch** (PowerPoint 기본 와이드스크린) |
| EMU | **12,192,000 × 6,858,000** |
| 오써링 → PPTX | `EMU = px × 6350` (정수) |
| ID | 규칙 |
| :--- | :--- |
| **PX-1** | 슬라이드 크기를 **PowerPoint 기본 와이드스크린으로 설정**한다. 커스텀 크기를 쓰지 않는다 |
| **PX-2** | 모든 좌표·치수는 `px × 6350`으로 변환한다. **반올림이 발생하지 않는다** |
| **PX-3** | 폰트 크기는 `pt = px ÷ 2`로 변환한다 |
## 9.2 좌표 변환표 `[주요 값]`
| 항목 | px | EMU |
| :--- | ---: | ---: |
| 좌 마진 | 48 | 304,800 |
| 컬럼 폭 | 130 | 825,500 |
| 거터 | 24 | 152,400 |
| 콘텐츠 폭 | 1824 | 11,582,400 |
| 헤더 존 하단 | 192 | 1,219,200 |
| 콘텐츠 밴드 상단 | 216 | 1,371,600 |
| 콘텐츠 밴드 하단 | 960 | 6,096,000 |
| 푸터 존 상단 | 984 | 6,248,400 |
## 9.3 폰트
| ID | 규칙 |
| :--- | :--- |
| **FT-1** | **폰트를 임베드**한다 (브랜드 `type.family.embed`). 미임베드 시 대체 서체로 레이아웃이 붕괴한다 |
| **FT-2** | 임베드 불가 환경에서는 **텍스트를 아웃라인 처리**하거나 PDF로 배포한다 |
| **FT-3** | 폴백 서체 사용 시 Layer 1 §3.10 정규화 계수를 적용한다 |
| **FT-4** | **등폭 숫자(tabular figures)** 를 표·수치에 강제한다 (Layer 1 NM-1). PPTX에서는 `font-feature-settings`가 제한되므로, **등폭 숫자 전용 서체 변형**을 사용하거나 수동 정렬한다 |
## 9.4 이미지·도판
| ID | 규칙 |
| :--- | :--- |
| **IM-1** | 도판은 **벡터(EMF/SVG)** 우선. 불가 시 **배치 크기의 2배 해상도** 래스터 |
| **IM-2** | **텍스트·로고를 이미지에 굽지 않는다** (브랜드 LG-3) |
| **IM-3** | 도판 프레임은 Layer 1 §5.4의 6개 종횡비로 제한한다 |
| **IM-4** | 전면 도판은 헤더·푸터 존을 가리지 않는다 (VZ-3) |
## 9.5 모션
| ID | 규칙 |
| :--- | :--- |
| **MO-1** | 기본 전환은 **페이드**로 한다 |
| **MO-2** | 바운스·회전·무한 루프 장식 애니메이션을 사용하지 않는다 |
| **MO-3** | 애니메이션은 **최종 상태(end-state)만으로도 슬라이드가 성립**해야 한다 — PDF·인쇄 배포 대응 |
| **MO-4** | 점진 공개(progressive reveal)는 **논리 단계와 일치**할 때만 사용한다 |
## 9.6 대체 매체
| 매체 | 처리 |
| :--- | :--- |
| **PDF** | 폰트 임베드 + 애니메이션 최종 상태 |
| **HTML** | 1920×1080 논리 캔버스로 오써링 후 뷰포트 스케일 (CV-3) |
| **인쇄 배포** | `print` 프로파일로 **재조판**한다. 슬라이드를 그대로 축소 인쇄하지 않는다 |
> **MO-3·인쇄 배포 규칙의 취지**: 슬라이드는 배포 후 인쇄되거나 PDF로 읽히는 경우가 많다. 애니메이션·전환에 의존한 슬라이드는 그 순간 정보를 잃는다.
---
# 10. 검증 체크리스트
## 10.1 자동 검증
Layer 1 §8.1의 F1~F9에 더한 프로파일 전용 항목이다.
| # | 항목 | 판정 기준 | 실패 시 |
| :-: | :--- | :--- | :--- |
| **S1** | **캔버스 고정** | 1920×1080 | 중단 |
| **S2** | **컬럼 정합** | 12 × 130 + 11 × 24 = 1824 (잔차 0) | 중단 |
| **S3** | **EMU 정합** | 전 좌표가 px × 6350의 정수 결과 | 중단 |
| **S4** | **최소 크기** | 전 텍스트 ≥ 19px (H/57), 본문 ≥ 24px (H/45) | 중단 |
| **S5** | **최소 선 굵기** | 전 선 ≥ 2px | 중단 |
| **S6** | **푸터 존 불가침** | 콘텐츠 하단 ≤ 960px | 중단 |
| **S7** | **measure 범위** | 연속 본문 존 ≤ 6 col (37.5em) | 중단 |
| **S8** | **대비 목표** | 본문 ΔG ≥ 70 | 중단 |
| **S9** | **그림자 산출** | `box-shadow` 상당 0건 | 중단 |
| **S10** | **알파 잔존** | 투명도 객체 0건 (평탄화 완료) | 중단 |
| **S11** | **순백 전면 배경** | 0건 | 중단 |
| **S12** | **그라디언트** | 0건 | 중단 |
| **S13** | **악센트 경제** | 슬라이드당 ≤ 브랜드 상한 | 중단 |
| **S14** | **강조 슬라이드 비율** | 덱 전체의 ≤ 10% | 경고 |
| **S15** | **폰트 임베드** | 미임베드 0건 | 중단 |
| **S16** | **음수 자간 조건** | 60px 미만 요소에 음수 자간 0건 | 경고 |
| **S17** | **밴드 채움** | 하단 빈 면적 < 25% | 경고 |
| **S18** | **여백률** | 40~55% | 경고 |
## 10.2 육안 검수
| # | 항목 | 방법 |
| :-: | :--- | :--- |
| **R1** | **XGA 축소 판독 시험** | 캔버스를 53.3%(1024×576)로 축소 렌더 후 판독 확인 |
| **R2** | **그레이스케일 판독** | 흑백 변환 후 정보 손실 0 확인 |
| **R3** | **실투사 시험** | 실제 프로젝터 + 실내 조명 조건에서 확인 (자동 판정 불가) |
| **R4** | **원거리 판독** | 화면 높이의 8배 거리에서 1차 메시지 판독 확인 |
| **R5** | **레이어드 디테일** | 원거리 1차 메시지 + 근거리 2차 디테일 2층 성립 확인 (PD-3) |
| **R6** | **단일 결론 존** | 핵심 결론이 1개 존에 집약되었는지 (PD-1) |
| **R7** | **애니메이션 최종 상태** | 애니메이션 없이도 슬라이드가 성립하는지 (MO-3) |
| **R8** | **PPTX 왕복 검증** | PPTX 저장 → 재열기 후 좌표·폰트 유지 확인 |
---
## 근거 출처 요약
본 파일이 인용한 벤치마킹 항목: **T7 · T50 · M4 · M5 · §9.5 · §12.6 · §18-40**
전문: `RAG/design.benchmark_2026-07-28_v0.1.0.md`
**[CONFLICT DETECTED] 해소 이력**
- §5.4 Layer 1 BL-1(베이스라인 = `space.100`) 미충족 → **BL-1의 적용 범위를 "다단 연속 본문 매체"로 한정**. `design.foundations.md` §4.3 단서 추가 필요 (v0.1.1)
**[미검증] 항목**
- §3.2 투사물 최소 문자 크기 — 공개 1차 가이드라인 미발견 [§18-40]. 관람 거리·XGA 배율·선행 시스템 실운용값 3중 근거의 `[자체 정의]`
- §3.3 투사 최소 선 굵기 — 동일. XGA 배율 역산에 의한 `[자체 정의]`
**주요 정합 성과**: `1 px = 6350 EMU` 정수 환산으로 오써링 캔버스가 **PowerPoint 기본 와이드스크린과 반올림 오차 없이 일치**한다.
RAG/design system_v0.1.1/design.medium.print.md
+740
View File
@@ -0,0 +1,740 @@
# Prism Design System — Medium Profile: Print (Layer 2a)
| 버전 | 수정일 | 수정자 | 주요 변경 내용 | 비고 |
| :--- | :--- | :--- | :--- | :--- |
| v0.1.0 | 2026-07-28 | 조선두 | 신규 작성 — 판형·판면·그리드·타입 바인딩·베이스라인·선굵기·CMYK·인쇄조판·편람구조·검증 | 최초 버전 |
| v0.1.1 | 2026-07-29 | HMCM | §4.4 `8:4`/`4:8` 존 폭 249→**246** 정정 (8×25.5+7×6=246 — 그리드 정합 회복), 하위 실행 명세(M5 `A3/`) 연결 | 진단 N1 보정 |
| v0.1.2 | 2026-07-29 | HMCM | 하위 실행 명세 연결 갱신 — M1 편람·M6 A4 문서 추가 | 추가 모듈 파생 Task |
| 메타 | 값 |
| :--- | :--- |
| 파일 | `design.medium.print.md` |
| 계층 | **Layer 2a — Medium Profile: Print** |
| 역할 | Layer 1의 상대값을 **mm·pt 절대값으로 실체화** |
| 상위 | `design.foundations.md` (Layer 1) |
| 하위 | 인쇄 계열 Layer 3 모듈 — 실행 명세: `A3/module.a3-explainer.md` (M5) · `A3/module.a3-handbook.md` (M1) · `A4/module.a4-document.md` (M6) |
| 로드 정책 | **온디맨드** — 인쇄 산출물 작업 시에만 |
---
## 목차
- [1. 프로파일 개요](#1-프로파일-개요)
- [2. 판형·단위](#2-판형단위)
- [3. 판면·여백](#3-판면여백)
- [4. 그리드·다단](#4-그리드다단)
- [5. 타입 바인딩](#5-타입-바인딩)
- [6. 베이스라인 그리드](#6-베이스라인-그리드)
- [7. 선·획](#7-선획)
- [8. 색상 — CMYK](#8-색상--cmyk)
- [9. 인쇄 조판 규칙](#9-인쇄-조판-규칙)
- [10. 편람 구조](#10-편람-구조)
- [11. 검증 체크리스트](#11-검증-체크리스트)
---
# 1. 프로파일 개요
## 1.1 적용 조건
본 프로파일은 **종이에 출력되는 것을 최종 산출물로 하는** 모든 문서에 적용한다.
| 적용 | 비적용 |
| :--- | :--- |
| A3 편람·기술 매뉴얼 | 화면에서만 읽는 PDF → `screen` 프로파일 |
| A4 지침서·보고서 | 발표용 슬라이드 → `presentation` 프로파일 |
| A3 접지 도면 부록 | 웹 페이지의 인쇄 스타일시트 → `screen` + 본 프로파일 §9 병용 |
| 인쇄 후 배포되는 편람 | |
## 1.2 겸용 시 우선 규칙
하나의 산출물이 **인쇄되면서 동시에 투사**되는 경우가 있다(A3 편람을 회의에서 투사).
| ID | 규칙 |
| :--- | :--- |
| **PM-1** | 겸용 산출물은 **두 프로파일의 엄격한 쪽**을 채택한다 |
| **PM-2** | 특히 **본문 최소 크기와 대비 목표는 `presentation` 프로파일이 우선**한다. FHD 투사 시 A3 원본은 유효 폭 1527px로 **약 43.5% 축소**되므로, 인쇄 단독 기준을 그대로 쓰면 판독 불가가 된다 [출처: design.benchmark, §9.5] |
| **PM-3** | 겸용 여부는 Layer 3 모듈이 **선언**해야 한다. 선언 없이 겸용하지 않는다 |
> 본 프로파일의 수치는 **인쇄 단독**을 전제한다. 겸용이면 §5.5 상향표를 적용한다.
## 1.3 매체 상수
```yaml
medium: print
unit_primary: mm
unit_type: pt # 1pt = 1/72 inch = 0.352778mm
resolution_output: 300dpi # 오프셋 표준
type_base: 10pt # Layer 1 스케일의 base
space_base_unit: 6mm # space.100
baseline_grid: 6mm
contrast_target: AAA # ΔG >= 70
elevation_mode: border # 그림자 산출 금지
alpha_allowed: false # 사전 평탄화 강제
```
---
# 2. 판형·단위
## 2.1 지원 판형
| 판형 | 치수 (mm) | 종횡비 | 용도 |
| :--- | :--- | :---: | :--- |
| **A3 가로** | **420 × 297** | 1.4142 | **기본 판형** — 편람 본편, 1 Pair 스프레드 |
| A3 세로 | 297 × 420 | 1.4142 | 도면 부록, 장문 단독 |
| A4 세로 | 210 × 297 | 1.4142 | 지침서·보고서, A3 축소판 |
| A4 가로 | 297 × 210 | 1.4142 | 표·매트릭스 중심 문서 |
공차 **±2.0mm** (ISO 216). 재단 여유 **블리드 3mm**.
## 2.2 단위 환산
| 기준 | mm | inch | pt | px@300dpi |
| :--- | ---: | ---: | ---: | ---: |
| 1 mm | 1 | 0.03937 | 2.8346 | 11.811 |
| 1 inch | 25.4 | 1 | 72 | 300 |
| 1 pt | 0.35278 | 0.01389 | 1 | 4.1667 |
```
mm = pt × 0.352778
pt = mm × 2.834646
px@300dpi = mm ÷ 25.4 × 300
```
## 2.3 출력 해상도
| 판형 | 300 dpi (오프셋 표준) | 600 dpi (선화 정밀) |
| :--- | :--- | :--- |
| A3 가로 | **4961 × 3508 px** | 9921 × 7016 px |
| A4 세로 | 2480 × 3508 px | 4961 × 7016 px |
| ID | 규칙 |
| :--- | :--- |
| **RS-1** | 래스터 이미지는 **최소 300dpi**로 배치한다. 배치 크기 기준으로 유효 해상도를 검증한다 |
| **RS-2** | 선화·도면·다이어그램은 **벡터(SVG/PDF)** 로 배치한다. 래스터화하지 않는다 [출처: design.benchmark, T3 (USWDS 인쇄 규칙 — SVG 원칙)] |
| **RS-3** | 텍스트는 **폰트 임베드 또는 아웃라인**으로 처리한다. 텍스트를 이미지로 굽지 않는다 |
---
# 3. 판면·여백
## 3.1 고전 캐논과의 관계
Van de Graaf 캐논은 여백을 **내:상:외:하 = 2:3:4:6**으로 두어 판면율 약 44%를 만든다. Tschichold의 황금 캐논도 동일하다. [출처: design.benchmark, §11.3]
**본 시스템은 이 캐논을 채택하지 않는다.**
| 구분 | 고전 캐논 | 기술 편람 |
| :--- | :--- | :--- |
| 대상 | 단행본 (1단, 통독) | 편람 (다단, 열람·참조) |
| 판면율 | 약 44% | **약 75%** |
| 여백의 역할 | 손이 놓이는 자리, 미적 여백 | 제본·재단 여유, 러닝헤드 |
| 정보 밀도 | 낮음 | 높음 |
캐논은 **참조 좌표**로만 인용하며, 실제 여백은 아래 원칙으로 정한다.
| ID | 규칙 | 근거 |
| :--- | :--- | :--- |
| **MG-1** | 여백은 **12.7mm(0.5 inch) 미만으로 내리지 않는다** | T3 (USWDS "do not make the margins smaller than 0.5 inches") |
| **MG-2** | **하단 여백 ≥ 상단 여백.** 시각 중심은 기하 중심보다 위에 있다 | 고전 캐논의 유효 원리 |
| **MG-3** | 여백은 **`space.050`(3mm)의 배수**로 둔다 | Layer 1 BL-2 |
| **MG-4** | 콘텐츠 높이는 **베이스라인(6mm)의 정수배**여야 한다 | Layer 1 BL-1 |
| **MG-5** | 양면 제본 시 **안쪽 여백에 제본 여유(gutter allowance)를 가산**한다 — 편람 두께에 따라 3~9mm |
## 3.2 판형별 판면 정의
### A3 가로 (기본)
```
판형 420 × 297 mm
좌우 여백 24 mm
상단 여백 21 mm
하단 여백 24 mm
콘텐츠 372 × 252 mm
베이스라인 42 행 (252 ÷ 6 = 42) ✓
판면율 75.2 %
```
### A3 세로
```
판형 297 × 420 mm
좌우 여백 24 mm
상단 여백 21 mm
하단 여백 27 mm
콘텐츠 249 × 372 mm
베이스라인 62 행 ✓
판면율 74.1 %
```
### A4 세로 (2단 기본)
```
판형 210 × 297 mm
좌우 여백 12 mm ← MG-1 위반 아님? 12 < 12.7
상단 여백 21 mm
하단 여백 24 mm
콘텐츠 186 × 252 mm
베이스라인 42 행 ✓
판면율 75.2 %
```
> **[CONFLICT DETECTED] A4 세로 좌우 여백 12mm** 은 MG-1(12.7mm 하한)에 **0.7mm 미달**한다.
> **해소**: USWDS의 0.5인치 하한은 **가정용·사무용 프린터의 인쇄 불가 영역**을 전제한 값이다. 전문 인쇄(오프셋·디지털 출력 후 재단)에서는 재단 여유가 별도로 확보되므로 적용되지 않는다. 다만 **사무용 프린터 출력을 전제하는 모듈**은 좌우 여백을 **15mm**로 상향한다(그 경우 콘텐츠 180mm, 컬럼 9.5mm).
### A4 세로 (1단 조판용)
A4 1단은 표준 여백에서 measure 52.7em으로 **상한 38em을 크게 초과**한다. 1단 조판이 필요하면 여백을 확대한다.
```
좌우 여백 39 mm
콘텐츠 132 × 252 mm → measure 37.4 em ✓
거터 3 mm / 컬럼 8.25 mm
판면율 53.3 %
```
### A4 가로
```
판형 297 × 210 mm
좌우 여백 24 mm
상단 여백 15 mm
하단 여백 21 mm
콘텐츠 249 × 174 mm
거터 3 mm / 컬럼 18 mm
베이스라인 29 행 ✓
판면율 69.5 %
```
---
# 4. 그리드·다단
## 4.1 컬럼 정합
Layer 1 GC-3(정합 잔차 0)을 전 판형에서 검증했다.
| 판형 | 콘텐츠 폭 | 거터 | 컬럼 폭 | 검증식 |
| :--- | ---: | ---: | ---: | :--- |
| **A3 가로** | 372mm | 6mm | **25.5mm** | 12 × 25.5 + 11 × 6 = 372 ✓ |
| A3 세로 | 249mm | 3mm | **18mm** | 12 × 18 + 11 × 3 = 249 ✓ |
| A4 세로 | 186mm | 6mm | **10mm** | 12 × 10 + 11 × 6 = 186 ✓ |
| A4 가로 | 249mm | 3mm | **18mm** | 12 × 18 + 11 × 3 = 249 ✓ |
## 4.2 다단 measure 검증
Layer 1 §3.7 기준: **1단 22~38em(이상 33) / 다단 20~25em**. body 10pt = 3.5278mm/em.
### A3 가로
| 조판 | 컬럼 병합 | 폭 | **measure** | 판정 |
| :--- | :---: | ---: | ---: | :--- |
| 1단 | 12 col | 372.0mm | 105.4 em | ✗ 부적합 |
| 2단 | 6 col | 183.0mm | 51.9 em | ✗ 부적합 |
| **3단** | **4 col** | **120.0mm** | **34.0 em** | **✓ 최적** — Bringhurst 이상값 33em 재현 |
| **4단** | **3 col** | **88.5mm** | **25.1 em** | **✓ 고밀도** — 다단 권장 상단 |
### A3 세로
| 조판 | 컬럼 병합 | 폭 | **measure** | 판정 |
| :--- | :---: | ---: | ---: | :--- |
| 1단 | 12 col | 249.0mm | 70.6 em | ✗ 부적합 |
| **2단** | **6 col** | **123.0mm** | **34.9 em** | **✓ 최적** |
| **3단** | **4 col** | **81.0mm** | **23.0 em** | **✓ 고밀도** |
| 4단 | 3 col | 60.0mm | 17.0 em | ✗ 과협소 |
### A4 세로 (표준 여백)
| 조판 | 컬럼 병합 | 폭 | **measure** | 판정 |
| :--- | :---: | ---: | ---: | :--- |
| 1단 | 12 col | 186.0mm | 52.7 em | ✗ — §3.2 확대여백 사용 |
| **2단** | **6 col** | **90.0mm** | **25.5 em** | **✓ 기본** |
| 3단 | 4 col | 58.0mm | 16.4 em | ✗ 과협소 |
### A4 가로
| 조판 | 컬럼 병합 | 폭 | **measure** | 판정 |
| :--- | :---: | ---: | ---: | :--- |
| **2단** | **6 col** | **123.0mm** | **34.9 em** | **✓ 최적** |
| **3단** | **4 col** | **81.0mm** | **23.0 em** | **✓ 고밀도** |
## 4.3 단수 선택 규칙
| ID | 규칙 |
| :--- | :--- |
| **CL-1** | 단수는 **measure가 허용 범위에 드는 것** 중에서만 선택한다 |
| **CL-2** | 도판·표가 지면의 40% 이상이면 **고밀도(3단 → 4단)** 로 내린다 |
| **CL-3** | 한 지면 안에서 **단수를 혼용하지 않는다.** 전폭 요소(표·도판)는 단 구조 위에 얹는다 |
| **CL-4** | body 크기를 낮춰 measure를 맞추지 않는다. **단수를 조정한다** |
| **CL-5** | 좌우 단의 **행이 서로 정렬**되어야 한다 (Layer 1 BL-4) |
## 4.4 허용 분할
Layer 1 §5.3의 분할만 사용한다. A3 가로 기준 존 폭:
| 분할 | 존 폭 (mm) | 용도 |
| :--- | :--- | :--- |
| `12` | 372 | 전폭 표·도판·표지 |
| `6:6` | 183 / 183 | 대조·비교 |
| `8:4` | 246 / 120 | 본문 + 사이드바 |
| `4:8` | 120 / 246 | 내비 레일 + 본문 |
| `4:4:4` | 120 / 120 / 120 | **3단 본문 (기본)** |
| `3:3:6` | 88.5 / 88.5 / 183 | 맥락 2 + 결론 1 |
| `3:3:3:3` | 88.5 × 4 | **4단 본문 / 4단계 프로세스** |
---
# 5. 타입 바인딩
## 5.1 스케일 실체화
`size(n) = 10pt × 1.125ⁿ` (Layer 1 §3.1). 반올림 단위 **0.1pt**.
| 역할 | `n` | **pt** | mm | 행간 | 행간 pt | 웨이트 |
| :--- | :-: | ---: | ---: | :-: | ---: | :--- |
| `caption` | −2 | **7.9** | 2.79 | 1.55 | 12.2 | Medium 500 |
| `body-sm` | −1 | **8.9** | 3.14 | 1.70 | 15.1 | Regular 400 |
| **`body`** | **0** | **10.0** | **3.53** | **1.70** | **17.0** | Regular 400 |
| `body-lg` | +1 | **11.3** | 3.98 | 1.70 | 19.2 | Regular 400 |
| `title-sm` | +2 | **12.7** | 4.47 | 1.50 | 19.0 | Medium 500 |
| `title` | +4 | **16.0** | 5.65 | 1.50 | 24.0 | Bold 700 |
| `title-lg` | +6 | **20.3** | 7.16 | 1.50 | 30.4 | Bold 700 |
| `display` | +9 | **28.9** | 10.18 | 1.25 | 36.1 | Regular 400 / Medium 500 |
| `display-lg` | +12 | **41.1** | 14.50 | 1.25 | 51.4 | Regular 400 |
## 5.2 GOV.UK 인쇄 스케일 대조
[출처: design.benchmark, T2 — `_typography-responsive.scss` 인쇄 실측값]
| 역할 | 본 시스템 | GOV.UK (A4 1단) | 차 |
| :--- | ---: | ---: | ---: |
| `title-sm` | 12.7pt | 14pt | −1.3 |
| `title` | 16.0pt | 18pt | −2.0 |
| `title-lg` | 20.3pt | 24pt | −3.7 |
| `display` | 28.9pt | 32pt | −3.1 |
| `body` | 10.0pt | 14pt (19px 스케일) | −4.0 |
> **차이의 근거**: GOV.UK는 **A4 1단, 일반 국민 대상, 접근성 최우선** 문서다. 본 시스템은 **A3 3~4단, 기술 실무자 대상 편람**이다. 다단 조판에서 큰 본문은 measure를 파괴한다(§4.2 검증). 골격의 **비율 구조는 동일**하며 base만 낮다.
## 5.3 최소 크기 하한
| ID | 규칙 | 값 | 근거 |
| :--- | :--- | :--- | :--- |
| **TS-1** | 본문 하한 | **9.0pt** | Butterick "In print, the optimal size for body text is **10–12 point**" — 하한 여유 [출처: §11.2] |
| **TS-2** | 캡션·주석·범례 하한 | **7.5pt** | 기술 출판 관행 |
| **TS-3** | **절대 하한** | **7.0pt** | 이 미만은 어떤 요소에도 사용 금지 |
| **TS-4** | **역상(reverse) 텍스트 하한** | **10.0pt** + **산세리프 Bold** | 잉크 번짐으로 흰 글자가 메워짐 [출처: §17] |
| **TS-5** | 겸용(투사) 시 | §5.5 상향표 적용 | PM-2 |
> **[CONFLICT DETECTED] USWDS 12pt 하한**
> USWDS는 *"Use 12 point or larger text for all content"* 를 명시한다 [출처: T3]. 본 시스템의 본문 10pt·캡션 7.9pt는 이에 미달한다.
> **해소**: USWDS의 12pt는 **웹 폼에서 출력되는 기록물(records)** 을 대상으로 하며, 일반 국민의 사무용 프린터 출력을 전제한다. 전문 조판된 기술 편람에는 적용 대상이 다르다. 다만 **일반 배포용·접근성 우선 산출물**에서는 USWDS 기준을 채택하도록 Layer 3 모듈이 선언할 수 있다(§5.5 `a11y` 열).
## 5.4 자간
| 역할 | 자간 | 근거 |
| :--- | :--- | :--- |
| `display-lg` (41.1pt ≈ 55px@96dpi) | **0** | Layer 1 TR-1 — 60px 상당 미만이므로 음수 자간 금지 |
| `display` 이하 전부 | **0** | 동일 |
| `.label` 톤 | **+0.12em** | TR-4 |
| `.eyebrow` 톤 | **+0.18em** | TR-4 |
> **인쇄 프로파일에서는 음수 자간이 사실상 사용되지 않는다.** 최대 크기인 `display-lg`조차 60px 상당(=45pt)에 미달하기 때문이다. A1 이상 대형 판형 모듈에서만 검토 대상이 된다.
## 5.5 겸용 상향표
| 역할 | 인쇄 단독 | **투사 겸용** | **접근성 우선(a11y)** |
| :--- | ---: | ---: | ---: |
| `caption` | 7.9pt | **11.3pt** (n=+1) | 12.0pt |
| `body-sm` | 8.9pt | 12.7pt (n=+2) | 12.0pt |
| **`body`** | **10.0pt** | **14.2pt** (n=+3) | **12.0pt** |
| `title-sm` | 12.7pt | 18.0pt | 14.0pt |
| `title` | 16.0pt | 22.8pt | 18.0pt |
- **투사 겸용**: base를 **3 스텝 상향**(10pt → 14.2pt)한다. FHD 투사 시 43.5% 축소를 보정하면 실효 6.2pt로, 원 인쇄 크기보다 작아지는 것을 막는다 `[추론 — §9.5 계산 기반]`
- 겸용 시 **단수도 재검토**한다. body 14.2pt에서 A3 3단(120mm)은 measure 24.0em으로 다단 범위에 든다 ✓
---
# 6. 베이스라인 그리드
## 6.1 정합
```
body 10pt × 행간 1.70 = 17.00pt = 5.9972 mm
baseline grid = 6.0000 mm
오차 = 0.0028 mm (0.047 %)
```
이 정합은 우연이 아니라 **역산 결과**다. Layer 1 BL-1이 요구하는 `body 행간 = space.100`을 만족시키기 위해, 한글 CJK 행간 1.70(Layer 1 §3.4 불변)을 고정한 상태에서 base를 10pt로 선택했다.
## 6.2 그리드 규칙
| ID | 규칙 |
| :--- | :--- |
| **BG-1** | 모든 본문 행은 **6mm 격자에 스냅**한다 |
| **BG-2** | 헤딩·도판·표는 격자의 **정수배 높이**를 차지한다 |
| **BG-3** | 헤딩 앞뒤 여백은 **헤딩 높이 + 여백 = 격자 정수배**가 되도록 조정한다 |
| **BG-4** | 도판이 격자 정수배가 아니면 **여백으로 보정**한다. 본문 행을 밀지 않는다 |
| **BG-5** | 좌우 단의 **1행 베이스라인이 일치**해야 한다 (Layer 1 BL-4) |
## 6.3 요소별 격자 소요
| 요소 | 행간 pt | mm | **격자 소요** |
| :--- | ---: | ---: | :---: |
| `body` 1행 | 17.0 | 6.00 | **1** |
| `body-sm` 1행 | 15.1 | 5.33 | 1 (여백 0.67mm 보정) |
| `caption` 1행 | 12.2 | 4.32 | 1 (여백 1.68mm 보정) |
| `title-sm` 1행 | 19.0 | 6.72 | 2 (여백 5.28mm) |
| `title` 1행 | 24.0 | 8.47 | 2 (여백 3.53mm) |
| `title-lg` 1행 | 30.4 | 10.74 | 2 (여백 1.26mm) |
| `display` 1행 | 36.1 | 12.74 | 3 (여백 5.26mm) |
| `display-lg` 1행 | 51.4 | 18.14 | 4 (여백 5.86mm) |
## 6.4 스페이싱 실체화
| 토큰 | 배수 | **mm** | 별칭 |
| :--- | :---: | ---: | :--- |
| `space.025` | 0.25× | **1.5** | — |
| `space.050` | 0.5× | **3** | — |
| **`space.100`** | **1×** | **6** | `text-block`, 거터(A3 가로·A4 세로) |
| `space.150` | 1.5× | **9** | `paragraph` |
| `space.200` | 2× | **12** | `card-padding` |
| `space.300` | 3× | **18** | `block-gap` |
| `space.400` | 4× | **24** | `zone-gap`, 좌우 여백(A3) |
| `space.600` | 6× | **36** | `section-gap` |
| `space.800` | 8× | **48** | — |
**반경**: `radius.md`(1×) = **3mm**. `sm` 1.5mm / `lg` 4.5mm / `none` 0.
---
# 7. 선·획
## 7.1 UI 획 실체화
| 토큰 | 배수 | **mm** | **pt** | 적용 |
| :--- | :---: | ---: | ---: | :--- |
| `stroke.hairline` | 1× | **0.20** | 0.57 | 헤어라인 구분선·카드 보더 |
| `stroke.regular` | 2× | **0.40** | 1.13 | 강조 보더·표 외곽 |
| `stroke.bold` | 3× | **0.60** | 1.70 | 구조 강조선 |
| `stroke.icon` | 4× | **0.80** | 2.27 | 아이콘 획 |
| `stroke.connector` | 5× | **1.00** | 2.83 | 프로세스 커넥터 |
| ID | 규칙 | 근거 |
| :--- | :--- | :--- |
| **SP-1** | **절대 하한 0.15mm (0.5pt)** — 이 미만은 인쇄에서 끊긴다 | [출처: §17 / prepressure 역상 최소치] |
| **SP-2** | **역상(흰 선)의 하한은 0.25mm** — 잉크 번짐으로 메워진다 | 동일 |
| **SP-3** | **판형이 커져도 UI 획을 비례 확대하지 않는다** | Layer 1 SW-2 / T10 |
## 7.2 제도 선 (도면 요소)
UI 획과 **별개 체계**다. ISO 128 / ISO 9175-1의 √2 계열을 따른다. [출처: design.benchmark, §9.4]
```
0.13 → 0.18 → 0.25 → 0.35 → 0.5 → 0.7 → 1.0 → 1.4 → 2.0 mm
```
| 판형 | 기본선 굵기 | 근거 |
| :--- | :---: | :--- |
| A4 / A3 / A2 | **0.35mm** | ISO 128 |
| A1 | **0.5mm** | 한 칸 이동 |
| A0 | **0.7mm** | 두 칸 이동 |
| 선 종류 | 굵기 (A3 기준) | 비고 |
| :--- | :---: | :--- |
| 외형선 (굵은 실선) | **0.35mm** | 기본선 |
| 숨은선·중심선·치수선 (가는 실선) | **0.18mm** | 기본선 −2칸 |
| 절단선·특수 지시선 | **0.5mm** | 기본선 +1칸 |
| ID | 규칙 |
| :--- | :--- |
| **DL-1** | 도면 선은 **판형 한 단계당 √2 계열 한 칸 이동**한다 (SW-3) |
| **DL-2** | 도면 선 굵기 체계와 UI 획 체계를 **혼용하지 않는다.** 같은 지면에서도 도판 내부는 DL, 도판 프레임은 SP를 따른다 |
| **DL-3** | A3 접지 부록에서 **A1 원도를 A3로 축소**할 경우, 선 굵기가 √2 두 칸 내려가지 않도록 **선 가중치를 재설정**한다 |
---
# 8. 색상 — CMYK
## 8.1 색 재현 원칙
| ID | 규칙 | 근거 |
| :--- | :--- | :--- |
| **CK-1** | **본문 텍스트는 100% K 단독**으로 인쇄한다. 리치블랙·CMY 혼합을 금지한다 | [출처: T34 (GOV.UK `#000` true black, "avoid printers using colour ink to print body text") · §12.2] |
| **CK-2** | 작은 텍스트(12pt 미만)는 **어떤 색이든 단색 판(單色版)**으로 처리한다. 다판 중첩은 레지스터 오차로 테두리가 번진다 | §12.2 |
| **CK-3** | 대형 솔리드 블랙 면은 **리치블랙 C60 M40 Y40 K100 (TAC 240%)** 을 사용한다 | [출처: §12.2 Adobe helpx] |
| **CK-4** | **최소 틴트는 10%** — 그 미만은 인쇄에서 재현되지 않거나 얼룩진다 | [출처: §12.4 prepressure 실측] |
| **CK-5** | **알파(투명도) 색을 사용하지 않는다.** 불투명 등가색으로 사전 평탄화한다 | Layer 1 CS-3 |
| **CK-6** | 총 잉크량(TAC) 상한은 **출력 프로파일을 따른다**. 미지정 시 300%를 상한으로 한다 | §12.3 |
## 8.2 출력 프로파일
| 항목 | 값 | 상태 |
| :--- | :--- | :--- |
| 국제 기본값 | **FOGRA51 / PSO Coated v3 (TAC 300%)** | ECI / ICC 레지스트리 확인 |
| 구 표준 참고 | FOGRA39 = **TAC 330%** (저잉크 300%) | **[정정]** 350%는 구 FOGRA27이며 FOGRA39가 아니다 [출처: §18-36] |
| **한국 시장 표준** | **미확정** | **[미검증]** 1차 자료 미발견. GWG 문서에 한국 항목 없음 [출처: §18-39] |
| ID | 규칙 |
| :--- | :--- |
| **PR-1** | **인쇄 발주 전 인쇄소에 출력 프로파일을 확인**하고, 확인된 프로파일로 색 변환·교정을 수행한다 |
| **PR-2** | 프로파일 미확인 상태로 CMYK 확정값을 문서에 기재하지 않는다 |
## 8.3 브랜드 색의 CMYK 변환
| ID | 규칙 |
| :--- | :--- |
| **CV-1** | 브랜드 색의 CMYK 등가값은 **인쇄소가 목표 프로파일로 산출**한 값을 정본으로 한다 |
| **CV-2** | 산출된 CMYK는 `design.tokens.json`의 `mediums.print.color.*`에 등록한다 |
| **CV-3** | **등록 전까지 인쇄 산출물을 확정하지 않는다** |
| **CV-4** | **진한 파랑·초록 계열이 CMYK 색역에서 가장 큰 타격**을 받는다. 브랜드 base가 딥그린 계열인 경우 교정쇄(proof) 확인을 필수로 한다 [출처: M23 / §12.1] |
> **[미검증]** 본 파일은 브랜드 색의 CMYK 수치를 **기재하지 않는다.** sRGB→CMYK 변환은 목표 프로파일·용지·잉크에 따라 결과가 달라지므로, 프로파일 미확정 상태의 수치 기재는 오도(誤導)가 된다. CV-1~CV-3 절차로 확보한다.
## 8.4 흑백 출력 대응
편람은 흑백 복사·흑백 재출력이 빈번하다.
| ID | 규칙 | 근거 |
| :--- | :--- | :--- |
| **BW-1** | **GRADE 사다리가 곧 그레이 사다리**다. Layer 1 §2.1의 GRADE는 휘도 기반이므로 흑백 변환 후에도 명도 관계가 보존된다 | T4 |
| **BW-2** | 흑백 출력 시 **정보 손실이 0이어야 한다.** 색으로만 구분되는 정보가 있으면 설계 결함이다 | Layer 1 CO-1 |
| **BW-3** | 상태 표기 4종(Do/Don't/Caution/Tip)은 GRADE가 균일(66~68)하므로 **흑백에서 색으로 구분되지 않는다.** 반드시 기호(✓✕▲▣)를 병기한다 | Layer 1 ST-1 |
| **BW-4** | 데이터 시각화 범주형은 GRADE 사다리(39/45/55/64/72)로 **부분적 분리**만 확보된다. **패턴·해칭 또는 직접 라벨을 병기**한다 | Layer 1 DV-3 |
| **BW-5** | 산출 전 **그레이스케일 변환 후 판독 시험**을 수행한다 | 육안 검수 V4 |
## 8.5 대비 목표
| 항목 | 목표 |
| :--- | :--- |
| 본문 | **ΔG ≥ 70 (AAA, 실측 ≥ 7:1)** |
| 대형 텍스트 | ΔG ≥ 55 |
| 구조선·보더 | ΔG ≥ 40 |
| 면(fill) | 인접 면 간 ΔG ≥ 9 |
---
# 9. 인쇄 조판 규칙
[출처: design.benchmark, T3 (USWDS 인쇄 규칙 6종) — 웹 rem ↔ 인쇄 pt 분리를 명시한 유일한 공식 지침]
## 9.1 표 처리
편람은 표가 지배적이므로 표 처리 규칙이 특히 중요하다.
| ID | 규칙 |
| :--- | :--- |
| **TB-1** | **표 헤더는 매 페이지 반복**한다 (`thead` 반복 / `repeat header row`) |
| **TB-2** | 표를 **행 중간에서 분절하지 않는다** (`page-break-inside: avoid` 상당) |
| **TB-3** | 표 셀 텍스트는 `body-sm`(8.9pt)까지 축소할 수 있으나 **7.5pt 미만으로 내리지 않는다** |
| **TB-4** | 셀 텍스트가 40자를 초과하면 **압축하고 원문은 상세면·부록으로 이관**한다 |
| **TB-5** | 수치 열은 **등폭 숫자 + 우측 정렬** (Layer 1 NM-1·NM-2) |
| **TB-6** | 표 계속 시 **"(계속)" 표기**를 헤더 우측에 둔다 |
## 9.2 단락 처리
| ID | 규칙 |
| :--- | :--- |
| **PG-1** | **위도우(widow)·오펀(orphan) 회피** — 단락 첫 행이 페이지 끝에 홀로, 마지막 행이 페이지 처음에 홀로 남지 않게 한다 (최소 2행) |
| **PG-2** | **헤딩은 뒤따르는 본문 2행 이상과 같은 면**에 둔다 (`page-break-after: avoid`) |
| **PG-3** | 도판·표는 **캡션과 분리하지 않는다** |
| **PG-4** | 단락 첫 줄 들여쓰기와 단락 간 여백을 **동시에 쓰지 않는다.** 본 시스템은 **여백 방식**(`space.150`)을 채택한다 |
## 9.3 도판 처리
| ID | 규칙 | 근거 |
| :--- | :--- |
| **FG-1** | 도판은 **벡터 우선** (RS-2) | T3 |
| **FG-2** | **전체 도면을 통째로 싣지 않는다. 해당 부위만 크롭**한다 | [출처: T29 (Polaris Screenshots 규칙)] |
| **FG-3** | 크롭 시 **여백을 균등**하게 남긴다 | T29 |
| **FG-4** | 한 절차의 **모든 단계에 도판을 넣지 않는다.** 판단이 갈리는 지점에만 넣는다 | T29 |
| **FG-5** | 도판 프레임은 Layer 1 §5.4의 **6개 종횡비**로 제한한다 | T17 |
| **FG-6** | 도판에 **텍스트·로고를 굽지 않는다.** 라벨은 조판 텍스트로 얹는다 | 브랜드 LG-3 |
## 9.4 각주
| ID | 규칙 | 근거 |
| :--- | :--- |
| **FN-1** | **각주는 인쇄 매체에서만 사용한다** | [출처: T35 — GOV.UK "Do not use footnotes… They're designed for reference in print". 이는 화면에서 각주를 쓰지 말라는 뜻이며, **인쇄에서는 각주 사용의 적극적 근거**가 된다] |
| **FN-2** | 각주는 **해당 면 하단**에 둔다. 미주(尾註)로 몰지 않는다 |
| **FN-3** | 각주 번호는 **면 단위로 재시작**하지 않고 **절 단위로 연속**한다 |
| **FN-4** | 각주 크기는 `caption`(7.9pt), 상단에 `stroke.hairline` 구분선 |
## 9.5 페이지 분할 우선순위
콘텐츠가 면을 넘칠 때의 처리 순서다.
1. **분량 압축** — 원문은 상세면·부록으로 이관 (TB-4)
2. **단수 조정** — 3단 → 4단 (CL-2)
3. **면 분할** — 논리 단위(절) 경계에서 자른다
4. **판형 변경** — A3 → A3 접지 (최후 수단)
> **body 크기를 낮추는 선택지는 목록에 없다.** measure와 베이스라인 정합이 동시에 깨지기 때문이다.
---
# 10. 편람 구조
> 편람(handbook)은 **통독용이 아니라 열람·참조용**이다. 색인·상호참조·러닝헤드는 장식이 아니라 **기본 인프라**다.
## 10.1 장별 상대 페이지 번호
| ID | 규칙 |
| :--- | :--- |
| **PN-1** | 페이지 번호는 **`<장>-<면>`** 형식으로 표기한다 (`3-15` = 3장 15면) |
| **PN-2** | 각 장의 면 번호는 **1부터 재시작**한다 |
| **PN-3** | 전권 통합 번호를 **병기하지 않는다** (이중 번호는 참조 혼선을 낳는다) |
| **PN-4** | 앞붙이(서문·목차)는 **로마숫자 소문자**(i, ii, iii)를 사용한다 |
| **PN-5** | 부록은 **`부록A-1`** 형식 |
> **PN-1~PN-3의 실익**: 장 단위 부분 개정·차환(loose-leaf replacement)이 가능해진다. 3장만 개정해도 4장 이후의 페이지 번호가 바뀌지 않으므로, **개정 대상 장만 인쇄·교체**하면 된다. `RAG/04_시공상세설계정보물_편람.pdf`(274면)가 실제로 이 방식을 사용한다.
## 10.2 절 번호 (ISO 2145)
[출처: design.benchmark, §11.4 — ISO 2145:1978 유효]
| ID | 규칙 |
| :--- | :--- |
| **SN-1** | **아라비아 숫자만** 사용한다 |
| **SN-2** | 1차 수준은 **1부터 연속**한다 |
| **SN-3** | 수준 구분에 **마침표**를 쓴다 (`3.7.4`) |
| **SN-4** | **최종 하위 번호 뒤에는 마침표를 붙이지 않는다** (`3.7.4` ✓ / `3.7.4.` ✗) |
| **SN-5** | 서문·개요 등에 **0을 부여**할 수 있다 (`0. 일러두기`) |
| **SN-6** | 수준은 **4단계까지**로 제한한다 (`3.7.4.2`). 그 이하는 가·나·다 또는 ①②③ |
> **[주의] MS Word 기본 자동 번호 매기기는 최종 번호 뒤에 마침표를 붙이므로 ISO 2145 위반이다.** 서식을 수정해야 한다.
## 10.3 러닝헤드 / 러닝풋
| ID | 규칙 | 근거 |
| :--- | :--- | :--- |
| **RH-1** | 양면 인쇄 시 **좌면(verso)에 장 제목, 우면(recto)에 절 제목**을 둔다 | [출처: §11.4 — 기술·참조 자료 관행. **[미검증, 참고용]** cambric.pub] |
| **RH-2** | 단면 인쇄 시 **장 제목 + 절 제목**을 한 줄에 배치한다 |
| **RH-3** | 러닝헤드 크기는 `caption`(7.9pt) `.label` 톤 |
| **RH-4** | **장 도비라(속표지)와 부록 표지에는 러닝헤드를 넣지 않는다** | CMOS 1.16 (Omission of running heads) |
| **RH-5** | 러닝풋에는 **페이지 번호 + 문서 버전 + 발행일**을 둔다 |
## 10.4 상호참조
| ID | 규칙 | 근거 |
| :--- | :--- |
| **XR-1** | 참조는 **절 번호 + 면수**를 병기한다 — `(→ 3.4절, p.3-27)` | [출처: M12 (GOV.UK "링크 뒤 URL 자동 노출"의 인쇄판 치환) — "인쇄 시 목적지를 명시한다"는 원리 계승] |
| **XR-2** | **방향어를 쓰지 않는다** ("아래 표", "앞서") — 브랜드 §5.7 |
| **XR-3** | 표·그림에는 **`[표 3-4]` `[그림 3-4]` 형식의 장별 번호**를 부여한다 |
| **XR-4** | 참조 대상에 번호가 없으면 **번호를 부여한다**. 번호 없는 대상을 참조하지 않는다 |
## 10.5 색인 (Index)
[출처: design.benchmark, §11.4 — ISO 999:1996 (유효, 2020 재확인) / CMOS 인용 (Penn State UP 저자 가이드)]
| 항목 | 기준 |
| :--- | :--- |
| **총 항목 수** | 본문 면수의 **약 2배** |
| **면당 참조 수** | **5~6개** |
| **색인 분량** | 전체 면수의 **약 5%** |
| **하위 항목 전환** | 한 표제어에 면 번호가 **6개를 초과**하면 하위 항목으로 분할 |
| **재하위 항목** | **최소한으로** 사용 |
| **표제어 출처** | **본문의 장·절 제목에서 도출**한다 (아이디어 골격을 제공하므로) |
## 10.6 용어집 (Glossary)
| ID | 규칙 |
| :--- | :--- |
| **GL-1** | 전문 용어는 **초출 시 정의**하거나 **용어집에 등재**한다 (브랜드 §5.8 정의율 100%) |
| **GL-2** | 용어집은 **가나다순**으로 배열한다 |
| **GL-3** | 동일 개념의 **이표기(異表記)를 병기**하고 정식 표기를 지정한다 |
| **GL-4** | 용어집 항목에는 **본문 초출 위치를 상호참조**한다 |
## 10.7 청킹·목차 블록
| ID | 규칙 | 근거 |
| :--- | :--- |
| **CH-1** | 각 장 첫 면에 **해당 장의 절 목차 블록**을 고정 배치한다 | [출처: T37 — GOV.UK가 아코디언 대신 권장한 1순위 패턴이 "제목으로 구분된 단일 흐름 + 상단 앵커 목차"이며, **이것이 곧 인쇄물의 기본형**이다] |
| **CH-2** | 각 항목 최상단에 **"적용 조건 / 제외 조건" 블록**을 둔다 | T31 (브랜드 §5.5) |
| **CH-3** | 개폐형 구조(아코디언·탭)는 인쇄에서 **물리적으로 불가능**하다. 전개된 단일 흐름으로 조판한다 | T37 |
## 10.8 참조 사양 면책
| ID | 규칙 | 근거 |
| :--- | :--- |
| **DC-1** | 편람 서문에 **"본 편람은 참조 사양이며, 개정 시 기 시공분에 소급 적용되지 않는다"** 를 명시한다 | [출처: T25 — SLDS "If SLDS updates the blueprint, your component code isn't updated automatically"의 편람판] |
| **DC-2** | **"본 편람 준수가 현장 적합성을 보증하지 않는다"** 를 명시한다 | [출처: T49 — USWDS "Building with accessible components does not guarantee an accessible service" / "We test our work. You need to test yours."] |
---
# 11. 검증 체크리스트
## 11.1 자동 검증 (기계 판정)
Layer 1 §8.1의 F1~F9에 더해, print 프로파일 전용 항목이다.
| # | 항목 | 판정 기준 | 실패 시 |
| :-: | :--- | :--- | :--- |
| **P1** | **판면 정합** | 콘텐츠 높이 ÷ 6mm = 정수 | 중단 |
| **P2** | **컬럼 정합** | 12 × colW + 11 × gutter = contentW (잔차 0) | 중단 |
| **P3** | **measure 범위** | 1단 22~38em / 다단 20~25em | 중단 |
| **P4** | **최소 크기** | 전 텍스트 ≥ 7.0pt, 본문 ≥ 9.0pt, 역상 ≥ 10.0pt | 중단 |
| **P5** | **최소 선 굵기** | 전 선 ≥ 0.15mm, 역상 선 ≥ 0.25mm | 중단 |
| **P6** | **여백 하한** | 좌우·상하 ≥ 12mm (사무용 프린터 모듈은 15mm) | 경고 |
| **P7** | **본문 색상판** | 본문 텍스트 100% K 단독 | 중단 |
| **P8** | **최소 틴트** | 전 틴트 ≥ 10% | 중단 |
| **P9** | **TAC 상한** | 프로파일 상한 이하 | 중단 |
| **P10** | **알파 잔존** | 투명도 객체 0건 (사전 평탄화 완료) | 중단 |
| **P11** | **대비 목표** | 본문 ΔG ≥ 70 | 중단 |
| **P12** | **이미지 해상도** | 배치 크기 기준 ≥ 300dpi | 중단 |
| **P13** | **폰트 임베드** | 미임베드 폰트 0건 | 중단 |
| **P14** | **CMYK 등록** | 사용 색의 `mediums.print.color.*` 등록 완료 (CV-3) | 중단 |
| **P15** | **그림자 산출** | `box-shadow` 상당 0건 (EL-2) | 중단 |
| **P16** | **ISO 2145 번호** | 최종 하위 번호 뒤 마침표 0건 | 경고 |
## 11.2 육안 검수 (기계 판정 불가)
| # | 항목 | 방법 |
| :-: | :--- | :--- |
| **Q1** | **흑백 판독 시험** | 그레이스케일 변환 출력 후 정보 손실 0 확인 (BW-5) |
| **Q2** | **다단 행 정렬** | 좌우 단 겹쳐보기 (BG-5) |
| **Q3** | **위도우·오펀** | 전 면 육안 확인 (PG-1) |
| **Q4** | **표 분절** | 표 계속면의 헤더 반복·"(계속)" 표기 확인 (TB-1·TB-6) |
| **Q5** | **여백률** | 40~55% (Layer 1 WS-1) |
| **Q6** | **악센트 경제** | 1면당 개수 계수 (Layer 1 AE-1) |
| **Q7** | **교정쇄(proof) 색 확인** | 진한 파랑·초록 계열 색역 이탈 확인 (CV-4) |
| **Q8** | **접지·제본 시험** | A3 접지 부록의 접힘선이 도판을 가르지 않는지 |
| **Q9** | **러닝헤드 누락** | 장 도비라·부록 표지 제외 확인 (RH-4) |
| **Q10** | **상호참조 유효성** | 참조 대상 면수·절 번호 실재 확인 (XR-1) |
> GDS 인용: **"자동 도구로 발견되는 문제는 전체의 약 30%에 불과하다."** [출처: M22]
## 11.3 발주 전 최종 확인
| # | 항목 |
| :-: | :--- |
| 1 | 인쇄소 **출력 프로파일 확인 완료** (PR-1) |
| 2 | 확인된 프로파일로 **CMYK 변환·등록 완료** (CV-1~CV-3) |
| 3 | **교정쇄 승인 완료** |
| 4 | **블리드 3mm** 설정 확인 |
| 5 | **재단선·접지선** 표시 확인 |
| 6 | 제본 방식에 따른 **안쪽 여백 가산** 확인 (MG-5) |
| 7 | **면책 문구** 수록 확인 (DC-1·DC-2) |
---
## 근거 출처 요약
본 파일이 인용한 벤치마킹 항목:
**T2 · T3 · T10 · T17 · T25 · T29 · T31 · T34 · T35 · T37 · T49 · M12 · M22 · M23 · §9.4 · §9.5 · §11.2 · §11.3 · §11.4 · §12 · §17 · §18-36 · §18-39**
전문: `RAG/design.benchmark_2026-07-28_v0.1.0.md`
**[CONFLICT DETECTED] 해소 이력**
- §3.2 A4 좌우 여백 12mm ↔ MG-1 하한 12.7mm → **적용 대상 구분**(전문 인쇄 vs 사무용 프린터)으로 해소
- §5.3 본문 10pt ↔ USWDS 12pt 하한 → **적용 대상 구분**(기술 편람 vs 일반 배포 기록물), a11y 모듈 선언 옵션 제공
**[미검증] 항목**
- 한국 시장 표준 CMYK 프로파일 (§8.2) — 1차 자료 미발견, 인쇄소 확인 절차로 대체
- 브랜드 색 CMYK 등가값 (§8.3) — 프로파일 확정 전 기재 보류
- 러닝헤드 verso/recto 관행 (§10.3 RH-1) — 2차 출처, 참고용
- IEC/IEEE 82079-1:2019 세부 목차 — 유료(CHF 380), 미확인
**[정정]** FOGRA39 TAC = **330%** (350%는 구 FOGRA27) [§18-36]
RAG/design system_v0.1.1/design.medium.screen.md
+722
View File
@@ -0,0 +1,722 @@
# Prism Design System — Medium Profile: Screen (Layer 2c)
| 버전 | 수정일 | 수정자 | 주요 변경 내용 | 비고 |
| :--- | :--- | :--- | :--- | :--- |
| v0.1.0 | 2026-07-28 | 조선두 | 신규 작성 — 단위·브레이크포인트·타입 바인딩·런타임 테마·인터랙션 상태·포커스·터치·Elevation·모션·접근성·검증 | 최초 버전 |
| v0.1.1 | 2026-07-29 | HMCM | §4.3 md 6col 612→**624px**·xl 8col 776→**920px** 정정, RT-2 문언 정정(n+6/n+4 강등), RT-5 신설(강등 병용 금지), mobile 적용 범위에 **md(태블릿)** 추가, 하위 실행 명세(M3·M4) 연결 | 진단 N2·N3·S1·S2·G3 보정 |
| 메타 | 값 |
| :--- | :--- |
| 파일 | `design.medium.screen.md` |
| 계층 | **Layer 2c — Medium Profile: Screen (Web + Mobile)** |
| 역할 | Layer 1의 상대값을 **rem·dp로 실체화** + **인터랙션 계층 전량 정의** |
| 상위 | `design.foundations.md` (Layer 1) |
| 하위 | 스크린 계열 Layer 3 모듈 — 실행 명세: `webapp/module.webapp.md` (M3) · `mobile/module.mobile-tablet.md` (M4) |
| 로드 정책 | **온디맨드** |
> **본 파일은 전량 신설 영역이다.** `print`·`presentation` 프로파일이 다루지 않는 **상태·포커스·터치·모션·런타임 테마**가 여기에 있다. 벤치마킹 조사(`design.benchmark`)는 착수 시점에 "정적 매체" 전제로 이 영역을 **§15 이식 부적합**으로 배제했으나, 매체 범위 확대에 따라 **§19에서 24개 항목이 부활**했다. 본 파일이 그 24개 항목의 목적지다.
---
## 목차
- [1. 프로파일 개요](#1-프로파일-개요)
- [2. 단위](#2-단위)
- [3. 브레이크포인트·그리드](#3-브레이크포인트그리드)
- [4. 타입 바인딩](#4-타입-바인딩)
- [5. 색상·런타임 테마](#5-색상런타임-테마)
- [6. 인터랙션 상태](#6-인터랙션-상태)
- [7. 포커스](#7-포커스)
- [8. 터치·포인터](#8-터치포인터)
- [9. Elevation · Z-index](#9-elevation--z-index)
- [10. 모션](#10-모션)
- [11. 접근성](#11-접근성)
- [12. 개폐형 컴포넌트](#12-개폐형-컴포넌트)
- [13. 검증 체크리스트](#13-검증-체크리스트)
---
# 1. 프로파일 개요
## 1.1 적용 조건
| 적용 | 비적용 |
| :--- | :--- |
| 웹앱 (대시보드·관리도구·폼) | 인쇄 배포용 편람 → `print` |
| 모바일앱 (iOS · Android) | 강연 슬라이드 → `presentation` |
| 웹 문서·가이드 사이트 | |
| 화면에서 스크롤하며 읽는 PDF | |
| 웹 페이지의 인쇄 스타일시트 | *(본 프로파일 + `print` §9 병용)* |
## 1.2 web / mobile 분기
본 프로파일은 **하나의 프로파일에 두 변형(variant)** 을 둔다. 별도 프로파일로 쪼개지 않는 이유는 토큰의 90%가 공통이기 때문이다.
| 항목 | `screen.web` | `screen.mobile` |
| :--- | :--- | :--- |
| 단위 | `rem` (root 16px) | `dp` / `pt` (= 16 기준) |
| 브레이크포인트 | 5단계 (§3.1) | `xs`·`sm`·**`md`(태블릿)** 사용 (v0.1.1) |
| 포인터 | mouse 우선 + touch 대응 | **touch 전용** |
| 히트 영역 | 최소 44px (권장 48) | **최소 48dp** |
| hover 상태 | 사용 | **사용하지 않음** (§6.5) |
| 포커스 링 | **필수** | 키보드·스위치 연결 시 필수 |
| 테마 전환 | 사용자 설정 + OS 연동 | **OS 연동 필수** |
## 1.3 매체 상수
```yaml
medium: screen
variants: [web, mobile]
unit_primary: rem # web
unit_mobile: dp
root_font_size: 16px # = 1rem
type_base: 1rem
space_base_unit: 8px # 0.5rem
baseline_grid: none # Layer 1 v0.1.1 §4.3 — print 한정
contrast_target: AA # ΔG >= 55 필수 / 70 권장
elevation_mode: shadow # 유일하게 그림자를 허용하는 매체
alpha_allowed: true # Layer 1 CS-4 예외
motion: true
interaction: true
runtime_theme: true
```
---
# 2. 단위
## 2.1 rem 우선
| ID | 규칙 | 근거 |
| :--- | :--- | :--- |
| **UN-1** | 타입 크기·간격은 **`rem`** 으로 표기한다. `px` 하드코딩을 금지한다 | 사용자 브라우저 글자 크기 설정을 존중해야 한다 |
| **UN-2** | root font-size를 **`px`로 고정하지 않는다** (`html { font-size: 16px }` 금지). 브라우저 기본값(통상 16px)을 그대로 쓴다 | UN-1과 동일 취지 — 고정하면 사용자 설정이 무효화된다 |
| **UN-3** | **보더 굵기·1px 헤어라인은 `px`** 를 쓴다. 확대 시 굵어질 이유가 없다 | Layer 1 SW-2 |
| **UN-4** | 미디어 쿼리 브레이크포인트는 **`px`** 를 쓴다 (뷰포트는 사용자 글자 설정과 무관) | |
| **UN-5** | 모바일은 플랫폼 단위(`dp` / `pt`)를 쓰되 **16 기준 환산을 동일하게** 유지한다 | |
> **[대조]** `print` 프로파일은 상대 단위를 **금지**하고 절대 단위(mm·pt)만 쓴다. GOV.UK가 인쇄 스타일시트에서 `rem`→`pt`로 전환하는 이유가 이것이다 [출처: design.benchmark, §15 / T1]. **같은 시스템 안에서 매체별로 정반대 규칙이 성립**한다.
## 2.2 환산
```
1rem = 16px (브라우저 기본)
0.5rem = 8px = space.100
1dp(Android) ≈ 1pt(iOS) ≈ 1px@1x
```
---
# 3. 브레이크포인트·그리드
## 3.1 브레이크포인트
Layer 1 §5.2의 2x 파생 원리(12 → 8 → 4)를 적용한다. [출처: design.benchmark, M3]
| ID | 범위 (px) | 대상 | **컬럼** | 마진 | 거터 | 컨테이너 |
| :--- | :--- | :--- | :-: | ---: | ---: | :--- |
| **`xs`** | 0 – 599 | 모바일 세로 | **4** | 16 | 16 | fluid |
| **`sm`** | 600 – 903 | 모바일 가로 · 소형 태블릿 | **8** | 24 | 16 | fluid |
| **`md`** | 904 – 1239 | 태블릿 · 소형 노트북 | **8** | 32 | 24 | fluid |
| **`lg`** | 1240 – 1599 | 데스크톱 | **12** | 32 | 24 | fluid |
| **`xl`** | 1600 – | 대형 디스플레이 | **12** | 24 | 24 | **1440 고정** |
| ID | 규칙 |
| :--- | :--- |
| **BP-1** | 브레이크포인트는 **위 5개만** 사용한다. 컴포넌트별 임의 브레이크포인트를 두지 않는다 |
| **BP-2** | `xl`에서 컨테이너를 **1440px로 고정**한다. 무한 확장은 measure를 파괴한다 (§4.3) |
| **BP-3** | 미디어 쿼리는 **min-width 기준**(mobile-first)으로 작성한다 |
| **BP-4** | 컬럼 수는 Layer 1 GC-1의 허용 집합(12·8·6·4·3) 안에 있다 ✓ |
## 3.2 그리드 정합
Layer 1 GC-3(잔차 0)을 전 브레이크포인트에서 검증했다.
| BP | 기준 폭 | 마진 | 콘텐츠 | 컬럼수 | 거터 | **컬럼 폭** | 검증 |
| :--- | ---: | ---: | ---: | :-: | ---: | ---: | :--- |
| `xs` | 360 | 16 | 328 | 4 | 16 | **70** | 4×70 + 3×16 = 328 ✓ |
| `sm` | 600 | 24 | 552 | 8 | 16 | **55** | 8×55 + 7×16 = 552 ✓ |
| `md` | 904 | 32 | 840 | 8 | 24 | **84** | 8×84 + 7×24 = 840 ✓ |
| `lg` | 1240 | 32 | 1176 | 12 | 24 | **76** | 12×76 + 11×24 = 1176 ✓ |
| **`xl`** | **1440** | 24 | **1392** | 12 | 24 | **94** | 12×94 + 11×24 = 1392 ✓ |
> `fluid` 브레이크포인트에서 컬럼 폭은 뷰포트에 따라 변하며, 위 값은 **각 구간 최소 폭에서의 값**이다. 정합식은 폭과 무관하게 성립한다.
## 3.3 책임 분할
| ID | 규칙 | 근거 |
| :--- | :--- | :--- |
| **GD-1** | **최상위 레이아웃 영역만 그리드에 정렬**한다. 내부는 스페이싱 토큰으로 배치한다 | Layer 1 GR-1 / T15 |
| **GD-2** | CSS Grid의 `grid-template-columns`는 **레이아웃 컨테이너에만** 선언한다 |
| **GD-3** | 컴포넌트는 자기 폭을 모른 채 동작해야 한다. 컴포넌트 내부에 컬럼 수를 하드코딩하지 않는다 |
## 3.4 스페이싱 실체화
| 토큰 | 배수 | **px** | **rem** | 별칭 |
| :--- | :---: | ---: | ---: | :--- |
| `space.025` | 0.25× | 2 | 0.125 | — |
| `space.050` | 0.5× | 4 | 0.25 | `inline-gap` |
| **`space.100`** | **1×** | **8** | **0.5** | `text-block` |
| `space.150` | 1.5× | 12 | 0.75 | `paragraph` |
| `space.200` | 2× | 16 | 1 | `card-padding`, 거터(xs·sm) |
| `space.300` | 3× | 24 | 1.5 | `block-gap`, 거터(md·lg·xl) |
| `space.400` | 4× | 32 | 2 | `zone-gap`, 마진(md·lg) |
| `space.600` | 6× | 48 | 3 | `section-gap` |
| `space.800` | 8× | 64 | 4 | — |
**반경**: `radius.md`(1×) = **8px**. `sm` 4px / `lg` 12px / `pill` 9999px / `none` 0.
**획**: `hairline` **1px** / `regular` 2px / `bold` 3px / `icon` 2px / `connector` 2px
> 스크린은 픽셀 그리드가 정밀하므로 1px 헤어라인이 유효하다. `print`(0.20mm)·`presentation`(2px)과 달리 가장 가는 획을 쓸 수 있는 매체다.
---
# 4. 타입 바인딩
## 4.1 스케일 실체화
`size(n) = 1rem × 1.125ⁿ`. 반올림 단위 **1px** 후 rem 역산.
| 역할 | `n` | **px** | **rem** | 행간 | 웨이트 |
| :--- | :-: | ---: | ---: | :-: | :--- |
| `caption` | −2 | **13** | 0.8125 | 1.55 | Medium 500 |
| `body-sm` | −1 | **14** | 0.875 | 1.70 | Regular 400 |
| **`body`** | **0** | **16** | **1** | **1.70** | Regular 400 |
| `body-lg` | +1 | **18** | 1.125 | 1.70 | Regular 400 |
| `title-sm` | +2 | **20** | 1.25 | 1.50 | Medium 500 |
| `title` | +4 | **26** | 1.625 | 1.50 | Bold 700 |
| `title-lg` | +6 | **32** | 2 | 1.50 | Bold 700 |
| `display` | +9 | **46** | 2.875 | 1.25 | Regular 400 / Medium 500 |
| `display-lg` | +12 | **66** | 4.125 | 1.25 | Regular 400 |
## 4.2 반응형 타입
| ID | 규칙 |
| :--- | :--- |
| **RT-1** | **`body` 계열은 브레이크포인트와 무관하게 고정**한다. 모바일에서 본문을 줄이지 않는다 |
| **RT-2** | `xs`·`sm`에서 `display-lg`는 **n=+6**, `display`는 **n=+4**로 강등한다 — `title-lg`·`title`과 동일 값. (표·tokens.json이 정본. v0.1.1 문언 정정 — 구판 "−3 이동"은 값과 불일치했다) |
| **RT-3** | 계단식(stepped) 방식을 기본으로 한다. **fluid(`clamp()`)는 `display` 계열에만** 선택적으로 허용한다 |
| **RT-4** | fluid를 쓰더라도 **하한·상한은 스케일 인덱스 값**이어야 한다. 임의 값을 넣지 않는다 |
| **RT-5** | 강등된 `display` 계열과 `title-lg`·`title`을 **같은 화면에 병용하지 않는다** — 동일 크기로 위계가 소멸한다 (TH-1 보전, v0.1.1 신설) |
| 역할 | `lg`·`xl`·`md` | **`xs`·`sm`** (−3) |
| :--- | ---: | ---: |
| `display-lg` | 66px (n=+12) | **32px** (n=+6) |
| `display` | 46px (n=+9) | **26px** (n=+4) |
| `title-lg` | 32px | 32px (유지) |
| `body` | 16px | **16px (불변)** |
> **RT-1의 근거**: 모바일에서 본문을 14px로 줄이는 관행이 흔하나, 이는 화면이 작다는 이유로 **가독성을 희생**하는 것이다. 화면이 작으면 **한 줄의 글자 수가 줄 뿐**, 글자가 작아져야 할 이유는 없다.
## 4.3 Measure
| BP | 본문 최대 컬럼 병합 | 폭 | **measure** (16px) | 판정 |
| :--- | :---: | ---: | ---: | :--- |
| `xs` | 4 col (전폭) | 328px | 20.5 em | ✓ 다단 하한 |
| `sm` | 8 col (전폭) | 552px | 34.5 em | ✓ 1단 범위 |
| `md` | 6 / 8 col | 624 / 840px | 39.0 / 52.5 em | **6col ✗ (38 초과)** / **8col ✗** — MS-1로 제한 |
| `lg` | 8 col | 776px | 48.5 em | **✗** |
| `xl` | **8 col** | 920px | 57.5 em | **✗** |
| ID | 규칙 |
| :--- | :--- |
| **MS-1** | **연속 본문 블록에 `max-width: 38em`을 강제**한다. 컨테이너가 넓어도 본문은 넓어지지 않는다 |
| **MS-2** | `md` 이상에서 본문을 전폭으로 흘리지 않는다. 남는 폭은 **사이드바·목차·여백**으로 쓴다 |
| **MS-3** | 표·코드 블록·도판은 MS-1의 예외다 (가로 스크롤 허용) |
> **MS-1은 본 프로파일에서 가장 자주 위반되는 규칙이다.** `xl` 컨테이너 1440px에 본문을 8컬럼(776px)으로 채우면 48.5em으로 상한(38em)을 27% 초과한다. **컨테이너 폭 = 본문 폭이 아니다.**
## 4.4 자간
| 역할 | 자간 | 근거 |
| :--- | :--- | :--- |
| `display-lg` (66px) | **−0.02em** | Layer 1 TR-1 (60px 이상) ✓ |
| `display` (46px) 이하 | **0** | TR-1 미충족 |
| `xs`·`sm`의 `display-lg` (32px) | **0** | 축소되어 TR-1 미충족 |
| `.label` 톤 | +0.12em | TR-4 |
| `.eyebrow` 톤 | +0.18em | TR-4 |
---
# 5. 색상·런타임 테마
## 5.1 테마 구조
**같은 토큰 이름, 다른 값셋.** 라이트/다크는 별개 팔레트가 아니라 **동일 `sys` 토큰의 두 바인딩**이다. [출처: design.benchmark, M1 · T13]
```jsonc
"sys.pair.surface-default": {
"light": { "container": "ref.sand", "on": "ref.brown", "deltaG": 68, "measured": 9.02 },
"dark": { "container": "ref.obsidian", "on": "ref.sand", "deltaG": 91, "measured": 17.02 }
}
```
## 5.2 대칭 미러링
Layer 1 §6.3의 미러링을 **출발점**으로 삼되, 전 페어를 재검증한다. [출처: design.benchmark, M17]
### 브랜드 SAMAN 기준 다크 테마 페어 (검증 완료)
| 역할 | Light | G | Dark | G | ΔG | 실측 | 판정 |
| :--- | :--- | :-: | :--- | :-: | :-: | ---: | :--- |
| `surface.base` / `on` | sand / brown | 4 / 72 | obsidian / sand | 95 / 4 | 91 | **17.02** | AAA |
| `on-subtle` | brown | 72 | subtle `#D3D3D3` | 15 | 80 | **12.61** | AAA |
| `accent` | orange | 47 | orange | 47 | 48 | **4.71** | AA — 대형 권장 |
| `base`(green) **텍스트** | green (ΔG 65, 8.00) | 69 | **사용 금지** | — | 26 | **2.13** | **✗ FAIL** |
| ID | 규칙 |
| :--- | :--- |
| **TM-S1** | 미러링 후 **전 페어 대비를 프로그램으로 재계산**한다 (Layer 1 TM-1·CG-3) |
| **TM-S2** | 미러링이 성립하지 않는 색은 **테마별 값을 개별 지정**한다 |
| **TM-S3** | **다크 테마에서 `base` 계열을 텍스트로 쓰지 않는다.** 면·도형으로만 (실측 2.13:1) |
| **TM-S4** | 정적 식별색(Layer 1 §2.6)은 미러링 대상이 아니다 |
| **TM-S5** | 상태색(Layer 1 §2.7)은 다크 테마용 `container`를 **별도 등록**한다. 라이트용 밝은 container를 다크에 그대로 쓰지 않는다 |
## 5.3 테마 전환
| ID | 규칙 | 근거 |
| :--- | :--- | :--- |
| **TC-1** | **OS 설정(`prefers-color-scheme`)을 기본으로 따른다** | Spectrum device color mode 연동 [§19] |
| **TC-2** | 사용자가 **명시적으로 재정의**할 수 있어야 한다 (light / dark / system 3택) |
| **TC-3** | 재정의 값은 **영속 저장**한다 |
| **TC-4** | 테마는 **`data-theme` 속성 + CSS 변수**로 구현한다. JS로 색을 직접 조작하지 않는다 | ADS `data-color-mode` 방식 [§19] |
| **TC-5** | 전환 시 **색상만 애니메이션**한다. 레이아웃은 변하지 않아야 한다 |
| **TC-6** | 테마 전환 애니메이션은 `prefers-reduced-motion`에서 즉시 전환으로 처리한다 |
```css
:root { /* light 값셋 */ }
:root[data-theme="dark"] { /* dark 값셋 */ }
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) { /* dark 값셋 */ }
}
```
## 5.4 알파 색 (Layer 1 CS-3 예외)
Layer 1 CS-3은 알파 색을 금지하나, **CS-4에 따라 `screen` 매체는 예외**다. [출처: design.benchmark, §19 재판정]
| ID | 규칙 |
| :--- | :--- |
| **AL-1** | 알파 색은 **오버레이·스크림·상태 레이어에만** 허용한다 |
| **AL-2** | **텍스트 색에 알파를 쓰지 않는다.** 대비가 예측 불가능해진다 [출처: Spectrum "알파 색은 대비가 일관되거나 예측 가능하지 않다"] |
| **AL-3** | 알파를 쓴 요소 위의 텍스트는 **합성 결과색으로 대비를 계산**해 등록한다 |
| **AL-4** | **인쇄 스타일시트에서는 알파를 전부 평탄화**한다 (`print` 프로파일 CK-5) |
## 5.5 대비 목표
| 항목 | 목표 | 근거 |
| :--- | :--- | :--- |
| 본문 텍스트 | **ΔG ≥ 55 (AA 4.5:1)** 필수 / **70 권장** | Layer 1 §2.1 매체별 목표 |
| 대형 텍스트 (24px+ 또는 19px+ Bold) | ΔG ≥ 40 (3:1) | WCAG SC 1.4.3 |
| **비텍스트 요소** (보더·아이콘·포커스 링·차트) | **ΔG ≥ 40 (3:1)** | WCAG 2.2 SC 1.4.11 Non-text Contrast |
| 비활성(disabled) 요소 | 대비 요건 면제 | WCAG 예외 |
> `print`·`presentation`이 AAA를 목표로 하는 것과 달리 `screen`은 **AA 필수 / AAA 권장**이다. 사용자가 밝기·확대·테마를 제어할 수 있고, 업계 표준 준수가 상호운용성에 직결되기 때문이다. [출처: design.benchmark, §16 상충-6]
---
# 6. 인터랙션 상태
> 이 장은 `print`·`presentation`에 **존재하지 않는다.** 상태는 스크린 고유 개념이다.
## 6.1 상태 목록
| 상태 | 정의 | 트리거 |
| :--- | :--- | :--- |
| `default` | 기준 | — |
| `hover` | 포인터가 위에 있음 | mouse (**touch 없음**) |
| `focus` | 키보드 포커스 | Tab · 스위치 · 스크린리더 |
| `active` | 눌리는 중 | mousedown · touchstart |
| `selected` | 선택됨 (지속) | 사용자 선택 |
| `disabled` | 사용 불가 | 조건 미충족 |
| `loading` | 처리 중 | 비동기 작업 |
## 6.2 GRADE 시프트 방식 (본 시스템 기본)
상태 표현을 **불투명도 오버레이가 아니라 GRADE 스텝 이동**으로 정의한다. Layer 1 §2.8의 강조 단계 정량화를 상태에 적용한 것이다. [출처: design.benchmark, M18 (Carbon "Selected = 1 full step, Active = 2 full steps")]
| 상태 | **GRADE 시프트** | 비고 |
| :--- | :---: | :--- |
| `default` | 0 | — |
| `hover` | **ΔG ± 4** (½ 스텝) | 라이트는 어둡게(+), 다크는 밝게(−) |
| `focus` | **0** | 색을 바꾸지 않는다. **포커스 링만** (§7) |
| `active` | **ΔG ± 8** (1 스텝) | |
| `selected` | **ΔG ± 12** (1½ 스텝) 또는 면 반전 | |
| `disabled` | `on-subtle` 사용 | **불투명도를 쓰지 않는다** |
| `loading` | `default` 유지 + 진행 표시 | 색을 바꾸지 않는다 |
**GRADE 시프트를 기본으로 삼는 이유**
1. **테마 무관** — 라이트/다크에서 부호만 뒤집으면 되고, 별도 값셋이 불필요하다
2. **대비 예측 가능** — 시프트 후 대비를 GRADE 뺄셈으로 즉시 검증할 수 있다
3. **알파 합성 없음** — 배경이 무엇이든 결과가 결정적이다
4. **인쇄 스타일시트 호환** — 상태가 없는 인쇄에서 `default`만 남기면 그만이다
## 6.3 State Layer 방식 (대안)
GRADE 시프트가 불가능한 경우(이미지 위 버튼, 그라디언트 표면 등)에만 사용한다.
| 상태 | 불투명도 |
| :--- | ---: |
| `hover` | **8%** |
| `focus` | **10%** |
| `active` (pressed) | **10%** |
| `dragged` | **16%** |
> **[CONFLICT DETECTED / 미검증]** MD3 공식 문서와 위젯은 focus·pressed를 **10%**로 기재하나, `material-web` v0.192 토큰은 **12%** 다 [출처: design.benchmark, §18-2]. 본 시스템은 **문서 기재값(10%)** 을 채택하되, 이 불일치를 인지하고 있음을 명시한다. 값 자체보다 **드리프트가 존재한다는 사실**이 중요하다 (Layer 1 F9).
| ID | 규칙 |
| :--- | :--- |
| **SL-1** | State Layer는 **§6.2가 불가능할 때만** 쓴다 |
| **SL-2** | State Layer 위 텍스트의 대비는 **합성 결과색으로 계산**해 등록한다 (AL-3) |
| **SL-3** | State Layer를 **두 개 이상 겹치지 않는다** (hover + active 동시 적용 금지 — 더 강한 쪽만) |
## 6.4 disabled — 불투명도 금지
| ID | 규칙 | 근거 |
| :--- | :--- | :--- |
| **DS-1** | `disabled`를 **불투명도로 표현하지 않는다.** `on-subtle` 토큰(ΔG 40~54)을 쓴다 | Layer 1 §2.8 / M19 — MD3 disabled 38%의 *발상*만 차용하고 구현은 대체 |
| **DS-2** | `disabled` 요소도 **최소한 형태는 판별 가능**해야 한다 (완전한 소실 금지) |
| **DS-3** | `disabled` 이유를 **인접 텍스트로 설명**한다. 색만으로 "쓸 수 없음"을 전달하지 않는다 (Layer 1 CO-1) |
| **DS-4** | 가능하면 `disabled` 대신 **활성 상태 + 오류 메시지**를 쓴다. 비활성 컨트롤은 이유를 알려주지 못한다 |
## 6.5 mobile — hover 없음
| ID | 규칙 |
| :--- | :--- |
| **HV-1** | `screen.mobile`에서 **`hover` 상태를 쓰지 않는다** |
| **HV-2** | `hover`에서만 드러나는 정보·액션을 두지 않는다. **터치 기기에서 접근 불가**가 된다 |
| **HV-3** | 웹에서도 `hover`는 **보강**이어야 한다. `hover` 없이도 기능이 완전해야 한다 |
| **HV-4** | `@media (hover: hover)` 로 hover 스타일을 격리한다 |
---
# 7. 포커스
> 포커스 링은 **장식이 아니라 접근성 필수 요소**다. `outline: none`은 본 시스템에서 결함으로 판정한다.
## 7.1 포커스 링 스펙
| 항목 | 값 | 근거 |
| :--- | :--- | :--- |
| **굵기** | **3px** | GOV.UK `$govuk-focus-width: 3px` [§19] |
| **오프셋** | **2px** | 요소 경계와 분리 |
| **형태** | **이중 링** — 외곽 고대비색 + 내곽 대비색 | 어떤 배경에서도 최소 한 겹이 보인다 |
| **대비** | 인접색 대비 **ΔG ≥ 40 (3:1)** | WCAG 2.2 SC 1.4.11 |
| **반경** | 요소 반경 + 오프셋 | 시각 정합 |
## 7.2 규칙
| ID | 규칙 |
| :--- | :--- |
| **FC-1** | **`outline: none`을 대체 없이 선언하지 않는다** |
| **FC-2** | `:focus-visible`을 사용해 **마우스 클릭 시에는 링을 표시하지 않는다** (키보드·스위치에만) |
| **FC-3** | 포커스 링은 **어떤 요소에도 잘리지 않는다** (`overflow: hidden` 컨테이너 주의) |
| **FC-4** | 포커스 링은 **색만으로 구분되지 않는다** — 굵기·오프셋이 형태적 신호를 만든다 (Layer 1 CO-1) |
| **FC-5** | 포커스는 **`focus` 상태에서 배경색을 바꾸지 않는다** (§6.2). 링만으로 표시한다 |
| **FC-6** | 커스텀 컨트롤은 **네이티브와 동일한 포커스 동작**을 제공해야 한다 |
## 7.3 포커스 순서
| ID | 규칙 |
| :--- | :--- |
| **FO-1** | 포커스 순서는 **시각적 순서와 일치**해야 한다 |
| **FO-2** | **양수 `tabindex`를 사용하지 않는다** (`0` 또는 `-1`만) |
| **FO-3** | 모달·오버레이는 **포커스를 가둔다**(focus trap). 닫으면 **호출 요소로 복귀**한다 |
| **FO-4** | 반복 내비게이션 앞에 **건너뛰기 링크(skip link)** 를 둔다 |
---
# 8. 터치·포인터
## 8.1 히트 영역
| 변형 | **최소** | **권장** | 근거 |
| :--- | :---: | :---: | :--- |
| `screen.web` | **44 × 44px** | 48 × 48px | WCAG 2.5.5 Target Size (Enhanced, AAA) |
| `screen.mobile` | **48 × 48dp** | 48 × 48dp | Spectrum "Touch hit area 48px" [§19] |
> WCAG 2.2 SC 2.5.8 Target Size (Minimum, **AA**)는 24×24 CSS px이나, 본 시스템은 **44px를 하한**으로 채택한다. 24px는 최소 적합 기준이지 권장값이 아니다.
| ID | 규칙 |
| :--- | :--- |
| **HT-1** | **시각 크기와 히트 영역을 분리**한다. 아이콘이 20px여도 히트 영역은 44px여야 한다 |
| **HT-2** | 히트 영역 확장은 **패딩 또는 의사요소(`::before`)** 로 구현한다 |
| **HT-3** | 인접 히트 영역 사이에 **최소 `space.100`(8px) 간격**을 둔다 |
| **HT-4** | **인라인 텍스트 링크는 HT-1의 예외**다 (WCAG 예외 조항) |
| **HT-5** | 화면 가장자리 **4px는 히트 영역으로 신뢰하지 않는다** (모바일 시스템 제스처와 충돌) |
## 8.2 포인터 대응
| ID | 규칙 |
| :--- | :--- |
| **PT-1** | `@media (pointer: coarse)` 에서 히트 영역을 **48px로 상향**한다 |
| **PT-2** | 드래그로만 가능한 조작을 두지 않는다. **대체 수단을 제공**한다 (WCAG 2.5.7 Dragging Movements) |
| **PT-3** | 커서 모양(`cursor`)에만 의존해 상호작용 가능 여부를 알리지 않는다 |
---
# 9. Elevation · Z-index
> **본 시스템에서 그림자를 허용하는 유일한 매체다.** `print`·`presentation`은 Layer 1 EL-2에 따라 그림자 산출이 금지된다.
## 9.1 Elevation 레벨
Layer 1 EL-4("그림자로 표현할 수 있는 것을 보더로도 표현할 수 있는지 먼저 검토")를 준수한다.
| 레벨 | 용도 | **1순위 표현** | 그림자 (보조) |
| :--- | :--- | :--- | :--- |
| `sunken` | 함몰 영역·입력 필드 | 배경 톤 하향 (ΔG +5~9) | inset 없음 |
| `default` | 기준 | 무처리 | 없음 |
| `raised` | 카드·패널 | **헤어라인 보더** | `0 1px 2px` (약) |
| `overlay` | 드롭다운·팝오버 | 보더 + 여백 격리 | `0 4px 12px` |
| `modal` | 모달·다이얼로그 | 보더 + **스크림** | `0 8px 24px` |
| ID | 규칙 |
| :--- | :--- |
| **EV-1** | **보더를 먼저 쓴다.** 그림자는 보더로 부족할 때만 추가한다 [출처: M5 — ADS "A border is the default approach"] |
| **EV-2** | 그림자는 **깊이를 보조**할 뿐 유일한 신호가 되지 않는다 |
| **EV-3** | 다크 테마에서 그림자는 **거의 보이지 않는다.** 다크에서는 **표면 톤 상향**으로 대체한다 |
| **EV-4** | **인쇄 스타일시트에서 그림자를 전부 제거**한다 |
| **EV-5** | 그림자에 **색상(브랜드 색)을 넣지 않는다.** 중립 검정 알파만 |
## 9.2 스크림 (Scrim)
| 항목 | 값 |
| :--- | :--- |
| 불투명도 | **32%** (MD3) |
| 색 | 중립 검정 |
| 적용 | 모달·바텀시트·드로어 배경 |
| ID | 규칙 |
| :--- | :--- |
| **SC-1** | 스크림 클릭 시 **닫기 동작**을 제공한다 (단, 파괴적 작업 확인 다이얼로그는 예외) |
| **SC-2** | 스크림 위 콘텐츠는 **포커스 트랩** 안에 있어야 한다 (FO-3) |
## 9.3 Z-index 스케일
임의 z-index를 금지하고 **토큰만** 사용한다.
| 토큰 | 값 | 용도 |
| :--- | ---: | :--- |
| `z.base` | 0 | 기본 흐름 |
| `z.raised` | 100 | 카드·상승 요소 |
| `z.sticky` | 200 | 고정 헤더·툴바 |
| `z.dropdown` | 300 | 드롭다운·셀렉트 |
| `z.scrim` | 400 | 스크림 |
| `z.modal` | 500 | 모달·다이얼로그 |
| `z.popover` | 600 | 팝오버 |
| `z.toast` | 700 | 토스트·스낵바 |
| `z.tooltip` | 800 | 툴팁 |
| ID | 규칙 |
| :--- | :--- |
| **ZI-1** | **토큰 외 z-index 값을 쓰지 않는다** (`z-index: 9999` 금지) |
| **ZI-2** | 같은 레벨 내 순서는 **DOM 순서**로 해결한다 |
| **ZI-3** | 새 레벨이 필요하면 **본 파일에 등재 후** 사용한다 |
---
# 10. 모션
## 10.1 지속 시간 토큰
| 토큰 | 값 | 용도 |
| :--- | ---: | :--- |
| `motion.instant` | **0ms** | 즉시 반응 (상태 색 변화) |
| `motion.fast` | **100ms** | 소형 요소 (버튼·체크박스) |
| `motion.moderate` | **200ms** | 중형 (드롭다운·툴팁) |
| `motion.slow` | **300ms** | 대형 (모달·드로어·페이지 전환) |
| `motion.deliberate` | **500ms** | 주의를 끌어야 하는 전환 |
## 10.2 이징 토큰
| 토큰 | 곡선 | 용도 |
| :--- | :--- | :--- |
| `ease.standard` | `cubic-bezier(0.2, 0, 0, 1)` | 기본 — 화면 내 이동 |
| `ease.enter` | `cubic-bezier(0, 0, 0, 1)` | 진입 (감속) |
| `ease.exit` | `cubic-bezier(0.3, 0, 1, 1)` | 퇴장 (가속) |
| `ease.linear` | `linear` | 진행률·로딩 |
## 10.3 규칙
| ID | 규칙 |
| :--- | :--- |
| **MT-1** | **모션은 상태 변화를 설명할 때만** 쓴다. 장식용 애니메이션을 두지 않는다 |
| **MT-2** | **바운스·회전·무한 루프 장식**을 사용하지 않는다 |
| **MT-3** | 애니메이션은 **`transform`·`opacity`만** 변경한다 (레이아웃 리플로 방지) |
| **MT-4** | 진입·퇴장은 **비대칭**으로 한다 (진입 `moderate`, 퇴장 `fast`) |
| **MT-5** | 모션 **없이도 기능이 완전**해야 한다 |
## 10.4 prefers-reduced-motion
```css
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}
```
| ID | 규칙 |
| :--- | :--- |
| **RM-1** | `prefers-reduced-motion: reduce`를 **반드시 구현**한다 |
| **RM-2** | 축소 모드에서 애니메이션은 **최종 상태로 즉시 해소**된다. 기능이 사라지지 않는다 |
| **RM-3** | **불투명도 페이드는 축소 모드에서도 허용**한다 (전정 자극이 없다) |
| **RM-4** | 시차(parallax)·자동 재생 캐러셀·화면 밖에서 날아드는 요소는 **축소 모드에서 완전 비활성**한다 |
| **RM-5** | 5초 이상 자동 재생되는 모션에는 **정지 컨트롤**을 제공한다 (WCAG 2.2.2) |
---
# 11. 접근성
> **적합성 목표: WCAG 2.2 Level AA**
## 11.1 필수 요건
| # | 항목 | 기준 |
| :-: | :--- | :--- |
| A1 | 텍스트 대비 | ΔG ≥ 55 (4.5:1) / 대형 ΔG ≥ 40 (3:1) |
| A2 | 비텍스트 대비 | ΔG ≥ 40 (3:1) — 보더·아이콘·포커스 링·차트 |
| A3 | 색 단독 의존 금지 | Layer 1 CO-1 |
| A4 | 포커스 가시성 | §7 |
| A5 | 키보드 조작 완전성 | 마우스 전용 기능 0건 |
| A6 | 히트 영역 | §8.1 |
| A7 | 모션 축소 | §10.4 |
| A8 | 200% 확대 시 콘텐츠 손실 없음 | UN-1·UN-2 |
| A9 | 대체 텍스트 | 의미 있는 이미지 전부 |
| A10 | 폼 레이블 | 시각적 레이블 + 프로그래매틱 연결 |
| A11 | 오류 식별·설명 | 색 + 기호 + 텍스트 |
| A12 | 페이지 제목·랜드마크 | 문서 구조 |
## 11.2 시맨틱
| ID | 규칙 |
| :--- | :--- |
| **SM-1** | **네이티브 요소를 먼저 쓴다.** `<button>` 대신 `<div onclick>`을 쓰지 않는다 |
| **SM-2** | `aria-*`는 **네이티브로 불가능할 때만** 쓴다. 잘못 쓴 ARIA는 없는 것보다 나쁘다 |
| **SM-3** | 헤딩 레벨을 **건너뛰지 않는다** (h2 → h4 금지) |
| **SM-4** | 헤딩 레벨을 **크기 조절 목적으로 쓰지 않는다.** 크기는 타입 토큰이 정한다 |
| **SM-5** | 아이콘 전용 버튼에 **접근 가능한 이름**을 부여한다 |
## 11.3 문안 접근성
브랜드 §5.7의 **방향어 금지**는 스크린에서 특히 중요하다. 화면 낭독 시 "아래 표"는 아무 의미가 없고, 반응형 레이아웃에서 "오른쪽"은 모바일에서 "아래"가 된다. [출처: design.benchmark, T52]
| ID | 규칙 |
| :--- | :--- |
| **AC-1** | 위치 지시어 대신 **이름·번호**로 참조한다 |
| **AC-2** | 링크 텍스트는 **문맥 없이도 목적지를 알 수 있어야** 한다 ("여기를 클릭" 금지) |
| **AC-3** | 오류 메시지는 **무엇이·왜·어떻게** 3요소를 갖춘다 [출처: T-Polaris error 3분할 공식] |
## 11.4 검사 도구와 한계
| ID | 규칙 | 근거 |
| :--- | :--- | :--- |
| **AT-1** | **자동 접근성 검사를 CI 게이트로 강제**한다 (`axe` / `pa11y` 등). 통과하지 못하면 머지하지 않는다 | [출처: M22 — USWDS·GOV.UK "if it doesn't pass, we don't merge"] |
| **AT-2** | **자동 검사는 전체 문제의 약 30%만 발견**한다. 수동 검수를 병행한다 | GDS 인용 [M22] |
| **AT-3** | 수동 검수에는 **키보드 단독 조작·스크린리더·200% 확대** 3종을 포함한다 |
| **AT-4** | **"접근 가능한 컴포넌트로 만들었다"가 접근 가능한 서비스를 보증하지 않는다** | [출처: T49 — USWDS "We test our work. You need to test yours."] |
---
# 12. 개폐형 컴포넌트
`print`에서 물리적으로 불가능했던 개폐형 구조가 `screen`에서는 사용 가능하다. 다만 **GOV.UK가 사용을 권고하지 않는다**는 점을 인지하고 조건을 붙인다. [출처: design.benchmark, T37 · §19]
## 12.1 사용 조건
| ID | 규칙 |
| :--- | :--- |
| **AD-1** | **1순위는 "제목으로 구분된 단일 흐름 + 상단 앵커 목차"** 다. 아코디언은 그것으로 부족할 때만 쓴다 |
| **AD-2** | 아코디언 안에 **처음 방문자가 반드시 봐야 할 정보**를 넣지 않는다 |
| **AD-3** | **모두 펼치기/접기** 컨트롤을 제공한다 |
| **AD-4** | 브라우저 페이지 내 검색(Ctrl+F)으로 **접힌 내용도 찾을 수 있게** 한다 |
| **AD-5** | **인쇄 시 전부 펼친 상태**로 출력한다 |
| **AD-6** | 탭은 **상호 배타적 대안**을 보여줄 때만 쓴다. 순차적 내용에 쓰지 않는다 |
## 12.2 상태 유지
| ID | 규칙 |
| :--- | :--- |
| **AS-1** | 개폐 상태를 **URL 또는 영속 저장**에 반영해 새로고침 후에도 유지한다 |
| **AS-2** | 접힌 섹션에 대한 **딥링크**가 동작해야 한다 (링크 진입 시 자동 펼침) |
---
# 13. 검증 체크리스트
## 13.1 자동 검증 — 빌드 게이트
Layer 1 §8.1의 F1~F9에 더한 프로파일 전용 항목이다. **Stylelint / ESLint / axe를 CI에 연결**한다 [§19 재분류 — 본 매체에서는 자동 강제가 가능하다].
| # | 항목 | 판정 기준 | 실패 시 |
| :-: | :--- | :--- | :--- |
| **W1** | **색 리터럴 금지** | CSS 내 HEX·rgb() 리터럴 0건 (토큰 정의부 제외) | 중단 |
| **W2** | **치수 리터럴 금지** | 스페이싱·반경에 토큰 외 값 0건 | 중단 |
| **W3** | **root font-size 고정 금지** | `html { font-size: <px> }` 0건 (UN-2) | 중단 |
| **W4** | **`outline: none` 검출** | 대체 없는 선언 0건 (FC-1) | 중단 |
| **W5** | **z-index 리터럴** | 토큰 외 z-index 0건 (ZI-1) | 중단 |
| **W6** | **양수 tabindex** | 0건 (FO-2) | 중단 |
| **W7** | **그리드 정합** | 전 브레이크포인트 잔차 0 | 중단 |
| **W8** | **대비 (자동)** | `axe` 색 대비 위반 0건 | 중단 |
| **W9** | **접근 가능한 이름** | 아이콘 버튼·링크 이름 누락 0건 | 중단 |
| **W10** | **대체 텍스트** | `<img>` alt 누락 0건 | 중단 |
| **W11** | **헤딩 레벨 건너뜀** | 0건 (SM-3) | 경고 |
| **W12** | **`prefers-reduced-motion`** | 구현 존재 (RM-1) | 중단 |
| **W13** | **히트 영역** | 인터랙티브 요소 ≥ 44px (인라인 링크 제외) | 경고 |
| **W14** | **본문 max-width** | 연속 본문 블록 ≤ 38em (MS-1) | 경고 |
| **W15** | **테마 페어 대비** | light·dark 전 페어 재계산 통과 (TM-S1) | 중단 |
| **W16** | **알파 텍스트 색** | 0건 (AL-2) | 중단 |
| **W17** | **hover 전용 기능** | `@media (hover: hover)` 밖의 hover 의존 0건 (HV-4) | 경고 |
| **W18** | **모션 속성** | `transform`·`opacity` 외 애니메이션 0건 (MT-3) | 경고 |
## 13.2 수동 검수
| # | 항목 | 방법 |
| :-: | :--- | :--- |
| **M1** | **키보드 단독 조작** | 마우스 없이 전 기능 도달·실행 |
| **M2** | **스크린리더** | 주요 흐름 1회 낭독 확인 |
| **M3** | **200% 확대** | 콘텐츠 손실·가로 스크롤 발생 여부 |
| **M4** | **그레이스케일 판독** | 색 단독 의존 검출 (Layer 1 CO-1) |
| **M5** | **다크 테마 전수** | 전 화면 다크 렌더 확인 (특히 `base` 텍스트 사용 여부 — TM-S3) |
| **M6** | **모션 축소 모드** | 기능 완전성 확인 (RM-2) |
| **M7** | **터치 기기 실기** | hover 의존·히트 영역 실제 확인 |
| **M8** | **인쇄 스타일시트** | 그림자 제거·알파 평탄화·아코디언 전개 확인 (EV-4·AL-4·AD-5) |
| **M9** | **포커스 순서** | Tab 순회가 시각 순서와 일치 (FO-1) |
| **M10** | **저사양·저대역** | 로딩 상태·폴백 확인 |
> **AT-2 재확인**: 자동 검사(§13.1)는 문제의 약 30%만 잡는다. §13.2를 생략하면 나머지 70%가 그대로 배포된다.
---
## 근거 출처 요약
본 파일이 인용한 벤치마킹 항목:
**T13 · T15 · T37 · T49 · T52 · M1 · M3 · M5 · M17 · M18 · M19 · M22 · §16 상충-6 · §18-2 · §19 (재판정 24항 전량)**
전문: `RAG/design.benchmark_2026-07-28_v0.1.0.md`
**§19 부활 항목의 수용 현황**
| 부활 항목군 | 수용 위치 |
| :--- | :--- |
| State layers · 인터랙션 상태 토큰 · 하프스텝 hover · opacity.disabled | §6 (GRADE 시프트로 재설계, State Layer는 대안) |
| Elevation L4·L5 · Scrim · Drop shadow · Z-index · Shadow/Depth | §9 |
| 포커스 링 체계 | §7 |
| 런타임 테마 · `data-color-mode` · device color mode · Contextual tokens | §5.3 |
| 반응형 브레이크포인트 · Fluid type · 아코디언·탭 | §3.1 · §4.2 · §12 |
| `rem`/`em` 상대 단위 | §2.1 |
| Touch hit area | §8.1 |
| Motion 토큰 · 스크린리더 규정 | §10 · §11 |
| Alpha 색상 · Transparent white/black | §5.4 (Layer 1 CS-4 예외) |
| Stylelint 자동 강제 | §13.1 |
**[CONFLICT DETECTED / 미검증]**
- §6.3 MD3 state layer focus·pressed — 문서 **10%** vs `material-web` v0.192 토큰 **12%** [§18-2]. 문서값 채택, 드리프트 존재 명시
**본 시스템 고유 설계**
- **§6.2 GRADE 시프트 방식** — 상태 표현을 불투명도 오버레이가 아니라 GRADE 스텝 이동으로 정의. 테마 무관·대비 예측 가능·인쇄 호환. Carbon의 "1 full step / 2 full steps" 발상(M18)을 GRADE 척도(Layer 1 §2.1) 위에 재구현한 것으로, 조사 대상 8개 시스템 중 동일 구현은 없다 `[자체 정의]`
RAG/design system_v0.1.1/design.medium.ultrawide.md
+213
View File
@@ -0,0 +1,213 @@
# Prism Design System — Medium Profile: Ultrawide (Layer 2d)
| 버전 | 수정일 | 수정자 | 주요 변경 내용 | 비고 |
| :--- | :--- | :--- | :--- | :--- |
| v0.1.0 | 2026-09-29 | HMCM | 신규 작성 — 32:9 초와이드(3840×1080) 캔버스, 24열 그리드, 중앙 경계 규칙, L2b 승계 범위 | `draft` — 사용자 승인(2026-09-29) |
| v0.1.1 | 2026-09-29 | HMCM | 스키마 정합 보정 — 매체 표기를 `presentation` 변형(`presentation.ultrawide`)으로 전환, 허용 분할을 L1 §5.3과 비율 동일한 6종으로 축소(`12:6:6`·`4:4:4:12`·`12:4:4:4` 삭제), §5에 L1 대응 열 추가, `active` 전환 | [CONFLICT DETECTED] 해소 — 사용자 선택 '최소 추가' |
| 메타 | 값 |
| :--- | :--- |
| 파일 | `design.medium.ultrawide.md` |
| 계층 | **Layer 2d — Medium Profile: Ultrawide** (`presentation`의 변형 `presentation.ultrawide`) |
| 역할 | Layer 1 상대값을 **32:9 캔버스 px·EMU로 실체화** — **L2b(presentation)와 다른 부분만** 규정한다 |
| 상위 | `design.foundations.md` (Layer 1) |
| 승계 | `design.medium.presentation.md` (Layer 2b) — 아래 §1.3 승계표의 항목은 L2b 값을 **그대로** 쓴다 |
| 하위 | M7 `ultrawide/module.ultrawide-deck.md` |
| 로드 정책 | **온디맨드** |
---
## 목차
- [1. 프로파일 개요](#1-프로파일-개요)
- [2. 캔버스](#2-캔버스)
- [3. 가로 그리드](#3-가로-그리드)
- [4. 중앙 경계](#4-중앙-경계)
- [5. 허용 분할](#5-허용-분할)
- [6. 분량·시선](#6-분량시선)
- [7. 검증 체크리스트](#7-검증-체크리스트)
---
# 1. 프로파일 개요
## 1.1 적용 조건
| 적용 | 비적용 |
| :--- | :--- |
| 32:9 사이니지·울트라와이드 모니터 발표 | 16:9 투사·화면 공유 → L2b / M2 |
| 모니터 2대 연결(얇은 베젤) 확장 화면 | 5120×1442 캔버스 → X1 확장 슬롯 (modules §4.3, 본 프로파일 미적용) |
| 전시·로비 정지 화면(32:9) | 인쇄 배포 → `print` |
## 1.2 이 프로파일의 지배 조건
| 조건 | 영향 | 대응 |
| :--- | :--- | :--- |
| **높이가 16:9와 같다 (1080px)** | 캔버스 높이 기준으로 정한 크기 하한·타입 스케일이 **그대로 성립** | §1.3 승계 |
| **폭이 두 배다 (3840px)** | 한 행이 과도하게 길어질 위험, 좌우 시선 이동 증가 | §3 24열 · §6 시선 규칙 |
| **중앙 x=1920에 얇은 베젤이 있을 수 있다** | 글자가 베젤에 걸리면 판독 저하 | §4 중앙 경계 |
## 1.3 L2b 승계표
| 항목 | 승계 값 | L2b 위치 |
| :--- | :--- | :--- |
| 투사 열화 보정 (최소 크기·선 굵기·대비 AAA) | 동일 | §3 |
| 수직 존 (헤더 48~192 · 콘텐츠 216~960 · 푸터 984~1032) | 동일 | §4.3 |
| 스페이싱·반경·획 | 동일 | §4.5 |
| 타입 바인딩 (base 24px, `size(n)=24×1.125ⁿ`) | 동일 | §5 |
| 색·테마·악센트 경제 (슬라이드당 ≤ 2) | 동일 | §6 |
| 강조 슬라이드 (≤ 10%, 연속 2장 금지) | 동일 | §7 |
| 표면·그림자·알파·그라디언트 금지 | 동일 | §8 |
> **승계 근거**: body/캔버스 높이 비 = 24/1080 = **H/45** 로 L2b와 같다. 선행 SAMAN 초와이드(32/1442)도 H/45로 수렴한다 [출처: `design.modules.md` §4.3]. 따라서 **새로 정하는 값은 가로 방향(§2~§6)뿐**이다.
## 1.4 매체 상수
```yaml
medium: presentation
medium_variant: presentation.ultrawide # modules §2.1 — screen.web / screen.mobile 선례
inherits: presentation # §1.3 승계표
unit_primary: px
canvas: 3840 x 1080 # 32:9
px_to_emu: 6350
columns: 24
margin_lr: 48 # space.400
gutter: 24 # space.200
column_w: 133
center_line: 1920
center_rule: text-no-cross # §4
```
---
# 2. 캔버스
| 단위 | 폭 | 높이 | 비고 |
| :--- | ---: | ---: | :--- |
| **px (오써링)** | **3840** | **1080** | 논리 캔버스 |
| inch | 26.6667 | 7.5 | = px ÷ 144 (PowerPoint 최대 56in 이내) |
| pt | 1920 | 540 | = px ÷ 2 |
| **EMU** | **24,384,000** | **6,858,000** | = px × 6350 (정수, 잔차 0) |
| 종횡비 | **3.5556 (32:9)** | | |
| ID | 규칙 |
| :--- | :--- |
| **UC-1** | 오써링 캔버스는 **3840×1080에 고정**한다 |
| **UC-2** | 3840×1080을 **1920×1080 두 장으로 쪼개어 제작하지 않는다.** 한 장의 캔버스로 설계한다 (시선 흐름·결론 존 단일성 유지) |
| **UC-3** | 출력 시 **전체 스케일**한다. 요소별 개별 스케일 금지 (L2b CV-3 준용) |
---
# 3. 가로 그리드
## 3.1 규격
| 항목 | 값 |
| :--- | ---: |
| 좌우 마진 | **48px** (`space.400`) |
| 콘텐츠 폭 | **3744px** |
| 컬럼 수 | **24** |
| 거터 | **24px** (`space.200`) |
| **컬럼 폭** | **133px** |
| 정합 검증 | 24 × 133 + 23 × 24 = **3744** ✓ |
> **설계 근거**: L2b의 마진·거터 토큰(48·24)을 그대로 두고 컬럼 수만 두 배로 늘렸다. **12열 병합 = 1860px**으로 L2b 콘텐츠 폭(1824px)과 거의 같아, 반쪽 화면에서 16:9 조판 감각이 유지된다. `[자체 정의]`
### 컬럼 X 좌표
```
X(i) = 48 + (i−1) × 157 컬럼 끝 = X(i) + 133
```
| Col | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 |
| :--- | ---: | ---: | ---: | ---: | ---: | ---: | ---: | ---: | ---: | ---: | ---: | ---: |
| X | 48 | 205 | 362 | 519 | 676 | 833 | 990 | 1147 | 1304 | 1461 | 1618 | 1775 |
| Col | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 |
| :--- | ---: | ---: | ---: | ---: | ---: | ---: | ---: | ---: | ---: | ---: | ---: | ---: |
| X | 1932 | 2089 | 2246 | 2403 | 2560 | 2717 | 2874 | 3031 | 3188 | 3345 | 3502 | 3659 |
Col 24 끝 = 3792 (우 마진 48) ✓
## 3.2 존 폭과 행 길이 (body 24px)
| 컬럼 병합 | 폭 | **measure** | 판정 [foundations §3.7] |
| :---: | ---: | ---: | :--- |
| 24 col | 3744px | 156.0 em | **도판·배경 전용** |
| 16 col | 2488px | 103.7 em | **도판 전용** |
| 12 col | 1860px | 77.5 em | 도판·표·단문(1~2행) 전용 |
| 8 col | 1232px | 51.3 em | 도판·표 전용 |
| **6 col** | **918px** | **38.2 em** | **✓ 1단 본문 상한** (허용 확장 45em 이내) |
| **5 col** | **761px** | **31.7 em** | **✓ 1단 이상값(33em) 근접** |
| **4 col** | **604px** | **25.2 em** | **✓ 다단 본문** |
| 3 col | 447px | 18.6 em | 짧은 텍스트 (3행 이하) |
| ID | 규칙 |
| :--- | :--- |
| **UZ-1** | 연속 본문은 **6 col 이하** 존에만 둔다 (L2b ZN-1과 같은 폭 한계) |
| **UZ-2** | 8 col 이상 존은 **도판·표·단문** 전용이다 |
| **UZ-3** | **텍스트 요소 1개의 최대 폭은 12 col(1860px)** 이다. 이를 넘는 텍스트 상자를 두지 않는다 |
---
# 4. 중앙 경계
캔버스 중심 x=1920은 **12열 끝(1908)과 13열 시작(1932) 사이 거터의 정중앙**에 놓인다.
| ID | 규칙 | 근거 |
| :--- | :--- | :--- |
| **CB-1** | **글자는 x=1920을 가로지르지 않는다.** 제목·본문·라벨·수치 모두 해당 | 사용자 확정 (2026-09-29) — 사이니지 얇은 베젤 |
| **CB-2** | 도판·선·커넥터·배경 면은 중앙을 가로질러도 된다 | 〃 |
| **CB-3** | 모든 허용 분할(§5)은 **12\|13 경계를 존 경계로 포함**한다. 예외: 도판 전용 16 col 존 | CB-1을 구조로 보장 |
| **CB-4** | 가로지르는 도판 위에 **라벨을 얹을 때** 라벨 상자가 1908~1932 구간과 겹치지 않게 한다 | CB-1 |
> **효과**: 헤더 제목(최대 25자 × 49px = 1225px)과 principle(최대 60자 × 30px = 1800px)은 좌반면(48~1908) 안에서 끝난다. 규칙을 지키면 **베젤이 있든 없든 같은 결과**가 나온다.
---
# 5. 허용 분할
좌표는 `x / 폭` (px). EMU = px × 6350. **24열 분할을 ½로 줄이면 L1 §5.3 허용 분할과 비율이 같다** — 신규 분할을 만들지 않는다 (GS-1, 사용자 확정 2026-09-29).
| 분할 | L1 대응 | 존1 | 존2 | 존3 | 존4 | 용도 |
| :--- | :--- | :--- | :--- | :--- | :--- | :--- |
| `24` | `12` | 48 / 3744 | | | | 전폭 도판·배경 전용 (텍스트는 UZ-3) |
| **`12:12`** | `6:6` | 48 / 1860 | 1932 / 1860 | | | **좌우 대조 · 기본형** |
| `6:6:12` | `3:3:6` | 48 / 918 | 990 / 918 | 1932 / 1860 | | 사실 2개 + 결론 (SAMAN 유형 A 계승) · **3요소 대체형** |
| `6:6:6:6` | `3:3:3:3` | 48 / 918 | 990 / 918 | 1932 / 918 | 2874 / 918 | 4단계 프로세스 |
| `16:8` | `8:4` | 48 / 2488 | 2560 / 1232 | | | 대형 도판(중앙 횡단 허용) + 해설 |
| `8:16` | `4:8` | 48 / 1232 | 1304 / 2488 | | | 해설 + 대형 도판(중앙 횡단 허용) |
| ID | 규칙 |
| :--- | :--- |
| **US-1** | 위 6종 외 분할을 쓰지 않는다. 추가가 필요하면 L1 §5.3에 먼저 등재하고(GS-2) CB-3을 검증한다 |
| **US-2** | `8:8:8`(L1 `4:4:4`)은 **허용하지 않는다** — 가운데 존(1304~2536)이 중앙을 가로질러 CB-1과 충돌한다. 3요소는 `6:6:12`로 대체한다 |
| **US-3** | 16 col 존에는 텍스트를 두지 않는다 (라벨은 CB-4) |
---
# 6. 분량·시선
| ID | 규칙 | 근거 |
| :--- | :--- | :--- |
| **UV-1** | **슬라이드당 화면 문구 총량은 L2b와 같다** (M2 §7 예산 승계, 250자) | 폭이 넓어져도 읽는 시간은 늘지 않는다 `[자체 정의]` |
| **UV-2** | 읽는 순서는 **좌반면 → 우반면**이다. 결론 존은 **우반면**에 둔다 | 좌→우 진행의 귀결 위치 `[자체 정의]` |
| **UV-3** | 좌우 반면의 **상단 정렬선(y=216)** 을 맞춘다. 한쪽만 비는 반면이 생기면 도판·여백으로 의도를 드러낸다 | L2b VZ-4(하단 공백 25%) 준용 |
| **UV-4** | 슬라이드당 결론 존은 **1개**다 (PD-1). 반면마다 하나씩 두지 않는다 | foundations PD-1 |
---
# 7. 검증 체크리스트
L2b §10 자동·육안 항목을 **그대로 적용**하고, 아래를 추가한다.
| # | 항목 | 기준 |
| :-: | :--- | :--- |
| U1 | 캔버스 | 3840×1080, EMU 24,384,000 × 6,858,000 |
| U2 | 그리드 | 24×133+23×24 = 3744, 존 좌표 §5 일치 |
| U3 | 중앙 경계 | 텍스트 요소 bbox 중 x=1920 포함 **0건** |
| U4 | 텍스트 폭 | 텍스트 요소 폭 ≤ 1860px |
| U5 | 분할 | §5 목록 외 0건 |
| U6 | 결론 존 | 슬라이드당 1개, 우반면 |
*본 프로파일은 참조 사양이다. 상태: `active` (M7 등록과 함께 2026-09-29 전환).*
RAG/design system_v0.1.1/design.modules.md
+554
View File
@@ -0,0 +1,554 @@
# Prism Design System — Modules (Layer 3)
| 버전 | 수정일 | 수정자 | 주요 변경 내용 | 비고 |
| :--- | :--- | :--- | :--- | :--- |
| v0.1.0 | 2026-07-28 | 조선두 | 신규 작성 — 모듈 스키마, 파생 절차, 등록부, 거버넌스, 인용 금지 목록, 한계 선언, 검증 | 최초 버전 |
| v0.1.1 | 2026-07-28 | 조선두 | §4.2 M1 선별 개수 주석 정정 (16종 → 19종), §4.3 미작성 파일 참조 명시 | Step 3 전수 검증 중 발견 |
| v0.1.2 | 2026-07-29 | HMCM | §4.1 등록부 갱신 — M2·M3·M4 `active` 전환 + **M5 A3 설명자료** 신설, SUB 폴더 실행 명세 4종 연결 | 진단 C1 해소 |
| v0.1.3 | 2026-07-29 | HMCM | **M1 편람 실체화**(`A3/module.a3-handbook.md`, draft→active) + **M6 A4 문서** 신설(`A4/module.a4-document.md`), 미등록 후보 판정 주석 추가 | 추가 모듈 파생 Task |
| v0.1.4 | 2026-09-29 | HMCM | **M7 32:9 초와이드 덱** 신설·등록(`ultrawide/module.ultrawide-deck.md`, L2d `design.medium.ultrawide.md`) — §2.1 `columns` 허용값에 24 추가(presentation.ultrawide 한정), §4.1 M7 행 추가, §4.3 X1 관계 주석 추가 | 사용자 확정 — 등록 필수분만, 선례대로 PATCH |
| 메타 | 값 |
| :--- | :--- |
| 파일 | `design.modules.md` |
| 계층 | **Layer 3 — Case Module** |
| 역할 | 개별 케이스 모듈의 **파생 절차·등록부·거버넌스** |
| 상위 | Layer 0~2 전체 |
| 로드 정책 | **온디맨드** (모듈 신규 작성·개정 시) |
---
## 목차
- [1. 모듈이란](#1-모듈이란)
- [2. 모듈 스키마](#2-모듈-스키마)
- [3. 파생 절차](#3-파생-절차)
- [4. 모듈 등록부](#4-모듈-등록부)
- [5. 거버넌스](#5-거버넌스)
- [6. 인용 금지 목록](#6-인용-금지-목록)
- [7. 한계 선언](#7-한계-선언)
- [8. 검증 체크리스트](#8-검증-체크리스트)
---
# 1. 모듈이란
## 1.1 정의
**모듈은 Layer 0~2를 특정 용도에 맞게 고정한 실행 명세다.** 새로운 규칙을 만드는 곳이 아니라, **이미 있는 규칙 중 무엇을 쓸지 고르고 남은 자유도를 없애는 곳**이다.
| 계층이 정하는 것 | 모듈이 정하는 것 |
| :--- | :--- |
| 어떤 색이 있는가 (L0) | 이 문서에서 어떤 페어를 쓰는가 |
| 비율·단계 (L1) | — (모듈은 Layer 1을 건드리지 않는다) |
| 매체별 절대값 (L2) | 어떤 판형·브레이크포인트를 쓰는가 |
| 컴포넌트 카탈로그 | **어떤 컴포넌트를 선별**했는가 |
| — | **페이지·화면 패턴** |
| — | **분량 예산** |
| — | **콘텐츠 구조** |
## 1.2 모듈이 할 수 없는 것
| ID | 규칙 |
| :--- | :--- |
| **MD-1** | 모듈은 **Layer 1을 수정할 수 없다.** 비율·스케일 인덱스·행간을 바꾸지 않는다 |
| **MD-2** | 모듈은 **새 토큰을 만들 수 없다.** 필요하면 Layer 1·2에 등재 요청한다 |
| **MD-3** | 모듈은 **카탈로그에 없는 컴포넌트를 쓸 수 없다.** 필요하면 `design.components.md §6` 절차를 따른다 |
| **MD-4** | 모듈은 **규칙을 완화할 수 없다.** 강화만 가능하다 |
| **MD-5** | 모듈 고유 결정은 **전부 모듈 명세에 문서화**한다. 암묵적 관행을 두지 않는다 |
> **MD-4가 핵심이다.** "이 문서는 특수하니까 대비 기준을 낮추자"는 즉시 시스템을 무너뜨린다. 특수 사정이 있으면 규칙 자체를 고치거나 예외를 상위 계층에 등재한다.
## 1.3 참조 사양 면책
| ID | 규칙 | 근거 |
| :--- | :--- | :--- |
| **DC-1** | **본 시스템은 참조 사양이지 라이브러리가 아니다.** 시스템이 개정되어도 기 제작 산출물은 자동 갱신되지 않는다 | [출처: design.benchmark, T25 — SLDS "If SLDS updates the blueprint, your component code isn't updated automatically"] |
| **DC-2** | 인쇄 편람 등 배포 문서는 서문에 **"개정 시 기 배포분에 소급 적용되지 않는다"** 를 명시한다 | T25 |
| **DC-3** | **본 시스템 준수가 산출물의 적합성·유효성을 보증하지 않는다** | [출처: T49 — USWDS "Building with accessible components does not guarantee an accessible service" / "We test our work. You need to test yours."] |
---
# 2. 모듈 스키마
## 2.1 필수 필드
```yaml
module:
id: <slug> # 기계 식별자
name: <string> # 표기명
version: <semver> # 모듈 자체 버전
status: draft|active|deprecated
# --- 상위 계층 바인딩 ---
brand: <brand.id> # Layer 0 인스턴스
medium: print|presentation|screen
medium_variant: <string|null> # 예: screen.web / screen.mobile
dual_medium: <bool> # 겸용 선언 (print PM-3)
# --- 매체 파라미터 ---
format: <string> # 예: A3-landscape / 1920x1080 / responsive
columns: <int> # 12·8·6·4·3 중 (presentation.ultrawide 한정 24 — M7)
type_set: compact|expressive
# --- 선별 ---
components: [<component.id>, …]
component_count: <int>
variant_count: <int> # VR-3 정량 명시
patterns: [<pattern.id>, …]
# --- 예산 ---
budget:
<slot>: { recommended: <int>, max: <int> }
# --- 강화 규칙 (완화 불가, MD-4) ---
overrides_strict: [<rule.id>: <value>, …]
# --- 참조 ---
depends_on:
foundations: <version>
medium: <version>
components: <version>
```
## 2.2 필드 규칙
| ID | 규칙 |
| :--- | :--- |
| **MS-1** | `depends_on`에 **상위 파일의 버전을 기록**한다. 상위가 MAJOR 증가하면 모듈 재검증이 필요하다 |
| **MS-2** | `component_count`·`variant_count`를 **정량 명시**한다 (`design.components.md` VR-3) |
| **MS-3** | `overrides_strict`는 **강화만** 담는다. 완화 항목이 있으면 스키마 위반이다 |
| **MS-4** | `dual_medium: true`면 **두 매체 프로파일의 엄격한 쪽**을 자동 적용한다 |
| **MS-5** | `budget`은 **모든 텍스트 슬롯**을 덮어야 한다. 누락 슬롯은 분량 통제가 안 된다 |
## 2.3 패턴 정의
패턴은 **존 배치의 재사용 단위**다. 모듈 안에서 정의한다.
```yaml
pattern:
id: <slug>
split: <Layer 1 §5.3 허용 분할 중 하나>
zones:
- { id: <slug>, cols: <int>, components: [<id>, …], role: <string> }
conclusion_zone: <zone.id> # PD-1 단일 결론 존
applies_to: [<콘텐츠 유형>, …]
```
| ID | 규칙 |
| :--- | :--- |
| **PT-1** | `split`은 **Layer 1 §5.3 허용 목록**에서만 고른다 |
| **PT-2** | `conclusion_zone`은 **정확히 1개**다 (Layer 1 PD-1) |
| **PT-3** | 존 폭 합계 + 거터가 **콘텐츠 폭과 정합**해야 한다 (Layer 1 GC-3) |
| **PT-4** | 패턴은 **콘텐츠 유형에 매핑**되어야 한다. "예쁜 배치"는 패턴이 아니다 |
---
# 3. 파생 절차
## 3.1 8단계
| 단계 | 작업 | 산출 | 참조 |
| :-: | :--- | :--- | :--- |
| **1** | **브랜드 선택** — 기존 인스턴스 또는 신규 등록 | `brand` | `design.brand.md §9` |
| **2** | **매체 선택** — 겸용 여부 선언 | `medium`·`dual_medium` | `design.medium.*.md §1` |
| **3** | **케이스 제약 수집** — 판형·배포 방식·독자·수명·개정 주기 | 제약 목록 | — |
| **4** | **매체 파라미터 확정** — 판형·컬럼·타입 세트 | `format`·`columns`·`type_set` | Layer 2 |
| **5** | **컴포넌트 선별** — 카탈로그에서 고른다. 새로 만들지 않는다 | `components`·개수 | `design.components.md §4` |
| **6** | **패턴 정의** — 콘텐츠 유형 → 존 배치 매핑 | `patterns` | §2.3 |
| **7** | **분량 예산 산정** — 전 텍스트 슬롯 | `budget` | §3.3 |
| **8** | **검증** — §8 체크리스트 전수 | 검증 리포트 | §8 |
## 3.2 3단계 — 케이스 제약 수집 항목
| 항목 | 질문 | 영향 |
| :--- | :--- | :--- |
| 판형·해상도 | 무엇으로 출력·표시되는가 | Layer 2 선택 |
| 배포 방식 | 인쇄 배포 / 파일 / 웹 게시 | 겸용 여부 |
| 독자 | 실무자 / 일반 / 혼합 | 최소 크기·용어 수준 |
| 열람 방식 | 통독 / 참조 / 발표 | 단수·구조·색인 필요성 |
| 수명 | 1회성 / 상시 개정 | 페이지 번호 체계·버전 정책 |
| 개정 주기 | 부분 개정 여부 | 장별 상대 번호 채택 여부 |
| 접근성 요구 | 법정 요건 유무 | AA / AAA 목표 |
| 흑백 출력 | 발생하는가 | 색 부호화 강화 |
## 3.3 7단계 — 분량 예산 산정
**예산은 조판 결과에서 역산한다.** 감으로 정하지 않는다.
```
슬롯 예산(글자 수) = (슬롯 폭 ÷ 글자폭) × 허용 행수
글자폭 ≈ body 크기 × 1.0 (한글) 또는 × 0.5 (라틴)
```
| ID | 규칙 |
| :--- | :--- |
| **BG-1** | 예산은 **권장값 + 절대 최대값** 2개를 갖는다 |
| **BG-2** | 절대 최대값은 **오버플로가 발생하는 값보다 작아야** 한다. 딱 맞는 값을 최대값으로 두지 않는다 |
| **BG-3** | 예산 초과 시 **글자 크기를 줄이지 않는다.** 내용을 줄이거나 면·화면을 나눈다 |
| **BG-4** | **텍스트 잘림(truncation)을 설계에 포함하지 않는다** (Layer 1 TH-4) |
| **BG-5** | 예산은 **한글 기준**으로 산정하고, 라틴 혼용 시 여유가 생기는 방향이어야 한다 |
## 3.4 컴포넌트 선별 원칙
| ID | 규칙 |
| :--- | :--- |
| **SL-1** | **필요한 것만 고른다.** 카탈로그 전체를 가져오지 않는다 |
| **SL-2** | 선별한 컴포넌트는 **전부 실제로 사용**되어야 한다. 미사용 컴포넌트는 목록에서 뺀다 |
| **SL-3** | 같은 역할의 컴포넌트를 **2개 이상 선별하지 않는다** (예: `card`와 `stagecard`를 같은 용도로) |
| **SL-4** | 선별 결과를 **정량 명시**한다 (MS-2) |
---
# 4. 모듈 등록부
## 4.1 현행 등록
| # | 모듈 | 상태 | 브랜드 | 매체 | 판형 | 명세 위치 |
| :-: | :--- | :--- | :--- | :--- | :--- | :--- |
| M1 | **A3 시공상세도 편람** | **`active`** | saman | print | A3 가로 | `A3/module.a3-handbook.md` |
| M2 | **16:9 PPT 덱** | **`active`** | saman | presentation | 1920×1080 | `ppt/module.ppt-deck.md` |
| M3 | **웹앱** | **`active`** | saman | screen.web | responsive | `webapp/module.webapp.md` |
| M4 | **모바일·태블릿 앱** | **`active`** | saman | screen.mobile | responsive | `mobile/module.mobile-tablet.md` |
| M5 | **A3 설명자료** | **`active`** | saman | print | A3 가로 | `A3/module.a3-explainer.md` |
| M6 | **A4 문서 (보고서·지침서)** | **`active`** | saman | print | A4 세로 (변형 4종) | `A4/module.a4-document.md` |
| **X1** | 초와이드 강연 덱 (3.55:1) | 확장 슬롯 | saman | *(신규 매체 프로파일 필요)* | 5120×1442 | §4.3 |
| M7 | **32:9 초와이드 덱** | **`active`** | saman | presentation.ultrawide | 3840×1080 | `ultrawide/module.ultrawide-deck.md` |
> **미등록 후보 판정 (2026-07-29)** — 파생 검토 결과 아래 후보는 모듈로 만들지 않는다: ① **웹 문서·가이드 사이트** — M3 웹앱의 W4(문서) 패턴이 흡수 ② **전시·사이니지 정지 화면** — M2 준용으로 충분 (필요 시 파생) ③ **웹 인쇄 스타일시트** — M3 §9가 규정 ④ **초와이드(3.55:1)** — Layer 2d 매체 프로파일 신설이 선행 필요하며, 매체 범위 제외 결정(2026-07-28 사용자 확정)을 유지한다. 재접속 절차는 §4.3 보존
## 4.2 M1 — A3 시공상세도 편람 (실체화 완료 — 정본: `A3/module.a3-handbook.md`)
```yaml
module:
id: a3-handbook
name: A3 시공상세도 편람
version: 0.1.0
status: active # v0.1.3 — 실체화 완료
brand: saman
medium: print
dual_medium: false # 투사 겸용 시 true로 전환 → §5.5 상향표 적용
format: A3-landscape # 420 × 297 mm
columns: 12 # 컬럼 25.5mm / 거터 6mm
type_set: compact
layout:
body_columns: 3 # 4col 존 = 120mm = 34.0em (Bringhurst 이상값 재현)
dense_columns: 4 # 3col 존 = 88.5mm = 25.1em (도판·표 40% 이상 시)
baseline: 6mm
lines_per_page: 42
structure:
pagination: chapter-relative # <장>-<면> (print PN-1)
numbering: ISO-2145 # 최종 하위 번호 뒤 마침표 없음
running_head: true
index: true # 본문 면수의 약 2배 항목
glossary: true
cross_ref: "(→ N.N절, p.C-P)"
components: # 카탈로그 25종 중 19종 선별
- eyebrow, header, rule, footer
- card, stagecard, connector, principle
- table, stat, chartframe, specsheet
- directive, badge, scope
- toc, stepper, xref, mediaframe
component_count: 19
variant_count: 33 # v0.1.3 확정 (A3/module.a3-handbook.md §6)
overrides_strict:
- contrast_target: AAA # print 기본과 동일 (완화 아님)
- color_encoding: dual # 흑백 출력 빈발 → 형태+색 이중 부호화 전면 강제
depends_on:
foundations: 0.1.1
medium.print: 0.1.0
components: 0.1.0
```
> **선행 자산과의 관계**: 기존 `temp/Design system_v0.1.0.md`(A3 Astryx)는 본 모듈로 **대체**된다. 해당 문서의 Pattern A/B/C 및 Item 1~10 매핑은 **콘텐츠 자산**이므로 M1의 패턴 정의 단계(파생 절차 6단계)에서 재활용한다.
## 4.3 X1 — 확장 슬롯: 초와이드 (3.55:1)
선행 SAMAN 시스템의 실운용 자산(슬라이드 32종·React 컴포넌트 13종·실제 덱 산출물)이 존재하는 판형이다. **현 시스템의 매체 범위에는 포함되지 않으나, 재접속 경로를 보존한다.**
| 항목 | 값 |
| :--- | :--- |
| 캔버스 | 5120 × 1442 px (135.471 × 38.14 cm, 3.5519:1) |
| EMU | 48,769,560 × 13,730,400 (PowerPoint 최대 56인치 이내) |
| 기존 그리드 | 마진 96 / 거터 40 / 컬럼 374 / 콘텐츠 4928 |
| 브랜드 | **동일** (saman — 철학·트라이어드·팔레트 전부 승계) |
**재접속 시 필요 작업** — 아래 1번 파일은 현 시점에 존재하지 않는다. 확장 슬롯 활성화 시 신규 작성 대상이다.
| # | 작업 |
| :-: | :--- |
| 1 | `design.medium.ultrawide.md` 신규 작성 (Layer 2d) — **현재 미작성 파일** |
| 2 | `base` 결정 — 기존 body 32px가 캔버스 높이 1442의 H/45에 해당하므로 **`presentation` 프로파일과 동일 비율** |
| 3 | 그리드 정합 재검증 — 12×374 + 11×40 = 4928 ✓ (기존 값이 이미 정합) |
| 4 | 기존 컴포넌트 13종을 §4 매체 적용 매트릭스에 매핑 |
| 5 | 기존 팔레트를 GRADE 척도로 재산출 (`design.brand.md §8.3`에 완료됨) |
> **재접속이 저렴한 이유**: 브랜드(Layer 0)와 파운데이션(Layer 1)이 이미 공유되고, 초와이드의 body/캔버스 비율(32/1442 = H/45)이 `presentation` 프로파일(24/1080 = H/45)과 **동일**하다. 실질적으로 `base`와 그리드 수치만 교체하면 된다.
> **[추가 2026-09-29 / HMCM] M7과의 관계** — 3840×1080(32:9)은 M7로 등록되었고, L2d `design.medium.ultrawide.md`가 작성되었다. 위 표 1번의 파일명은 M7용 L2d가 선점했으므로, X1(5120×1442) 활성화 시에는 L2d에 판형을 추가하거나 별도 변형으로 선언한다. X1 자체는 확장 슬롯 상태를 유지한다.
## 4.4 모듈 등록 절차
| 단계 | 작업 |
| :-: | :--- |
| 1 | §3 파생 절차 8단계 완료 |
| 2 | §8 검증 체크리스트 전수 통과 |
| 3 | 본 파일 §4.1 등록부에 행 추가 |
| 4 | `status: draft` → `active` 전환 |
| 5 | 본 파일 MINOR 버전 증가 |
---
# 5. 거버넌스
## 5.1 토큰 수명주기
[출처: design.benchmark, T48 (Atlassian 토큰 수명주기 + GOV.UK 버전 추종 정책)]
| 단계 | 상태 | 처리 | 전환 조건 |
| :-: | :--- | :--- | :--- |
| 1 | `active` | 정상 사용 | — |
| 2 | `deprecated` | **신규 사용 금지**, 기존 유지. 대체 토큰 명시 | MINOR 증가 시 전환 |
| 3 | soft-delete | 참조 시 **경고**. 값은 유지 | 다음 MINOR |
| 4 | `deleted` | 제거. 참조 시 **빌드 실패** | MAJOR 증가 시 |
| ID | 규칙 |
| :--- | :--- |
| **LC-1** | `deprecated` 선언 시 **대체 토큰을 반드시 명시**한다. 대체 없는 폐지는 금지 |
| **LC-2** | `deprecated` → `deleted`까지 **최소 2개 MINOR 주기**를 보장한다 |
| **LC-3** | 폐지 예고는 **사전 고지 + 명확한 cut-off**를 동반한다 |
| **LC-4** | MAJOR 증가 시 **전 모듈이 재검증 대상**이 된다 (MS-1) |
## 5.2 외부 기준 추종 정책
법령·표준(KS·시방서·WCAG·ISO 등)이 개정될 때의 반영 시점 규정이다. [출처: design.benchmark, T48 (GOV.UK "최신 published 버전이면서 1년 이상 경과")]
| ID | 규칙 |
| :--- | :--- |
| **ES-1** | **공표 후 일정 기간이 경과한 정식 버전**만 정본으로 반영한다. 초안·시행 예정 단계는 반영하지 않는다 |
| **ES-2** | 반영 유예 기간은 **모듈이 선언**한다 (법정 강제 기준은 시행일 즉시 반영) |
| **ES-3** | 반영 전 기간에는 **"개정 예정" 주석**으로 표시하되 본문 수치는 현행을 유지한다 |
| **ES-4** | 반영 시 **개정 이력에 근거 조문·시행일**을 기재한다 |
## 5.3 버전 규칙
| 구분 | 증가 조건 |
| :--- | :--- |
| **MAJOR** | 토큰 의미 변경 · 스케일 비율 변경 · 계층 구조 변경 · 하위 호환 파괴 |
| **MINOR** | 토큰·컴포넌트·패턴·모듈·브랜드 인스턴스 추가 · 규칙 강화 |
| **PATCH** | 수치 보정 · 오타 · 문서 정정 · 근거 보강 |
| ID | 규칙 |
| :--- | :--- |
| **VS-1** | **파일명에 버전을 붙이지 않는다.** 버전은 문서 메타의 변경 이력 표로만 관리한다 |
| **VS-2** | 상위 계층의 MAJOR 증가는 **하위 전체의 재검증**을 유발한다 |
| **VS-3** | 모듈은 **자체 버전**을 별도로 갖되, `depends_on`에 상위 버전을 기록한다 |
## 5.4 개정 이력 서식
모든 파일 최상단에 아래 표를 둔다. 행은 **누적**하며 삭제하지 않는다.
| 버전 | 수정일 | 수정자 | 주요 변경 내용 | 비고 |
| :--- | :--- | :--- | :--- | :--- |
| ID | 규칙 |
| :--- | :--- |
| **CH-1** | 변경 내용은 **무엇을 왜 바꿨는지**를 적는다. "수정"만 적지 않는다 |
| **CH-2** | 상충 해소로 인한 개정은 **비고에 발견 경위**를 적는다 |
| **CH-3** | 근거가 된 벤치마킹 항목·조문이 있으면 **함께 기재**한다 |
## 5.5 검수 게이트
[출처: design.benchmark, M22 (USWDS·GOV.UK "if it doesn't pass, we don't merge" — CI 게이트 사상을 검수 절차로 전환)]
| ID | 규칙 |
| :--- | :--- |
| **QG-1** | 자동 검증(Layer 1 §8.1 + 매체별) **전항 통과 없이 산출물을 확정하지 않는다** |
| **QG-2** | `screen` 모듈은 **CI에 자동 검사를 연결**한다 (Stylelint · axe). 통과하지 못하면 머지하지 않는다 |
| **QG-3** | `print`·`presentation` 모듈은 **자동 검사 도구가 없으므로 검수 절차로 대체**한다. 검수자·일자·판정을 기록한다 |
| **QG-4** | **자동 검사는 문제의 약 30%만 발견한다.** 육안 검수를 반드시 병행한다 (GDS 인용) |
| **QG-5** | 검수 실패 항목은 **보정 전/후를 대조 기록**한다 |
## 5.6 인쇄 색상 재검증
[출처: design.benchmark, M23 · §12.1]
| ID | 규칙 |
| :--- | :--- |
| **CR-1** | 인쇄 모듈은 **인쇄소 출력 프로파일 확인 → CMYK 변환 → 토큰 등록 → 교정쇄 승인** 순서를 밟는다 |
| **CR-2** | **진한 파랑·초록 계열은 CMYK 색역 이탈 가능성이 높다.** 교정쇄 확인을 필수로 한다 |
| **CR-3** | 참조한 공개 시스템 팔레트(Carbon·Atlassian·Spectrum·Polaris)는 **전부 sRGB 기준**이다. 인쇄에 직접 쓰기 전 전 스텝 대비를 재검증한다 |
| **CR-4** | 프로파일 미확정 상태의 CMYK 수치를 문서에 확정 기재하지 않는다 |
## 5.7 드리프트 방지
**문서와 토큰 파일 간 값 불일치는 디자인 시스템의 기본 실패 모드다.**
조사 대상 8개 시스템 중 **최소 5개**에서 공개 문서와 공식 토큰 패키지 간 드리프트가 확인됐다 — MD3 state layer(10% vs 12%), Spectrum 컬러 스톱 수(14 vs 13 vs 16), Carbon 컬럼 수(16 vs 4/8/16 vs 12), Carbon 타입 토큰명(v10 vs v11), USWDS line-height(1.15 vs 1.2). 선행 SAMAN 시스템도 **4중 버전 표기**(core 0.3.2 / tokens 0.3.0 / 산문 0.3.1 / readme 0.3.7)로 같은 실패를 겪었다. [출처: design.benchmark, §12 조사 방법 · §18]
| ID | 규칙 |
| :--- | :--- |
| **DR-1** | **`design.tokens.json`이 SSOT다.** 문서의 표와 불일치하면 **JSON이 우선**한다 |
| **DR-2** | 문서 표의 수치와 JSON 값의 **정합 검증을 빌드 게이트로 강제**한다 (Layer 1 F9) |
| **DR-3** | **버전 표기는 파일당 1곳**(변경 이력 표)에만 둔다. 본문·메타·예시에 버전을 중복 기재하지 않는다 |
| **DR-4** | 토큰 값을 문서에 옮겨 적을 때는 **JSON에서 생성**한다. 손으로 옮기지 않는다 |
---
# 6. 인용 금지 목록
벤치마킹 조사에서 **실재하지 않는 것으로 판명된 항목**이다. 본 시스템의 어떤 문서·모듈에서도 근거로 인용하지 않는다. [출처: design.benchmark, §18]
| # | 항목 | 판명 내용 |
| :-: | :--- | :--- |
| 1 | **Apple HIG "8pt 그리드"** | 애플 공식 문서에 **명문 규정이 없다.** 벤치마킹에서 가장 자주 오인용되는 항목 [§18-30] |
| 2 | **GOV.UK `$govuk-print-styles` 변수** | **존재하지 않는다** [§18-21] |
| 3 | **"GOV.UK는 인쇄 시 헤더/푸터를 숨긴다"** | **사실이 아니다.** 배경·테두리만 제거한다 (`@media print` 블록 97개 전수 확인) [§18-22] |
| 4 | **USWDS "이상적 characters-per-line"** | **문서에 없다.** `ex` 단위 measure 토큰만 정의되어 있다. CPL 권고로 인용 금지 [§18-18] |
| 5 | **SLDS 블루프린트의 `Anatomy`/`States`(독립 탭)/`Do-Don't` 섹션** | **블루프린트 문서에 존재하지 않는다** [§18-25] |
| 6 | **Polaris 알파벳순 terminology / word list** | **존재하지 않는다.** 유일한 표는 단위 약어 표 1개 [§18-29] |
| 7 | **Carbon 종횡비 3:4 · 1:2** | 공식 목록에 **미포함**. 실제는 1:1, 2:1, 2:3, 3:2, 4:3, 16:9 [§18-7] |
| 8 | **Atlassian "group/variant/state" 토큰 anatomy 용어** | **공식 용어가 아니다.** 공식은 Foundation / Property / Modifier [§18-12] |
| 9 | **Atlassian base/semantic/component 3계층 모델** | **공식 문서에 없다.** 확인 가능한 것은 2층 구조 [§18-13] |
| 10 | **FOGRA39 TAC 350%** | **오류.** FOGRA39는 330%(저잉크 300%), 350%는 구 FOGRA27 [§18-36] |
| 11 | **Polaris `voice-and-tone` / `actionable-language` / `help-documentation` 현행 문서** | **2025-01-07 삭제됨.** 인용 시 반드시 **아카이브 커밋 기준**임을 명시 [§18-28] |
| 12 | **MD3 "톤 40 차이 = 3:1 / 50 차이 = 4.5:1" 일반 규칙** | **문서에 없다.** 사례값만 존재 [§18-1] |
| ID | 규칙 |
| :--- | :--- |
| **CT-1** | 위 항목을 **근거로 인용하지 않는다** |
| **CT-2** | 유사 항목을 새로 인용할 때는 **1차 출처(공식 문서·공식 저장소)를 직접 확인**한다 |
| **CT-3** | 확인 불가 항목은 **`[미검증]` 태그를 붙이고 대체 근거를 병기**한다 |
| **CT-4** | 2차 출처(블로그·요약글)만 있는 항목은 **`[미검증, 참고용]`** 으로 표기한다 |
---
# 7. 한계 선언
## 7.1 시스템의 한계
배포 문서·모듈 서문에 아래 취지를 명시한다. [출처: design.benchmark, T49 (USWDS 한계 선언)]
> **본 디자인 시스템 준수가 산출물의 적합성을 보증하지 않는다.**
> 본 시스템은 검증된 기본값과 규칙을 제공할 뿐이며, 개별 산출물의 정확성·법적 유효성·현장 적합성은 사용자가 별도로 검증해야 한다.
> **우리는 우리 작업을 시험했다. 당신은 당신 작업을 시험해야 한다.**
## 7.2 명시된 미검증 항목
본 시스템에는 **1차 출처를 확보하지 못한 항목**이 있다. 사용 시 인지해야 한다.
| # | 항목 | 위치 | 대체 처리 |
| :-: | :--- | :--- | :--- |
| 1 | 한글 글자면 비율의 표준 측정 방법 | foundations §3.10 | 실측 비교로 대체 |
| 2 | 투사물 최소 문자 크기 | presentation §3.2 | 관람 거리·XGA 배율·선행 실운용값 3중 근거 `[자체 정의]` |
| 3 | 투사 최소 선 굵기 | presentation §3.3 | XGA 배율 역산 `[자체 정의]` |
| 4 | 한국 시장 표준 CMYK 프로파일 | print §8.2 | 인쇄소 확인 절차로 대체 |
| 5 | 러닝헤드 verso/recto 관행 | print §10.3 | 2차 출처, 참고용 |
| 6 | IEC/IEEE 82079-1:2019 세부 목차 | print §10 | 유료(CHF 380), 미확인 |
| 7 | CMOS 17판 본문 규정 | print §10.3 | 목차만 확인, 부분 미검증 |
| 8 | ISO 12647-2 레지스터 허용오차 | print §8 | 원문 유료, 2차 인용 |
| 9 | MD3 state layer focus·pressed 값 | screen §6.3 | 문서(10%) vs 토큰(12%) 드리프트 명시 |
| 10 | "A계열 인쇄물에 √2 타입 비율" 명제 | foundations §3.2 | 구성 사실은 검증, 결론 명제는 `[추론]` |
| 11 | Bringhurst ↔ Butterick 행장 불일치 | foundations §3.7 | 양측 병기 |
## 7.3 자체 정의 항목
원 시스템에 **대응 개념이 없어 새로 정의한 항목**이다.
| # | 항목 | 위치 |
| :-: | :--- | :--- |
| 1 | GRADE 척도 및 매직 넘버 40/55/70 | foundations §2.1 |
| 2 | em 기반 measure 재정의 (한글) | foundations §3.7 |
| 3 | 한글 글자면 비율 정규화 | foundations §3.10 |
| 4 | 상태색 4종 재선정 (적록 축 회피) | foundations §2.7 |
| 5 | 범주형 GRADE 사다리 | foundations §2.10 |
| 6 | 한국어 가독성 지표 | brand §5.8 |
| 7 | 한국어 동사 판별표 | brand §5.6 |
| 8 | 한글 sans 채택 근거 | brand §4.2 TF-5 |
| 9 | **GRADE 시프트 상태 표현** | screen §6.2 |
| 10 | 투사 각크기 기준 최소 크기 | presentation §3.2 |
---
# 8. 검증 체크리스트
## 8.1 모듈 등록 전 — 구조 검증
| # | 항목 | 필수 |
| :-: | :--- | :-: |
| 1 | 스키마 필수 필드 전부 충족 (§2.1) | ★ |
| 2 | `depends_on`에 상위 버전 기록 (MS-1) | ★ |
| 3 | `component_count`·`variant_count` 정량 명시 (MS-2) | ★ |
| 4 | `overrides_strict`에 **완화 항목 0건** (MS-3) | ★ |
| 5 | 겸용 선언 시 엄격한 쪽 적용 확인 (MS-4) | ★ |
| 6 | 전 텍스트 슬롯에 예산 부여 (MS-5) | ★ |
| 7 | 패턴 `split`이 허용 목록 내 (PT-1) | ★ |
| 8 | 패턴별 `conclusion_zone` 정확히 1개 (PT-2) | ★ |
| 9 | 존 폭 합계 정합 (PT-3) | ★ |
| 10 | 선별 컴포넌트가 전부 카탈로그 내 (MD-3) | ★ |
| 11 | 미사용 컴포넌트 0건 (SL-2) | ★ |
| 12 | 역할 중복 컴포넌트 0건 (SL-3) | ★ |
## 8.2 산출물 검증 — 계층별 승계
| 계층 | 참조 | 항목 수 |
| :--- | :--- | :-: |
| Layer 1 자동 | `design.foundations.md §8.1` | F1~F9 (9) |
| Layer 1 육안 | `design.foundations.md §8.2` | V1~V7 (7) |
| 매체 자동 (print) | `design.medium.print.md §11.1` | P1~P16 (16) |
| 매체 육안 (print) | `design.medium.print.md §11.2` | Q1~Q10 (10) |
| 매체 자동 (presentation) | `design.medium.presentation.md §10.1` | S1~S18 (18) |
| 매체 육안 (presentation) | `design.medium.presentation.md §10.2` | R1~R8 (8) |
| 매체 자동 (screen) | `design.medium.screen.md §13.1` | W1~W18 (18) |
| 매체 수동 (screen) | `design.medium.screen.md §13.2` | M1~M10 (10) |
| 컴포넌트 | `design.components.md §6.2` | 14 |
| **모듈** | **본 절 §8.1 · §8.3** | **12 + 10** |
## 8.3 모듈 고유 검증
| # | 항목 | 판정 | 필수 |
| :-: | :--- | :--- | :-: |
| 1 | **분량 예산 준수** | 전 슬롯이 절대 최대값 이하 | ★ |
| 2 | **잘림 0건** | truncation·overflow 0건 (BG-4) | ★ |
| 3 | **패턴 사용률** | 정의된 패턴이 전부 사용됨 | ★ |
| 4 | **콘텐츠 유형 매핑** | 전 콘텐츠가 패턴에 매핑됨 (PT-4) | ★ |
| 5 | **규칙 완화 0건** | `overrides_strict` 위반 0건 (MD-4) | ★ |
| 6 | **암묵 결정 0건** | 문서화되지 않은 결정 0건 (MD-5) | ★ |
| 7 | **면책 문구 수록** | DC-2·DC-3 (배포 문서) | ★ |
| 8 | **인용 금지 항목 미사용** | §6 목록 0건 (CT-1) | ★ |
| 9 | **미검증 항목 표기** | `[미검증]`·`[추론]`·`[자체 정의]` 태그 부여 (CT-3) | ★ |
| 10 | **검수 기록** | 검수자·일자·판정 기록 (QG-3·QG-5) | ★ |
## 8.4 검증 총괄
| 구분 | 자동 | 육안·수동 | 합계 |
| :--- | :-: | :-: | :-: |
| Layer 1 | 9 | 7 | 16 |
| 매체 (해당 1종) | 16~18 | 8~10 | 24~28 |
| 컴포넌트 | — | 14 | 14 |
| 모듈 | 12 | 10 | 22 |
| **합계 (모듈 1건 기준)** | **37~39** | **39~41** | **76~80** |
> **자동:육안 비율이 대략 1:1이다.** GDS 인용("자동 도구로 발견되는 문제는 전체의 약 30%")을 고려하면 이 비율은 오히려 자동 쪽에 후한 편이며, 육안 검수를 생략하면 대부분의 문제가 그대로 배포된다. [출처: design.benchmark, M22]
---
## 근거 출처 요약
본 파일이 인용한 벤치마킹 항목: **T25 · T48 · T49 · M22 · M23 · §12 · §18 (전 41항)**
전문: `RAG/design.benchmark_2026-07-28_v0.1.0.md`
**본 파일의 설계 특징**
1. **모듈은 규칙을 완화할 수 없다 (MD-4)** — 특수 사정이 있으면 규칙 자체를 고치거나 상위 계층에 예외를 등재한다. "이 문서는 특수하니까"를 구조적으로 차단한다
2. **드리프트를 기본 실패 모드로 취급 (§5.7)** — 조사 대상 8개 시스템 중 5개, 선행 SAMAN 시스템에서도 확인된 실패다. SSOT 우선순위와 빌드 게이트로 방어한다
3. **인용 금지 목록 (§6)** — 조사에서 실재하지 않는 것으로 판명된 12항을 명문화했다. "Apple HIG 8pt 그리드"처럼 업계에서 널리 오인용되는 항목이 포함된다
4. **한계·미검증·자체정의를 전량 공개 (§7)** — 미검증 11항·자체정의 10항을 숨기지 않고 목록화했다. 사용자가 위험을 인지하고 판단할 수 있어야 한다
RAG/design system_v0.1.1/design.tokens.json
+623
View File
@@ -0,0 +1,623 @@
{
"_about": "Prism Design System — canonical machine-readable tokens (SSOT). On any conflict with the .md documents, THIS FILE WINS (Design.md §1.4). Agents parse this directly. Human-readable summaries live in design.foundations.md and design.medium.*.md.",
"_drift_policy": "문서 표의 수치와 본 파일 값의 정합 검증은 빌드 게이트다 (foundations F9 / modules DR-2). 문서에 값을 옮겨 적을 때는 본 파일에서 생성한다 — 손으로 옮기지 않는다.",
"meta": {
"system": "Prism Design System",
"version": "0.1.1",
"date": "2026-07-29",
"file": "design.tokens.json",
"token_prefix": "prism",
"namespace_pattern": "prism.{ref|sys|comp}.{category}.{name}[.{modifier}]",
"layers": {
"0": "brand — 브랜드 교체 슬롯",
"1": "foundation — 매체·브랜드 불변, 무단위 상대 정의",
"2": "medium — 매체별 절대값 바인딩",
"3": "module — 개별 케이스 (본 파일 밖)"
},
"active_brand": "saman",
"mediums": ["print", "presentation", "screen"]
},
"brand": {
"saman": {
"id": "saman",
"name": "SAMAN (삼안)",
"philosophy": "처음 보지만 익숙하고, 계속 봐도 새로운 디자인",
"philosophy_en": "Familiar at first sight, new every time you look.",
"mission": "기술로 사람과 자연이 함께하는 세상",
"philosophy_operational": {
"familiarity": { "definition": "낯선 정보의 인지 저항 최소화. 안정적 비례·정렬선·반복 구조로 예측 가능성을 만든다", "rules": "PF-1~PF-6" },
"durability": { "definition": "익숙함이 지루함이 되지 않도록 제어. 한 화면에 전부 싣지 않고 레이어드 디테일을 남긴다", "rules": "PD-1~PD-4" }
},
"axes": [
{ "id": "nature", "label_ko": "자연", "label_en": "Nature", "design_role": "base", "color_ref": "green", "usage": "제목·구조선·헤더 면·아이콘·강조 면", "economy": null },
{ "id": "technology", "label_ko": "기술", "label_en": "Technology", "design_role": "accent", "color_ref": "orange", "usage": "아이브로 틱·귀결 커넥터·원칙 마커·단일 강조어", "economy": "단위 화면당 최대 2개 국소 강조" },
{ "id": "people", "label_ko": "사람", "label_en": "People", "design_role": "ground", "color_ref": "brown", "usage": "본문·부제·헤어라인·라벨·테두리", "economy": null }
],
"type": {
"family": {
"primary": "Pretendard",
"stack": "Pretendard, -apple-system, BlinkMacSystemFont, \"Noto Sans KR\", \"Apple SD Gothic Neo\", \"Malgun Gothic\", sans-serif",
"embed": "assets/fonts/PretendardVariable.ttf"
},
"weights": { "regular": 400, "medium": 500, "bold": 700 },
"features": { "tabular_figures": true, "variable": true },
"normalization": { "Pretendard": 1.000, "_note": "폴백 서체 계수는 실측 후 등재 (foundations NF-2). 미등재 서체는 사용 금지 (NF-3)." }
},
"voice": {
"stance": "단정적·원칙적·3인칭. 원칙은 원칙으로 못 박는다",
"distance": "전문가 대 전문가. '여러분'·'우리'로 거리를 좁히지 않는다",
"register": "규정문체(평서 종결). 어미 4종만 사용",
"restraint": "과장·감탄·마케팅 어휘 금지. 확신하되 자랑하지 않는다",
"endings": { "obligation": "~한다", "discretion": "~할 수 있다", "recommendation": "~를 권장한다", "prohibition": "~하지 않는다" }
},
"icon": {
"grid": 64, "stroke": 4, "linecap": "round", "linejoin": "round", "fill": "none",
"color_on_light": "green", "color_on_dark": "white", "set_policy": "bespoke",
"catalog_svg": ["view", "verify", "barrier", "network"],
"catalog_raster": ["plan", "design", "construct", "complete", "operate", "section", "analysis", "ground", "cde"],
"governance": "신규 아이콘은 제안 → 승인 대기 → 등재 → 중복 검사. 승인 없이 임의 생성 금지"
},
"logo": {
"master": "assets/saman-logo.png",
"on_light": "assets/saman-logo.png",
"on_dark": "assets/saman-logo-on-dark.png",
"mark_only": "assets/saman-mark.png",
"clear_space": "마크 높이의 1.0배 이상"
},
"forbidden": [
"오렌지 본문 텍스트 (라이트 배경) — ΔG 43 < 55",
"다크 배경 위 그린 텍스트 — ΔG 26, 실측 2.13:1",
"순백(#FFFFFF) 전면 배경",
"악센트 3개 이상 (단위 화면당)",
"이모지",
"생성 이미지에 텍스트·로고 굽기",
"토큰 외 임의 색·치수 하드코딩",
"그라디언트 배경",
"방향어 참조 ('아래 표', '앞서')"
]
}
},
"ref": {
"_note": "Layer 0이 공급한 원시값. 컨텍스트 무관. Layer 2·3에서 직접 참조 금지 (TN-2).",
"color": {
"green": { "name": "Deep Forest Green", "hex": "#1F524B", "rgb": [31, 82, 75], "grade": 69, "axis": "nature", "role": "base" },
"orange": { "name": "Tech Rust Orange", "hex": "#D05C26", "rgb": [208, 92, 38], "grade": 47, "axis": "technology", "role": "accent" },
"brown": { "name": "Human Earth Brown", "hex": "#474235", "rgb": [71, 66, 53], "grade": 72, "axis": "people", "role": "ground" },
"sand": { "name": "Sand White", "hex": "#F4F3F0", "rgb": [244, 243, 240], "grade": 4, "axis": null, "role": "bg_light" },
"obsidian": { "name": "Obsidian Black", "hex": "#111111", "rgb": [17, 17, 17], "grade": 95, "axis": null, "role": "bg_dark" },
"subtle": { "name": "Light Gray", "hex": "#D3D3D3", "rgb": [211, 211, 211], "grade": 15, "axis": null, "role": "subtle",
"_correction": "선행 SAMAN tokens.json은 hex '#474235' / rgb [211,211,211] 불일치 상태였음. design.md §6.1 표기인 #D3D3D3을 정본으로 확정." },
"white": { "name": "Pure White", "hex": "#FFFFFF", "rgb": [255, 255, 255], "grade": 0, "axis": null, "role": "on_dark" }
},
"status_color": {
"do": { "on": "#005A4E", "on_grade": 66, "container": "#DCEAE6", "container_grade": 8, "symbol": "✓", "label": "권장", "dark": { "on": "#DCEAE6", "container": "#005A4E", "measured": 6.59 } },
"dont": { "on": "#8F2A11", "on_grade": 67, "container": "#F6DFDA", "container_grade": 9, "symbol": "✕", "label": "금지", "dark": { "on": "#F6DFDA", "container": "#8F2A11", "measured": 6.58 } },
"caution": { "on": "#6B4A00", "on_grade": 66, "container": "#F5E7CC", "container_grade": 8, "symbol": "▲", "label": "주의", "dark": { "on": "#F5E7CC", "container": "#6B4A00", "measured": 6.60 } },
"tip": { "on": "#0A4E86", "on_grade": 68, "container": "#DDE8F3", "container_grade": 9, "symbol": "▣", "label": "참고", "dark": { "on": "#DDE8F3", "container": "#0A4E86", "measured": 6.91 } },
"_note": "GRADE를 66~68로 의도적 균일화. 흑백 출력 시 색은 구분되지 않으나 기호로 구분되므로 정보 손실 0 (foundations ST-2). Polaris 원색(적록 축)은 색각이상 취약으로 기각 (M13). 다크 테마는 container↔on 반전 페어를 사용한다 — WCAG 대비는 교환 대칭이므로 실측값 동일 (v0.1.1, TM-S5 해소)."
},
"dataviz": {
"categorical": [
{ "id": "cat-1", "hex": "#C08A2E", "grade": 39, "name": "Ochre", "order": 1 },
{ "id": "cat-2", "hex": "#6E8F3C", "grade": 45, "name": "Moss", "order": 2 },
{ "id": "cat-3", "hex": "#3C6E9F", "grade": 55, "name": "Steel Blue", "order": 3 },
{ "id": "cat-4", "hex": "#8C3B14", "grade": 64, "name": "Burnt Sienna", "order": 4 },
{ "id": "cat-5", "hex": "#1B4A43", "grade": 72, "name": "Deep Teal", "order": 5 },
{ "id": "cat-6", "hex": "#5E4370", "grade": 67, "name": "Plum", "order": "reserve" }
],
"max_series": 5,
"grade_ladder": [39, 45, 55, 64, 72],
"_note": "면(fill) 전용. 라벨은 sys.text.* 토큰 사용 (DV-2). 계열 3개 이상이면 패턴·직접 라벨 병기 필수 (DV-3). 인쇄 전 CMYK 색역 이탈 검증 필수 (DV-4)."
}
},
"foundation": {
"_note": "Layer 1. 절대 치수 없음. 비율·단계·관계만.",
"grade": {
"formula": "GRADE = round(100 - Lstar)",
"range": [0, 100],
"anchors": { "white": 0, "black": 100 },
"magic_numbers": {
"large_text": { "deltaG": 40, "guaranteed_min_ratio": 3.17, "exact_boundary": 39 },
"body_text": { "deltaG": 55, "guaranteed_min_ratio": 5.37, "exact_boundary": 51 },
"aaa": { "deltaG": 70, "guaranteed_min_ratio": 9.15, "exact_boundary": 63 },
"text_forbidden_below": 40
},
"ladder_step_recommended": [10, 15],
"_note": "보장값은 전 base 등급에 대한 최악값(흰 배경 위). 실측은 항상 이 이상."
},
"typography": {
"ratio": 1.125,
"ratio_name": "Major Second",
"format_transition_ratio": 1.41421356,
"format_transition_note": "판형 간 전환은 base에 √2를 곱한다 (A4→A3→A2→A1). 스케일 인덱스는 이동하지 않는다.",
"rounding": { "convention": "half-up", "print": "0.1pt", "presentation": "1px", "screen": "1px",
"_note": "반올림 후 값이 아니라 생성식이 정본. 파생 시 항상 식에서 재계산한다. half-up 명시는 언어별 기본 반올림(예: Python banker's rounding) 차이로 인한 드리프트를 막기 위함이다." },
"scale": {
"caption": { "step": -2, "multiplier": 0.7901, "lineHeight": 1.55, "weight": 500, "tracking": 0 },
"body-sm": { "step": -1, "multiplier": 0.8889, "lineHeight": 1.70, "weight": 400, "tracking": 0 },
"body": { "step": 0, "multiplier": 1.0000, "lineHeight": 1.70, "weight": 400, "tracking": 0 },
"body-lg": { "step": 1, "multiplier": 1.1250, "lineHeight": 1.70, "weight": 400, "tracking": 0 },
"title-sm": { "step": 2, "multiplier": 1.2656, "lineHeight": 1.50, "weight": 500, "tracking": 0 },
"title": { "step": 4, "multiplier": 1.6018, "lineHeight": 1.50, "weight": 700, "tracking": 0 },
"title-lg": { "step": 6, "multiplier": 2.0273, "lineHeight": 1.50, "weight": 700, "tracking": 0 },
"display": { "step": 9, "multiplier": 2.8865, "lineHeight": 1.25, "weight": 400, "tracking": "conditional" },
"display-lg": { "step": 12, "multiplier": 4.1099, "lineHeight": 1.25, "weight": 400, "tracking": "conditional" }
},
"lineHeight_note": "한글(CJK) 기준. 라틴 대비 body +0.2, heading +0.2 상향 (Spectrum CJK 승수 T9).",
"tone_modifiers": {
"label": { "weight": 500, "tracking": "+0.12em" },
"eyebrow":{ "weight": 500, "tracking": "+0.18em" },
"metric": { "weight": 700, "tracking": 0, "tabular": true },
"quiet": { "weight": 400, "tracking": 0, "color": "sys.text.on-subtle" }
},
"tracking_rules": {
"negative_min_size_px_equiv": 60,
"negative_max": "-0.02em",
"all_caps_body": "forbidden"
},
"measure_em": {
"single_column": { "min": 22, "max": 38, "ideal": 33 },
"multi_column": { "min": 20, "max": 25 },
"extended_max": 45,
"char_width_coefficient": { "hangul": 1.0, "latin": 0.5 },
"_note": "글자 수가 아니라 em 단위 행 길이로 정의. 한글 전각/라틴 반각 차이를 흡수한다 (자체 정의, M10)."
},
"hierarchy_rules": {
"min_step_gap_between_heading_levels": 2,
"max_heading_to_body_ratio": 2.0,
"truncation": "forbidden"
}
},
"space": {
"_naming": "space.{N} where N = baseUnit 대비 백분율",
"scale": {
"025": 0.25, "050": 0.5, "100": 1, "150": 1.5,
"200": 2, "300": 3, "400": 4, "600": 6, "800": 8
},
"aliases": {
"inline-gap": "050", "text-block": "100", "paragraph": "150",
"card-padding": "200", "block-gap": "300", "zone-gap": "400", "section-gap": "600"
},
"alias_depth_max": 1,
"snap_unit": "050",
"baseline_rule": {
"applies_to": ["print"],
"rule": "body lineHeight (절대값) === space.100",
"_note": "foundations v0.1.1 — 다단 연속 본문 매체에만 적용. presentation·screen은 space.050 스냅으로 갈음."
},
"whitespace_ratio": { "min": 0.40, "max": 0.55, "bottom_empty_max": 0.25 }
},
"radius": { "none": 0, "sm": 0.5, "md": 1, "lg": 1.5, "pill": 9999 },
"stroke": { "hairline": 1, "regular": 2, "bold": 3, "icon": 4, "connector": 5 },
"grid": {
"columns_allowed": [12, 8, 6, 4, 3],
"default_columns": 12,
"derivation": "2x — 판형·뷰포트가 작아지면 컬럼을 2로 나눈다 (12→6→3 또는 12→8→4)",
"integrity_formula": "cols * colW + (cols-1) * gutter === contentW",
"splits_allowed": ["12", "6:6", "8:4", "4:8", "4:4:4", "3:3:6", "3:3:3:3"],
"aspect_ratios_allowed": ["1:1", "2:1", "3:2", "2:3", "4:3", "16:9"],
"alignment_scope": "top-level containers only"
},
"surface": {
"levels_max": 3,
"adjacent_deltaG_min": 5,
"elevation_semantic": ["sunken", "default", "raised", "overlay"],
"_note": "표현 방식은 매체가 정한다 (mediums.*.elevation). 토큰명은 4레벨 모두 동일."
},
"emphasis": {
"default": 0,
"emphasis": 12,
"prominent": 24,
"_unit": "deltaG shift",
"subdued": "sys.text.on-subtle (ΔG 40~54 구간). 불투명도 사용 금지."
},
"contrast_targets": {
"print": { "body": 70, "large": 55, "nontext": 40, "level": "AAA" },
"presentation": { "body": 70, "large": 55, "nontext": 40, "level": "AAA" },
"screen": { "body": 55, "large": 40, "nontext": 40, "level": "AA", "recommended": 70 }
}
},
"sys": {
"_note": "의미역할. 매체 프로파일이 값을 바인딩하는 유일한 지점. Layer 2·3은 여기만 참조한다.",
"pair": {
"surface-base": {
"light": { "container": "ref.color.sand", "on": "ref.color.brown", "on-subtle": "ref.color.brown", "border": "ref.color.brown", "deltaG": 68, "measured": 9.02 },
"dark": { "container": "ref.color.obsidian", "on": "ref.color.sand", "on-subtle": "ref.color.subtle","border": "ref.color.subtle", "deltaG": 91, "measured": 17.02 }
},
"surface-raised": {
"light": { "container": "ref.color.white", "on": "ref.color.brown", "border": "ref.color.brown", "deltaG": 72, "measured": 10.01 },
"dark": { "container": "ref.color.obsidian", "on": "ref.color.sand", "border": "ref.color.subtle","deltaG": 91, "measured": 17.02 }
},
"surface-emphasis": {
"light": { "container": "ref.color.green", "on": "ref.color.white", "on-subtle": "ref.color.subtle", "deltaG": 69, "measured": 8.87 },
"dark": { "container": "ref.color.green", "on": "ref.color.white", "on-subtle": "ref.color.subtle", "deltaG": 69, "measured": 8.87 }
},
"surface-accent": {
"light": { "container": "ref.color.orange", "on": "ref.color.white", "deltaG": 47, "measured": 4.01, "restriction": "large_text_only" },
"dark": { "container": "ref.color.orange", "on": "ref.color.white", "deltaG": 47, "measured": 4.01, "restriction": "large_text_only" }
}
},
"text": {
"body": { "light": "ref.color.brown", "dark": "ref.color.sand" },
"heading": { "light": "ref.color.green", "dark": "ref.color.sand" },
"on-subtle": { "light": "ref.color.brown", "dark": "ref.color.subtle" },
"accent": { "light": "ref.color.orange", "dark": "ref.color.orange", "restriction": "large_text_only" }
},
"border": {
"default": { "light": "ref.color.brown", "dark": "ref.color.subtle" },
"subtle": { "light": "ref.color.brown", "dark": "ref.color.subtle", "opacity_screen_only": 0.2 },
"strong": { "light": "ref.color.green", "dark": "ref.color.sand" }
},
"bg": {
"canvas": { "light": "ref.color.sand", "dark": "ref.color.obsidian" },
"card": { "light": "ref.color.white", "dark": "ref.color.obsidian" }
},
"status": {
"do": "ref.status_color.do", "dont": "ref.status_color.dont",
"caution": "ref.status_color.caution", "tip": "ref.status_color.tip"
}
},
"contrast": {
"_method": "WCAG 2.x relative luminance. 전 쌍 프로그램 재계산 검증 완료 (2026-07-28).",
"_rule": "ΔG가 임계 미달이나 실측 통과하는 쌍은 본 목록에 등록되어야만 사용 가능 (CG-2). 암묵 허용 금지.",
"pairs": [
{ "fg": "brown", "bg": "sand", "deltaG": 68, "measured": 9.02, "pass": "AAA", "usage": "본문 기본" },
{ "fg": "green", "bg": "sand", "deltaG": 65, "measured": 8.00, "pass": "AAA", "usage": "제목·구조" },
{ "fg": "brown", "bg": "white", "deltaG": 72, "measured": 10.01, "pass": "AAA", "usage": "카드 위 본문" },
{ "fg": "green", "bg": "white", "deltaG": 69, "measured": 8.87, "pass": "AAA", "usage": "카드 위 제목", "_correction": "선행 시스템 8.93 표기 → 실측 8.87로 정정" },
{ "fg": "white", "bg": "green", "deltaG": 69, "measured": 8.87, "pass": "AAA", "usage": "그린 면 위 텍스트" },
{ "fg": "sand", "bg": "green", "deltaG": 65, "measured": 8.00, "pass": "AAA", "usage": "그린 면 위 텍스트" },
{ "fg": "subtle", "bg": "green", "deltaG": 54, "measured": 5.93, "pass": "AA", "usage": "그린 면 위 보조 텍스트", "_registered": "ΔG 54 < 55 임계 미달, 실측 통과로 명시 등록 (CG-2)" },
{ "fg": "white", "bg": "brown", "deltaG": 72, "measured": 10.01, "pass": "AAA", "usage": "브라운 면 위 텍스트" },
{ "fg": "sand", "bg": "obsidian", "deltaG": 91, "measured": 17.02, "pass": "AAA", "usage": "다크 면 위 텍스트" },
{ "fg": "subtle", "bg": "obsidian", "deltaG": 80, "measured": 12.61, "pass": "AAA", "usage": "다크 면 위 보조 텍스트" },
{ "fg": "orange", "bg": "obsidian", "deltaG": 48, "measured": 4.71, "pass": "AA", "usage": "다크 면 위 악센트" },
{ "fg": "orange", "bg": "sand", "deltaG": 43, "measured": 3.61, "pass": "LARGE_ONLY", "usage": "대형 악센트 전용" },
{ "fg": "white", "bg": "orange", "deltaG": 47, "measured": 4.01, "pass": "LARGE_ONLY", "usage": "오렌지 면 위 텍스트" },
{ "fg": "orange", "bg": "white", "deltaG": 47, "measured": 4.01, "pass": "LARGE_ONLY", "usage": "흰 카드 위 대형 악센트 전용", "_registered": "v0.1.1 신설 (진단 G5)" },
{ "fg": "green", "bg": "obsidian", "deltaG": 26, "measured": 2.13, "pass": "FAIL", "usage": "금지 — 그린은 다크 위에서 면·도형으로만" }
],
"status_pairs": [
{ "id": "do", "deltaG": 58, "measured_on_container": 6.59, "measured_on_sand": 7.36 },
{ "id": "dont", "deltaG": 58, "measured_on_container": 6.58, "measured_on_sand": 7.55 },
{ "id": "caution", "deltaG": 58, "measured_on_container": 6.60, "measured_on_sand": 7.27 },
{ "id": "tip", "deltaG": 59, "measured_on_container": 6.91, "measured_on_sand": 7.73 }
],
"forbidden": [
{ "fg": "green", "bg": "obsidian", "reason": "ΔG 26 < 40, 실측 2.13:1 — 텍스트 사용 절대 금지" },
{ "fg": "orange", "bg": "sand", "context": "body_text", "reason": "ΔG 43 < 55 — 본문 사용 금지, 대형 전용" }
]
},
"mediums": {
"print": {
"unit_primary": "mm",
"unit_type": "pt",
"pt_to_mm": 0.352778,
"resolution": 300,
"type_base": "10pt",
"space_base_unit": "6mm",
"baseline_grid": "6mm",
"baseline_check": { "body_lineheight_pt": 17.0, "mm": 5.9972, "target_mm": 6.0, "error_mm": -0.0028 },
"contrast_target": "AAA",
"elevation": { "sunken": "tone", "default": "none", "raised": "border", "overlay": "border+isolation" },
"shadow": "forbidden",
"alpha": "forbidden",
"type_scale": {
"caption": "7.9pt", "body-sm": "8.9pt", "body": "10.0pt", "body-lg": "11.3pt",
"title-sm": "12.7pt", "title": "16.0pt", "title-lg": "20.3pt",
"display": "28.9pt", "display-lg": "41.1pt"
},
"type_min": { "body": "9.0pt", "caption": "7.5pt", "absolute": "7.0pt", "reverse": "10.0pt" },
"type_scale_dual_medium": {
"_note": "투사 겸용 시 base를 3 스텝 상향 (10pt → 14.2pt)",
"body": "14.2pt", "caption": "11.3pt", "body-sm": "12.7pt", "title-sm": "18.0pt", "title": "22.8pt"
},
"space": { "025": "1.5mm", "050": "3mm", "100": "6mm", "150": "9mm", "200": "12mm", "300": "18mm", "400": "24mm", "600": "36mm", "800": "48mm" },
"radius": { "none": 0, "sm": "1.5mm", "md": "3mm", "lg": "4.5mm" },
"stroke": { "hairline": "0.20mm", "regular": "0.40mm", "bold": "0.60mm", "icon": "0.80mm", "connector": "1.00mm" },
"stroke_min": { "normal": "0.15mm", "reverse": "0.25mm" },
"drafting_line_weights": {
"iso_series_mm": [0.13, 0.18, 0.25, 0.35, 0.5, 0.7, 1.0, 1.4, 2.0],
"base_by_format": { "A4": 0.35, "A3": 0.35, "A2": 0.35, "A1": 0.5, "A0": 0.7 },
"outline": "0.35mm", "hidden_center_dim": "0.18mm", "section": "0.5mm"
},
"formats": {
"A3-landscape": {
"size_mm": [420, 297], "margin_lr": 24, "margin_top": 21, "margin_bottom": 24,
"content_mm": [372, 252], "columns": 12, "gutter": 6, "column_w": 25.5,
"baselines": 42, "type_area_ratio": 0.752,
"integrity": "12*25.5 + 11*6 = 372",
"zones": { "12col": 372, "8col": 246, "6col": 183, "4col": 120, "3col": 88.5 },
"measure_em": { "1col_12": 105.4, "2col_6": 51.9, "3col_4": 34.0, "4col_3": 25.1 },
"recommended_columns": [3, 4]
},
"A3-portrait": {
"size_mm": [297, 420], "margin_lr": 24, "margin_top": 21, "margin_bottom": 27,
"content_mm": [249, 372], "columns": 12, "gutter": 3, "column_w": 18,
"baselines": 62, "type_area_ratio": 0.741,
"integrity": "12*18 + 11*3 = 249",
"measure_em": { "2col_6": 34.9, "3col_4": 23.0 },
"recommended_columns": [2, 3]
},
"A4-portrait": {
"size_mm": [210, 297], "margin_lr": 12, "margin_top": 21, "margin_bottom": 24,
"content_mm": [186, 252], "columns": 12, "gutter": 6, "column_w": 10,
"baselines": 42, "type_area_ratio": 0.752,
"integrity": "12*10 + 11*6 = 186",
"measure_em": { "1col_12": 52.7, "2col_6": 25.5 },
"recommended_columns": [2],
"_office_printer_variant": { "margin_lr": 15, "content_w": 180, "column_w": 9.5 }
},
"A4-portrait-single": {
"size_mm": [210, 297], "margin_lr": 39, "margin_top": 21, "margin_bottom": 24,
"content_mm": [132, 252], "columns": 12, "gutter": 3, "column_w": 8.25,
"baselines": 42, "type_area_ratio": 0.533,
"measure_em": { "1col_12": 37.4 }, "recommended_columns": [1]
},
"A4-landscape": {
"size_mm": [297, 210], "margin_lr": 24, "margin_top": 15, "margin_bottom": 21,
"content_mm": [249, 174], "columns": 12, "gutter": 3, "column_w": 18,
"baselines": 29, "type_area_ratio": 0.695,
"measure_em": { "2col_6": 34.9, "3col_4": 23.0 }, "recommended_columns": [2, 3]
}
},
"cmyk": {
"body_text": "100% K only",
"rich_black": "C60 M40 Y40 K100",
"rich_black_tac": 240,
"min_tint_percent": 10,
"profile_default": "FOGRA51 / PSO Coated v3 (TAC 300%)",
"fogra39_tac": 330,
"korean_market_profile": null,
"_note": "브랜드 색의 CMYK 등가값은 인쇄소가 목표 프로파일로 산출한 값을 정본으로 한다 (CV-1). 등록 전 산출물 확정 금지 (CV-3)."
},
"handbook": {
"pagination": "chapter-relative",
"pagination_format": "<chapter>-<page>",
"front_matter": "roman-lowercase",
"appendix_format": "부록<X>-<page>",
"numbering_standard": "ISO 2145",
"numbering_max_depth": 4,
"index_entries_ratio": 2.0,
"index_refs_per_page": [5, 6],
"index_page_ratio": 0.05,
"index_subentry_threshold": 6,
"cross_ref_format": "(→ N.N절, p.C-P)"
}
},
"presentation": {
"unit_primary": "px",
"canvas": [1920, 1080],
"aspect_ratio": 1.7778,
"px_to_emu": 6350,
"px_to_pt": 0.5,
"px_to_inch": 0.006944444,
"emu_canvas": [12192000, 6858000],
"pptx_default_widescreen_match": true,
"type_base": "24px",
"space_base_unit": "12px",
"baseline_grid": null,
"contrast_target": "AAA",
"elevation": { "sunken": "tone", "default": "none", "raised": "border", "overlay": "border+isolation" },
"shadow": "forbidden",
"alpha": "forbidden",
"type_scale": {
"caption": 19, "body-sm": 21, "body": 24, "body-lg": 27,
"title-sm": 30, "title": 38, "title-lg": 49, "display": 69, "display-lg": 99
},
"type_scale_pt": {
"caption": 9.5, "body-sm": 10.5, "body": 12.0, "body-lg": 13.5,
"title-sm": 15.0, "title": 19.0, "title-lg": 24.5, "display": 34.5, "display-lg": 49.5
},
"type_min": { "body_divisor": 45, "absolute_divisor": 57, "body_px": 24, "absolute_px": 19 },
"tracking": { "display-lg": "-0.02em", "display": "-0.015em", "_below": 0 },
"space": { "025": 3, "050": 6, "100": 12, "150": 18, "200": 24, "300": 36, "400": 48, "600": 72, "800": 96 },
"radius": { "none": 0, "sm": 6, "md": 12, "lg": 18 },
"stroke": { "hairline": 2, "regular": 3, "bold": 4, "icon": 5, "connector": 7 },
"stroke_min": 2,
"grid": {
"margin": 48, "gutter": 24, "columns": 12, "column_w": 130, "content_w": 1824,
"integrity": "12*130 + 11*24 = 1824",
"column_x": [48, 202, 356, 510, 664, 818, 972, 1126, 1280, 1434, 1588, 1742],
"x_formula": "X(i) = 48 + (i-1)*154",
"zones": { "12col": 1824, "8col": 1208, "6col": 900, "4col": 592, "3col": 438 },
"measure_em": { "12col": 76.0, "8col": 50.3, "6col": 37.5, "4col": 24.7, "3col": 18.3 },
"body_max_cols": 6
},
"vertical": {
"margin_top": 48, "header_top": 48, "header_bottom": 192,
"content_top": 216, "content_bottom": 960,
"footer_top": 984, "footer_bottom": 1032, "margin_bottom": 48,
"content_band_h": 744, "grid_unit": 12
},
"projection": {
"XGA": { "res": [1024, 768], "effective": [1024, 576], "scale": 0.533 },
"WXGA": { "res": [1280, 800], "effective": [1280, 720], "scale": 0.667 },
"FHD": { "res": [1920, 1080], "effective": [1920, 1080], "scale": 1.0 },
"WUXGA": { "res": [1920, 1200], "effective": [1920, 1080], "scale": 1.0 },
"UHD": { "res": [3840, 2160], "effective": [3840, 2160], "scale": 2.0 }
},
"highlight_slide_max_ratio": 0.10
},
"screen": {
"variants": ["web", "mobile"],
"mobile_breakpoints": ["xs", "sm", "md"],
"unit_primary": "rem",
"unit_mobile": "dp",
"root_font_size": 16,
"type_base": "1rem",
"space_base_unit": 8,
"baseline_grid": null,
"contrast_target": "AA",
"contrast_recommended": "AAA",
"elevation": { "sunken": "tone+inset-border", "default": "none", "raised": "border+shadow", "overlay": "shadow", "modal": "shadow+scrim" },
"shadow": "allowed",
"alpha": "allowed",
"runtime_theme": true,
"type_scale_px": {
"caption": 13, "body-sm": 14, "body": 16, "body-lg": 18,
"title-sm": 20, "title": 26, "title-lg": 32, "display": 46, "display-lg": 66
},
"type_scale_rem": {
"caption": 0.8125, "body-sm": 0.875, "body": 1, "body-lg": 1.125,
"title-sm": 1.25, "title": 1.625, "title-lg": 2, "display": 2.875, "display-lg": 4.125
},
"type_responsive": {
"_rule": "xs·sm에서 display 계열 인덱스 -3 이동. body 계열은 불변.",
"xs_sm": { "display-lg": 32, "display": 26 }
},
"measure_max_em": 38,
"space": { "025": 2, "050": 4, "100": 8, "150": 12, "200": 16, "300": 24, "400": 32, "600": 48, "800": 64 },
"radius": { "none": 0, "sm": 4, "md": 8, "lg": 12, "pill": 9999 },
"stroke": { "hairline": 1, "regular": 2, "bold": 3, "icon": 2, "connector": 2 },
"breakpoints": {
"xs": { "min": 0, "max": 599, "columns": 4, "margin": 16, "gutter": 16, "ref_width": 360, "column_w": 70, "integrity": "4*70 + 3*16 = 328" },
"sm": { "min": 600, "max": 903, "columns": 8, "margin": 24, "gutter": 16, "ref_width": 600, "column_w": 55, "integrity": "8*55 + 7*16 = 552" },
"md": { "min": 904, "max": 1239, "columns": 8, "margin": 32, "gutter": 24, "ref_width": 904, "column_w": 84, "integrity": "8*84 + 7*24 = 840" },
"lg": { "min": 1240, "max": 1599, "columns": 12, "margin": 32, "gutter": 24, "ref_width": 1240, "column_w": 76, "integrity": "12*76 + 11*24 = 1176" },
"xl": { "min": 1600, "max": null, "columns": 12, "margin": 24, "gutter": 24, "container": 1440, "column_w": 94, "integrity": "12*94 + 11*24 = 1392" }
},
"interaction": {
"method": "grade-shift",
"grade_shift": { "default": 0, "hover": 4, "focus": 0, "active": 8, "selected": 12 },
"disabled": "sys.text.on-subtle",
"state_layer_fallback": { "hover": 0.08, "focus": 0.10, "active": 0.10, "dragged": 0.16,
"_drift": "MD3 문서 10% vs material-web v0.192 토큰 12% 불일치 (benchmark §18-2). 문서값 채택." },
"hover_on_mobile": false
},
"focus": { "width": 3, "offset": 2, "style": "double-ring", "min_deltaG": 40, "visible_only": true },
"target_size": { "web_min": 44, "web_recommended": 48, "mobile_min": 48, "adjacent_gap_min": 8, "edge_exclusion": 4 },
"z_index": { "base": 0, "raised": 100, "sticky": 200, "dropdown": 300, "scrim": 400, "modal": 500, "popover": 600, "toast": 700, "tooltip": 800 },
"scrim_opacity": 0.32,
"motion": {
"duration": { "instant": 0, "fast": 100, "moderate": 200, "slow": 300, "deliberate": 500 },
"easing": {
"standard": "cubic-bezier(0.2, 0, 0, 1)",
"enter": "cubic-bezier(0, 0, 0, 1)",
"exit": "cubic-bezier(0.3, 0, 1, 1)",
"linear": "linear"
},
"animatable_properties": ["transform", "opacity"],
"reduced_motion_required": true
},
"a11y": { "target_level": "WCAG 2.2 AA", "ci_gate": true, "tools": ["axe", "pa11y", "stylelint"] }
},
"presentation.ultrawide": {
"_note": "M7 (2026-09-29). presentation 변형 — grid·center 외 값은 mediums.presentation 승계. 문서: design.medium.ultrawide.md",
"inherits": "presentation",
"canvas": [3840, 1080],
"aspect_ratio": 3.5556,
"emu_canvas": [24384000, 6858000],
"grid": {
"margin": 48, "gutter": 24, "columns": 24, "column_w": 133, "content_w": 3744,
"integrity": "24*133 + 23*24 = 3744",
"x_formula": "X(i) = 48 + (i-1)*157",
"zones": { "24col": 3744, "16col": 2488, "12col": 1860, "8col": 1232, "6col": 918, "5col": 761, "4col": 604, "3col": 447 },
"measure_em": { "12col": 77.5, "8col": 51.3, "6col": 38.2, "5col": 31.7, "4col": 25.2, "3col": 18.6 },
"body_max_cols": 6,
"text_max_width": 1860,
"splits": ["24", "12:12", "6:6:12", "6:6:6:6", "16:8", "8:16"]
},
"center": { "line": 1920, "gutter": [1908, 1932], "rule": "text-no-cross" }
}
},
"comp": {
"_note": "컴포넌트 속성. 리터럴 금지 — sys/foundation 참조만 (TN-1). 경로 표기는 최상위 블록명부터 전체 경로로 적는다 (sys.* / foundation.* / mediums.<medium>.*) — v0.1.1 정규화.",
"_catalog_count": 25,
"eyebrow": { "type": "caption", "tone": "eyebrow", "color": "sys.text.on-subtle", "tick_color": "sys.text.accent", "label_max_chars": 20 },
"header": { "title_type": "title-lg", "title_max_chars": 40, "title_recommended_chars": 25, "meta_slots": 4, "border_bottom": "sys.border.strong" },
"hero": { "headline_type": "display", "headline_max_chars": 35, "subtitle_type": "body-lg", "subtitle_max_chars": 60, "accent_words_max": 1 },
"rule": { "stroke": "foundation.stroke.hairline", "color": "sys.border.subtle" },
"footer": { "type": "caption", "color": "sys.text.on-subtle" },
"card": { "radius": "foundation.radius.md", "padding": "space.200", "border": "sys.border.subtle", "bg": "sys.bg.card", "title_max_chars": 20, "body_max_chars": 120, "nest_depth_max": 2 },
"stagecard": { "radius": "foundation.radius.md", "padding": "space.200", "name_max_chars": 15, "desc_max_chars": 60, "steps_range": [3, 5], "highlight_max": 1 },
"connector": { "stroke": "foundation.stroke.connector", "color": "sys.border.default", "terminal_color": "sys.text.accent" },
"principle": { "bar_color": "sys.text.accent", "kicker_max_chars": 12, "statement_max_chars": 80, "per_view_max": 1 },
"table": { "header_type": "body-sm", "cell_type": "body-sm", "cell_max_chars": 40, "stripe_deltaG": [5, 9], "empty_cell": "—" },
"stat": { "value_type": "display", "value_tone": "metric", "label_type": "caption", "label_tone": "label", "label_max_chars": 15, "per_zone_max": 3 },
"chartframe": { "title_max_chars": 25, "series_max": 5, "pattern_required_from": 3 },
"specsheet": { "position": "item-tail-fixed", "no_value": "—", "not_applicable": "N/A" },
"directive": { "statement_recommended_chars": [80, 100], "statement_max_chars": 130, "symbol_required": true, "label_max_chars": 6 },
"badge": { "text_max_chars": 6, "variants_max": 4, "form_encoding_required": true },
"scope": { "item_max_chars": 30, "apply_items_max": 4, "exclude_items_max": 3 },
"toc": { "depth_max": 2, "position": "chapter-first-page" },
"stepper": { "steps_range": [3, 7], "states": ["done", "current", "pending"] },
"xref": { "print_format": "(→ N.N절, p.C-P)", "presentation_format": "(→ N.N)" },
"mediaframe": { "caption_max_chars": 60, "aspect_ratios": "foundation.grid.aspect_ratios_allowed" },
"button": { "label_max_chars": 8, "primary_per_view_max": 1, "min_target": "mediums.screen.target_size.web_min" },
"input": { "help_max_chars": 40, "error_max_chars": 60, "placeholder_as_label": false },
"modal": { "scrim": "mediums.screen.scrim_opacity", "focus_trap": true, "nest": false },
"toast": { "min_duration_ms": 5000, "concurrent_max": 1 },
"disclosure": { "print_expanded": true, "state_persisted": true }
},
"rules": {
"forbidden_all_mediums": [
"미정의 토큰 참조",
"comp 계층 리터럴 값",
"ref 직접 참조 (Layer 2·3)",
"산출물 내 HEX·치수 리터럴",
"contrast.pairs 미등록 색 조합",
"ΔG < 40 조합의 텍스트 사용",
"HSL 기반 팔레트 보간",
"색 단독 정보 전달",
"차트 색 면 위 텍스트",
"순백 전면 배경",
"그라디언트 배경",
"악센트 경제 초과",
"텍스트 잘림(truncation) 설계",
"허용 목록 외 그리드 분할",
"허용 목록 외 종횡비"
],
"forbidden_print_presentation": ["그림자(box-shadow) 산출", "알파 색 (사전 평탄화 필수)"],
"forbidden_screen": ["outline: none (대체 없이)", "토큰 외 z-index", "양수 tabindex", "텍스트 색에 알파", "root font-size px 고정"],
"citation_forbidden": [
"Apple HIG '8pt 그리드' (공식 규정 없음)",
"GOV.UK $govuk-print-styles 변수 (존재하지 않음)",
"'GOV.UK는 인쇄 시 헤더/푸터를 숨긴다' (사실 아님)",
"USWDS '이상적 characters-per-line' (문서에 없음)",
"SLDS Anatomy/States/Do-Don't 섹션 (존재하지 않음)",
"Polaris 알파벳순 terminology list (존재하지 않음)",
"Carbon 종횡비 3:4 · 1:2 (공식 목록 미포함)",
"Atlassian 'group/variant/state' 토큰 용어 (공식 용어 아님)",
"Atlassian base/semantic/component 3계층 모델 (공식 문서에 없음)",
"FOGRA39 TAC 350% (오류 — 330%)",
"Polaris voice-and-tone/actionable-language/help-documentation 현행 (2025-01-07 삭제)",
"MD3 '톤 40=3:1 / 50=4.5:1' 일반 규칙 (문서에 없음)"
]
},
"verification": {
"foundation_auto": ["F1 토큰 참조 무결성", "F2 리터럴 검출", "F3 hex↔rgb 정합", "F4 대비 페어 검증", "F5 ΔG 임계 준수", "F6 그리드 정합", "F7 베이스라인 정합", "F8 매체 값셋 완전성", "F9 md↔json 드리프트"],
"counts": {
"foundation": { "auto": 9, "visual": 7 },
"print": { "auto": 16, "visual": 10 },
"presentation": { "auto": 18, "visual": 8 },
"screen": { "auto": 18, "manual": 10 },
"presentation.ultrawide": { "auto_added": 6, "visual_added": 1 },
"components": { "checklist": 14 },
"modules": { "structure": 12, "output": 10 }
}
}
}
RAG/design system_v0.1.1/mobile/module.mobile-tablet.md
+223
View File
@@ -0,0 +1,223 @@
# Prism — M4 모바일·태블릿 앱 실행 명세 (Layer 3)
| 버전 | 수정일 | 수정자 | 주요 변경 내용 | 비고 |
| :--- | :--- | :--- | :--- | :--- |
| v0.1.0 | 2026-07-29 | HMCM | 신규 제정 — 모바일·태블릿 앱 실행 명세. 태블릿(md) 적용 범위 확장(screen v0.1.1)을 반영한 최초 명세, 구조 검증 12항 통과 | `active` 등록 (modules §4.4) |
| 메타 | 값 |
| :--- | :--- |
| 모듈 | **M4 `mobile-tablet`** — 모바일·태블릿 앱 |
| 계층 | Layer 3 (실행 명세 · **자기완결형**) |
| 대상 산출물 | iOS·Android·태블릿 네이티브/하이브리드 앱, 태블릿 현장용 도구 |
| 상위 의존 | `Design.md` 0.1.1 · foundations 0.1.2 · **medium.screen 0.1.1** (mobile 범위 xs·sm·md 확장 반영) · components 0.1.1 · tokens.json 0.1.1 |
| 지배 조건 | **터치 전용** (hover 없음) · OS 테마 연동 필수 · 한 손 조작 도달권 |
```yaml
module:
id: mobile-tablet
name: 모바일·태블릿 앱
version: 0.1.0
status: active
brand: saman
medium: screen
medium_variant: screen.mobile
dual_medium: false
format: responsive # xs(폰 세로) · sm(폰 가로·소형 태블릿) · md(태블릿)
columns: 4 # xs 기준 (sm·md는 8)
type_set: compact
component_count: 18
variant_count: 33
patterns: [m1-list, m2-detail, m3-form, m4-board, m5-settings]
depends_on: { foundations: 0.1.2, medium.screen: 0.1.1, components: 0.1.1 }
```
---
## 1. 적용 조건
| 적용 | 제외 |
| :--- | :--- |
| 폰·태블릿 앱 (네이티브·하이브리드·PWA) | 데스크톱 웹앱 → M3 (`webapp/`) — lg·xl 구간은 M3 소관 |
| 태블릿 현장용 도구 (점검·기록·열람) | 발표 슬라이드 → M2, 인쇄물 → M5 |
**변형 경계**: 하나의 반응형 웹 서비스가 폰~데스크톱을 모두 덮는 경우, xs·sm·md는 본 모듈 규정을, lg·xl은 M3 규정을 따른다. 두 모듈의 토큰·컴포넌트는 동일하므로 충돌은 발생하지 않는다 — 다른 것은 내비게이션 패턴·히트 영역·hover 취급뿐이다.
---
## 2. 브레이크포인트·그리드 (정본 값)
| BP | 범위 (px·dp) | 대상 | 컬럼 | 마진 | 거터 | 기준 컬럼 폭 | 정합 |
| :--- | :--- | :--- | :-: | ---: | ---: | ---: | :--- |
| `xs` | 0–599 | 폰 세로 | **4** | 16 | 16 | 70 | 4×70+3×16=328 ✓ |
| `sm` | 600–903 | 폰 가로·소형 태블릿 | **8** | 24 | 16 | 55 | 8×55+7×16=552 ✓ |
| **`md`** | **904–1239** | **태블릿** (v0.1.1 확장) | **8** | 32 | 24 | 84 | 8×84+7×24=840 ✓ |
| ID | 규칙 |
| :--- | :--- |
| **MB-1** | 단위: Android `dp` / iOS `pt` (1dp ≈ 1pt ≈ 1px@1x, 16 기준 환산 동일) |
| **MB-2** | 최상위 영역만 그리드 정렬, 내부는 스페이싱 토큰 (GD-1~3) |
| **MB-3** | 연속 본문 **max 38em** — md 6col(624dp = 39.0em)도 초과하므로 본문 블록에 상한 적용 (MS-1) |
| **MB-4** | 화면 가장자리 4dp는 히트 영역으로 신뢰하지 않는다 — 시스템 제스처 충돌 (HT-5) |
## 스페이싱 (base 8dp) · 반경 · 획
`space.025~800` = 2·4·**8**·12·16·24·32·48·64 dp | 반경 sm 4 / **md 8** / lg 12 / pill | 획 hairline 1 / regular 2 / bold 3
---
## 3. 타입 바인딩 (base 16dp)
| 역할 | xs·sm | **md (태블릿)** | 행간 | 웨이트 |
| :--- | ---: | ---: | :-: | :--- |
| `caption` | 13 | 13 | 1.55 | Medium 500 |
| `body-sm` | 14 | 14 | 1.70 | Regular 400 |
| **`body`** | **16** | **16 (불변)** | **1.70** | Regular 400 |
| `body-lg` | 18 | 18 | 1.70 | Regular 400 |
| `title-sm` | 20 | 20 | 1.50 | Medium 500 |
| `title` | 26 | 26 | 1.50 | Bold 700 |
| `title-lg` | 32 | 32 | 1.50 | Bold 700 |
| `display` | **26** (n+4 강등) | 46 | 1.25 | Regular 400 |
| `display-lg` | **32** (n+6 강등) | 66 | 1.25 | Regular 400 |
| ID | 규칙 |
| :--- | :--- |
| **TY-M1** | **본문을 화면이 작다는 이유로 줄이지 않는다** (RT-1). 줄어드는 것은 한 줄의 글자 수다 |
| **TY-M2** | xs·sm에서 강등된 `display` 계열(26·32)과 `title`·`title-lg`를 **같은 화면에 병용하지 않는다** — 동일 크기로 위계 소멸 (RT-5) |
| **TY-M3** | OS 글자 크기 설정(Dynamic Type·fontScale)을 존중한다 — 절대 고정 금지, 200% 확대 시 손실 없음 (A8) |
| **TY-M4** | 표·수치 등폭 숫자(tnum) 강제, 수치 우측 정렬 |
---
## 4. 색·테마
팔레트·페어는 M3(`webapp/module.webapp.md §3·§4`)과 **완전 동일**하다 (같은 screen 매체). 핵심 정본만 재수록한다.
| 라이트 | 다크 | 실측 |
| :--- | :--- | :---: |
| 캔버스 `sand #F4F3F0` / 본문 `brown #474235` | 캔버스 `obsidian #111111` / 본문 `sand` | 9.02 / 17.02 AAA |
| 제목 `green #1F524B` | 제목 **sand** (green 텍스트 **금지** — 2.13:1) | 8.00 / — |
| 악센트 `orange #D05C26` — 대형 전용 | 동일 — 4.71 AA 대형 권장 | 3.61 / 4.71 |
| 상태색 4종 + container | **반전 페어** (container↔on 교환) | 6.58~6.91 |
| ID | 규칙 |
| :--- | :--- |
| **CL-M1** | **OS 테마 연동 필수** (라이트/다크 자동 + 인앱 재정의 3택 영속 저장) — mobile은 TC-1이 선택이 아니라 필수다 |
| **CL-M2** | 다크에서 그림자는 소실된다 — 표면 톤 상향으로 깊이 표현 (EV-3) |
| **CL-M3** | 악센트 경제: **1 viewport당 ≤ 2** (스크롤 화면은 동시 가시 영역 기준) |
---
## 5. 터치·인터랙션 (본 모듈의 지배 규정)
| 항목 | 값 | 근거 |
| :--- | :--- | :--- |
| 히트 영역 | **최소 48×48dp** (시각 크기와 분리 — 20dp 아이콘도 히트는 48) | HT-1·§8.1 |
| 인접 타깃 간격 | ≥ 8dp | HT-3 |
| **hover** | **사용 금지** — hover에만 있는 정보·액션 0건 | HV-1·HV-2 |
| 상태 표현 | GRADE 시프트: pressed ±8 · selected ±12. 터치 피드백 ≤ 100ms | §6.2 |
| 드래그 | 드래그로만 가능한 조작 금지 — 대체 수단 제공 (WCAG 2.5.7) | PT-2 |
| 스와이프 액션 | 숨은 스와이프 기능은 **보강**만 — 동일 기능의 가시적 경로 필수 | HV-2 준용 |
| 포커스 | 외장 키보드·스위치 연결 시 포커스 링 3px 표시 (FC 전 규정 적용) | §7 |
| 모션 | transform·opacity만, OS 모션 축소 설정 존중 (RM-1) | §10 |
---
## 6. 화면 패턴 (5종) · 내비게이션
| ID | 구조 | 구성 | 적용 |
| :--- | :--- | :--- | :--- |
| **M1 목록** | 상단 앱바 + 리스트 | card 목록(xs 1열, sm 2열, md 2~3열) + badge·stat 요약 | 조회·탐색 |
| **M2 상세** | 앱바 + 스크롤 본문 | header 요약 + scope + 본문(≤38em) + specsheet + directive | 항목 열람 |
| **M3 폼** | 1열 수직 | input 수직, 레이블 상단, primary 1개 — 하단 고정 제출 바 허용(히트 48dp) | 입력·기록 |
| **M4 보드** | 카드 그리드 | stat·chartframe 카드. **md 태블릿에서 2열 분할 뷰(목록+상세) 허용** | 현황판 |
| **M5 설정** | 그룹 리스트 | rule로 구획, disclosure 그룹, toast 확인 | 설정·계정 |
**내비게이션 규정**
| ID | 규칙 |
| :--- | :--- |
| **NV-1** | 주 내비: **하단 탭 바** (3~5개, 히트 48dp, 현재 위치 색+형태 이중 표시). 6개 이상이면 정보 구조를 재설계한다 |
| **NV-2** | 보조 내비: 드로어(스크림 32%, 포커스 트랩) 또는 앱바 뒤로가기. 뒤로가기는 OS 관례를 따른다 |
| **NV-3** | **md(태블릿)에서 하단 탭 → 좌측 레일 전환을 허용**한다 (같은 항목·같은 순서 유지) |
| **NV-4** | 핵심 액션은 화면 하단 1/3(엄지 도달권)에 배치한다. 파괴적 액션은 도달권 밖 + 확인 절차 |
| **NV-5** | 모달은 xs·sm에서 **바텀시트 변형**을 기본으로 한다 (`modal` 컴포넌트의 매체 변형 — 스크림·포커스 트랩·Esc 상당(뒤로가기) 동일 적용) |
---
## 7. 컴포넌트 선별 (18종 / 변형 33종)
`eyebrow`(2) · `header`(1) · `rule`(1) · `card`(4) · `table`(4) · `stat`(1) · `chartframe`(1) · `directive`(3) · `badge`(4) · `scope`(1) · `stepper`(1) · `xref`(1) · `mediaframe`(1) · **`button`(4)** · **`input`(1)** · **`modal`(1)** · **`toast`(1)** · **`disclosure`(1)**
**미선별**: `hero`·`footer`·`specsheet`(M2 상세 패턴에서 조건부)·`principle`·`stagecard`·`connector`·`toc`(문서 열람 필요 시 조건부 — 추가 시 카탈로그 규정 준수).
주요 사용 규정: table은 xs에서 **카드 변환 또는 가로 스크롤**(핵심 열 고정) · input은 용도별 키보드 타입(숫자·이메일) 지정 · toast는 하단 탭 위에 표시, 동시 1개 · button 히트 48dp.
---
## 8. 분량 예산
| 슬롯 | 권장 | 최대 | 근거 (xs 328dp 콘텐츠 기준) |
| :--- | :-: | :-: | :--- |
| 앱바 제목 | 8자 | 12자 | 뒤로가기·액션 아이콘 제외 폭 |
| 카드 제목 / 본문 | 10 / 40자 | 15 / 80자 | 296dp ÷ 16dp ≈ 18자 × 행수 |
| 버튼 레이블 | 4자 | 8자 | — |
| 탭 라벨 | 2자 | 5자 | 5탭 × 65dp |
| input 레이블 / 오류 | 8 / 30자 | 12 / 50자 | — |
| toast | 15자 | 30자 | 1~2행 |
| 빈 상태 안내 | 20자 | 40자 | 원인 + 다음 행동 |
**BG-M1**: 예산 초과 시 글자를 줄이지 않는다 — 내용을 줄이거나 상세 화면으로 이관한다. 잘림(ellipsis) 설계 금지 — 잘림이 필요하면 예산이 잘못된 것이다.
---
## 9. 제작 절차
| 단계 | 작업 | 판정 |
| :-: | :--- | :--- |
| 1 | 화면 목록 + 패턴(M1~M5) 배정, 내비 구조(NV-1~3) 확정 | 매핑 완료 |
| 2 | 토큰 탑재 — M3 §3 CSS 변수 또는 플랫폼 토큰 파일로 변환 (dp 환산 §2·§3) | 리터럴 0건 |
| 3 | xs 기준 우선 설계 → sm·md 확장 (mobile-first) | BP 3종 검증 |
| 4 | 컴포넌트 구현 — §7 선별 + §5 터치 규정 | 히트 48dp |
| 5 | 다크 테마 — OS 연동 + 전 화면 다크 확인 (green 텍스트 0건) | CL-M1 |
| 6 | OS 글자 크기 확대(200%) 시험 | 손실 0 |
| 7 | 실기기 시험 — 폰 1종 + 태블릿 1종 이상 | §10 수동 |
| 8 | 검증 §10 | 전항 PASS |
---
## 10. 검증 체크리스트
### 자동
| # | 항목 | 기준 |
| :-: | :--- | :--- |
| A1 | 색·치수 리터럴 | 토큰 정의부 외 0건 |
| A2 | 그리드 정합 | xs·sm·md 잔차 0 (§2) |
| A3 | 히트 영역 | 인터랙티브 요소 ≥ 48dp |
| A4 | hover 의존 | hover 전용 기능 0건 |
| A5 | 본문 max-width | ≤ 38em |
| A6 | 다크 페어 | 전 페어 재계산 통과, green 텍스트 0건 |
| A7 | 대비 | 본문 ≥ 4.5:1, 비텍스트 ≥ 3:1 |
| A8 | 강등 병용 | display 계열 + title·title-lg 동일 화면 0건 (TY-M2) |
| A9 | 모션 | transform·opacity 외 0건, 모션 축소 대응 |
| A10 | 예산 | 전 슬롯 최대 이하, 잘림 0건 |
### 수동 (실기기)
| # | 항목 |
| :-: | :--- |
| V1 | 폰·태블릿 실기 — 히트 영역·한 손 도달권·시스템 제스처 충돌 |
| V2 | OS 다크 모드 전환 — 전 화면 확인 |
| V3 | OS 글자 크기 최대 설정 — 손실·겹침 없음 |
| V4 | 스크린리더 (VoiceOver·TalkBack) 주요 흐름 낭독 |
| V5 | 그레이스케일 판독 (색 단독 의존 검출) |
| V6 | 가로 회전 (sm) — 레이아웃 성립 확인 |
| V7 | 외장 키보드 연결 시 포커스 링 표시 |
### 구조 검증 결과 (modules §8.1 — `active` 등록 근거)
12항 전항 **PASS** (2026-07-29, HMCM): 스키마 충족 · depends_on 기록(screen 0.1.1 md 확장 반영) · 정량 명시(18종/33변형) · 완화 0건 · 전 슬롯 예산 · 패턴-콘텐츠 매핑 · 그리드 정합 · 카탈로그 외 0건 · 미사용 0건(조건부 선별 명시) · 역할 중복 0건 · 결론 존 규정 · 겸용 해당 없음
---
*본 모듈은 참조 사양이다 (DC-3). 플랫폼 심사 기준(App Store·Play)·기기별 실동작은 별도 검증해야 한다.*
RAG/design system_v0.1.1/ppt/module.ppt-deck.md
+282
View File
@@ -0,0 +1,282 @@
# Prism — M2 16:9 PPT 덱 실행 명세 (Layer 3)
| 버전 | 수정일 | 수정자 | 주요 변경 내용 | 비고 |
| :--- | :--- | :--- | :--- | :--- |
| v0.1.0 | 2026-07-29 | HMCM | 신규 제정 — 16:9 PPT·발표 슬라이드 실행 명세. EMU 좌표 전량 수록, 구조 검증 12항 통과 | `active` 등록 (modules §4.4) |
| 메타 | 값 |
| :--- | :--- |
| 모듈 | **M2 `ppt-deck`** — 16:9 PPT 덱 |
| 계층 | Layer 3 (실행 명세 · **자기완결형**) |
| 대상 산출물 | PPTX·PDF·HTML 슬라이드 — 보고 덱·강연 덱·세미나 자료 |
| 상위 의존 | `Design.md` 0.1.1 · foundations 0.1.2 · medium.presentation 0.1.1 · components 0.1.1 · tokens.json 0.1.1 |
| 지배 조건 | 관람 환경 통제 불가 — **"대비가 씻겨서 안 보임"이 주 위험.** 최악 조건 XGA 투사(유효 배율 53.3%) 기준으로 하한 설계 |
```yaml
module:
id: ppt-deck
name: 16:9 PPT 덱
version: 0.1.0
status: active
brand: saman
medium: presentation
dual_medium: false
format: 1920x1080 # 논리 캔버스 고정 (CV-1)
columns: 12
type_set: expressive
component_count: 19
variant_count: 33
patterns: [s1-cover, s2-toc, s3-divider, s4-content, s5-compare, s6-triple, s7-process, s8-data, s9-conclusion]
depends_on: { foundations: 0.1.2, medium.presentation: 0.1.1, components: 0.1.1 }
```
---
## 1. 적용 조건
| 적용 | 제외 |
| :--- | :--- |
| 발표용 16:9 슬라이드 (PPTX·Keynote·PDF) | 인쇄 배포 자료 → M5 (`A3/`) — 슬라이드 축소 인쇄 금지, 재조판 |
| 화면 공유·투사 보고 덱 | 스크롤 문서·대시보드 → M3 (`webapp/`) |
| 전시·사이니지 정지 화면 | 초와이드 3.55:1 → X1 확장 슬롯 |
---
## 2. 캔버스·그리드 (정본 값 + EMU)
### 2.1 캔버스
| 항목 | px | EMU | 비고 |
| :--- | ---: | ---: | :--- |
| 캔버스 | **1920 × 1080** | **12,192,000 × 6,858,000** | PowerPoint 기본 와이드스크린과 **정확 일치** |
| 환산 | — | **EMU = px × 6350 (정수, 잔차 0)** | 폰트 pt = px ÷ 2 |
슬라이드 크기는 PowerPoint **기본 와이드스크린(13.3333×7.5in)**으로 설정한다. 커스텀 크기 금지 (PX-1).
### 2.2 수평 그리드
| 항목 | px | EMU |
| :--- | ---: | ---: |
| 좌우 마진 | 48 | 304,800 |
| 콘텐츠 폭 | 1824 | 11,582,400 |
| 컬럼 (12개) | 130 | 825,500 |
| 거터 | 24 | 152,400 |
컬럼 X좌표: `X(i) = 48 + (i−1)×154` → 48 · 202 · 356 · 510 · 664 · 818 · 972 · 1126 · 1280 · 1434 · 1588 · 1742
### 2.3 수직 존
| 존 | y 범위 (px) | 높이 | EMU (상단 y) |
| :--- | :--- | ---: | ---: |
| 헤더 존 (아이브로·제목·메타) | 48 ~ 192 | 144 | 304,800 |
| 콘텐츠 밴드 | **216 ~ 960** | 744 | 1,371,600 |
| 푸터 존 (출처·페이지·브랜드) — **불가침** | 984 ~ 1032 | 48 | 6,248,400 |
### 2.4 분할별 존 좌표 (x / 폭, px — EMU는 ×6350)
| 분할 | 존1 | 존2 | 존3 | 존4 |
| :--- | :--- | :--- | :--- | :--- |
| `12` | 48 / 1824 | | | |
| `6:6` | 48 / 900 | 972 / 900 | | |
| `8:4` | 48 / 1208 | 1280 / 592 | | |
| `4:8` | 48 / 592 | 664 / 1208 | | |
| `4:4:4` | 48 / 592 | 664 / 592 | 1280 / 592 | |
| `3:3:6` | 48 / 438 | 510 / 438 | 972 / 900 | |
| `3:3:3:3` | 48 / 438 | 510 / 438 | 972 / 438 | 1434 / 438 |
**존별 본문 가능 여부**: 6col(900px=37.5em) 이하만 연속 본문 가능. 8col(1208px)·12col(1824px)은 도판·표·단문(1~2행) 전용 (ZN-1·ZN-2). 3col(438px) 텍스트는 3행 이하 (ZN-3).
---
## 3. 타입 바인딩 (base 24px)
| 역할 | px | **PPTX pt** | 행간 | 캔버스 H 비 | 웨이트 | 자간 |
| :--- | ---: | ---: | :-: | :---: | :--- | :--- |
| `caption` | 19 | **9.5** | 1.55 | H/57 (절대 하한) | Medium 500 | 0 |
| `body-sm` | 21 | **10.5** | 1.70 | H/51 | Regular 400 | 0 |
| **`body`** | **24** | **12.0** | **1.70** | **H/45 (본문 하한)** | Regular 400 | 0 |
| `body-lg` | 27 | **13.5** | 1.70 | H/40 | Regular 400 | 0 |
| `title-sm` | 30 | **15.0** | 1.50 | H/36 | Medium 500 | 0 |
| `title` | 38 | **19.0** | 1.50 | H/28 | Bold 700 | 0 |
| `title-lg` | 49 | **24.5** | 1.50 | H/22 | Bold 700 | 0 |
| `display` | 69 | **34.5** | 1.25 | H/16 | Regular 400 | **−0.015em** |
| `display-lg` | 99 | **49.5** | 1.25 | H/11 | Regular 400 | **−0.02em** |
| ID | 규칙 |
| :--- | :--- |
| **TP-D1** | **19px(caption) 미만 텍스트를 슬라이드에 두지 않는다.** 출처·각주 포함 |
| **TP-D2** | 본문 크기를 낮춰 정보를 더 넣지 않는다. **정보를 줄이거나 슬라이드를 나눈다** |
| **TP-D3** | 서체 Pretendard **임베드 필수.** 불가 시 아웃라인 처리 또는 PDF 배포 |
## 스페이싱·획·반경 (px — EMU는 ×6350)
| 토큰 | px | | 획 | px | | 반경 | px |
| :--- | ---: | :-: | :--- | ---: | :-: | :--- | ---: |
| `space.025` | 3 | | `hairline` | 2 | | `none` | 0 |
| `space.050` | 6 | | `regular` | 3 | | `sm` | 6 |
| `space.100` | 12 | | `bold` | 4 | | `md` | 12 |
| `space.150` | 18 | | `icon` | 5 | | `lg` | 18 |
| `space.200` | 24 | | `connector` | 7 | | | |
| `space.300` | 36 | | 하한 | **2** (역상 흰 선 금지) | | | |
| `space.400` | 48 | | | | | | |
수직 간격은 `space.050`(6px) 배수로 스냅한다. 베이스라인 그리드는 운용하지 않는다 (BL-P1·P2).
---
## 4. 색·테마 (등록 페어만)
### 4.1 라이트 (기본)
| 용도 | 전경 / 배경 | 실측 | 판정 |
| :--- | :--- | :---: | :--- |
| 캔버스 | — / `sand #F4F3F0` | — | **순백 전면 금지** (BG-P1) |
| 본문 | `brown #474235` / sand | 9.02 | AAA ✓ |
| 제목 | `green #1F524B` / sand | 8.00 | AAA ✓ |
| 카드 위 | brown·green / `white` | 10.01 · 8.87 | AAA ✓ |
| 그린 면 위 | white / green | 8.87 | AAA ✓ (보조: subtle 5.93 AA) |
| 대형 악센트 | `orange #D05C26` / sand·white | 3.61 · 4.01 | **대형 전용** (title-sm 30px 이상) |
### 4.2 다크 (표지·디바이더·강조 슬라이드 전용)
| 용도 | 전경 / 배경 | 실측 | 판정 |
| :--- | :--- | :---: | :--- |
| 본문·제목 | sand / `obsidian #111111` | 17.02 | AAA ✓ |
| 보조 | `subtle #D3D3D3` / obsidian | 12.61 | AAA ✓ |
| 악센트 | orange / obsidian | 4.71 | AA — 대형 권장 |
| **금지** | **green / obsidian** | **2.13** | **✗ 텍스트 절대 금지** — green은 다크 위에서 면·도형만 |
| ID | 규칙 |
| :--- | :--- |
| **CL-D1** | 다크(강조) 슬라이드는 **덱 전체의 10% 이하**, 구조 전환점에만. 연속 2장 금지 (HL-1~4) |
| **CL-D2** | 악센트(orange) **슬라이드당 ≤ 2** (틱·귀결 커넥터·강조어 합산). 상태색·차트색 제외 |
| **CL-D3** | 그림자·알파·그라디언트·글래스모피즘 **금지.** 깊이는 보더·톤차로만 |
| **CL-D4** | 차트는 직접 라벨링 원칙, 3계열 이상 패턴 병기, **적색-흑색 조합 금지** (CD-P1~P4) |
| **CL-D5** | 상태색은 기호(✓✕▲▣) 필수. 다크 슬라이드에서는 반전 페어(container↔on 교환, 실측 동일)를 쓴다 |
---
## 5. 슬라이드 패턴 (9종)
| ID | 분할 | 테마 | 존 구성 | 결론 존 | 적용 |
| :--- | :--- | :--- | :--- | :--- | :--- |
| **S1 표지** | `12` | 다크 허용 | hero(display-lg·강조어 1) + 메타(발표자·일자) | hero | 덱 시작 |
| **S2 목차** | `4:8` | 라이트 | ①eyebrow+title ②toc(2단계 이내) | ② | 안내 |
| **S3 디바이더** | `12` | **다크** | 장 번호(display) + 장 제목(title-lg) | 제목 | 장 전환 (HL 카운트) |
| **S4 표준 콘텐츠** | `8:4` 또는 `12` | 라이트 | ①본문·도판 ②card·stat·directive | ②상단 | 일반 해설 |
| **S5 비교** | `6:6` | 라이트 | 좌우 card·table (directive pair 허용) | 하단 principle | 대조 |
| **S6 3요소** | `4:4:4` | 라이트 | card·stagecard ×3 | 중앙 또는 하단 | 병렬 요점 |
| **S7 프로세스** | `3:3:3:3` | 라이트 | stagecard×4 + connector(귀결만 악센트) | 최종 단계 | 절차 |
| **S8 데이터** | `8:4` | 라이트 | ①chartframe·table ②stat·해설 | ② | 수치 근거 |
| **S9 결론** | `12` 또는 `3:3:6` | 라이트/다크 | principle 전폭 (+근거 2존) | principle | 마무리·지침 |
| ID | 규칙 |
| :--- | :--- |
| **PT-D1** | 슬라이드당 결론 존 1개 (PD-1). `principle`·`hero` 슬라이드당 1개 |
| **PT-D2** | 콘텐츠 하단 ≤ 960px — 푸터 존(984~1032) 불가침 (VZ-1·VZ-2) |
| **PT-D3** | 밴드를 위→아래로 채운다. 하단 공백 > 25% 금지 (VZ-4) |
| **PT-D4** | 애니메이션은 **최종 상태만으로 슬라이드가 성립**해야 한다 (MO-3). 전환은 페이드, 장식 모션 금지 |
---
## 6. 컴포넌트 선별 (19종 / 변형 33종)
`eyebrow`(2) · `header`(1) · `hero`(1) · `rule`(1) · `footer`(1) · `card`(4) · `stagecard`(3) · `connector`(1) · `principle`(1) · `table`(4) · `stat`(1) · `chartframe`(1) · `directive`(3) · `badge`(4) · `scope`(1) · `toc`(1) · `stepper`(1) · `xref`(1) · `mediaframe`(1)
**미선별**: `specsheet`(presentation 비적용), screen 전용 5종(button·input·modal·toast·disclosure).
주요 사용 규정: header 메타는 **2필드로 축약** · footer 우측 = 브랜드·버전·페이지 · xref 형식 `(→ 3.4)` · table 헤더는 슬라이드마다 반복 · 표 분할 시 "(계속)" 표기.
---
## 7. 분량 예산
| 슬롯 | 권장 | 최대 | 근거 |
| :--- | :-: | :-: | :--- |
| 슬라이드 제목 (`title-lg` 49px) | 15자 | 25자 | 1824px ÷ 49px ≈ 37자 → 존 폭·여유 감안 1행 |
| 히어로 헤드라인 (`display-lg`) | 12자 | 18자 | 1824 ÷ 99 ≈ 18자 |
| 본문 단락 (6col 존) | 3행 | 5행 | 900px = 37.5em, 슬라이드당 문단 1~2개 |
| 카드 제목 / 본문 | 12 / 60자 | 20 / 90자 | 4col 카드 내폭 544px ÷ 24px ≈ 22자 × 4행 |
| 스테이지 설명 | 30자 | 45자 | 3col 내폭 390px ÷ 21px ≈ 18자 × 3행 |
| directive 진술 | 60자 | 90자 | 6col 기준 |
| principle 진술 | 40자 | 60자 | 전폭 1~2행 |
| stat 라벨 / 주석 | 10 / 20자 | 15 / 25자 | 카탈로그 승계 |
| 출처 (caption) | 40자 | 60자 | 푸터 존 1행 |
**슬라이드 총량 규칙**: 1장에 본문 텍스트 총 250자를 넘기지 않는다(권장 150자). 초과분은 배포 자료(M5)로 이관한다.
---
## 8. PPTX 생성 상수 (python-pptx 등 자동 생성용)
```
slide_width = 12192000 EMU (13.3333 in)
slide_height = 6858000 EMU (7.5 in)
EMU_PER_PX = 6350
font_pt(px) = px / 2
좌표 변환 = px × 6350 (반올림 불필요 — 정수 보장)
폰트 = Pretendard (임베드), 표·수치 tnum
```
| ID | 규칙 |
| :--- | :--- |
| **GX-1** | 전 좌표·치수는 §2의 px 값 × 6350으로 산출한다. 임의 좌표 금지 |
| **GX-2** | 텍스트 상자 자동 축소(shrink-to-fit)를 **금지**한다 — 예산(§7)으로 통제 |
| **GX-3** | 생성 후 **PPTX 왕복 검증**(저장→재열기)으로 좌표·폰트 유지를 확인한다 |
| **GX-4** | 인쇄 배포가 필요하면 M5로 **재조판**한다. 슬라이드 축소 인쇄 금지 |
---
## 9. 제작 절차
| 단계 | 작업 | 판정 |
| :-: | :--- | :--- |
| 1 | 메시지를 슬라이드 단위로 분해 — **1장 = 1논리 단위** | 덱 구성표 |
| 2 | 각 장에 패턴(S1~S9) 배정, 다크 장 ≤ 10% 확인 | 매핑 완료 |
| 3 | 존 좌표 산출 (§2.4) | 정합 잔차 0 |
| 4 | 컴포넌트 배치 (§6) | 카탈로그 외 0건 |
| 5 | 문안 작성 — §7 예산, 어미 4종, 방향어 금지 | 예산 위반 0건 |
| 6 | 색 적용 — §4 등록 페어만, 악센트 ≤ 2/장 | 미등록 0건 |
| 7 | PPTX 생성 (§8) 또는 HTML(1920×1080 오써링 후 전체 스케일) | 왕복 검증 |
| 8 | 검증 §10 | 전항 PASS |
---
## 10. 검증 체크리스트
### 자동
| # | 항목 | 기준 |
| :-: | :--- | :--- |
| A1 | 캔버스 | 1920×1080 고정, EMU 정합 (px×6350) |
| A2 | 그리드 | 12×130+11×24=1824, 존 좌표 §2.4 일치 |
| A3 | 최소 크기 | 전 텍스트 ≥ 19px, 본문 ≥ 24px |
| A4 | 최소 선 | ≥ 2px, 역상 흰 선 0건 |
| A5 | 푸터 불가침 | 콘텐츠 하단 ≤ 960px |
| A6 | measure | 연속 본문 존 ≤ 6col |
| A7 | 대비 | 본문 AAA (≥7:1), 등록 페어만 |
| A8 | 그림자·알파·그라디언트·순백 전면 | 0건 |
| A9 | 악센트 경제 | 장당 ≤ 2 |
| A10 | 강조(다크) 비율 | ≤ 10%, 연속 2장 0건 |
| A11 | 폰트 임베드 | 미임베드 0건 |
| A12 | 음수 자간 | 60px 미만 요소 0건 |
| A13 | 예산 | 전 슬롯 최대 이하, 잘림 0건 |
### 육안
| # | 항목 |
| :-: | :--- |
| V1 | **XGA 축소 판독** — 53.3%(1024×576) 렌더 후 판독 확인 |
| V2 | 그레이스케일 변환 후 정보 손실 0 |
| V3 | 원거리 판독 — 화면 높이 8배 거리에서 1차 메시지 식별 |
| V4 | 결론 존 단일성·레이어드 디테일 2층 (PD-1·PD-3) |
| V5 | 애니메이션 없이 전 슬라이드 성립 (MO-3) |
| V6 | 실투사 시험 (가능한 경우 — 실제 프로젝터·조명) |
### 구조 검증 결과 (modules §8.1 — `active` 등록 근거)
12항 전항 **PASS** (2026-07-29, HMCM): 스키마 충족 · depends_on 기록 · 정량 명시(19종/33변형) · 완화 0건 · 전 슬롯 예산 · 분할 허용 목록 준수 · 결론 존 1개 · 존 좌표 정합 · 카탈로그 외 0건 · 미사용 0건 · 역할 중복 0건 · 겸용 해당 없음
---
*본 모듈은 참조 사양이다 (DC-3). 발표 내용의 정확성·적절성은 별도 검증해야 한다.*
RAG/design system_v0.1.1/revision-backlog.md
+158
View File
@@ -0,0 +1,158 @@
# Prism — 개정 대기 항목 원장 (Revision Backlog)
| 버전 | 수정일 | 수정자 | 주요 변경 내용 | 비고 |
| :--- | :--- | :--- | :--- | :--- |
| v0.1.0 | 2026-07-30 | 조선두 | 신규 제정 — M5 A3 설명자료 실제 산출 중 발견된 규정 공백 7항 등재 | 발견 경위: 「시공상세도 공통 부분」 Item 01 슬라이드 SVG 제작 (GV-15) |
| 메타 | 값 |
| :--- | :--- |
| 문서 | **개정 대기 항목 원장** |
| 역할 | 산출물 제작 중 발견된 **규정 공백·오류·개선 제안을 누적 기록**한다. 실제 개정은 본 원장을 근거로 일괄 수행한다 |
| 로드 정책 | 온디맨드 (개정 착수 시) |
| 규약 | GV-1 파일명 무버전 · GV-13 변경 이력 누적 · GV-14 무엇을 왜 · GV-15 발견 경위 · GV-16 근거 병기 |
---
## 1. 원장 운용 규칙
| ID | 규칙 |
| :--- | :--- |
| **RB-1** | 산출물 제작 중 **지침에 규정이 없어 제작자가 임의 판단한 지점**은 전부 본 원장에 등재한다. 임의 판단을 지침 준수로 간주하지 않는다 (PR-2) |
| **RB-2** | 항목은 **삭제하지 않는다.** 개정 반영 시 `상태`를 `반영`으로 바꾸고 반영 버전을 기재한다 |
| **RB-3** | 개정 착수 시 본 원장의 `대기` 항목을 우선순위 순으로 처리하고, 처리 결과를 대상 파일의 변경 이력에 GV-14·GV-15에 따라 기재한다 |
| **RB-4** | 한 항목이 여러 파일에 걸치면 **가장 상위 계층 파일을 주 대상**으로 하고 하위는 종속 갱신으로 표기한다 (AR-1) |
**우선순위 기준**
| 등급 | 의미 |
| :--- | :--- |
| **P1** | 규정을 그대로 따르면 **산출이 불가능하거나 검증을 통과할 수 없음** (규정 자체의 결함) |
| **P2** | 규정이 없어 **제작자마다 결과가 달라짐** (결정론성 훼손) |
| **P3** | 결과에 큰 차이는 없으나 **명문화하면 품질·속도가 개선됨** |
---
## 2. 대기 항목 총괄
| ID | 대상 | 항목 | 우선순위 | 상태 |
| :--- | :--- | :--- | :-: | :-: |
| **R1** | M5 §6 · components | `card` **emphasis 변형의 시각 표현이 미정의** | P2 | 대기 |
| **R2** | M5 §4.2 · Design.md §4.2 | **orange–green 인접 금지**가 명문화되지 않음 (비텍스트 ΔG 22 < 40) | P1 | 대기 |
| **R3** | M5 §6 · §7 | `principle` **블록 높이·내부 구조 미규정** | P2 | 대기 |
| **R4** | M5 §6 | `stagecard` **내부 수직 리듬(헤더·뱃지·본문·속성행) 미규정** | P2 | 대기 |
| **R5** | M5 §2.3 · §6 | 4:4:4 등 등간격 분할 시 **`connector` 배치 공간(거터 6mm)이 확보되지 않음** | P2 | 대기 |
| **R6** | M5 §5 PT-A1 | **패턴 혼용(상하 밴드 분할) 시 밴드 간격·절 제목 밴드 규정 부재** | P3 | 대기 |
| **R7** | M5 §10 A7 · Design.md §4.1 CM-1 | **SVG·인쇄 산출물에 A7(리터럴 0건)을 그대로 적용할 수 없음** | P1 | 대기 |
---
## 3. 항목별 상세
### R1. `card` emphasis 변형의 시각 표현 미정의 — P2
| 구분 | 내용 |
| :--- | :--- |
| **대상** | `A3/module.a3-explainer.md` §6 (주) · `design.components.md` (종속) |
| **현행 규정** | §6 컴포넌트 표: `card` — 변형 4종 `base·emphasis·prominent·quiet`. **변형별 시각 표현 규정 없음** |
| **발견 경위** | Item 01 슬라이드에서 3개 카드 중 ②(시공상세도)를 강조해야 했으나, emphasis를 **어떻게 그리는지에 대한 규정이 없어** 제작자가 임의로 (a) 카드 상단 오렌지 룰 0.6mm → 검토 결과 상단 브리지 라벨의 밑줄로 오독됨 → (b) 헤더 밴드 아래 **좌측 세로 악센트바 1.5mm**로 변경하여 확정 |
| **문제** | 동일 지침으로 다른 제작자가 만들면 emphasis 표현이 달라진다. **결정론적 파생(Design.md §1.1)이 성립하지 않음** |
| **개정 제안** | §6 `card` 행에 변형별 표현 규정을 추가한다.<br>· `base` — white 면 + hairline(0.20mm) brown 보더<br>· `emphasis` — base + 보더 `regular`(0.40mm) + **좌측 세로 악센트바 `space.025`(1.5mm)**, 바는 **헤더 밴드 하단부터** 시작하고 하단 라운드 시작점 전에서 끝낸다<br>· `prominent` — green 면 + white 전경 (역상)<br>· `quiet` — sand 면 + hairline 보더, 본문 위계 1단 하향<br>**악센트바는 §5 PT-A3 악센트 카운트에 1로 계상한다** |
| **근거** | Design.md §1.1 결정론적 파생 · PF-5 토큰만 사용 · PT-A3 악센트 경제 |
---
### R2. orange–green 인접 금지 미명문화 — P1
| 구분 | 내용 |
| :--- | :--- |
| **대상** | `A3/module.a3-explainer.md` §4.2 (주) · `Design.md` §4.3 · `design.foundations.md` (종속) |
| **현행 규정** | §4.2 사용 페어 표의 **금지 항목은 `green / obsidian`(2.13, 텍스트 금지) 1건뿐**. orange와 green의 조합에 대한 규정 없음 |
| **발견 경위** | R1의 (a)안 검토 중, 카드 ②의 emphasis 악센트바를 **green 헤더 밴드 위에 겹쳐 배치하는 안**을 검토함. orange G47 / green G69 → **ΔG 22**로 CM-20(비텍스트 요소 대비 ΔG ≥ 40)에 **미달**함을 계산으로 확인. 규정에 명시가 없어 제작자가 직접 계산해야 했음 |
| **문제** | CM-20은 Design.md에 있으나 **M5 §4.2의 페어 표에는 반영되어 있지 않다.** 자기완결형(§자기완결 원칙)을 표방하는 모듈 파일만 보고 작업하면 이 조합을 걸러낼 수 없다 |
| **개정 제안** | ① §4.2 표에 **금지 행 추가** — `orange / green` ΔG 22 · **✗ 인접·중첩 금지(텍스트·비텍스트 공통)**<br>② §4.2 하단 주석에 "**악센트(orange)는 sand·white 면 위에만 배치한다**"를 하드룰로 추가<br>③ §10 자동검증에 **A6-2 항목 신설** — 비텍스트 요소의 인접 면 대비 ΔG ≥ 40 검사 |
| **근거** | Design.md §4.6 CM-20 (비텍스트 ΔG ≥ 40 = 3:1) · GRADE 척도 (foundations) |
---
### R3. `principle` 블록 높이·내부 구조 미규정 — P2
| 구분 | 내용 |
| :--- | :--- |
| **대상** | `A3/module.a3-explainer.md` §6 · §7 |
| **현행 규정** | §6 — `principle` 면당 1개, 키커 ≤ 12자, 진술 ≤ 80자 / §7 — principle 진술 권장 60자·최대 80자, "전폭 1~2행". **블록 자체의 높이·패딩·키커 배치 규정 없음** |
| **발견 경위** | Item 01 v0.1.0에서 결론 존을 **30mm(5행)**로 잡았으나 진술이 1행뿐이라 내부 여백이 과다했음. v0.1.1에서 **18mm(3행)**로 축소하고 확보한 12mm를 카드 본문 5행·요소 스트립 4행으로 재배분함. 어느 쪽도 지침 위반이 아니어서 **판단 근거가 제작자 재량에 있었음** |
| **문제** | 결론 존은 PD-1이 정한 **면당 유일한 결론 지점**인데 크기 규정이 없어 면마다 무게감이 달라진다 |
| **개정 제안** | §6 `principle` 행에 다음을 추가한다.<br>· 구조 — **키커 1행 + 진술 1~2행**의 상하 적층. 키커는 `caption`/자간 +0.18em, 진술은 `title-sm`<br>· 높이 — 진술 1행 시 **18mm(3행)**, 진술 2행 시 **24mm(4행)**. 상하 패딩 각 `space.100`(6mm)<br>· 진술이 2행을 초과하면 **예산 위반**으로 판정한다 (BG-A1: 글자 크기를 줄이지 않고 내용을 줄인다)<br>· 진술 1행 상한을 **자수(80자)가 아니라 존 폭 기준**으로 재정의 — 전폭 372mm ÷ 4.48mm ≈ 83자, 좌우 패딩 24mm 반영 시 **77자** |
| **근거** | PD-1 결론 존 단일성 · PT-A2 · BG-A1 · §2.2 6mm 격자 |
---
### R4. `stagecard` 내부 수직 리듬 미규정 — P2
| 구분 | 내용 |
| :--- | :--- |
| **대상** | `A3/module.a3-explainer.md` §6 · §7 |
| **현행 규정** | §6 — `stagecard` 변형 3종, 단계 3~5개 / §7 — 스테이지 설명 권장 40자·최대 60자. **카드 내부에 어떤 슬롯이 몇 개 들어가는지 규정 없음** |
| **발견 경위** | Item 01 카드에 ① 헤더 밴드(번호+제목+영문) ② 뱃지 ③ 본문 ④ 구분선 ⑤ 속성행 4행 을 넣었으나, 이 구성은 **지침에 없는 제작자 설계**임. 특히 "속성행"은 §6 컴포넌트 카탈로그에 없는 구조라 **A11(카탈로그 외 0건) 판정에 저촉될 소지**가 있음 |
| **문제** | 카드 내부 구조가 매 면 달라지면 PF-1(반복 구조에 의한 예측 가능성)이 성립하지 않는다 |
| **개정 제안** | ① §6 `stagecard`에 **슬롯 정의**를 추가 — `header`(밴드 9mm, 번호·제목·보조라벨) / `badge`(선택, 6mm) / `body`(3~5행) / `rule`(hairline) / `attrs`(선택, 최대 4행 — 라벨 `caption` green + 값 `body-sm` brown, 라벨 열 폭 존 폭의 25%)<br>② 카드 총 높이는 **6mm 격자 배수**로만 지정한다<br>③ `attrs`를 컴포넌트 카탈로그에 **`keyvalue` 신규 등재** (확장 규약 §6.7 컴포넌트 12단계 절차 적용, MINOR) |
| **근거** | PF-1 · PF-2 · §10 A11 (카탈로그 외 0건) · §6.7 확장 규약 |
---
### R5. `connector` 배치 공간 미확보 — P2
| 구분 | 내용 |
| :--- | :--- |
| **대상** | `A3/module.a3-explainer.md` §2.3 · §6 |
| **현행 규정** | §2.3 — `4:4:4` = 120mm × 3, 거터 6mm / §6 — `connector` 1종, 획 1.00mm, "귀결 커넥터만 악센트" / §5 P3 — `stagecard×4 + connector`. **커넥터를 어디에 어떤 크기로 두는지 규정 없음** |
| **발견 경위** | 3단 계보를 그리면서 카드 사이 **거터가 6mm뿐**이어서 화살표를 넣을 공간이 사실상 없었음. 제작자가 (a) 거터 안에 4.5mm 길이 화살표를 넣고 (b) 커넥터 **라벨은 카드 상단의 별도 6mm 밴드**로 분리하는 방식을 임의로 고안함 |
| **문제** | P3 패턴은 커넥터를 전제하는데 분할 규정은 커넥터 공간을 남기지 않는다. **패턴과 그리드가 서로 모순** |
| **개정 제안** | ① §2.3에 **커넥터 동반 분할** 행 추가 — `4:4:4 (connector)` = 카드 폭 **114mm** × 3 + 커넥터 존 **12mm** × 2 (합계 372, 잔차 0)<br>② §6 `connector`에 형태 규정 추가 — 커넥터 존 중앙, 카드 수직 중심선, 길이 ≥ 8mm, 화살촉 폭 3mm<br>③ **브리지 라벨**을 신규 슬롯으로 정의 — 카드 밴드 **직상단 6mm 1행**, `caption`, 커넥터 존 중심 정렬. 라벨은 악센트 카운트에서 제외 |
| **근거** | §2.3 정합 규칙(잔차 0) · §5 P3 · PF-2 정의된 분할만 사용 |
---
### R6. 패턴 혼용 시 밴드 규정 부재 — P3
| 구분 | 내용 |
| :--- | :--- |
| **대상** | `A3/module.a3-explainer.md` §5 PT-A1 |
| **현행 규정** | PT-A1 — "1면 = 패턴 1개. 패턴 혼용 시 상하 밴드를 분할하되 분할선은 컬럼 경계·6mm 격자에 스냅한다". **밴드 간격·밴드 제목 처리 규정 없음** |
| **발견 경위** | Item 01은 상단 P3(3단 계보) + 하단 4:4:4 요소 스트립의 혼용 구성. 밴드 사이에 **절 제목("정의를 구성하는 네 요소") + 우측 연장 룰**을 두었으나 이는 제작자 설계임 |
| **문제** | 혼용은 허용하면서 그 형식을 정하지 않아, 밴드 경계가 면마다 다르게 표현된다 |
| **개정 제안** | PT-A1에 다음을 추가한다.<br>· 밴드 간 간격은 **`space.300`(18mm) 이상**, 그중 상단 6mm는 **절 제목 행**으로 사용할 수 있다<br>· 절 제목은 `title-sm` green + **제목 우측에서 콘텐츠 우단까지 hairline 룰**을 연장한다<br>· 한 면의 밴드는 **최대 2개**. 3개 이상이면 면을 나눈다 |
| **근거** | PT-A1 · PF-1 · A3E-2 |
---
### R7. SVG·인쇄 산출물에 A7(리터럴 0건) 적용 불가 — P1
| 구분 | 내용 |
| :--- | :--- |
| **대상** | `A3/module.a3-explainer.md` §10 A7 (주) · `Design.md` §4.1 CM-1 (종속) |
| **현행 규정** | §10 A7 — "리터럴: 산출물 내 HEX·치수 하드코딩 **0건**" / CM-1 — "산출물에 HEX·치수 리터럴이 등장하지 않는다" |
| **발견 경위** | Item 01을 SVG로 제작하면서, SVG에는 **토큰을 참조할 기구가 없어** 모든 색이 `fill="#1F524B"` 형태의 HEX로, 모든 좌표가 mm 수치로 들어갈 수밖에 없음을 확인함. **규정을 문자 그대로 적용하면 A7은 구조적으로 PASS가 불가능**하다 |
| **문제** | 검증 항목이 산출 매체의 실제 조건과 맞지 않는다. 이 상태로는 A7이 **형식적으로 무시되거나, 전 산출물이 FAIL로 판정**된다. 어느 쪽이든 게이트로 기능하지 못한다 |
| **개정 제안** | A7을 **매체별로 분기**한다.<br>· `screen`(HTML/CSS) — 현행 유지. CSS 사용자 정의 속성으로 토큰 참조, 리터럴 0건<br>· `print`·`presentation`(SVG/PDF/PPTX 등 **토큰 참조 기구가 없는 산출 형식**) — 리터럴 사용을 허용하되 **① 파일 상단에 `HEX ↔ 토큰명` 대응표를 주석으로 명시**하고 **② 사용된 전 HEX가 `design.tokens.json` 등재값과 완전 일치**할 것을 판정 기준으로 한다 (**A7′: 미등재 HEX 0건**)<br>· 치수는 **6mm 격자·스페이싱 토큰 값과의 일치**로 판정한다 (**A7″: 토큰 외 치수 0건**)<br>· 상위 CM-1도 같은 취지로 단서를 단다 |
| **근거** | GV-7 (tokens.json이 SSOT) · GV-8 (정합 검증 게이트) · §3.5 매체별 규칙 대조(단위 원칙이 매체마다 다름) |
| **참고** | 본 원장 등재 시점의 임시 조치로, Item 01 SVG v0.1.1은 파일 상단 주석에 토큰 대응표를 이미 기재하였다 |
---
## 4. 반영 이력
| 개정 버전 | 반영 항목 | 반영일 | 비고 |
| :--- | :--- | :--- | :--- |
| — | — | — | 아직 반영된 항목 없음 |
---
## 5. 다음 개정 시 처리 순서 (권고)
1. **P1 먼저** — R2(색 인접 금지), R7(A7 매체 분기). 둘 다 검증 체계의 결함이므로 다른 항목의 판정에 영향을 준다
2. **P2** — R1 → R4 → R3 → R5 순. R4에 `keyvalue` 컴포넌트 신규 등재가 포함되므로 `design.components.md` 확장 절차(§6.7, 12단계 + 14항 체크리스트)를 함께 수행한다
3. **P3** — R6
4. 반영 후 M5 **구조 검증 12항 재수행**, `design.modules.md` §4.4 등록 현황 갱신, 버전은 **MINOR 상향(v0.2.0)** — 규칙 강화·컴포넌트 추가에 해당 (GV §6.1)
> **개정 착수 전 확인**: 본 원장은 M5 A3 설명자료 1개 모듈의 실사용에서만 도출되었다. 동일 공백이 M1·M2·M3·M4·M6에도 존재할 가능성이 높으므로, R2·R7은 **`Design.md` 공통 원칙 층에서 처리**하는 것이 반복 개정을 줄인다 (AR-1 · GV-3).
RAG/design system_v0.1.1/sample/A3/sample_a3-explainer.html
+149
View File
@@ -0,0 +1,149 @@
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>Prism M5 샘플 — A3 설명자료 (패턴 P3 프로세스)</title>
<style>
/* ══════════════════════════════════════════════════════════════
Prism Design System v0.1.1 — M5 a3-explainer 샘플
근거: A3/module.a3-explainer.md · design.tokens.json (SSOT)
아래 :root 블록이 토큰 정의부다. 본문 규칙에는 var()만 쓴다.
인쇄: A3 가로(420×297mm), 여백 0으로 출력 (브라우저 인쇄 → PDF)
══════════════════════════════════════════════════════════════ */
:root {
/* color (brand saman — 등록 페어만 사용) */
--sand: #F4F3F0; /* G4 캔버스 (순백 전면 금지) */
--white: #FFFFFF; /* G0 카드 면 */
--brown: #474235; /* G72 본문 — on sand 9.02 AAA */
--green: #1F524B; /* G69 제목·구조 — on sand 8.00 AAA */
--orange: #D05C26; /* G47 악센트 — 대형 전용, 1면당 ≤2 */
--obsidian: #111111; /* G95 반전 면 */
/* type (base 10pt · 행간 = 베이스라인 6mm) */
--t-caption: 7.9pt; --t-body-sm: 8.9pt; --t-body: 10pt; --t-body-lg: 11.3pt;
--t-title-sm: 12.7pt; --t-title: 16pt; --t-title-lg: 20.3pt; --t-display: 28.9pt;
--lh-body: 6mm; /* 10pt × 1.70 = 17pt = 5.997mm ≈ 6mm */
/* space (base 6mm) */
--sp-050: 3mm; --sp-100: 6mm; --sp-150: 9mm; --sp-200: 12mm; --sp-300: 18mm; --sp-400: 24mm;
/* stroke · radius */
--hairline: 0.2mm; --regular: 0.4mm; --connector: 1mm; --r-md: 3mm;
}
@page { size: 420mm 297mm; margin: 0; }
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { background: #888; }
.page {
position: relative; width: 420mm; height: 297mm; margin: 0 auto;
background: var(--sand); overflow: hidden;
font-family: Pretendard, -apple-system, BlinkMacSystemFont, "Noto Sans KR", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
color: var(--brown); font-size: var(--t-body); line-height: var(--lh-body);
}
@media print { html, body { background: none; } .page { margin: 0; } }
/* ── 헤더 존 (21~51mm) ── */
.header { position: absolute; left: 24mm; right: 24mm; top: 21mm; height: 30mm; }
.eyebrow { display: flex; align-items: center; gap: 2mm; font-size: var(--t-caption); letter-spacing: 0.18em; color: var(--brown); line-height: 6mm; }
.eyebrow .tick { width: 2.5mm; height: 2.5mm; background: var(--orange); } /* 악센트 1/2 */
.header h1 { font-size: var(--t-title-lg); font-weight: 700; color: var(--green); line-height: 12mm; }
.meta { position: absolute; right: 0; top: 0; text-align: right; font-size: var(--t-caption); line-height: 4.5mm; color: var(--brown); }
.meta b { font-weight: 500; color: var(--green); }
.header .rule { position: absolute; left: 0; right: 0; bottom: 0; border-bottom: var(--regular) solid var(--green); }
/* ── scope 블록 (57mm) ── */
.scope { position: absolute; left: 24mm; right: 24mm; top: 57mm; height: 24mm;
background: var(--white); border: var(--hairline) solid var(--brown); border-radius: var(--r-md);
padding: var(--sp-050) var(--sp-200); display: flex; gap: var(--sp-400); align-items: center; }
.scope dl { font-size: var(--t-body-sm); line-height: 5mm; }
.scope dt { font-weight: 700; color: var(--green); font-size: var(--t-caption); letter-spacing: 0.12em; }
/* ── 스테이지 카드 4열 (3:3:3:3 — 존 폭 88.5mm) ── */
.stage { position: absolute; top: 93mm; width: 88.5mm; height: 84mm;
background: var(--white); border: var(--hairline) solid var(--brown); border-radius: var(--r-md);
padding: var(--sp-100); }
.stage .no { font-size: var(--t-title); font-weight: 700; color: var(--orange); line-height: 12mm; }
.stage h2 { font-size: var(--t-title-sm); font-weight: 500; color: var(--green); line-height: 6mm; margin-bottom: var(--sp-050); }
.stage p { font-size: var(--t-body-sm); line-height: 5mm; }
.stage.hl { background: var(--green); border-color: var(--green); } /* 면 반전 — white/green 8.87 AAA */
.stage.hl .no, .stage.hl h2 { color: var(--white); }
.stage.hl p { color: var(--sand); }
.s1 { left: 24mm; } .s2 { left: 118.5mm; } .s3 { left: 213mm; } .s4 { left: 307.5mm; }
.conn { position: absolute; top: 133mm; width: 6mm; height: 0; border-top: var(--connector) solid var(--brown); }
.conn::after { content: ""; position: absolute; right: -0.5mm; top: -1.7mm; border-left: 2mm solid var(--brown); border-top: 1.2mm solid transparent; border-bottom: 1.2mm solid transparent; }
.c1 { left: 112.5mm; } .c2 { left: 207mm; }
.c3 { left: 301.5mm; border-top-color: var(--orange); } /* 귀결 커넥터 — 악센트 2/2 */
.c3::after { border-left-color: var(--orange); }
/* ── principle (결론 존, 195mm) ── */
.principle { position: absolute; left: 24mm; right: 24mm; top: 195mm; height: 36mm;
border-left: 1.5mm solid var(--orange); padding-left: var(--sp-100); }
/* 주: principle 악센트 바는 결론 존 전용 표지로, 본 면에서는 아이브로 틱과 합산해 상한(2)을 넘지 않도록
아이브로 틱을 무채 표기로 강등할 수 있다. 본 샘플은 틱·귀결 커넥터 2건을 카운트하고 바는 green으로 대체한다. */
.principle { border-left-color: var(--green); }
.principle .kicker { font-size: var(--t-caption); letter-spacing: 0.18em; color: var(--brown); line-height: 6mm; }
.principle h3 { font-size: var(--t-title); font-weight: 700; color: var(--green); line-height: 9mm; margin-top: 1.5mm; }
.principle p { font-size: var(--t-body); line-height: var(--lh-body); margin-top: 1.5mm; }
/* ── 푸터 존 (255~273mm 불가침) ── */
.footer { position: absolute; left: 24mm; right: 24mm; top: 255mm; height: 18mm;
border-top: var(--hairline) solid var(--brown); padding-top: 2mm;
display: flex; justify-content: space-between; font-size: var(--t-caption); line-height: 4.5mm; }
</style>
</head>
<body>
<div class="page">
<header class="header">
<div class="eyebrow"><span class="tick"></span>PRISM DESIGN SYSTEM · 설명자료</div>
<h1>산출물은 4단계로 결정된다 — Prism 파생 프로세스</h1>
<div class="meta">
<b>분류</b> 시스템 안내 &nbsp;·&nbsp; <b>개정</b> v0.1.1<br>
<b>대상</b> 전 매체 공통 &nbsp;·&nbsp; <b>상태</b> 승인
</div>
<div class="rule"></div>
</header>
<section class="scope">
<dl><dt>적용 조건</dt><dd>Prism v0.1.1 기반의 신규 산출물(인쇄·슬라이드·화면)을 제작하는 경우</dd></dl>
<dl><dt>제외 조건</dt><dd>없음</dd></dl>
<dl><dt>선행 요건</dt><dd>해당 매체의 실행 명세(모듈) 확인</dd></dl>
</section>
<article class="stage s1">
<div class="no">①</div>
<h2>브랜드 선언</h2>
<p>활성 인스턴스를 확인한다 — 철학·가치축·팔레트·서체·보이스·금지 목록.
브랜드가 바뀌면 이 계층(L0)만 바뀐다. 하위 계층에 색상 리터럴이 0건이어야 교체가 격리된다.</p>
</article>
<article class="stage s2">
<div class="no">②</div>
<h2>파운데이션 적용</h2>
<p>비율·단계·관계만 적용한다 — GRADE 색 척도, 타입 생성식 1.125ⁿ, 공간 백분율 스케일, 12컬럼 그리드.
이 계층(L1)에는 절대 치수가 존재하지 않는다.</p>
</article>
<article class="stage s3">
<div class="no">③</div>
<h2>매체 바인딩</h2>
<p>base 하나로 절대값을 실체화한다 — print 10pt, presentation 24px, screen 1rem.
같은 토큰명이 매체별 값셋을 갖는다. 본 자료의 본문 10pt·행간 6mm가 그 결과다.</p>
</article>
<article class="stage s4 hl">
<div class="no">④</div>
<h2>모듈 고정</h2>
<p>남은 자유도를 없앤다 — 패턴 배정, 컴포넌트 선별, 분량 예산.
규칙 완화는 불가능하며 강화만 가능하다. 검증 게이트를 통과하지 못한 산출물은 확정하지 않는다.</p>
</article>
<span class="conn c1"></span><span class="conn c2"></span><span class="conn c3"></span>
<section class="principle">
<div class="kicker">원칙</div>
<h3>어느 단계도 생략하지 않는다.</h3>
<p>본 자료 자체가 M5 실행 명세(A3 가로 · 3:3:3:3 패턴 · 등록 색 페어 · 베이스라인 6mm)의 산출물이다.
[출처: Prism Design System v0.1.1 — A3/module.a3-explainer.md]</p>
</section>
<footer class="footer">
<span>Prism Design System — M5 A3 설명자료 샘플</span>
<span>1 / 1 · v0.1.1 · 2026-07-29</span>
</footer>
</div>
</body>
</html>
RAG/design system_v0.1.1/sample/A4/sample_a4-document.html
+104
View File
@@ -0,0 +1,104 @@
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>Prism M6 샘플 — A4 보고서 (single 변형 · 1단 통독형)</title>
<style>
/* ══════════════════════════════════════════════════════════════
Prism Design System v0.1.1 — M6 a4-document 샘플 (single 변형)
근거: A4/module.a4-document.md · design.tokens.json (SSOT)
판형: A4 세로 210×297 · 여백 좌우 39 / 상 21 / 하 24
콘텐츠 132×252mm → 본문 1단 measure 37.4em ✓ (표준 여백 1단 금지 규칙 준수)
인쇄: 브라우저 인쇄 → A4, 여백 0
══════════════════════════════════════════════════════════════ */
:root {
--sand: #F4F3F0; --white: #FFFFFF; --brown: #474235; --green: #1F524B; --orange: #D05C26;
--t-caption: 7.9pt; --t-body-sm: 8.9pt; --t-body: 10pt; --t-title-sm: 12.7pt; --t-title: 16pt; --t-title-lg: 20.3pt;
--lh-body: 6mm; --sp-050: 3mm; --sp-100: 6mm; --sp-150: 9mm; --sp-300: 18mm;
--hairline: 0.2mm; --regular: 0.4mm; --r-md: 3mm;
}
@page { size: 210mm 297mm; margin: 0; }
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { background: #888; }
.page { position: relative; width: 210mm; height: 297mm; margin: 0 auto; background: var(--sand); overflow: hidden;
font-family: Pretendard, -apple-system, BlinkMacSystemFont, "Noto Sans KR", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
color: var(--brown); font-size: var(--t-body); line-height: var(--lh-body);
padding: 21mm 39mm 24mm 39mm; }
@media print { html, body { background: none; } .page { margin: 0; } }
.eyebrow { display: flex; align-items: center; gap: 2mm; font-size: var(--t-caption); letter-spacing: 0.18em; line-height: 6mm; }
.eyebrow .tick { width: 2.5mm; height: 2.5mm; background: var(--orange); } /* 악센트 1/2 */
h1 { font-size: var(--t-title-lg); font-weight: 700; color: var(--green); line-height: 9mm; margin: var(--sp-050) 0; }
.meta { width: 100%; border-collapse: collapse; margin: var(--sp-050) 0 var(--sp-100) 0; font-size: var(--t-body-sm); line-height: 5mm; }
.meta th, .meta td { border: var(--hairline) solid var(--brown); padding: 1mm 2.5mm; text-align: left; }
.meta th { background: var(--white); font-weight: 500; color: var(--green); width: 18mm; }
.docrule { border-bottom: var(--regular) solid var(--green); margin-bottom: var(--sp-100); }
h2 { font-size: var(--t-title-sm); font-weight: 700; color: var(--green); line-height: 6mm; margin: var(--sp-100) 0 var(--sp-050) 0; }
p { margin-bottom: var(--sp-050); }
p.lead { font-size: var(--t-body); }
table.data { width: 100%; border-collapse: collapse; font-size: var(--t-body-sm); line-height: 5mm; margin: var(--sp-050) 0;
font-variant-numeric: tabular-nums; }
table.data caption { text-align: left; font-size: var(--t-caption); color: var(--brown); letter-spacing: 0.12em; padding-bottom: 1mm; }
table.data th { background: var(--white); color: var(--green); font-weight: 500; border: var(--hairline) solid var(--brown); padding: 1.2mm 2.5mm; text-align: left; }
table.data td { border: var(--hairline) solid var(--brown); padding: 1.2mm 2.5mm; }
table.data td.num { text-align: right; }
.directive { display: flex; gap: 2.5mm; background: var(--white); border: var(--hairline) solid var(--brown);
border-radius: var(--r-md); padding: var(--sp-050) var(--sp-100); margin: var(--sp-050) 0; font-size: var(--t-body-sm); line-height: 5mm; }
.directive .sym { font-weight: 700; color: #005A4E; } /* 상태색 do — 기호 병기 필수 */
.footer { position: absolute; left: 39mm; right: 39mm; bottom: 9mm; display: flex; justify-content: space-between;
font-size: var(--t-caption); line-height: 4.5mm; border-top: var(--hairline) solid var(--brown); padding-top: 1.5mm; }
</style>
</head>
<body>
<div class="page">
<div class="eyebrow"><span class="tick"></span>CM기획팀 · 업무 보고</div>
<h1>디자인 시스템 v0.1.1 개정 결과 보고</h1>
<table class="meta">
<tr><th>문서번호</th><td>HMCM-DS-2026-001</td><th>버전</th><td>v1.0.0</td></tr>
<tr><th>작성</th><td>CM기획팀 HMCM</td><th>작성일</th><td>2026-07-29</td></tr>
</table>
<div class="docrule"></div>
<h2>1 개요</h2>
<p class="lead">Prism 통합 디자인 시스템 v0.1.0(9파일 6,061행)을 전수 진단하고 v0.1.1로 개정하였다.
전 수치를 프로그램으로 재검산한 결과 색·대비·타입 체계는 전량 정확하였으며,
수치 오계산과 토큰 무결성 위반이 확인되어 보정하였다. 개정판과 매체별 실행 명세 6종은
"DOC/design system_v0.1.1" 폴더에 있다.</p>
<h2>2 진단 결과</h2>
<table class="data">
<caption>표 1 — 결함 유형별 진단·조치 현황</caption>
<tr><th>결함 유형</th><th style="width:14mm; text-align:right">건수</th><th>대표 사례</th><th style="width:22mm">조치</th></tr>
<tr><td>수치 오계산</td><td class="num">4</td><td>A3 8col 존 폭 249→246mm, screen 존 2건, ΔG 1건</td><td>정정 완료</td></tr>
<tr><td>토큰 참조 무결성</td><td class="num">5</td><td>미정의 토큰 sys.accent 등 (F1 위반)</td><td>정본 경로 정정</td></tr>
<tr><td>규칙·값 자기모순</td><td class="num">2</td><td>RT-2 문언 ↔ 값 불일치</td><td>문언 정정·규칙 신설</td></tr>
<tr><td>구조 결함</td><td class="num">7</td><td>태블릿 배제, 상태색 다크 미등록 등</td><td>확장·등록 완료</td></tr>
<tr><td>미구축(치명)</td><td class="num">1</td><td>L3 실행 명세 0건 (active 모듈 없음)</td><td>6종 신설</td></tr>
</table>
<h2>3 조치 내역</h2>
<p>코어 9파일을 보정하고 변경 이력에 근거를 기재하였다. 매체별 실행 명세 6종
(M1 A3 편람, M2 PPT 덱, M3 웹앱, M4 모바일·태블릿, M5 A3 설명자료, M6 A4 문서)을
신설하여 전량 active로 등록하였다. 본 보고서는 M6 single 변형(1단 37.4em)의 산출물이다.</p>
<div class="directive"><span class="sym">✓</span><span>산출물 제작 시 해당 매체의 실행 명세를 우선 적용한다.
명세와 코어 문서가 충돌하는 경우 design.tokens.json을 정본으로 한다.</span></div>
<h2>4 후속 조치</h2>
<p>인쇄 발주 전 인쇄소 출력 프로파일 확인 후 브랜드 색 CMYK 등가값을 토큰에 등록한다(CV-1~CV-3).
폴백 서체 정규화 계수는 실측 후 등재한다(NF-2). 상세 근거는 진단 보고서를 참조한다.
[출처: DOC/design system_v0.1.1/진단보고서_v0.1.0_문제점_및_개정내역_2026-07-29_v1.0.0.md]</p>
<footer class="footer">
<span>디자인 시스템 v0.1.1 개정 결과 보고 · HMCM-DS-2026-001</span>
<span>1 / 1 · v1.0.0 · 2026-07-29</span>
</footer>
</div>
</body>
</html>
RAG/design system_v0.1.1/sample/README.md
+37
View File
@@ -0,0 +1,37 @@
# sample — 실행 명세 준수 샘플 구현물
| 버전 | 수정일 | 수정자 | 주요 변경 내용 | 비고 |
| :--- | :--- | :--- | :--- | :--- |
| v0.1.0 | 2026-07-29 | HMCM | 신규 작성 — 인쇄·프레젠테이션 매체 샘플 3종 (A3·A4·PPT) | 전건 육안 QA 완료 |
본 폴더는 **비 코드베이스 매체(A3·A4·PPT)의 실행 명세를 실제 산출물로 구현한 참조 샘플**이다.
웹앱(M3)·모바일(M4)은 코드베이스 자체가 구현물이므로 본 폴더 대상이 아니다 (`webapp/`·`mobile/` 명세의 CSS 변수·HTML 골격 참조).
## 구성
| 파일 | 근거 명세 | 내용 | 사용법 |
| :--- | :--- | :--- | :--- |
| `A3/sample_a3-explainer.html` | M5 `A3/module.a3-explainer.md` | A3 가로 1면 설명자료 — 패턴 **P3 프로세스**(3:3:3:3), scope→스테이지 4매→principle 결론 존 | 브라우저에서 열기 → 인쇄 → 용지 A3 가로·여백 없음 → PDF/출력 |
| `A4/sample_a4-document.html` | M6 `A4/module.a4-document.md` | A4 보고서 — **single 변형**(1단 37.4em, 여백 39mm), 메타 표·데이터 표·지침(✓) 포함 | 브라우저 인쇄 → A4·여백 없음 |
| `ppt/sample_ppt-deck.pptx` | M2 `ppt/module.ppt-deck.md` | 7장 덱 — 표지(다크)·목차(4:8)·디바이더·8:4·프로세스(3:3:3:3)·GRADE 사다리·결론(principle) | PowerPoint에서 열기 |
## 명세 준수 확인 사항 (전 샘플 공통)
- **토큰 전용**: HEX·치수 리터럴은 각 파일의 토큰 정의부(`:root` / 스크립트 상수)에만 존재하고, 본문 규칙은 전부 토큰을 참조한다
- **등록 페어만 사용**: brown/sand 9.02 · green/sand 8.00 · white/green 8.87 · sand/obsidian 17.02 등 — 미등록 조합 0건, 다크 위 green 텍스트 0건
- **악센트 경제**: 화면·지면당 orange 강조 ≤ 2 (아이브로 틱·귀결 커넥터·강조어 합산)
- **그림자·알파·그라디언트·순백 전면 배경 0건** · 상태 표기는 기호(✓) 병기
- **그리드 정합**: A3 372mm=12×25.5+11×6 · A4 single 132mm=12×8.25+11×3 · PPT 1824px=12×130+11×24 (EMU=px×6350 정수)
- **결론 존 1개** (PD-1) · 푸터 존 불가침 · 방향어 참조 0건
## 주의
1. **서체**: 브랜드 서체 **Pretendard**를 지정했다. 미설치 환경에서는 시스템 sans로 폴백되어 자간·행 나눔이 미세하게 달라질 수 있다 — 정식 산출 전 Pretendard 설치를 권장한다. PPTX는 도구 제약으로 폰트가 임베드되지 않았으므로(FT-1), 대외 배포 시 PowerPoint에서 "파일>옵션>저장>파일의 글꼴 포함"으로 임베드하거나 PDF로 배포한다.
2. **인쇄 발주**: 본 샘플은 sRGB 기준이다. 오프셋 인쇄 발주 시 인쇄소 프로파일 확인→CMYK 변환→교정쇄 승인 절차(print §11.3)를 따른다.
3. **PPT 다크 슬라이드**: 표지·디바이더의 다크는 TH-P1(표지·장 구분 허용)에 따른 구조적 사용이다. 강조(인라인 테마) 슬라이드 10% 상한(HL-1)은 본문 슬라이드에 적용한다.
4. 본 샘플은 **참조 구현물**이며 시스템 명세의 일부가 아니다. 명세가 개정되어도 샘플이 자동 갱신되지 않는다 (DC-1).
## 검증 이력 (2026-07-29, HMCM)
- PPTX: `validate.py` **All validations PASSED** · LibreOffice 렌더 7장 전수 육안 확인 (오버플로·겹침 0건)
- A3·A4 HTML: WeasyPrint 렌더 후 육안 확인 — 존 좌표·베이스라인·푸터 불가침·표 정렬 정상
RAG/design system_v0.1.1/sample/ppt/sample_ppt-deck.pptx
BIN
View File
Binary file not shown.
RAG/design system_v0.1.1/ultrawide/module.ultrawide-deck.md
+159
View File
@@ -0,0 +1,159 @@
# Prism — M7 32:9 초와이드 덱 실행 명세 (Layer 3)
| 버전 | 수정일 | 수정자 | 주요 변경 내용 | 비고 |
| :--- | :--- | :--- | :--- | :--- |
| v0.1.0 | 2026-09-29 | HMCM | 신규 제정 — 3840×1080 사이니지·울트라와이드 발표 실행 명세. 24열 그리드, 중앙 경계, 패턴 9종 | `draft` — 사용자 승인(2026-09-29) |
| v0.1.1 | 2026-09-29 | HMCM | 스키마 정합 보정 — `medium: presentation` + `medium_variant: presentation.ultrawide`, 스키마 필수 필드(components·budget·overrides_strict) 명시, U6·U8 분할을 L1 대응 6종 내로 조정, §8.1 구조 검증 결과 기재, `active` 전환 | [CONFLICT DETECTED] 해소 — 사용자 선택 '최소 추가' |
| 메타 | 값 |
| :--- | :--- |
| 모듈 | **M7 `ultrawide-deck`** — 32:9 초와이드 덱 |
| 계층 | Layer 3 (실행 명세 · **M2 차분형** — M2와 다른 부분만 규정) |
| 대상 산출물 | PPTX·PDF·HTML 슬라이드 — 사이니지·울트라와이드 모니터용 세미나·보고 덱 |
| 상위 의존 | `design.medium.ultrawide.md` 0.1.0 (L2d) · `design.medium.presentation.md` 0.1.1 (L2b 승계분) · components 0.1.1 · tokens.json |
| 형제 모듈 | M2 `ppt/module.ppt-deck.md` — 본 문서에 없는 항목은 **M2 값을 그대로** 따른다 |
| 지배 조건 | 높이 1080(16:9와 동일) · 폭 3840 · 중앙 x=1920 얇은 베젤 |
```yaml
module:
id: ultrawide-deck
name: 32:9 초와이드 덱
version: 0.1.0
status: active # 2026-09-29 등록 (modules §4.1 M7)
brand: saman
medium: presentation
medium_variant: presentation.ultrawide # L2d
dual_medium: false
format: 3840x1080
columns: 24
type_set: expressive
components: [eyebrow, header, hero, rule, footer, card, stagecard, connector, principle, table, stat, chartframe, directive, badge, scope, toc, stepper, xref, mediaframe]
component_count: 19 # M2와 동일 선별
variant_count: 33
patterns: [u1-cover, u2-toc, u3-divider, u4-content, u5-compare, u6-triple, u7-process, u8-data, u9-conclusion]
budget: # M2 §7 승계 (recommended / max, 자)
title: { recommended: 15, max: 25 }
hero: { recommended: 12, max: 18 }
paragraph_lines: { recommended: 3, max: 5 }
card_title: { recommended: 12, max: 20 }
card_body: { recommended: 60, max: 90 }
stage_desc: { recommended: 30, max: 45 }
directive: { recommended: 60, max: 90 }
principle: { recommended: 40, max: 60 }
stat_label: { recommended: 10, max: 15 }
stat_note: { recommended: 20, max: 25 }
source: { recommended: 40, max: 60 }
slide_total: { recommended: 150, max: 250 }
overrides_strict: # 강화만 (MS-3)
- center_rule: text-no-cross # CB-1
- text_max_width_px: 1860 # UZ-3
- body_max_cols: 6 # UZ-1 (L2b ZN-1과 동일 폭 한계)
- conclusion_zone_default: right-half # UV-2
depends_on: { foundations: 0.1.2, medium.ultrawide: 0.1.1, medium.presentation: 0.1.1, components: 0.1.1 }
```
---
## 1. 적용 조건
| 적용 | 제외 |
| :--- | :--- |
| 3840×1080 사이니지·울트라와이드·모니터 2대(얇은 베젤) 발표 | 16:9 투사·화면 공유 → M2 |
| 로비·전시 32:9 정지 화면 | 5120×1442 → X1 확장 슬롯 |
| | 인쇄 배포 → M5 재조판 (슬라이드 축소 인쇄 금지) |
## 2. M2 승계표 (변경 없음)
| 항목 | M2 위치 |
| :--- | :--- |
| 타입 바인딩 (caption 19 ~ display-lg 99px, PPTX pt = px÷2) | §3 |
| 스페이싱·획·반경 | §3 하단 표 |
| 색·테마 (라이트 기본 / 다크는 표지·디바이더·강조만, ≤10%) | §4 |
| 컴포넌트 선별 19종 / 변형 33종 | §6 |
| 분량 예산 (제목 25자 · 히어로 18자 · principle 60자 · **장당 250자**) | §7 |
| PPTX 생성 상수 중 `EMU_PER_PX=6350`, 폰트 Pretendard 임베드, GX-1~GX-4 | §8 |
## 3. 캔버스·그리드
| 항목 | px | EMU |
| :--- | ---: | ---: |
| 캔버스 | 3840 × 1080 | 24,384,000 × 6,858,000 |
| 좌우 마진 | 48 | 304,800 |
| 콘텐츠 폭 | 3744 | 23,774,400 |
| 컬럼 (24개) | 133 | 844,550 |
| 거터 | 24 | 152,400 |
| 중앙선 | 1920 (12\|13열 거터 정중앙) | 12,192,000 |
- 컬럼 X좌표: `X(i) = 48 + (i−1)×157` [ref: `design.medium.ultrawide.md` §3.1]
- 수직 존: 헤더 48~192 · 콘텐츠 216~960 · 푸터 984~1032(불가침) — M2 §2.3과 동일
- 허용 분할 9종과 존 좌표: [ref: `design.medium.ultrawide.md` §5]
## 4. 슬라이드 패턴 (9종)
M2 S1~S9에 1:1 대응한다. 모든 분할은 12|13 경계를 포함한다 (CB-3).
| ID | 대응 | 분할 | 테마 | 존 구성 | 결론 존 |
| :--- | :--- | :--- | :--- | :--- | :--- |
| **U1 표지** | S1 | `12:12` | 다크 허용 | ①hero(display-lg·강조어 1) ②메타·도판 | ① hero |
| **U2 목차** | S2 | `12:12` | 라이트 | ①eyebrow+title ②toc(2단계 이내) | ② |
| **U3 디바이더** | S3 | `12:12` | **다크** | ①장 번호+장 제목 ②도판 또는 여백 | ① 제목 |
| **U4 표준 콘텐츠** | S4 | `16:8` 또는 `12:12` | 라이트 | ①도판·본문(본문은 6col 이하) ②card·stat·directive | ② 상단 |
| **U5 비교** | S5 | `12:12` | 라이트 | ①as-is(회색) ②to-be(green) + 하단 principle | ② 하단 principle |
| **U6 3요소** | S6 | `6:6:12` | 라이트 | ①② card·stat ③결론 — 3요소는 ③에 stagecard×3 또는 ①②③ 순차로 배치 (US-2: `8:8:8` 금지) | ③ |
| **U7 프로세스** | S7 | `6:6:6:6` | 라이트 | stagecard×4 + connector(중앙 횡단 허용, 귀결만 악센트) | 최종 단계 |
| **U8 데이터** | S8 | `16:8` | 라이트 | ①chartframe·table ②stat·해설 | ② |
| **U9 결론** | S9 | `12:12` | 라이트/다크 | ①principle ②근거·질의응답 | ① principle |
| ID | 규칙 |
| :--- | :--- |
| **PT-U1** | 슬라이드당 결론 존 1개. 기본 위치는 **우반면** (UV-2). 예외: U1·U3·U9는 좌반면 hero/제목/principle |
| **PT-U2** | 콘텐츠 하단 ≤ 960px, 푸터 존 불가침 (M2 PT-D2) |
| **PT-U3** | 좌우 반면 상단 y=216 정렬. 하단 공백 > 25% 금지 (UV-3) |
| **PT-U4** | 텍스트는 x=1920을 가로지르지 않는다 (CB-1). 텍스트 요소 폭 ≤ 1860px (UZ-3) |
| **PT-U5** | 헤더 존(제목·eyebrow)은 **좌반면**에서 시작·종료한다. 우반면 헤더 존은 메타(2필드)·비움 중 택1 |
## 5. 푸터
| 위치 | 내용 |
| :--- | :--- |
| 좌반면 (48~1908) | 출처 (caption, 60자 이하) |
| 우반면 (1932~3792) 우측 정렬 | 브랜드 · 페이지 |
## 6. 제작 절차
| 단계 | 작업 | 판정 |
| :-: | :--- | :--- |
| 1 | 메시지를 슬라이드 단위로 분해 — 1장 = 1논리 단위 | 덱 구성표 |
| 2 | 각 장에 패턴(U1~U9) 배정, 다크 ≤ 10% | 매핑 완료 |
| 3 | 존 좌표 산출 (L2d §5) | 정합 잔차 0 |
| 4 | 컴포넌트 배치 (M2 §6 카탈로그) | 카탈로그 외 0건 |
| 5 | 문안 — M2 §7 예산 | 예산 위반 0건 |
| 6 | 중앙 경계 확인 | 텍스트 횡단 0건 |
| 7 | PPTX(`slide_width=24384000`, `slide_height=6858000`) 또는 HTML(3840×1080 오써링 후 전체 스케일) | 왕복 검증 |
| 8 | 검증 §7 | 전항 PASS |
## 7. 검증 체크리스트
M2 §10 자동 A1~A13·육안 V1~V6을 적용하되, **A1·A2·A6은 아래로 대체**하고 U1~U6을 추가한다.
| # | 항목 | 기준 |
| :-: | :--- | :--- |
| A1′ | 캔버스 | 3840×1080, EMU 정합 |
| A2′ | 그리드 | 24×133+23×24 = 3744, 존 좌표 L2d §5 일치 |
| A6′ | measure | 연속 본문 존 ≤ 6col(918px, 38.2em) |
| U1 | 중앙 경계 | 텍스트 bbox의 x=1920 포함 0건 |
| U2 | 텍스트 폭 | ≤ 1860px |
| U3 | 분할 | L2d §5 목록 외 0건 |
| U4 | 결론 존 | 장당 1개, PT-U1 위치 |
| U5 | 헤더 | 좌반면 내 종료 (PT-U5) |
| U6 | 육안 — 실기 시험 | 사이니지에서 베젤 위치에 글자 걸림 0건 (가능한 경우) |
- 육안 V1(XGA 축소 판독)은 **반면 판독**으로 대체한다: 1920×540(50%) 렌더 후 각 반면의 1차 메시지 식별
### 구조 검증 결과 (modules §8.1 — `active` 등록 근거)
12항 전항 **PASS** (2026-09-29, HMCM, 자기검증 — 검증 스크립트 `98. design/Code/초와이드/verify_m7_structure.py`): 스키마 필수 필드 충족 · depends_on 기록 · 정량 명시(19종/33변형) · 완화 0건(강화 4건) · 겸용 해당 없음 · 전 슬롯 예산 · 분할 L1 대응 6종 내 · 결론 존 패턴당 1개 · 존 좌표 정합 · 카탈로그 외 0건 · 미사용 0건(M2 선별 승계) · 역할 중복 0건
---
*본 모듈은 참조 사양이다. 발표 내용의 정확성·적절성은 별도 검증해야 한다.*
RAG/design system_v0.1.1/webapp/module.webapp.md
+286
View File
@@ -0,0 +1,286 @@
# Prism — M3 웹앱 실행 명세 (Layer 3)
| 버전 | 수정일 | 수정자 | 주요 변경 내용 | 비고 |
| :--- | :--- | :--- | :--- | :--- |
| v0.1.0 | 2026-07-29 | HMCM | 신규 제정 — 웹앱(HTML·대시보드·폼·문서 사이트) 실행 명세. CSS 변수 정본 내보내기 수록, 구조 검증 12항 통과 | `active` 등록 (modules §4.4) |
| 메타 | 값 |
| :--- | :--- |
| 모듈 | **M3 `webapp`** — 웹앱 |
| 계층 | Layer 3 (실행 명세 · **자기완결형**) |
| 대상 산출물 | HTML/CSS/JS 웹앱 — 대시보드·관리도구·폼·문서 사이트·웹 보고서 |
| 상위 의존 | `Design.md` 0.1.1 · foundations 0.1.2 · medium.screen 0.1.1 · components 0.1.1 · tokens.json 0.1.1 |
| 접근성 목표 | **WCAG 2.2 AA** (CI 게이트: axe·pa11y·stylelint) |
```yaml
module:
id: webapp
name: 웹앱
version: 0.1.0
status: active
brand: saman
medium: screen
medium_variant: screen.web
dual_medium: false
format: responsive # 브레이크포인트 5단계
columns: 12 # lg·xl 기준 (BP별 §2)
type_set: compact
component_count: 20
variant_count: 35
patterns: [w1-shell, w2-dashboard, w3-form, w4-document, w5-list-detail]
depends_on: { foundations: 0.1.2, medium.screen: 0.1.1, components: 0.1.1 }
```
---
## 1. 적용 조건
| 적용 | 제외 |
| :--- | :--- |
| 웹앱·대시보드·관리도구·폼 | 모바일·태블릿 네이티브 앱 → M4 (`mobile/`) |
| 문서·가이드 사이트, 웹 보고서 | 발표 슬라이드 → M2 (`ppt/`) |
| 화면 열람용 HTML 산출물 | 인쇄 배포물 → M5 (`A3/`) — 인쇄 스타일시트는 §9 참조 |
---
## 2. 브레이크포인트·그리드 (정본 값)
| BP | 범위 (px) | 컬럼 | 마진 | 거터 | 기준 컬럼 폭 | 정합 |
| :--- | :--- | :-: | ---: | ---: | ---: | :--- |
| `xs` | 0–599 | 4 | 16 | 16 | 70 | 4×70+3×16=328 ✓ |
| `sm` | 600–903 | 8 | 24 | 16 | 55 | 8×55+7×16=552 ✓ |
| `md` | 904–1239 | 8 | 32 | 24 | 84 | 8×84+7×24=840 ✓ |
| `lg` | 1240–1599 | 12 | 32 | 24 | 76 | 12×76+11×24=1176 ✓ |
| `xl` | 1600– | 12 | 24 | 24 | 94 (**컨테이너 1440 고정**) | 12×94+11×24=1392 ✓ |
| ID | 규칙 |
| :--- | :--- |
| **WA-1** | 미디어 쿼리는 min-width(mobile-first)·px 단위. 임의 브레이크포인트 금지 (BP-1·BP-3) |
| **WA-2** | `xl` 컨테이너 1440px 고정 — 무한 확장은 measure를 파괴한다 (BP-2) |
| **WA-3** | **연속 본문 `max-width: 38em` 강제** (MS-1). 컨테이너 폭 ≠ 본문 폭. md 6col=624px(39.0em)·lg 8col=776px(48.5em)·xl 8col=920px(57.5em) 전부 38em 초과 — 본문 블록에는 반드시 max-width 적용 |
| **WA-4** | 최상위 레이아웃 영역만 그리드 정렬. 내부는 스페이싱 토큰 (GD-1~3) |
---
## 3. CSS 변수 정본 (`:root` — 이 블록이 곧 토큰 정의부다)
> 산출물 CSS에는 아래 변수만 사용한다. **변수 정의부 외 HEX·px 리터럴 0건**이 빌드 게이트다 (W1·W2).
```css
:root {
/* ── color (light) ─────────────────────────────── */
--prism-bg-canvas: #F4F3F0; /* sand G4 — 순백 전면 금지 */
--prism-bg-card: #FFFFFF; /* white G0 */
--prism-text-body: #474235; /* brown G72 — on sand 9.02 AAA */
--prism-text-heading: #1F524B; /* green G69 — on sand 8.00 AAA */
--prism-text-subtle: #474235; /* 저강조는 색이 아니라 크기·웨이트로 */
--prism-text-accent: #D05C26; /* orange G47 — 대형 전용(24px+/19px+Bold) */
--prism-border-default: #474235;
--prism-border-strong: #1F524B;
--prism-status-do: #005A4E; --prism-status-do-bg: #DCEAE6;
--prism-status-dont: #8F2A11; --prism-status-dont-bg: #F6DFDA;
--prism-status-caution: #6B4A00; --prism-status-caution-bg: #F5E7CC;
--prism-status-tip: #0A4E86; --prism-status-tip-bg: #DDE8F3;
--prism-dv-1: #C08A2E; --prism-dv-2: #6E8F3C; --prism-dv-3: #3C6E9F;
--prism-dv-4: #8C3B14; --prism-dv-5: #1B4A43; --prism-dv-6: #5E4370;
/* ── space (base 8px = 0.5rem) ──────────────────── */
--prism-space-025: 0.125rem; /* 2px */
--prism-space-050: 0.25rem; /* 4px */
--prism-space-100: 0.5rem; /* 8px */
--prism-space-150: 0.75rem; /* 12px */
--prism-space-200: 1rem; /* 16px — card padding */
--prism-space-300: 1.5rem; /* 24px — block gap */
--prism-space-400: 2rem; /* 32px — zone gap */
--prism-space-600: 3rem; /* 48px */
--prism-space-800: 4rem; /* 64px */
/* ── type (root 16px 미고정 — html font-size 선언 금지) ── */
--prism-type-caption: 0.8125rem; --prism-lh-caption: 1.55;
--prism-type-body-sm: 0.875rem; --prism-lh-body: 1.70;
--prism-type-body: 1rem;
--prism-type-body-lg: 1.125rem;
--prism-type-title-sm: 1.25rem; --prism-lh-title: 1.50;
--prism-type-title: 1.625rem;
--prism-type-title-lg: 2rem;
--prism-type-display: 2.875rem; --prism-lh-display: 1.25;
--prism-type-display-lg: 4.125rem;
/* ── radius · stroke · z · motion ───────────────── */
--prism-radius-sm: 4px; --prism-radius-md: 8px; --prism-radius-lg: 12px;
--prism-radius-pill: 9999px;
--prism-stroke-hairline: 1px; --prism-stroke-regular: 2px; --prism-stroke-bold: 3px;
--prism-z-raised: 100; --prism-z-sticky: 200; --prism-z-dropdown: 300;
--prism-z-scrim: 400; --prism-z-modal: 500; --prism-z-popover: 600;
--prism-z-toast: 700; --prism-z-tooltip: 800;
--prism-scrim: rgba(0, 0, 0, 0.32);
--prism-motion-fast: 100ms; --prism-motion-moderate: 200ms; --prism-motion-slow: 300ms;
--prism-ease-standard: cubic-bezier(0.2, 0, 0, 1);
--prism-ease-enter: cubic-bezier(0, 0, 0, 1);
--prism-ease-exit: cubic-bezier(0.3, 0, 1, 1);
--prism-focus-ring: 3px; --prism-focus-offset: 2px;
--prism-measure-max: 38em;
}
/* ── dark theme (data-theme + OS 연동) ─────────────── */
:root[data-theme="dark"] {
--prism-bg-canvas: #111111; /* obsidian G95 */
--prism-bg-card: #111111; /* 카드는 보더로 분리 */
--prism-text-body: #F4F3F0; /* sand on obsidian 17.02 AAA */
--prism-text-heading: #F4F3F0; /* ⚠ green 텍스트 금지 (2.13:1) — 면·도형만 */
--prism-text-subtle: #D3D3D3; /* subtle 12.61 AAA */
--prism-text-accent: #D05C26; /* 4.71 AA — 대형 권장 */
--prism-border-default: #D3D3D3;
--prism-border-strong: #F4F3F0;
/* 상태색 다크: container↔on 반전 (tokens v0.1.1, 실측 동일) */
--prism-status-do: #DCEAE6; --prism-status-do-bg: #005A4E;
--prism-status-dont: #F6DFDA; --prism-status-dont-bg: #8F2A11;
--prism-status-caution: #F5E7CC; --prism-status-caution-bg: #6B4A00;
--prism-status-tip: #DDE8F3; --prism-status-tip-bg: #0A4E86;
}
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) { /* 위 dark 값셋 동일 적용 */ }
}
```
| ID | 규칙 |
| :--- | :--- |
| **CSS-1** | `html { font-size: <px> }` 선언 금지 (UN-2) — 사용자 브라우저 설정 존중 |
| **CSS-2** | 타입·간격은 rem, 보더·헤어라인은 px (UN-1·UN-3) |
| **CSS-3** | 다크 테마는 `data-theme` 속성 + `prefers-color-scheme` 연동, 사용자 재정의 3택(light/dark/system) 영속 저장 (TC-1~TC-4) |
| **CSS-4** | 다크에서 `--prism-text-heading`에 green을 재정의하지 않는다 — **실측 2.13:1 판독 불가** (TM-S3) |
| **CSS-5** | 텍스트 색에 알파 금지. 알파는 스크림·오버레이·상태 레이어만 (AL-1·AL-2) |
---
## 4. 인터랙션·접근성 핵심 (요약 정본)
| 항목 | 값 · 규칙 |
| :--- | :--- |
| 상태 표현 | **GRADE 시프트**: hover ±4 · active ±8 · selected ±12 (라이트 +, 다크 −). focus는 색 변화 없이 **링만** |
| disabled | 불투명도 금지 — 저강조 토큰 사용, 형태 판별 가능 유지. 가능하면 활성 + 오류 메시지 우선 (DS-1~4) |
| 포커스 링 | **3px 이중 링 + 오프셋 2px**, `:focus-visible`, `outline: none` 대체 없는 선언 금지 (FC-1·FC-2) |
| 히트 영역 | **최소 44×44px** (권장 48), 인접 간격 ≥ 8px, `pointer: coarse`에서 48px (HT-1~3·PT-1) |
| hover | 보강 수단일 뿐 — hover 없이 기능 완전, `@media (hover: hover)` 격리 (HV-3·HV-4) |
| 대비 | 본문 ≥ 4.5:1 (AA) 필수 — 등록 페어는 전부 AAA로 여유 충족. 비텍스트 ≥ 3:1 |
| 모션 | `transform`·`opacity`만 애니메이션, `prefers-reduced-motion` 필수 구현 (MT-3·RM-1) |
| 시맨틱 | 네이티브 요소 우선, 헤딩 레벨 건너뜀 금지, 아이콘 버튼 접근 가능한 이름 (SM-1~5) |
| Elevation | **보더 우선**, 그림자는 보조 (`raised` 0 1px 2px / `overlay` 0 4px 12px / `modal` 0 8px 24px + 스크림 32%). 다크에서는 표면 톤 상향으로 대체 |
---
## 5. 화면 패턴 (5종)
| ID | 구조 | 구성 | 적용 |
| :--- | :--- | :--- | :--- |
| **W1 앱 셸** | sticky header + 콘텐츠 | header(메타 4슬롯: 화면ID·권한·갱신시각·환경) + main. lg 이상에서 좌측 내비 레일(`4:8`의 4col 또는 고정 240~280px) | 전 화면 공통 골격 |
| **W2 대시보드** | 카드 그리드 | stat·chartframe·table 카드 배치. xs 1열 → sm·md 2열 → lg·xl 3~4열. 존당 stat ≤ 3 | 현황·지표 |
| **W3 폼** | 1열 수직 | input 수직 나열 (**다열 폼 금지**), max-width 38em, 레이블 상단, primary 버튼 1개 | 입력·설정 |
| **W4 문서** | 목차 + 본문 | md 이상 `4:8`(toc 레일 + 본문 38em), 미만 단일 흐름 + 상단 앵커 toc. 아코디언은 1순위 아님 (AD-1) | 가이드·규정 열람 |
| **W5 목록-상세** | 분할 뷰 | lg 이상 `4:8`(목록+상세), 미만 스택 내비게이션. 행 hover는 보강만 | 데이터 관리 |
공통: 결론·핵심 지표는 viewport당 1개 존에 집약 (PD-1). 본문이 있는 패턴은 전부 WA-3(38em) 적용.
---
## 6. 컴포넌트 선별 (20종 / 변형 35종)
`eyebrow`(2) · `header`(1) · `rule`(1) · `card`(4) · `table`(4) · `stat`(1) · `chartframe`(1) · `specsheet`(1) · `directive`(3) · `badge`(4) · `scope`(1) · `toc`(1) · `stepper`(1) · `xref`(1) · `mediaframe`(1) · **`button`(4)** · **`input`(1)** · **`modal`(1)** · **`toast`(1)** · **`disclosure`(1)**
**미선별**: `hero`(랜딩 제작 시 조건부 추가), `footer`(screen 비적용 — 매트릭스 준수), `stagecard`·`connector`·`principle`(문서 패턴 W4에서 조건부 추가 가능 — 추가 시 카탈로그 규정 준수).
주요 사용 규정: `primary` 버튼 화면당 1개, 레이블 동사 시작 ≤ 8자 · input 레이블 플레이스홀더 대체 금지, 오류 3요소(무엇이·왜·어떻게) + 색·기호·텍스트 3중 · modal 포커스 트랩 + Esc + 중첩 금지 · toast ≥ 5초, 동시 1개, 중요 정보 토스트 단독 전달 금지 · table sticky 헤더 + 가로 스크롤 허용(MS-3 예외) · disclosure 인쇄 시 전체 전개.
---
## 7. 분량 예산
| 슬롯 | 권장 | 최대 | 근거 |
| :--- | :-: | :-: | :--- |
| 화면 제목 (title) | 12자 | 20자 | 헤더 1행 |
| 카드 제목 / 본문 | 12 / 60자 | 20 / 120자 | 카탈로그 승계, 최소 카드 폭(xs 328px) 기준 |
| 버튼 레이블 | 4자 | 8자 | "저장"·"제출" — 결과를 말한다 |
| input 레이블 / 도움말 / 오류 | 8 / 30 / 40자 | 12 / 40 / 60자 | 1~2행 |
| toast 메시지 | 20자 | 40자 | 1~2행, 5초 내 판독 |
| 표 셀 | 20자 | 40자 | 초과 시 상세 화면 이관 |
| 빈 상태(empty state) 안내 | 30자 | 60자 | 원인 + 다음 행동 |
---
## 8. HTML 골격 (정본 시작점)
```html
<!doctype html>
<html lang="ko"><!-- font-size 선언 금지 -->
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>화면 제목 — 서비스명</title><!-- 페이지 제목 필수 (A12) -->
</head>
<body>
<a class="skip-link" href="#main">본문 바로가기</a><!-- FO-4 -->
<header><!-- W1 셸: 화면ID·권한·갱신시각·환경 --></header>
<nav aria-label="주 메뉴"><!-- lg+ 레일 --></nav>
<main id="main"><!-- 패턴 W2~W5 --></main>
</body>
</html>
```
## 9. 인쇄 스타일시트 (`@media print`)
그림자 전부 제거 (EV-4) · 알파 평탄화 (AL-4) · disclosure 전체 전개 (AD-5) · 링크 뒤 목적지 명시 · 색상은 등록 페어 유지, 본문 검정 계열. 본격 인쇄물은 M5로 재조판한다.
---
## 10. 제작 절차
| 단계 | 작업 | 판정 |
| :-: | :--- | :--- |
| 1 | 화면 목록 작성, 각 화면에 패턴(W1~W5) 배정 | 매핑 완료 |
| 2 | §3 CSS 변수 블록을 그대로 탑재 (수정 금지 — 개정은 상위 계층에) | 리터럴 0건 |
| 3 | §8 골격에서 시작, 시맨틱 마크업 (SM-1~5) | 랜드마크·제목 |
| 4 | 컴포넌트 구현 — §6 선별 + §4 인터랙션 규정 | 카탈로그 외 0건 |
| 5 | 반응형 — §2 BP, 본문 38em, 히트 영역 44px | WA-1~4 |
| 6 | 다크 테마 — §3 dark 블록 + 전 화면 다크 렌더 확인 | green 텍스트 0건 |
| 7 | CI 게이트 — stylelint·axe·pa11y 연결 | 통과 없이 머지 금지 (QG-2) |
| 8 | 검증 §11 | 전항 PASS |
---
## 11. 검증 체크리스트
### 자동 (CI 게이트 — W1~W18 승계 핵심)
| # | 항목 | 기준 |
| :-: | :--- | :--- |
| A1 | 색·치수 리터럴 | 변수 정의부 외 0건 |
| A2 | root font-size 고정 | 0건 |
| A3 | `outline: none` 대체 없는 선언 | 0건 |
| A4 | z-index·양수 tabindex | 토큰 외 0건 / 양수 0건 |
| A5 | 그리드 정합 | 전 BP 잔차 0 (§2) |
| A6 | axe 색 대비·이름·alt | 위반 0건 |
| A7 | 헤딩 레벨 건너뜀 | 0건 |
| A8 | `prefers-reduced-motion` | 구현 존재 |
| A9 | 히트 영역 | ≥ 44px (인라인 링크 제외) |
| A10 | 본문 max-width | ≤ 38em |
| A11 | 다크 페어 재계산 | 전 페어 통과, green 텍스트 0건 |
| A12 | 텍스트 알파·hover 의존 | 0건 |
### 수동
| # | 항목 |
| :-: | :--- |
| V1 | 키보드 단독 전 기능 조작 + Tab 순서 = 시각 순서 |
| V2 | 스크린리더 주요 흐름 1회 낭독 |
| V3 | 200% 확대 시 손실·가로 스크롤 없음 |
| V4 | 그레이스케일 판독 (색 단독 의존 검출) |
| V5 | 터치 기기 실기 (hover 의존·히트 영역) |
| V6 | 인쇄 스타일시트 (§9) 출력 확인 |
### 구조 검증 결과 (modules §8.1 — `active` 등록 근거)
12항 전항 **PASS** (2026-07-29, HMCM): 스키마 충족 · depends_on 기록 · 정량 명시(20종/35변형) · 완화 0건 · 전 슬롯 예산 · 패턴-콘텐츠 매핑 · 그리드 정합(624·920 정정 반영) · 카탈로그 외 0건 · 미사용 0건(조건부 선별 명시) · 역할 중복 0건 · 결론 존 규정 · 겸용 해당 없음
---
*본 모듈은 참조 사양이다 (DC-3). "접근 가능한 컴포넌트로 만들었다"가 접근 가능한 서비스를 보증하지 않는다 — 서비스 단위 검증은 별도로 수행한다 (AT-4).*
RAG/design system_v0.1.1/무제.md
View File
Whitespace-only changes.
RAG/design system_v0.1.1/진단보고서_v0.1.0_문제점_및_개정내역_2026-07-29_v1.0.0.md
+141
View File
@@ -0,0 +1,141 @@
# Prism Design System v0.1.0 진단 보고서 — 문제점 및 v0.1.1 개정 내역
| 버전 | 수정일 | 수정자 | 주요 변경 내용 | 비고 |
| :--- | :--- | :--- | :--- | :--- |
| v1.0.0 | 2026-07-29 | HMCM | 신규 작성 — v0.1.0 전수 진단(9파일 6,061행) 및 v0.1.1 개정 내역 확정 | 전 수치 프로그램 재검산 완료 |
| 메타 | 값 |
| :--- | :--- |
| 진단 대상 | `DOC/design system/` (Prism Design System v0.1.0, 9파일 310,852자) |
| 진단 방법 | ① 전 파일 정독 ② 색상·대비·타입·그리드 수치 프로그램 재계산 ③ 토큰 참조 무결성 교차 대조 ④ 문서↔JSON 드리프트 검사 (시스템 자체 검증 규칙 F1~F9를 시스템 자신에게 적용) |
| 결과 요약 | **수치 결함 4건 · 자기모순 2건 · 토큰 무결성 위반 5건 · 구조 결함 5건 · 미구축 결함 1건 (치명)** |
| 조치 | 전 항목 v0.1.1에서 보정 완료. 보정 내역은 §4 대조표 참조 |
---
## 1. 진단 총평
v0.1.0은 색 체계(GRADE)·대비 실측·타입 생성식·그리드 정합 등 **핵심 정량 체계는 프로그램 재검산 결과 전량 정확**했다. 검증된 항목: 7색 GRADE 값, 대비 페어 14쌍 실측값, 상태색 4종, 데이터시각화 6색, 3개 매체 타입 스케일 27개 값, 판형 5종 그리드 정합식 — 모두 재계산값과 일치 `[검증: 자체 스크립트, 2026-07-29]`.
그러나 시스템이 스스로 "기본 실패 모드"라고 규정한 **드리프트(F9)와 미정의 토큰 참조(F1)가 시스템 자신의 문서 안에서 발견**되었다. 또한 가장 치명적인 문제는 결함이 아니라 **미완성**이다 — Layer 3 모듈이 전부 `draft`(0 active)여서, A3 설명자료·웹앱·PPT·모바일앱이라는 실제 사용처에 시스템을 적용할 실행 명세가 존재하지 않았다.
---
## 2. 문제점 목록
### 2.1 치명 — 실사용 불가 결함
| # | 문제 | 위치 | 상세 |
| :-: | :--- | :--- | :--- |
| **C1** | **Layer 3 모듈 전량 미구축 (0 active)** | `design.modules.md §4.1` | M1~M4 전부 `draft`. M1만 YAML 스텁이 있고 M2(PPT)·M3(웹앱)·M4(모바일)는 등록부 행만 존재. **A3 설명자료·웹앱·PPT·모바일앱 산출물을 실제로 만들려면 매번 6개 파일(~15만 자)을 로드해 파생 절차 8단계를 처음부터 수행해야 한다.** 시스템의 존재 목적(결정론적 파생)이 마지막 계층에서 미완이다 |
### 2.2 수치 결함 (프로그램 재검산으로 확정)
| # | 문제 | 위치 | 검증값 |
| :-: | :--- | :--- | :--- |
| **N1** | A3 가로 **8col 존 폭 249mm는 오계산**. 8×25.5+7×6 = **246mm**. 249mm로 조판 시 `8:4` 분할이 콘텐츠 폭 372mm를 3mm 초과(249+6+120=375) — 그리드 정합(GC-3) 파괴 | `design.tokens.json` A3-landscape zones · `design.medium.print.md §4.4` | 246.0 |
| **N2** | screen `md` 6col 존 **612px는 오계산**. 6×84+5×24 = **624px** = 39.0em (문서 기재 38.3em) — measure 판정까지 오염 (38em 상한 초과이므로 판정도 ✓→✗) | `design.medium.screen.md §4.3` | 624 / 39.0em |
| **N3** | screen `xl` 8col 존 **776px는 `lg` 값의 오복사**. 8×94+7×24 = **920px** = 57.5em (기재 48.5em) | `design.medium.screen.md §4.3` | 920 / 57.5em |
| **N4** | 상태색 Tip ΔG **58은 오기**. G68−G9 = **59** (tokens.json은 59로 정확 — 문서↔JSON 드리프트, 시스템 규칙 GV-7에 따라 JSON 우선) | `design.foundations.md §2.7` | 59 |
### 2.3 자기모순 (규칙 ↔ 값 충돌)
| # | 문제 | 위치 | 상세 |
| :-: | :--- | :--- | :--- |
| **S1** | **RT-2 "인덱스 −3 이동" ↔ 실제 값 불일치.** 규칙 문언대로면 `display-lg` +12→+9 = 46px여야 하나, 같은 절의 표와 tokens.json은 32px(n=+6, −6 이동)·26px(n=+4, −5 이동)를 기재. GV-7(JSON 우선)에 따라 **값이 정본, 규칙 문언이 오류** | `design.medium.screen.md §4.2` | 문언을 "display-lg→n+6, display→n+4로 강등"으로 정정 |
| **S2** | xs·sm에서 `display-lg`(32px) = `title-lg`(32px) **동일 크기** → TH-1(인접 헤딩 레벨 인덱스 차 2 이상) 위반 소지. 규칙 어디에도 이 충돌의 처리가 없음 | `design.medium.screen.md §4.2` | 동일 화면 내 병용 금지 단서 신설 필요 |
### 2.4 토큰 참조 무결성 위반 (F1 — 시스템이 선행 시스템을 비판한 바로 그 결함)
| # | 미정의/불일치 참조 | 위치 | 정본 |
| :-: | :--- | :--- | :--- |
| **T1** | `sys.accent` (미정의) | `design.components.md` §3.1.1 아이브로 · §3.1.3 히어로 · §3.2.3 커넥터 | `sys.text.accent` |
| **T2** | `sys.pair.emphasis` (미정의) | `design.components.md` §3.5.1 뱃지 변형표 | `sys.pair.surface-emphasis` |
| **T3** | `sys.stroke.hairline` (stroke는 sys가 아닌 foundation 네임스페이스) | `design.components.md` §3.1.4 구분선 | `foundation.stroke.hairline` |
| **T4** | comp 토큰의 경로 표기 관례 불통일 — `screen.scrim_opacity`·`screen.target_size.web_min` (매체 상수를 축약 경로로 참조) | `design.tokens.json` comp.modal · comp.button | `mediums.screen.*`로 정규화 + 경로 관례 주석 신설 |
| **T5** | `radius.pill` 자료형 불일치 — foundation은 문자열 `"9999"`, screen은 숫자 `9999` | `design.tokens.json` | 숫자로 통일 |
### 2.5 구조 결함
| # | 문제 | 위치 | 상세 |
| :-: | :--- | :--- | :--- |
| **G1** | **치트시트에 버전 문자열 "v0.1.0" 중복 기재** — GV-2("버전 표기는 파일당 1곳") 자기 위반. 선행 SAMAN의 4중 버전 표기를 비판하며 세운 규칙을 코어 파일이 스스로 위반 | `Design.md §5` | 치트시트에서 버전 제거 |
| **G2** | **RAG 상대 경로 단절.** 전 파일이 `RAG/design.benchmark_2026-07-28_v0.1.0.md`를 참조하나, 실제 파일은 시스템 폴더 하위가 아니라 **프로젝트 루트 `RAG/`**에 있음 (시스템 이관 시 경로 관계 변경) | 전 파일 근거 출처 절 | 경로 규정 명시 (프로젝트 루트 RAG 기준) |
| **G3** | **`screen.mobile` 변형이 태블릿(md)을 배제** — "xs·sm만 사용". 태블릿 앱은 md(904~1239px) 구간이 주 사용 영역이므로 모바일앱 모듈을 파생할 수 없음 | `design.medium.screen.md §1.2` | mobile 적용 범위를 xs·sm·**md**로 확장 |
| **G4** | **상태색 다크 테마 container 미등록.** TM-S5가 "다크용 container 별도 등록"을 요구하나 tokens.json에 값이 없음 → TN-6(값셋 누락 시 해당 매체 사용 불가)에 따라 **다크 테마에서 상태색 사용이 규정상 불가능한 상태** | `design.tokens.json` ref.status_color | 다크 페어 등록 (전경↔배경 반전 — WCAG 대비는 교환 대칭이므로 실측값 동일, 신규 색 0개) |
| **G5** | **`orange on white` 페어 미등록.** 흰 카드(`sys.bg.card`) 위 악센트 텍스트는 실사용 빈발 조합이나 등록부에 없음 → CM-9(미등록 조합 사용 금지)에 걸려 사용 불가. 실측 4.01:1 (대형 전용 조건 충족) | `design.tokens.json` contrast.pairs · `design.brand.md §8.5` | LARGE_ONLY로 명시 등록 |
| **G6** | **§1.4 "매체 다중값 구조" 문서↔JSON 구조 불일치.** foundations §1.4는 `sys.type.body` 1토큰이 3매체 값을 동시 보유하는 구조를 "핵심 기제"로 제시하나, 실제 JSON은 `foundation.typography`(비율) + `mediums.*.type_scale`(절대값)로 **분산 구현**. 기제 자체는 동작하나 문서가 실구조를 오도 | `design.foundations.md §1.4` ↔ `design.tokens.json` | 실구조(분산 바인딩)와 해석 경로를 문서에 명시 |
| **G7** | BV-2 판정 표기 모호 — 임계(ΔG≥70) 미달(68)인데 판정 열이 "PASS". 실제 처리는 CG-2 실측 등록으로 적법하나 표기가 규칙 문언과 충돌 | `design.brand.md §8.4` | "조건부 PASS (CG-2 실측 등록)"로 명확화 |
### 2.6 사용성 결함 (신규 요구 대비)
| # | 문제 | 상세 |
| :-: | :--- | :--- |
| **U1** | 매체별 **실행형 단일 문서 부재** — 산출물 1건 제작에 최소 6파일 로드 필요. 에이전트·실무자가 "A3 설명자료 1장"을 만들기 위한 자기완결 명세가 없음 |
| **U2** | 웹앱용 **CSS 변수 내보내기(export) 규격 부재** — screen 프로파일은 규칙만 있고 `--prism-*` CSS 커스텀 프로퍼티 정의가 없어 html 구현 시 각자 변환해야 함 |
| **U3** | PPT용 **EMU 좌표 상수표가 그리드 항목에 한정** — 타입·간격·존의 완성된 EMU 환산표 부재 |
| **U4** | 태블릿 대상 명세 부재 (G3과 연동) |
---
## 3. v0.1.1 개정 방침
1. **보정(P)**: §2.2~2.5의 전 결함을 원 파일에 직접 보정하고 각 파일 변경 이력에 기록한다. 수치 보정이므로 PATCH, 규칙 강화·토큰 추가는 MINOR 기준을 적용하되, 폴더 단위 버전(`design system_v0.1.1`)으로 총괄한다.
2. **구축(B)**: C1·U1~U4 해소를 위해 **매체별 SUB 시스템 4종을 신설**한다. 각각 자기완결형 실행 명세로, 코어 로드 없이 해당 매체 산출물을 제작할 수 있는 수준으로 작성한다.
| SUB 폴더 | 모듈 | 매체 | 대상 산출물 |
| :--- | :--- | :--- | :--- |
| `A3/` | M5 A3 설명자료 | print (A3 가로) | A3 설명자료·슬라이드형 인쇄물 |
| `ppt/` | M2 16:9 PPT 덱 | presentation | PPT·발표 슬라이드 |
| `webapp/` | M3 웹앱 | screen.web | HTML·웹앱·대시보드 |
| `mobile/` | M4 모바일·태블릿 앱 | screen.mobile | 모바일·태블릿 앱 |
---
## 4. 보정 대조표 (변경 전 → 후)
| # | 파일 | 변경 전 | 변경 후 | 근거 |
| :-: | :--- | :--- | :--- | :--- |
| N1 | tokens.json · medium.print.md | A3L 8col `249` / 분할 `8:4` 249/120 | **246** / 246/120 | 8×25.5+7×6=246 |
| N2 | medium.screen.md §4.3 | md 6col `612px / 38.3em ✓` | **624px / 39.0em ✗(38 초과)** — MS-1 max-width 38em 적용 명시 | 6×84+5×24=624 |
| N3 | medium.screen.md §4.3 | xl 8col `776px / 48.5em` | **920px / 57.5em** | 8×94+7×24=920 |
| N4 | foundations.md §2.7 | Tip ΔG `58` | **59** | 68−9=59, JSON 정본 일치 |
| S1 | medium.screen.md §4.2 | RT-2 "인덱스를 −3 이동" | "display-lg→**n+6**, display→**n+4**로 강등 (title-lg·title 값과 동일)" | 표·JSON 값이 정본 (GV-7) |
| S2 | medium.screen.md §4.2 | (규정 없음) | RT-5 신설: xs·sm에서 display 계열과 title 계열 **동일 화면 병용 금지** | TH-1 보전 |
| T1 | components.md | `sys.accent` ×3 | `sys.text.accent` | F1 무결성 |
| T2 | components.md | `sys.pair.emphasis` | `sys.pair.surface-emphasis` | F1 |
| T3 | components.md | `sys.stroke.hairline` | `foundation.stroke.hairline` | F1 |
| T4 | tokens.json comp | `screen.scrim_opacity` 등 축약 경로 | `mediums.screen.*` 정규화 + `_path_convention` 주석 | F9 |
| T5 | tokens.json | radius.pill `"9999"` | `9999` (숫자) | 자료형 통일 |
| G1 | Design.md §5 | 치트시트 "v0.1.0" | 버전 문자열 제거 | GV-2 |
| G2 | Design.md §1.2 | `RAG/design.benchmark_*` (상대) | 근거 파일 위치 규정: **프로젝트 루트 `RAG/`** 명시 | 경로 단절 해소 |
| G3 | medium.screen.md §1.2 | mobile: "xs·sm만 사용" | "xs·sm·**md(태블릿)** 사용" | 태블릿 지원 |
| G4 | tokens.json | 상태색 다크 값 없음 | `dark` 페어 등록 (container↔on 반전, 실측 동일) | TM-S5·TN-6 |
| G5 | tokens.json · brand.md §8.5 | orange/white 미등록 | LARGE_ONLY 등록 (실측 4.01) | CM-9 |
| G6 | foundations.md §1.4 | 다중값 구조 예시만 제시 | 실구현 구조(분산 바인딩)와 해석 경로 단서 추가 | 문서↔JSON 정합 |
| G7 | brand.md §8.4 | BV-2 "PASS" | "조건부 PASS (CG-2 실측 등록)" | 표기 명확화 |
| C1 | modules.md §4.1 | M2~M4 draft·명세 없음 | M2~M5 **active** + SUB 폴더 실체 명세 4종 신설 | §3 방침 |
---
## 5. 잔존 리스크 (v0.1.1에서 미해결 — 인지 필요)
| # | 항목 | 사유 |
| :-: | :--- | :--- |
| 1 | 브랜드 색 CMYK 등가값 미등록 | 인쇄소 프로파일 확인 전 기재 금지 원칙(CV-1~CV-3) 유지 — 절차상 의도된 공백 |
| 2 | 한국 시장 표준 CMYK 프로파일 미확정 | 1차 자료 부재 (기존 [미검증] 유지) |
| 3 | 폴백 서체 정규화 계수 미등재 | 실측 절차 필요 (NF-2) — Pretendard 단독 운용 시 영향 없음 |
| 4 | tokens.json 구조의 다중값 통합 재설계 | MAJOR 변경에 해당하므로 v0.1.1(PATCH+MINOR) 범위에서 제외. G6 문서 보정으로 갈음 |
| 5 | X1 초와이드(3.55:1) 프로파일 | 확장 슬롯 유지 (요구 매체 아님) |
---
## 6. 검증 확인
- 전 대비 페어 14쌍 + 상태색 8측정 + 데이터시각화 6색: **프로그램 재계산 일치** ✓
- 타입 스케일 3매체 × 9역할: **생성식 재계산 일치** (half-up 반올림 포함) ✓
- 그리드 정합: 판형 5종·브레이크포인트 5종·프레젠테이션 — **잔차 0** ✓ (보정 후 존 폭 포함)
- v0.1.1 tokens.json: **JSON 파싱 유효성 검증** ✓
- 보정 후 재검산: §4 전 항목 PASS ✓
*본 보고서의 모든 수치는 스크립트로 재계산되었다. 수기 판정 0건 (CG-3·CM-10 준수).*