| name | prism-design |
| version | 1 |
| description | 프리즘 디자인(prism-design) — 보고서, 화이트페이퍼, 릴리즈노트, 제품 페이지, 키노트 덱, 인포그래픽을 중립적이고 구조적인 HTML로 만드는 디자인·시각화 시스템. 트리거: 프리즘디자인, prism-design, 보고서 만들어줘, 화이트페이퍼, 릴리즈노트, 구조적 HTML, 시각화 보고서. NOT: apple-canvas, teenage-design, box-cut-design, editorial-design, UI 설계, HTML 피니싱.
|
| license | Proprietary. Internal use. |
Prism Design
중립·구조 중심의 HTML 문서·내러티브 페이지를 만듭니다. 에디토리얼하고 정돈된 신뢰감이 목표이며, 프리즘 액센트는 소량으로만 씁니다.
Use When
- 형이 디자인된 보고서·화이트페이퍼·릴리즈노트·모델카드·장문 스크롤·제품 내러티브·키노트풍 덱을 원할 때 씁니다.
- 섹션이 많고 스펙터클보다 구조·신뢰감이 중요할 때 적합합니다.
- "보고서로·화이트페이퍼로·프리즘으로·구조적으로·인포그래픽으로 만들어줘"라고 할 때 잡힙니다.
- 데이터·수치·관계·시간축·분포가 들어와도 일반 차트가 아니라 프리즘 고유언어(무채색 헤어라인 + 프리즘 1곳)로 번안해 담습니다.
NOT — 감성 프리미엄 쇼케이스(apple-canvas)·문화 캠페인(teenage-design)·흑백 캠페인(box-cut-design)·매거진 serif 에디토리얼(editorial-design)·컬러 페어 블록(color-skill)·대시보드 실시간 관리 UI·앱 화면(ui-designer)·순수 산문 교정(submission-cleanup)에는 쓰지 않습니다.
산출 경로 — 정적 HTML이 1급 디폴트
기본 산출은 React·Babel·CDN 의존이 없는 자기완결 단일 HTML+CSS입니다. 브라우저로 더블클릭하면 오프라인에서도 즉시 렌더되어야 합니다.
- 컴포넌트는
references/snippets-static.html의 순수 HTML+CSS 스니펫을 복사해 데이터만 바꿉니다.
- 스타일은
assets/tokens.css·styles.css·styles-data.css·styles-viz.css·styles-doc.css를 동봉하거나 <style>로 인라인합니다.
- 게이지·도넛·라인 차트가 참조하는 프리즘 SVG 그라디언트 defs(
#prism-stroke)를 body 최상단에 1회 둡니다(스니펫 파일 상단 참조).
assets/*.jsx 라이브러리는 레거시·옵션으로 보존합니다. 형이 JSX 라이브러리를 명시할 때만 그 경로를 씁니다.
Modes
| Mode | Default Use | Rules |
|---|
| STANDARD | 디폴트 | 무채색 베이스, 액센트 면적 10% 미만, gradient 0회, 헤어라인 구조 |
| AMPED | 명시 시에만 | 키노트·제품 모먼트, 액센트 면적 30% 미만, gradient 페이지당 1회 |
매핑 게이트 — 스타일 입히기 "전" 강제 통과
빌드 시작 전 이 5단계를 거쳐 섹션 매핑표를 명세로 남깁니다. 표 없이 컴포넌트를 고르면 카드 나열 디폴트로 빠집니다 — 이 게이트가 그걸 막습니다.
- STEP1 인벤토리 — 페이지·섹션을 나열하고 각 섹션이 담은 정보가 무엇인지 식별합니다(텍스트·단계·수치·항목·관계·시간축·위치·표 중 무엇인가).
- STEP2 논리 판별 — 각 섹션이 8패밀리 중 어떤 논리인지 정합니다. FLOW 흐름·절차 / HIERARCHY 계층·구성 / COMPARE 비교·대조 / METRIC 수치·그래프 / RELATION 관계·망 / TIME 시간·변화 / DISTRIBUTION 분포·위치 / TABLE 표·구조화.
- STEP3 문법 선택 — 그 논리에 가장 직관적인 시각문법 1개를 결정트리로 고릅니다(아래 결정트리).
- STEP4 리듬 — 인접 섹션이 같은 문법으로 연속되지 않게 하고, 카드그리드 3연속을 금지하며, document·numbers·comparison·flow·reference가 교대로 나오게 배치합니다.
- STEP5 스타일 — 선택된 문법을 프리즘 미감(헤어라인 구조·소량 프리즘 액센트·Pretendard·mono 라벨)으로 렌더합니다.
결정트리 (8패밀리 풀세트)
흐름·절차 → 단계 순서만? ProcessSteps · 조건 분기? BranchFlow
· 주체 간 주고받음? Sequence · 입력→가공→출력? Pipeline
계층·구성 → 좁아지는 위계? PyramidShape · 의존 적층? LayerStack
· 다분기 분해? Tree · 보고라인? OrgChart
비교·대조 → 다열+체크? Comparison · 두 축 4분면? Matrix2x2
· 키/값? SpecsTable · 전후 대비? BeforeAfter
수치·그래프 → 큰 KPI? StatGrid · 추세·분포? Chart(bar/donut)
· 단일 비율·달성률? Gauge·ProgressBar · 단계 전환? Funnel
관계·망 → 노드망? NetworkMap · 교집합? Venn · 참여자 생태계? EcosystemMap
시간·변화 → 고정 단계? Timeline · Now/Next/Later? Roadmap
· 버전 릴리즈? Changelog · 기간 막대? Gantt
분포·위치 → 두 축 위치? PositionMap · 격자 강도? Heatmap · 영역 RAG? Scorecard
표·구조화 → 정렬 데이터? DataTable · 정의·용어? Glossary
산출 형식 — 빌드 전 명세표
| # | 섹션 | 정보유형 | 시각문법 | 컴포넌트 | 패밀리 |
|---|------|---------|---------|---------|--------|
| 1 | 표지 | 텍스트 | 커버 | Cover | DOC |
| 2 | 핵심 발견 | 항목 | 인사이트카드 | InsightCards | COMPARE |
| 3 | 의사결정 흐름 | 분기 | 분기플로우차트 | BranchFlow | FLOW |
이 표가 빌드의 1급 산출물입니다. 표를 통과한 뒤에만 HTML 작성으로 넘어갑니다.
문체 불가침 vs 정보 재구성 분리
- 불가침 — 본문 문장의 어미·어휘·문장구조·문단·문체(UP 입니다체)는 한 글자도 바꾸지 않습니다. 산문 문단은 형이 쓴 문장 그대로 둡니다. 원문을 표로 쪼개거나 요약하거나 다시 쓰지 않습니다.
- 재구성 권장 — 정보의 배치·구조는 시각문법으로 재배치합니다. 절차·비교·관계·수치·시간·분포·항목 정보는 적절한 시각문법으로 구조화합니다. 문장을 다시 쓰는 게 아니라, 문장이 이미 담고 있는 구조를 드러냅니다.
- 경계 — "이 섹션이 담은 것이 읽는 글인가, 보는 구조인가"로 판정합니다. 읽는 글이면 문장 불가침, 보는 구조면 시각문법으로 재배치하되 라벨·항목 텍스트는 원문 표현을 그대로 옮깁니다. 같은 정보를 문단과 도표로 두 번 반복하지 않습니다 — 산문이면 산문으로, 구조 데이터면 컴포넌트로 한 번만 렌더합니다.
미감 디렉티브 — 8패밀리 공통 시그니처
프리즘의 미감은 절제된 에디토리얼·정밀한 헤어라인 구조·소량의 프리즘 액센트입니다. 8패밀리 전 컴포넌트에 같은 시그니처를 겁니다.
- 프리즘 액센트는 면적이 아니라 위치로 씁니다(STANDARD 10% 미만). 컴포넌트당 프리즘을 쓰는 자리는 단 하나 — 헤드 넘버·핵심 노드 보더·강조 행·게이지 호·데시전 다이아몬드 한 곳에만.
var(--grad-prism)을 면이 아니라 1~3px 보더·링·도트·1셀 강조로 한정하고, 나머지는 무채색 헤어라인(--line-soft/medium/strong)과 표면 단계(--bg-surface/sunken)로 위계를 만듭니다.
- 헤어라인이 곧 구조입니다. SVG stroke은 1~1.5px, 셀 구분선은 1px gap에
--line-medium 배경을 깔아 그리드 자체가 선이 되게 합니다(Matrix2x2 패턴 계승).
- 타이포 스케일을 거대하게 씁니다(
--fs-d1~d3 clamp). 데이터 라벨·캡션은 var(--font-mono) 11~12px + --tr-wide + 대문자로 도면 주석 질감을 줍니다. 숫자는 mono, 본문은 Pretendard.
- 여백 리듬은
--sp 토큰만 씁니다(인라인 px 0개). 섹션 교대 배경(--bg-canvas ↔ --bg-sunken)으로 패밀리 전환을 끊습니다.
- 데이터 바인딩은 CSS 변수로 합니다. 게이지·진행바·도넛·막대는
--value(0~100)·--pct·--v를 인라인 style로 받아 렌더하고, 고정 하드코딩(64%)을 추방합니다 — 복사 후 숫자만 바꾸면 차트가 갱신됩니다.
- 모션은 reveal(translateY 24px→0)·focus-visible·reduced-motion 존중을 계승합니다. 새 컴포넌트도
.reveal 클래스로 동일 진입.
8패밀리 인덱스 — 어디에 무슨 컴포넌트가 있나
복사용 정적 스니펫은 전부 references/snippets-static.html에 있습니다. CSS는 아래 파일에 분담합니다.
| 패밀리 | 컴포넌트 | CSS 위치 |
|---|
| FLOW 흐름·절차 | ProcessSteps · BranchFlow · Sequence · Pipeline | styles-viz.css |
| HIERARCHY 계층·구성 | PyramidShape(삼각형) · LayerStack · Tree · OrgChart | styles-viz.css, styles-doc.css |
| COMPARE 비교·대조 | Comparison · Matrix2x2 · SpecsTable · BeforeAfter | styles-data.css, styles-viz.css |
| METRIC 수치·그래프 | StatGrid · Chart(bar/donut) · Gauge · ProgressBar · Funnel | styles-data.css, styles-viz.css |
| RELATION 관계·망 | NetworkMap · Venn · EcosystemMap | styles-doc.css, styles-viz.css |
| TIME 시간·변화 | Timeline · Roadmap · Changelog · Gantt | styles-data.css, styles-viz.css |
| DISTRIBUTION 분포·위치 | PositionMap · Heatmap · Scorecard | styles-viz.css, styles-doc.css |
| TABLE 표·구조화 | DataTable · Glossary | styles-data.css |
Design Rules
assets/tokens.css와 정적 스니펫을 먼저 쓰고, 새 구조를 즉흥으로 만들지 않습니다.- 9그룹 MECE 시스템은 라우팅 보조로 쓰고, 강제 장식의 벽으로 쓰지 않습니다.
- Pretendard를 기본 타입으로 씁니다.
- 프리즘 그라디언트는 액센트로만 쓰고, 본문 텍스트나 큰 일반 배경에는 쓰지 않습니다.
- 카드 그리드 반복을 피하고 document·numbers·comparison·flow·reference 블록을 교대로 둡니다.
letter-spacing은 작은 양수 메타데이터 라벨을 빼면 0으로 둡니다.- 한국어 텍스트는
word-break: keep-all; line-break: strict; overflow-wrap: break-word;를 적용합니다.
- reduced motion·focus-visible 상태를 존중합니다.
Workflow
- 매핑 게이트 5단계를 거쳐 섹션 매핑표를 출력합니다.
references/snippets-static.html에서 패밀리별 스니펫을 복사해 단일 HTML로 조립합니다.- 5개 CSS를 동봉하거나 인라인하고 프리즘 SVG defs를 1회 둡니다. 데이터는 CSS 변수·텍스트만 바꿉니다.
bash scripts/qc.sh <html-file>로 검증합니다.- 화면 산출물은 Browser 또는 Computer Use로 데스크톱·모바일 프레이밍을 검수합니다(Playwright는 반복 자동화가 본질일 때만).
References
| Need | Files |
|---|
| 정적 컴포넌트 카탈로그(1급) | references/snippets-static.html |
| 빌드 레시피·결정트리 | references/build-recipe.md |
| 컴포넌트 라우팅 | references/mece.md |
| 레이아웃·모션 | references/layout-catalog.md, references/motion-catalog.md |
| 보이스·절제 | references/voice.md |
| 자산·샘플 | assets/, assets/samples/ |
