Divider

구조는 당근 SEED Divider(Apache-2.0)를 따른다 — 1px 선 · 가로 · 세로 · 들임(16), 나누는 세기 셋(들인 선 · 끝까지 선 · 8 간격). 값은 groo 토큰이고, SEED 와 다른 자리는 맨 아래 "SEED 와 다른 점" 에 적었다(2026-10-03 사용자 결정). 옛 Separator 를 대신한다 — 이름도 SEED 대로 Divider 다.

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

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

방향 · 들임 · 장식 여부를 고르면 스펙대로 그린 선과 그 코드, 보조 기술이 읽는지가 바뀐다.

import { Divider } from "@/components/ui/divider"

<Divider />

Anatomy제목 링크 복사

부위

Properties제목 링크 복사

색 · 두께제목 링크 복사

선은 하나다 — 1px stroke-neutral-subtle(흰 바탕 1.15 · 다크 1.30). SEED 의 기본 선(neutral-muted, 1.15)과 같은 진하기라 새 토큰 없이 둔다. 굵은 선 · 짙은 선 · 점선을 두지 않는다 — 더 세게 나눠야 하면 선이 아니라 간격이다(아래 "세 가지 나누기").

공통

Orientation제목 링크 복사

horizontal (기본) 은 세로로 쌓인 내용 사이 — 부모 폭 전체. vertical 은 가로로 놓인 칸 사이(통계 세 칸 · 버튼 묶음) — 높이는 부모가 정한다.

방향

Inset제목 링크 복사

full (기본) 은 끝까지, inset 은 양끝 16 을 들인다(세로선은 위아래 16). 같은 묶음 안을 나눌 때 들인다 — 묶음 사이 · 액션 영역 위는 끝까지다. 화면 여백(24)에 붙은 목록 줄 사이는 Divider 가 아니라 List 의 줄 사이 선(들임 24 — 줄 글과 맞는다)이다.

들임

State제목 링크 복사

상태가 없다 — 정적인 선이다(누르기 · 포커스 없음).

Guidelines제목 링크 복사

세 가지 나누기제목 링크 복사

"8px 구분선" 은 없다 — 두꺼운 회색 막대를 그리지 않고 바탕 층 사이 간격으로 만든다(SEED).

