누구나 아는 검색 모양으로

KRDS SP-012 — 통합 검색 기능은 검색어 입력 필드와 돋보기 버튼의 조합 또는 돋보기 버튼 형태로 사용하고 있다.

0. 들어가며 — 검색이 검색처럼 안 생기면

이번 686편은 통합 검색 기능은 검색어 입력 필드와 돋보기 버튼의 조합 또는 돋보기 버튼 형태로 사용하라는 규칙 입니다.

검색이 — 누구나 아는 표준 모양(입력창 + 돋보기, 또는 돋보기 아이콘)이 아니면, 사용자는 그게 검색인 줄 모르죠. SP-012는 표준 검색 형태를 규정합니다. 관습적 UI로 직관성을 주는 거죠. 이번 편을 풀어냅니다.

1. 원문 — 입력 필드 + 돋보기 / 돋보기 형태

SP-012 (서비스 패턴 > 검색 > 검색 기능 찾기) “통합 검색 기능은 검색어 입력 필드와 돋보기 버튼의 조합 또는 돋보기 버튼 형태로 사용하고 있다.”

검색을 입력 필드 + 돋보기 조합, 또는 돋보기 버튼 형태로 제공하라는 뜻입니다.

정리: 검색을 입력창+돋보기 또는 돋보기 형태로 제공하라. 이게 SP-012입니다.

2. 왜 표준 형태인가

검색 기능의 생김새가, 사용자가 ’이게 검색이구나’를 인지하는 단서입니다. 검색이 누구나 아는 표준 모양이면, 사용자는 바로 검색임을 알죠. SP-012는 두 가지 표준 형태를 정합니다.

검색이 비표준 모양일 때의 문제:

검색 인지 못 함 검색이 표준 모양이 아니면(예: 그냥 텍스트 링크 ‘Search’, 특이한 아이콘), 사용자는 그게 검색인 줄 모릅니다. 검색을 못 찾죠.

혼란 검색처럼 안 생긴 검색은, 사용자가 다른 기능으로 오해할 수 있습니다.

그래서 SP-012는 — 두 표준 형태를 요구합니다:

① 입력 필드 + 돋보기 버튼 조합 검색어를 입력하는 필드(입력창)와, 옆에 돋보기(🔍) 버튼의 조합이요. 가장 명확한 검색 형태죠. 입력창이 보이니 ‘여기 검색어를 넣는구나’, 돋보기가 ’이게 검색이구나’를 알립니다. 공간이 충분한 화면(데스크톱 헤더, 검색 페이지)에 좋죠.

② 돋보기 버튼 형태 공간이 좁으면(모바일 헤더 등), 돋보기(🔍) 버튼만 두고, 누르면 입력창이 펼쳐지게요. 돋보기 아이콘은 검색의 만국 공통 기호라, 누구나 검색임을 압니다.

돋보기 = 검색 기호 돋보기(🔍)는 검색을 뜻하는 보편적·관습적 아이콘입니다. 이를 쓰면 별도 설명 없이도 검색임이 전달되죠.

왜 표준을 따르나. 검색의 표준 형태(입력창 + 돋보기)는, 사용자가 수많은 사이트에서 학습한 패턴입니다. 이를 따르면 사용자가 즉시 인지하죠. 독창적인 검색 UI는 멋져 보여도, 사용자를 헷갈리게 합니다. 검색 같은 핵심 기능은, 관습을 따르는 게 옳죠(제이콥의 법칙 사용자는 다른 사이트에서 배운 대로 기대).

접근성 돋보기 아이콘. 돋보기 아이콘만 쓸 때(② 형태), 그 아이콘이 키보드·스크린 리더로 접근 가능해야 하고 (SP-015), 접근가능한 이름(‘검색’)을 가져야 합니다(SP-016). 시각적 돋보기만으론, 스크린 리더 사용자가 모르죠.

이 규칙은 검색(SP)의 ’검색 형태 표준’을 담당합니다 — 검색을 입력창+돋보기 또는 돋보기 형태로 제공해(012), 사용자가 즉시 검색임을 인지하게 하죠. 관습적 UI로 직관성을 줍니다.

정리하면 — 검색이 비표준 모양이면 사용자가 검색인 줄 모르므로, 검색어 입력 필드 + 돋보기 조합(공간 충분 시)이나 돋보기 버튼 형태(공간 좁을 시)로 표준 검색 형태를 사용해야 합니다.

3. 점검 / 개선

무엇을 점검하나

표준 형태 — 검색이 입력창+돋보기 또는 돋보기 형태인가.

돋보기 기호 — 검색에 돋보기(🔍) 관습 아이콘을 쓰는가.

접근성 — 돋보기 아이콘이 접근 가능하고 이름이 있는가(SP-015·016).

개선 방향

공간 충분 시 입력창+돋보기, 좁으면 돋보기 버튼(누르면 펼침).

돋보기(🔍) 관습 아이콘. 접근가능한 이름·키보드(SP-015·016).

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

역할	책임
디자이너	검색 형태 디자인
퍼블리셔	표준 검색 UI 구현

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

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

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 검색이 입력창+돋보기 또는 돋보기 형태인가요?

□ 검색에 돋보기(🔍) 관습 아이콘을 쓰나요?

□ 돋보기 아이콘이 접근 가능하고 이름이 있나요(SP-015·016)?

❓ FAQ

Q1. 두 형태 중 뭘 쓰나요? 공간이 충분하면(데스크톱 헤더·검색 페이지) 입력창+돋보기 조합, 좁으면(모바일 헤더) 돋보기 버튼만 두고 누르면 입력창이 펼쳐지게 합니다. Q2. 독창적인 검색 UI는 안 되나요? 멋져 보여도 사용자가 검색인 줄 모를 수 있습니다. 검색 같은 핵심 기능은 관습 (입력창+돋보기)을 따라야 즉시 인지하죠. Q3. 돋보기 아이콘만 두면 충분한가요? 시각적으론요. 단 키보드·스크린 리더로 접근 가능하고(SP-015) 접근가능한 이름 (‘검색’)을 가져야(SP-016) 합니다. 시각만으론 부족하죠.

6. 마무리

SP-012의 메시지:

누구나 아는 검색 모양으로 — 검색을 입력창+돋보기 또는 돋보기 형태로 제공하라.

검색이 비표준 모양이면 사용자가 검색인 줄 모릅니다. 표준 검색 형태(입력창+돋보기/돋보기 버튼)로 즉시 인지하게 하는 게 핵심이죠. 다음 편은 부분 검색 배치입니다.

다음 편 예고 ▶ 「687. (SP-013) 부분 검색 기능은 콘텐츠 목록의 수준과 맥락을 고려하여 사용자가 예측할 수 있는 영역에 배치한다.」

ViewCheck는 검색이 표준 형태(입력창+돋보기/돋보기)로 제공되는지를 진단합니다.

📚 참고 출처

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

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

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