Menu

구조는 당근 SEED Menu(Apache-2.0)를 따른다 — 메뉴 · 묶음 · 묶음 이름 · 줄(앞 아이콘 · 이름 · 설명 · 뒤 아이콘), 묶음 사이에만 선. 크기는 SEED small 하나다(1280 미만은 Menu Sheet 가 맡는다). 값은 groo 토큰이고, SEED 와 다른 자리는 맨 아래 "SEED 와 다른 점" 에 적었다(2026-10-02 사용자 결정). 옛 Dropdown Menu 를 대신하고, Context Menu · Menubar 는 걷었다.

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

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

아이콘 · 설명 · 묶음 이름 · 위험한 동작 · 막힌 줄을 고르면 스펙대로 그린 메뉴와 그 코드가 바뀐다. 실제로 열고, 키보드로 옮기고, 눌러 닫을 수 있다.

import { Menu, MenuContent, MenuGroup, MenuGroupLabel, MenuItem, MenuTrigger } from "@/components/ui/menu"

<Menu>
  <MenuTrigger asChild>
    <Button variant="ghost" layout="iconOnly" aria-label="점심 식사 더보기">
      <EllipsisVertical />
    </Button>
  </MenuTrigger>
  <MenuContent>
    <MenuGroup>
      <MenuItem icon={<Pencil />} label="수정" onSelect={edit} />
      <MenuItem icon={<Copy />} label="복사해 새로 쓰기" onSelect={duplicate} />
    </MenuGroup>
    <MenuGroup>
      <MenuGroupLabel>정산</MenuGroupLabel>
      <MenuItem icon={<Undo2 />} label="환불 기록" description="돌려받은 돈을 붙여요." onSelect={recordRefund} />
      <MenuItem icon={<Users />} label="나눠 내기" onSelect={splitBill} />
    </MenuGroup>
    <MenuGroup>
      <MenuItem icon={<Trash2 />} label="삭제" tone="critical" onSelect={askDelete} />
    </MenuGroup>
  </MenuContent>
</Menu>

Anatomy제목 링크 복사

부위

Properties제목 링크 복사

줄 · 묶음 · 선제목 링크 복사

줄은 위아래 10 · 좌우 16 이고 이름 14 / 19, 아이콘 18, 아이콘 ↔ 이름 8 이다 — 한 줄이면 39, 설명이 있으면 57. 글이 길면 말줄임 없이 줄을 바꾼다(단어 단위). 메뉴는 위아래 8 을 두고, 묶음 사이는 8 + 선 1 + 8 이다. 선은 좌우 16 들인다.

공통

Tone제목 링크 복사

되돌릴 수 없는 동작(삭제 · 나가기)은 critical — 이름과 아이콘만 빨갛고 설명은 그대로다. 맨 아래 묶음에 따로 둔다.

위험한 동작

State제목 링크 복사

호버와 키보드 포커스를 다르게 그린다 — 마우스가 한 줄 위에 있고 키보드 위치가 다른 줄에 있으면 둘 다 보인다.

알약은 제자리에서 색만 나타나지 않는다 — 마우스를 올리거나 누르면 줄 폭 전체에서 좌우 0 → 8 들어오며 모서리 0 → 12 로 둥글어지고, 색과 함께 150ms 에 끝난다(SEED menu-item 의 pressed marginX x2 · cornerRadius r3, marginDuration · borderRadiusDuration d3). 떠날 때는 거꾸로 펴지며 투명해진다. 키보드 포커스 링은 다 들어온 자리에 고정이라, 들어오는 중인 알약과 잠깐 폭이 다를 수 있다. 2026-10-15 사용자 결정 — 구현 세션 질문 Q-009-3, 안 B(제자리에서 색만 나타나는 안 A 는 고르지 않았다). List 의 누름 바탕 · Searchable List 의 강조 바탕도 같은 움직임이다(들임 6).

상태

