무슨 검색인지 레이블로

KRDS SP-020 — 통합 검색이 아닌 검색에는 입력 필드에 레이블을 제공하고 있다.

0. 들어가며 — 여러 검색이 있는데 무엇을 검색하는지 모르면

이번 694편은 통합 검색이 아닌 검색에는 입력 필드에 레이블을 제공하라는 규칙입니다.

통합 검색(헤더, 누구나 검색인 줄 앎)과 달리, 특정 게시판·범위 검색은 — 무엇을 검색하는지 레이블이 없으면 헷갈리죠. SP-020은 비통합 검색에 레이블을 규정합니다. 폼 레이블(BP-074)의 검색 적용이죠. 이번 편을 풀어냅니다.

1. 원문 — 비통합 검색 레이블

SP-020 (서비스 패턴 > 검색 > 검색어 입력) “통합 검색이 아닌 검색에는 입력 필드에 레이블을 제공하고 있다.”

통합 검색이 아닌 검색의 입력 필드에 레이블을 제공하라는 뜻입니다.

정리: 비통합(부분) 검색 입력 필드에 레이블을 제공하라. 이게 SP-020입니다.

2. 왜 비통합 검색 레이블인가

검색에는 통합 검색(헤더 우측, 사이트 전체)과, 특정 게시판·범위만 검색하는 비통합(부분) 검색이 있습니다(SP-013). 통합 검색은 헤더 우측의 관습적 위치·돋보기로, 누구나 검색인 줄 알죠. 그런데 비통합 검색은, 무엇을 검색하는지 레이블이 없으면 헷갈립니다. SP-020은 레이블을 요구합니다.

비통합 검색에 레이블이 없을 때의 문제:

무슨 검색인지 모름 페이지 중간에 검색창이 있는데, 레이블이 없으면, 사용자는 무엇을 검색하는지 모릅니다. 이 게시판? 이 카테고리? 사이트 전체? 헷갈리죠.

스크린 리더 인지 불가 레이블 없는 검색 입력은, 스크린 리더가 ’입력란’으로만 읽어 무슨 검색인지 모릅니다.

왜 통합 검색은 레이블이 (상대적으로) 덜 필요한가. 통합 검색은 헤더 우측 + 돋보기라는 강한 관습적 단서가 있어, 별도 텍스트 레이블 없이도 검색임이 전달됩니다(단, 스크린 리더용 이름 SP-016은 필요). 반면 비통합 검색은, 그런 관습적 단서가 약해, 레이블로 명시해야 하죠.

그래서 SP-020은 — 비통합 검색에 레이블을 요구합니다:

명확한 레이블 비통합 검색 입력 필드에, 무엇을 검색하는지 레이블을요. ‘이 게시판에서 검색’, ‘자료실 검색’ 처럼요. 사용자가 검색 범위·대상을 알게요.

레이블 연결 레이블을 입력 필드와 연결(<label for>)합니다. 스크린 리더가 ’○○ 검색, 입력란’으로 읽게요 (BP-074). 시각 + 스크린 리더 양쪽으로요.

플레이스홀더로 대체 금지 레이블을 플레이스홀더로만 두지 않습니다(SP-021). 항상 보이는 진짜 레이블을요 (BP-074 정신).

폼 레이블(BP-074)의 검색 적용. 입력 필드에 레이블을 제공하라는 BP-074를, 검색 입력에 적용한 게 SP-020입니다. 검색창도 결국 입력 필드이므로, 레이블 원칙이 같죠. 단 통합 검색은 관습적 단서로 예외, 비통합은 레이블 필수 입니다.

이 규칙은 검색(SP)의 ’비통합 검색 명명’을 담당합니다 — 비통합 검색 입력 필드에 레이블을 제공해(020), 사용자가 무엇을 검색하는지 알게 하죠. SP-013(부분 검색 배치)·SP-016(돋보기 이름)과 함께 검색 인지를 돕습니다.

정리하면 — 비통합(부분) 검색은 관습적 단서가 약해 무엇을 검색하는지 헷갈리므로, 입력 필드에 명확한 레이블(‘○○ 검색’) 을 연결해 제공해야 합니다(통합 검색은 관습 단서로 예외).

3. 점검 / 개선

무엇을 점검하나

레이블 제공 — 비통합 검색 입력 필드에 레이블이 있는가(‘○○ 검색’).

레이블 연결 — 레이블이 입력 필드와 연결되는가(<label for>).

플레이스홀더 대체 금지 — 레이블을 플레이스홀더로만 두지 않는가(SP-021).

개선 방향

비통합 검색에 명확한 레이블(‘이 게시판에서 검색’) + 필드 연결.

항상 보이는 진짜 레이블(BP-074). 플레이스홀더 대체 금지(SP-021).

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

역할	책임
UX 라이터/기획	검색 레이블 문구
퍼블리셔/개발	레이블 연결 구현

기관 유형	SP-020 적용
중앙행정기관(대표·운영) / 공공기관 / 지자체	✅ 필수 (비통합 검색 사용 시)

게시판·범위별 검색을 쓰는 사이트가 해당됩니다.

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 비통합 검색 입력 필드에 레이블이 있나요(‘○○ 검색’)?

□ 레이블이 입력 필드와 연결되나요(<label for>)?

□ 레이블을 플레이스홀더로만 두지 않나요(SP-021)?

❓ FAQ

Q1. 통합 검색은 왜 레이블이 덜 필요한가요? 헤더 우측 + 돋보기라는 강한 관습적 단서가 있어 검색임이 전달됩니다. 반면 비통합 검색은 그 단서가 약해 레이블로 명시해야 하죠(단 통합도 스크린 리더용 이름 SP-016은 필요). Q2. 레이블에 뭘 쓰나요? 무엇을 검색하는지요: ‘이 게시판에서 검색’, ‘자료실 검색’. 검색 범위·대상을 알게요. Q3. 플레이스홀더로 레이블을 대신하면요? 안 됩니다. 플레이스홀더는 입력 시 사라지죠(SP-021). 항상 보이는 진짜 레이블을 쓰고 플레이스홀더는 보조로요(BP-074).

6. 마무리

SP-020의 메시지:

무슨 검색인지 레이블로 — 비통합 검색 입력 필드에 레이블을 제공하라.

비통합 검색은 관습적 단서가 약해 무엇을 검색하는지 헷갈립니다. 명확한 레이블(‘○○ 검색’)을 연결해 알게 하는 게 핵심 이죠. 다음 편은 플레이스홀더 사용 규칙입니다.

다음 편 예고 ▶ 「695. (SP-021) 플레이스홀더를 사용하는 경우, 유도 문구 외에 검색에 대한 단서나 레이블을 포함 하여 제공하고 있지 않다.」

ViewCheck는 비통합 검색 입력 필드에 레이블이 제공되는지를 진단합니다.

📚 참고 출처

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

WCAG 2.1 SC 3.3.2 Labels or Instructions — https://www.w3.org/WAI/WCAG21/Understanding/labels-or-instructions.html

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

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