@infomind-ux/infoux-mcp 0.2.0 → 0.3.0

package/data/references/krds-tokens.md

@@ -2,7 +2,7 @@
 
 > 자동 생성됨. 직접 수정 금지.
 > 출처: `tokens/foundation.json` + `tokens/brand.json` (합성 결과)
-> 빌드: 76589a3
+> 빌드: 113663a
 
 색상, 기본 폰트, 브레이크포인트는 이 문서의 토큰을 사용한다. 임의 hex/rgb/hsl 색상 작성은 금지한다. 간격·크기·타이포 스케일·모션·z-index는 토큰 카탈로그 대상이 아니며 CSS/Tailwind 직접값으로 작성한다.
 
@@ -98,17 +98,17 @@
 
 | 단계 | 토큰 | hex |
 |------|------|-----|
-| 5 | `--color-info-5` | `#e7f4fe` |
-| 10 | `--color-info-10` | `#d3ebfd` |
-| 20 | `--color-info-20` | `#9ed2fa` |
-| 30 | `--color-info-30` | `#5fb5f7` |
-| 40 | `--color-info-40` | `#2098f3` |
-| 50 | `--color-info-50` | `#0b78cb` |
-| 60 | `--color-info-60` | `#096ab3` |
-| 70 | `--color-info-70` | `#085691` |
-| 80 | `--color-info-80` | `#053961` |
-| 90 | `--color-info-90` | `#03253f` |
-| 95 | `--color-info-95` | `#021a2c` |
+| 5 | `--color-information-5` | `#e7f4fe` |
+| 10 | `--color-information-10` | `#d3ebfd` |
+| 20 | `--color-information-20` | `#9ed2fa` |
+| 30 | `--color-information-30` | `#5fb5f7` |
+| 40 | `--color-information-40` | `#2098f3` |
+| 50 | `--color-information-50` | `#0b78cb` |
+| 60 | `--color-information-60` | `#096ab3` |
+| 70 | `--color-information-70` | `#085691` |
+| 80 | `--color-information-80` | `#053961` |
+| 90 | `--color-information-90` | `#03253f` |
+| 95 | `--color-information-95` | `#021a2c` |
 
 ### Point (강조 — 빨강)
 

package/data/references/project-profiles.md

@@ -33,7 +33,7 @@ KRDS 체크리스트는 모든 프로젝트에 같은 방식으로 적용하지
 | 밀도 | section 패딩 (PC / 모바일) | 폼 행 간격 | 표 셀 패딩 | 기준 |
 |------|---------------------------|------------|------------|------|
 | 여유 | 8rem / 4rem | 2.4rem | 1.6rem | 읽기 중심 화면. 한 화면에 담는 정보보다 가독성을 우선한다. |
-| 고밀도 | 4rem / 2.4rem | 1.6rem | 1rem | 반복 작업 화면. 스크롤과 클릭 수를 줄이는 쪽을 우선한다. 터치 영역 44px 하한은 그대로 지킨다. |
+| 고밀도 | 4rem / 2.4rem | 1.6rem | 1rem | 반복 작업 화면. 스크롤과 클릭 수를 줄이는 쪽을 우선한다. 터치 입력 기기에서는 44px 하한을 그대로 지키고(R-13), 마우스 기반 데스크탑 화면에는 강제하지 않는다. |
 
 ## 표현 등급 기준
 

package/data/references/release-checklist.md

@@ -64,6 +64,8 @@
 - [ ] 발주처 개발자가 6개월 뒤 이 코드를 고칠 수 있는 구조인가
 - [ ] 토큰·BEM·카탈로그를 벗어난 부분이 있다면 이유가 주석이나 문서에 남아 있는가
 - [ ] `--deliver`로 만든 납품본이 `npm install` → `npm run build` → `npm run check`로 자립 통과하는가
+- [ ] 외부 origin 리소스(스크립트·스타일·폰트·위젯)가 없는가 — 불가피한 CDN은 버전 고정 + SRI + `crossorigin`인가 (`trade-off-rules.md` §4)
+- [ ] 배포 환경 제약을 확인했는가 — 폐쇄망·CSP 환경이라면 외부 CDN·인라인 스크립트·런타임 컴파일이 그 환경에서 실제로 동작하는가
 
 ---
 

package/data/references/tailwind-mapping.md

@@ -33,7 +33,7 @@ INFOUX는 Tailwind v4 `@theme`에 색상과 폰트만 공개한다.
 | `bg-danger-{5..95}` | `--color-danger-*` |
 | `bg-warning-{5..95}` | `--color-warning-*` |
 | `bg-success-{5..95}` | `--color-success-*` |
-| `bg-info-{5..95}` | `--color-info-*` |
+| `bg-information-{5..95}` | `--color-information-*` |
 
 ## 폰트 유틸리티
 

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