모션

Guidelines제목 링크 복사

메뉴에는 실행하는 동작만제목 링크 복사

Menu 는 누르면 바로 실행되는 명령 목록이다. 값을 고르는 일은 메뉴에 두지 않는다 — 메뉴에는 고른 표시(체크 · 라디오)가 없고, 고른 값을 저장하거나 화면에 반영하는 일은 그 값의 컴포넌트가 한다.

줄의 동작 — 목록 줄에는 ⋮ 를 두지 않는다제목 링크 복사

좁은 목록 줄(List 줄 — 한두 줄 글 + 타일 · 값)에는 줄 끝 ⋮ 를 두지 않는다. 줄을 누르면 한 단계 들어간다(상세 · 수정). 그 항목의 동작은 들어간 화면에 둔다.

• 폰 목록의 밀기는 같은 동작의 지름길로 남는다 — 트레이의 동작은 모두 들어간 화면에도 있다.
• 줄에 ⋮ 를 둘 수 있는 건 콘텐츠가 높은 카드의 머리뿐이다 — 사진 · 여러 줄 · 버튼이 든 카드 하나가 항목 하나일 때(Card 의 "머리 동작은 하나"). 지금 담다 화면에는 이런 카드가 없다.
• 수정 · 삭제 아이콘을 줄마다 늘 보이게 늘어놓지 않는다 — 줄마다 버튼이 둘셋씩 늘고, 아이콘만으로는 뜻을 다 전하지 못한다.
• 표 줄은 이 규칙 밖이다 — 데스크톱 데이터 표(Table)의 줄 끝 ⋮ 는 이번에 정하지 않았다. 그루 이음 관리 화면 차례에 다시 보고, 그때까지 table.md 의 지금 문장을 따른다.

당근도 ⋮ 를 콘텐츠가 높은 카드(구매 내역 카드 · 커뮤니티 글)의 머리에만 두고, 모임 목록 같은 좁은 줄에는 두지 않는다 — 한 단계 들어간 화면의 머리 ⋮ 에서 그 항목의 동작을 고른다. 앞의 규칙(2026-10-02 "데스크톱 줄의 동작은 줄 끝 ⋮ + Menu")은 디자인 시스템 그림을 우리 목록에 그대로 붙인 것이었다(2026-10-25 사용자 결정 — 아래 Migration notes).

묶음과 순서제목 링크 복사

가장 많이 쓰는 동작을 위에, 위험한 동작은 맨 아래 묶음에 따로 둔다. 줄이 7개를 넘으면 묶음으로 나눈다 — 선은 묶음 사이에만 긋는다. 묶음 이름은 묶음이 무엇인지 말해야 할 때만 둔다.

• 아이콘은 모든 줄에 두거나 모두 뺀다. 아이콘만 두고 이름을 빼지 않는다.
• 앞 아이콘과 뒤 아이콘을 한 줄에 함께 두지 않는다. 뒤 아이콘은 바깥 링크처럼 방향을 알릴 때만.
• 설명은 이름만으로 무엇을 하는지 모를 줄에만 한 줄로 — 모든 줄에 두지 않는다.

1280 에서 Menu Sheet 로제목 링크 복사

같은 목록이 1280 미만에서는 Menu Sheet 로 뜬다 — 같은 줄 · 같은 순서 · 같은 막힘. 메뉴는 마우스용(줄 39)이고, 손가락으로 누르는 화면은 시트(줄 52)가 맡는다. 코드는 폭을 보고 둘 중 하나를 그리는 ResponsiveMenu 로 짠다.

예외 하나 — 접힌 사이드바(768 ~ 1279)의 하위 목록은 Menu Sheet 로 바꾸지 않고 누른 아이콘 옆 펼침 메뉴(이 표면 · 폭 200 · 줄 44)로 띄운다(Side Navigation — 사용자 결정 2026-10-08).

글제목 링크 복사

