Callout

구조는 당근 SEED Callout(Apache-2.0)을 따른다 — 옅은 톤 바탕 · 아이콘 · 제목 · 본문 · 링크가 한 문단, 상호작용 셋(보이기 · 전체 누르기 · 닫기). 값은 groo 토큰이고, SEED 와 다른 자리는 맨 아래 "SEED 와 다른 점" 에 적었다(2026-10-02 사용자 결정). 옛 Alert(왼쪽 4px 막대) 스펙을 대신한다 — "Alert" 라는 이름은 모달(Alert Dialog)에만 쓴다.

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

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

톤 · 상호작용 · 제목 · 링크를 고르면 스펙대로 그린 상자와 그 코드가 바뀐다. 실제로 누르고 닫을 수 있다.

import { Callout } from "@/components/ui/callout"

<Callout tone="informative" title="안내" link={{ label: "자세히", href: "/guide" }}>
  국내 주식은 15분 늦은 시세예요.
</Callout>

Anatomy제목 링크 복사

부위

Properties제목 링크 복사

상자제목 링크 복사

안쪽 14 · 최소 50 · 모서리 10 · 아이콘 16 · 사이 12. 제목 · 본문 · 링크는 모두 14 / 19 이고 한 문단으로 흐른다 — 제목은 700, 사이는 띄어쓰기 두 칸, 링크는 밑줄. 여러 줄이면 아이콘 · 화살표 · 닫기는 상자 가운데에 선다.

공통

Tone제목 링크 복사

다섯 — neutral(일반) · informative(정보 · 가이드 · 팁) · positive(성공 · 혜택) · warning(주의 · 미리 알릴 문제) · critical(오류 · 바로 조치할 일). 바탕은 옅은 톤(bg-*-weak), 글 · 아이콘 · 링크 · 화살표 · 닫기는 모두 같은 fg-*-contrast 색이다.

톤

Interaction제목 링크 복사

display(보이기만 — 링크를 둘 수 있다) · actionable(상자 전체가 버튼 — 뒤 화살표, 링크는 두지 않는다) · dismissible(닫기 버튼 — 한 번 보면 되는 안내에만).

상호작용

State제목 링크 복사

상태

모션

Guidelines제목 링크 복사

어디에 두나제목 링크 복사

