검색어가 어디 있는지 표시하기

KRDS SP-053 — 검색어와 일치하는 항목을 강조표시 하고 있다.

0. 들어가며 — 왜 이 결과가 나왔는지 모르면

이번 727편은 검색어와 일치하는 항목을 강조표시하라는 규칙입니다.

검색 결과에서 — 내가 친 검색어가 제목·설명 어디에 있는지 강조되면, 왜 이 결과가 나왔는지 한눈에 알죠. SP-053은 검색어 일치 강조를 규정합니다. 검색 결과 가독성의 핵심이죠. 이번 편을 풀어냅니다.

1. 원문 — 검색어 일치 강조표시

SP-053 (서비스 패턴 > 검색 > 검색 결과 이용) “검색어와 일치하는 항목을 강조표시하고 있다.”

검색 결과에서 검색어와 일치하는 부분을 강조표시하라는 뜻입니다.

정리: 검색 결과에서 검색어 일치 부분을 강조표시하라. 이게 SP-053입니다.

2. 왜 검색어 강조인가

검색 결과의 제목·설명(SP-051)에는, 사용자가 친 검색어가 포함돼 있습니다(그래서 결과로 나왔죠). 이 검색어가 어디 있는지 강조되면, 사용자는 왜 이 결과가 나왔는지, 어디가 검색어와 일치하는지 한눈에 압니다. SP-053은 검색어 강조를 요구합니다.

검색어 강조가 없을 때의 문제:

관련성 안 보임 결과의 제목·설명에서, 검색어가 강조 안 되면, 사용자는 왜 이 결과가 나왔는지, 어디가 검색어와 일치하는지 일일이 찾아야 합니다.

빠른 판단 어려움 검색어 위치가 안 보이면, 이 결과가 원하는 건지 빨리 판단 못 하죠.

그래서 SP-053은 — 검색어 강조를 요구합니다:

일치 부분 강조 결과 제목·설명에서, 검색어와 일치하는 부분을 강조표시합니다. 흔히 굵게(<strong>)· 하이라이트(배경색)·색상으로요. 사용자가 검색어가 어디 있는지 한눈에 보죠. ‘서울시 민원’ 검색 → 결과에 ’서울시 민원 안내’처럼요.

관련성 가시화 강조로 이 결과가 검색어와 어떻게 관련되는지를 보여줍니다. 짧은 설명(SP-051)에서도, 검색어 강조로 관련성을 빠르게 알게요.

색만 의존 금지 강조를 색만으로 하면 색각 이상 사용자가 못 알아챕니다(WCAG 1.4.1). 굵게(<strong>)·하이 라이트 등 색 외 단서를 함께요. 의미적 강조(<strong>/<mark>)로 스크린 리더도 인지하게요.

과하지 않게 강조를 적절히요. 검색어가 너무 많이 나오면, 전부 강조해 산만할 수 있으니 적절히 조절하죠.

검색 결과 스니펫의 핵심. 검색어 강조는, 좋은 결과 스니펫(SP-051)의 핵심 요소입니다. 짧은 제목·설명 + 검색어 강조로, 사용자가 ’이 결과가 왜·어떻게 관련되는지’를 빠르게 파악하죠. 검색 엔진(구글 등)이 흔히 쓰는 패턴입니다.

<mark> 요소. HTML <mark> 요소는, 검색어 하이라이트 같은 ’문맥상 강조’에 적합합니다. 시각적 하이라이트 + 의미적 강조를 함께 주죠. 또는 <strong>(중요)로요.

이 규칙은 검색(SP)의 ’검색어 가시화’를 담당합니다 — 검색어 일치 부분을 강조표시해(053), 사용자가 왜 이 결과가 나왔 는지·어디가 일치하는지 한눈에 알고 빠르게 판단하게 하죠.

정리하면 — 검색어가 결과 어디에 있는지 안 보이면 관련성을 빨리 못 보므로, 결과 제목·설명에서 검색어 일치 부분을 (색만 아닌 굵게·하이라이트로) 강조표시해야 합니다.

3. 점검 / 개선

무엇을 점검하나

일치 강조 — 결과 제목·설명에서 검색어 일치 부분이 강조되는가.

색 외 단서 — 강조가 색만 아닌 굵게·하이라이트인가(WCAG 1.4.1).

적절함 — 강조가 과하지 않고 의미적(<mark>/<strong>)인가.

개선 방향

결과 제목·설명에서 검색어 일치 부분 강조(<mark>/<strong>·하이라이트).

색만 의존 금지(WCAG 1.4.1). 과하지 않게. 스크린 리더 인지.

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

역할	책임
퍼블리셔/개발	검색어 강조 구현
디자이너	강조 스타일

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

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

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 결과 제목·설명에서 검색어 일치 부분이 강조되나요?

□ 강조가 색만 아닌 굵게·하이라이트인가요(WCAG 1.4.1)?

□ 강조가 과하지 않고 의미적(<mark>/<strong>)인가요?

❓ FAQ

Q1. 검색어 강조가 왜 필요한가요? 결과에서 검색어가 어디 있는지 강조되면 왜 이 결과가 나왔는지, 어디가 일치하는지 한눈에 압니다. 빠른 판단을 돕죠. Q2. 어떻게 강조하나요? 굵게(<strong>)·하이라이트(<mark>, 배경색)로요. 색만 의존하면 색각 이상 사용자가 못 보니(WCAG 1.4.1) 굵게도 함께요. 의미적 요소로 스크린 리더도 인지하게요. Q3. 검색어가 많이 나오면요? 전부 강조하면 산만할 수 있어 적절히 조절합니다. 핵심 일치 부분 위주로요.

6. 마무리

SP-053의 메시지:

검색어가 어디 있는지 표시하기 — 검색어 일치 부분을 강조표시하라.

검색어가 결과 어디에 있는지 안 보이면 관련성을 빨리 못 봅니다. 검색어 일치 부분을 강조해 왜 이 결과가 나왔는지 한눈에 알게 하는 게 핵심이죠. 다음 편은 기본 결과 목록 10개 이상입니다.

다음 편 예고 ▶ 「728. (SP-054) 기본 검색 결과 목록에 표시되는 항목의 수를 10개 이상으로 제공하고 있다.」

ViewCheck는 검색어 일치 부분이 강조표시되는지를 진단합니다.

📚 참고 출처

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

WCAG 2.1 SC 1.4.1 Use of Color — https://www.w3.org/WAI/WCAG21/Understanding/use-of-color.html

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

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