디자인 소스 | CoUI
LogoCoUI

디자인 소스

coco-de/docs/design 의 어느 문서가 정본이고, 코드와 갈릴 때 어느 쪽이 이기는가

디자인 소스#

CoUI 코드가 디자인 결정을 대조하는 문서는 이 레포 안에 없다 — coco-de/docs 라는 별도 레포의 design/ 아래에 산다. 이 페이지는 그 문서들 중 무엇이 정본인지, 버전/커밋이 무엇에 고정돼 있는지, 문서끼리 갈릴 때 어느 쪽이 이기는지를 기록한다. 값 자체의 단일 출처는 여전히 coui_core 다 — 이 페이지는 coui_core 와 문서가 갈릴 때 어느 문서를 근거로 삼을지 정할 뿐, coui_core 를 대체하지 않는다.

정본 문서는 고정(frozen)이 아니라 **언제든 갱신될 수 있다**. 아래 커밋 고정은 "이 판정이 어느 스냅샷을 근거로 했는지" 를 추적 가능하게 할 뿐이다. `coco-de/docs` 가 실질적으로 갱신되면 이 페이지도 재고정한다 (아래 갱신 이력 참조).

SSOT 정의#

coui_core값의 SSOT 다. coco-de/docs 의 문서들은 결정 기록 (decision record) 이며 값의 출처가 아니다. 둘이 갈릴 때:

  • 코드에 근거 주석/테스트가 있으면 → 문서를 갱신한다.
  • 코드에 근거가 없으면 → 코드를 문서에 맞춘다.
  • 문서끼리 갈리면 → 어느 쪽도 채택하지 않고 결정을 다시 받는다(아래 우선순위 규칙으로 먼저 판정을 시도하고, 그래도 안 갈리면 별도 결정 이슈로 보낸다).

왜 이 정의가 필요한가: "코드가 문서를 어긴다" 를 결함이라 부르려면 그 문서가 정본이어야 한다. 그런데 대조에 쓰인 문서는 레포 안에 존재하지 않고 (find . -name '*Specification*.md' → 0), 버전 고정도 승인 상태도 커밋 연결도 없었으며, 심지어 자기들끼리 갈리는 곳이 있었다. 충돌하는 것은 SSOT 가 될 수 없다 — 이 페이지가 그 공백을 채운다.

문서 73종의 두 종류#

coco-de/docs/design 아래 마크다운 73개는 파일명 자체가 이미 두 갈래로 나뉜다:

종류개수판별역할
명세 (Specification) 34 파일명이 *_Specification.md 로 끝나거나(33) 컴포넌트/토큰 값을 규정하는 색상 문서( CoUI_color_system_v1.md , 1) 값 정의 — 33/34 가 버전·날짜 헤더를 가진다(예외 1건: CoUI_color_system_v1.md , 헤더 대신 파일명의 v1 이 버전을 대신함). 코드가 참조해야 할 후보는 이 34개뿐
결정 기록 (Rationale) 36 파일명이 *Decision_Rationale.md / *_Rationale.md 로 끝난다 왜 그렇게 정했는가 — 서술형 산문. 버전·날짜 헤더가 구조적으로 없다 (예외 3건, 아래 참조 — 그 예외가 바로 아래 충돌 사례들이다). D-9 정의상 값의 출처가 아니다
안내 (README) 3 README.md 그 폴더의 색인일 뿐. 정본 판정 대상 아님

33+1+36+3 = 73. 다수(36/73, 49%)가 결정 기록이라는 사실 자체가, 73종 전부를 "정본화" 하면 안 되는 이유다 — 결정 기록은 명세가 아니고, 못박으면 앞으로 결정을 바꿀 때마다 문서 개정 절차가 걸린다. 명세 34개만 "코드가 참조해야 할 것" 의 후보이고, 그중에서도 아래 우선순위 규칙을 통과한 것만 실제로 근거로 쓰인다.

버전/날짜 헤더 유무가 그 자체로 신호다. 결정 기록 36개 중 31개는 헤더가 아예 없다 — 애초에 버전 추적 대상으로 설계되지 않았다는 뜻이다. 2개는 날짜만 있고 버전은 없다(CoUI_Menu_Item_Shared_Component_Rationale.md, CoUI_Space_Token_Decision_Rationale.md). 나머지 3개만 버전·날짜를 둘 다 갖는다(CoUI_Badge_Tag_Chip_Taxonomy_Decision_Rationale.md v1.0, CoUI_Tag_Chip_Taxonomy_Decision_Rationale.md v2.1, CoUI_Badge_Dot_Size_Token_Decision_Rationale.md v1.0) — 버전을 붙일 이유가 있었던 문서라는 뜻이고, 실제로 앞의 둘이 아래 "충돌 1" 의 당사자다.