@@ -38,6 +38,11 @@ WCAG 2.1 AA는 우리 프로젝트에서 **협상 대상이 아니다.** 공공
 
 카탈로그에 있는 컴포넌트로 풀 수 있으면 그것을 쓴다. 카탈로그 밖 컴포넌트가 정말 필요하다고 판단되면 **임의로 만들지 말고 UX팀 결정으로 확장한다.** 용어도 마찬가지다 — 같은 것을 페이지마다 다르게 부르지 않는다.
 
+**외부 라이브러리·스크립트 도입도 같은 원칙이다.** 새 의존을 붙이기 전에 기존 스택(토큰·카탈로그·표준 CSS·이미 쓰는 라이브러리)으로 풀리는지 먼저 검토하고, 도입은 UX팀 결정을 거친다. 도입이 확정되면:
+
+- **셀프호스트를 우선한다** — 납품물은 self-contained가 원칙이고, 폐쇄망·내부망 배포에서 외부 CDN은 그대로 장애다.
+- 불가피하게 CDN을 쓰면 **버전 고정 + SRI(`integrity`) + `crossorigin`** 세 가지를 함께 건다. 버전 고정만으로는 공급망 변조를 막지 못한다.
+
 ## 5. 유지보수 가능성 > 기교
 
 우리가 만든 것을 **발주처가 이어받는다.** 영리하지만 우리만 이해하는 해법은 인수인계 시점에 부채가 된다.

package/data/rules.json

