@infomind-ux/infoux-mcp 0.1.0 → 0.2.1

package/data/references/art-direction.md

@@ -0,0 +1,206 @@
+# 아트 디렉션 — 자연스러움의 판단 기준
+
+brand.json과 `--font-*` 토큰에 무엇을 넣을지, 표현 수위를 어디까지 열지 판단하는 기준. 수치 정본은 `contracts/art-direction.json`, 팔레트 hex 정본은 `tokens/presets/`이며, 이 문서의 표는 build-art-direction.js가 생성한다.
+
+---
+
+## 1. 표현 등급
+
+<!-- art-direction:expression:begin — contracts/art-direction.json + contracts/profiles.json에서 자동 생성. 직접 수정 금지. npm run build:art-direction -->
+| 등급 | 정의 | hero | 시그니처 | 모션 | 제목 폰트 | 레이아웃 |
+|------|------|------|----------|------|-----------|----------|
+| 기능형 (`utility`) | 반복 업무 화면. 표현 요소가 과업 효율을 침해하지 않는 최소 수준. | none, text | 없음 | fade · 100~200ms | body-only | symmetric-grid |
+| 절제형 (`restrained`) | 신뢰가 우선인 공공 톤. 브랜드는 색·서체 수준에서 드러나고 장식은 절제한다. | text, image, carousel | 최대 1 — 그래픽 패턴, 포토 톤 통일, 커스텀 일러스트 | fade, translate-16, scroll-fade-in-once · 150~300ms | body-first | alternating |
+| 표현형 (`expressive`) | 브랜드 개성이 기억에 남아야 하는 사이트. 시그니처·타이포·섹션 리듬으로 정체성을 만든다. | text, image, carousel, video | 최대 3 — 그래픽 패턴, 커스텀 일러스트, 포토 트리트먼트, 타이포 모티프, 커스텀 불릿·구분선 | fade, translate-24, scale-2pct, stagger-50-80 · 200~400ms | heading-pairing | asymmetric |
+
+| 유형 | 기본 등급 | 타이포 후보 | 팔레트 후보 | 섹션 리듬 | 카피 톤 |
+|------|-----------|-------------|-------------|-----------|---------|
+| 일반사이트 (`general-site`) | 표현형 (`expressive`) | standard-gov, product-modern, formal-serif, retro-display | coast-teal, market-terracotta | 풀블리드 인트로(hero-bleed)→이미지-텍스트 교차(section-media)→리스트 변주 허용 | 합쇼체 기본. 명사형 버튼 레이블. 직역체·2인칭 '당신' 금지 |
+| 공공서비스 (`public-service`) | 절제형 (`restrained`) | standard-gov | trust-blue, coast-teal | 과업 진입(search) 우선. 장식 hero는 화면 1/2 이하 | 합쇼체 고정. 느낌표 금지. KRDS 용어 우선 |
+| 공공기관 (`public-institution`) | 절제형 (`restrained`) | standard-gov, formal-serif | trust-blue | 기관 정체성+공지 결합형 인트로. 슬라이더는 정지 컨트롤 필수 | 합쇼체 고정. 성과 홍보 어조 금지 — 사실 서술 |
+| CMS·관리자 (`cms-admin`) | 기능형 (`utility`) | standard-gov, technical-global | trust-blue | hero 없음(profiles 소유 참조). 첫 화면은 검색/필터+데이터 | 명사형·개조식. 문장 최소화 |
+| 커머스·예약 (`commerce-reservation`) | 표현형 (`expressive`) | standard-gov, product-modern | market-terracotta, trust-blue | 상품·프로모션 중심, 전환 CTA 1개 원칙. 결제 플로우는 utility 강등 | 합쇼체 기본. 근거 없는 최상급 금지. 가격·기간 사실 정보 우선 |
+<!-- art-direction:expression:end -->
+
+등급 운용은 다섯 원칙을 따른다.
+
+1. 등급은 상한이지 목표가 아니다 — "허용되니까"는 근거가 아니다.
+2. 상향은 task contract `expression` 필드로만 하고, 근거 기록이 필수다. 하향은 언제나 자유다.
+3. 페이지 단위 강등 — 폼·결제·인증·오류·검색결과는 사이트 등급 무관 utility~restrained 수위로 작성한다. 운반체는 페이지 단위 task contract, 확인은 납품 전 리뷰 체크리스트(§9)다.
+4. 축 단위 예외 — 등급 묶음에서 축 하나만 열 때는 `exceptions[]`에 `"rule": "expression.hero"` 형식으로 근거와 함께 기록한다(예: 공공기관 메인 영상 배경 발주 요구). 통째 상향보다 이 경로를 우선한다.
+5. publicIdentity 캡 — `required` 확정 시 상한은 restrained다(task contract 스키마가 강제). `unconfirmed` 상태에서는 상향을 보류한다.
+
+컴포넌트 피드백 모션(모달·토스트·인풋 전환)은 interaction-timing 소유로 등급 무관이다. 위 표의 모션 수치는 장식·스크롤 진입 모션에만 적용된다.
+
+point 색 사용 수위 — point는 시선을 한 곳으로 모으는 색이다. 섹션당 1~2회, 화면 면적의 10% 이내 감각을 지키고, utility 등급에서는 상태·배지·필수 표시 등 기능적 용도 외에 쓰지 않는다. 이 수치는 계약이 아니라 저작 감각 기준이다.
+
+## 2. 한글 조판
+
+<!-- art-direction:hangul:begin — contracts/art-direction.json에서 자동 생성. 직접 수정 금지. npm run build:art-direction -->
+| 항목 | 값 |
+|------|-----|
+| word-break / overflow-wrap | `keep-all` / `break-word` |
+| 본문 line-height | 1.6~1.7 (기본 1.7, 고밀도 기본 1.6, lint 하한 1.5) |
+| 제목 line-height | 1.2~1.45 |
+| 제목 letter-spacing | -0.03em~0 (2.4rem 이상부터) |
+| 제목 최대 줄수 | 2 |
+| weight | 본문 기본 400 · 인라인 강조 상한 700 · 제목 상한 700 · 화면당 4종 이하 |
+
+> lintFloor는 R-24 검출기의 warn 임계(이 값 미만이 warn), min~max는 저작 기준값. bodyEmphasisMax 700은 인라인 강조 한정 — 연속 문단 볼드 금지. headingMax 700은 h1~h2급 한정. 상세 산문: references/art-direction.md §2.
+<!-- art-direction:hangul:end -->
+
+- 본문 줄길이는 28~42자(공백 포함)를 권장한다. 게시판 목록·약관·표처럼 문서형 콘텐츠는 예외다 — 줄길이를 맞추려고 컨테이너를 쪼개지 않는다.
+- 숫자가 정렬되는 화면(표·가격·통계)은 `font-variant-numeric: tabular-nums` 또는 `--font-mono`를 쓴다.
+- 폰트 로딩 — `font-display: swap` 기본. preload는 본문 400 + 제목 대표 1종만 한다. 서브셋 기준은 KS X 1001 완성형 2,350자다.
+- WCAG 1.4.12 텍스트 간격 내성 — 사용자가 행간·자간을 키워도 잘리거나 겹치지 않아야 한다. 고정 높이 컨테이너에 본문 텍스트를 담지 않는다.
+- 단어가 어색하게 갈라지면 `&nbsp;` 강제 병기 대신 카피를 고친다.
+
+## 3. 타이포 페어링
+
+<!-- art-direction:typography:begin — contracts/art-direction.json에서 자동 생성. 직접 수정 금지. npm run build:art-direction -->
+| id | 라벨 | 무드 | 제목 | 본문 | 등급 | 라이선스 | 파일 |
+|----|------|------|------|------|------|----------|------|
+| `standard-gov` | 표준 관청체 | 중립·신뢰·표준 | `var(--font-sans)` 600/700 · ls -0.02em · lh 1.35 | 400/500 · lh 1.7 | utility, restrained, expressive | OFL-1.1 | 4건 입수 완료 |
+| `product-modern` | 프로덕트 산세리프 | 친근·현대적·제품 | `'Wanted Sans', var(--font-sans)` 600/700 · ls -0.02em · lh 1.3 | 400/500 · lh 1.7 | expressive | OFL-1.1 | 2건 입수 완료 |
+| `formal-serif` | 격식 명조 | 격식·기록·전통 | `'Noto Serif KR', var(--font-sans)` 600 · ls -0.01em · lh 1.4 | 400/500 · lh 1.7 | restrained, expressive | OFL-1.1 | 1건 입수 완료 |
+| `retro-display` | 레트로 디스플레이 | 레트로·문화·독립 | `'Hahmlet', var(--font-sans)` 500/600 · ls 0 · lh 1.3 | 400/500 · lh 1.7 | expressive | OFL-1.1 | 1건 입수 완료 |
+| `technical-global` | 테크니컬 고딕 | 테크·국제·데이터 | `'IBM Plex Sans KR', var(--font-sans)` 600 · ls -0.01em · lh 1.3 | 400/500 · lh 1.7 | utility, restrained, expressive | OFL-1.1 | 1건 입수 완료 |
+
+- **standard-gov** [warn] 단독으로는 무개성 — 크기 대비(본문 1.7rem ↔ h1 4rem)와 여백으로 위계를 만든다.
+- **standard-gov** [info] 민간 프로젝트는 일반 Pretendard도 무방. 전 프로필 안전 기본값.
+- **product-modern** [error] 본문까지 Wanted Sans로 바꾸지 않는다 — 본문 축은 --font-sans 고정이 카탈로그 전제.
+- **formal-serif** [error] 2rem 미만 크기 사용 금지 — 명조 가는 획이 뭉개진다.
+- **formal-serif** [warn] CJK 명조는 용량이 크다 — 서브셋 필수, heading 전용 weight 1종(600)만 로드.
+- **retro-display** [error] hero·배너·섹션 타이틀 전용 — 본문·폼·표 사용 금지.
+- **retro-display** [warn] 글리프 커버리지 검수 — 프로젝트 실제 카피(기관명·고유명사)로 누락 음절을 확인한 뒤 채택한다.
+- **technical-global** [warn] 한글 글리프가 완성형 중심 — 실제 카피로 누락 음절 검수.
+- **technical-global** [info] foundation의 --font-mono(Plex Mono 계열)와 가족 정합 — 데이터 화면에서 강점. admin에서는 standard-gov 단일 서체도 유효한 대안.
+<!-- art-direction:typography:end -->
+
+- 입수 원칙 — 원 배포처가 공식 woff2를 제공하는 폰트만 카탈로그에 들어온다. TTF만 배포되는 폰트는 포맷 변환의 라이선스(RFN)·품질 문제가 있어 후보 풀(부록)에 남긴다. CI는 외부 URL을 fetch하지 않는다 — 라이선스 판단은 원 배포처 페이지 기준으로 사람이 확정하고, 파일은 라이선스 전문과 함께 `assets/fonts/<pairing-id>/`에 벤더링한다.
+- 폴백 스택 구조 — 제목 폰트는 반드시 `'표시 폰트', var(--font-sans)` 순서를 지킨다. 한글 글리프가 없는 표시 폰트를 단독으로 두면 한글이 시스템 기본 서체로 떨어진다. 토큰 계층에서는 R-26이 한글 가용 폰트 미포함 스택을 잡는다.
+- 숫자 전략 — 표·가격·통계는 tabular-nums 또는 `--font-mono`. 영문 display 폰트를 숫자·라틴에만 얹는 unicode-range 오버레이는 v2 검토 항목이다.
+- 적용 경로 — brand.json `font.family.heading`에 스택을 적고 `npm run build:tokens`. 본문 축은 `--font-sans` 고정이 카탈로그 전제다.
+
+## 4. 팔레트 프리셋
+
+<!-- art-direction:palettes:begin — contracts/art-direction.json + tokens/presets/*.json에서 자동 생성. 직접 수정 금지. npm run build:art-direction -->
+| id | 라벨 | 무드 | primary 50 | secondary 50 | point 50 | 등급 | 프로필 |
+|----|------|------|------------|--------------|----------|------|--------|
+| `trust-blue` | 공공 신뢰 블루 | 관공서·금융 신뢰, 현행 기본 승계 | `#256ef4` | `#346fb2` | `#d63d4a` | utility, restrained, expressive | public-service, public-institution, cms-admin |
+| `coast-teal` | 관광 청록 | 바다·환경·청량 | `#00818c` | `#54789e` | `#a75d88` | restrained, expressive | general-site, public-service |
+| `market-terracotta` | 커머스 웜 테라코타 | 온기·식욕·프로모션 | `#ba5929` | `#946d57` | `#008287` | expressive | commerce-reservation, general-site |
+
+- **trust-blue** — `pointException: krds-heritage` — 용법 제한은 아래 산문 참조.
+<!-- art-direction:palettes:end -->
+
+적용은 세 줄이다.
+
+```bash
+cp tokens/presets/coast-teal.json tokens/brand.json
+npm run build:tokens
+npm run check:contrast
+```
+
+저작 규칙(신규 프리셋 생성 시) — 상수 전량이 각 프리셋 `$meta.preset.generation`에 기록돼 있어 생성기 없이도 재현할 수 있다.
+
+- 정준 Y 사다리(WCAG 상대휘도): 5=.885, 10=.777, 20=.605, 30=.426, 40=.255, 50=.178, 60=.104, 70=.049, 80=.022, 90=.009, 95=.005 — 대비 사전통과를 구조로 만드는 기둥이다.
+- 채도 곡선: 50 정점 종형(5=0.08 → 50=1.00 → 95=0.25).
+- hue는 스케일 전체 상수. L은 hex 양자화 후의 Y로 이분탐색하고, sRGB 감마 밖은 C만 축소한다. 50·60은 흰 배경 4.5:1 하드 스냅.
+- 관계 규칙: secondary C = primary C50×0.4~0.7, hue ±45° 이내 또는 중성. point는 primary와 hue 거리 ≥60°, 상태색(danger/warning/success/info) hue ±25° 금지 밴드를 지킨다.
+- hc 모드: light와 동일 사다리 기본. ΔH(primary, secondary)<40°면 hc secondary를 ΔH≥40° 위치로 재생성한다.
+
+krds-heritage 용법 제한 — trust-blue의 크림슨 point는 금지 밴드·ΔE 위반이지만 KRDS 원본 승계 예외다. 그 대가로 용법을 제한한다: 삭제·취소 등 위험 액션 버튼에 쓰지 않고, danger 알림 인접 40px 안에 배치하지 않는다.
+
+청록 계열 주의 — coast-teal의 40단계는 sRGB 감마 경계라 채도 클리핑이 걸려 있다. 파생 색을 손으로 만들 때는 40~50 구간 대비를 다시 검증한다.
+
+## 5. 섹션 리듬 변주
+
+동일 archetype 연속 상한은 2다 — 3연속이면 리듬이 죽는다(R-25 검출 근거). "중앙 제목 + 카드 그리드" 3연속이 규정 준수형 무개성의 최빈 패턴이다.
+
+- 교차 원칙 — 이미지-텍스트 교차(section-media)·풀블리드 인트로(hero-bleed) 같은 변주 패턴을 사이에 끼운다. zigzag는 1왕복이면 충분하다 — 전 섹션 교차는 그 자체로 단조롭다.
+- 첫 콘텐츠 섹션은 1순위 과업이 차지한다. 장식이 과업 진입을 밀어내지 않는다.
+- 배경 리듬 — 흰 배경 연속 구간에 옅은 배경 섹션을 끼워 단원을 만든다. 매 섹션 배경 교차는 금지 수준의 과잉이다.
+- 프로필별 hero 원칙·기본 section 흐름·밀도는 profiles 소유다 — §1 프로필 기본값 표의 리듬 열과 get_profile(id)를 참조하고, 여기서 반복하지 않는다.
+
+## 6. 시그니처 요소
+
+시그니처는 "이 사이트만의 것"으로 기억되는 반복 장치다. 등급별 상한(maxCount)은 §1 표가 정본이다.
+
+- 선정 기준 — 브랜드 자산(CI·일러스트·포토 톤)에서 출발한 장치 1개를 여러 곳에 반복하는 편이, 서로 다른 장치 여럿보다 강하다.
+- 실물 3패턴 — 타이포 모티프·커스텀 구분선·배경 패턴(SVG data-uri)은 `src/snippets/signature.md`에 스니펫으로 제공한다.
+- 배치 — hero·인트로·섹션 경계 같은 구조 지점에 둔다. 본문 문단 사이에 끼워 넣지 않는다.
+
+## 7. 이미지 트리트먼트
+
+이미지 톤은 사이트당 1규칙이다 — duotone 또는 명도·채도 대역 중 하나를 정해 전 이미지에 적용한다. 페이지마다 톤이 다른 사진 묶음이 "조립한 티"의 주범이다.
+
+- 권장 비율 — hero 21:9·16:9, 카드 4:3·1:1. 비율 혼용은 같은 그리드 안에서만 한다.
+- 텍스트 오버레이 — 단색 스크림 40~60% 또는 그라데이션 스크림 위에서만 텍스트를 얹고, 대비 4.5:1은 스크림 위에서 실측한다.
+- 시안 이미지 소싱 — 확보 라이선스 소스를 우선한다. 미확보 시 회색 박스로 두지 않는다 — 실제 비율의 명시적 이미지 자리 표기 + 교체 목록을 동봉한다.
+
+## 8. 카피 톤
+
+프로필별 종결어미·금지선은 §1 프로필 기본값 표의 카피 톤 열이 정본이다. 공통 원칙:
+
+- 버튼 레이블은 명사형("신청", "다운로드")을 기본으로 한다.
+- 근거 없는 최상급·성과 홍보 어조·느낌표 남발을 금지한다. 사실 서술이 기본이다.
+- 번역투 금지 — "지금 시작하세요", 2인칭 "당신", "~을 경험하세요" 류.
+- 문장 공식·에러 메시지 3-part 구조는 microcopy 소유다(site/design/microcopy.md).
+- 실제 기관 용어·메뉴명은 task contract의 `contentSources`에서 가져온다. 출처가 비어 있으면 카피는 임시 초안 신분을 벗어날 수 없다.
+
+## 9. 납품 전 리뷰 체크리스트
+
+납품 전 1회, 페이지 전량을 대상으로 실행한다. `release-checklist.md`의 게이트와 연결된다.
+
+- [ ] 안티패턴 색인(§10) 10건 각각에 대해 해당 없음을 확인했다.
+- [ ] 섹션 교차 리듬 — "중앙 제목+그리드" 3연속이 없다. 좌정렬·교차·풀블리드 변주가 있다.
+- [ ] 카드화 필요성 — 카드가 아니어도 되는 콘텐츠를 카드로 감싸지 않았다. 카드 안 카드 중첩이 없다.
+- [ ] 결제·인증·폼 페이지의 task contract가 utility로 강등돼 있다.
+- [ ] 상태 완결성 — btn: default/hover/focus-visible/active/disabled/loading, form: +error 마크업 실물, table·list: empty/loading/error, alert·badge: 4톤 전부, pagination: 양끝 disabled. 명세 수치는 ui-states 소유다.
+- [ ] 실제 기관 용어 정합 — `contentSources`와 대조했다. 임시 카피·가짜 콘텐츠가 남아 있지 않다(R-23).
+- [ ] 이미지 라이선스 — 전 이미지의 출처·라이선스가 교체 목록 또는 크레딧으로 정리돼 있다.
+
+## 10. 안티패턴 색인
+
+기계 검출 4종은 rules.json이 정본이다 — R-23 가짜 콘텐츠, R-24 한글 조판 하한, R-25 섹션 리듬, R-26 폰트 한글 fallback. 아래 10건은 산문 판정 목록이며 이 문서가 유일한 등재처다.
+
+1. AI 에디토리얼 룩 — 크림 오프화이트+세리프+테라코타 조합 서명. brand 저작 시점에 판정한다. [owner: art-direction]
+2. AI 다크테크 룩 — 니어블랙+애시드그린+소문자 mono. [owner: art-direction]
+3. 보라→파랑 그라데이션 CTA·히어로. [owner: art-direction / 버튼 체계는 krds-components]
+4. 전면 글래스모피즘·전 요소 과대 라운딩. [owner: art-direction]
+5. 근거 없는 통계 히어로·가짜 후기 캐러셀. [owner: art-direction / 수치 근거는 수동 검수]
+6. 직역 마케팅 카피 — "지금 시작하세요"·"당신"·느낌표 남발. [owner: microcopy — 세부 위임]
+7. 어두운 오버레이+중앙 흰 문구+스크롤 화살표 히어로. [owner: art-direction]
+8. 무한 롤링 로고 마키·scroll-jacking·overshoot easing·500ms 초과 장식 모션. [owner: interaction-timing / R-22]
+9. 요구에 없는 다크모드 토글 — infoUX는 high-contrast 2모드 체계다. [owner: tokens]
+10. weight 700 남발·영문 display 폰트의 한글 fallback 미설계. [owner: art-direction hangul / R-26]
+
+## 부록. 검증 대기 후보 풀
+
+아래는 삭제가 아니라 입고 유예다. 라이선스 근거는 원 배포처 원문 재확인 전까지 전부 unverified로 둔다.
+
+폰트 후보 8종 — 공식 woff2 미제공 또는 원 배포처 재확인 필요:
+
+| 폰트 | 라이선스 근거 | 상태 |
+|------|---------------|------|
+| SUIT | sunn.us/suit | unverified — OFL 추정 |
+| Freesentation | 원 배포처 재확인 필요 | unverified |
+| 나눔스퀘어 네오 | hangeul.naver.com | unverified — 네이버 공식 원문 재확인 필요 |
+| Paperlogy | 원 배포처 재확인 필요 | unverified |
+| Gowun Batang | fonts.google.com/specimen/Gowun+Batang | unverified — OFL 추정 |
+| MaruBuri | hangeul.naver.com | unverified — 네이버 공식 원문 재확인 필요 |
+| Spoqa Han Sans Neo | spoqa.github.io/spoqa-han-sans | unverified — OFL 추정 |
+| Gmarket Sans | 원 배포처 재확인 필요 | unverified — 조건부·TTF 전용 |
+
+프리셋 seed 후보 4종 — culture-violet·care-green·deep-navy·slate-neutral. 자동 생성기(generate-preset.js)·게이트 3종(Y 대역·point 밴드·ΔE)과 함께 v2에서 재평가한다.
+
+v2 검출기 후보 — 모션 수치·이모지·상태 셀렉터·카피 금지 문자열. §9 체크리스트로 대신 운용하고, 오탐 데이터가 쌓이면 기계화를 재평가한다.
+
+## 관련
+
+- 표현 등급 운용·판정 예시: `project-profiles.md`
+- 프로필 구조·밀도·section 흐름: `contracts/profiles.json`
+- 기계 정본: `contracts/art-direction.json` / 팔레트 hex 정본: `tokens/presets/`
+- 모션 수치: site/design/interaction-timing.md / 카피 문장 공식: site/design/microcopy.md
+- 상태 셋 명세: site/design/ui-states.md / 납품 게이트: `release-checklist.md`

package/data/references/krds-components.md

@@ -2,7 +2,7 @@
 
 > 자동 생성됨. 직접 수정 금지.
 > 출처: `src/snippets/*.md`
-> 빌드: c8f34dd
+> 빌드: baf8324
 
 아래 카탈로그에 없는 컴포넌트는 임의 생성 금지. § "카탈로그에 없는 컴포넌트 요구 시" 절차 따름.
 

package/data/references/krds-tokens.md

@@ -2,7 +2,7 @@
 
 > 자동 생성됨. 직접 수정 금지.
 > 출처: `tokens/foundation.json` + `tokens/brand.json` (합성 결과)
-> 빌드: c8f34dd
+> 빌드: baf8324
 
 색상, 기본 폰트, 브레이크포인트는 이 문서의 토큰을 사용한다. 임의 hex/rgb/hsl 색상 작성은 금지한다. 간격·크기·타이포 스케일·모션·z-index는 토큰 카탈로그 대상이 아니며 CSS/Tailwind 직접값으로 작성한다.
 
@@ -172,6 +172,7 @@
 | 토큰 | 값 | 용도 |
 |------|----|------|
 | `--font-sans` | `'Pretendard GOV', 'Apple SD Gothic Neo', 'Noto Sans KR', system-ui, sans-serif` | 본문/컴포넌트 기본 폰트 |
+| `--font-heading` | `'Pretendard GOV', 'Apple SD Gothic Neo', 'Noto Sans KR', system-ui, sans-serif` | 제목 차등 서체 — brand에 heading 슬롯이 없으면 sans 값 폴백 |
 | `--font-mono` | `'JetBrains Mono', 'D2Coding', SFMono-Regular, Consolas, monospace` | 코드/고정폭 텍스트 |
 
 ### 브레이크포인트
@@ -188,7 +189,7 @@
 
 - 색상은 `--color-*` 시맨틱 토큰을 우선 사용한다.
 - 단계 색상은 예외적으로 명도가 필요한 경우에만 `--color-{group}-{step}`을 사용한다.
-- 폰트 패밀리는 `--font-sans`, `--font-mono`만 사용한다.
+- 폰트 패밀리는 `--font-sans`, `--font-heading`, `--font-mono`만 사용한다.
 - 브레이크포인트는 360 / 768 / 1280 세 단계만 사용한다.
 - Tailwind 반응형 variant는 `mobile:` / `tablet:` / `pc:`만 사용하고 `sm:` / `md:` / `lg:` / `xl:` / `2xl:`는 사용하지 않는다.
 - 단순 반응형 속성 변경은 CSS 파일 내부에서도 `@apply tablet:*`, `@apply pc:*`를 우선 사용한다.

package/data/references/project-profiles.md

@@ -2,15 +2,92 @@
 
 KRDS 체크리스트는 모든 프로젝트에 같은 방식으로 적용하지 않는다. 코드 생성 전 사이트 유형을 먼저 판정하고, 공통 품질 규칙과 조건부 정부/공공 규칙을 분리한다.
 
+<!-- profiles:begin — contracts/profiles.json에서 자동 생성. 직접 수정 금지. npm run build:profiles -->
+
 ## 사이트 유형
 
-| 유형 | 적용 대상 | 기본 생성 | 조건부/제외 |
-|------|-----------|-----------|-------------|
-| 일반사이트 | 민간 기업, 브랜드, 캠페인, 포트폴리오, 회사 홈페이지 | 시맨틱 구조, 접근성, 색상 토큰, 반응형, 브랜드 표현 | 정부 상징/공식 배너/운영기관 식별자 제외 |
-| 공공서비스 | 중앙부처·지자체·공공기관이 시민에게 제공하는 민원, 신청, 조회, 정책, 참여 서비스 | KRDS 접근성·컴포넌트·서비스 패턴 적극 적용, 신청/검색/로그인/알림 흐름 보강 | 공식 배너/정부 상징/운영기관 식별자는 과업·기관 정책 확인 시만 |
-| 공공기관 | 공기업, 출자·출연기관, 산하기관, 재단, 공공기관 대표 홈페이지 | 공공 톤의 헤더/푸터, 기관 식별, 정보공개/공지/홍보 구조 | 정부 상징은 기본값 아님. 기관 CI/BI와 과업 요구 우선 |
-| CMS·관리자 | CMS, 관리자, 사내 업무 시스템, 운영 콘솔 | 고밀도 정보 구조, 폼/테이블/검색/필터/상태 패턴, 접근성 | 정부 아이덴티티 제외. 공공 운영 CMS라도 관리자 화면에는 업무 효율 우선 |
-| 커머스·예약 | 쇼핑몰, 면세점, 예약, 결제, 이벤트·프로모션 | 상품/주문/결제 접근성, 명확한 CTA, 전환 흐름 | 법정 링크, 환불/교환/개인정보 안내. 공공기관 운영이면 공공기관 조건과 병행 |
+| 유형 | id | 적용 대상 | 기본 생성 | 정부 아이덴티티 |
+|------|----|-----------|-----------|-----------------|
+| 일반사이트 | `general-site` | 민간 기업, 브랜드, 캠페인, 포트폴리오, 회사 홈페이지 | 시맨틱 구조, 접근성, 색상 토큰, 반응형, 브랜드 표현 | 제외 |
+| 공공서비스 | `public-service` | 중앙부처·지자체·공공기관이 시민에게 제공하는 민원, 신청, 조회, 정책, 참여 서비스 | KRDS 접근성·컴포넌트·서비스 패턴 적극 적용. 신청/검색/로그인/알림 흐름 보강 | 조건부 — 과업·기관 정책 확인 시만 |
+| 공공기관 | `public-institution` | 공기업, 출자·출연기관, 산하기관, 재단, 공공기관 대표 홈페이지 | 공공 톤의 헤더/푸터, 기관 식별, 정보공개/공지/홍보 구조 | 조건부 — 과업·기관 정책 확인 시만 |
+| CMS·관리자 | `cms-admin` | CMS, 관리자, 사내 업무 시스템, 운영 콘솔 | 고밀도 정보 구조, 폼/테이블/검색/필터/상태 패턴, 접근성 | 제외 |
+| 커머스·예약 | `commerce-reservation` | 쇼핑몰, 면세점, 예약, 결제, 이벤트·프로모션 | 상품/주문/결제 접근성, 명확한 CTA, 전환 흐름 | 제외 |
+
+## 유형별 Page Shell
+
+사이트 유형 판정은 HTML 구조 선택으로 이어져야 한다. 정부/공공 아이덴티티 요소는 조건부 생성 항목이며 아래 shell에 기본 포함하지 않는다.
+
+| 유형 | 기본 section 흐름 | 우선 컴포넌트 | 밀도 | 표현 등급 |
+|------|-------------------|---------------|------|-----------|
+| 일반사이트 | `section--intro` → `section--content` → `section--list`<br>또는 `section--intro` → `section--content` → `section--notice` | header, main-menu, card, list, btn | 여유 | 표현형 |
+| 공공서비스 | `section--search` → `section--process` → `section--form` → `section--notice`<br>또는 `section--intro` → `section--process` → `section--data` → `section--notice` | breadcrumb, step-indicator, form, alert, table | 여유 | 절제형 |
+| 공공기관 | `section--intro` → `section--notice` → `section--list` → `section--content` | header, main-menu, breadcrumb, card, pagination | 여유 | 절제형 |
+| CMS·관리자 | `section--search` → `section--data` → `section--form`<br>또는 `section--search` → `section--data` → `section--notice` | form, select, table, pagination, badge, toast | 고밀도 | 기능형 |
+| 커머스·예약 | `section--intro` → `section--list` → `section--form` → `section--notice`<br>또는 `section--intro` → `section--list` → `section--process` → `section--notice` | card, btn, form, step-indicator, alert | 여유 | 표현형 |
+
+## 밀도 기준
+
+간격은 토큰이 아니라 직접값이다. 아래는 유형별 출발점이며, 프로젝트 맥락에서 조정할 수 있다.
+
+| 밀도 | section 패딩 (PC / 모바일) | 폼 행 간격 | 표 셀 패딩 | 기준 |
+|------|---------------------------|------------|------------|------|
+| 여유 | 8rem / 4rem | 2.4rem | 1.6rem | 읽기 중심 화면. 한 화면에 담는 정보보다 가독성을 우선한다. |
+| 고밀도 | 4rem / 2.4rem | 1.6rem | 1rem | 반복 작업 화면. 스크롤과 클릭 수를 줄이는 쪽을 우선한다. 터치 영역 44px 하한은 그대로 지킨다. |
+
+## 표현 등급 기준
+
+등급은 상한이지 목표가 아니다. 아래는 유형별 기본값이며, task contract의 expression 필드로 덮어쓸 수 있다.
+모션 수치는 장식·스크롤 진입 모션 한정이다. 컴포넌트 피드백 모션(모달·토스트·인풋 전환)은 interaction-timing.md 소유로 등급 무관이다.
+
+| 등급 | 정의 | hero | 시그니처 | 모션 | 제목 폰트 | 레이아웃 |
+|------|------|------|----------|------|-----------|----------|
+| 기능형 (`utility`) | 반복 업무 화면. 표현 요소가 과업 효율을 침해하지 않는 최소 수준. | none, text | 없음 | fade · 100~200ms | body-only | symmetric-grid |
+| 절제형 (`restrained`) | 신뢰가 우선인 공공 톤. 브랜드는 색·서체 수준에서 드러나고 장식은 절제한다. | text, image, carousel | 최대 1 — 그래픽 패턴, 포토 톤 통일, 커스텀 일러스트 | fade, translate-16, scroll-fade-in-once · 150~300ms | body-first | alternating |
+| 표현형 (`expressive`) | 브랜드 개성이 기억에 남아야 하는 사이트. 시그니처·타이포·섹션 리듬으로 정체성을 만든다. | text, image, carousel, video | 최대 3 — 그래픽 패턴, 커스텀 일러스트, 포토 트리트먼트, 타이포 모티프, 커스텀 불릿·구분선 | fade, translate-24, scale-2pct, stagger-50-80 · 200~400ms | heading-pairing | asymmetric |
+
+- **기능형** — 브랜드 식별은 로고와 primary 색상으로만 한다. point 색은 상태·배지·필수 표시 등 기능적 용도 외 사용하지 않는다.
+- **절제형** — 시그니처는 hero·인트로 구간 한정. displayFont body-first = 본문 폰트 기본, 기관 CI 전용 서체 또는 카탈로그 페어링이 계약된 경우만 제목 페어링.
+- **표현형** — 제목 페어링은 contracts/art-direction.json 카탈로그에서 선택 — 재배포 가능 라이선스 + 한글 폴백 스택 필수. 본문 콘텐츠 영역은 그리드 유지.
+
+## 조건부 생성
+
+| 항목 | 생성 조건 | 생성하지 않는 경우 |
+|------|-----------|--------------------|
+| 공식 배너 | 공공서비스 중 정부 상징 사용이 명시되었거나 과업에서 요구됨 | 일반사이트, CMS·관리자, 커머스, 기관 정책 미확인 |
+| 정부 상징 로고 | 정부 상징 사용 대상 서비스로 확인됨 | 자체 CI/BI가 우선인 일반사이트·공공기관·사내 프로젝트 |
+| 운영기관 식별자 | 상위 운영기관 표시가 과업에 포함됨 | 운영기관 계층이 없거나 브랜드 사이트인 경우 |
+| 공공 푸터 필수 링크 | 공공서비스 또는 공공기관 웹사이트 납품/운영 요구가 있음 | 일반사이트는 해당 법정/운영 링크로 대체 |
+
+## 유형별 주의
+
+- **일반사이트** — 정부 상징·공식 배너·운영기관 식별자를 생성하지 않는다.
+- **공공서비스** — 공식 배너·정부 상징·운영기관 식별자는 과업지시서나 기관 정책이 확인된 경우에만 생성한다. 관광·홍보 성격 서비스는 task contract에서 expression을 expressive로 상향할 수 있다. 단 publicIdentity가 required면 restrained 상한.
+- **공공기관** — 정부 상징은 기본값이 아니다. 기관 CI/BI와 과업 요구가 우선한다.
+- **CMS·관리자** — 공공 운영 CMS라도 관리자 화면에는 업무 효율을 우선한다. 마케팅형 hero나 장식 카드 중심 구성을 피한다.
+- **커머스·예약** — 법정 링크와 환불/교환/개인정보 안내가 필요하다. 공공기관이 운영하면 public-institution 조건을 병행한다. 주문·결제·인증 페이지의 task contract는 expression을 utility로 강등해 작성한다.
+
+<!-- profiles:end -->
+
+## 표현 등급 운용 원칙
+
+등급 정의와 유형별 기본값은 위 생성 구간의 표가 정본이다. 운용은 다음 다섯 원칙을 따른다.
+
+1. 등급은 상한이지 목표가 아니다 — "허용되니까"는 근거가 아니다.
+2. 상향은 task contract `expression` 필드로만 하고, 근거 기록이 필수다. 하향은 언제나 자유다.
+3. 페이지 단위 강등 — 폼·결제·인증·오류·검색결과는 사이트 등급 무관 utility~restrained 수위로 작성한다. 운반체는 페이지 단위 task contract, 확인은 납품 전 리뷰 체크리스트 항목이다.
+4. 축 단위 예외 — 등급 묶음에서 축 하나만 열 때는 `exceptions[]`에 `"rule": "expression.hero"` 형식으로 근거와 함께 기록한다(예: 공공기관 메인 영상 배경 발주 요구). 통째 상향보다 이 경로를 우선한다.
+5. publicIdentity 캡 — `required` 확정 시 상한은 restrained다(task contract 스키마가 강제한다). `unconfirmed` 상태에서는 상향을 보류한다.
+
+### 표현 등급 판정 예시
+
+실프로젝트의 등급 매핑은 저장소에 등재하지 않는다. 아래는 익명화한 판정 예시다.
+
+| 입력 단서 | 판정 | 이유 |
+|-----------|------|------|
+| "군 단위 지자체의 관광 안내 사이트" | public-service + expressive 상향 후보 | 관광·홍보 성격 — task contract에 상향 근거를 기록한다. publicIdentity가 required로 확정되면 상한은 restrained |
+| "출연 재단 대표 홈페이지, 정부 상징 사용 확인됨" | public-institution + restrained | publicIdentity required — 스키마가 상한 restrained를 강제한다 |
+| "지역 특산물 온라인 스토어의 프로모션 시즌 개편" | commerce-reservation + expressive | 기본 등급 유지. 단 주문·결제·인증 페이지의 task contract는 utility로 강등한다 |
 
 ## 항상 생성에 반영
 
@@ -24,18 +101,6 @@ KRDS 체크리스트는 모든 프로젝트에 같은 방식으로 적용하지
 - 포커스 표시, 키보드 접근, 터치 영역 44x44px 이상
 - 상태 표현은 색상 + 텍스트/아이콘/ARIA를 함께 사용
 
-## 유형별 Page Shell
-
-사이트 유형 판정은 HTML 구조 선택으로 이어져야 한다. 정부/공공 아이덴티티 요소는 조건부 생성 항목이며, 아래 shell에는 기본 포함하지 않는다.
-
-| 유형 | 기본 section 흐름 | 우선 컴포넌트 |
-|------|-------------------|---------------|
-| 일반사이트 | `section--intro` → `section--content` → `section--list` 또는 `section--notice` | header, main-menu, card, list, btn |
-| 공공서비스 | `section--search` 또는 `section--intro` → `section--process` → `section--form` 또는 `section--data` → `section--notice` | breadcrumb, step-indicator, form, alert, table |
-| 공공기관 | `section--intro` → `section--notice` → `section--list` → `section--content` | header, main-menu, breadcrumb, card, pagination |
-| CMS·관리자 | `section--search` → `section--data` → `section--form` 또는 `section--notice` | form, select, table, pagination, badge, toast |
-| 커머스·예약 | `section--intro` → `section--list` → `section--form` 또는 `section--process` → `section--notice` | card, btn, form, step-indicator, alert |
-
 공통 page shell:
 
 ```html

package/data/references/release-checklist.md

@@ -0,0 +1,82 @@
+# Release Checklist — 배포 전 점검
+
+자동검사가 통과했다고 배포해도 되는 것은 아니다. `npm run check`는 규칙 위반을 잡을 뿐, "이 화면이 쓸 만한가"는 판단하지 못한다.
+
+이 목록은 **사람이 확인하는 마지막 관문**이다. 팀 내부 리뷰와 발주처 검수 양쪽에 쓴다.
+
+## 통과 기준
+
+| 구분 | 항목 | 기준 |
+|------|------|------|
+| **필수** | 접근성 · 과업 흐름 · 품질 | **100%** — 하나라도 미달이면 배포하지 않는다 |
+| 권장 | 목적 · 신뢰 · 일관성 · 인수인계 | 전체 합산 **85% 이상** |
+
+필수 항목에 예외를 두려면 사유·책임자·해소 기한을 남긴다. 남기지 않은 예외는 예외가 아니라 누락이다.
+
+---
+
+## 1. 목적
+
+- [ ] 이 화면의 주 과업이 **하나**인가? 둘 이상이면 화면을 나눌 수 있는지 검토했는가
+- [ ] 처음 보는 사람이 3초 안에 "여기서 무엇을 하는가"를 말할 수 있는가
+
+## 2. 접근성 — 필수 100%
+
+- [ ] **키보드만으로 주 과업을 끝까지 완주**할 수 있는가 (마우스 없이 실제로 해봤는가)
+- [ ] 포커스가 항상 눈에 보이는가. 순서가 화면 흐름과 같은가
+- [ ] 스크린리더 읽기 순서가 시각 순서와 일치하는가
+- [ ] 색만으로 정보를 전달하는 곳이 없는가 (오류·필수·상태)
+- [ ] 브라우저 확대 200%에서 내용이 잘리거나 겹치지 않는가
+- [ ] `npm run check`의 대비 검사를 통과했는가 (자동)
+
+## 3. 과업 흐름 — 필수 100%
+
+- [ ] 진행 중 · 성공 · 실패 · 빈 상태가 **모두** 있는가. 하나라도 화면이 비어 있지 않은가
+- [ ] 상태 완결성 매트릭스를 채웠는가 — btn·form·table·list·alert·badge·pagination의 상태 셋 전부 실물 마크업 (`art-direction.md` §9 · 명세 수치는 ui-states 소유)
+- [ ] 오류 메시지가 원인과 **다음에 할 일**을 알려주는가 ("오류가 발생했습니다"는 미달)
+- [ ] 실패한 지점에서 되돌아가거나 다시 시도할 경로가 있는가
+- [ ] 입력값이 오류로 날아가지 않는가
+
+## 4. 신뢰
+
+- [ ] 되돌릴 수 없는 행동 전에 결과를 알리는가 (수수료 · 처리 기한 · 제출 후 수정 가능 여부)
+- [ ] 개인정보를 받는다면 왜 필요한지, 어디까지 쓰이는지 그 자리에서 알 수 있는가
+- [ ] 비활성 버튼이 **왜** 비활성인지 설명하는가
+
+## 5. 일관성
+
+- [ ] 카탈로그 컴포넌트로 구성했는가. 임의 신설한 것이 없는가
+- [ ] 색상이 전부 `var(--color-*)` 토큰인가 (자동검사와 별개로 육안 확인)
+- [ ] 같은 개념을 사이트 안에서 같은 말로 부르는가
+- [ ] 사용자가 조작하는 요소의 테두리에 `--color-border-control`을 썼는가
+- [ ] `art-direction.md` §9 납품 전 리뷰 체크리스트를 1회 실행했는가 — 안티패턴·섹션 리듬·등급 강등·실제 용어 정합
+
+## 6. 품질 — 필수 100%
+
+- [ ] 제출 버튼 **중복 클릭**이 막혀 있는가
+- [ ] 새로고침 · 뒤로가기에서 상태가 깨지지 않는가
+- [ ] 실기기에서 확인했는가 (모바일 Safari · Samsung Internet 최소 1종)
+- [ ] 360px 폭에서 가로 스크롤이 생기지 않는가
+- [ ] 터치 영역이 44×44px 이상인가
+
+## 7. 인수인계
+
+- [ ] 발주처 개발자가 6개월 뒤 이 코드를 고칠 수 있는 구조인가
+- [ ] 토큰·BEM·카탈로그를 벗어난 부분이 있다면 이유가 주석이나 문서에 남아 있는가
+- [ ] `--deliver`로 만든 납품본이 `npm install` → `npm run build` → `npm run check`로 자립 통과하는가
+- [ ] 외부 origin 리소스(스크립트·스타일·폰트·위젯)가 없는가 — 불가피한 CDN은 버전 고정 + SRI + `crossorigin`인가 (`trade-off-rules.md` §4)
+- [ ] 배포 환경 제약을 확인했는가 — 폐쇄망·CSP 환경이라면 외부 CDN·인라인 스크립트·런타임 컴파일이 그 환경에서 실제로 동작하는가
+
+---
+
+## 쓰는 법
+
+항목을 형식적으로 체크하지 않는다. **2번과 3번은 실제로 해보는 항목**이다 — 키보드로 완주해보고, 일부러 실패시켜 본다. 눈으로 훑어서는 알 수 없다.
+
+원칙끼리 충돌해 판단이 서지 않으면 `trade-off-rules.md`의 우선순위를 따른다.
+
+## 관련
+
+- 원칙 충돌 시 우선순위: `trade-off-rules.md`
+- 접근성 상세 기준: `accessibility.md`
+- 사이트 유형별 적용: `project-profiles.md`

package/data/references/trade-off-rules.md

@@ -0,0 +1,71 @@
+# Trade-off Rules — 원칙이 충돌할 때
+
+좋은 원칙끼리 부딪히는 순간이 실제 작업의 대부분이다. "접근성도 중요하고 브랜드도 중요하다"는 말은 결정을 미룰 뿐이다. 아래는 **무엇이 무엇을 이기는지**를 미리 정한 것이다.
+
+자동검사(R-01~R-22)는 규칙 위반을 잡는다. 이 문서는 검사가 잡지 못하는 **설계 판단**을 다룬다.
+
+---
+
+## 1. 접근성 > 전부
+
+아무리 완성도 높은 화면이라도 키보드로 완주할 수 없거나 스크린리더로 읽히지 않으면 그 화면은 실패다.
+
+WCAG 2.1 AA는 우리 프로젝트에서 **협상 대상이 아니다.** 공공 발주의 계약 요건이고, 미달은 감리에서 되돌아온다. "디자인 시안이 그래서"는 근거가 되지 않는다 — 시안을 고친다.
+
+> 예: 발주처가 준 CI 색이 링크로 쓰면 4.1:1이다 → 색을 바꾸거나(`brand.json`), 링크를 밑줄·아이콘으로 보강한다. 그냥 쓰지 않는다.
+
+**단, 접근성을 이유로 아무 디자인이나 뭉개지 않는다.** 요건을 만족하는 선택지는 대개 여럿이다.
+
+## 2. 과업 완수 > 브랜드 표현
+
+사용자는 신청·조회·민원을 끝내러 온다. 브랜드 연출이 그 흐름을 한 단계라도 늘리면 흐름을 택한다.
+
+기관 정체성은 헤더·푸터·색·타이포에서 충분히 드러난다. 과업 화면 한가운데에 브랜드 장치를 넣어야 한다면 그건 대개 배치 문제다. 브랜드 표현의 수위는 표현 등급(`art-direction.md`)이 정한다 — 등급은 상한이지 목표가 아니다.
+
+> 예: 신청 폼 위 전면 배너 → 필요하면 완료 화면으로 옮긴다.
+
+## 3. 신뢰 > 단순함
+
+단순하게 만들려고 정보를 감췄는데 사용자가 불안해진다면, 노출을 택한다.
+
+특히 **되돌릴 수 없는 것**은 행동 전에 말한다 — 수수료, 처리 기한, 제출 후 수정 가능 여부, 개인정보 제공 범위. 공공 서비스에서 "몰랐다"는 민원으로 돌아온다.
+
+> "간결한 화면"과 "불안한 사용자"가 붙으면 불안을 없애는 쪽이 이긴다.
+
+## 4. 일관성 > 개별 최적화
+
+이 화면에만 좋은 패턴은 사이트 전체로 보면 학습 비용이다.
+
+카탈로그에 있는 컴포넌트로 풀 수 있으면 그것을 쓴다. 카탈로그 밖 컴포넌트가 정말 필요하다고 판단되면 **임의로 만들지 말고 UX팀 결정으로 확장한다.** 용어도 마찬가지다 — 같은 것을 페이지마다 다르게 부르지 않는다.
+
+**외부 라이브러리·스크립트 도입도 같은 원칙이다.** 새 의존을 붙이기 전에 기존 스택(토큰·카탈로그·표준 CSS·이미 쓰는 라이브러리)으로 풀리는지 먼저 검토하고, 도입은 UX팀 결정을 거친다. 도입이 확정되면:
+
+- **셀프호스트를 우선한다** — 납품물은 self-contained가 원칙이고, 폐쇄망·내부망 배포에서 외부 CDN은 그대로 장애다.
+- 불가피하게 CDN을 쓰면 **버전 고정 + SRI(`integrity`) + `crossorigin`** 세 가지를 함께 건다. 버전 고정만으로는 공급망 변조를 막지 못한다.
+
+## 5. 유지보수 가능성 > 기교
+
+우리가 만든 것을 **발주처가 이어받는다.** 영리하지만 우리만 이해하는 해법은 인수인계 시점에 부채가 된다.
+
+토큰·BEM·카탈로그를 벗어난 구현은 그 자리에서는 빨라도 다음 사람에게는 비용이다. 판단 기준: **"발주처 개발자가 6개월 뒤에 이걸 고칠 수 있는가."**
+
+## 6. 근거가 있으면 관행을 바꾼다
+
+기존 관행(발주처 레거시, 예전 사이트 구조)을 지키는 것이 과업 성공률·오류율·완료 시간을 **명백히** 악화시킨다면 점진적으로 개선한다.
+
+단 근거를 갖춘다 — 사용성 테스트, 통계, 접근성 진단 결과, 유사 사례. **취향은 근거가 아니다.** 근거 없이 바꾸면 발주처와의 신뢰만 잃는다.
+
+---
+
+## 이 순서를 쓰는 법
+
+충돌이 생기면 위에서부터 내려온다. 1번이 걸리면 거기서 끝난다.
+
+문서로 못 푸는 충돌이 남으면 **결정하지 말고 UX팀에 올린다.** 특히 발주처 요구와 접근성이 부딪히는 경우는 담당자 선에서 정리할 사안이 아니다.
+
+## 관련
+
+- 배포 전 점검: `release-checklist.md`
+- 사이트 유형별 적용: `project-profiles.md`
+- 표현 등급·아트 디렉션: `art-direction.md`
+- 자동검사 규칙: `rules.json` (R-01~R-22)