우선순위 규칙#

명세와 명세가, 또는 명세와 코드가 갈릴 때 다음 순서로 판정한다. 규칙은 이미 승인된 결정(D1, A-4′)을 일반화한 것이지 새로 발명한 것이 아니다.

  1. 문서 종류 — 결정 기록의 서술 중 숫자가 우연히 언급돼도 그건 값 출처가 아니다. 명세만 값을 규정한다.
  2. 프리미티브가 컴포넌트를 지배한다 — 컴포넌트 명세가 프리미티브 토큰(색상/spacing/radius/stroke-width/duration 등)을 참조하면서 그 프리미티브의 정의된 스케일 밖 값을 쓰면, 프리미티브 명세가 이긴다. 컴포넌트 문서는 프리미티브의 스케일을 확장할 권한이 없다.
  3. 버전 동률 타이브레이커 — 같은 축의 두 명세(또는 결정 기록)가 갈리는데 날짜가 같으면, 버전이 높은 쪽이 이긴다. 날짜도 버전도 같으면 타이브레이커가 없다 — 별도 결정 이슈로 보낸다.
  4. 코드 우선(D-9) — 위 1~3 을 통과해 문서 쪽 승자가 정해졌는데도 코드가 그 승자와 다르면, 코드에 근거(CI 가드·핀 테스트·근거 주석)가 있는 한 문서를 갱신한다. 근거가 없으면 코드를 문서에 맞춘다.

확인된 충돌 3건과 판정#

1. Taxonomy — v1.0 ↔ v2.1 (Badge/Tag/Chip 분류)#

문서 A design/component/CoUI_Badge_Tag_Chip_Taxonomy_Decision_Rationale.md — v1.0, 2026-04-10. Badge/Tag/Chip 3분류
문서 B design/component/CoUI_Tag_Chip_Taxonomy_Decision_Rationale.md — v2.1, 2026-04-10. "Chip" 명칭 자체를 기각하고 Tag 계열 (Tag/DismissibleTag/SelectableTag/EditableTag)로 재편
규칙 적용3(버전 동률 타이브레이커) — 같은 날짜, 버전 높은 쪽 승
판정문서 B(v2.1)가 정본

