- 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>
485 lines
29 KiB
Markdown
485 lines
29 KiB
Markdown
# 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)
|