이름은 동사로 짧게(2 ~ 6자) — "수정" · "복사해 새로 쓰기" · "삭제". 한 메뉴 안에서는 말투와 형식을 맞추고, 줄임말 · 영어 섞기를 피한다. 설명은 한 줄 문장(해요체 · 마침표)이다 — "새 비밀번호를 메일로 보내요."

코드제목 링크 복사

레시피 recipes/shadcn/components/ui/menu.tsx 를 쓴다(Radix DropdownMenu 위, 비모달). 들어간 화면 머리의 ⋮ 처럼 폭마다 바뀌는 자리는 ResponsiveMenu(1280 이상 Menu · 미만 Menu Sheet)로 짜고, 늘 1280 이상인 자리(데스크톱 표의 줄)만 Menu 를 바로 쓴다. 아래 미리보기는 스펙 값으로 그린 모습이다.

들어간 화면 머리 ⋮ — 1280 에서 Menu Sheet 로 바뀐다제목 링크 복사

메모 목록 줄을 누르면 메모 화면으로 들어가고, 동작이 여럿(고정 · 수정 · 복사 · 삭제)이라 머리 오른쪽 ⋮ 하나에 모은다.

import {
  ResponsiveMenu, ResponsiveMenuContent, ResponsiveMenuGroup, ResponsiveMenuItem, ResponsiveMenuTrigger,
} from "@/components/ui/menu"

// 들어간 화면(메모)의 머리 오른쪽 — 목록 줄에는 ⋮ 를 두지 않는다
<ResponsiveMenu>
  <ResponsiveMenuTrigger asChild>
    <Button variant="ghost" layout="iconOnly" aria-label="주간 회의 메모 더보기">
      <EllipsisVertical />
    </Button>
  </ResponsiveMenuTrigger>
  {/* title — Menu Sheet 의 제목(1280 이상 메뉴에는 머리가 없다) */}
  <ResponsiveMenuContent title="주간 회의 메모">
    <ResponsiveMenuGroup>
      <ResponsiveMenuItem icon={<Pin />} label="고정" onSelect={pin} />
      <ResponsiveMenuItem icon={<Pencil />} label="수정" onSelect={edit} />
      <ResponsiveMenuItem icon={<Copy />} label="복사해 새로 쓰기" onSelect={duplicate} />
    </ResponsiveMenuGroup>
    <ResponsiveMenuGroup>
      {/* 확인이 필요한 동작 — 메뉴가 닫힌 뒤 Alert Dialog 를 연다 */}
      <ResponsiveMenuItem icon={<Trash2 />} label="삭제" tone="critical" onSelect={askDelete} />
    </ResponsiveMenuGroup>
  </ResponsiveMenuContent>
</ResponsiveMenu>

설명 · 막힌 줄 — 데스크톱 표제목 링크 복사

표 줄의 ⋮ 는 "줄의 동작" 규칙 밖이다 — 그루 이음 관리 화면 차례에 다시 정할 때까지 Table 의 지금 문장대로 둔다.

import { Menu, MenuContent, MenuGroup, MenuItem, MenuTrigger } from "@/components/ui/menu"

<Menu>
  <MenuTrigger asChild>
    <Button variant="ghost" layout="iconOnly" aria-label="김하늘 더보기">
      <EllipsisVertical />
    </Button>
  </MenuTrigger>
  <MenuContent>
    <MenuGroup>
      <MenuItem label="수정" onSelect={edit} />
      {/* 설명 — 이름만으로 무엇을 하는지 모를 줄에만 */}
      <MenuItem label="비밀번호 초기화" description="새 비밀번호를 메일로 보내요." onSelect={reset} />
      <MenuItem label="휴가 내역 내보내기" disabled={!hasVacations} onSelect={exportVacations} />
    </MenuGroup>
    <MenuGroup>
      <MenuItem label="삭제" tone="critical" onSelect={askDelete} />
    </MenuGroup>
  </MenuContent>
