탐색형이냐 검색형이냐

KRDS CP-025 — 메인 메뉴와 검색의 위치는 웹사이트의 목적에 적합한 형태로 제공하고 있다.

0. 들어가며 — 사이트마다 다른 우선순위

이번 145편은 메인 메뉴와 검색의 위치를 웹사이트 목적에 맞게 제공하는 규칙입니다.

헤더에는 메인 메뉴(탐색)와 검색이 함께 있습니다. 그런데 어느 것을 더 강조하고 어디에 둘지는 사이트 성격에 따라 다릅니다 — 메뉴로 둘러보는 사이트와 검색으로 찾는 사이트는 우선순위가 다르죠. CP-025는 사이트 목적에 적합한 형태로 배치하라고 규정합니다. 이번 편을 풀어냅니다.

1. 규칙 원문 — 목적에 적합한 형태

CP-025 (컴포넌트 > 헤더) “메인 메뉴와 검색의 위치는 웹사이트의 목적에 적합한 형태로 제공하고 있다.”

메인 메뉴와 검색의 배치·강조를 사이트의 목적·성격에 맞게 정하라는 뜻입니다.

정리: 메인 메뉴와 검색 위치는 웹사이트 목적에 적합한 형태로 제공하라. 이게 CP-025입니다.

2. 왜 사이트 목적에 맞추나

사이트마다 사용자가 정보를 찾는 주된 방식이 다릅니다.

탐색(browse) 중심 사이트 — 정보 구조가 명확하고 사용자가 메뉴를 따라 둘러보며 원하는 곳을 찾는 사이트 입니다(예: 부처 소개, 정책 안내 중심). 이런 사이트는 메인 메뉴가 핵심이라, 메뉴를 크고 잘 보이게 강조 하고 검색은 보조로 둡니다.

검색(search) 중심 사이트 — 콘텐츠가 방대해 메뉴로 다 담기 어렵고, 사용자가 키워드로 바로 찾는 사이트 입니다(예: 법령 검색, 민원 조회, 통계 포털). 이런 사이트는 검색이 핵심이라, 검색창을 헤더에서 크고 눈에 띄게 두어 사용자가 바로 검색하게 합니다.

CP-025의 핵심은 — 메뉴와 검색의 위치·강조를 ‘사이트 목적’이라는 근거로 정하라는 것입니다. 모든 사이트에 똑같이 적용하는 게 아니라, 우리 사이트의 사용자가 주로 ’둘러보는지’ ’검색하는지’를 파악해 그에 맞게 배치 하는 것이죠. 탐색형인데 검색을 과하게 강조하거나, 검색형인데 검색창을 구석에 숨기면 사용성이 떨어집니다.

이는 ’사용자 중심 설계’의 원리입니다 — 디자이너의 취향이 아니라, 사용자가 실제로 정보를 찾는 방식에 맞춰 인터페이스를 구성하는 것이죠. 사이트 목적과 사용자 행동을 먼저 이해하고, 그에 근거해 메뉴·검색의 우선순위를 정하는 것이 CP-025입니다. 단, 어떤 형태를 고르든 KRDS 표준 헤더 구조(CP-016·018) 안에서 배치해야 합니다.

3. 점검 / 개선

무엇을 점검하나

목적 파악 — 사이트가 탐색 중심인지 검색 중심인지 파악했는가.

적합한 배치 — 그 목적에 맞게 메뉴/검색이 강조·배치됐는가.

표준 내 구성 — KRDS 헤더 구조 안에서 배치했는가.

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

역할	책임
기획/UX	사이트 목적·사용자 행동 분석, 메뉴·검색 우선순위 결정
디자이너	목적에 맞는 헤더 구성

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

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

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 우리 사이트가 탐색 중심인지 검색 중심인지 파악했나요?

□ 그 목적에 맞게 메뉴/검색이 배치됐나요?

□ KRDS 헤더 구조 안에서 구성했나요?

❓ FAQ

Q1. 둘 다 중요하면요? 메인 메뉴와 검색을 모두 잘 보이게 두되, 사용자 데이터(검색 사용률 등)를 참고해 상대적 강조를 정합니다. Q2. 검색이 없어도 되나요? 콘텐츠가 적으면 검색 없이 메뉴만으로 충분할 수 있습니다. 사이트 규모·목적에 따라 판단합니다. Q3. KRDS를 채택하면 자동인가요? 표준은 메뉴·검색 컴포넌트를 제공하지만, 배치·강조는 사이트가 목적에 맞게 정해야 합니다.

6. 마무리

CP-025의 메시지:

탐색형이냐 검색형이냐 — 사용자가 정보를 찾는 방식에 맞춰 메뉴·검색을 배치한다.

사이트마다 사용자가 정보를 찾는 주된 방식(둘러보기/검색)이 달라, 메뉴와 검색의 위치·강조도 사이트 목적에 맞춰야 합니다. 디자이너 취향이 아니라 사용자 행동에 근거하는 ’사용자 중심 설계’의 원리죠.

다음 편은 헤더 고정과 스크롤 동작을 다룹니다. CP-026 — “헤더를 뷰포트 상단에 고정할 수 있지만, 스크롤을 내릴 때는 고정하지 않는다.”

다음 편 예고 ▶ 「146. (CP-026) 헤더를 뷰포트 상단에 고정할 수 있지만, 사용자가 현재 화면에 집중할 수 있도록 스크롤을 내릴 때에는 고정하지 않고 있다.」

ViewCheck는 메인 메뉴와 검색이 사이트 목적에 적합하게 배치됐는지를 진단합니다.

📚 참고 출처

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

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

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