다른 알림(Snackbar · Page Banner · Result Section · Alert Dialog)과 고르는 표 · 다섯 부품 견주기는 Snackbar 의 "무엇으로 알리나" 한 벌이다(2026-10-22 사용자 결정 3B · 2B — https://claude.ai/artifact/NuEPiLRH2fJidXdKzcDsCX). 몰라도 일은 할 수 있는 긴 설명은 Help Bubble(ⓘ), 입력값 하나가 틀리면 Field 의 오류 문구(칸 아래)다.

닫기는 한 번 보면 되는 안내에만제목 링크 복사

새 기능 소개처럼 한 번 읽으면 되는 안내만 닫을 수 있게 한다 — 닫은 뒤 같은 안내를 다시 띄우지 않는다(닫음을 기억한다). 경고 · 오류는 닫지 못한다 — 문제가 남아 있는 동안 보여야 한다.

링크와 전체 누르기제목 링크 복사

링크는 보조 내용(자세히 · 약관)으로 갈 때만 쓴다 — 행동을 이끌려고 링크를 두지 않는다. 눌러서 어딘가로 가는 게 상자의 목적이면 상자 전체를 누르게(actionable) 하고 링크는 두지 않는다.

본문 아래 버튼제목 링크 복사

되돌릴 수 있는 할 일이 있는 안내(환불 취소 · 다시 받기)는 본문 아래에 버튼 줄을 둔다(interaction: display 그대로). 본문 ↔ 버튼 8 · 버튼 사이 8 · neutralOutline small. 본문이 여러 줄이면 앞 아이콘은 가운데에 맞춘다. 폼 저장 실패 Callout 은 본문 맨 위에 두고 아래 20 을 띄우며, 끝 흐림을 켠 시트에서는 흐림 아래로 오게 스크롤한다.

글제목 링크 복사

제목은 성격을 나타내는 짧은 말 — "안내" · "주의" · "새 기능". 본문은 제목을 되풀이하지 않고 해요체 문장에 마침표. 오류는 무엇이 안 됐는지와 할 수 있는 일까지 — "저장하지 못했어요. 입력한 내용은 그대로 있어요. 잠시 뒤 다시 저장해 주세요." 서버가 보낸 글 · 영어 · 코드를 그대로 쓰지 않는다.

코드제목 링크 복사

레시피 recipes/shadcn/components/ui/callout.tsx 를 쓴다. 아래 미리보기는 스펙 값으로 그린 모습이다.

보이기 — 안내 · 링크제목 링크 복사

import { Callout } from "@/components/ui/callout"

<Callout tone="informative" title="안내" link={{ label: "자세히", href: "/guide/import" }}>
  가져온 데이터는 기존 거래에 더해지고 덮어쓰지 않아요.
</Callout>

저장 실패 — 폼 맨 위제목 링크 복사

{/* 나중에 나타나는 경고 · 위험은 보조 기술에 알린다(role="alert") */}
{saveError && (
  <Callout tone="critical" role="alert">
    저장하지 못했어요. 입력한 내용은 그대로 있어요. 잠시 뒤 다시 저장해 주세요.
  </Callout>
)}

전체 누르기 · 닫기제목 링크 복사

<Callout tone="neutral" interaction="actionable" onClick={openBrokerConnect}>
  토스증권을 연결하면 보유 주식이 자산에 더해져요.
</Callout>

{/* 한 번 보면 되는 안내 — 닫으면 다시 띄우지 않는다 */}
<Callout tone="informative" title="새 기능" interaction="dismissible" open={!seen} onDismiss={markSeen}>
  반복 거래를 자동으로 기록할 수 있어요.
</Callout>

Behavior제목 링크 복사

Accessibility제목 링크 복사

Do / Don't제목 링크 복사

✅ Do제목 링크 복사

• 그 내용 바로 위에, 그 기능의 안내만.
• 저장 실패는 폼 맨 위 critical — 폼은 연 채로.
• 눌러서 가는 안내는 상자 전체를 누르게.

❌ Don't제목 링크 복사

• 경고 · 오류를 닫을 수 있게.
• 링크로 행동을 이끌기.
• 페이지 전체의 상태를 Callout 으로 — Page Banner.
• 한 화면에 Callout 여럿을 쌓기 — 되도록 가장 중요한 하나를 두고, 나머지는 그 내용 옆(칸 설명 · 줄 설명)으로.

Specification제목 링크 복사

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

SEED 와 다른 점제목 링크 복사

• 톤은 다섯 — magic(AI)은 groo 에 AI 기능이 없어 두지 않는다.
• 아이콘은 lucide 선 아이콘(v106) — SEED 는 채운 아이콘을 권한다.
• 나중에 나타나는 경고 · 위험은 role="alert" — SEED 는 역할이 없어 알리지 않는다.
• 버튼은 모두 type="button" — SEED 링크 · 닫기에는 없어 폼 안에서 제출된다.
• 닫기 버튼의 누름 바탕은 톤의 누름 색(bg-*-weak-pressed) — SEED 투명 누름 색의 불투명 짝.

Migration notes제목 링크 복사

2026-10-22 — 여럿을 쌓지 않도록 — 갈 곳을 붙였다제목 링크 복사

Don't "한 화면에 Callout 여럿을 쌓기"(420ae4e — 10-02 알림 비교 페이지에 없다)에 대안을 붙여 권장으로 낮췄다 — 가장 중요한 하나를 두고 나머지는 칸 설명 · 줄 설명으로(남은 규칙 R10). 사용자 결정 — https://claude.ai/artifact/Mag1tEv51MdQHdy1o8hY3L. 값 변경 없음.

2026-10-22 — 알림 고르는 표는 한 벌제목 링크 복사

"어디에 두나" 표의 다른 부품 줄(Page Banner · Snackbar · Help Bubble · Field)을 걷고 Callout 줄만 남겨, 고르는 표 · 다섯 부품 견주기는 Snackbar 문서 한 벌로 링크한다(3B). 시트 · 대화상자가 열린 채 봐야 할 결과는 그 안 Callout 이라는 줄을 더했다(2B) — 사용자 결정 https://claude.ai/artifact/NuEPiLRH2fJidXdKzcDsCX. 값 변경 없음.

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

사용자가 비교 페이지에서 정했다 — 옅은 톤 바탕 · 모서리 10 · 한 문단 · 톤 다섯 · 닫기는 한 번 보면 되는 안내만, 저장 실패는 폼 맨 위 Callout. 옛 Alert(왼쪽 4px 막대 · 8% 바탕 · 제목 블록)는 걷었다 — 옛 스펙은 alert.history/v-pre-seed-feedback.*.

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

• Desk 웹 — 공용 Alert 2곳 + 손으로 만든 안내 상자 31(경고 · 위험을 일곱 가지로 그린다). 정의 없는 색 토큰(--fg-danger · --bg-danger-subtle …) 11곳이 회색으로 보이고, 저축 목표 오류 상자는 다크 값이 없다. 화면 소개 카드 넷이 바로 위 머리와 같은 말을 되풀이한다. 만료된 "2026.6까지" 수수료 안내.
• Desk 앱 — PAlert 5(왼쪽 4px 막대) + 손 상자 20여. 예산 한도 초과를 위험 색으로, 같은 카드 유의사항을 두 모양으로 그린다. 인라인 상자에 보조 기술 알림이 없다.
• HR 웹 — shadcn Alert 2 + 손 상자 10여. 결재 안내 상자 셋이 번역 키를 그대로 보인다(application.autoApprovalMessage …), 반복 부여 안내에 영어 코드(YEARLY · MONTHLY).