덜어내는 것이 디자인

KRDS CP-019 — 핵심적인 정보만 간결하게 제공하고 있다.

0. 들어가며 — 다 넣고 싶은 유혹

이번 139편은 헤더에 핵심 정보만 간결하게 담는 규칙입니다.

헤더는 사이트의 얼굴이라, 담당자는 온갖 것을 다 넣고 싶어합니다 — 모든 메뉴, 배너, 공지, SNS, 부가 링크 까지요. 하지만 헤더가 복잡해질수록 사용자는 길을 잃습니다. CP-019는 헤더에 핵심만 간결하게 두라고 규정하죠. 이번 편을 풀어냅니다.

1. 규칙 원문 — 핵심만 간결하게

CP-019 (컴포넌트 > 헤더) “핵심적인 정보만 간결하게 제공하고 있다.”

헤더에는 정말 필요한 핵심 요소만 담고, 간결하게 유지하라는 뜻입니다.

정리: 헤더는 핵심 정보만 간결하게 제공하라. 이게 CP-019입니다.

2. 왜 간결해야 하나

헤더는 사용자가 ‘어디로 갈지’ 정하는 내비게이션의 중심입니다. 이 영역이 복잡하면 여러 문제가 생기죠.

첫째, 인지 부하입니다. 헤더에 요소가 너무 많으면, 사용자는 그 많은 선택지 중에서 원하는 것을 찾느라 피로해집니다. 선택지가 많을수록 결정이 느려지는 ’선택의 역설’이 작동하죠. 핵심만 있으면 사용자는 빠르게 원하는 곳으로 갈 수 있습니다.

둘째, 시각적 혼잡입니다. 헤더가 빽빽하면 어느 것이 중요한지 위계가 무너지고(8편), 정작 핵심 기능(검색· 메인 메뉴)이 부가 요소에 묻힙니다. 여백과 간결함이 오히려 핵심을 돋보이게 하죠.

셋째, 공간 제약입니다. 헤더는 한정된 공간(특히 모바일)이라, 모든 걸 넣으면 각 요소가 작아지고 터치 타깃(44px)을 못 지키거나 줄바꿈이 어지러워집니다. 핵심만 두면 각 요소에 충분한 공간을 줄 수 있죠.

그래서 CP-019는 ’핵심적인 정보만’을 강조합니다. 헤더의 핵심은 — 로고(정체성), 메인 메뉴(내비게이션), 검색, 꼭 필요한 유틸리티(로그인 등) 정도입니다. 그 외 부가 정보(상세 공지, SNS, 잘 안 쓰는 링크)는 헤더가 아니라 푸터·별도 영역으로 보내거나, 유틸리티가 5개 이상이면 드롭다운으로 묶습니다(CP-022). ’무엇을 넣을까’보다 ’무엇을 뺄까’를 고민하는 것 — 덜어내는 것이 헤더 디자인의 핵심입니다.

3. 점검 / 개선

무엇을 점검하나

핵심만 — 헤더에 로고·메뉴·검색·필수 유틸리티 외 불필요한 요소가 없는가.

간결함 — 헤더가 시각적으로 복잡하지 않은가.

부가 요소 이동 — 비핵심 정보를 푸터·별도 영역으로 옮겼는가.

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

역할	책임
기획	헤더 핵심 요소 선별, 부가 요소 배제 결정
디자이너	간결한 헤더 구성

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

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

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 헤더에 핵심 요소만 있나요(불필요한 것 없음)?

□ 헤더가 시각적으로 복잡하지 않나요?

□ 부가 정보를 푸터·별도 영역으로 옮겼나요?

❓ FAQ

Q1. 메뉴가 원래 많은데요? 메인 메뉴 항목 수 자체보다, 헤더에 불필요한 부가 요소를 넣지 않는 것이 핵심 입니다. 메뉴가 많으면 구조화(드롭다운·메가메뉴)로 정리합니다. Q2. SNS 링크는 어디에 두나요? 보통 푸터에 둡니다. 헤더는 핵심 내비게이션 위주로 간결하게 유지합니다. Q3. KRDS를 채택하면 자동인가요? 표준 헤더는 핵심 요소 위주로 구성돼 있습니다.

6. 마무리

CP-019의 메시지:

덜어내는 것이 디자인 — 핵심만 남기면 사용자는 빠르게 길을 찾는다.

헤더가 복잡하면 인지 부하·시각 혼잡·공간 제약이 생깁니다. 로고·메뉴·검색·필수 유틸리티 같은 핵심만 두고, 부가 요소는 덜어내야 사용자가 빠르게 원하는 곳으로 가죠. ’무엇을 뺄까’가 헤더 디자인의 핵심입니다.

다음 편은 유틸리티 링크 그룹의 위치를 다룹니다. CP-020 — “유틸리티 링크 그룹은 헤더 우측 상단에 제공한다.”

다음 편 예고 ▶ 「140. (CP-020) 유틸리티 링크 그룹은 헤더 우측 상단에 제공하고 있다.」

ViewCheck는 헤더가 핵심 정보만 간결하게 제공하는지를 진단합니다.

📚 참고 출처

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

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

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