Color Swatch

SEED 에는 색을 고르는 부품이 없다 — 사용자가 색을 정하는 화면이 SEED 문서에 나오지 않고, "색상 선택" 은 글자 칩(Chip Group "사이즈/색상 선택")과 색 점 12 + 이름(Wheel Picker 예 — 항목마다 ariaLabel)뿐이다(당근 SEED, Apache-2.0). 그래서 칸의 칠 · 크기 · 고른 표시 · 키보드 · 새 항목의 첫 색은 groo 가 정했다(2026-10-09 사용자 결정) — 색은 v110 차트 10색, 고른 고리는 Select Box 의 짙은 테두리(v113)와 같은 색이다. 옛 Color Swatch 스펙(폭을 나눈 정사각 칸 · currentColor 테두리 · 마우스 1.05배)을 대신한다.

수치 원본은 color-swatch.yaml이다. 수치 표 자리([표: …])와 그림 자리([그림: …])는 사이트가 그 파일로 그린다 — GitHub 에서는 그 파일 · 그림 코드로 가는 링크로 보인다.

직접 골라 보기제목 링크 복사

고른 색 · 지금 색 칸(없음 · 팔레트 밖 · 색 없음) · 막힘을 고르면 스펙대로 그린 묶음과 그 코드가 바뀐다. 칸을 누르거나, 칸에 초점을 두고 ← → ↑ ↓ 로 옮겨 볼 수 있다 — 화면 읽기 프로그램이 읽는 말("빨강, 라디오, 1/10")이 함께 바뀐다.

import { useState } from "react"
import type { ChartColor } from "@/components/ui/chart"
import { ColorSwatchGroup } from "@/components/ui/color-swatch"
import { Field } from "@/components/ui/field"

const [color, setColor] = useState<ChartColor | "current">("red")

<Field label="색상">
  <ColorSwatchGroup value={color} onValueChange={setColor} />
</Field>

Anatomy제목 링크 복사

부위

Properties제목 링크 복사

색 — 차트 색 그대로 진하게제목 링크 복사

칸은 v110 차트 색(라이트 700 · 다크 800-dark)으로 꽉 채운다 — 칸이 곧 그 항목의 차트 · 아이콘 · 점에 칠해질 색이다(사용자 결정 12C). 옅게 섞은 칸 · v111 옅은 바탕 칸은 쓰지 않는다 — 옅은 칸끼리는 서로 거의 같아(지금 웹 OKLab ΔE 0.012) 남색 · 보라 · 분홍이 헷갈린다. 진한 칸끼리는 가장 가까운 짝도 또렷하고, 흰 표면과 4.55 이상 · 다크 표면과 6.07 이상이다. 웹 · 앱이 같은 v110 색을 쓴다.

색

크기 · 배치제목 링크 복사

칸은 원 40(누르는 44)이고 폭과 상관없이 5개씩 두 줄 · 사이 12 다 — 데스크톱 대화상자에서도 폰 시트에서도 같은 크기 · 같은 줄이다(사용자 결정 13B). 칸 · 사이는 글자 크기 설정을 따르지 않는 px(-static)다 — 웹도 앱과 같다. 색이 곧 값이라 글처럼 읽을 일이 없고, rem 이면 글자 200% 에서 원이 80 으로 커져 40 열 격자에서 서로 겹친다(2026-10-17 사용자 결정 — 03-B 결정 5 A. 폭 안 5열로 키우는 안은 고르지 않았다). 차례는 색상환(빨강 → 주황 → 노랑 → 초록 → 파랑 → 남색 → 보라 → 분홍 → 갈색 → 회색)이라 ↑ ↓ 가 늘 같은 칸으로 간다. 폭을 나눈 네모(지금 88.8 · 62)는 쓰지 않는다.

묶음

색 칸

고른 표시제목 링크 복사

고른 칸은 바깥 2 를 띄운 2px 짙은 고리(stroke-neutral-contrast — Select Box 의 고른 테두리와 같은 색) + 가운데 체크 16(선 2.5)이다(사용자 결정 13B). 체크는 fg-neutral-inverted 라 라이트는 흰색, 다크는 짙은 글자다 — 다크 800-dark 칸 위 흰 체크는 1.88 ~ 2.39 라 읽히지 않는다(아바타 이니셜과 같은 규칙). 칸 위 체크는 라이트 4.55 ~ 5.50 · 다크 6.07 ~ 7.70 이다. 색과 함께 고리 · 체크 모양으로도 알린다.

