노티스 (Notice · 인라인 알림)

인라인 알림의 변형과 아이콘을 확인하고, 사용 기준과 적용 방법을 찾아보세요.

CSS 전용 · Web / Mobile · 문서 포맷 시범 적용

Interactive playground

옵션을 바꾸면 미리보기와 코드가 함께 바뀌어요.

미리보기 테마

안내: 비활성 직원은 목록에 보이지 않습니다.

실제 DS CSS 로 렌더해요. 변형(색)과 아이콘(on/off)은 독립된 두 축이라 어느 변형에서도 아이콘을 켜고 끌 수 있어요. 아이콘 색은 변형이 정하므로 아이콘에 색을 직접 주지 마세요. 버튼 배치는 좌우(기본 — 버튼이 오른쪽 끝)와 상하(ds-notice--vertical — 버튼이 아래 줄 전체 폭을 나눔) 둘뿐이에요.

<div class="ds-notice ds-notice--info">
  <span class="ds-ico ds-notice__icon" aria-hidden="true" x-html="$icon('ic-info-circle')"></span>
  <span class="flex-1"><span class="font-medium">안내:</span> 비활성 직원은 목록에 보이지 않습니다.</span>
</div>

아이콘 O

아이콘 X

안내: 비활성 직원은 목록에 보이지 않습니다.

안내: 비활성 직원은 목록에 보이지 않습니다.

경고: 저장하지 않은 변경 사항이 있습니다.

경고: 저장하지 않은 변경 사항이 있습니다.

완료: 권한 요청이 전송되었습니다.

완료: 권한 요청이 전송되었습니다.

반려 사유: 첨부 서류가 누락되었습니다.

반려 사유: 첨부 서류가 누락되었습니다.

변형 4종 × 아이콘 on/off = 8상태를 한 번에 보여줘요. 왼쪽 열이 아이콘을 켠 상태, 오른쪽 열이 끈 상태입니다. info 는 파랑, warning 은 노랑(2026-10-13 부터 — 그전엔 같은 노랑이었어요). 그래도 문구로 한 번 더 구분하세요.

변형info · 안내warning · 경고success · 완료danger · 오류강조 문구본문 아이콘버튼 배치없음좌우 (기본)상하 (ds-notice--vertical)

변형 4종(info · warning · success · danger) 과 아이콘(on/off) 을 골라, 실제 design-system.css의 .ds-notice 규칙으로 렌더된 박스와 같은 조합의 코드를 확인할 수 있습니다. 두 축은 서로 독립이라 8가지 상태가 나오고, 「모아보기」 탭에서 한 번에 볼 수 있어요.

규칙 (강제) · 코딩 에이전트용

Notice 강제 규칙. 상세·미리보기는 아래 본문.

정보성 영역은 notice로 만듭니다 — 새 코드·수정 코드 모두 강제

• 화면 안에서 맥락을 설명하거나 주의를 주는 박스(안내문 · 주의 · 경고 · 오류/반려 사유 · 조건 미충족 알림)는 반드시 .ds-notice + 변형으로 만듭니다. 새 기능이든 기존 화면 수정이든 같습니다.
• 유틸리티로 직접 조합한 틴트 박스 금지 — bg-red-50 border border-red-200 text-red-600 / bg-yellow-50 … rounded-lg px-3 py-2.5 같은 조합으로 알림 박스를 만들지 마세요. 제각각인 크기·간격·색을 한 규격으로 모으는 것이 이 컴포넌트의 존재 이유입니다.
• ⚠️ · ❗ 같은 이모지로 아이콘을 대신하지 마세요 — <svg class="ds-notice__icon"> 를 씁니다. 이모지는 OS·폰트마다 크기와 색이 달라 변형 색과 어긋나고, 크기 규격(16×16)도 못 맞춥니다.
• notice가 아닌 것: 헤더 아래 전체 폭 배너(바 노티스 .ds-bar-notice) · 상태 배지(.ds-label) · 사용자의 결정을 막고 받아야 하는 확인창(모달) · 표 행 하이라이트 · 폼 필드 아래 한 줄 검증 문구(박스 없는 텍스트).
• 레거시는 마이그레이션 대상이지 위반이 아닙니다 — 이미 있는 손조합 박스를 일괄 스윕하지 마세요. 지금 고치고 있는 파일 안에서만 바꿉니다. (2026-07-29 기준 앱 HTML에서 bg-*-50 유틸 조합이 310곳 잡히지만, 그중 상당수는 알림 박스가 아닌 배지·행 하이라이트라 기계적 치환 대상이 아닙니다.)

