ypshim/Pier_v1
1
0 Fork 0
generated from disong/ITAM-test
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
56f76cf178960bdc2e2a2b1356aa348cdbd738ed
Pier_v1/RAG/design system_v0.1.1/design.components.md
T
ahnyongjooandClaude Sonnet 5.5 964a841de1 chore(rebar): Pier_T_rebar 작업 폴더 초기 구성 및 외부 의존 파일 통합 
- 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>
2026-10-28 11:20:18 +09:00

953 lines
36 KiB
Markdown
Raw Blame History

# 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` 변형(선행 기호 부착)으로 해소한다.
Reference in new issue View Git Blame Copy Permalink