체크

고리

지금 색 · 자동제목 링크 복사

고치는 항목의 색이 팔레트 밖이거나(가져오기가 만드는 #9E9E9E) 색이 없으면 격자 앞에 칸 하나를 따로 둔다 — 세로 선으로 격자와 가르고, 처음에는 그 칸이 골라져 있다(사용자 결정 14B). 칸 · 선 · 격자를 합친 폭은 321 이라, 그보다 좁은 자리(360 폰 본문 312)에서는 그 칸을 격자 위 줄에 두고 가로 선으로 가른다 — 390 폰 · 대화상자는 옆으로 둔다.

• 지금 색 — 팔레트 밖의 저장된 색을 그대로 칠한다(두 모드 같은 값). 체크는 흰색 · 짙은 글자 가운데 그 색 위 대비가 큰 쪽이다.
• 자동 — 색이 없는 항목이다. 차트가 그 항목에 줄 색(아직 쓰지 않은 색 — 데이터 결정 9A)을 점선 원으로 보인다.

격자에서 색을 고르면 그 색으로 바뀌고, 지금 색 칸을 다시 고르면 저장 값을 그대로 둔다. 아무것도 고르지 않고 저장하면 색은 바뀌지 않는다 — 몰래 빨강으로 바꾸지 않는다.

지금 색 칸

지금 색 칸 아래 글

세로 선

State제목 링크 복사

상태 — 안 고름

상태 — 고름

모션

Guidelines제목 링크 복사

새 항목은 쓰지 않은 첫 색제목 링크 복사

새 카테고리 · 태그 · 라벨 · 저축 목표는 같은 목록이 아직 쓰지 않은 첫 색을 골라 두고 시작한다 — v110 배정 순서(파랑 → 초록 → 주황 → 보라 → 분홍 → 남색 → 빨강 → 노랑 → 갈색)이고 회색은 "기타" 전용이라 주지 않는다. 아홉 색을 모두 쓰고 있으면 파랑부터 다시 준다(Chart 의 배정과 같다). 늘 빨강으로 시작하지 않는다 — 기본 지출 카테고리 여덟이 이미 여덟 색을 쓰고 식비가 빨강이라, 아홉 번째가 식비와 같은 색이 된다(사용자 결정 14B — 데이터 결정 9A 를 새 항목에도). 색을 꼭 고르게 하지 않는다 — 고르지 않아도 첫 색으로 저장된다.

고르지 않으면 바꾸지 않는다제목 링크 복사

고치기 화면은 저장된 색을 고른 채 연다. 저장된 색이 팔레트 밖 · 없음이면 지금 색 칸이 골라져 있다 — 이름만 고쳐 저장해도 색은 그대로다. 저장된 옛 hex 는 이름표다 — 웹 · 앱은 짝 표로 저장 값 ↔ 색 이름을 잇고(DESIGN.md v110 "저장된 색은 옮기지 않는다"), 칸은 그 색 이름의 v110 색을 그린다.

칸마다 색 이름제목 링크 복사

칸의 이름은 색 이름이다 — 빨강 · 주황 · 노랑 · 초록 · 파랑 · 남색 · 보라 · 분홍 · 갈색 · 회색. "색상 1" · "#c73838" 을 이름으로 두지 않는다. 묶음의 이름은 칸 이름(Field 라벨 "색상")이다 — 폼이 줄 칸이면(색 줄 → 고르기 시트 · 팝오버) 줄 제목 "색상" 이 이름이다. 줄 제목은 어느 폼이든 "색상" 한 벌이다(2026-10-23 디자인시스템 세션 — 저축 목표 · 메모 · 캘린더의 색 줄). 칸 아래에 이름 글을 늘어놓지는 않는다 — 보조 기술과 마우스 툴팁이 읽는다.

다른 컴포넌트와 나누기제목 링크 복사

코드제목 링크 복사

레시피 recipes/shadcn/components/ui/color-swatch.tsx 를 Field 안에 둔다. 색 이름(ChartColor — "red" … "gray")은 Chart 레시피의 것을 쓴다. 아래 미리보기는 스펙 값으로 그린 모습이다.

• ColorSwatchGroup — 묶음(radiogroup · 5 × 2). value · defaultValue(ChartColor 또는 "current" — 지금 색 칸, null 이면 고른 칸 없음) · onValueChange(value) · currentColor(팔레트 밖 저장 색 hex — 주면 "지금 색" 칸) · autoColor(색 없는 항목에 차트가 줄 ChartColor — 주면 "자동" 칸) · disabled · aria-label(Field 밖에서만). Field 안이면 라벨이 묶음 이름, 설명 · 오류가 설명이 된다(Field 의 useFieldGroup). 칸 이름 · 차례 · 2차원 화살표는 스스로 그린다.
• firstUnusedColor(used) — v110 배정 순서에서 used 에 없는 첫 색. 아홉 색을 다 쓰면 파랑부터, 회색은 주지 않는다.
• COLOR_NAMES — 색 이름({ red: "빨강", … }), COLOR_SWATCH_ORDER — 색상환 차례.

새 카테고리 — 쓰지 않은 첫 색제목 링크 복사

import { useState } from "react"
import type { ChartColor } from "@/components/ui/chart"
import { ColorSwatchGroup, firstUnusedColor } from "@/components/ui/color-swatch"
import { Field } from "@/components/ui/field"

// 같은 목록이 쓰지 않은 첫 색으로 시작한다 — 늘 빨강이 아니다
const [color, setColor] = useState<ChartColor | "current">(() => firstUnusedColor(usedColors))

<Field label="색상">
  <ColorSwatchGroup value={color} onValueChange={setColor} />
</Field>

고치기 — 팔레트 밖 색제목 링크 복사

import { ColorSwatchGroup } from "@/components/ui/color-swatch"
import { Field } from "@/components/ui/field"

<Field label="색상">
  {/* 고르지 않고 저장하면 "current" — 저장 값(#9E9E9E)을 그대로 둔다 */}
  <ColorSwatchGroup value={picked} onValueChange={setPicked} currentColor="#9E9E9E" />
</Field>

색 없는 항목 — 자동제목 링크 복사

import { ColorSwatchGroup } from "@/components/ui/color-swatch"
import { Field } from "@/components/ui/field"

<Field label="색상">
  <ColorSwatchGroup value={picked} onValueChange={setPicked} autoColor={chartColorOf(item.id)} />
</Field>

Behavior제목 링크 복사

Accessibility제목 링크 복사

Do / Don't제목 링크 복사

✅ Do제목 링크 복사

• 차트 10색을 원 40 칸에 진하게 칠해 5 × 2 · 색상환 차례로.
• 고른 칸은 고리 + 체크 — 체크는 다크에서 짙은 글자.
• 새 항목은 쓰지 않은 첫 색으로 시작한다.
• 팔레트 밖 · 색 없는 항목은 "지금 색" · "자동" 칸으로 — 고르지 않으면 그대로.
• 칸마다 색 이름, 묶음 이름은 Field 라벨.

❌ Don't제목 링크 복사

• 옅게 섞은 칸 · 옅은 바탕 칸.
• 폭을 나눈 네모 · 44 둥근 네모 · 줄바꿈으로 차례가 바뀌는 격자.
• 새 항목을 늘 빨강으로 · 고치면 몰래 빨강으로 저장.
• 색을 꼭 고르게 하기.
• "색상 N" · hex 를 칸 이름으로.
• 다크에서 흰 체크.

Specification제목 링크 복사

color-swatch.yaml 의 규칙을 하나도 빼지 않고 조건마다 그린다 — 웹 · 앱이 Color Swatch 를 만들 때 이 값을 그대로 쓴다. 조건이 없는 Base 가 모든 조합에 걸리고, 뒤의 규칙이 앞의 같은 값을 덮는다. 상태는 enabled 에서 바뀌는 값만 적었다.

SEED 와 다른 점제목 링크 복사

• groo 가 정한 컴포넌트다 — SEED 에는 색 고르기 부품 · 화면이 없다. SEED 가 가진 가장 가까운 것은 Wheel Picker 예의 "색 점 12 + 이름" 이고, 칸마다 이름을 다는 것만 같다.
• 2차원 화살표 — SEED 는 격자 고르기의 키보드 규칙이 없다(SEED 문서 사이트의 팔레트 칸은 칸마다 Tab 이다). groo 는 radiogroup 에 위아래 줄 이동을 더했다.
• 색은 v110 차트 10색 — SEED 팔레트는 사용자가 고르는 색 세트를 두지 않는다.

Migration notes제목 링크 복사

2026-10-17 — 웹 칸 -static · Home · End 를 받지 않는다(03-B 결정 5 A · 03-E 결정 3 후속)제목 링크 복사

• 칸 · 사이 -static(03-B 결정 5 A) — 웹 칸이 size-10(rem)이라 글자 200% 에서 80 원이 grid-cols-[repeat(5,40px)] gap-x3(px) 격자에서 서로 겹쳤다(한 색의 1/3 이 가려지고 누르면 옆 색이 골라질 수 있다). 레시피 칸을 size-[40px] 로 — 열 · 간격 · 격자 폭(이미 px)과 맞는다. 앱은 이미 40 고정이다. 웹 ds color-swatch-variants.ts:117 도 같게.
• Home · End(03-E 결정 3 후속) — 레시피 · 사이트 그림의 Home · End(첫 칸 · 마지막 칸)를 걷고, 묶음이 ignoreRadioJumpKeys 로 Home · End · PageUp · PageDown 을 막는다(Radio Group 과 같다). 웹 ds 도 같게, 앱은 바뀌는 것 없음.

2026-10-17 — 앱 묶음의 역할 · 툴팁(03B-004b)제목 링크 복사

구현 조사에서 앱 묶음 노드(p_color_swatch.dart:388)가 container + label 만이고(역할 없음), 첫 칸의 툴팁 "빨강"(:292 PTooltip 이 칸의 Semantics 밖)이 묶음 노드에 붙어 고른 색이 파랑이어도 "색상, 빨강" 으로 읽히는 것을 찾았다. 스펙(묶음 radiogroup · 칸 이름 = 색 이름)대로 고치는 줄이라 사용자가 승인했다(03-B 페이지). Accessibility 의 ARIA 에 앱 줄을 적었다 — 묶음 SemanticsRole.radioGroup(앱 Segmented 가 이미 쓴다) · 툴팁은 칸 노드 안(또는 의미에서 뺀다). 옛 스펙은 color-swatch.history/v-pre-03e-03b.md.

2026-10-16 — 지금 색 칸 아래 글을 subtle 로(글자 역할 D5)제목 링크 복사

사용자가 글자 역할 비교 페이지에서 보조 글의 규칙을 정했다(D5 A — 덧붙인 정보는 fg-neutral-subtle, 문장으로 된 보조 글은 fg-neutral-muted). 지금 색 칸 아래 색 이름(12)은 이름표라 muted → subtle(흰 표면 5.50 · 다크 6.09 · 시트 5.27). 옛 스펙은 color-swatch.history/v-pre-text-roles.*.

2026-10-09 — 진한 원 칸 · 지금 색 칸으로 다시 쓴다제목 링크 복사

사용자가 입력 비교 페이지에서 정했다 — 칸은 진한 색(12C — v110 700 · 다크 800-dark, 체크는 라이트 흰 · 다크 fg-neutral-inverted), 원 40(누르는 44) · 5 × 2 고정 · 고르면 2px 짙은 고리(띄움 2) + 체크 · ↑ ↓ 는 위아래 줄(13B), 새 항목은 쓰지 않은 첫 색 · 편집은 고르지 않으면 바꾸지 않고 팔레트 밖 색은 "지금 색" 칸(14B). 그리고 "따라오는 것" — 색 이름 · 색상환 차례 5 × 2 · radiogroup 2차원 화살표 · 웹 · 앱 같은 v110 색 · HR 부서 색은 HR 적용 때. 옅게 섞기(12A) · v111 weak(12B) · 폭 나누기 네모(13A) · 44 둥근 네모(13C) · 늘 빨강(14A)은 고르지 않았고, 색 필수는 데이터 결정(9C)에서 고르지 않았다. 옛 스펙은 color-swatch.history/v-pre-seed-input.* 에 남겼다.

제품은 앱 적용 단계에서 옮긴다(2026-10-09 조사 — Desk 웹은 크로미움에 띄워 쟀고, Desk 앱은 위젯 테스트 · 코드로, HR 은 코드 · 계산으로 봤다). 색 고르기는 웹 8곳(7파일 — shared/ui/color-swatch.tsx 의 ColorSwatchGroup) · 앱 8곳(shared/widgets/p_color_picker.dart 의 PColorPicker) · HR 1곳이다.

• 웹 자리 — 카테고리(widgets/category-manage/ui/CategoryEditDialog.tsx:305-315) · 저축 목표(widgets/asset-full/ui/SavingGoalAddDialog.tsx:432-442) · 캘린더 라벨(widgets/calendar-manage/ui/CalendarLabelsSection.tsx:523-532) · 할 일 태그(widgets/calendar-manage/ui/TodoTagManager.tsx:523-532) · 메모 태그(widgets/memo-manage/ui/MemoTagManager.tsx:529-538) · 메모 색(pages/memo/ui/MemoPage.tsx:1178-1188) · 공유 캘린더 둘(CalendarShareSection.tsx:680-689 · 955-964).
• 앱 자리 — 카테고리(features/category/presentation/category_edit_dialog.dart:469) · 저축 목표(features/saving_goal/presentation/saving_goal_edit_dialog.dart:308) · 메모(features/memo/presentation/memo_edit_dialog.dart:256) · 할 일 태그(features/todo/presentation/todo_tag_management_screen.dart:585) · 메모 태그(memo_tag_management_screen.dart:589) · 캘린더 라벨 · 공유(features/calendar/presentation/calendar_labels_screen.dart:536 · calendar_share_screen.dart:499 · 785).
• 옅은 칸 — 웹은 color-mix(… 18%, transparent)(shared/lib/groo/chart-palette.ts:147-151)라 칸이 대화상자와 1.25 ~ 1.34 이고 칸끼리 OKLab ΔE 가 최소 0.012(남색 · 보라) · 가운데 0.033 이다. 체크 14 는 칸 위 3.63 ~ 4.32. 앱은 13 · 22% 에 옛 상수 색이라 더 옅다(최소 0.006 — core/format/chart_palette.dart:141-150, D17). 칸은 데스크톱 88.8 · 폰 62 로 폭을 나눈다.
• 몰래 빨강 — 색이 없거나 팔레트 밖(가져오기의 #9E9E9E — porest-desk-back ImportServiceImpl.java:71)인 카테고리 · 목표 · 라벨 · 태그를 열면 빨강이 골라져 있고, 이름만 고쳐 저장해도 #c73838 이 나간다(웹 CategoryEditDialog.tsx:74-78 · 114-126 · CalendarLabelsSection.tsx:404-408 · TodoTagManager.tsx:405-409 · MemoTagManager.tsx:411-415, 앱 category_edit_dialog.dart:91-96 "첫 색으로 정규화" · saving_goal_edit_dialog.dart:103-106, D6). 앱 태그 · 라벨은 팔레트 밖 색을 그대로 두되 어느 칸도 고르지 않아(todo_tag_management_screen.dart:447-450) 웹과 다르다. 지금 색 칸으로.
• 새 항목은 늘 빨강 — 웹 · 앱 카테고리 · 목표 · 라벨 · 태그(CategoryEditDialog.tsx:75 · SavingGoalAddDialog.tsx:91-93 · category_edit_dialog.dart:94-96, D18), 메모 · 캘린더는 파랑(MemoPage.tsx:73 · CalendarShareSection.tsx:897). 서버가 심는 기본 지출 카테고리 여덟이 이미 여덟 색을 쓰고 식비가 빨강이다(ExpenseCategoryServiceImpl.java:196-208) — firstUnusedColor 로.
• 이름 · 키보드 — 웹 칸 이름이 "색상 1 ~ 10"(5곳) · "색상 #c73838"(메모) · "#c73838"(캘린더 둘)이고 묶음 이름 0/8 · 첫 → 는 초점만 옮기고 ↓ 는 다음 칸으로 간다(color-swatch.tsx:55, D24). 앱 칸은 GestureDetector 라 이름 · 고른 상태 · 키보드 초점이 0 이다(p_color_picker.dart:47-63, D7).
• HR 부서 색 — 부서 폼의 색이 Select(없음 + chart-1 ~ chart-5 · 점 16 + "파란색 · 녹색 · 노란색 · 보라색 · 빨간색")이고 토큰 이름을 저장한다(features/admin-company/ui/DepartmentFormDialog.tsx:213-262 · 조직도 띠 DepartmentChartPanel.tsx:29-56). "노란색" 이 실제 주황(#E88C30)이고 점이 흰 바탕 2.52 · 2.55 다(D25). HR 적용 때 같은 10색 · 이 묶음으로 옮긴다.
• 일정 색 칸 — 2026-09-25 에 걷었다(일정 색 = 캘린더 색 — EventForm.tsx:268-269).

이전 기록제목 링크 복사

• 2026-05 — 처음 둠. desk-front CategoryEditDialog 의 "색상" 격자에서 끌어올렸다(정사각 칸 · currentColor 테두리 · 흰 체크 · 마우스 1.05배). 이번에 모두 바뀌었다.