Tag Group

구조는 당근 SEED Tag Group(Apache-2.0)를 따른다 — 항목(글 + 아이콘 하나) · 구분 " · ", 크기 셋(t2 · t3 · t4), 항목마다 톤 · 굵기, 줄바꿈 또는 한 줄 말줄임. 값은 groo 토큰이고, SEED 와 다른 자리는 맨 아래 "SEED 와 다른 점" 에 적었다(2026-10-03 사용자 결정). groo 에 처음 두는 컴포넌트다 — DESIGN.md Caption 절의 "닉네임 · 시간" 메타 줄과 List 줄의 설명 줄이 이것이다.

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

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

크기 · 항목 수 · 항목마다 톤 · 굵기 · 아이콘 · 줄바꿈 · 말줄임과 폭을 고르면 스펙대로 그린 줄과 그 코드, 보조 기술이 읽는 글이 바뀐다.

import { TagGroup, TagGroupItem } from "@/components/ui/tag-group"

<TagGroup>
  <TagGroupItem>식비</TagGroupItem>
  <TagGroupItem>신한카드 Deep Dream 체크(1234)</TagGroupItem>
  <TagGroupItem>오후 2:10</TagGroupItem>
</TagGroup>

Anatomy제목 링크 복사

부위

Properties제목 링크 복사

Size제목 링크 복사

t2 12 / 16 (기본) · t3 13 / 18 · t4 14 / 19. 아이콘은 12 · 13 · 14 로 글자에 맞추고 글과 사이 2. 크기는 묶음에 하나다 — 한 줄 안에서 섞지 않는다. 글은 글자 크기 설정을 따른다.

크기

공통

Tone · Weight제목 링크 복사

톤과 굵기는 항목마다 고른다. 기본은 흐린 글자(neutralSubtle — fg-neutral-subtle) · 400 이고, 금액 · 핵심 수치처럼 앞세울 항목은 되도록 하나만 neutral(본문 글자) · bold 로 둔다 — 여럿을 진하게 하면 앞세움이 사라진다(SEED 는 항목마다 톤 · 굵기를 조합하게 열어 둔다). brand 는 아껴 쓴다. 구분 " · " 는 톤과 관계없이 늘 fg-disabled 로 글보다 한 단계 흐리다.

톤

굵기

Icon제목 링크 복사

아이콘은 항목의 앞(prefix) 또는 뒤(suffix)에 하나만 — 앞뒤 모두 두지 않는다. 글자색을 따른다. 갈래(분할) · 눈(조회)처럼 뜻이 있는 아이콘은 그 항목의 읽을 글(srLabel — "분할 2건" · "조회 12")이 뜻을 말한다.

Overflow제목 링크 복사

말줄임하면 정보를 읽기 어려워지는 자리(가게 이름 · 주소)는 줄바꿈이 낫다. 목록 줄처럼 높이가 늘면 안 되는 자리만 truncate 로 두고, 꼭 보여야 할 항목(금액)은 shrink={0} 이다. 말줄임으로 줄이는 것은 이름 항목(카테고리 · 계좌 · 태그)뿐이다 — 잘리면 뜻이 없는 항목(금액 · 시각 · 주기 문장)은 줄이지 않고, 줄이 모자라면 항목째 다음 줄로 넘긴다("연회비 1,…" · 앞 두 낱말만 남은 주기는 쓰지 않는다).

shrink 는 차례가 아니다 — 브라우저 · Flutter 모두 넘친 폭을 줄어드는 항목에 '글 폭 × shrink' 비율로 나눠 한꺼번에 줄인다. 수가 클수록, 글이 길수록 많이 줄 뿐 큰 수의 항목이 다 줄어든 뒤에 다음 항목이 줄지는 않는다. 그래서 줄어드는 항목에는 최소 폭이 있다 — 첫 글자 + "…" 가 남는 2.1em(t3 100% 에서 27.3). 그보다 짧은 항목(두 글자 이하)은 넓히지 않고 글 폭 그대로다. 최소 폭이 없으면 좁은 줄에서 짧은 시각 · 개수까지 함께 줄어 글자 조각("오" 6.7px)만 남았다. 모든 항목이 최소 폭까지 줄어도 넘치면 줄 끝이 말줄임 없이 잘린다(200% · 폭 260 에서 21) — 꼭 보일 항목은 shrink={0} 으로 앞에 둔다(2026-10-17 사용자 결정 — 03-E 결정 5 B. 기본을 "줄지 않음" 으로 · SEED 그대로는 고르지 않았다).