@@ -503,12 +503,12 @@
     {
       "id": "R-13",
       "category": "a11y",
-      "summary": "터치/클릭 영역 최소 44×44px",
+      "summary": "터치 영역 최소 44×44px — 터치 입력 기기 기준",
       "severity": "error",
       "enforcement": [
         "manual"
       ],
-      "rationale": "손가락으로 정확히 터치하기 어려운 작은 버튼은 오작동을 유발한다. 시각적 크기는 작더라도 padding으로 터치 영역을 확보한다. WCAG 2.5.5 Target Size (AAA) / iOS·Android HIG 권장. KRDS 모바일 권장 사이즈는 medium(48px) 이상이다.",
+      "rationale": "손가락으로 정확히 터치하기 어려운 작은 버튼은 오작동을 유발한다. 시각적 크기는 작더라도 padding으로 터치 영역을 확보한다. 적용 범위는 터치 입력(모바일·태블릿)이며, 마우스처럼 정밀한 포인터를 쓰는 데스크탑 dense UI에는 강제하지 않는다 — btn xsmall(32px)·small(40px)이 데스크탑에서 허용되는 근거다. 근거: Apple HIG 44pt / Android 48dp, WCAG 2.5.5 Target Size (AAA). AA 의무선은 WCAG 2.2의 2.5.8 Target Size (Minimum) 24×24이고 간격 대체가 허용되므로, 44px은 팀이 터치 환경에 한정해 상향한 기준이다. KRDS 모바일 권장 사이즈는 medium(48px) 이상이다.",
       "bad": [
         {
           "code": ".icon-btn {\n  width: 24px;\n  height: 24px;\n}",
@@ -598,7 +598,7 @@
         "check-html-structure.js"
       ],
       "lang": "html",
-      "rationale": "modal/tab/accordion/tooltip/disclosure/carousel/calendar 등 위젯 컴포넌트는 스크린리더가 의미를 파악할 수 있도록 ARIA로 상태·관계·역할을 명시해야 한다. 네이티브 시맨틱만으로 부족한 영역이며, KRDS와 WAI-ARIA 1.2 APG가 정의한 패턴을 따른다. KWCAG 1.3.1 / 4.1.2.",
+      "rationale": "modal/tab/accordion/tooltip/disclosure/carousel/calendar 등 위젯 컴포넌트는 스크린리더가 의미를 파악할 수 있도록 ARIA로 상태·관계·역할을 명시해야 한다. 네이티브 시맨틱만으로 부족한 영역이며, KRDS와 WAI-ARIA 1.2 APG가 정의한 패턴을 따른다. WCAG 1.3.1 Info and Relationships (A) / 4.1.2 Name, Role, Value (A) — KWCAG 대응 항목은 5.3.2 콘텐츠의 선형구조 / 8.2.1 웹 애플리케이션 접근성 준수다.",
       "refs": [
         "references/html-semantics.md",
         "references/accessibility.md"
@@ -909,6 +909,65 @@
         "tokens/brand.json",
         "contracts/art-direction.json"
       ]
+    },
+    {
+      "id": "R-27",
+      "category": "html",
+      "summary": "아이콘은 카탈로그에서 가져온다 — 임의 SVG 삽입 금지",
+      "severity": "error",
+      "enforcement": [
+        "check-icons.js",
+        "manual"
+      ],
+      "rationale": "아이콘을 그때그때 붙여 넣으면 프로젝트마다 출처·굵기·그리드가 섞이고 라이선스 근거가 남지 않는다. 색상을 토큰으로 강제하는 R-01과 같은 이유다. 쓸 아이콘은 contracts/icon-codepoints.json에 등재된 것뿐이며, 없으면 지어내지 말고 UX팀에 요청한다 — AI 도구는 MCP list_icons·get_icon으로 실재하는 이름만 받는다. 기본 표기는 `<span class=\"icon-font icon-font--{name}\">`이고, 아이콘에는 항상 aria-hidden을 붙인다(스크린리더가 PUA 코드포인트를 오독한다). 뜻은 아이콘 밖에서 전한다 — 옆의 텍스트나 버튼의 aria-label이다. SVG 태그는 폰트를 못 쓰는 곳이나 개별 색이 필요할 때만 쓴다. 표정은 슬림·레귤러·볼드·필 네 가지이고 이름과 코드포인트는 그대로 둔 채 글리프만 바뀐다 — 폰트는 `icon-font--bold` 같은 클래스가, SVG는 스프라이트 파일(`sprite-bold.svg`)이 표정을 정한다. SVG 쪽에 `icon--bold` 같은 클래스를 붙이지 않는다(아무 일도 하지 않는다). 한 화면에서 표정을 섞지 않으며, 모든 아이콘에 필이 있는 것은 아니다 — 없는 표정을 부르면 빈 네모가 나온다.",
+      "bad": [
+        {
+          "code": "<svg viewBox=\"0 0 20 20\"><path fill=\"#333\" d=\"...\"/></svg>",
+          "note": "카탈로그 밖 임의 SVG — 뷰박스·색이 세트와 어긋난다"
+        },
+        {
+          "code": "<span class=\"icon-font icon-font--search\"></span>",
+          "note": "aria-hidden이 없다 — 스크린리더가 코드포인트를 읽는다"
+        },
+        {
+          "code": "<button class=\"btn btn--text\"><span class=\"icon-font icon-font--close\" aria-hidden=\"true\"></span></button>",
+          "note": "아이콘만 있는데 버튼에 이름이 없다 — 무슨 버튼인지 알 수 없다"
+        },
+        {
+          "code": "<span class=\"icon-font icon-font--magnifier\" aria-hidden=\"true\"></span>",
+          "note": "대장에 없는 이름 — 아무것도 안 나온다"
+        },
+        {
+          "code": "<svg class=\"icon icon--bold\" aria-hidden=\"true\"><use href=\"/assets/icons/sprite.svg#search\"></use></svg>",
+          "note": "SVG에서 표정은 클래스가 아니라 스프라이트 파일이 정한다 — 이 클래스는 아무 일도 안 하고 기본 굵기가 나온다"
+        },
+        {
+          "code": "<span class=\"icon-font icon-font--fill icon-font--search\" aria-hidden=\"true\"></span>",
+          "note": "돋보기는 채울 면이 없어 필이 없다 — 빈 네모가 나온다. 그 아이콘이 가진 표정만 쓴다"
+        }
+      ],
+      "good": [
+        {
+          "code": "<button class=\"btn\"><span class=\"icon-font icon-font--search\" aria-hidden=\"true\"></span>검색</button>",
+          "note": "옆의 텍스트가 뜻을 전한다"
+        },
+        {
+          "code": "<button class=\"btn btn--text\" aria-label=\"닫기\"><span class=\"icon-font icon-font--close\" aria-hidden=\"true\"></span></button>",
+          "note": "아이콘만 있을 때는 버튼에 이름을 준다"
+        },
+        {
+          "code": "<svg class=\"icon\" aria-hidden=\"true\"><use href=\"/assets/icons/sprite.svg#search\"></use></svg>",
+          "note": "폰트를 못 쓰는 곳이나 개별 색이 필요할 때"
+        },
+        {
+          "code": "<span class=\"icon-font icon-font--bold icon-font--search\" aria-hidden=\"true\"></span>",
+          "note": "폰트는 클래스가 표정을 바꾼다 — 표정 클래스를 이름 클래스 앞에 둔다"
+        },
+        {
+          "code": "<svg class=\"icon\" aria-hidden=\"true\"><use href=\"/assets/icons/sprite-bold.svg#search\"></use></svg>",
+          "note": "SVG는 스프라이트 파일이 곧 표정이다"
+        }
+      ]
     }
   ]
 }

package/data/snippets/error-page.md

