본문 바로가기
Design System
홈페이지

Components · 컨테이너

Callout · Alert (콜아웃·상태 알림)

페이지에 상주하는 보조 설명(Callout)과 의미별 상태 메시지(Alert 4종). 의미는 색과 텍스트로 함께 전달한다.

정의

페이지에 상주하며 보조 설명이나 상태 메시지를 색과 텍스트로 함께 전달하는 컴포넌트다.

Anatomy

i 인증 안내 GREENGUARD GOLD · KC 인증 ① 좌측 바 ② 아이콘 ③ 본문
부위토큰
① 좌측 바의미 색 --color-state-{종류}-solid(4px) — 텍스트와 병행(색맹 대비)
② 아이콘(선택)라인 SVG, stroke=--color-state-{종류}-fg, aria-hidden
③ 본문배경 --color-state-{종류}-bg · 글자 --color-state-{종류}-fg · 패딩 --callout-pad

변형

변형용도
Callout중립 톤 보조 설명·팁(의미 색 없음)
Alert · info안내·인증 사실 전달
Alert · success완료·통과 확인
Alert · warning주의·조건부(동절기 시공 등)
Alert · danger오류·금지 표현 경고

상태

종류좌측 바(solid)배경(bg)글자(fg)
Callout--callout-border--callout-bg--color-text-secondary
info--color-state-info-solid--color-state-info-bg--color-state-info-fg
success--color-state-success-solid--color-state-success-bg--color-state-success-fg
warning--color-state-warning-solid--color-state-warning-bg--color-state-warning-fg
danger--color-state-danger-solid--color-state-danger-bg--color-state-danger-fg

Do / Don't

Do
  • 색과 텍스트를 함께 쓴다 — 색을 못 보는 사용자도 제목·아이콘·문구로 의미를 안다.
  • warning·danger에는 무엇을 어떻게 해야 하는지 행동을 함께 안내한다.
  • 상시 안내는 Callout·Alert, 저장·발행 같은 순간 피드백은 Toast로 구분한다.
Don't
  • 의미를 좌측 바 색만으로 전달하지 말 것 — 색맹 사용자에게 사라진다.
  • 한 화면에 danger를 여러 개 띄우지 말 것 — 경고가 흔해지면 무시된다.
  • 긴 여러 문단을 넣지 말 것 — 핵심 1~2문장, 상세는 Link로 위임한다.

콘텐츠 규칙

  • 제목(선택)은 상태를 요약하는 명사구("인증 안내", "시공 주의").
  • 본문은 1~2문장, danger·warning은 원인 + 행동("… 금지어입니다. 다른 표현으로 바꾸세요").
  • 인증 사실은 정본대로만 적는다("GREENGUARD GOLD(UL 2818)·KC" — 'KS'·'환경부 인증' 표기 금지).
  • 아이콘만으로 의미를 대신하지 않는다(아이콘 + 텍스트).

키보드 인터랙션

해당 없음 — 정적 안내 요소는 포커스를 받지 않는다. 안에 링크·닫기 버튼을 둘 경우에만 그 요소가 각 컴포넌트(Link·Button) 규칙대로 포커스를 받는다.

접근성

  • Alert에는 role="status"(정보성) 또는 role="alert"(경고·즉시성)를 준다.
  • 의미는 색 + 텍스트 + 아이콘 3중으로 전달한다 — 각 -fg on -bg 조합은 AA 확보값.
  • 장식 아이콘은 aria-hidden="true"(의미는 텍스트가 전달). 기준: ../guidelines/accessibility.md.

코드

디자인구독은 매월 필요한 만큼만 신청할 수 있습니다.

인증 안내

GREENGUARD GOLD(UL 2818)·KC 인증 친환경 노면표시재입니다.

시공 주의

노면 온도가 낮은 동절기에는 시공 일정을 협의해 주세요.

html
<div class="pi-callout">
  <span class="pi-callout__bar" aria-hidden="true"></span>
  <p class="pi-callout__body">디자인구독은 매월 필요한 만큼만 신청할 수 있습니다.</p>
</div>

<div class="pi-alert pi-alert--info" role="status">
  <span class="pi-alert__bar" aria-hidden="true"></span>
  <div class="pi-alert__body">
    <strong class="pi-alert__title">인증 안내</strong>
    <p class="pi-alert__text">GREENGUARD GOLD(UL 2818)·KC 인증 친환경 노면표시재입니다.</p>
  </div>
</div>

<div class="pi-alert pi-alert--warning" role="status">
  <span class="pi-alert__bar" aria-hidden="true"></span>
  <div class="pi-alert__body">
    <strong class="pi-alert__title">시공 주의</strong>
    <p class="pi-alert__text">노면 온도가 낮은 동절기에는 시공 일정을 협의해 주세요.</p>
  </div>
</div>

<div class="pi-alert pi-alert--danger" role="alert">
  <span class="pi-alert__bar" aria-hidden="true"></span>
  <div class="pi-alert__body">
    <strong class="pi-alert__title">발행 중단</strong>
    <p class="pi-alert__text">허용되지 않는 표현이 있어 발행을 중단했습니다. 표현을 수정한 뒤 다시 시도하세요.</p>
  </div>
</div>
css
.pi-callout,
.pi-alert {
  position: relative;
  display: flex;
  gap: var(--space-3);
  padding: var(--callout-pad);
  padding-left: var(--space-5);
  border-radius: var(--callout-radius);
  word-break: keep-all;
}
.pi-callout__bar,
.pi-alert__bar {
  position: absolute; left: 0; top: 0; bottom: 0;
  width: var(--space-1);
  border-radius: var(--callout-radius) 0 0 var(--callout-radius);
}
.pi-callout { background: var(--callout-bg); color: var(--color-text-secondary); }
.pi-callout__bar { background: var(--callout-border); }
.pi-callout__body { margin: 0; font: var(--text-body-sm); }

.pi-alert__title { display: block; font-size: var(--font-size-sm); font-weight: var(--font-weight-bold); }
.pi-alert__text { margin: var(--space-1) 0 0; font: var(--text-body-sm); }

.pi-alert--info { background: var(--color-state-info-bg); color: var(--color-state-info-fg); }
.pi-alert--info .pi-alert__bar { background: var(--color-state-info-solid); }
.pi-alert--success { background: var(--color-state-success-bg); color: var(--color-state-success-fg); }
.pi-alert--success .pi-alert__bar { background: var(--color-state-success-solid); }
.pi-alert--warning { background: var(--color-state-warning-bg); color: var(--color-state-warning-fg); }
.pi-alert--warning .pi-alert__bar { background: var(--color-state-warning-solid); }
.pi-alert--danger { background: var(--color-state-danger-bg); color: var(--color-state-danger-fg); }
.pi-alert--danger .pi-alert__bar { background: var(--color-state-danger-solid); }

Changelog

날짜변경
2026-07-15문서 계약(10섹션) 적용 — Callout·Alert 통합 문서화, Anatomy 도해·상태 토큰 매트릭스·색+텍스트 병행 원칙·코드 신설, 기존 규격 승계