검색할 때 주변은 어둡게

KRDS SP-017 — 검색어 입력 필드와 실시간 검색어 제안 레이어를 제외한 나머지 영역의 명도나 불투명도를 낮추어 사용자가 검색어 입력 행동에 집중할 수 있도록 하고 있다.

0. 들어가며 — 검색어 입력 단계의 시작

이번 691편부터 검색 그룹의 둘째 단계 ‘검색어 입력’(SP-017~030)입니다. 검색어를 어떻게 넣게 할지의 규칙들이죠. 첫 편 SP-017은 — 검색어 입력 필드와 제안 레이어를 제외한 나머지 영역의 명도·불투명도를 낮추어 검색에 집중하게 하라는 규칙입니다.

검색을 시작하면 — 주변 화면이 그대로면 산만하죠. 주변을 어둡게(딤) 하면 검색에 집중됩니다. 이번 편을 풀어냅니다.

1. 원문 — 주변 딤 처리로 집중

SP-017 (서비스 패턴 > 검색 > 검색어 입력) “검색어 입력 필드와 실시간 검색어 제안 레이어를 제외한 나머지 영역의 명도나 불투명도를 낮추어 사용자가 검색어 입력 행동에 집중할 수 있도록 하고 있다.”

검색 입력·제안 외 영역을 어둡게 해 검색에 집중하게 하라는 뜻입니다.

정리: 검색 시 주변을 어둡게(딤) 해 검색에 집중하게 하라. 이게 SP-017입니다.

2. 왜 주변 딤인가

검색어를 입력하는 순간, 사용자는 검색에 집중해야 합니다. 검색어를 떠올리고, 입력하고, 제안을 보죠. 그런데 주변 화면이 그대로 밝고 복잡하면, 시선이 분산됩니다. SP-017은 주변을 딤(어둡게) 해 집중을 돕습니다.

주변이 그대로일 때의 문제:

산만함 검색을 시작했는데, 뒤 화면(메뉴·콘텐츠·배너)이 그대로 보이면, 시선이 분산됩니다. 검색에 집중 못 하죠.

제안 가림·혼동 실시간 검색어 제안 레이어가, 뒤 콘텐츠와 겹쳐 보이면, 제안이 잘 안 보이거나 헷갈립니다.

그래서 SP-017은 — 주변 딤 처리를 요구합니다:

입력·제안 외 딤 검색어 입력 필드와 실시간 검색어 제안 레이어는 밝게(선명하게) 두고, 그 외 나머지 영역 의 명도·불투명도를 낮춥니다(어둡게·반투명 오버레이). 검색 관련 요소만 돋보이게요.

집중 유도 주변이 어두워지면, 사용자의 시선이 자연히 밝은 검색 영역에 모입니다. 검색에 집중하게요.

제안 부각 검색어 제안 레이어가 어두운 배경 위에 떠, 명확히 보이죠. 사용자가 제안을 잘 보고 고릅니다.

모달·오버레이 패턴. 이는 모달(CP-141~148)의 배경 딤(dimmed overlay) 패턴과 같습니다. 모달이 뜰 때 배경을 어둡게 해 모달에 집중시키듯, 검색을 시작하면 주변을 어둡게 해 검색에 집중시키죠. 검색을 일종의 집중 모드로요.

접근성 유의. 딤 처리해도 검색 영역(입력·제안)의 명도 대비(BP-057)는 충분해야 합니다. 그리고 딤 배경 클릭· ESC로 검색 집중 모드를 빠져나가게 하고(모달 탈출), 키보드 초점은 검색 영역에 두죠(초점 관리). 딤이 접근성을 해치면 안 됩니다.

SP-014와의 연계. SP-014(평소 검색 주변 최소화) + SP-017(검색어 입력 시 주변 딤)이 함께 검색 집중을 돕습니다. 평소엔 깔끔하게, 입력 시엔 더 집중되게요. 검색 집중 환경을 두 규칙이 완성하죠.

이 규칙은 검색(SP)의 ’검색 집중’을 담당합니다 — 검색어 입력 시 주변을 딤 처리해(017), 사용자가 검색·제안에 집중하게 하죠. 검색어 입력 단계의 환경 규칙입니다.

정리하면 — 검색어 입력 시 주변이 그대로 밝으면 산만하고 제안이 안 보이므로, 입력 필드·제안 레이어를 제외한 영역의 명도·불투명도를 낮춰(딤) 검색에 집중하게 하되 접근성을 유지해야 합니다.

3. 점검 / 개선

무엇을 점검하나

주변 딤 — 검색어 입력 시 입력·제안 외 영역이 어두워지는가.

제안 부각 — 검색어 제안 레이어가 명확히 보이는가.

접근성 — 딤 시 검색 영역 대비·ESC 탈출·초점 관리가 되는가.

개선 방향

검색 입력 시 입력·제안 외 영역 명도·불투명도 낮춤(딤 오버레이).

모달 딤 패턴. ESC·배경 클릭 탈출, 초점 관리. SP-014와 함께 집중.

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

역할	책임
디자이너	검색 집중 딤 디자인
퍼블리셔/개발	딤 오버레이·접근성 구현

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

실시간 검색·제안을 제공하는 사이트가 해당됩니다.

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 검색어 입력 시 입력·제안 외 영역이 어두워지나요?

□ 검색어 제안 레이어가 명확히 보이나요?

□ 딤 시 검색 영역 대비·ESC 탈출·초점 관리가 되나요?

❓ FAQ

Q1. 주변을 왜 어둡게 하나요? 검색을 시작하면 검색에 집중해야 하는데, 뒤 화면이 밝고 복잡하면 시선이 분산됩니다. 주변을 딤하면 검색 영역에 집중되고 제안도 잘 보이죠. Q2. 모달과 같은 패턴인가요? 네. 모달이 뜰 때 배경을 어둡게 해 집중시키듯, 검색을 시작하면 주변을 어둡게 해 검색에 집중시킵니다. 검색을 일종의 집중 모드로요. Q3. 딤이 접근성을 해치지 않나요? 검색 영역 대비를 충분히 유지하고(BP-057), ESC·배경 클릭으로 빠져나가게 하며, 초점을 검색 영역에 둡니다. 딤이 접근성을 해치면 안 되죠.

6. 마무리

SP-017의 메시지:

검색할 때 주변은 어둡게 — 입력·제안 외 영역을 딤 처리해 검색에 집중하게 하라.

검색어 입력 시 주변이 밝으면 산만하고 제안이 안 보입니다. 주변을 딤 처리해 검색·제안에 집중하게 하되 접근성을 유지 하는 게 핵심이죠. 다음 편은 범위 필터 ‘전체’ 기본값입니다.

다음 편 예고 ▶ 「692. (SP-018) 범위 필터는 항상 ‘전체’ 옵션을 제공하고 기본값을 ’전체’로 하여 모든 정보를 검색할 수 있도록 하고 있다.」

ViewCheck는 검색 시 주변 영역이 딤 처리되어 집중을 돕는지를 진단합니다.

📚 참고 출처

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

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

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