가장 급한 것은 가장 위로

KRDS DS-097 — 긴급 공지의 계층을 최상단에 배치하고 있다.

0. 들어가며 — 디자인 스타일의 여섯 번째 분류, ‘엘리베이션’

색상·타이포·형태·레이아웃·아이콘을 마치고, 이번엔 여섯 번째 분류 — 엘리베이션(10개 규칙) 입니다. 18·19편에서 본 ’깊이(고도)’를 본격적으로 다루는 영역이죠. 화면 요소들이 어느 것이 위에, 어느 것이 아래에 있는지(z축 계층)와 그림자·딤드 효과를 규정합니다.

그 첫 주제는 긴급 공지의 계층 — 최상단 배치입니다. 화면에는 여러 층위의 요소가 겹칩니다(배경→콘텐츠→모달→ 알림). 그중 긴급 공지(시스템 장애, 재난 안내 등)는 가장 중요하므로 가장 위층에 배치해야 하죠. 이번 편은 계층 우선순위의 시작을 풀어냅니다.

1. 규칙 원문 — 최상단 배치

DS-097 (디자인 스타일 > 엘리베이션) “긴급 공지의 계층을 최상단에 배치하고 있다.”

긴급 공지를 화면의 가장 위층(최상단 z축) 에 배치하라는 뜻입니다.

정리: 긴급 공지는 화면 계층의 최상단에 배치하라. 이게 DS-097입니다.

2. 왜 최상단인가 — 긴급성과 가시성

긴급 공지는 사용자가 무엇보다 먼저, 반드시 봐야 하는 정보입니다 — 시스템 장애, 서비스 중단, 재난 안내, 보안 경고 등. 이런 정보가 다른 요소(모달·콘텐츠) 뒤에 가려지면, 사용자가 못 보고 지나치죠. 그래서 긴급 공지는 화면의 가장 위층에 배치해, 어떤 요소보다 앞에 보이게 합니다.

계층(z축)은 18편(고도)에서 봤듯 ’무엇이 더 중요하고 주목해야 하는가’를 공간으로 표현합니다. 가장 위에 뜬 것이 가장 중요하죠. 긴급 공지를 최상단에 두는 것은, 그것이 화면에서 가장 우선되는 정보임을 계층으로 선언 하는 것입니다. 모달이 떠 있어도, 그 위에 긴급 공지가 보여야 사용자가 위급 상황을 인지하고 대응할 수 있습니다.

특히 공공서비스에서 긴급 공지는 안전·권리와 직결됩니다 — “서비스 점검으로 신청이 중단됩니다”, “재난 경보” 같은 정보를 놓치면 사용자가 손해를 보거나 위험에 처할 수 있죠. 그래서 긴급 공지의 최상단 배치는 단순한 디자인이 아니라 사용자 보호의 문제입니다. 가장 급한 것을 가장 위에 두는 것 — 계층 우선순위의 가장 기본 원칙입니다.

3. 점검 / 개선

무엇을 점검하나

최상단 배치 — 긴급 공지가 다른 요소(모달 등)보다 위에 보이는가.

가시성 — 긴급 공지가 가려지지 않는가.

Before / After

/* ✅ 긴급 공지 최상단 */ .urgent-notice { position: fixed; z-index: 9999; top: 0; } /* 가장 위층 */

4. 누가 담당하나 / 우리 사이트에 해당될까?

역할	책임
디자이너	긴급 공지 계층 설계
퍼블리셔/개발	z-index 최상단 구현

기관 유형	DS-097 적용
중앙행정기관(대표·운영) / 공공기관 / 지자체	✅ 필수 (긴급 공지 사용 시)

긴급 공지를 쓰는 사이트 = 해당.

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 긴급 공지가 다른 요소보다 위에 보이나요?

□ 모달이 떠 있어도 긴급 공지가 보이나요?

□ 긴급 공지가 가려지지 않나요?

❓ FAQ

Q1. 모달보다도 위인가요? 네. 긴급 공지는 화면에서 가장 우선되는 정보라, 모달 등 어떤 요소보다 위에 보여야 합니다. Q2. 일반 공지도 최상단인가요? 긴급 공지에 한정됩니다. 일반 공지는 콘텐츠 흐름 안에 배치합니다. 긴급성에 따라 계층이 다릅니다. Q3. KRDS를 채택하면 자동인가요? KRDS 긴급 공지(Critical alerts) 컴포넌트는 최상단 계층으로 설계돼 있습니다.

6. 마무리

DS-097의 메시지:

가장 급한 것(긴급 공지)은 가장 위층에 — 계층으로 우선순위를 선언한다.

긴급 공지는 사용자가 반드시 먼저 봐야 하는 정보라, 어떤 요소보다 위에 배치해 가려지지 않게 합니다. 계층(z축)이 중요도를 공간으로 표현하는 원리(18편)의 가장 기본 적용이죠. 공공서비스에서 이는 사용자 보호의 문제입니다.

다음 편은 셀렉트 레이어 계층을 다룹니다. DS-098 — “셀렉트 레이어의 계층을 콘텐츠 위로 배치해 상호작용 중인 요소를 구분한다.”

다음 편 예고 ▶ 「098. 셀렉트 레이어의 계층을 콘텐츠 위로 배치하여 상호작용 중인 요소를 시각적으로 구분하고 있다.」

ViewCheck는 긴급 공지가 최상단 계층에 배치됐는지를 진단합니다.

📚 참고 출처

KRDS 엘리베이션(Elevation) 스타일 가이드 — https://www.krds.go.kr/html/site/style/style_06.html

KRDS #ViewCheck #공공웹사이트 #전자정부 #디지털정부 #웹접근성 #디자인시스템 #UIUX #UI컴포넌트 #웹표준

KRDS,ViewCheck,공공웹사이트,전자정부,디지털정부,웹접근성,디자인시스템,UIUX,UI컴포넌트,웹표준