제안도 종류별로 묶어서

KRDS SP-030 — 자동완성이나 추천 검색어 목록을 계층화하여 제공하고 있다.

0. 들어가며 — 검색어 입력 단계의 마지막

이번 704편은 자동완성이나 추천 검색어 목록을 계층화하여 제공하라는 규칙입니다. 검색 그룹의 둘째 단계 ‘검색어 입력’(SP-017~030)의 마지막이죠.

자동완성·추천·인기·최근 검색어가 — 한데 뒤섞여 나오면 무엇이 무엇인지 헷갈리죠. 종류별로 묶어(계층화) 보여주면 명확 합니다. SP-030은 제안 목록 계층화를 규정합니다. 이번 편을 풀어냅니다.

1. 원문 — 제안 목록 계층화

SP-030 (서비스 패턴 > 검색 > 검색어 입력) “자동완성이나 추천 검색어 목록을 계층화하여 제공하고 있다.”

자동완성·추천 검색어 목록을 계층화(분류)하여 제공하라는 뜻입니다.

정리: 제안 목록을 종류별로 계층화하여 제공하라. 이게 SP-030입니다.

2. 왜 제안 계층화인가

검색어 입력 도움(SP-022)에는, 여러 종류가 있습니다: 자동완성, 추천 검색어, 인기 검색어, 최근 검색어, 카테고리별 제안 등이요. 이들이 한 목록에 뒤섞여 나오면, 사용자는 무엇이 무엇인지 헷갈리죠. SP-030은 계층화(분류)를 요구 합니다.

제안이 뒤섞일 때의 문제:

종류 구분 안 됨 자동완성·추천·인기·최근 검색어가 한데 섞여 나오면, 사용자는 이게 내가 친 것의 완성인지, 추천인지, 인기인지 모릅니다. 제안의 성격을 모르면, 신뢰·선택이 어렵죠.

혼란·과부하 분류 없는 긴 제안 목록은, 인지 부담이 큽니다. 무엇을 봐야 할지 막막하죠.

그래서 SP-030은 — 계층화를 요구합니다:

종류별 그룹 제안을 종류별로 묶습니다. ‘자동완성’, ‘추천 검색어’, ‘인기 검색어’, ’최근 검색어’처럼 그룹 으로요. 각 그룹에 헤딩(제목)을 달아, 사용자가 무슨 제안인지 알게요(군집화 BP-095·그룹 헤딩 BP-092 정신).

계층 구조 그룹 안에 항목을, 그룹 간에 구분(헤딩·간격)을 둡니다. 사용자가 제안의 구조를 한눈에 파악 하게요.

우선순위 배열 그룹들을 유용성 순으로 배열합니다(자동완성 먼저, 인기 검색어 등). 가장 관련 있는 걸 위에요.

카테고리 분류(선택) 추천 검색어를, 카테고리별(예: ‘민원’, ‘정책’)로 분류하기도 하죠. 사용자가 관심 영역의 제안을 찾게요.

계층화의 효과:

명확성 — 제안의 — 종류·성격을 알아, 신뢰하고 고르죠.

빠른 탐색 — 종류별로 — 묶이니, 원하는 종류의 제안을 빨리 찾습니다.

인지 부담 감소 — 분류된 — 목록은, 처리하기 쉽죠.

접근성과 계층화. 계층화된 제안은, 스크린 리더에도 구조로 전달돼야 합니다(SP-028). 그룹 헤딩·목록 구조를 시맨틱·ARIA로요(‘자동완성 그룹, 3개’, ‘추천 검색어 그룹, 5개’). 시각적 계층 + 시맨틱 계층이 함께죠.

검색어 입력 단계의 마무리. ‘검색어 입력’ 단계(SP-017~030)는 집중(017)·범위(018)·너비(019)·레이블(020·021)· 입력 도움(022024)·접근성(025029)·계층화(030)까지, 검색어를 어떻게 넣게 할지를 다뤘습니다. SP-030은 그 마무리 죠.

이 규칙은 검색(SP)의 ’제안 구조화’를 담당합니다 — 제안 목록을 계층화해(030), 사용자가 제안의 종류를 알고 빨리 찾게 하죠. 검색어 입력 단계의 마무리입니다.

정리하면 — 자동완성·추천·인기·최근 검색어가 뒤섞이면 종류 구분이 안 되고 혼란스러우므로, 종류별 그룹·헤딩으로 계층화 하고 우선순위로 배열(접근성 포함)해 제공해야 합니다.

3. 점검 / 개선

무엇을 점검하나

종류별 그룹 — 제안이 자동완성·추천·인기·최근 등 종류별로 묶이는가.

그룹 헤딩 — 각 그룹에 제목·구분이 있는가(BP-092).

접근성 — 계층 구조가 스크린 리더에 전달되는가(시맨틱·ARIA).

개선 방향

제안을 종류별 그룹 + 헤딩으로 계층화. 우선순위 배열.

시각 + 시맨틱 계층(스크린 리더 전달). 카테고리 분류(선택).

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

역할	책임
기획/UX	제안 계층 구조 설계
퍼블리셔/개발	계층화·접근성 구현

기관 유형	SP-030 적용
중앙행정기관(대표·운영) / 공공기관 / 지자체	✅ 권장 (다양한 제안 제공 시)

여러 종류의 검색 제안을 제공하는 사이트가 해당됩니다.

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 제안이 자동완성·추천·인기·최근 등 종류별로 묶이나요?

□ 각 그룹에 제목·구분이 있나요(BP-092)?

□ 계층 구조가 스크린 리더에 전달되나요(시맨틱·ARIA)?

❓ FAQ

Q1. 제안이 뒤섞이면 왜 문제인가요? 자동완성·추천·인기·최근이 한데 섞이면 무엇이 무엇인지 모릅니다. 제안 성격을 모르면 신뢰·선택이 어렵고 인지 부담도 크죠. 종류별로 묶어야 명확합니다. Q2. 어떻게 계층화하나요? ‘자동완성’, ‘추천 검색어’, ‘인기 검색어’, ‘최근 검색어’ 그룹으로 묶고 각 그룹에 헤딩을 답니다(BP-092·095). 유용성 순으로 배열하고요. Q3. 스크린 리더에도 계층을 전달하나요? 네. 그룹 헤딩·목록 구조를 시맨틱·ARIA로 전달합니다(‘자동완성 그룹 3개’ 등). 시각 계층 + 시맨틱 계층이 함께여야 하죠(SP-028).

6. 마무리

SP-030의 메시지:

제안도 종류별로 묶어서 — 자동완성·추천 검색어 목록을 계층화하여 제공하라.

제안이 뒤섞이면 종류 구분이 안 되고 혼란스럽습니다. 종류별 그룹·헤딩으로 계층화해 명확하게 하는 게 핵심이죠. ‘검색어 입력’ 단계가 끝났습니다. 다음 편부터는 ‘검색 결과 확인’ 단계입니다.

다음 편 예고 ▶ 「705. (SP-031) 검색 결과가 표시되기 전에 로딩 상태에 대한 정보를 제공하고 있다.」

ViewCheck는 제안 목록이 계층화되어 제공되는지를 진단합니다.

📚 참고 출처

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

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

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