@@ -0,0 +1,107 @@
+# 오류 페이지 (Error Page) — infoUX
+
+요청한 페이지를 보여줄 수 없을 때(404 · 403 · 500 · 점검) 한 화면으로 보여주는 패턴. 사용자는 이 화면을 구경하러 온 것이 아니라 **빠져나가러** 왔다. 장식보다 탈출 경로가 먼저다.
+
+## 기본 마크업
+
+페이지 shell(skip link · `header#header` · `main#main` · `footer#footer`)은 그대로 두고 `main` 안에 한 섹션으로 넣는다.
+
+```html
+<section class="section section--content" aria-labelledby="error-title">
+  <div class="container">
+    <div class="error-page">
+      <h1 class="error-page__title" id="error-title">요청하신 페이지를 찾을 수 없습니다</h1>
+      <p class="error-page__desc">주소가 바뀌었거나 삭제된 페이지일 수 있습니다. 아래 방법으로 원하시는 내용을 찾아보세요.</p>
+
+      <div class="error-page__actions">
+        <a class="btn btn--primary" href="/">홈으로 이동</a>
+        <a class="btn btn--tertiary" href="/sitemap">사이트맵 보기</a>
+      </div>
+
+      <form class="error-page__search" role="search" action="/search" method="get">
+        <label class="sr-only" for="error-search">검색어</label>
+        <input class="input" type="search" id="error-search" name="q" autocomplete="off">
+        <button type="submit" class="btn btn--secondary">검색</button>
+      </form>
+
+      <nav class="error-page__help" aria-labelledby="error-help-title">
+        <h2 class="error-page__help-title" id="error-help-title">많이 찾는 페이지</h2>
+        <ul class="error-page__help-list">
+          <li><a class="error-page__help-link" href="/notice">공지사항</a></li>
+          <li><a class="error-page__help-link" href="/apply">신청하기</a></li>
+          <li><a class="error-page__help-link" href="/lookup">처리 현황 조회</a></li>
+          <li><a class="error-page__help-link" href="/faq">자주 묻는 질문</a></li>
+        </ul>
+      </nav>
+
+      <p class="error-page__contact">계속 같은 화면이 나오면 대표전화 064-123-4567(평일 09:00~18:00)로 알려 주세요.</p>
+    </div>
+  </div>
+</section>
+```
+
+## 시맨틱 구조
+
+- **Root 태그**: `<div class="error-page">` — `main > section > .container` 안의 컴포넌트 루트
+- **자식**: `h1.__title` → `p.__desc` → `div.__actions` → (선택) `form.__search` → `nav.__help` → (선택) `p.__contact`
+- **제목**: 오류 화면의 `h1`은 하나다. 섹션 이름은 `aria-labelledby`로 이 `h1`에 연결한다
+- **검색 폼**: `role="search"` + `<label>`. 시각적으로 레이블을 숨기려면 `.sr-only`를 쓴다 (placeholder만으로 레이블을 대신하지 않는다)
+- **바로가기**: `nav` + `aria-labelledby`로 이름을 받는다. 페이지에 nav가 여럿이므로 이름이 서로 달라야 한다
+
+> 상세: `references/html-semantics.md#error-page`
+
+## 오류 유형별 문안
+
+[마이크로카피 3-Part 공식](/design/microcopy/) — **무엇이 잘못됐는지 + (왜) + 어떻게 해결하는지**. 사용자를 탓하지 않고, 내부 오류 코드를 문장에 노출하지 않는다.
+
+| 유형 | 제목 예 | 안내 예 | 주 행동 |
+|------|---------|---------|---------|
+| 404 없는 페이지 | 요청하신 페이지를 찾을 수 없습니다 | 주소가 바뀌었거나 삭제된 페이지일 수 있습니다. | 홈 · 검색 · 바로가기 |
+| 403 접근 권한 없음 | 이 페이지를 볼 수 있는 권한이 없습니다 | 로그인이 필요하거나 접근이 제한된 페이지입니다. | 로그인 · 권한 신청 |
+| 500 서버 오류 | 일시적으로 페이지를 보여드릴 수 없습니다 | 잠시 뒤에 다시 시도해 주세요. 문제가 계속되면 문의해 주세요. | 새로고침 · 문의 |
+| 503 점검 | 서비스 점검 중입니다 | 점검 시간 안내(확인된 일시만) | 점검 종료 후 이동 · 공지 |
+
+- 점검 문안의 **일시·기간은 확인된 값만** 쓴다. 지어내거나 "곧 완료됩니다" 같은 추측을 쓰지 않는다 (R-23)
+- 제목에 "에러", "Error 404", 기술 용어를 쓰지 않는다. 상태 코드가 필요하면 `__code`를 작게 따로 둔다
+
+## 사이트 유형별 수위
+
+오류 화면은 사이트의 표현 등급과 무관하게 **utility~restrained**다 (art-direction §1 원칙 3 — 페이지 단위 강등).
+
+| 유형 | 수위 | 허용 | 쓰지 않는 것 |
+|------|------|------|--------------|
+| 공공서비스 | restrained | 제목 · 안내 · 홈/검색/바로가기 · 문의 | 일러스트 · 큰 상태 코드 |
+| 공공기관 | restrained | 위와 동일 + 기관 대표 연락처 | 일러스트 · 유머 문구 |
+| CMS·관리자 | utility | 제목 · 안내 · 이전 화면/대시보드로 이동 | 일러스트 · 장식 전부 |
+| 일반사이트 | restrained | 위 + **장식 일러스트 한 점**(`__visual`, `alt=""`) · 상태 코드 | 게임 · 글리치 · 3D · 움직이는 장식 |
+| 커머스·예약 | restrained | 위 + 상품 추천 링크 | 프로모션 배너 · 쿠폰 팝업 |
+
+404 화면을 눈에 띄는 연출로 만드는 갤러리 사례가 많지만, 공공 사이트에서는 **재미보다 탈출 경로**가 먼저다. 연출이 필요하면 일반사이트에서 일러스트 한 점으로 끝낸다.
+
+## 서버 · 문서 측 요건
+
+HTML만으로 끝나지 않는다. 아래는 구현팀과 함께 확인한다.
+
+- **HTTP 상태 코드를 실제 값으로 응답한다** (404는 404). 화면만 오류 문구이고 상태가 200이면 검색 엔진·보조기기가 오류를 알 수 없다(soft 404)
+- 없는 주소를 **홈으로 자동 이동(redirect)시키지 않는다.** 사용자가 어디서 길을 잃었는지 알 수 없게 된다
+- `<title>`에 오류를 밝힌다: `페이지를 찾을 수 없습니다 | 사이트명`
+- 검색 엔진에 색인되지 않도록 `<meta name="robots" content="noindex">`를 둔다
+- 오류 화면에서도 전체 페이지 shell(헤더 · 메뉴 · 푸터)을 유지한다 — 일반 내비게이션이 길 찾기의 첫 수단이다
+
+## 접근성
+
+- 페이지 `h1`은 오류 제목 하나다. 바로가기 제목은 `h2`
+- 제목·안내는 `role="alert"`로 낭독시키지 않는다. 사용자가 직접 이 주소로 들어온 화면이고, 페이지 제목(`<title>`)과 `h1`이 상황을 전한다
+- 검색 입력에는 `<label>`이 필요하다. `autocomplete="off"`는 검색어 재입력 보호용이며 선택이다
+- 링크는 밑줄로 구분하고 본문 링크 대비 4.5:1 이상(`--color-primary-pressed`)
+- 터치 영역 44×44px 이상 (R-13): 바로가기 링크 `min-h-[4.4rem]`, 버튼은 `btn` 기본 크기(48px)
+- 상태 코드(`__code`)는 장식이 아니라 정보다. 크게 쓰더라도 `aria-hidden`을 주지 않는다
+- 움직이는 요소를 두지 않는다. 장식 일러스트는 정지 이미지이며 `alt=""`
+
+## 출처
+
+- 색상은 `--color-primary` · `--color-primary-pressed` · `--color-text` · `--color-text-subtle` · `--color-border-light`
+- 간격·타이포는 프로젝트 밀도에 맞는 CSS/Tailwind 직접값 사용
+- CSS: `src/styles/6-components/error-page.css`
+- 문안 기준: `site/design/microcopy.md` (에러 메시지 3-Part 공식)
+- 수위 기준: `references/art-direction.md` §1 (페이지 단위 강등)