</Menu>

Behavior제목 링크 복사

Accessibility제목 링크 복사

Do / Don't제목 링크 복사

✅ Do제목 링크 복사

• 목록 줄은 ⋮ 없이 누르면 들어가고, 동작은 들어간 화면에 — 하나(삭제)면 바닥 왼쪽 [삭제], 여럿이면 머리 ⋮ 하나.
• 위험한 동작은 맨 아래 묶음에 critical 로.
• 이름은 동사로 짧게 — 한 메뉴 안에서 말투를 맞춘다.
• 1280 미만에서는 같은 목록을 Menu Sheet 로.

❌ Don't제목 링크 복사

• 값을 고르는 데 메뉴를 쓰기 — 테마는 List 라디오 줄, 정렬 · 보기는 Segmented Control · Select.
• 좁은 목록 줄 끝마다 ⋮ — 줄에 ⋮ 를 둘 수 있는 건 콘텐츠가 높은 카드 머리뿐이다(표 줄은 Table).
• 수정 · 삭제 아이콘을 줄마다 늘 늘어놓기.
• 일부 줄에만 아이콘.
• 메뉴 안에 메뉴(하위 메뉴) · 단축키 표기 · 체크 줄.
• 이름 없는 ⋮.

Specification제목 링크 복사

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

SEED 와 다른 점제목 링크 복사

• 크기는 small 하나 — SEED medium(240 · 줄 46)은 터치 화면용인데, groo 는 1280 미만에서 Menu Sheet 를 쓴다(시트 · 대화상자 결정 1).
• 호버 · 누름 바탕은 불투명한 bg-layer-floating-pressed · 선은 stroke-neutral-subtle — SEED 의 투명도 있는 색(bg.transparent-pressed · stroke.neutral-muted)을 검사기가 받지 않는다(v102). Select 목록과 같다.
• 위험 색은 groo fg-critical — 떠 있는 표면 위 5.06 · 5.27 이라 SEED critical(라이트 3.76)의 대비 문제가 없다.
• 설명 · 묶음 이름은 groo fg-neutral-subtle — 5.50 · 5.27(SEED 3.42).
• 줄은 단어 단위로 줄을 바꾼다(v114) — SEED 는 음절에서도 바꾼다.
• z-index 는 specs/z-index.md 의 L3(z-floating 200) — SEED 99999 는 Alert Dialog 위로 뜬다.
• 1280 에서 Menu Sheet 와 바뀌는 ResponsiveMenu — SEED 는 둘을 따로 쓴다.
• 트리거 끝에 맞춘다 — SEED 기본은 가운데(bottom)라 표 줄 끝 · 머리 오른쪽 ⋮ 의 메뉴가 표 · 화면 밖으로 100 넘게 나간다. groo 는 오른쪽 끝(end)이 기본이다.

Migration notes제목 링크 복사

2026-10-25 — 좁은 목록 줄에서 ⋮ 를 걷는다제목 링크 복사

사용자가 당근 화면 다섯 장을 보고 정했다 — 당근은 ⋮ 를 콘텐츠가 높은 카드(구매 내역 카드 · 커뮤니티 글 — 사진 · 여러 줄 · 버튼)의 머리 옆에만 두고, 좁은 목록 줄(모임 목록)에는 두지 않는다. 좁은 줄은 한 단계 들어간 화면의 머리 ⋮ 에서 동작을 고른다. "디자인 시스템만 보고 우리 목록에 단순하게 붙인 문제" 라 "⋮ 는 목록 줄에서 빼고 대체 길을 준다 — 가계부든 카테고리 설정이든 뭐든". 2026-10-02 결정 중 "데스크톱 줄의 동작은 ⋮ + Menu" · "폰 스와이프는 지름길로 남기고 ⋮ 도" 의 ⋮ 를 목록 줄에서 걷었다 — 그 결정의 나머지(Menu small · 1280 미만 Menu Sheet · 메뉴는 실행만 · 비모달 키보드 …)는 그대로다.

