`·`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` 변형(선행 기호 부착)으로 해소한다.

# 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.`) **메타 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)**: `` 필수 / `` 지정 / 레이아웃 용도 표 금지 --- ### 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)**: 표 대체 포맷 제공 / ``·`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` 변형(선행 기호 부착)으로 해소한다.