package/data/snippets/footer.md

@@ -0,0 +1,150 @@
+# 푸터 (Site Footer) — infoUX
+
+페이지 하단 공통 영역. 페이지 shell의 `footer#footer` 랜드마크 안에 쓴다. 사이트 유형에 따라 구성 요소를 덜어 쓰는 패턴이라, 모든 요소를 채우는 것이 목표가 아니다.
+
+## 기본 마크업
+
+```html
+<footer id="footer" class="site-footer">
+  <div class="container">
+    <div class="site-footer__top">
+      <a class="site-footer__brand" href="/">
+        <img class="site-footer__logo" src="/images/logo.svg" alt="기관명">
+      </a>
+      <nav class="site-footer__nav" aria-label="푸터 메뉴">
+        <div class="site-footer__group">
+          <h2 class="site-footer__heading" id="footer-group-about">재단 소개</h2>
+          <ul class="site-footer__list" aria-labelledby="footer-group-about">
+            <li><a class="site-footer__link" href="/about/greeting">인사말</a></li>
+            <li><a class="site-footer__link" href="/about/history">연혁</a></li>
+            <li><a class="site-footer__link" href="/about/location">오시는 길</a></li>
+          </ul>
+        </div>
+        <div class="site-footer__group">
+          <h2 class="site-footer__heading" id="footer-group-program">프로그램</h2>
+          <ul class="site-footer__list" aria-labelledby="footer-group-program">
+            <li><a class="site-footer__link" href="/program/exhibition">전시</a></li>
+            <li><a class="site-footer__link" href="/program/performance">공연</a></li>
+            <li><a class="site-footer__link" href="/program/education">교육</a></li>
+          </ul>
+        </div>
+        <div class="site-footer__group">
+          <h2 class="site-footer__heading" id="footer-group-news">알림마당</h2>
+          <ul class="site-footer__list" aria-labelledby="footer-group-news">
+            <li><a class="site-footer__link" href="/news/notice">공지사항</a></li>
+            <li><a class="site-footer__link" href="/news/press">보도자료</a></li>
+          </ul>
+        </div>
+        <div class="site-footer__group">
+          <h2 class="site-footer__heading" id="footer-group-help">이용 안내</h2>
+          <ul class="site-footer__list" aria-labelledby="footer-group-help">
+            <li><a class="site-footer__link" href="/help/faq">자주 묻는 질문</a></li>
+            <li><a class="site-footer__link" href="/help/sitemap">사이트맵</a></li>
+          </ul>
+        </div>
+      </nav>
+    </div>
+
+    <div class="site-footer__bottom">
+      <div class="site-footer__info">
+        <nav class="site-footer__legal" aria-label="약관 및 정책">
+          <ul class="site-footer__legal-list">
+            <li><a class="site-footer__link site-footer__link--important" href="/privacy">개인정보처리방침</a></li>
+            <li><a class="site-footer__link" href="/terms">이용약관</a></li>
+            <li><a class="site-footer__link" href="/copyright">저작권 정책</a></li>
+          </ul>
+        </nav>
+        <address class="site-footer__address">
+          제주특별자치도 제주시 한라로 100<br>
+          대표전화 064-123-4567 · 이메일 contact@example.org
+        </address>
+        <small class="site-footer__copy">© 2026 기관명. All rights reserved.</small>
+      </div>
+
+      <details class="site-footer__family">
+        <summary class="site-footer__family-summary">
+          패밀리 사이트
+          <svg class="site-footer__family-icon icon icon--xsmall" aria-hidden="true"><use href="/assets/icons/sprite.svg#chevron-down"></use></svg>
+        </summary>
+        <ul class="site-footer__family-list">
+          <li><a class="site-footer__family-link" href="https://example.org/museum">미술관</a></li>
+          <li><a class="site-footer__family-link" href="https://example.org/library">도서관</a></li>
+        </ul>
+      </details>
+    </div>
+  </div>
+</footer>
+```
+
+## 시맨틱 구조
+
+- **Root 태그**: `<footer id="footer" class="site-footer">` — 페이지에 하나, `main` 바깥 (R-15 page shell)
+- **자식**: `.container` → `__top`(브랜드 + 푸터 메뉴) → `__bottom`(정책 링크·연락처·저작권·패밀리 사이트)
+- **내비게이션**: 푸터 안 `nav`가 둘 이상이면 각각 `aria-label`로 구분한다 (`푸터 메뉴`, `약관 및 정책`)
+- **연락처**: `<address>`는 이 사이트의 연락처에만 쓴다. 임의의 주소 문장에 쓰지 않는다
+- **저작권**: `<small>` — 부가 고지임을 나타낸다
+
+> 상세: `references/html-semantics.md#site-footer`
+
+## Variant
+
+| Variant | 클래스 | 용도 |
+|---------|--------|------|
+| 기본 | `.site-footer` | 푸터 메뉴 + 하단 고지. 일반사이트·공공기관 |
+| 소형 | `.site-footer--compact` | `__top` 없이 `__bottom`만. 공공서비스·관리자 화면 |
+| 반전 | `.site-footer--inverse` | 어두운 바탕. 일반사이트·커머스 표현형 한정 |
+
+```html
+<!-- 소형: 상단 메뉴 없이 정책 링크와 저작권만 -->
+<footer id="footer" class="site-footer site-footer--compact">
+  <div class="container">
+    <div class="site-footer__bottom">
+      <div class="site-footer__info">
+        <nav class="site-footer__legal" aria-label="약관 및 정책">
+          <ul class="site-footer__legal-list">
+            <li><a class="site-footer__link site-footer__link--important" href="/privacy">개인정보처리방침</a></li>
+            <li><a class="site-footer__link" href="/terms">이용약관</a></li>
+          </ul>
+        </nav>
+        <small class="site-footer__copy">© 2026 기관명</small>
+      </div>
+    </div>
+  </div>
+</footer>
+```
+
+## 사이트 유형별 구성
+
+| 유형 | 변형 | 구성 | 비고 |
+|------|------|------|------|
+| 일반사이트 | 기본 / 반전 | 푸터 메뉴 + 정책 링크 + 연락처 + 저작권 (+ 패밀리 사이트) | 표현형이라 브랜드 톤을 푸터에서 가장 크게 연다 |
+| 공공서비스 | 소형 | 정책 링크 + 저작권 | 과업 화면을 방해하지 않는다. 기관 식별자는 발주처 지침이 확인된 경우에만 |
+| 공공기관 | 기본 | 푸터 메뉴 + 정책 링크 + 연락처 + 저작권 + 패밀리 사이트 | 공공 푸터 필수 링크는 과업지시서·기관 정책 확인 후 추가 |
+| CMS·관리자 | 소형 | 저작권·버전 표기 정도 | utility 등급. 장식 없음 |
+| 커머스·예약 | 기본 / 반전 | 약관·환불·개인정보 링크 + 사업자 정보 | 법정 표기 항목은 발주처·법무 확인 후 채운다 |
+
+## 사용 조건
+
+- 푸터 메뉴는 사이트맵을 복제하는 곳이 아니다 — 자주 찾는 경로만 3~5개 그룹으로 추린다
+- 한 그룹의 링크는 5개 안팎으로 둔다. 길어지면 그룹을 나눈다
+- 정책 링크 중 가장 중요한 하나(개인정보처리방침 등)에만 `--important`를 준다
+- 패밀리 사이트는 **링크 클릭으로만** 이동한다. `<select>` 선택만으로 페이지가 바뀌지 않게 한다 (WCAG 3.2.2)
+- 사업자 정보·법정 고지 문구는 지어내지 않는다 — 발주처가 확인해 준 값만 쓴다 (R-23)
+
+## 접근성
+
+- 랜드마크: `<footer>`는 `contentinfo`로 노출된다. 페이지에 하나만 둔다
+- 푸터 `nav`가 여럿이면 `aria-label`이 서로 달라야 한다
+- 그룹 제목은 `h2` + 목록 `aria-labelledby`로 연결해 스크린리더가 그룹 이름을 읽게 한다
+- 링크 터치 영역 44×44px 이상 (R-13) — `__link`는 `min-h-[4.4rem]`를 포함한다
+- 패밀리 사이트 `details`는 키보드 `Enter`/`Space`로 열고 닫는다. JS가 필요 없다
+- 반전 변형: 일반 텍스트 4.5:1 이상을 유지한다 (`--color-gray-20` on `--color-bg-inverse`)
+- 외부 사이트 링크는 새 창을 열지 않는다. 새 창이 필요하면 링크 텍스트나 `aria-label`에 "새 창"을 밝힌다
+- 초점 외곽선: 칸을 꽉 채우는 링크(`__family-link`)는 `outline-offset`을 음수로 두어 안쪽에 그린다
+
+## 출처
+
+- 색상은 `--color-bg-subtler` · `--color-text` · `--color-text-subtle` · 반전은 `--color-bg-inverse` · `--color-text-inverse` · `--color-gray-20`
+- 간격·타이포는 프로젝트 밀도에 맞는 CSS/Tailwind 직접값 사용
+- CSS: `src/styles/6-components/footer.css`
+- 아이콘: `chevron-down` 스프라이트 — `/assets/icons/sprite.svg` (아이콘 카탈로그, R-27)