• 규칙 — 목록 줄은 ⋮ 없이 누르면 들어간다. 들어간 화면의 동작이 하나(삭제)면 바닥 왼쪽 [삭제] ghost + critical, 여럿이면 머리 오른쪽 ⋮ → Menu(1280 미만 Menu Sheet). 밀기는 폰 지름길로 남는다. 줄에 ⋮ 를 둘 수 있는 건 콘텐츠가 높은 카드 머리뿐이다.
• 경계 — 데스크톱 데이터 표의 줄 끝 ⋮ 는 정하지 않았다(그루 이음 관리 화면 차례에). 2026-10-22 알림 목록 줄 ⋮(Popover 의 "알림 목록" — 알림 지우기 B)도 이 결정에서 다루지 않아 그대로 둔다.
• 담다 적용 — 가계부(폰 2026-10-24 걷음 · 데스크톱 07-2 도 없음) · 카테고리(줄 ⋮ 를 걷고 수정 시트 머리 ⋮ 에 하위 추가 · 거래 옮기기 · 삭제) · 할 일(⋮ 없음 · 상세 [수정][삭제]) · 할 일 태그(⋮ 없음 · 수정 시트 바닥 [삭제]). 이후 묶음(메모 · 계좌 · 반복 거래 · 프리셋 · 캘린더 관리 …)도 같은 규칙. 아래 2026-10-02 조사의 "→ ⋮ + Menu" · "→ 줄 끝 ⋮ + Menu Sheet" 는 이 규칙으로 읽는다(줄 누름 + 들어간 화면).
• 사이트 그림 — hero · 1280 그림 · 코드 미리보기를 메모 목록 줄 ⋮ 에서 메모 화면 머리 ⋮ 로, 플레이그라운드를 거래 줄 ⋮ 에서 거래 상세 머리 ⋮ 로 다시 그렸고, row-guide 는 맞음 둘(줄은 ⋮ 없이 · 들어간 화면 머리 ⋮) · 피함 둘(줄 끝 ⋮ · 늘 보이는 아이콘)이다. 코드 절 "줄의 ⋮" 를 "들어간 화면 머리 ⋮" 로(그림 id ex-row → ex-header) — 레시피 예제(menu-examples)와 미리보기(build-preview-html)도 같게. 결정 글 — 디자인시스템 세션 decisions/migration-expense.md "줄 끝 ⋮ 원칙". 값 변경 없음.

2026-10-22 — 테마는 List 라디오 줄제목 링크 복사