Notice는 CSS 전용입니다 — 컴포넌트가 없어요.

• 구현은 packages/static/styles/design-system.css의 .ds-notice 블록("Notice / inline alert" 주석으로 시작) 뿐입니다. TS 컴포넌트도, 공유 HTML 파셜도 없습니다. import { Notice } from "@hereby/components" 같은 건 존재하지 않아요 — 마크업을 직접 작성하세요.
• 복제본 없음 — 앱 main.css 어디에도 .ds-notice 재정의가 없습니다. 정본만 고치면 돼요(모달·페이지네이션과 달리 copy trap 없음).

마크업 (강제)

• 변형 클래스는 필수입니다. .ds-notice 단독은 화면에서 사라져요 — 베이스 .ds-notice 블록은 border: 1px solid transparent만 있고 배경·글자색이 없어요. 배경·보더·글자색은 전부 변형이 공급합니다.
• 변형은 4개: --info · --warning · --success · --danger. ⚠️ --error가 아니라 --danger입니다 — .ds-notice--error라고 쓰면 변형이 안 걸려서 투명 박스가 됩니다.
• 아이콘은 독립 축입니다 — 4개 변형 전부에서 켜고 끌 수 있어요(4 변형 × on/off = 8상태). <svg class="ds-notice__icon">(16×16)를 넣으면 켜지고, 빼면 꺼져요. 아이콘 유무는 변형에 종속되지 않습니다 — "info는 아이콘 없음" 같은 규칙은 없어요.
• 아이콘 색은 변형이 결정합니다(각 색군의 -500 톤). 아이콘에 색 유틸을 직접 붙이지 마세요 — 변형이 알아서 칠해요.
• 버튼이 붙는 notice는 본문 .ds-notice__body + 버튼 묶음 .ds-notice__actions로 나눕니다. 배치는 둘뿐이에요 — 기본은 좌우(아이콘·본문·버튼이 한 줄, 버튼은 오른쪽 끝), .ds-notice--vertical을 얹으면 상하(본문 윗줄 · 버튼 아랫줄 전체 폭, 버튼은 폭을 똑같이 나눔). 좁은 자리(모바일 하단 배너)는 상하를 씁니다. flex flex-wrap gap-*·basis-full 같은 배치 유틸을 notice에 직접 붙이지 마세요. 버튼은 DS 버튼(ds-btn …) 그대로입니다. → 버튼 배치
• 세로 정렬은 위 하나입니다. 아이콘은 본문 첫 줄 옆에 붙고, 여러 줄이어도 첫 줄에 남아요. 정렬을 바꾸는 변형은 없습니다 — items-start·items-center 같은 정렬 유틸을 notice에 직접 붙이지 마세요. 헤더 아래 전체 폭 배너(가운데 정렬)는 notice가 아니라 바 노티스입니다.
• 본문 텍스트에 <p>를 쓰지 마세요 — <span>/<div>를 쓰세요. tokens.css의 전역 요소 규칙 p { font-size: var(--typo-b3-size) }(16px)가 .ds-notice의 12px를 이깁니다(요소 규칙이 상속을 이김). 모달의 <p> 구제 규칙은 text-* 클래스를 단 <p>만 살려주므로, notice 안의 맨 <p>는 구제되지 않습니다.

⚠️ 트랩

• --info와 --warning은 시각적으로 완전히 동일합니다 — 배경·보더·글자·아이콘까지 전부 같아요(둘 다 yellow-50/200/700 + 아이콘 yellow-500). 화면에서 안내와 경고가 구분되지 않아요. "안내는 info, 경고는 warning"은 의미상 관례일 뿐 시각적으로 강제되지 않습니다 — 색만으로 경고를 구분하려 하지 말고 문구·아이콘 모양으로 구분하세요. 두 변형을 시각적으로 분리할지는 미결 디자인 과제예요.

언제 쓰나

