맨 위, 화면 끝까지

KRDS CP-154 — 사용자가 가장 먼저 볼 수 있도록 본문 콘텐츠의 가장 첫 요소로 배치하며 컨테이너가 화면의 전체 너비를 차지하도록 표현하고 있다.

0. 들어가며 — 가장 먼저, 가장 크게

이번 274편은 긴급 공지를 본문의 가장 첫 요소로 배치하고, 컨테이너가 화면 전체 너비를 차지하게 하라는 규칙입니다.

긴급 공지의 목적은 ‘사용자가 다른 무엇보다 먼저, 놓치지 않고 보게’ 하는 것이죠(CP-152). 그러려면 — 화면에서 가장 먼저 마주치는 맨 위에, 시선을 사로잡는 전체 너비로 배치해야 합니다. CP-154는 이 위치와 너비를 규정합니다. 이번 편을 풀어냅니다.

1. 규칙 원문 — 첫 요소 배치 + 전체 너비

CP-154 (컴포넌트 > 긴급 공지) “사용자가 가장 먼저 볼 수 있도록 본문 콘텐츠의 가장 첫 요소로 배치하며 컨테이너가 화면의 전체 너비를 차지하도록 표현하고 있다.”

긴급 공지를 본문 콘텐츠 영역의 맨 첫 요소(가장 위)로 배치하고, 그 컨테이너가 화면 전체 너비를 차지 하도록 표현해 사용자가 가장 먼저 인지하게 하라는 뜻입니다.

정리: 긴급 공지는 본문 첫 요소로, 전체 너비로 배치하라. 이게 CP-154입니다.

2. 왜 첫 요소·전체 너비인가

긴급 공지의 존재 이유는 ‘놓칠 수 없게’ 만드는 것입니다. 시급하고 중요한 정보(CP-152)는 사용자가 다른 콘텐츠를 보기 전에 반드시 인지해야 하죠. 이를 위해 두 가지 — 위치(첫 요소)와 너비(전체)를 규정합니다.

① 첫 요소 — 가장 먼저 보는 자리. 사용자는 화면을 위→아래로 봅니다. 본문에서 가장 먼저 시선이 닿는 곳은 맨 위죠. 긴급 공지를 본문의 첫 요소로 두면, 사용자가 페이지를 열자마자 가장 먼저 마주칩니다 — 다른 콘텐츠 (목록, 카드, 본문)를 보기 전에요. 만약 긴급 공지가 본문 중간이나 아래에 있으면, 사용자가 스크롤해야 보이거나 다른 콘텐츠에 묻혀 놓칠 수 있죠. ‘가장 먼저 봐야 할’ 정보는 ‘가장 먼저 나오는’ 자리에 있어야 합니다.

여기서 ’본문 콘텐츠의 첫 요소’라는 표현이 중요합니다 — 보통 헤더(GNB) 아래, 본문 영역이 시작되는 맨 위 지점이죠. 페이지 제목이나 브레드크럼보다도 먼저(또는 그 위)에 와서, 본문에 진입하는 순간 바로 보이게 합니다.

② 전체 너비 — 시각적 무게와 주목. 긴급 공지 컨테이너가 화면 전체 너비를 차지하면 여러 효과가 있습니다:

시각적 무게 — 좁은 박스가 아니라 화면을 가로지르는 띠(banner)는 시각적으로 압도적이라 시선을 강하게 끕니다. ’이건 중요하다’는 무게가 너비로 전달되죠.

무시 불가 — 전체 너비를 막고 있으면 사용자가 그것을 건너뛰고 본문으로 가기 어렵습니다. 좁은 요소는 주변 콘텐츠와 섞여 묻히지만, 전체 너비 띠는 명확한 경계를 만들어 반드시 인지하게 하죠.

콘텐츠 영역 구분 — 전체 너비 띠가 본문 위에 놓이면, ’긴급 공지 영역’과 ’일반 본문 영역’이 시각적으로 분리돼 사용자가 둘을 명확히 구별합니다.