줄바꿈 · 말줄임

State제목 링크 복사

상태는 enabled 하나다 — 누르지 않는다. 막힌 줄 안에 있으면 그 줄의 규칙(List 의 비활성 — 모든 글 fg-disabled)을 따른다. 끝낸 줄(끝낸 할 일 — 줄은 막히지 않고 누를 수 있다) 안도 항목 글을 모두 fg-disabled 로 둔다 — 톤 · 굵기와 상관없이, 구분 " · " 는 원래 fg-disabled 그대로다(2026-10-25 I-10 앱 PTagTone.disabled, 같은 줄의 배지는 Badge 의 "끝낸 항목 안").

Guidelines제목 링크 복사

메타 정보는 Tag Group제목 링크 복사

시간 · 개수 · 길이 · 거리 · 금액 · 자산 같은 메타 정보는 Tag Group 이다. 대상의 상태 · 분류(예정 · 승인 · 연체)는 Badge 다(SEED Image Frame — "Badge 는 상태나 분류를 표현할 때만, 시간 · 개수 · 길이 같은 메타 정보에는 쓰지 않는다"). 한 줄에 둘이 함께 있으면 배지는 제목 옆, Tag Group 은 설명 줄이다.

짧게 — 조사 · 접속어를 빼고제목 링크 복사

항목은 6 ~ 10자로, 조사 · 접속어 · 단위의 군말을 뺀다("신한카드로 결제함" 이 아니라 "신한카드"). 문장이 되면 Tag Group 이 아니라 설명 글이다. 같은 자리의 항목은 화면마다 같은 순서다(가계부 줄 — 분류 · 자산 · 시각).

구분은 " · " 글자제목 링크 복사

항목 사이는 글자 " · "(가운뎃점 앞뒤 띄어쓰기)다 — 2px 점 그림 · "•" · "|" · 띄어쓰기만으로 가르지 않는다. 구분은 글보다 한 단계 흐린 fg-disabled 다.

한 묶음은 한 크기제목 링크 복사

크기는 묶음에 하나다 — 항목마다 크기를 바꾸지 않는다. 강조는 톤 · 굵기로 한다.

끊어 읽는다제목 링크 복사

구분 " · " 는 보조 기술에 숨기고, 그 자리에 보이지 않는 ", " 를 둔다 — 화면 읽기 프로그램이 "식비, 신한카드, 오후 2:10" 으로 끊어 읽는다("식비신한카드오후 2:10" 처럼 붙지 않는다). 아이콘이 뜻을 가진 항목은 읽을 글을 따로 준다("분할 2건" · "조회 12").

쓰는 자리제목 링크 복사

코드제목 링크 복사

레시피 recipes/shadcn/components/ui/tag-group.tsx 를 쓴다 — TagGroup · TagGroupItem. TagGroup 은 size("t2" 기본 · "t3" · "t4") · truncate(기본 false = 줄바꿈)와 항목의 기본 tone · weight 를 받고, 항목 사이에 " · "(보조 기술에는 ", ")를 스스로 넣는다 — 빈 항목(null · false · "")은 건너뛴다. TagGroupItem 은 tone("neutralSubtle" · "neutral" · "brand") · weight("regular" · "bold") · prefixIcon 또는 suffixIcon(하나만) · shrink(truncate 일 때 줄어드는 정도, 기본 1 — 0 은 줄지 않는다) · srLabel(보조 기술이 읽을 글 — 주면 보이는 글 · 아이콘은 숨긴다)을 받는다. 아래 미리보기는 스펙 값으로 그린 모습이다.

목록 줄의 설명 — 한 줄제목 링크 복사

import { TagGroup, TagGroupItem } from "@/components/ui/tag-group"

<TagGroup size="t3" truncate>
  <TagGroupItem>{tx.category}</TagGroupItem>
  <TagGroupItem>{tx.assetName}</TagGroupItem>
  <TagGroupItem shrink={0}>{formatTime(tx.at)}</TagGroupItem>
