먼저 알아야 할 건 맨 위에

KRDS BP-023 — [안내 영역] 본문을 이해하고 이용하는 데 포괄적으로 이해가 필요한 정보를 전달하는 데 사용하고, 본문 상단에 배치하고 있다.

0. 들어가며 — 전체에 필요한 안내를 어디에

이번 589편은 안내 영역을 본문 전체에 포괄적으로 필요한 정보 전달에 사용하고, 본문 상단에 배치하라는 규칙입니다.

안내 영역은 — 그 화면 전체를 이해·이용하는 데 미리 알아야 할 정보(공지, 주의사항, 전체 안내)를 담는 영역이죠. 이건 — 본문을 읽기 전에 보도록 맨 위에 둬야 합니다. BP-023은 안내 영역의 용도와 위치를 규정합니다. 이번 편을 풀어냅니다.

1. 원문 — 포괄 정보 전달 + 본문 상단 배치

BP-023 (기본 패턴 > 도움 [안내 영역]) “[안내 영역] 본문을 이해하고 이용하는 데 포괄적으로 이해가 필요한 정보를 전달하는 데 사용하고, 본문 상단에 배치하고 있다.”

안내 영역을, 화면 전체를 이해·이용하는 데 미리 알아야 할 포괄적 정보 전달에 쓰고, 본문 상단에 배치하라는 뜻입니다.

정리: 안내 영역은 전체 포괄 정보를 본문 상단에 두라. 이게 BP-023입니다.

2. 왜 포괄 정보·본문 상단인가

’안내 영역’은 — 화면에서 특정 정보를 강조해 전달하는 영역입니다(배너·안내 박스·공지 영역 등). BP-023은 — 이 안내 영역의 ①용도(무엇을 담을지)와 ②위치(어디에 둘지)를 규정합니다.

① 포괄적으로 이해가 필요한 정보 전달. 안내 영역에는 — 그 화면(본문) 전체를 이해·이용하는 데 포괄적으로 필요한 정보를 담습니다.

전체에 적용되는 정보 — 그 화면 전체에 영향을 주거나, 본문을 보기 전에 미리 알아야 할 정보죠. 예: ‘이 신청은 ○월 ○일까지만 가능합니다’, ‘아래 항목은 모두 필수입니다’, ‘○○ 변경으로 절차가 달라졌습니다’ 같은 — 전체 맥락·주의사항이요.

개별 항목 아님 — 특정 입력 필드 하나에 대한 도움(그건 인라인 텍스트 BP-026, 툴팁 BP-027)이 아니라, 화면 전반에 걸친 포괄 안내입니다. 안내 영역과 개별 도움을 구분하죠.

② 본문 상단 배치. 이 안내 영역을 — 본문 상단(맨 위) 에 둡니다.

먼저 읽도록 전체에 필요한 정보는 사용자가 본문을 읽기 전에 먼저 봐야 합니다. 그래야 그 맥락을 알고 본문을 이용하죠. ’이 신청은 마감됐습니다’를 폼을 다 채운 뒤 맨 아래에서 보면 헛수고죠. 맨 위에서 미리 보면 그 전제 하에 작업합니다.

읽기 흐름 사용자는 위에서 아래로 읽습니다(읽기 흐름). 전체 안내를 맨 위에 두면 자연스럽게 먼저 읽죠.

사전 도움(BP-017) 정신 — 막히기 전에 미리 안내(BP-017)하는 것의 화면 차원입니다. 전체 안내를 상단에 둬, 본문 진입 전에 알게요.

왜 위치가 중요한가. 포괄 안내가 본문 아래나 옆에 묻혀 있으면, 사용자가 본문을 다 보고 작업한 뒤에야 보거나 못 보죠. 중요한 전체 맥락(마감, 변경, 필수 조건)을 놓치면 잘못 진행하거나 헛수고합니다. 맨 위에 둬 미리 알게 하는 게 핵심이죠.

한 화면 하나만(BP-024). 안내 영역은 — 한 화면에 여러 개 두지 않습니다(다음 편 BP-024). 여러 개면 — 무엇이 중요한지 흐려지고 산만하죠. 핵심 포괄 안내 하나를 상단에요.

이 규칙은 도움 패턴의 ’전체 안내 배치’를 담당합니다 — 화면 전체에 필요한 포괄 정보를 본문 상단에 둬(023), 사용 자가 본문 이용 전에 미리 맥락을 알게 하죠. 개별 도움(인라인·툴팁)과 구분되는, 전체 차원의 안내입니다.

정리하면 — 화면 전체를 이해·이용하는 데 필요한 포괄 정보는 본문을 보기 전에 알아야 하므로, 그런 정보를 안내 영역에 담아 본문 상단에 배치해야 합니다.

3. 점검 / 개선

무엇을 점검하나

포괄 정보 — 안내 영역이 화면 전체에 필요한 포괄 정보를 담는가(개별 항목 도움 아님).

상단 배치 — 안내 영역이 본문 상단(맨 위)에 있는가.

먼저 읽힘 — 사용자가 본문 이용 전에 그 안내를 보는가.

개선 방향

전체 맥락·주의사항·공지를 안내 영역에. 개별 항목 도움은 인라인(BP-026)·툴팁(BP-027).

안내 영역을 본문 상단에 배치. 한 화면 하나만(BP-024).

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

역할	책임
콘텐츠/UX	안내 영역 내용·배치 설계
퍼블리셔/개발	안내 영역 상단 배치 구현

기관 유형	BP-023 적용
중앙행정기관(대표·운영) / 공공기관 / 지자체	✅ 조건부 (안내 영역 사용 시)

화면 전체 안내가 필요한 사이트에 해당됩니다.

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 안내 영역이 화면 전체에 필요한 포괄 정보를 담나요(개별 항목 도움 아님)?

□ 안내 영역이 본문 상단(맨 위)에 있나요?

□ 사용자가 본문 이용 전에 그 안내를 보나요?

❓ FAQ

Q1. 안내 영역에 무엇을 담나요? 화면 전체를 이해·이용하는 데 미리 알아야 할 포괄 정보(마감·변경·필수 조건·공지) 입니다. 개별 항목 도움은 아니죠. Q2. 왜 상단인가요? 전체에 필요한 정보는 본문을 보기 전에 먼저 알아야 합니다. 맨 아래면 작업 후에 보거나 못 보죠. Q3. 개별 필드 도움도 안내 영역에 넣나요? 아닙니다. 그건 인라인 텍스트(BP-026)·툴팁(BP-027)입니다. 안내 영역은 전체 차원이죠.

6. 마무리

BP-023의 메시지:

먼저 알아야 할 건 맨 위에 — 전체 포괄 정보를 안내 영역에 담아 본문 상단에 배치하라.

화면 전체에 필요한 포괄 정보는 본문을 보기 전에 알아야 합니다. 안내 영역에 담아 본문 상단에 둬 미리 맥락을 알게 하는 게 핵심이죠. 다음 편은 안내 영역 개수입니다.

다음 편 예고 ▶ 「590. (BP-024) [안내 영역] 한 화면에서 여러 개의 안내 영역을 사용하고 있지 않다.」

ViewCheck는 안내 영역이 포괄 정보를 본문 상단에 두는지를 진단합니다.

📚 참고 출처

KRDS 기본 패턴 — 도움 가이드 — https://www.krds.go.kr/html/site/pattern/pattern_02.html

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

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