검색은 늘 헤더 우측에

KRDS SP-011 — 모든 화면에서 헤더 우측에 통합 검색 기능 실행 버튼을 일관성 있게 배치하고 있다.

0. 들어가며 — 검색이 화면마다 다른 곳에 있으면

이번 685편은 모든 화면에서 헤더 우측에 통합 검색 기능 실행 버튼을 일관성 있게 배치하라는 규칙입니다.

SP-010(모든 화면 검색)에 이어, 그 검색 버튼의 위치입니다. 검색이 — 화면마다 다른 곳에 있으면 찾기 어렵죠. SP-011은 헤더 우측이라는 관습적 위치에 일관 배치하라고 규정합니다. 이번 편을 풀어냅니다.

1. 원문 — 헤더 우측 일관 배치

SP-011 (서비스 패턴 > 검색 > 검색 기능 찾기) “모든 화면에서 헤더 우측에 통합 검색 기능 실행 버튼을 일관성 있게 배치하고 있다.”

검색 실행 버튼을 모든 화면의 헤더 우측에 일관되게 배치하라는 뜻입니다.

정리: 검색 버튼을 헤더 우측에 일관되게 배치하라. 이게 SP-011입니다.

2. 왜 헤더 우측 일관 배치인가

검색을 모든 화면에서 쓸 수 있게(SP-010) 하려면, 그 검색 버튼이 찾기 쉬운 일관된 위치에 있어야 합니다. SP-011은 헤더 우측을 정합니다.

검색 위치가 들쭉날쭉할 때의 문제:

매번 찾기 검색 버튼이 화면마다 다른 곳(상단 왼쪽, 본문 중간 등)에 있으면, 사용자는 매번 찾아야 합니다.

검색 못 찾음 — 검색이 — 있는 줄도 모르고 못 찾을 수 있죠.

그래서 SP-011은 — 헤더 우측 일관 배치를 요구합니다:

헤더 우측 검색 실행 버튼(돋보기 아이콘 등)을 헤더(상단 GNB)의 우측에 둡니다. 이건 웹 전반의 관습적 위치입니다. 많은 사이트가 검색을 헤더 우측에 두죠(로고는 좌측, 검색·로그인은 우측). 사용자가 학습한 패턴이라 거기서 바로 찾습니다.

모든 화면 일관 모든 화면에서 같은 위치(헤더 우측)에요. 사용자가 어느 화면에서든 같은 자리에서 검색을 찾죠. 일관성이 예측 가능성을 줍니다(WCAG 3.2.3 일관된 내비게이션).

헤더는 전 화면 공통 헤더는 보통 모든 화면에 공통으로 있으므로, 헤더에 검색을 두면 자연히 SP-010(모든 화면 검색)이 충족되죠. 두 규칙이 연결됩니다.

왜 헤더 우측인가. 헤더 좌측은 보통 로고·홈, 중앙·우측은 메뉴·검색·로그인이 오는 게 웹 관습입니다. 검색은 우측(또는 메뉴 옆)이 관습적 자리죠. 관습을 따르면 사용자가 직관적으로 찾습니다. 굳이 새 위치를 만들 필요가 없죠.

모바일 고려. 모바일에서는 헤더 공간이 좁아, 검색을 아이콘 버튼으로 축약하거나 햄버거 메뉴 안에 둘 수 있습 니다. 다만 가급적 헤더에 검색 아이콘을 노출해, 모바일에서도 쉽게 찾게 하는 게 좋죠.

일관성 = 학습 전이. 한 화면에서 검색 위치를 익히면, 다른 화면에서도 같은 자리를 기대합니다. 일관 배치는 이 학습을 살리죠. 들쭉날쭉하면 매번 새로 찾아야 합니다.

이 규칙은 검색(SP)의 ’검색 위치 일관성’을 담당합니다 — 검색 버튼을 헤더 우측에 일관 배치해(011), 사용자가 어느 화면 에서든 익숙한 자리에서 검색을 찾게 하죠. SP-010(모든 화면 검색)의 위치 짝입니다.

정리하면 — 검색 버튼이 화면마다 다른 곳에 있으면 매번 찾아야 하므로, 검색 실행 버튼을 모든 화면의 헤더 우측(웹 관습적 위치)에 일관되게 배치해야 합니다.

3. 점검 / 개선

무엇을 점검하나

헤더 우측 — 검색 버튼이 헤더 우측에 있는가.

전 화면 일관 — 모든 화면에서 같은 위치인가.

모바일 — 모바일에서도 검색을 쉽게 찾을 수 있는가.

개선 방향

검색 실행 버튼을 헤더 우측(관습적 위치)에 일관 배치(WCAG 3.2.3).

모든 화면 공통. 모바일은 아이콘 노출(햄버거 안 매몰 지양).

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

역할	책임
디자이너	헤더 검색 위치 디자인
퍼블리셔	헤더 우측 일관 구현

기관 유형	SP-011 적용
중앙행정기관(대표·운영) / 공공기관 / 지자체	✅ 권장 (검색 제공 시)

검색 기능을 제공하는 모든 사이트가 해당됩니다.

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 검색 버튼이 헤더 우측에 있나요?

□ 모든 화면에서 같은 위치인가요?

□ 모바일에서도 검색을 쉽게 찾을 수 있나요?

❓ FAQ

Q1. 왜 헤더 우측인가요? 웹 관습입니다. 로고는 좌측, 검색·로그인은 우측이 오죠. 사용자가 학습한 패턴이라 거기서 바로 찾습니다. 관습을 따르면 직관적이죠. Q2. SP-010과 어떻게 연결되나요? 헤더는 모든 화면에 공통이라, 헤더에 검색을 두면 자연히 모든 화면 검색(SP-010)이 충족됩니다. 위치(SP-011)와 접근성(SP-010)이 연결되죠. Q3. 모바일에선 어떻게 하나요? 헤더가 좁으면 검색 아이콘으로 축약합니다. 단 가급적 헤더에 노출해 쉽게 찾게요. 햄버거 메뉴 깊이 매몰하면 못 찾죠.

6. 마무리

SP-011의 메시지:

검색은 늘 헤더 우측에 — 검색 버튼을 헤더 우측에 일관되게 배치하라.

검색이 화면마다 다르면 매번 찾아야 합니다. 헤더 우측 관습적 위치에 일관 배치해 어느 화면에서든 익숙한 자리에서 찾게 하는 게 핵심이죠. 다음 편은 검색 기능의 형태(입력 필드 + 돋보기)입니다.

다음 편 예고 ▶ 「686. (SP-012) 통합 검색 기능은 검색어 입력 필드와 돋보기 버튼의 조합 또는 돋보기 버튼 형태로 사용하고 있다.」

ViewCheck는 검색 버튼이 헤더 우측에 일관 배치되는지를 진단합니다.

📚 참고 출처

KRDS 서비스 패턴 — 검색 가이드 — https://www.krds.go.kr/html/site/service/service_02.html

WCAG 2.1 SC 3.2.3 Consistent Navigation — https://www.w3.org/WAI/WCAG21/Understanding/consistent-navigation.html

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

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