• Notice = 모달·폼 안쪽의 맥락 안내(흐름을 막지 않음).
• Modal = 사용자의 결정을 막고 받아야 할 때 → 모달 패턴.
• ⚠️ Toast는 아직 구현되지 않았습니다 — --ds-z-toast 토큰(z-index 80)만 있고 .ds-toast CSS도 컴포넌트도 없어요. "toast를 쓰라"는 지시를 따르지 마세요.
• 다크 모드(2026-10-13 · 10-20) — 네 변형의 면 · 테두리 · 글자 · 아이콘은 상태 쌍 토큰(--color-status-{info,warning,success,error}-bg/-border/-fg/-icon)만 읽는다(전엔 yellow-50 등 팔레트 직접). 다크 틴트는 900 이 아니라 상태색 500 을 표면에 16%(면) · 40%(테두리) 섞은 색이고 글자 200 · 아이콘 400 — 10-20 전엔 900/700 이라 출근 완료 안내 · 반려 사유 박스가 화면에서 가장 무거웠다. --info 는 파랑, --warning 은 노랑(D5, 10/19 노랑 되돌림 → 같은 날 파랑 유지). 확인: Playground 「미리보기 테마 → 다크」 모아보기.

모달·폼 내부의 맥락 안내·경고·오류를 한 가지 규격(크기·간격·모양)으로 표시하는 인라인 callout입니다. 기존의 제각각인 bg-yellow-50 border ... / bg-red-50 ... 알림 박스를 대체합니다. 선택적으로 앞에 아이콘(<svg class="ds-notice__icon">)을 둘 수 있습니다.

사용법

<!-- 아이콘 끈 상태 — 아무 변형에서나 가능 (아이콘 span을 빼면 끝) -->
<div class="ds-notice ds-notice--info">
  <span class="flex-1">맥락 안내 문구</span>
</div>

<!-- 아이콘 켠 상태 — 아무 변형에서나 가능. 아이콘 색은 변형이 결정 -->
<div class="ds-notice ds-notice--danger">
  <span class="ds-ico ds-notice__icon" aria-hidden="true" x-html="$icon('ic-exclamation-circle')"></span>
  <span class="flex-1"><span class="font-medium">반려 사유:</span> 첨부 서류가 누락되었습니다.</span>
</div>

아이콘은 레지스트리에서 꺼내 씁니다 — 인라인 <svg>를 직접 그리면 pnpm check:icons가 커밋을 막아요. 래퍼의 ds-ico는 생략하면 안 됩니다(없으면 <span>이 display:inline이라 16×16 규격이 안 걸리고 주입된 <svg>가 컨테이너를 가득 채웁니다). ds-notice__icon은 태그가 아니라 클래스에 걸린 규칙이라 <span>에서도 크기(16×16)와 변형 색이 그대로 적용돼요.

버튼 배치 — 좌우 · 상하

<!-- 좌우(기본) — 넓은 자리. 버튼은 오른쪽 끝, 줄어들지 않는다 -->
<div class="ds-notice ds-notice--info">
  <span class="ds-ico ds-notice__icon" aria-hidden="true" x-html="$icon('ic-refresh')"></span>
  <span class="ds-notice__body">새 버전이 준비되었어요</span>
  <div class="ds-notice__actions">
    <button class="ds-btn ds-btn--line ds-btn--dark ds-btn--md">나중에</button>
    <button class="ds-btn ds-btn--solid ds-btn--primary ds-btn--md">재시작</button>
  </div>
</div>

<!-- 상하 — 좁은 자리(모바일 하단 배너). 본문 위, 버튼 아래 전체 폭을 똑같이 나눈다 -->
<div class="ds-notice ds-notice--warning ds-notice--vertical">
  <span class="ds-ico ds-notice__icon" aria-hidden="true" x-html="$icon('ic-info-circle')"></span>
  <span class="ds-notice__body">지원 버전을 확인하지 못했어요.</span>
  <div class="ds-notice__actions">
    <button class="ds-btn ds-btn--line ds-btn--dark ds-btn--md">나중에</button>
    <button class="ds-btn ds-btn--solid ds-btn--primary ds-btn--md">다시 확인</button>
  </div>
</div>