package/data/snippets/header.md

@@ -22,7 +22,9 @@
 
     <div class="site-header__actions">
       <button type="button" class="btn btn--text btn--small">로그인</button>
-      <button type="button" class="site-header__toggle" aria-label="메뉴 열기" aria-expanded="false">☰</button>
+      <button type="button" class="site-header__toggle" aria-label="전체 메뉴" aria-expanded="false" aria-controls="mobile-menu" data-mobile-menu-open="mobile-menu">
+        <svg class="icon" aria-hidden="true"><use href="/assets/icons/sprite.svg#menu"></use></svg>
+      </button>
     </div>
   </div>
 </header>
@@ -30,7 +32,7 @@
 
 ## 동작
 
-- 모바일/태블릿 (< 1280px): 주 메뉴 숨김 + 햄버거 토글 노출
+- 모바일/태블릿 (< 1280px): 주 메뉴 숨김 + 햄버거 토글 노출. 토글은 [모바일 메뉴](mobile-menu.md)를 연다
 - PC (≥ 1280px): 주 메뉴 노출 + 햄버거 숨김
 - `position: sticky` 적용 (스크롤 시에도 상단 유지)
 
@@ -39,7 +41,8 @@
 - `<header id="header">` 시맨틱 태그 사용 (페이지당 하나)
 - 주 메뉴는 `<nav aria-label="주 메뉴">` (페이지에 nav가 여러 개면 label 필수)
 - 현재 페이지 메뉴: `aria-current="page"`
