있되 튀지 않게

KRDS CP-003 — 공식배너가 지나치게 주의를 끌지 않도록 사용하고 있다.

0. 들어가며 — 신원 증명은 조용해야 한다

이번 123편은 공식배너가 지나치게 주의를 끌지 않도록 사용하는 규칙입니다.

공식배너는 맨 위에 꼭 있어야 하지만(121편), 그렇다고 화려하거나 눈에 확 띄어선 안 됩니다. 배너가 너무 크거나 강한 색이면, 정작 사용자가 보러 온 콘텐츠보다 배너가 먼저 눈에 들어와 방해가 되죠. 공식배너는 ‘신원을 조용히 증명하는’ 보조 역할이지 주인공이 아닙니다. CP-003은 이 절제를 규정합니다. 이번 편은 그 균형을 풀어냅니다.

1. 규칙 원문 — 지나치게 주의를 끌지 않게

CP-003 (컴포넌트 > 공식배너) “공식배너가 지나치게 주의를 끌지 않도록 사용하고 있다.”

공식배너를 눈에 확 띄게 만들지 말고, 조용히 존재하도록 하라는 뜻입니다.

정리: 공식배너는 지나치게 주의를 끌지 않게(절제되게) 사용하라. 이게 CP-003입니다.

2. 왜 조용해야 하나 — 주인공이 아니다

공식배너의 역할은 ’이 사이트는 정부 공식’임을 알리는 신원 증명입니다(121편). 이건 중요하지만, 사용자가 사이트에 온 목적은 아닙니다. 사용자는 민원을 신청하거나 정보를 찾으러 왔지, 배너를 보러 온 게 아니죠.

그래서 공식배너는 ‘있되 튀지 않아야’ 합니다. 배너가 너무 크거나, 강한 색·큰 글씨로 화려하면 — 화면 위쪽 공간을 많이 차지해 정작 콘텐츠가 밀려나고, 사용자의 시선이 배너에 먼저 붙어 본래 목적을 방해합니다. 시각적 위계(8편·100편)에서 공식배너는 ‘보조 정보’ 수준이어야지, ’주요 콘텐츠’보다 강하면 안 되죠.

그래서 KRDS 표준 공식배너는 작은 높이, 절제된 회색 톤, 작은 글씨로 디자인됩니다. 맨 위에 가느다란 띠로 조용히 자리하되, 사용자가 ‘진위를 확인하고 싶을 때’ 펼쳐서 자세히 볼 수 있는 구조죠(접힘/펼침). 평소엔 배경처럼 조용히 있다가, 필요할 때 정보를 제공하는 균형입니다.

이는 121편(있어야 함)과 한 쌍입니다 — 공식배너는 반드시 있어야 하지만, 조용히 있어야 합니다. 너무 없으면 신뢰를 못 주고, 너무 튀면 콘텐츠를 방해하죠. CP-003은 그 절제의 균형을 규정합니다. 그래서 표준 그대로 쓰는 것이 가장 안전합니다(CP-002·004) — 표준이 이미 이 절제를 반영해 디자인됐으니까요.

3. 점검 / 개선

무엇을 점검하나

절제된 크기 — 배너가 화면을 과도하게 차지하지 않는가.

절제된 색·글씨 — 강한 색·큰 글씨로 화려하지 않은가.

위계 적절 — 콘텐츠보다 배너가 더 눈에 띄지 않는가.

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

역할	책임
디자이너	표준 공식배너의 절제된 스타일 유지(임의 강조 금지)
퍼블리셔/개발	표준 스타일 그대로 적용

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

행정·공공기관 디지털 정부서비스 = 전부 해당.

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 공식배너가 화면을 과도하게 차지하지 않나요?

□ 강한 색·큰 글씨로 튀지 않나요?

□ 콘텐츠가 배너보다 먼저 눈에 들어오나요?

❓ FAQ

Q1. 그럼 작게 만들면 121편(있어야 함)과 모순 아닌가요? 아닙니다. ’있되 조용히’입니다. 맨 위에 분명히 있지만, 화려하지 않게 절제하는 균형입니다. Q2. 눈에 안 띄면 신원 증명이 안 되지 않나요? 평소엔 조용히 있다가, 사용자가 진위를 확인하고 싶을 때 펼쳐 볼 수 있습니다. 존재는 분명하되 방해하지 않는 것이죠. Q3. KRDS를 채택하면 자동인가요? KRDS 표준 배너가 이미 절제된 스타일로 디자인돼 있어, 그대로 쓰면 됩니다.

6. 마무리

CP-003의 메시지:

있되 튀지 않게 — 신원 증명은 조용히, 주인공은 콘텐츠다.

공식배너는 반드시 있어야 하지만(121편), 조용히 있어야 합니다. 너무 크거나 화려하면 콘텐츠를 방해하죠. 작은 높이·절제된 톤으로 맨 위에 조용히 자리하되, 필요할 때 펼쳐 보는 균형이 CP-003입니다.

다음 편은 공식배너 변형 금지를 다룹니다. CP-004 — “공식배너 텍스트와 스타일은 변형하지 않고 사용한다.”

다음 편 예고 ▶ 「124. (CP-004) 공식배너 텍스트와 스타일은 변형하지 않고 사용하고 있다.」

ViewCheck는 공식배너가 절제된 표현으로 콘텐츠를 방해하지 않는지를 진단합니다.

📚 참고 출처

KRDS 컴포넌트 — 공식배너(Masthead) 가이드 — https://www.krds.go.kr/html/site/component/component_01.html

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

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