바 노티스 (Bar notice)

헤더 바로 아래에 전체 폭으로 붙는 띠 알림입니다. 진행 중인 일을 알리고 이어서 하게 하는 자리예요(예: admin 대시보드 「직원 앱 도입」 진행률).

CSS 전용 · Web

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

notice가 아닙니다. 노티스는 모달·폼 안쪽의 인라인 알림이고, 바 노티스는 헤더 아래 전체 폭입니다. 헤더 아래 띠를 ds-notice + rounded-none border-x-0 로 흉내 내지 마세요.
선 없음 · 모서리 없음 · 상하 가운데 — notice와의 차이입니다. 마크업에 border-* · rounded-* · items-* 를 붙이지 마세요.

축은 서로 독립입니다 — 색 · 글자 크기 · 아이콘 · 버튼 · 닫기 · 배치.

색(필수): --info · --warning · --success · --danger. 베이스 .ds-bar-notice 만으로는 배경·글자색이 없어요. 색군은 notice와 같습니다(-50 배경 · -700 글자 · 아이콘 -500).
글자 크기: 기본 12(b6) · --md 13(b5) · --lg 14(b4). 버튼 크기는 바꾸지 않아요.
아이콘: .ds-bar-notice__icon(16×16)을 넣으면 켜지고 빼면 꺼져요. 색은 변형이 줍니다.
버튼: .ds-bar-notice__actions 안에 DS 버튼 최대 3개. 없으면 묶음째 뺍니다. 첫 번째가 주 동작입니다.

주 동작 버튼 색은 띠 색을 따라갑니다(2026-10-21) — ds-btn--primary(주황)를 쓰지 마세요(사용자 결정). 색 짝은 아래 하나뿐이고, 띠 색을 바꾸면 버튼 색도 함께 바꿉니다. 보조 버튼은 ds-btn--line ds-btn--dark, 닫기(X)는 ds-btn--icon ds-btn--muted 그대로입니다.

띠	주 동작 버튼
`--info`	`ds-btn--purple` (테두리 `--line` · 채움 `--solid`)
`--success`	`ds-btn--green` (테두리 · 채움)
`--danger`	`ds-btn--red` (테두리 · 채움)
`--warning`	`ds-btn--yellow` (테두리 · 채움)

닫기(X): .ds-bar-notice__close 를 단 DS 아이콘 버튼. 배치와 상관없이 윗줄 오른쪽 끝입니다.
배치: 기본 좌우(버튼이 본문 오른쪽) · --vertical 상하(버튼 묶음이 본문 아래 줄로, 아이콘이 있으면 본문 시작선에 맞춤). :has() 금지라 CSS가 스스로 고르지 않아요 — 좁은 자리에서 마크업이 --vertical 을 켭니다.

본문은 .ds-bar-notice__body 에 넣고 <p> 를 쓰지 마세요 — 전역 p 규칙(16px)이 글자 크기를 이깁니다.
다크 모드(2026-10-13 · 10-20) — --info · --warning · --success · --danger 의 면 · 글자 · 아이콘은 notice 와 같은 상태 쌍 토큰을 읽는다. 다크 틴트는 상태색 500 을 표면에 16% 섞은 색(10-20, 전 900 — 관리자 앱 「직원 앱 도입」 남색 띠가 화면에서 가장 튀었다). 띠 안에 팔레트 색을 쓰지 않는다. 확인: Playground 「미리보기 테마 → 다크」.

직원 앱 도입 — 체크리스트 1/7 단계 · 첫 로그인 0% (목표 80%)

실제 DS CSS 로 렌더해요. 색 · 글자 크기 · 아이콘 · 버튼 개수 · 닫기 · 배치는 서로 독립이에요. 버튼은 최대 3개, 닫기(X)는 배치와 상관없이 늘 윗줄 오른쪽 끝입니다. 상하(ds-bar-notice--vertical)는 버튼 묶음이 본문 아래 줄로 내려가 본문 시작선에 맞춰요.