</TagGroup>

앞세울 항목 · 아이콘제목 링크 복사

import { Eye } from "lucide-react"

<TagGroup>
  <TagGroupItem tone="neutral" weight="bold">전월 30만원 이상</TagGroupItem>
  <TagGroupItem>할인형</TagGroupItem>
  <TagGroupItem>연회비 2만원</TagGroupItem>
</TagGroup>

<TagGroup>
  <TagGroupItem>인사팀</TagGroupItem>
  <TagGroupItem>10월 2일</TagGroupItem>
  <TagGroupItem prefixIcon={<Eye />} srLabel="조회 12">12</TagGroupItem>
</TagGroup>

줄어드는 정도제목 링크 복사

<TagGroup size="t3" truncate>
  <TagGroupItem shrink={0}>교통</TagGroupItem>
  <TagGroupItem shrink={2}>신한카드 Deep Dream 체크(1234)</TagGroupItem>
  <TagGroupItem shrink={0}>오후 2:10</TagGroupItem>
</TagGroup>

Behavior제목 링크 복사

Accessibility제목 링크 복사

Do / Don't제목 링크 복사

✅ Do제목 링크 복사

• 메타 정보를 " · " 로 이어 짧게.
• 앞세울 항목은 되도록 하나만 진하게.
• 한 묶음은 한 크기.
• 항목마다 끊어 읽게.

❌ Don't제목 링크 복사

• 2px 점 · "•" · "|" 로 가르기.
• 항목을 문장으로 · 조사를 붙여 길게.
• 상태 · 분류를 Tag Group 에 — 배지다.
• 영어 · 코드값 항목("Day 2 of 3" · "9:00 AM").

Specification제목 링크 복사

tag-group.yaml 의 규칙을 하나도 빼지 않고 조건마다 그린다 — 웹 · 앱이 Tag Group 을 만들 때 이 값을 그대로 쓴다. 조건이 없는 Base 가 모든 조합에 걸리고, 뒤의 규칙이 앞의 같은 값을 덮는다.

SEED 와 다른 점제목 링크 복사

