예시를 따라가라

KRDS CP-016 — 헤더의 스타일 KRDS 예시를 준수하여 적용하고 있다.

0. 들어가며 — 표준 예시의 무게

이번 136편은 헤더의 스타일을 KRDS 예시에 맞춰 적용하는 규칙입니다.

135편에서 가로/세로 유형을 선택했다면, CP-016은 그 헤더의 세부 스타일(색·간격·타이포·구성)을 KRDS가 제공하는 예시 그대로 따르라고 규정합니다. 헤더는 사이트의 얼굴이자 신뢰의 첫인상이라, 표준 예시를 준수해 일관성을 지키는 것이 중요하죠. 이번 편을 풀어냅니다.

1. 규칙 원문 — KRDS 예시 준수

CP-016 (컴포넌트 > 헤더) “헤더의 스타일 KRDS 예시를 준수하여 적용하고 있다.”

헤더의 스타일을 KRDS가 제시한 표준 예시에 맞춰 적용하라는 뜻입니다.

정리: 헤더 스타일은 KRDS 예시를 준수하여 적용하라. 이게 CP-016입니다.

2. 왜 예시를 준수하나

KRDS는 헤더의 표준 스타일을 ’예시(example)’로 제공합니다 — 색·간격·타이포·요소 배치·반응형 동작 등이 구체적 으로 디자인된 참조 모델이죠. CP-016은 이 예시를 준수하라고 합니다.

왜 그럴까요? 헤더는 모든 정부 사이트에서 비슷한 구조와 스타일을 가져야 사용자가 일관되게 사용할 수 있기 때문입니다. 사용자가 정부 사이트 A에서 헤더 사용법을 익히면, 사이트 B에서도 같은 방식으로 쓸 수 있어야 하죠. 헤더 스타일이 사이트마다 제각각이면, 매번 새로 적응해야 하고 사용성이 떨어집니다(레이아웃 편의 일관성 원리).

또 헤더는 디자인 토큰(색·간격·타이포)과 다른 컴포넌트 규칙이 종합적으로 적용되는 영역입니다. KRDS 예시를 따르면 이 모든 규칙(색 대비, 8pt 그리드, Pretendard 서체, 터치 타깃 크기 등)이 자동으로 충족되죠. 예시는 표준 규칙들을 이미 반영해 디자인됐기 때문입니다. 반대로 예시를 무시하고 임의로 헤더를 만들면, 개별 규칙을 하나하나 다시 검증해야 하고 누락 위험도 커집니다.

핵심은 — 헤더는 ‘창의적으로 새로 디자인할’ 영역이 아니라 ‘표준 예시를 충실히 구현할’ 영역이라는 점입니다. 사이트 고유의 브랜드 표현은 콘텐츠·서비스에서 하고, 헤더만큼은 표준 예시를 준수해 일관성·신뢰성·접근성을 보장하는 것이죠. 이는 공식배너·식별자의 ‘변형 금지’(CP-004·010)와 같은 정신이지만, 헤더는 선택의 여지 (가로/세로, CP-015)가 있는 만큼 ’선택한 유형의 표준 스타일을 준수’하는 형태입니다.

3. 점검 / 개선

무엇을 점검하나

예시 일치 — 헤더 스타일이 KRDS 예시와 부합하는가.

토큰 준수 — 색·간격·타이포가 디자인 토큰을 따르는가.

임의 디자인 아님 — 예시를 무시하고 새로 만들지 않았는가.

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

역할	책임
디자이너	KRDS 헤더 예시 준수 설계
퍼블리셔/개발	예시 스타일 구현

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

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

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 헤더 스타일이 KRDS 예시와 부합하나요?

□ 색·간격·타이포가 디자인 토큰을 따르나요?

□ 예시를 무시하고 임의로 만들지 않았나요?

❓ FAQ

Q1. 우리 브랜드 색을 헤더에 쓰면 안 되나요? 헤더는 표준 예시 준수가 원칙입니다. 브랜드 표현은 콘텐츠 영역에서 하는 것이 좋습니다. Q2. 예시와 100% 같아야 하나요? 가로/세로 선택(CP-015)과 기관 정보 차이는 있지만, 스타일 골격(색·간격· 구성)은 예시를 준수해야 합니다. Q3. KRDS를 채택하면 자동인가요? KRDS 표준 헤더 컴포넌트를 쓰면 예시가 그대로 적용됩니다.

6. 마무리

CP-016의 메시지:

예시를 따라가라 — 헤더는 창의가 아니라 표준 충실 구현의 영역이다.

헤더는 모든 정부 사이트에서 일관돼야 하므로, KRDS 예시를 준수해 스타일을 적용합니다. 예시는 색·간격·타이포 등 표준 규칙을 이미 반영해, 따르면 자동으로 여러 규칙이 충족되죠. 헤더는 표준 충실 구현의 영역입니다.

다음 편은 정부 로고의 위치를 다룹니다. CP-017 — “정부 로고는 항상 헤더의 왼쪽 상단에 제공한다.”

다음 편 예고 ▶ 「137. (CP-017) 정부 로고는 항상 헤더의 왼쪽 상단에 제공하고 있다.」

ViewCheck는 헤더 스타일이 KRDS 예시를 준수하는지를 진단합니다.

📚 참고 출처

KRDS 컴포넌트 — 헤더(Header) 가이드 — https://www.krds.go.kr/html/site/component/component_03.html

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

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