<div class="ds-bar-notice ds-bar-notice--info">
  <span class="ds-ico ds-bar-notice__icon" aria-hidden="true" x-html="$icon('ic-list-check')"></span>
  <span class="ds-bar-notice__body"><b>직원 앱 도입</b> — 체크리스트 1/7 단계 · 첫 로그인 0% (목표 80%)</span>
  <div class="ds-bar-notice__actions">
    <button type="button" class="ds-btn ds-btn--line ds-btn--purple ds-btn--sm">이어서 하기</button>
  </div>
  <button type="button" class="ds-bar-notice__close ds-btn ds-btn--icon ds-btn--muted ds-btn--sm" aria-label="닫기">
    <span class="ds-ico w-3.5 h-3.5" aria-hidden="true" x-html="$icon('ic-close')"></span>
  </button>
</div>

info · 안내 — 한 줄 요약 문구

warning · 경고 — 한 줄 요약 문구

success · 완료 — 한 줄 요약 문구

danger · 오류 — 한 줄 요약 문구

sm · 12 (기본) — 글자 크기 변형

md · 13 — 글자 크기 변형

lg · 14 — 글자 크기 변형

상하 배치 — 버튼 묶음이 아래 줄로 내려가요

색 4종 · 글자 크기 3단계 · 상하 배치(버튼 3개)를 한 번에 보여줘요. 주 동작 버튼은 띠 색을 따라가요(info 보라 · warning 노랑 · success 초록 · danger 빨강).

마크업

html

<div class="ds-bar-notice ds-bar-notice--info">
  <span class="ds-ico ds-bar-notice__icon" aria-hidden="true" x-html="$icon('ic-list-check')"></span>
  <span class="ds-bar-notice__body"><b>직원 앱 도입</b> — 체크리스트 1/7 단계</span>
  <div class="ds-bar-notice__actions">
    <button type="button" class="ds-btn ds-btn--line ds-btn--purple ds-btn--sm">이어서 하기</button>
  </div>
  <button type="button" class="ds-bar-notice__close ds-btn ds-btn--icon ds-btn--muted ds-btn--sm" aria-label="닫기">
    <span class="ds-ico w-3.5 h-3.5" aria-hidden="true" x-html="$icon('ic-close')"></span>
  </button>
</div>

규격

속성	값
폭	부모 전체 폭
padding	`10px 12px`
border · radius	없음
세로 정렬	`align-items: center`
gap	`8px` (상하 배치의 줄 간격도 8)
font-size	기본 `var(--text-b6)` 12 · `--md` `var(--text-b5)` 13 · `--lg` `var(--text-b4)` 14
아이콘	`16 × 16`, 색은 변형의 `-500`
버튼	최대 3개, DS 버튼 그대로 · 주 동작 색 = 띠 색(info purple · success green · danger red · warning yellow), `ds-btn--primary` 금지

notice와 비교

	노티스 `.ds-notice`	바 노티스 `.ds-bar-notice`
자리	모달·폼 안쪽	헤더 바로 아래, 전체 폭
선 · 모서리	1px 테두리 · 4px	없음
세로 정렬	위(아이콘이 첫 줄 옆)	가운데
글자 크기	12 고정	12 · 13 · 14
닫기(X)	없음	on/off

적용 현황

admin 대시보드 「직원 앱 도입」 진행률 배너 (apps/admin/src/views/dashboard.html) — info · 12 · 아이콘 · 버튼 1개(line purple) · 닫기 · 좌우
직원 앱 「불편·기능 신고」 띠 (apps/employee-app/src/views/screenshot-report-bar.html) — info · 13 · 버튼 1개(solid purple) · 닫기 · 좌우

단일 출처

packages/static/styles/design-system.css 의 .ds-bar-notice 블록("Bar notice" 주석으로 시작)뿐입니다.

바 노티스 (Bar notice) ​

마크업 ​

규격 ​

notice와 비교 ​

적용 현황 ​

단일 출처 ​

바 노티스 (Bar notice)

마크업

규격

notice와 비교

적용 현황

단일 출처