• 기본 글자가 4.5:1 을 넘는다 — 기본 톤은 groo fg-neutral-subtle(흰 바탕 5.50:1)이다. SEED fg.neutral-subtle(#868b94)은 3.42:1 이다.
• 구분 색은 fg-disabled — SEED palette gray-600 의 역할 짝(글보다 한 단계 흐리다).
• 낱말 단위 줄바꿈 · 구분은 앞 줄 끝에 — SEED 웹은 한국어를 음절에서 끊고("3시 / 간 전") 구분 " · " 가 다음 줄 첫머리에 남는다. groo 는 v114(keep-all + break-word)로 낱말 사이에서만 끊고, 구분 앞 공백을 줄이 안 바뀌는 공백으로 둔다.
• 끊어 읽는다 — SEED 는 구분을 숨기기만 해 "500m서초4동3분 전" 처럼 붙어 읽히고, 예제의 aria-label(span)은 무시된다. groo 는 보이지 않는 ", " 와 항목의 srLabel 을 둔다.
• 구분 기호는 " · " 하나 — SEED 는 separator 로 바꿀 수 있다.
• 줄어드는 항목의 최소 폭 — 한 줄 말줄임에서 항목은 첫 글자 + "…"(2.1em) 까지만 준다. SEED 는 최소 폭이 없어 좁은 줄에서 글자 조각만 남는다(2026-10-17 사용자 결정 — 03-E 결정 5 B).

Migration notes제목 링크 복사

2026-10-30 — 끝낸 줄 안제목 링크 복사

구현 검수(I-10)에서 앱 ds 가 먼저 만든 PTagTone.disabled 를 State 에 한 줄로 적었다 — 끝낸 줄 안의 Tag Group 은 모든 항목 글이 fg-disabled. 값 · 토큰 변경 없음(tag-group.yaml 은 그대로). 옛 스펙은 tag-group.history/v-pre-cleanup-1030.md.

2026-10-22 — 앞세울 항목은 되도록 하나제목 링크 복사

"앞세울 항목 하나만"(b1dfc58 — 10-03 비교 페이지에 없다)을 까닭을 붙인 권장 "되도록 하나 — 여럿을 진하게 하면 앞세움이 사라진다" 로 낮췄다(남은 규칙 R4). 사용자 결정 — https://claude.ai/artifact/Mag1tEv51MdQHdy1o8hY3L. 값 변경 없음.

2026-10-17 — 줄어드는 항목의 최소 폭 · shrink 문장(03-E 결정 5 B)제목 링크 복사

구현 조사에서 모든 항목이 기본 shrink 1 · 최소 폭 0 이면 폭 200 에서 짧은 시각 · 분할이 18.8 · 16.6px(200% 에서 21 · 19)의 글자 조각이 되는 것을 찾았다. 사용자가 비교 페이지에서 "줄어드는 항목도 첫 글자 + … 까지만"(B)을 골랐다 — tag-group.yaml 의 label.minWidth 2.1em. 같은 페이지가 바로잡은 대로 shrink 문장 "수가 클수록 먼저" 를 "글 폭 × shrink 비율로 함께" 로 고쳤다(브라우저는 차례대로 줄이지 않는다). 레시피 TagGroupItem 은 항목 칸에 최소 폭(2.1em + 아이콘 · 사이, 두 글자 이하면 글 폭)을 준다 — 글 칸(overflow hidden)에 주면 항목의 최소 크기로 올라가지 않아 줄 전체가 줄지 않는다. 웹 ds TagGroup 도 같게, 앱은 항목을 ConstrainedBox(minWidth: 첫 글자 + … 폭 + 아이콘)(글이 더 짧으면 글 폭)로. 지금 Desk 화면은 Tag Group 을 아직 쓰지 않는다. 옛 스펙은 tag-group.history/v-pre-03e-03b.*.

2026-10-03 — 새로 둔다(SEED Tag Group)제목 링크 복사

사용자가 비교 페이지의 "따라오는 것" 으로 정했다 — 메타 줄은 Tag Group(항목 사이 " · " 글자, 12/16 기본 · 13/18 · 14/19, 글자 fg-neutral-subtle, 구분 fg-disabled, 넘치면 낱말 단위 줄바꿈 또는 한 줄 말줄임, 낭독은 항목마다 끊어). 웹 2px 점 · HR "•" 는 걷는다. DESIGN.md Caption 절의 메타 줄 규칙("닉네임 + · + 시간")은 이 스펙을 가리킨다.

제품은 앱 적용 단계에서 옮긴다(2026-10-03 조사).

• 메타 줄 구분이 세 가지 — Desk 웹은 2 × 2 점 그림(shared/ui/groo/ledger.tsx:639-652 LedgerRowSep · 할 일 TodoPage.tsx:789-795, --border-strong 3.72 · 4.80), Desk 앱은 " · " 글자 합치기(features/expense/presentation/widgets/expense_row.dart:199-209 — 할 일만 2px 점 todo_screen.dart:1266-1282), HR 은 "•"(admin-notice/ui/NoticeList.tsx:61 · 63 · admin-holiday/ui/HolidayList.tsx:69, 3.07 · 3.96).
• 웹의 글자 "·" 세 벌 — 코드 86줄 · 39파일과 번역 177행에 " · " · "·"(StatsPage.tsx:1786) ·  ·(ExpensePage.tsx:2196)가 섞였다.
• 웹 · 앱 항목이 다르다 — 가계부 줄이 웹은 분류 · 자산 · 시각, 앱은 분류 · 자산 · 할부 N개월이다. 앱 적용 때 한 순서로 맞춘다.
• 아이콘 + 숫자가 숫자만 읽힘 — 분할 개수(웹 entities/expense/ui/expense-row.tsx:86-103)는 "2" 로만, HR 공지 조회수(눈 아이콘 + 숫자)는 아이콘 이름이 없다 → srLabel("분할 2건" · "조회 12").
• 영어 표기 — HR 일정 칩 "Day 2 of 3 •" · "9:00 AM"(calendar/ui/month-view/month-event-badge.tsx:118-133 · agenda-view/agenda-event-card.tsx:85-88) → "2/3일째" · "오전 9:00"(International Design v106).