ahnyongjooandClaude Sonnet 5.5
964a841de1
- 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>
150 lines
8.6 KiB
HTML
150 lines
8.6 KiB
HTML
<!doctype html>
|
||
<html lang="ko">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<title>Prism M5 샘플 — A3 설명자료 (패턴 P3 프로세스)</title>
|
||
<style>
|
||
/* ══════════════════════════════════════════════════════════════
|
||
Prism Design System v0.1.1 — M5 a3-explainer 샘플
|
||
근거: A3/module.a3-explainer.md · design.tokens.json (SSOT)
|
||
아래 :root 블록이 토큰 정의부다. 본문 규칙에는 var()만 쓴다.
|
||
인쇄: A3 가로(420×297mm), 여백 0으로 출력 (브라우저 인쇄 → PDF)
|
||
══════════════════════════════════════════════════════════════ */
|
||
:root {
|
||
/* color (brand saman — 등록 페어만 사용) */
|
||
--sand: #F4F3F0; /* G4 캔버스 (순백 전면 금지) */
|
||
--white: #FFFFFF; /* G0 카드 면 */
|
||
--brown: #474235; /* G72 본문 — on sand 9.02 AAA */
|
||
--green: #1F524B; /* G69 제목·구조 — on sand 8.00 AAA */
|
||
--orange: #D05C26; /* G47 악센트 — 대형 전용, 1면당 ≤2 */
|
||
--obsidian: #111111; /* G95 반전 면 */
|
||
/* type (base 10pt · 행간 = 베이스라인 6mm) */
|
||
--t-caption: 7.9pt; --t-body-sm: 8.9pt; --t-body: 10pt; --t-body-lg: 11.3pt;
|
||
--t-title-sm: 12.7pt; --t-title: 16pt; --t-title-lg: 20.3pt; --t-display: 28.9pt;
|
||
--lh-body: 6mm; /* 10pt × 1.70 = 17pt = 5.997mm ≈ 6mm */
|
||
/* space (base 6mm) */
|
||
--sp-050: 3mm; --sp-100: 6mm; --sp-150: 9mm; --sp-200: 12mm; --sp-300: 18mm; --sp-400: 24mm;
|
||
/* stroke · radius */
|
||
--hairline: 0.2mm; --regular: 0.4mm; --connector: 1mm; --r-md: 3mm;
|
||
}
|
||
@page { size: 420mm 297mm; margin: 0; }
|
||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||
html, body { background: #888; }
|
||
.page {
|
||
position: relative; width: 420mm; height: 297mm; margin: 0 auto;
|
||
background: var(--sand); overflow: hidden;
|
||
font-family: Pretendard, -apple-system, BlinkMacSystemFont, "Noto Sans KR", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
|
||
color: var(--brown); font-size: var(--t-body); line-height: var(--lh-body);
|
||
}
|
||
@media print { html, body { background: none; } .page { margin: 0; } }
|
||
|
||
/* ── 헤더 존 (21~51mm) ── */
|
||
.header { position: absolute; left: 24mm; right: 24mm; top: 21mm; height: 30mm; }
|
||
.eyebrow { display: flex; align-items: center; gap: 2mm; font-size: var(--t-caption); letter-spacing: 0.18em; color: var(--brown); line-height: 6mm; }
|
||
.eyebrow .tick { width: 2.5mm; height: 2.5mm; background: var(--orange); } /* 악센트 1/2 */
|
||
.header h1 { font-size: var(--t-title-lg); font-weight: 700; color: var(--green); line-height: 12mm; }
|
||
.meta { position: absolute; right: 0; top: 0; text-align: right; font-size: var(--t-caption); line-height: 4.5mm; color: var(--brown); }
|
||
.meta b { font-weight: 500; color: var(--green); }
|
||
.header .rule { position: absolute; left: 0; right: 0; bottom: 0; border-bottom: var(--regular) solid var(--green); }
|
||
|
||
/* ── scope 블록 (57mm) ── */
|
||
.scope { position: absolute; left: 24mm; right: 24mm; top: 57mm; height: 24mm;
|
||
background: var(--white); border: var(--hairline) solid var(--brown); border-radius: var(--r-md);
|
||
padding: var(--sp-050) var(--sp-200); display: flex; gap: var(--sp-400); align-items: center; }
|
||
.scope dl { font-size: var(--t-body-sm); line-height: 5mm; }
|
||
.scope dt { font-weight: 700; color: var(--green); font-size: var(--t-caption); letter-spacing: 0.12em; }
|
||
|
||
/* ── 스테이지 카드 4열 (3:3:3:3 — 존 폭 88.5mm) ── */
|
||
.stage { position: absolute; top: 93mm; width: 88.5mm; height: 84mm;
|
||
background: var(--white); border: var(--hairline) solid var(--brown); border-radius: var(--r-md);
|
||
padding: var(--sp-100); }
|
||
.stage .no { font-size: var(--t-title); font-weight: 700; color: var(--orange); line-height: 12mm; }
|
||
.stage h2 { font-size: var(--t-title-sm); font-weight: 500; color: var(--green); line-height: 6mm; margin-bottom: var(--sp-050); }
|
||
.stage p { font-size: var(--t-body-sm); line-height: 5mm; }
|
||
.stage.hl { background: var(--green); border-color: var(--green); } /* 면 반전 — white/green 8.87 AAA */
|
||
.stage.hl .no, .stage.hl h2 { color: var(--white); }
|
||
.stage.hl p { color: var(--sand); }
|
||
.s1 { left: 24mm; } .s2 { left: 118.5mm; } .s3 { left: 213mm; } .s4 { left: 307.5mm; }
|
||
.conn { position: absolute; top: 133mm; width: 6mm; height: 0; border-top: var(--connector) solid var(--brown); }
|
||
.conn::after { content: ""; position: absolute; right: -0.5mm; top: -1.7mm; border-left: 2mm solid var(--brown); border-top: 1.2mm solid transparent; border-bottom: 1.2mm solid transparent; }
|
||
.c1 { left: 112.5mm; } .c2 { left: 207mm; }
|
||
.c3 { left: 301.5mm; border-top-color: var(--orange); } /* 귀결 커넥터 — 악센트 2/2 */
|
||
.c3::after { border-left-color: var(--orange); }
|
||
|
||
/* ── principle (결론 존, 195mm) ── */
|
||
.principle { position: absolute; left: 24mm; right: 24mm; top: 195mm; height: 36mm;
|
||
border-left: 1.5mm solid var(--orange); padding-left: var(--sp-100); }
|
||
/* 주: principle 악센트 바는 결론 존 전용 표지로, 본 면에서는 아이브로 틱과 합산해 상한(2)을 넘지 않도록
|
||
아이브로 틱을 무채 표기로 강등할 수 있다. 본 샘플은 틱·귀결 커넥터 2건을 카운트하고 바는 green으로 대체한다. */
|
||
.principle { border-left-color: var(--green); }
|
||
.principle .kicker { font-size: var(--t-caption); letter-spacing: 0.18em; color: var(--brown); line-height: 6mm; }
|
||
.principle h3 { font-size: var(--t-title); font-weight: 700; color: var(--green); line-height: 9mm; margin-top: 1.5mm; }
|
||
.principle p { font-size: var(--t-body); line-height: var(--lh-body); margin-top: 1.5mm; }
|
||
|
||
/* ── 푸터 존 (255~273mm 불가침) ── */
|
||
.footer { position: absolute; left: 24mm; right: 24mm; top: 255mm; height: 18mm;
|
||
border-top: var(--hairline) solid var(--brown); padding-top: 2mm;
|
||
display: flex; justify-content: space-between; font-size: var(--t-caption); line-height: 4.5mm; }
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="page">
|
||
|
||
<header class="header">
|
||
<div class="eyebrow"><span class="tick"></span>PRISM DESIGN SYSTEM · 설명자료</div>
|
||
<h1>산출물은 4단계로 결정된다 — Prism 파생 프로세스</h1>
|
||
<div class="meta">
|
||
<b>분류</b> 시스템 안내 · <b>개정</b> v0.1.1<br>
|
||
<b>대상</b> 전 매체 공통 · <b>상태</b> 승인
|
||
</div>
|
||
<div class="rule"></div>
|
||
</header>
|
||
|
||
<section class="scope">
|
||
<dl><dt>적용 조건</dt><dd>Prism v0.1.1 기반의 신규 산출물(인쇄·슬라이드·화면)을 제작하는 경우</dd></dl>
|
||
<dl><dt>제외 조건</dt><dd>없음</dd></dl>
|
||
<dl><dt>선행 요건</dt><dd>해당 매체의 실행 명세(모듈) 확인</dd></dl>
|
||
</section>
|
||
|
||
<article class="stage s1">
|
||
<div class="no">①</div>
|
||
<h2>브랜드 선언</h2>
|
||
<p>활성 인스턴스를 확인한다 — 철학·가치축·팔레트·서체·보이스·금지 목록.
|
||
브랜드가 바뀌면 이 계층(L0)만 바뀐다. 하위 계층에 색상 리터럴이 0건이어야 교체가 격리된다.</p>
|
||
</article>
|
||
<article class="stage s2">
|
||
<div class="no">②</div>
|
||
<h2>파운데이션 적용</h2>
|
||
<p>비율·단계·관계만 적용한다 — GRADE 색 척도, 타입 생성식 1.125ⁿ, 공간 백분율 스케일, 12컬럼 그리드.
|
||
이 계층(L1)에는 절대 치수가 존재하지 않는다.</p>
|
||
</article>
|
||
<article class="stage s3">
|
||
<div class="no">③</div>
|
||
<h2>매체 바인딩</h2>
|
||
<p>base 하나로 절대값을 실체화한다 — print 10pt, presentation 24px, screen 1rem.
|
||
같은 토큰명이 매체별 값셋을 갖는다. 본 자료의 본문 10pt·행간 6mm가 그 결과다.</p>
|
||
</article>
|
||
<article class="stage s4 hl">
|
||
<div class="no">④</div>
|
||
<h2>모듈 고정</h2>
|
||
<p>남은 자유도를 없앤다 — 패턴 배정, 컴포넌트 선별, 분량 예산.
|
||
규칙 완화는 불가능하며 강화만 가능하다. 검증 게이트를 통과하지 못한 산출물은 확정하지 않는다.</p>
|
||
</article>
|
||
<span class="conn c1"></span><span class="conn c2"></span><span class="conn c3"></span>
|
||
|
||
<section class="principle">
|
||
<div class="kicker">원칙</div>
|
||
<h3>어느 단계도 생략하지 않는다.</h3>
|
||
<p>본 자료 자체가 M5 실행 명세(A3 가로 · 3:3:3:3 패턴 · 등록 색 페어 · 베이스라인 6mm)의 산출물이다.
|
||
[출처: Prism Design System v0.1.1 — A3/module.a3-explainer.md]</p>
|
||
</section>
|
||
|
||
<footer class="footer">
|
||
<span>Prism Design System — M5 A3 설명자료 샘플</span>
|
||
<span>1 / 1 · v0.1.1 · 2026-07-29</span>
|
||
</footer>
|
||
|
||
</div>
|
||
</body>
|
||
</html>
|