이 위치·너비는 긴급 공지의 다른 강력한 특성들과 결합합니다 — 숨기기 버튼 없음(CP-155, 닫을 수 없으니 계속 보임), 강한 색·아이콘(주목) 등과 함께 ‘절대 놓칠 수 없는’ 존재감을 만들죠. 단, 이 강력함은 CP-151·152의 ‘올바른 용도’(시급·중대 정보)일 때만 정당화됩니다 — 홍보를 전체 너비 첫 요소로 박으면 사용자를 짜증나게 하죠. 적절한 정보(152)를 강력하게 표시(154)하는 조합이 핵심입니다.

접근성 측면. 시각적으로 첫 요소일 뿐 아니라 DOM에서도 본문 앞쪽에 위치해야 합니다 — 그래야 스크린 리더가 본문을 읽기 시작할 때 긴급 공지를 먼저 낭독하고, 키보드 초점도 먼저 닿죠. 또 긴급 공지 영역에 배너 역할(CP-158)을 부여하면 스크린 리더가 그 용도를 빠르게 인지합니다. 시각·비시각 사용자 모두에게 ’가장 먼저’를 보장하는 것이죠.

3. 점검 / 개선

무엇을 점검하나

첫 요소 배치 — 긴급 공지가 본문 콘텐츠의 맨 첫 요소(가장 위)인가.

전체 너비 — 컨테이너가 화면 전체 너비를 차지하는가.

DOM 순서 — DOM상으로도 본문 앞쪽이라 스크린 리더·초점이 먼저 닿는가.

개선 방향

긴급 공지를 본문 영역 최상단(제목·브레드크럼보다 먼저)에 배치.

컨테이너 width를 전체 화면 너비(full-bleed)로. DOM 순서도 앞쪽으로.

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

역할	책임
디자이너	첫 요소·전체 너비 배치 정의
퍼블리셔/개발	위치·너비·DOM 순서 구현

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

긴급 공지 컴포넌트를 쓰는 모든 사이트가 해당됩니다.

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 긴급 공지가 본문의 맨 첫 요소(가장 위)인가요?

□ 컨테이너가 화면 전체 너비를 차지하나요?

□ DOM상으로도 본문 앞쪽이라 스크린 리더·초점이 먼저 닿나요?

❓ FAQ

Q1. 페이지 제목보다도 먼저 두나요? 본문 콘텐츠가 시작되는 맨 위, 보통 제목·브레드크럼보다 먼저(또는 그 위)에 둬 진입 즉시 보이게 합니다. Q2. 전체 너비가 부담스럽지 않나요? 긴급 정보는 그 무게가 정당합니다. 단 홍보 등 부적절한 용도(CP-151) 면 짜증을 유발하므로, 올바른 정보일 때만 씁니다. Q3. 스크린 리더에도 먼저 전달되나요? DOM 순서를 본문 앞쪽으로 두고 배너 역할(CP-158)을 부여하면 먼저 낭독됩니다.

6. 마무리

CP-154의 메시지:

맨 위, 화면 끝까지 — 긴급 공지를 본문 첫 요소로, 전체 너비로 배치하라.

긴급 공지는 놓칠 수 없게 만들어야 합니다. 본문 맨 위 첫 요소로 두어 가장 먼저 보이게 하고, 전체 너비로 시각적 무게를 줘 무시할 수 없게 하죠. DOM 순서도 앞쪽으로 두어 스크린 리더·키보드에도 먼저 닿게 합니다. 단 올바른 용도(CP-152)일 때만 정당하죠. 다음 편은 숨기기 버튼을 두지 않는 규칙입니다.

다음 편 예고 ▶ 「275. (CP-155) 긴급 공지 배너 숨기기 버튼을 제공하지 않고 있다.」

ViewCheck는 긴급 공지가 본문 첫 요소·전체 너비로 배치되는지를 진단합니다.

📚 참고 출처

KRDS 컴포넌트 — 긴급 공지(Critical alerts) 가이드 — https://www.krds.go.kr/html/site/component/component_13.html

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

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