Alert
중요한 정보나 피드백을 사용자에게 전달하는 알림 컴포넌트입니다.
기본
공통 color_* 클래스로 info · success · warning · error 네 가지 의미를 표현합니다.
정보
변경 사항이 저장되었습니다.
성공
요청이 성공적으로 처리되었습니다.
주의
세션이 곧 만료됩니다. 저장해 주세요.
오류
네트워크 연결을 확인해 주세요.
<!-- 정보 -->
<div class="alert color_info" role="alert">
<svg class="alert_icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
<circle cx="12" cy="12" r="10"/>
<path d="M12 16v-4M12 8h.01"/>
</svg>
<div class="alert_body">
<div class="alert_title">정보</div>
<p class="alert_desc">변경 사항이 저장되었습니다.</p>
</div>
</div>
<!-- 성공 -->
<div class="alert color_success" role="alert">
<svg class="alert_icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
<path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/>
<path d="M22 4 12 14.01l-3-3"/>
</svg>
<div class="alert_body">
<div class="alert_title">성공</div>
<p class="alert_desc">요청이 성공적으로 처리되었습니다.</p>
</div>
</div>
<!-- 주의 -->
<div class="alert color_warning" role="alert">
<svg class="alert_icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
<path d="M10.29 3.86 1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"/>
<path d="M12 9v4M12 17h.01"/>
</svg>
<div class="alert_body">
<div class="alert_title">주의</div>
<p class="alert_desc">세션이 곧 만료됩니다. 저장해 주세요.</p>
</div>
</div>
<!-- 오류 -->
<div class="alert color_error" role="alert">
<svg class="alert_icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
<circle cx="12" cy="12" r="10"/>
<path d="m15 9-6 6M9 9l6 6"/>
</svg>
<div class="alert_body">
<div class="alert_title">오류</div>
<p class="alert_desc">네트워크 연결을 확인해 주세요.</p>
</div>
</div>설명만
제목 없이 alert_desc만으로 짧은 메시지를 표시합니다.
새 기능이 추가되었습니다. 설정에서 확인해 보세요.
프로필이 업데이트되었습니다.
<!-- 새 기능이 추가되었습니다. 설정에서 확인해 보세요. -->
<div class="alert color_info" role="alert">
<svg class="alert_icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
<circle cx="12" cy="12" r="10"/>
<path d="M12 16v-4M12 8h.01"/>
</svg>
<div class="alert_body">
<p class="alert_desc">새 기능이 추가되었습니다. 설정에서 확인해 보세요.</p>
</div>
</div>
<!-- 프로필이 업데이트되었습니다. -->
<div class="alert color_success" role="status">
<svg class="alert_icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
<path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/>
<path d="M22 4 12 14.01l-3-3"/>
</svg>
<div class="alert_body">
<p class="alert_desc">프로필이 업데이트되었습니다.</p>
</div>
</div>아이콘 없음
alert_icon을 생략해 텍스트만 표시합니다. 간단한 안내에 적합합니다.
점검 안내
오늘 02:00~04:00 서비스 점검이 예정되어 있습니다.
이 페이지는 데모 목적으로만 사용됩니다.
<!-- 점검 안내 -->
<div class="alert color_warning" role="alert">
<div class="alert_body">
<div class="alert_title">점검 안내</div>
<p class="alert_desc">오늘 02:00~04:00 서비스 점검이 예정되어 있습니다.</p>
</div>
</div>
<!-- 이 페이지는 데모 목적으로만 사용됩니다. -->
<div class="alert color_info" role="alert">
<div class="alert_body">
<p class="alert_desc">이 페이지는 데모 목적으로만 사용됩니다.</p>
</div>
</div>크기
alert_sm · alert_lg로 스케일을 조절합니다.
Small
폼 필드 아래 등 좁은 영역에 사용합니다.
Medium
기본 크기입니다.
Large
페이지 상단 등 눈에 띄는 안내에 사용합니다.
<!-- Small -->
<div class="alert alert_sm color_info" role="alert">
<svg class="alert_icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
<circle cx="12" cy="12" r="10"/>
<path d="M12 16v-4M12 8h.01"/>
</svg>
<div class="alert_body">
<div class="alert_title">Small</div>
<p class="alert_desc">폼 필드 아래 등 좁은 영역에 사용합니다.</p>
</div>
</div>
<!-- Medium -->
<div class="alert color_info" role="alert">
<svg class="alert_icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
<circle cx="12" cy="12" r="10"/>
<path d="M12 16v-4M12 8h.01"/>
</svg>
<div class="alert_body">
<div class="alert_title">Medium</div>
<p class="alert_desc">기본 크기입니다.</p>
</div>
</div>
<!-- Large -->
<div class="alert alert_lg color_info" role="alert">
<svg class="alert_icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
<circle cx="12" cy="12" r="10"/>
<path d="M12 16v-4M12 8h.01"/>
</svg>
<div class="alert_body">
<div class="alert_title">Large</div>
<p class="alert_desc">페이지 상단 등 눈에 띄는 안내에 사용합니다.</p>
</div>
</div>닫기 가능
alert_close 버튼으로 사용자가 알림을 닫을 수 있습니다. aria-label로 닫기 동작을 설명합니다.
새 소식
대시보드가 새롭게 개편되었습니다.
브라우저가 오래되었습니다. 최신 버전으로 업데이트해 주세요.
<!-- 새 소식 -->
<div class="alert color_info" role="alert">
<svg class="alert_icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
<circle cx="12" cy="12" r="10"/>
<path d="M12 16v-4M12 8h.01"/>
</svg>
<div class="alert_body">
<div class="alert_title">새 소식</div>
<p class="alert_desc">대시보드가 새롭게 개편되었습니다.</p>
</div>
<button type="button" class="alert_close" data-ripple aria-label="알림 닫기">
<svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
<path d="M18 6L6 18M6 6l12 12"/>
</svg>
</button>
</div>
<!-- 브라우저가 오래되었습니다. 최신 버전으로 업데이트해 주세요. -->
<div class="alert color_warning" role="alert">
<svg class="alert_icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
<path d="M10.29 3.86 1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"/>
<path d="M12 9v4M12 17h.01"/>
</svg>
<div class="alert_body">
<p class="alert_desc">브라우저가 오래되었습니다. 최신 버전으로 업데이트해 주세요.</p>
</div>
<button type="button" class="alert_close" data-ripple aria-label="알림 닫기">
<svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
<path d="M18 6L6 18M6 6l12 12"/>
</svg>
</button>
</div>액션
alert_actions로 확인·취소 등 후속 동작 버튼을 배치합니다.
저장 실패
변경 사항을 저장하지 못했습니다. 다시 시도해 주세요.
<!-- 저장 실패 -->
<div class="alert color_error" role="alert">
<svg class="alert_icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
<circle cx="12" cy="12" r="10"/>
<path d="m15 9-6 6M9 9l6 6"/>
</svg>
<div class="alert_body">
<div class="alert_title">저장 실패</div>
<p class="alert_desc">변경 사항을 저장하지 못했습니다. 다시 시도해 주세요.</p>
<div class="alert_actions">
<button type="button" class="btn btn_filled btn_sm color_danger">
<span class="btn_label">다시 시도</span>
</button>
<button type="button" class="btn btn_ghost btn_sm">
<span class="btn_label">취소</span>
</button>
</div>
</div>
</div>
<!-- 이용 약관 변경 -->
<div class="alert color_info" role="alert">
<svg class="alert_icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
<circle cx="12" cy="12" r="10"/>
<path d="M12 16v-4M12 8h.01"/>
</svg>
<div class="alert_body">
<div class="alert_title">이용 약관 변경</div>
<p class="alert_desc">2026년 3월 1일부터 새 약관이 적용됩니다.</p>
<div class="alert_actions">
<a href="#" class="link color_primary size_sm">약관 보기</a>
<button type="button" class="btn btn_text btn_sm color_primary">
<span class="btn_label">동의하기</span>
</button>
</div>
</div>
</div>배너
alert_banner로 페이지 상단 전체 너비 알림을 표시합니다. 좌우 테두리와 모서리 반경을 제거합니다.
<div class="alert alert_banner color_warning" role="alert">
<svg class="alert_icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
<path d="M10.29 3.86 1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"/>
<path d="M12 9v4M12 17h.01"/>
</svg>
<div class="alert_body">
<p class="alert_desc">시스템 점검으로 일부 기능이 제한될 수 있습니다.</p>
</div>
<button type="button" class="alert_close" data-ripple aria-label="알림 닫기">
<svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
<path d="M18 6L6 18M6 6l12 12"/>
</svg>
</button>
</div>문맥 속 사용
폼·카드 등 다른 컴포넌트와 함께 사용합니다. 설명 안에 링크를 포함할 수 있습니다.
업데이트 안내
새 버전이 출시되었습니다. 릴리스 노트 보기
<!-- 업데이트 안내 -->
<div class="alert color_info" role="alert">
<svg class="alert_icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
<circle cx="12" cy="12" r="10"/>
<path d="M12 16v-4M12 8h.01"/>
</svg>
<div class="alert_body">
<div class="alert_title">업데이트 안내</div>
<p class="alert_desc">
새 버전이 출시되었습니다.
<a href="#" class="link color_primary size_sm">릴리스 노트 보기</a>
</p>
</div>
</div>
<!-- 이메일 -->
<form class="form_layout" novalidate>
<div class="alert color_error" role="alert">
<svg class="alert_icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
<circle cx="12" cy="12" r="10"/>
<path d="m15 9-6 6M9 9l6 6"/>
</svg>
<div class="alert_body">
<div class="alert_title">입력 내용을 확인해 주세요</div>
<p class="alert_desc">이메일 형식과 비밀번호 조건을 수정한 뒤 다시 시도해 주세요.</p>
</div>
</div>
<div class="form_field">
<label class="form_field-label" for="alert-ex-email">이메일</label>
<input type="email" class="input is-error" id="alert-ex-email" value="invalid-email" aria-invalid="true">
</div>
</form>클래스 · 속성
Nuxt와 Next 컴포넌트가 공통으로 렌더하는 OOCSS 클래스와 라이브 영역 속성입니다. HTML에서는 메시지의 중요도와 상태에 맞는 역할·색상·구조를 직접 조합합니다.
| 클래스 · 속성 | 설명 |
|---|---|
alert | Alert 루트 |
alert_sm · alert_lg | 작은·큰 크기 변형. 기본은 md |
alert_banner | 좌우 테두리와 모서리 반경을 제거한 전체 너비 배너 |
alert_icon | 메시지 의미를 보조하는 아이콘 |
alert_body · alert_title · alert_desc | 본문 영역, 제목과 설명 |
alert_actions | 본문 아래 후속 동작 버튼·링크 영역 |
alert_close | Alert를 숨기는 닫기 버튼 |
color_info · color_success · color_warning · color_error | 정보·성공·주의·오류 의미 색상 |
role="alert" | 즉시 전달해야 하는 중요 메시지의 단정적 라이브 영역 |
role="status" | 작업을 방해하지 않고 전달하는 상태 메시지의 정중한 라이브 영역 |
aria-label | 아이콘 전용 닫기 버튼에 접근 가능한 이름 제공 |
aria-hidden="true" | 장식용 상태 아이콘을 접근성 트리에서 제외 |
hidden | 닫힌 Alert를 화면과 접근성 트리에서 제거 |
data-ripple | 닫기 버튼의 클릭 파장 활성 |
data-ripple="false" · data-no-ripple | 닫기 버튼 또는 Alert 하위 전체의 클릭 파장 비활성 |
click | 닫기와 후속 액션을 처리하는 네이티브 이벤트 |
디자인 토큰
| 토큰 | 기본값 | 설명 |
|---|---|---|
--alert-padding-y · --alert-padding-x · --alert-gap | var(--space-md) · var(--space-lg) · var(--space-md) | 기본 패딩과 내부 간격 |
--alert-font-size · --alert-line-height | var(--text-size-base) · 1.5 | 기본 본문 글자 크기와 줄 높이 |
--alert-title-weight · --alert-title-gap | 600 · var(--space-xs) | 제목 두께와 설명 사이 간격 |
--alert-desc-opacity | 0.85 | 제목이 있는 설명 텍스트 불투명도 |
--alert-icon-size · --alert-icon-offset | 1.25rem · 0.1rem | 기본 아이콘 크기와 수직 정렬 |
--alert-close-size | 1.25rem | 기본 닫기 버튼 크기 |
--alert-actions-gap · --alert-actions-margin-top | var(--space-sm) · var(--space-sm) | 액션 사이와 본문 위 간격 |
--alert-padding-y-sm · --alert-padding-x-sm · --alert-font-size-sm | var(--space-sm) · var(--space-md) · var(--text-size-sm) | 작은 Alert 패딩과 글자 크기 |
--alert-icon-size-sm · --alert-close-size-sm | 1rem · 1rem | 작은 Alert 아이콘과 닫기 크기 |
--alert-padding-y-lg · --alert-padding-x-lg · --alert-font-size-lg | var(--space-lg) · var(--space-xl) · var(--text-size-base) | 큰 Alert 패딩과 글자 크기 |
--alert-icon-size-lg · --alert-close-size-lg | 1.5rem · 1.5rem | 큰 Alert 아이콘과 닫기 크기 |