세기는 상황에 맞게 고른다(SEED "각 방식은 사용 목적과 맥락이 다르므로, 상황에 맞게 적절한 방식을 선택") — 이 표는 고르는 참고이고 화면 규칙이 아니다. 어느 화면이 띠(8 간격)로 나뉘는지는 화면 이관 때 화면마다 고르고, 화면 이름은 DESIGN.md Layout 의 "화면 바탕" 한 곳에 적는다. 상황 → 고를 것 · 띠 · 카드 · 흰 화면까지 견준 표는 DESIGN.md Layout 의 "화면을 나누는 법"(2026-10-22 사용자 결정 — https://claude.ai/artifact/KrXqAymDPz1JKL5AWqdwKS).

꼭 필요할 때만제목 링크 복사

선을 두기 전에 여백 · 제목 · 바탕 층으로 갈리는지 먼저 본다(SEED "Divider를 사용하기 전에 반드시 필요한지 검토해주세요"). 반복되는 목록 줄은 줄의 위아래 여백이 줄을 가르므로 선이 없는 것이 기본이다 — 촘촘한 목록에만 List 의 줄 사이 선(같은 1px stroke-neutral-subtle). 메뉴 묶음 사이 · 대화상자 머리 아래(스크롤될 때)의 선도 같은 값이다. 8 간격도 같다 — 같은 성격의 묶음이 이어지면 띠를 끊지 않고 목록 제목으로 가른다.

마지막에는 두지 않는다제목 링크 복사

선은 내용 사이에만 둔다 — 화면 · 묶음의 마지막 요소 아래, 카드 맨 위 · 맨 아래에는 두지 않는다. 8 간격도 같다 — 첫 띠 위 · 마지막 띠 아래에는 틈 · 선 · 빈 띠를 두지 않는다. 첫 띠는 머리(상단 바 · 가계부 묶음 탭) 바로 아래에 붙고, 띠가 끝난 아래 회색은 바닥이지 구분선이 아니다(SEED "화면의 마지막 섹션이나 요소 하단에는 Divider를 표시하지 않습니다" — 2026-10-22 사용자 결정 4B · 시작 쪽도 같은 까닭으로 2026-10-23 사용자 결정 — https://claude.ai/artifact/W8PJv3at8BMv1ypCQd7vGB 결정 1 · https://claude.ai/artifact/WRqqZhbQYdBCcnyEKhzeVW Q2). 8 간격은 띠와 띠 사이에만 있다.

장식이 기본제목 링크 복사

선은 눈으로 묶음을 가르는 장식이라 보조 기술에 숨긴다 — 묶음은 제목 · 목록 구조로 알린다. 문서의 장처럼 보조 기술도 "구분선" 을 알아야 하는 자리만 의미 있는 구분선(role="separator")으로 둔다.

코드제목 링크 복사

레시피 recipes/shadcn/components/ui/divider.tsx 를 쓴다 — Divider. orientation("horizontal" 기본 · "vertical") · inset(기본 false — YAML 의 full, true 면 inset) · decorative(기본 true — 보조 기술에 숨긴다, false 면 role="separator")를 받는다. <hr> 이 아니라 <div> 로 그린다. 위아래 · 좌우 간격은 쓰는 자리가 정한다. 아래 미리보기는 스펙 값으로 그린 모습이다.

묶음 사이 · 같은 묶음 안제목 링크 복사

import { Divider } from "@/components/ui/divider"

<div>
  <p className="flex justify-between py-x3">결제 수단<span>생활비 카드</span></p>
  <Divider inset />
  <p className="flex justify-between py-x3">할부<span>3개월</span></p>
</div>
<Divider />
<section aria-labelledby="memo-title">…</section>

세로 — 칸 사이제목 링크 복사

<div className="flex items-stretch">
  <p className="flex-1 py-x4 text-center">수입<br />{formatWon(income)}</p>
  <Divider orientation="vertical" inset />
  <p className="flex-1 py-x4 text-center">지출<br />{formatWon(expense)}</p>
  <Divider orientation="vertical" inset />
  <p className="flex-1 py-x4 text-center">남은 돈<br />{formatWon(rest)}</p>
</div>

Behavior제목 링크 복사

Accessibility제목 링크 복사

Do / Don't제목 링크 복사

✅ Do제목 링크 복사

• 같은 묶음 안은 들인 선, 묶음 사이는 끝까지 선.
• 크게 다른 내용은 선 대신 8 간격(바탕 층).
• 선은 꼭 필요할 때만, 내용 사이에만.

❌ Don't제목 링크 복사

• 두꺼운 선 · 짙은 선 · 8px 회색 막대.
• 목록 줄마다 선 + 여백을 함께.
• 화면 · 묶음 마지막 아래의 선.
• 선 색을 자리마다 다르게(border-default · border-subtle …).

Specification제목 링크 복사

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

SEED 와 다른 점제목 링크 복사

• 색은 stroke-neutral-subtle 하나 — SEED 는 기본 neutral-muted(투명도 있는 검정 6.3%) · 반복 항목용 neutral-subtle(4.7%) 둘이다. groo 의 stroke-neutral-subtle(#EDEFF3)이 SEED 기본과 같은 진하기(흰 바탕 1.15)라 새 토큰 없이 한 색으로 둔다.
• 기본이 장식 — SEED 는 <hr>(보조 기술이 "구분선" 으로 읽는다)가 기본이고 장식은 as="div" 로 바꿔야 한다. groo 는 장식이 기본이고 의미 있는 구분선만 role="separator" 다(SEED 포용적 디자인의 "장식 요소는 숨긴다" 를 기본으로).
• 들임(inset)은 코드에 있다 — SEED 디자인 문서는 "Figma 에서만" 이라 쓰지만 React · Lynx 에 있다. groo 도 둔다(16).

Migration notes제목 링크 복사

2026-10-23 — 첫 띠 위에도 틈을 두지 않는다제목 링크 복사

"마지막 띠 아래 틈 없음" 에 시작 쪽을 더했다 — 머리(상단 바 · 가계부 묶음 탭) 바로 아래 첫 띠 위 8 을 두지 않는다. 사용자: "SEED 가 마지막 gap 은 빼라고 하듯 머리와 시작 사이 gap 도 빼는 게 맞다, 저것 때문에 다 이상해 보인다"(홈 https://claude.ai/artifact/W8PJv3at8BMv1ypCQd7vGB 결정 1) · "시작과 끝에 gap 이 들어가면 이상해 보인다"(I-05 https://claude.ai/artifact/WRqqZhbQYdBCcnyEKhzeVW Q2). DESIGN 세 파일 Layout "화면 바탕" 의 옛 "맨 위 8" 을 걷었다. 값 변경 없음.

2026-10-22 — 세기 표는 고르는 참고, 화면 이름은 한 곳에제목 링크 복사

"강함" 줄에 붙어 있던 화면 규칙("Desk 폰 화면은 묶음 · 구역마다 화면 폭 흰 띠")을 걷고 b1dfc58(10-03) 판의 "크게 다른 내용 사이" 로 되돌렸다 — SEED 의 세기 셋 가운데 강함 하나가 화면 규칙으로 번져 폰이 띠로 도배됐다. 폰 화면을 어떻게 나눌지는 화면 이관 때 화면마다 비교 페이지로 고른다(사용자 결정 — https://claude.ai/artifact/KrXqAymDPz1JKL5AWqdwKS 결정 1 · 3B). "꼭 필요할 때만" · "마지막에는 두지 않는다" 를 8 간격(띠)에도 건다(결정 4B). 코드 예시의 실제 카드사 이름을 지어낸 이름("생활비 카드")으로 바꿨다.

2026-10-03 — SEED Divider 로(옛 Separator 를 대신)제목 링크 복사

사용자가 비교 페이지의 "따라오는 것" 으로 정했다 — 선 하나 stroke-neutral-subtle(SEED 기본과 같은 진하기 — 새 토큰 없이), 반복 줄 사이는 List 규칙, 크게 다른 내용 사이는 선이 아니라 8 간격, 들임 16, 기본은 장식. 옛 Separator(border-default 1px · Radix · decorative 기본)와 DESIGN.md Divider 절(divider-light · divider-dark 1px border-default)을 대신한다 — 옛 스펙은 separator.history/v-pre-seed-display.*. 레시피 이름도 Separator → Divider 로 바꾼다(부르는 곳은 레시피 차례에 옮긴다).

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

• subtle 과 default 가 같은 값 — 웹 index.css:68-69 · 288-289, 앱 app/theme/tokens.dart:230-231 · 324-325 에서 둘 다 #E5E8EF · 다크 #353B4D 라 LedgerDivider subtle(shared/ui/groo/ledger.tsx:103)이 아무것도 바꾸지 않는다. 구분선은 stroke-neutral-subtle 하나로(라이트 1.23 → 1.15).
• 나누는 방법이 제각각 — 웹: Separator 6 · LedgerDivider 5 · 인라인 borderTop/Bottom 48 · border-t/b 52 · divide-y 10 · 1px 높이 div 8 · groo.css 6. 앱: PDivider 26 · 날 Divider 9 · Border(top/bottom) 48 · 세로 1px 6. HR: Separator 10 · 메뉴 구분선 10(#eeeeee 1.16 · 다크 #353535 1.33). 모두 Divider · List 줄 사이 선으로.
• 같은 줄이 화면마다 다르게 나뉜다 — 웹 LedgerRow 가 가계부에서는 선이 없고 할 일 · 메모에서는 들인 선이다(List 규칙으로 맞춘다).
• 스펙끼리 어긋났다 — 옛 separator.md · DESIGN.md 는 border-default(1.23), list.md 의 줄 사이 선은 stroke-neutral-subtle(1.15)이었다. 이제 하나다.