-- 모바일 토글: `aria-label="메뉴 열기/닫기"` + `aria-expanded` 상태 토글
+- 모바일 토글: `aria-label`은 상태와 무관하게 고정(`전체 메뉴`)하고, 열림 여부는 `aria-expanded`가 전한다. `aria-controls`로 [모바일 메뉴](mobile-menu.md) 패널 id를 연결한다
+- 토글 아이콘은 아이콘 카탈로그(`menu` 스프라이트)를 쓴다 — 햄버거 모양의 텍스트 기호를 아이콘 대신 쓰지 않는다 (R-27)
 - 로고 `<img>` `alt` 텍스트 필수 (KRDS R-09)
 
 ## 조건부 공공/정부 요소

package/data/snippets/icon.md

@@ -0,0 +1,102 @@
+# 아이콘 (Icon) — infoUX
+
+카탈로그에 등재된 아이콘만 쓴다. 목록은 `npm run icons:sheet`로 보거나
+AI 도구에서는 MCP `list_icons`로 받는다. 없는 아이콘은 지어내지 말고 UX팀에 요청한다 (R-27).
+
+**한국어로 찾는다.** `list_icons("달력")`처럼 평소 쓰는 말로 물으면 걸린다 —
+이름이 영어라 「없다」고 판단하고 지어내는 일을 막는 다리다
+(사전: `contracts/icon-keywords.json`).
+
+## 기본 마크업
+
+```html
+<!-- 장식용 — 옆에 텍스트가 있어 아이콘이 의미를 더하지 않을 때 -->
+<button class="btn">
+  <span class="icon-font icon-font--search" aria-hidden="true"></span>
+  검색
+</button>
+
+<!-- 의미를 담을 때 — 아이콘만으로 기능을 나타낸다 -->
+<button class="btn btn--text" aria-label="닫기">
+  <span class="icon-font icon-font--close" aria-hidden="true"></span>
+</button>
+```
+
+`aria-hidden`은 장식·의미 어느 쪽이든 붙인다. 폰트 아이콘은 스크린리더가 PUA 코드포인트를
+엉뚱하게 읽으므로 아이콘 자체를 숨기고, **뜻은 옆의 텍스트나 버튼의 `aria-label`이 전한다.**
+
+### SVG 태그로 넣을 때
+
+폰트를 못 쓰는 곳(일부 메일 템플릿·외부 CMS)이나 아이콘 하나만 색을 달리해야 할 때 쓴다.
+
+```html
+<svg class="icon" aria-hidden="true"><use href="/assets/icons/sprite.svg#search"></use></svg>
+<svg class="icon" role="img" aria-label="검색"><use href="/assets/icons/sprite.svg#search"></use></svg>
+```
+
+낱개 SVG 파일이 필요하면 스튜디오 상세 화면에서 「SVG 파일 받기」로 내려받는다.
+
+## 표정 — 슬림 · 레귤러 · 볼드 · 필
+
+한 아이콘이 네 얼굴을 가진다. **이름과 코드포인트는 그대로이고 글리프만 바뀐다.**
+
+| 표정 | 획 굵기 | 언제 |
+|---|---|---|
+| 슬림 | 1.0 | 32px 이상 큰 자리, 옅은 보조 정보 |
+| 레귤러 | 1.5 | 기본. 본문 옆에서 글자와 무게가 맞는다 |
+| 볼드 | 2.0 | 버튼·헤더처럼 눈이 먼저 닿아야 하는 자리 |
+| 필 | — | 선택·활성 상태 (탭 현재 항목, 즐겨찾기 켬) |
+
+한 화면에서 표정을 섞지 않는다. 같은 층위의 아이콘은 같은 표정으로 둔다 —
+굵기가 뒤섞이면 중요도가 다른 것처럼 읽힌다.
+
+```html
+<!-- 폰트: 클래스가 표정을 바꾼다 -->
+<span class="icon-font icon-font--bold icon-font--search" aria-hidden="true"></span>
+
+<!-- SVG: 스프라이트 파일이 곧 표정이다 — 클래스를 더 붙이지 않는다 -->
+<svg class="icon" aria-hidden="true"><use href="/assets/icons/sprite-bold.svg#search"></use></svg>
+```
+
+**모든 아이콘에 네 표정이 다 있는 것은 아니다.** 채울 면이 없는 형태(돋보기·화살표 등)에는
+필을 만들지 않는다 — 72종 중 40종에만 있다. 없는 표정을 부르면 빈 네모가 나오므로,
+스튜디오 상세 화면에서 그 아이콘이 가진 표정만 골라 쓴다.
+
+프로젝트가 기본만 쓰면 `infoux-icons.woff2` 하나만 넣으면 된다. 표정은 파일이 따로라
+쓰는 것만 가져가면 된다.
+
+## 크기
+
+폰트는 `font-size`를 따라간다. 기본 24px이고, 클래스로 바꾼다.
+
+- `.icon-font` (기본 24px) · `--xsmall` 16 · `--small` 20 · `--large` 32 · `--xlarge` 40
+- 본문과 섞일 때는 크기를 지정하지 않는다 — 글자 크기를 그대로 따른다
+
+SVG 방식은 `.icon` + 같은 어휘(`.icon--small` 등)를 쓴다. 시각적 이름(`--big`)은
+쓰지 않는다 (R-06·R-18).
+
+## 색
+
+색을 아이콘에 넣지 않는다. `fill: currentColor`라 부모의 `color`를 따라간다 (R-01의 아이콘판).
+
+```html
+<span style="--tone: var(--color-danger)" class="delete-action">
+  <svg class="icon" aria-hidden="true"><use href="/assets/icons/sprite.svg#delete"></use></svg>
+  삭제
+</span>
+```
+
+## 접근성
+
+- 아이콘에는 항상 `aria-hidden="true"`를 붙인다. 폰트는 스크린리더가 오독하고, SVG도
+  장식일 때가 대부분이다
+- **뜻은 아이콘 밖에서 전한다** — 옆의 텍스트, 또는 버튼의 `aria-label`
+- 아이콘만 있는 버튼은 버튼에 `aria-label`이 없으면 무슨 버튼인지 알 수 없다
+- 클릭 영역은 아이콘 크기가 아니라 44×44px 이상 (R-13)
+- SVG를 의미 전달에 직접 쓸 때만 `role="img"` + `aria-label`을 쓴다
+
+## 출처
+
+- CSS: `assets/icons/icons.css` (생성물 — 직접 고치지 않는다)
+- 원본: `assets/icons/svg/` · 대장: `contracts/icon-codepoints.json`
+- 규격: `contracts/icon-contract.json` · 다시 만들기: `npm run icons:build`