상하 배치에서 본문과 버튼 사이에 다른 notice(예: 실패 사유 --danger)를 두면 그 notice는 한 줄을 통째로 차지합니다. 줄 간격은 12px입니다. 적용처: 직원 앱 「버전 확인 실패」·「새 버전 준비됨」 배너.

모달 내부에서는 <div>로

텍스트 노드는 <span>/<div>에 둡니다. admin 등 일부 앱은 모달 안에서 legacy p { font-size: 16px }(unlayered) 규칙이 살아 있어 <p>로 감싸면 .ds-notice의 text-b6(12px)가 덮입니다.

적용 현황

• 로그인·계정 화면 전체(공용 signin-form · forgot-password-form · change-password-form · signup-form) — 로그인/인증 실패는 --danger, 인증코드 발송·비밀번호 찾기 안내는 --info, 비밀번호 변경·발송 완료는 --success. 공용 컴포넌트라 8개 앱 로그인 화면에 동시에 적용됩니다
• PermissionDeniedModal — 권한 상세는 --info, 전송 완료는 --success, 요청 실패 에러는 --danger
• 문서 결재 미리보기(team-manager doc-preview) — 반려 사유를 --danger로 표시
• 연차 정책(admin 유형·기준 관리 → 연차 정책) — 정책 안내는 --info, "5인 미만 사업장인데 재직 직원이 5명 이상" 법정 위반 경고는 --danger + 아이콘
• admin 계정 화면(워크스페이스 선택 · 회원가입 · 이메일 인증 · 초대 수락) — 오류를 --danger
• 스케줄 경고 모달(admin·team-manager 근무표 → 경고) — 경고 항목 하나가 --warning 하나. 목록 반복도 notice 로 씁니다
• 병동 설정(근무표 → 병동 설정) — 조직 전체 정책 안내·교대 매핑 안내·교육 정책 안내를 모두 --info
• 치료 인센티브(team-manager) — 치료 항목 미등록 경고를 --warning
• 급여 시트 셀 상세 패널 — 급여명세서 "발송 완료"를 --success
• 직원앱 근무 형태 변경 — 승인 대기 중 안내를 --warning
• 모듈 매니저 — API 연결 실패를 --danger(재시도 버튼은 notice 밖에 둡니다)
• 휴직/복직 처리 안내 등 모달 내 안내문 — --info / --success

변형

각 색군의 -50 배경 + -200 보더 + -700 글자, 아이콘은 -500으로 통일돼 있습니다.

변형(색)과 아이콘(on/off)은 독립된 두 축이에요. 아래 "아이콘" 열은 아이콘을 넣었을 때 칠해지는 색이고, 어느 변형이든 아이콘을 빼면 아이콘 없는 상태가 됩니다.

변형	용도	배경 / 보더 / 글자	아이콘 (넣었을 때)
.ds-notice--info	안내(정보)	yellow-50 / yellow-200 / yellow-700	yellow-500
.ds-notice--warning	경고	yellow-50 / yellow-200 / yellow-700	yellow-500
.ds-notice--success	완료·긍정	green-50 / green-200 / green-700	green-500
.ds-notice--danger	오류·반려	red-50 / red-200 / red-700	red-500

규격

속성	값 (토큰)
padding	10px 12px
border	1px solid (변형별 -200)
radius	var(--radius-4)
font-size	var(--text-b6) (12px)
gap (아이콘↔본문)	8px
아이콘 크기	16 × 16, margin-top: 1px
세로 정렬	align-items: flex-start (아이콘은 첫 줄 옆)

단일 출처

스타일	packages/static/styles/design-system.css (.ds-notice · .ds-notice__icon · --info/--warning/--success/--danger)

변경 이력

전체 이력은 변경 이력 참고. 최근:

• 2026-07-29 — 정보성 영역은 notice 사용을 강제로 승격. 유틸 조합 틴트 박스·이모지 아이콘 금지 규칙을 명시하고, 연차 정책의 5인 미만 경고 박스를 --danger + 아이콘으로 전환.
• 2026-06-24 — .ds-notice--danger 변형 신설(오류·반려). 문서 결재 미리보기 반려 사유 + 권한 모달 에러의 임시 red 토큰 조합을 표준 변형으로 정규화.