이 사이트는 진짜 정부입니다
120편까지 디자인 스타일(DS) 120개 규칙을 모두 마쳤습니다. 색·글자·간격·그림자·선명한 화면 모드까지, ’시각 스타일의 규칙’이었죠. 이번 121편부터는 컴포넌트(CP) 446개로 넘어옵니다 — 846개 중 가장 큰 덩어리이고, 실제 화면을 구성하는 ’UI 부
KRDS CP-001 — 공식배너를 모든 화면의 최상단에 제공하고 있다.
0. 들어가며 — 디자인 스타일에서 컴포넌트로
120편까지 디자인 스타일(DS) 120개 규칙을 모두 마쳤습니다. 색·글자·간격·그림자·선명한 화면 모드까지, ’시각 스타일의 규칙’이었죠. 이번 121편부터는 컴포넌트(CP) 446개로 넘어옵니다 — 846개 중 가장 큰 덩어리이고, 실제 화면을 구성하는 ’UI 부품’들의 규칙입니다.
컴포넌트는 버튼·입력칸·내비게이션·테이블·모달처럼 사용자가 직접 보고 누르는 화면 조각입니다. 디자인 스타일이 ’어떤 색·크기로 보이는가’였다면, 컴포넌트는 ’어떤 구조로 만들어지고 어떻게 동작하는가’를 다룹니다. 그 446개의 첫 시작은 공식배너(Masthead) — 정부 사이트 맨 위에 붙는 그 띠입니다.
이번 편은 컴포넌트 영역의 출발점이자, 공식배너의 첫 규칙 ’CP-001 모든 화면 최상단 제공’을 풀어냅니다.
1. 규칙 원문 — 모든 화면 최상단
CP-001 (컴포넌트 > 공식배너) “공식배너를 모든 화면의 최상단에 제공하고 있다.”
공식배너(Masthead)를 사이트의 모든 페이지 맨 위에 빠짐없이 넣으라는 뜻입니다.
정리: 공식배너를 모든 화면의 최상단에 제공하라. 이게 CP-001, 컴포넌트의 첫 규칙입니다.
2. 공식배너란 무엇인가
공식배너(Masthead)는 정부·공공 웹사이트 맨 위에 붙는 가느다란 띠입니다. “이 누리집은 대한민국 공식 전자정부 누리집입니다” 같은 문구와 함께, 펼치면 ’진짜 정부 사이트를 구별하는 방법’을 안내하죠. 미국 연방정부 사이트의 “An official website of the United States government” 배너와 같은 역할입니다.
왜 이게 필요할까요? 피싱·사칭 사이트로부터 국민을 보호하기 위함입니다. 정부를 사칭한 가짜 사이트가 개인정보·금융정보를 탈취하는 사고가 끊이지 않습니다. 공식배너는 “이 사이트는 정부가 운영하는 진짜 사이트” 임을 표준화된 방식으로 알려, 사용자가 신뢰할 수 있는 사이트인지 판단하도록 돕습니다. 모든 정부 사이트가 같은 배너를 같은 위치에 달면, 사용자는 그 배너의 유무·형태로 진위를 가늠할 수 있죠.
CP-001은 이 공식배너를 ’모든 화면의 최상단’에 두라고 규정합니다. 두 가지 핵심이 있습니다.
첫째, ‘모든 화면’ — 메인 페이지만이 아니라 하위 페이지·검색 결과·신청 폼 등 사이트의 모든 페이지에 배너가 있어야 합니다. 사용자는 외부 링크·검색을 통해 메인이 아닌 하위 페이지로 직접 들어오는 경우가 많은데, 그 페이지에 배너가 없으면 ‘이게 진짜 정부 사이트인지’ 확인할 길이 없죠. 어느 경로로 들어와도 진위를 확인할 수 있어야 합니다.
둘째, ‘최상단’ — 배너는 페이지의 가장 위, 헤더보다도 위에 와야 합니다. 사용자가 페이지를 열자마자 가장 먼저 보는 위치죠. 가장 먼저 ’이 사이트는 정부 공식’임을 알려야, 그다음 콘텐츠를 신뢰하고 볼 수 있으니까요. 구조적으로도 <body>의 첫 요소로 배치하는 것이 표준입니다.
3. 왜 중요한가 — 신뢰의 첫인상
공식배너는 사이트가 사용자에게 건네는 첫 인사입니다. “저는 정부가 운영하는 진짜 사이트입니다”라는 신원 증명이죠. 이 첫인상이 없거나, 어떤 페이지에는 있고 어떤 페이지에는 없으면, 사용자는 사이트 전체의 신뢰성을 의심하게 됩니다.
특히 디지털 취약계층·고령층은 피싱에 더 취약합니다. 표준화된 공식배너가 모든 정부 사이트에 일관되게 있으면, “정부 사이트엔 이 배너가 맨 위에 있다”는 학습이 생겨, 배너가 없는 사이트를 경계할 수 있죠. 그래서 ‘한 사이트 의 모든 페이지’ + ’대한민국 모든 정부 사이트’에 일관되게 적용되는 것이 중요합니다. CP-001이 ’모든 화면’을 강조하는 이유입니다.
4. 점검 / 개선
무엇을 점검하나
모든 페이지 존재 — 메인뿐 아니라 하위·검색·폼 페이지에도 배너가 있는가.
최상단 위치 — 배너가 페이지 맨 위(헤더보다 위)에 있는가.
구조적 첫 요소 — <body>의 첫 구획으로 배치됐는가.
Before / After
<!-- ✅ 모든 페이지 최상단에 공식배너 --> <body> <div class="krds-masthead"> 이 누리집은 대한민국 공식 전자정부 누리집입니다. </div> <header>...</header> <main>...</main> </body>
5. 누가 담당하나 / 우리 사이트에 해당될까?
| 역할 | 책임 |
|---|---|
| 퍼블리셔/개발 | 공통 레이아웃(템플릿) 최상단에 배너 삽입 |
| 기획 | 전 페이지 공통 적용 정책 수립 |
공통 레이아웃·헤더 템플릿에 한 번 넣으면 모든 페이지에 적용되므로, 템플릿 관리가 핵심입니다.
| 기관 유형 | CP-001 적용 |
|---|---|
| 중앙행정기관(대표·운영) / 공공기관 / 지자체 | ✅ 필수 (행정·공공기관 디지털 정부서비스) |
행정·공공기관이 운영하는 디지털 정부서비스 = 전부 해당. (단, 정부서비스가 아닌 사이트는 CP-005에서 별도 — 오히려 쓰면 안 됨.)
6. 30초 자가진단 + FAQ
✅ 30초 자가진단
□ 모든 페이지(하위·검색·폼 포함) 최상단에 공식배너가 있나요?
□ 배너가 헤더보다 위에 있나요?
□ 외부 링크로 하위 페이지에 직접 들어와도 배너가 보이나요?
❓ FAQ
Q1. 공식배너가 뭔가요? 정부 사이트 맨 위의 “대한민국 공식 전자정부 누리집입니다” 띠입니다. 사칭 사이트와 진짜 정부 사이트를 구별하게 돕습니다. Q2. 메인에만 있으면 안 되나요? 안 됩니다. CP-001은 ’모든 화면’을 명시합니다. 사용자는 하위 페이지로 직접 들어오는 경우가 많아, 모든 페이지에 있어야 합니다. Q3. 우리는 정부 사이트가 아닌데요? 행정·공공기관의 디지털 정부서비스가 아니면 오히려 쓰면 안 됩니다 (CP-005). 공식배너는 ’진짜 정부’를 표시하는 것이라, 아무 사이트나 달면 의미가 흐려집니다.
7. 마무리
CP-001의 메시지:
이 사이트는 진짜 정부입니다 — 모든 화면 맨 위에서 신뢰의 첫인사를.
공식배너는 사칭 사이트로부터 국민을 보호하는 신원 증명입니다. 모든 페이지의 최상단에 일관되게 있어야, 어느 경로로 들어와도 사용자가 진위를 확인할 수 있죠. 컴포넌트 446개의 첫 규칙이 ’신뢰의 첫인사’인 것은 의미심장 합니다.
다음 편은 공식배너의 일관성을 다룹니다. CP-002 — “모든 서비스에서 동일한 위치에 동일한 형태·스타일로 제공한다.”
다음 편 예고 ▶ 「122. (CP-002) 모든 서비스에서 동일한 위치에 동일한 형태와 스타일로 제공하고 있다.」
ViewCheck는 공식배너가 모든 페이지의 최상단에 제공되는지를 자동으로 진단합니다.
📚 참고 출처
KRDS 컴포넌트 — 공식배너(Masthead) 가이드 — https://www.krds.go.kr/html/site/component/component_01.html
「전자정부 웹사이트 품질관리 지침」 신뢰성 영역
KRDS #ViewCheck #공공웹사이트 #전자정부 #디지털정부 #웹접근성 #디자인시스템 #UIUX #UI컴포넌트 #웹표준
KRDS,ViewCheck,공공웹사이트,전자정부,디지털정부,웹접근성,디자인시스템,UIUX,UI컴포넌트,웹표준
관련 글
다음 호는 언제?
이번 846편은 간행물 자료의 발행 주기 정보를 본문의 부제목이나 별도 안내 영역에 제공하라는 규칙입니다. 그리고 이 편이 — 846 규칙 완전 분해 시리즈의 마지막 한 편입니다.
방대한 자료를 효율적으로
이번 845편은 목록에 필터링, 정렬 방식, 상세 검색(기간, 자료 유형 등) 기능을 제공하여 정보를 효과적으로 조회하라는 규칙입니다. [정책 자료 탐색] 서브섹션의 시작이죠.
적힌 대로 가야 한다
이번 844편은 모든 링크는 실행하였을 때, 링크 레이블에 명시된 적절한 화면으로 이동하라는 규칙입니다.