가로냐 세로냐

KRDS CP-015 — 헤더 유형은 아이콘 링크/버튼과 레이블 구조를 기준으로 가로형, 세로형 방식 중 선택하여 적용하고 있다.

0. 들어가며 — 사이트의 얼굴, 헤더

이번 135편부터는 헤더(Header) 그룹 17개(CP-015~031)입니다. 846개 중 가장 규칙이 많은 컴포넌트 중 하나죠.

헤더는 사이트 최상단의 핵심 영역입니다 — 로고, 메뉴, 검색, 유틸리티 링크(로그인·언어 등)가 모여 사용자가 ’어디로 갈지’를 정하는 출발점이죠. 사이트의 얼굴이자 내비게이션의 중심입니다. 그 첫 규칙 CP-015는 헤더의 유형(가로형/세로형)을 구조 기준으로 선택하라고 규정합니다. 이번 편을 풀어냅니다.

1. 규칙 원문 — 가로형/세로형 선택

CP-015 (컴포넌트 > 헤더) “헤더 유형은 아이콘 링크/버튼과 레이블 구조를 기준으로 가로형, 세로형 방식 중 선택하여 적용하고 있다.”

헤더의 아이콘·버튼·레이블 구성 방식에 따라 가로형 또는 세로형 헤더 중 하나를 선택해 적용하라는 뜻입니다.

정리: 헤더 유형은 구조 기준으로 가로형/세로형 중 선택해 적용하라. 이게 CP-015입니다.

2. 왜 두 유형을 두고 선택하나

KRDS는 헤더를 단 하나의 형태로 강제하지 않고, 가로형·세로형 두 유형을 제공합니다. 사이트마다 메뉴 수, 유틸리티 링크 구성, 화면 활용 방식이 달라, 하나의 형태가 모든 사이트에 맞지 않기 때문이죠.

가로형은 로고·메뉴·유틸리티가 한 줄(가로)에 늘어선 형태입니다. 메뉴가 많지 않고, 깔끔한 한 줄 구성이 어울리는 사이트에 적합하죠. 화면 세로 공간을 적게 차지해 콘텐츠 영역을 넓게 쓸 수 있습니다.

세로형은 요소를 위아래(세로)로 쌓는 형태입니다. 로고·유틸리티를 위에, 메인 메뉴를 아래에 두는 식으로, 메뉴가 많거나 정보 구조가 복잡한 사이트에 적합하죠. 각 영역이 분리돼 구조가 명확해집니다.

CP-015의 핵심은 ’아무거나 고르라’가 아니라, ‘아이콘 링크/버튼과 레이블 구조를 기준으로’ 선택하라는 것입니다. 즉, 헤더에 들어갈 요소들(아이콘 버튼·링크와 그 레이블)의 구성을 보고, 그 구조에 맞는 유형을 합리적으로 정하라는 것이죠. 유틸리티가 아이콘+레이블로 복잡하거나 메뉴가 많으면 세로형이, 간결하면 가로형이 어울리는 식입니다. 무작정 정하는 게 아니라 콘텐츠 구조에 근거해 선택하는 것입니다.

중요한 건, 어느 유형을 고르든 KRDS 표준 형태 안에서 선택해야 한다는 점입니다(다음 편 CP-016 스타일 준수와 연결). 두 가지 표준 유형 중 사이트에 맞는 것을 고르는 것이지, 완전히 새로운 헤더를 만드는 게 아니죠. 표준이 제공하는 선택지 안에서 적합한 것을 고르는 ’제한된 자유’입니다.

3. 점검 / 개선

무엇을 점검하나

유형 선택 — 가로형/세로형 중 하나를 적용했는가.

구조 기준 — 아이콘·레이블 구조에 맞는 유형을 선택했는가.

표준 내 선택 — KRDS 표준 두 유형 안에서 골랐는가(임의 형태 아님).

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

역할	책임
기획/디자이너	헤더 요소 구조 분석, 가로/세로 유형 선택
퍼블리셔/개발	선택한 표준 헤더 유형 구현

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

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

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 헤더가 가로형/세로형 둘 중 하나로 명확한가요?

□ 헤더 요소 구조에 맞는 유형을 골랐나요?

□ KRDS 표준 유형 안에서 선택했나요?

❓ FAQ

Q1. 둘 다 섞으면 안 되나요? 두 유형 중 하나를 일관되게 적용해야 합니다. 섞으면 구조가 모호해집니다. Q2. 어느 유형이 더 좋나요? 사이트에 따라 다릅니다. 메뉴가 적고 간결하면 가로형, 많고 복잡하면 세로형이 일반적으로 어울립니다. Q3. KRDS를 채택하면 자동인가요? KRDS가 두 유형을 제공하니, 사이트에 맞는 것을 선택해 적용하면 됩니다.

6. 마무리

CP-015의 메시지:

가로냐 세로냐 — 헤더 요소 구조에 근거해, 표준 두 유형 중 맞는 것을 고른다.

KRDS는 헤더를 가로형·세로형 두 유형으로 제공합니다. 아이콘·레이블 구조를 기준으로 사이트에 맞는 유형을 합리적으로 선택하되, 표준이 제공하는 선택지 안에서 고르는 것이 CP-015죠. 제한된 자유 안의 합리적 선택입니다.

다음 편은 헤더 스타일의 표준 준수를 다룹니다. CP-016 — “헤더의 스타일 KRDS 예시를 준수하여 적용한다.”

다음 편 예고 ▶ 「136. (CP-016) 헤더의 스타일 KRDS 예시를 준수하여 적용하고 있다.」

ViewCheck는 헤더가 표준 가로형/세로형 유형으로 적용됐는지를 진단합니다.

📚 참고 출처

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

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

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