@qualisoft/ai-skills 1.0.0

package/skills/project-design/SKILL.md

@@ -0,0 +1,365 @@
+---
+name: project-design
+description: 2단계(project-init)로 만든 설계도를 바탕으로 디자인 규칙을 세우고 시안을 만든다. 웹·모바일 앱·어드민·발표자료(PPT)·대시보드·인쇄물 등 산출 매체를 골라 그에 맞는 시안을 만든다. 근거는 벤치마킹 URL 분석 · 참조 이미지 분석 · 텍스트 설명 중 사용자가 고른다. 규칙과 시안, 스타일 수정 이력이 Docs/_design/ 에 쌓이고 2단계 HTML에서 함께 보인다. "디자인 시안", "디자인 만들어줘", "이런 스타일로", "레퍼런스 참고해서", "PPT 만들어줘", "앱 화면 디자인", "시안 뽑아줘" 같은 요청에 해당한다.
+---
+
+# project-design
+
+**3단계 — 디자인.** 설계도의 디자인 항목을 실제 규칙과 화면 시안으로 바꾼다.
+
+```
+[1] project-interview   아이디어 → 기획안
+[2] project-init        기획안   → 설계도
+[3] project-design      설계도   → 디자인 규칙 + 시안     ← 이 스킬
+[4] (미구성)            설계도   → 코드
+```
+
+## 선행 조건
+
+`Docs/` 에 2단계 산출물이 있어야 한다. 없으면 먼저 `/project-init` 을 안내한다.
+
+착수 전에 반드시 읽는다:
+
+| 문서 | 무엇을 가져오나 |
+| --- | --- |
+| 디자인 시스템 (`*-design-system`) | 토큰 값, 컴포넌트 목록, **안티패턴** |
+| 화면 정의서 (`*-screen-spec`) | 어떤 화면을 그려야 하는가, 각 화면의 요소와 상태 |
+| 인터랙션 · 모션 (`*-interaction-motion`) | 상태 8종, 모션 허용/금지 |
+| 브랜드 · 메시지 (`*-brand-messaging`) | 퍼스낼리티, **피해야 할 인상** |
+| 리스크 대장 | 디자인을 막는 Blocker (로고 없음, 토큰 미승인 등) |
+
+**Blocker가 열려 있으면 먼저 알린다.** 로고나 브랜드 표기가 미정인 채로 시안을 만들면
+그 시안은 다시 만들게 된다.
+
+### 착수 전 확인 — 법적·필수 표기
+
+웹이고 국내 사업자면 푸터에 들어갈 항목을 **시작할 때** 받는다. 푸터를 그리는 시점에
+없다는 걸 알면 레이아웃을 다시 짠다.
+
+| 항목 | 비고 |
+| --- | --- |
+| 상호 · 대표자명 | |
+| **사업자등록번호** | 표기 의무. 빠뜨리기 가장 쉽다 |
+| 주소 | |
+| 연락처 (메일 · 전화) | |
+| 통신판매업 신고번호 | 온라인 판매가 있으면 |
+| 개인정보처리방침 · 이용약관 링크 | 폼이 있으면 사실상 필수 |
+
+없는 항목은 지어내지 않는다. `TODO(주체)` 로 자리만 잡고 **리스크 대장에 올린다.**
+
+## 산출물
+
+```
+Docs/_design/
+├── images/            참조 이미지 — 사용자가 넣는 곳
+├── design-rules.md    도출된 디자인 규칙 (id: design-rules)
+├── change-log.md      스타일 수정 이력 (id: design-change-log, DS-001 형식)
+├── tokens.css         **토큰 단일 출처** — 모든 시안이 이 파일을 링크한다
+├── tone-options.html  **톤 관문** — 시안보다 먼저. 색만 다른 후보를 고르게 한다
+├── styleguide.html    **살아있는 스타일 가이드** — tokens.css 를 전부 읽어 렌더
+├── audit.html         **시안 검수** — 대비·터치 타깃·이탈·죽은 CSS 자동 판정
+└── mockups/           시안 HTML — 2단계 사이트에서 링크로 열린다
+    └── .history/      빌드가 자동으로 남기는 이전 판. 손대지 않는다
+```
+
+**토큰은 `tokens.css` 한 곳에만 둔다.** 시안마다 값을 복사하면 반드시 어긋난다.
+값을 고치면 시안 전체가 함께 바뀌고, 그게 수정 이력을 추적 가능하게 만든다.
+
+2단계 `build` 를 다시 돌리면 사이드바에 **`3단계 · 디자인`** 그룹이 생기고,
+홈에 시안 목록 패널이 붙는다.
+
+## 진행
+
+### 0. 산출 매체를 정한다
+
+**무엇으로 나가는가**에 따라 만드는 법이 다르다. 웹과 발표자료는 글자 크기 기준부터 다르다.
+
+`Docs/docs.config.json` 의 `preset` 으로 기본값을 추정하되 **확인은 받는다.**
+`web-corporate` → 웹, `mobile-app` → 모바일 앱, `internal-system` → 어드민.
+
+| 매체 | 시안 템플릿 |
+| --- | --- |
+| 웹 (반응형) | `mockup-web.html` |
+| 모바일 앱 | `mockup-app.html` — 디바이스 프레임, 세이프 에어리어 |
+| 데스크톱 앱 · 어드민 | `mockup-web.html` (밀도 높임) |
+| 발표자료 (PPT · 키노트) | `mockup-slides.html` — 16:9, 1920 기준 |
+| 대시보드 · 데이터 리포트 | `mockup-web.html` + **`dataviz` 스킬 로드** |
+| 다이어그램 · 구조도 | **`artifact-diagramming` 스킬 로드** |
+| 외부 공유용 문서 | **`artifact-design` 스킬 로드** 후 Artifact 퍼블리시 |
+| 인쇄물 (명함 · 브로슈어) | `mockup-web.html` 을 mm 기준으로 |
+
+매체별 기준·검수 항목은 **`MEDIUMS.md`** 에 있다. 시안을 만들기 전에 해당 절을 읽는다.
+
+> **차트가 하나라도 들어가면 `dataviz` 스킬을 먼저 로드한다.**
+> 차트 코드를 한 줄 쓰기 전에 로드하는 것이 그 스킬의 사용 조건이다.
+> 색 팔레트·축·범례 규칙을 임의로 정하지 않는다.
+
+여러 매체가 동시에 필요하면 **시안은 매체마다, 토큰은 하나로** 간다.
+토큰이 갈라지면 브랜드가 갈라진다.
+
+### 0.5 입력 방식을 고르게 한다
+
+`AskUserQuestion` 으로 **먼저** 묻는다. 임의로 고르지 않는다.
+
+| 방식 | 언제 |
+| --- | --- |
+| **A. 벤치마킹 URL** | 참고할 실제 사이트가 있을 때 |
+| **B. 참조 이미지** | 시안·스크린샷·무드보드 이미지가 있을 때 |
+| **C. 텍스트 설명** | 말로만 있을 때. 되물어 구체화한다 |
+| **D. Figma 파일** | 디자이너가 만든 파일이 있을 때. **값을 추정하지 않고 그대로 받는다** |
+
+여러 개를 섞어도 된다 (URL + 이미지 등). 그때는 각각 분석하고 **충돌하는 지점을 밝힌다.**
+
+---
+
+### A. 벤치마킹 URL
+
+1. URL을 받는다. 여러 개면 각각 무엇을 참고하고 싶은지도 묻는다
+   (레이아웃인지 색인지 타이포인지 — "다 좋아요"는 정보가 아니다).
+2. 분석 순서 — **가능한 수단을 위에서부터 시도한다.**
+
+   | 수단 | 얻는 것 |
+   | --- | --- |
+   | 브라우저로 열어 스크린샷 | 실제 렌더 결과. 가장 정확 |
+   | 페이지 HTML/CSS 가져오기 | 색상·폰트 선언, 간격 토큰 |
+   | 텍스트만 가져오기 | 정보 구조, 카피 톤 |
+
+3. **추출한 것과 추측한 것을 구분해 적는다.**
+   실제로 확인한 값은 그대로, 화면을 보지 못하고 유추한 것은 `추정`으로 표시한다.
+   색을 못 봤으면 색을 지어내지 않는다.
+4. 벤치마킹은 **복제가 아니다.** 가져올 것과 가져오지 않을 것을 나눠 적는다.
+   저작권이 있는 로고·일러스트·사진은 가져오지 않는다.
+
+---
+
+### B. 참조 이미지
+
+1. `Docs/_design/images/` 를 **먼저 만든다** (없으면 생성).
+2. 사용자에게 안내하고 **거기서 멈춘다.**
+
+   ```
+   Docs/_design/images/ 를 만들었습니다.
+   참고할 이미지를 넣고 다시 불러주세요. 여러 장도 됩니다.
+   ```
+
+3. 다시 호출되면 폴더의 이미지를 **전부 읽는다.** 한 장만 보고 판단하지 않는다.
+4. 이미지마다 다음을 뽑는다.
+
+   | 항목 | 보는 것 |
+   | --- | --- |
+   | 색 | 배경·본문·강조색. 강조색이 어디에 얼마나 쓰였는지 |
+   | 타이포 | 크기 대비, 굵기 대비, 자간, 행간 |
+   | 여백 | 섹션 간격, 요소 간격, 화면 가장자리 여백 |
+   | 레이아웃 | 열 수, 정렬, 비대칭 여부, 반복 리듬 |
+   | 형태 | 모서리 반경, 그림자, 보더 유무 |
+   | 인상 | 무엇이 그 인상을 만드는가 |
+
+5. **이미지에서 읽어낸 것과 해석을 구분한다.** 픽셀 값을 정확히 잰 게 아니라면
+   "약", "추정"을 붙인다.
+6. 여러 장이 서로 다른 방향이면 **묻는다.** 평균을 내지 않는다.
+
+---
+
+### D. Figma 파일
+
+A·B는 값을 **추정**할 수밖에 없다. Figma는 **정확한 값**을 준다. 쓸 수 있으면 이걸 쓴다.
+
+**먼저 도구가 있는지 확인한다.**
+
+| 상황 | 대응 |
+| --- | --- |
+| `figma` 스킬/MCP 가 있음 | 그걸 써서 토큰·컴포넌트를 읽는다 |
+| 없음 | 사용자에게 알린다 — `/plugin` 으로 `figma` 설치, 또는 **B(이미지)로 대체** |
+
+**도구가 없는데 있는 척하지 않는다.** Figma 파일 URL만 받아서 내용을 지어내면
+그건 추정보다 나쁘다. 근거가 있는 것처럼 보이기 때문이다.
+
+읽을 수 있게 되면 순서는 이렇다.
+
+1. **변수·스타일부터** — 색·타이포·간격이 이름과 값으로 정의되어 있다.
+   이게 `tokens.css` 의 원본이 된다. 화면에서 색을 눈으로 뽑지 않는다.
+2. **컴포넌트** — 이름, 변형(variant), 상태. 2단계 컴포넌트 인벤토리와 대조한다.
+3. **화면** — 어떤 프레임이 어떤 화면 정의서 항목에 해당하는지 매핑한다.
+4. Figma에 **없는 것**을 기록한다. 대개 오류·빈 상태·로딩이 빠져 있다.
+   그건 `design-rules.md` 미결정으로 올린다.
+
+**주의** — Figma의 값이 2단계 디자인 시스템과 다르면 그대로 덮어쓰지 않는다.
+공통 규칙(6항)대로 차이를 표로 드러내고 어느 쪽을 따를지 묻는다.
+디자이너가 만든 값이라고 항상 옳은 것은 아니다 — 명도비 미달이 흔하다.
+`styleguide.html` 이 자동으로 판정해 준다.
+
+---
+
+### C. 텍스트 설명
+
+사용자의 설명은 대개 부족하다. `QUESTIONS.md` 를 참고해 **되물어 구체화한다.**
+
+- 한 번에 최대 4문항, 선택형, 모든 문항에 "아직 모름".
+- 형용사만 나온 답은 되묻는다 — "깔끔하게" → 여백이 넓다는 뜻인지, 색을 줄인다는 뜻인지,
+  요소를 줄인다는 뜻인지.
+- **싫은 것을 반드시 묻는다.** 좋아하는 것보다 방향을 빨리 좁힌다.
+- 답이 안 나오면 대신 정하지 않는다. `design-rules.md` 의 미결정에 남긴다.
+
+---
+
+### 0.7 톤 관문 — 시안보다 먼저 (건너뛰지 않는다)
+
+`templates/tone-options.html` 을 `Docs/_design/tone-options.html` 로 복사하고
+**색만 다른 후보 2~4개**를 만들어 고르게 한다. 구조·카피·여백은 전부 같게 둔다.
+
+**왜 이 단계가 있는가.** 완성 시안을 만든 뒤에 "배경이 좀…" 을 들으면 전부 다시 만든다.
+실제로 Hero 배경 하나 때문에 다섯 판을 갈아엎은 적이 있다 —
+흰색으로 갔다가 회색으로 되돌리고 검정으로 갔다. **헛걸음이 두 번**이었다.
+고를 것이 색 하나뿐이면 사용자가 5초 만에 답한다.
+
+- **화면 단위로 묻는다.** "사이트 전체 밝기"만 물으면 Hero 처럼 지배적인 면을 놓친다.
+  Hero 가 나머지와 다른 톤을 갖는 경우가 흔하다 — "Hero 는 C, 나머지는 A" 같은 답을 받는다.
+- 한 번에 **하나만** 묻는다. 서체·간격·컴포넌트는 여기서 묻지 않는다.
+- 고르지 못하면 그것도 정보다. "무엇이 걸리는지"를 물어 후보를 좁힌다.
+- 고른 값을 `tokens.css` 로 옮기고 `change-log.md` 에 DS 항목으로 남긴다.
+
+### 공통 — 규칙 작성과 시안 생성
+
+1. `templates/design-rules.md` 형식으로 `Docs/_design/design-rules.md` 를 쓴다.
+   - **2단계 디자인 시스템 문서의 토큰과 충돌하면 그대로 덮어쓰지 않는다.**
+     차이를 표로 드러내고 어느 쪽을 따를지 사용자에게 묻는다.
+     결정되면 2단계 문서도 함께 고치고 그쪽 변경 이력에 남긴다.
+   - 2단계의 **안티패턴 목록을 규칙에 그대로 옮긴다.** 시안이 그걸 어기면 안 된다.
+2. 화면 정의서에서 시안을 만들 화면을 고른다. 처음에는 **1~3개**만.
+   전부 만들고 나서 방향이 틀리면 전부 버리게 된다.
+3. `templates/tokens.css` 를 `Docs/_design/tokens.css` 로 복사하고 규칙의 값으로 채운다.
+   이어서 `templates/styleguide.html` 을 `Docs/_design/styleguide.html` 로 복사한다.
+   **시안보다 스타일 가이드를 먼저 만든다.** 토큰이 실제로 어떻게 보이는지 확인하지 않고
+   화면부터 그리면, 색이 안 맞는다는 걸 시안 여러 장 만든 뒤에 알게 된다.
+4. 매체에 맞는 템플릿으로 `Docs/_design/mockups/<화면>.html` 을 만든다.
+   - **토큰은 `../tokens.css` 를 링크**한다. 시안 안에 값을 복사하지 않는다
+   - 그 시안에만 필요한 스타일만 `<style>` 에 둔다
+   - 폰트·이미지를 외부에서 불러오지 않는다
+   - 실제 카피를 쓴다. `Lorem ipsum` 을 쓰지 않는다.
+     화면 정의서에 확정 카피가 있으면 그대로 가져온다
+   - 없는 실적·고객사·수치를 만들지 않는다 (2단계 콘텐츠 무결성 규칙과 동일)
+5. **`audit.html` 로 검수한다.** `templates/audit.html` 을 `Docs/_design/audit.html` 로
+   복사하고 브라우저에서 열어 시안 경로를 넣고 돌린다. 손으로 감사 스크립트를 짜지 않는다.
+
+   | 판정 | 뜻 |
+   | --- | --- |
+   | **필수** | 가로 스크롤 · 뷰포트 이탈 · 확정 명도비 · 터치 24px · 글자 12px · 포커스 링 · **스크롤 상태 전환** |
+   | **권고** | 배경 의존 명도비 · 터치 44px · 죽은 CSS |
+
+   - **필수는 0건이어야 한다.** 못 고치면 `design-rules.md` **6항 기준 예외**에
+     범위·이유·보상 조치·하한을 적는다. 적지 않은 위반은 버그다.
+   - "명도비 — 배경 의존" 은 고정·반투명 요소라 도구가 뒤 배경을 모른다는 뜻이다.
+     **범위의 나쁜 쪽**이 실제로 일어나는지 사람이 판단한다.
+     고정 헤더가 어두운 섹션 위를 지날 때가 대표적이다.
+   - 상태가 바뀌는 요소는 `상태` 칸에 `선택자:클래스` 를 넣어 **반대쪽 상태도 한 번 더** 돌린다.
+6. `change-log.md` 에 이번 작업을 기록한다 (아래).
+7. `node ~/.claude/skills/project-init/build.mjs build` 를 돌려 2단계 사이트에 반영한다.
+8. 보고한다 — 무엇을 근거로 어떤 규칙을 세웠는지, 어디가 추정인지, 무엇이 미결인지.
+
+## 글로 적지 말고 보여준다
+
+디자인 규칙을 표와 문장으로만 남기면 **아무도 그게 무슨 색인지 모른다.**
+`#12447E` 가 어떤 파랑인지, `clamp(2.5rem, ...)` 이 실제로 몇 px인지는 렌더해 봐야 안다.
+
+`styleguide.html` 이 그 역할을 한다. 값을 페이지에 적어 넣지 않고
+**`tokens.css` 를 읽어 실제로 렌더**하므로 문서와 어긋날 수 없다.
+
+| 보여주는 것 | 방식 |
+| --- | --- |
+| 색 | 견본 + HEX + **배경·본문색 대비 명도비 자동 계산**, AA 통과 여부 배지 |
+| 타이포 | 각 토큰으로 실제 문장을 렌더하고 **현재 창에서 계산된 px** 표시 |
+| 간격 | 막대 길이가 곧 실제 값 |
+| 형태 | radius·shadow 실물 |
+| 버튼 상태 | Default·Hover·Focus·Active·Disabled·Loading·Success·Error 8종 |
+| 안티패턴 | 해도 되는 것 / 안 되는 것 좌우 비교 |
+
+**명도비는 계산해서 보여준다.** 사람이 표에 손으로 적으면 틀리고, 색을 바꾸면 낡는다.
+AA에 미달한 색은 배지가 빨갛게 뜨므로 텍스트에 쓰면 안 된다는 게 눈에 보인다.
+
+토큰을 추가하면 `styleguide.html` 위쪽 `TOKENS` 목록에 이름만 넣는다.
+없는 토큰은 조용히 건너뛰므로 목록이 조금 어긋나도 페이지가 깨지지 않는다.
+
+2단계 문서 안의 HEX 값에는 **자동으로 색 견본이 붙는다.** 표에 `#0A2240` 이라고 적으면
+그 앞에 실제 색 칩이 렌더된다. 값을 그냥 적어두면 된다.
+
+## 수정 이력 — 매번 남긴다
+
+**스타일을 고칠 때마다** `change-log.md` 에 항목을 추가한다. 이게 이 스킬의 핵심이다.
+"왜 이 색이 됐는지"를 나중에 되짚을 수 있어야 한다.
+
+```
+## DS-001. 제목
+
+**일자**
+**입력**       URL / 이미지 / 텍스트 — 무엇을 근거로 했는가
+**변경**       무엇을 어떻게 바꿨는가 (값 → 값)
+**이유**       왜
+**영향 화면**   어느 시안이 바뀌었는가 (차수를 적는다 — "Home 7차 시안")
+**검수**       audit.html 필수 항목 결과. 확인한 폭
+**확인 못 함**  검수하지 못한 것과 그 이유. 없으면 "없음"
+```
+
+**차수는 시안 파일과 이력에 같은 문자열로 적는다.** `build.mjs check` 가
+시안의 `N차 시안` 표기를 이력에서 찾지 못하면 경고한다. 둘이 어긋난 적이 있다.
+
+**"확인 못 함"을 비워 두지 않는다.** 모션이나 스크롤 동작처럼 도구가 못 보는 것은
+반드시 있다. 적지 않으면 "다 봤다"로 읽힌다.
+
+- ID는 `DS-001` 형식. 2단계의 `D-001`·`B-01` 과 구분되고 추적 매트릭스에 함께 잡힌다.
+- 값이 바뀌면 **바뀌기 전 값도 적는다.** 되돌릴 수 있어야 한다.
+- 파일 자체는 `build.mjs build` 가 `mockups/.history/` 에 자동으로 남긴다.
+  값만 적어서는 되돌릴 수 없다 — 한 회차를 통째로 잃고 복원하지 못한 적이 있다.
+- 사용자가 "좀 더 밝게" 같은 요청을 해도 결과 값을 기록한다.
+
+## 동작과 모션은 어디까지 확인되는가
+
+정적인 값은 도구가 판정한다. **움직임은 아니다.**
+
+자동화된 브라우저 탭이 백그라운드로 렌더되면 렌더링 단계가 돌지 않는다.
+그러면 다음이 **전부 진행되지 않는다.**
+
+- `IntersectionObserver` · `requestAnimationFrame` 콜백
+- CSS `transition` · `animation` — 계산값이 시작 상태에 멈춘다
+- 스크린샷 (타임아웃)
+
+이걸 모르면 "고정 헤더가 안 바뀐다"는 **없는 버그**를 쫓게 된다. 실제로 그런 적이 있다.
+
+**그래서 이렇게 한다.**
+
+1. `document.visibilityState` 를 먼저 본다. `hidden` 이면 위의 것들을 신뢰하지 않는다.
+2. 전환을 끄고 **목표 상태**를 잰다 —
+   `*{transition:none!important;animation:none!important}` 를 주입한 뒤
+   클래스를 직접 붙였다 뗐다 하며 양쪽 상태의 계산값을 확인한다.
+   `audit.html` 의 `상태` 칸이 이걸 해 준다.
+3. **상태 기계는 관찰자를 가로채서 검증한다.** `audit.html` 의 `스크롤 상태 전환` 이
+   페이지 스크립트보다 먼저 `IntersectionObserver` 를 바꿔치기해 두고 콜백을 직접 부른다.
+   화면이 그려지지 않아도 "관찰 대상 · rootMargin · 어떤 클래스가 붙고 떨어지는지" 가 나온다.
+   **관찰자만 등록하고 아무것도 안 바뀌면 실패로 잡는다** — 끊긴 배선이다.
+4. 여기까지 해도 **남는 것 두 가지** — 전환이 *어느 스크롤 위치에서* 일어나는지의 체감과
+   모션의 속도. 이건 사람이 브라우저에서 봐야 한다. 상태 기계가 도는 것과
+   타이밍이 자연스러운 것은 다른 문제다.
+5. 확인하지 못한 항목은 `change-log.md` 에 **못 했다고 적고** 사용자에게 확인을 요청한다.
+   검수 항목을 조용히 비워 두지 않는다.
+
+> **"모션은 확인 못 함" 으로 뭉뚱그리지 않는다.** 상태 기계는 검증되고 체감만 안 된다.
+> 둘을 나눠 적어야 사용자가 무엇을 봐야 하는지 안다.
+
+## 하지 말 것
+
+- **Blocker를 무시하고 시안부터 만들기.** 로고·브랜드 표기가 미정이면 먼저 알린다.
+- 벤치마킹 사이트의 로고·사진·일러스트를 가져오기. 구조와 원리만 참고한다.
+- 보지 못한 값을 확정처럼 적기. 추정은 추정이라고 쓴다.
+- 2단계 디자인 시스템 토큰을 말없이 덮어쓰기.
+- 시안에 `Lorem ipsum` 이나 지어낸 실적 넣기.
+- 한 번에 화면 전부 만들기. 방향 확인이 먼저다.
+- `change-log.md` 갱신 없이 스타일만 고치기.
+- **시안 안에 토큰 값을 복사해 넣기.** `tokens.css` 하나만 고치면 되게 유지한다.
+- 매체를 확인하지 않고 웹 기준으로 만들기. 발표자료에 16px 본문을 쓰면 뒷자리에서 안 읽힌다.
+- 차트를 `dataviz` 스킬 없이 그리기.
+- **스타일 가이드 없이 시안부터 만들기.** 토큰이 실제로 어떻게 보이는지 먼저 확인한다.
+- 명도비를 손으로 적어 넣기. 계산해서 렌더하게 둔다 — 손으로 적으면 색을 바꿨을 때 낡는다.
+- **톤을 안 정하고 시안부터 만들기.** 0.7 관문을 건너뛰면 되돌리기가 생긴다.
+- **`audit.html` 없이 눈으로 검수하기.** 검정 배경 위 검정 글자는 눈으로 안 보인다 — 안 보이니까 결함이다.
+- 규칙 문서에 토큰 **값**을 적기. 이름과 용도만 적는다. 값은 `tokens.css` 하나.
+- 기준을 벗어나면서 **6항 기준 예외에 안 적기.** 적지 않은 위반은 버그다.
+- 검수하지 못한 것을 검수한 것처럼 보고하기. 못 한 건 못 했다고 적는다.