"설정 값 고르기(테마 · 정렬) → Segmented Control" 이 Segmented Control 문서("폼 · 설정 값이 아니다")와 Select Box 이관 글(테마 = List 라디오 줄)과 어긋났다. 테마는 List 라디오 줄, 정렬 · 보기는 Segmented Control · Select 로 고치고 고르는 표는 Select 의 "고르는 컴포넌트 고르기" 로 링크한다(사용자 결정 1B — https://claude.ai/artifact/SmHD31RQxTjWbfK83nbcym). 사이트 그림 role-guide 의 왼쪽(설정 화면)을 List 라디오 줄로 다시 그렸다.

2026-10-15 — 알약이 들어오며 둥글어진다제목 링크 복사

구현 세션 질문 Q-009-3 — 2026-10-02 결정(1A "좌우 8 들인 알약")은 끝 모습만 정했고 움직임은 묻지 않았다. 사용자가 SEED 처럼 들임 0 → 8 · 모서리 0 → 12 를 150ms 에 들어오게 골랐다(안 B). item.transitionProperty 가 바탕 색만 적고 비고는 "들임 · 모서리가 함께" 라고 적어 한 줄 안에서 어긋나 있던 것도 고쳤다. 웹은 알약을 inset-x-0 · rounded-none 에서 호버 · 누름에 inset-x-x2 · rounded-r3 로 바꾸고 inset · border-radius 도 전환한다(지금은 8 고정 + 색만). 앱은 Menu 가 없다(1280 이상 전용 — Menu Sheet 는 줄 바탕이 묶음 폭 전체라 들임이 없다, SEED menu-sheet-item 도 같다).

2026-10-02 — SEED Menu 로 새로 둔다(옛 Dropdown Menu 를 대신)제목 링크 복사

사용자가 비교 페이지에서 여덟 가지를 모두 SEED 쪽으로 정했다 — Menu small · 1280 미만 Menu Sheet · 데스크톱 줄의 동작은 ⋮ + Menu · 폰 스와이프는 지름길로 남기고 ⋮ 도 · 메뉴는 실행만 · 비모달 키보드 · 쓰지 않는 능력 걷기 · 툴팁은 Help Bubble 모양의 보조. 옛 Dropdown Menu(160 · 줄 32 · 1px 테두리 · 모서리 8, 체크 · 라디오 · 단축키 · 하위 메뉴)는 걷었다 — 옛 스펙은 dropdown-menu.history/v-pre-seed-menu.*. 세 제품 모두 쓰는 곳이 없던 Context Menu · Menubar · Hover Card 도 걷었다(context-menu.history · menubar.history · hover-card.history).

제품은 앱 적용 단계에서 옮긴다(2026-10-02 조사 — Desk 웹 · HR 은 크로미움에 띄워 쟀고, Desk 앱은 위젯 테스트로 쟀다).

• Desk 웹 — 메뉴는 상단 바 테마 메뉴 하나(모달, 지금 값이 어디에도 안 보인다 → 걷고 설정의 Segmented Control 로). 데스크톱 관리 화면 11곳이 줄마다 수정 · 삭제 아이콘을 늘 보이고 그중 6개는 이름 · 툴팁이 없다(→ ⋮ + Menu). 메뉴 초점 표시가 바탕색뿐이라 1.12 · 1.15:1, 위험 항목 다크 3.00. 사이드바 아래 사용자 버튼(⇕)은 메뉴처럼 보이는데 눌러도 아무 일이 없다.
• Desk 앱 — PDropdownMenu 1곳(캘린더 공유 멤버 ⋮ — 이름 없음, 글자 15/600, 막힌 항목이 활성과 같은 색, 긴 이름 말줄임). 앱은 Menu 가 없으므로 이 ⋮ 를 Menu Sheet 로 옮기고 ⋮ 이름은 "{이름} 더보기", PDropdownMenu 는 지운다 — 화면 이관을 기다리지 않고 기초 PR 에서(2026-10-17 사용자 결정 — 03-F 결정 4A).
• HR 웹 — 행 ⋮ 7곳(이름 0/7, 128 폭에서 "비밀번호 초기화" · 영어 이름이 두 줄로 접혀 줄이 32 ↔ 52), 초점 표시 1.06, 위험 3.76. 이동 메뉴 · 빵부스러기 메뉴는 모달, 행 ⋮ 는 비모달로 섞였다. 빵부스러기 … 는 이름이 "More Show more" 이고 16×16. 역할 목록 삭제 버튼은 늘 투명한데 눌린다.
• 앱 적용 때 화면마다 정할 자리 — Desk 앱 캘린더 공유 멤버 ⋮(Menu Sheet + 동사 이름 · 또는 웹처럼 권한 Select + 삭제 버튼), Desk 웹 사용자 버튼(⇕) · HR SpeedDial, HR 접힌 사이드바 · 빵부스러기(2026-10-04 · 10-08 정했다 — 접힌 사이드바의 하위는 1280 미만에서도 Side Navigation 의 펼침 메뉴(이 스펙의 1280 경계의 예외), 빵부스러기는 걷었다).