0 Fork 0

Files

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

36 KiB

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.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.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

본 카탈로그의 설계 특징

해부구조 = 문안 규칙 목차 (T27) — 부위를 나열하는 데 그치지 않고 각 부위에 분량 예산 + 문안 규칙을 부여했다. 컴포넌트 정의와 콘텐츠 규정을 분리하지 않는다
형태 + 색 이중 부호화 — directive 4상태(✓✕▲▣)와 badge 4변형(실선/면채움/점선/기호부착)은 색 없이도 구분된다. 흑백 출력·색약 대응이 설계에 내장되어 있다
매체 적용 매트릭스 — 25종 중 19종이 전 매체 공통이다. 컨트롤 5종만 screen 전용이며, 이는 Layer 1이 매체 중립적으로 설계된 결과다

선행 시스템 결함 대응: 이전 A3 시스템의 개정 구분 뱃지 5종은 색상만으로 구분되어 흑백 출력 시 판별 불가였다. badge의 marked 변형(선행 기호 부착)으로 해소한다.

36 KiB Raw Blame History

Prism Design System — Components

목차

1. 문서화 규격 (Blueprint)

1.1 골격

1.2 메타 4필드

1.3 lead 문장

1.4 해부구조 = 문안 규칙의 목차

2. 매체 중립 정의 원칙

2.1 정의는 중립, 표현은 매체별

2.2 변형표 읽는 법

2.3 컴포넌트 계층

3. 카탈로그

3.1 크롬 (Chrome)

3.1.1 아이브로 (component.eyebrow)

3.1.2 헤더 (component.header)

3.1.3 히어로 (component.hero)

3.1.4 구분선 (component.rule)

3.1.5 푸터 (component.footer)

3.2 구조 (Structure)

3.2.1 카드 (component.card)

3.2.2 스테이지 카드 (component.stagecard)

3.2.3 커넥터 (component.connector)

3.2.4 원칙 마커 (component.principle)

3.3 데이터 (Data)

3.3.1 표 (component.table)

3.3.2 수치 강조 (component.stat)

3.3.3 차트 프레임 (component.chartframe)

3.3.4 수치 명세표 (component.specsheet)

3.4 지침 (Directive)

3.4.1 지침 카드 (component.directive)

3.5 상태 (Status)

3.5.1 뱃지 (component.badge)

3.5.2 적용 조건 블록 (component.scope)

3.6 내비게이션 (Navigation)

3.6.1 목차 블록 (component.toc)

3.6.2 단계 인디케이터 (component.stepper)

3.6.3 상호참조 (component.xref)

3.7 미디어 (Media)

3.7.1 도판 프레임 (component.mediaframe)

3.8 컨트롤 (Control) — screen 전용

3.8.1 버튼 (component.button)

3.8.2 입력 (component.input)

3.8.3 모달 (component.modal)

3.8.4 알림 (component.toast)

3.8.5 개폐 (component.disclosure)

4. 매체 적용 매트릭스

5. 변형 관리 원칙

5.1 1변형 = 1행

5.2 상태 관리

5.3 토큰 소비 원칙

6. 컴포넌트 추가 절차

6.1 절차

6.2 등재 체크리스트

6.3 아이콘 추가

근거 출처 요약

36 KiB

Raw Blame History

3.1.1 아이브로 (`component.eyebrow`)

3.1.2 헤더 (`component.header`)

3.1.3 히어로 (`component.hero`)

3.1.4 구분선 (`component.rule`)

3.1.5 푸터 (`component.footer`)

3.2.1 카드 (`component.card`)

3.2.2 스테이지 카드 (`component.stagecard`)

3.2.3 커넥터 (`component.connector`)

3.2.4 원칙 마커 (`component.principle`)

3.3.1 표 (`component.table`)

3.3.2 수치 강조 (`component.stat`)

3.3.3 차트 프레임 (`component.chartframe`)

3.3.4 수치 명세표 (`component.specsheet`)

3.4.1 지침 카드 (`component.directive`)

3.5.1 뱃지 (`component.badge`)

3.5.2 적용 조건 블록 (`component.scope`)

3.6.1 목차 블록 (`component.toc`)

3.6.2 단계 인디케이터 (`component.stepper`)

3.6.3 상호참조 (`component.xref`)

3.7.1 도판 프레임 (`component.mediaframe`)

3.8.1 버튼 (`component.button`)

3.8.2 입력 (`component.input`)

3.8.3 모달 (`component.modal`)

3.8.4 알림 (`component.toast`)

3.8.5 개폐 (`component.disclosure`)