이건 새 결정이 아니라 D1(#3768)과 동일한 판정을 기록하는 것이다 — D1 은 이미 이 규칙으로 v2.1 을 채택하고, 실제 컴포넌트 리네임(Chip → Tag 계열 재편)은 범위가 커서 별도 Epic(#3768)으로 보냈다. 이 페이지는 그 판정의 근거를 문서 신원으로 기록할 뿐, 리네임 자체를 수행하지 않는다.

2. Size↔Icon — "Space Primitive 참조" ↔ "Font-size 참조"#

문서 A design/design-tokens/space/CoUI_Size_Token_Decision_Rationale.md §2 — "Size 관련 Component 토큰이 Space Primitive 를 참조한다"
문서 B design/design-tokens/component/icon/CoUI_Icon_Size_Token_Specification.md §1.2 — "참조: Primitive > Font-size 토큰" , 14단계(10–52)
코드 CoreIconSizeCoreSize 참조, 9단계(10–32), defaultSize = size24
규칙 적용 4(코드 우선) — "문서를 따른다" 자체가 어느 문서인지 미정의 였다(둘이 서로 다른 사다리를 주장). 코드에는 실사용 census 근거( icon_size.dart — 22단계를 뺀 이유까지 명시)가 있다
판정 코드(CoreIconSize)가 정본 — 이미 A-4′=B 로 승인된 결정

두 문서 모두 superseded 로 기록했었다. 2026-08-05 갱신 — coco-de/coui#3817 로 실제 갱신 완료: Icon Spec §1.2/§2.1/§3.4 와 Size Rationale §2 가 census 근거(16=42곳, 20=19곳, 12=9곳, 14=8곳)와 정확한 참조축(CoreSize, CoreSpace 아님)을 반영해 coco-de/docs 쪽에서 갱신됐다(고정 커밋은 아래 "커밋 고정" 참조). 이제 두 문서와 코드가 일치한다 — 더 이상 "갱신 대상" 상태가 아니다.

3. 프리미티브 ↔ 컴포넌트 — stroke-width 1.5px#

프리미티브 명세 design/design-tokens/stroke-width/CoUI_Stroke_Width_Token_Specification.md — 7개 토큰(stroke-0/1/2/3/4/6/8)만 정의, §7.1에서 "토큰 외 값을 사용하지 않는다. 1.5px, 5px 같은 값이 필요하면 가장 가까운 토큰을 선택하거나 토큰 확장을 요청한다"1.5px 를 명시적으로 비토큰 값 예시로 듦
컴포넌트 명세 design/design-tokens/component/checkbox/CoUI_Checkbox_Size_Token_Specification.md , .../radio/CoUI_Radio_Size_Token_Specification.md — 둘 다 "xs~sm: stroke-1.5" 권장. 존재하지 않는 토큰을 참조
코드 CoreStrokeWidthstroke1_5 없음(0/1/2/3/4/6/8 만). checkbox_style.dart / radio_group_style.dart 는 이미 stroke1 / stroke2 만 씀
규칙 적용2(프리미티브가 컴포넌트를 지배) — 컴포넌트 문서가 프리미티브 스케일 밖 값을 처방했다
판정 프리미티브 명세가 정본 — checkbox/radio 명세의 stroke-1.5 권장은 오류로 기록. 코드는 이미 정합 상태라 변경 불필요

이 판정이 Epic K(#3767)의 stroke-width 축(checkbox·radio·spinner border)을 직접 푼다 — 코드를 프리미티브에 맞추는 별도 작업이 필요 없다는 뜻이다.

커밋 고정#

레포coco-de/docs
고정 커밋2def5ab32e0b915df5add69c92091e7e5683889a
커밋 날짜2026-08-05
고정 근거 #3720 Epic G(#3727) — 아래 3건 판정은 여전히 유효하지만, 그중 Size↔Icon 은 이 커밋 시점부로 실제 문서 갱신까지 완료 됐다 (색 체계·모션/형태 갱신도 같은 시점에 포함)

갱신 이력#

날짜커밋변경
2026-08-05 2def5ab3 Epic G(#3727) 실행 — 색 체계 문서(#3814) · 모션/형태 토큰 문서(#3815) · Icon Spec + Size Rationale §2 실제 갱신(#3817, 위 판정 2 실행) · D2/D3/D4 문서끼리 충돌 3건 결정(#3816)
2026-08-04 05fc63f6 최초 고정 — 73종 카탈로그 분류, 우선순위 규칙 수립, 충돌 3건(Taxonomy·Size↔Icon·프리미티브↔컴포넌트) 판정

coco-de/docs 가 실질적으로 갱신되면(특히 위 3건 관련 문서) 이 표에 새 행을 추가하고 고정 커밋을 옮긴다. 코드 변경 없이 이 파일 한 곳만 고치면 된다 — 정본 문서가 바뀌어도 대조 로직 자체는 그대로다.

전체 카탈로그 (73종)#

명세(명세)만 "코드가 참조해야 할 것" 후보다. 결정 기록은 참고용으로 함께 싣되, 값 출처로 쓰지 않는다. 경로는 coco-de/docs 기준 상대경로다.

색상

문서종류버전날짜
design/color/CoUI_color_system_v1.md 명세
design/color/README.md안내

타이포그래피

문서종류버전날짜
design/typography/CoUI_Typography_Token_Specification.md 명세 v1.2 2026-08-05 (font-family-mono 갱신)
design/typography/README.md안내

컴포넌트 분류 (Taxonomy)

문서종류버전날짜
design/component/CoUI_Badge_Tag_Chip_Taxonomy_Decision_Rationale.md 결정기록 1.0 2026-04-10
design/component/CoUI_Tag_Chip_Taxonomy_Decision_Rationale.md 결정기록 2.1 2026-04-10
design/component/README.md안내

디자인 토큰 — 프리미티브

문서종류버전날짜
design/design-tokens/border-radius/CoUI_Border_Radius_Token_Decision_Rationale.md 결정기록
design/design-tokens/border-radius/CoUI_Border_Radius_Token_Specification.md 명세 v1.0 2026-04-02
design/design-tokens/breakpoint/CoUI_Breakpoint_Token_Decision_Rationale.md 결정기록
design/design-tokens/breakpoint/CoUI_Breakpoint_Token_Specification.md 명세 1.0 2026-04-03
design/design-tokens/duration/CoUI_Duration_Token_Decision_Rationale.md 결정기록
design/design-tokens/duration/CoUI_Duration_Token_Specification.md 명세 1.1 2026-08-05 (reduced-motion tier 갱신)
design/design-tokens/easing/CoUI_Easing_Token_Decision_Rationale.md 결정기록
design/design-tokens/easing/CoUI_Easing_Token_Specification.md 명세 1.0 2026-04-06
design/design-tokens/opacity/CoUI_Opacity_Token_Decision_Rationale.md 결정기록
design/design-tokens/opacity/CoUI_Opacity_Token_Specification.md 명세 1.0 2026-04-03
design/design-tokens/shadow/CoUI_Shadow_Token_Decision_Rationale.md 결정기록
design/design-tokens/shadow/CoUI_Shadow_Token_Specification.md 명세 1.1 2026-08-05 (blur σ 역변환 §2.3 신설)
design/design-tokens/space/CoUI_Size_Token_Decision_Rationale.md 결정기록
design/design-tokens/space/CoUI_Space_Token_Decision_Rationale.md 결정기록 2026-03-27
design/design-tokens/space/CoUI_Space_Token_Specification.md 명세 v1.0 2026-03-27
design/design-tokens/stroke-width/CoUI_Stroke_Width_Token_Decision_Rationale.md 결정기록
design/design-tokens/stroke-width/CoUI_Stroke_Width_Token_Specification.md 명세 1.0 2026-04-03
design/design-tokens/z-index/CoUI_ZIndex_Token_Decision_Rationale.md 결정기록
design/design-tokens/z-index/CoUI_ZIndex_Token_Specification.md 명세 1.0 2026-04-06

디자인 토큰 — 컴포넌트 치수

문서종류버전날짜
design/design-tokens/component/appbar/CoUI_AppBar_Height_Token_Decision_Rationale.md 결정기록
design/design-tokens/component/appbar/CoUI_AppBar_Height_Token_Specification.md 명세 1.0 2026-04-08
design/design-tokens/component/avatar/CoUI_Avatar_Size_Token_Decision_Rationale.md 결정기록
design/design-tokens/component/avatar/CoUI_Avatar_Size_Token_Specification.md 명세 1.0 2026-04-08
design/design-tokens/component/badge/CoUI_Badge_Count_Height_Token_Decision_Rationale.md 결정기록
design/design-tokens/component/badge/CoUI_Badge_Count_Height_Token_Specification.md 명세 1.0 2026-04-10
design/design-tokens/component/badge/CoUI_Badge_Dot_Size_Token_Decision_Rationale.md 결정기록 1.0 2026-04-10
design/design-tokens/component/badge/CoUI_Badge_Dot_Size_Token_Specification.md 명세 1.0 2026-04-10
design/design-tokens/component/bottom-nav-bar/CoUI_Bottom_Nav_Bar_Height_Token_Decision_Rationale.md 결정기록
design/design-tokens/component/bottom-nav-bar/CoUI_Bottom_Nav_Bar_Height_Token_Specification.md 명세 1.0 2026-04-09
design/design-tokens/component/button/CoUI_Button_Height_Token_Decision_Rationale.md 결정기록
design/design-tokens/component/button/CoUI_Button_Height_Token_Specification.md 명세 1.0 2026-04-06
design/design-tokens/component/checkbox/CoUI_Checkbox_Size_Token_Decision_Rationale.md 결정기록
design/design-tokens/component/checkbox/CoUI_Checkbox_Size_Token_Specification.md 명세 1.0 2026-04-08
design/design-tokens/component/content-padding/CoUI_Content_Padding_Token_Decision_Rationale.md 결정기록
design/design-tokens/component/content-padding/CoUI_Content_Padding_Token_Specification.md 명세 (SUPERSEDED) 1.1 2026-08-05 — CoreContentPadding deprecated, see docs/density-axis.md
design/design-tokens/component/divider/CoUI_Divider_Thickness_Token_Decision_Rationale.md 결정기록
design/design-tokens/component/divider/CoUI_Divider_Thickness_Token_Specification.md 명세 1.1 2026-08-05 (Separator 통합 §1.3 신설)
design/design-tokens/component/dropdown/CoUI_Dropdown_Height_Token_Decision_Rationale.md 결정기록
design/design-tokens/component/dropdown/CoUI_Dropdown_Height_Token_Specification.md 명세 1.0 2026-04-07
design/design-tokens/component/icon/CoUI_Icon_Size_Token_Decision_Rationale.md 결정기록
design/design-tokens/component/icon/CoUI_Icon_Size_Token_Specification.md 명세 1.1 2026-08-05 (참조축 정정, 9단계로 축소)
design/design-tokens/component/input/CoUI_Input_Height_Token_Decision_Rationale.md 결정기록
design/design-tokens/component/input/CoUI_Input_Height_Token_Specification.md 명세 1.0 2026-04-07
design/design-tokens/component/menu-item/CoUI_Menu_Item_Height_Token_Decision_Rationale.md 결정기록
design/design-tokens/component/menu-item/CoUI_Menu_Item_Height_Token_Specification.md 명세 1.0 2026-04-13
design/design-tokens/component/menu-item/CoUI_Menu_Item_Shared_Component_Rationale.md 결정기록 2026-04-13
design/design-tokens/component/progress-bar/CoUI_Progress_Bar_Height_Token_Decision_Rationale.md 결정기록
design/design-tokens/component/progress-bar/CoUI_Progress_Bar_Height_Token_Specification.md 명세 1.0 2026-04-09
design/design-tokens/component/radio/CoUI_Radio_Size_Token_Decision_Rationale.md 결정기록
design/design-tokens/component/radio/CoUI_Radio_Size_Token_Specification.md 명세 1.0 2026-04-08
design/design-tokens/component/slider/CoUI_Slider_Thumb_Size_Token_Decision_Rationale.md 결정기록
design/design-tokens/component/slider/CoUI_Slider_Thumb_Size_Token_Specification.md 명세 1.0 2026-04-11
design/design-tokens/component/slider/CoUI_Slider_Track_Height_Token_Decision_Rationale.md 결정기록
design/design-tokens/component/slider/CoUI_Slider_Track_Height_Token_Specification.md 명세 1.0 2026-04-11
design/design-tokens/component/spinner/CoUI_Spinner_Size_Token_Decision_Rationale.md 결정기록
design/design-tokens/component/spinner/CoUI_Spinner_Size_Token_Specification.md 명세 1.0 2026-04-13
design/design-tokens/component/swatch/CoUI_Swatch_Size_Token_Decision_Rationale.md 결정기록
design/design-tokens/component/swatch/CoUI_Swatch_Size_Token_Specification.md 명세 1.0 2026-04-14
design/design-tokens/component/switch/CoUI_Switch_Height_Token_Decision_Rationale.md 결정기록
design/design-tokens/component/switch/CoUI_Switch_Height_Token_Specification.md 명세 1.0 2026-04-08
design/design-tokens/component/tab/CoUI_Tab_Height_Token_Decision_Rationale.md 결정기록
design/design-tokens/component/tab/CoUI_Tab_Height_Token_Specification.md 명세 1.0 2026-04-09
design/design-tokens/component/table/CoUI_Table_Row_Height_Token_Decision_Rationale.md 결정기록
design/design-tokens/component/table/CoUI_Table_Row_Height_Token_Specification.md 명세 1.0 2026-04-14
design/design-tokens/component/tag/CoUI_Tag_Height_Token_Decision_Rationale.md 결정기록
design/design-tokens/component/tag/CoUI_Tag_Height_Token_Specification.md 명세 1.0 2026-04-10

이 페이지가 하는 것과 안 하는 것#

한다: 어느 문서가 정본인지 판정하고, 그 판정의 근거(우선순위 규칙)를 기록하고, 판정 시점의 문서 스냅샷을 커밋으로 고정한다.

안 한다: 충돌 3건의 내용(컴포넌트를 실제로 어떻게 리네임할지, 아이콘 사다리를 실제로 어떻게 이식할지)을 결정하지 않는다 — Taxonomy 재편은 별도 Epic, Icon/Size 문서 갱신은 coco-de/docs 쪽 작업이다. 또한 이 페이지가 확립한 규칙 밖에 있는 새로운 문서-대-문서 충돌(예: duration/easing alias tier, CoreContentPadding 존폐, stroke-6 정의 여부처럼 우선순위 규칙을 적용해도 안 갈리는 진짜 판단이 필요한 사례)은 여전히 별도 결정 이슈로 간다 — 그런 사례는 산문(rationale) 두 개가 같은 무게로 반대 방향을 가리킬 때 생기며, 이 페이지의 규칙 1~4로는 기계적으로 안 풀린다.