불러오는 중임을 알리기

KRDS SP-031 — 검색 결과가 표시되기 전에 로딩 상태에 대한 정보를 제공하고 있다.

0. 들어가며 — 검색 결과 확인 단계의 시작

이번 705편부터 검색 그룹의 셋째 단계 ‘검색 결과 확인’(SP-031~058)입니다. 검색 결과를 어떻게 보여줄지의 규칙들 이죠. 첫 편 SP-031은 — 검색 결과가 표시되기 전에 로딩 상태 정보를 제공하라는 규칙입니다.

검색을 실행했는데 — 결과가 뜰 때까지 아무 반응이 없으면, 사용자는 ‘안 되나?’ 불안하죠. 로딩 상태를 알리면 안심합니다. 이번 편을 풀어냅니다.

1. 원문 — 로딩 상태 정보 제공

SP-031 (서비스 패턴 > 검색 > 검색 결과 확인) “검색 결과가 표시되기 전에 로딩 상태에 대한 정보를 제공하고 있다.”

검색 결과 표시 전에 로딩 상태 정보를 제공하라는 뜻입니다.

정리: 검색 결과 표시 전 로딩 상태를 알려라. 이게 SP-031입니다.

2. 왜 로딩 상태 정보인가

검색을 실행하면, 결과를 불러오는 데 시간이 걸릴 수 있습니다(서버 조회·네트워크). 이 동안 화면에 아무 반응이 없으면, 사용자는 ‘검색이 된 건가?’, ‘멈췄나?’ 불안하죠. SP-031은 로딩 상태 정보를 요구합니다.

로딩 정보가 없을 때의 문제:

불안·혼란 검색을 눌렀는데, 결과가 뜰 때까지 아무 변화가 없으면, 사용자는 검색이 됐는지 모릅니다. ‘안 되나?’ 하고 버튼을 또 누르거나, 떠나죠.

중복 실행 반응이 없으면, 사용자가 검색을 여러 번 눌러 중복 요청이 생깁니다.

스크린 리더 미인지 결과가 동적으로 로딩되는데, 스크린 리더 사용자는 그 상태를 모르면 막막하죠.

그래서 SP-031은 — 로딩 상태 정보를 요구합니다:

로딩 표시 검색 실행 후 결과가 뜰 때까지, 로딩 상태를 보여줍니다. 스피너(로딩 인디케이터 CP-328~334), 스켈레톤(결과 자리 미리보기), ‘검색 중…’ 텍스트 등으로요. 사용자가 ’불러오는 중’임을 알게요.

즉각 피드백 검색을 누른 즉시 로딩이 보이게요. 반응이 바로 있어야, 사용자가 안심하고 기다리죠.

스크린 리더 안내 로딩 상태를, 스크린 리더에도 알립니다. ’검색 중’을 aria-live로요(BP-049·BP-103 정신). 결과가 뜨면, 결과 수도 알리고요(SP의 결과 수 안내).

적절한 시점 전환 결과가 준비되면, 로딩을 결과로 전환합니다. 로딩이 너무 오래 걸리면, 추가 안내(예: ‘시간이 걸리고 있습니다’)도요.

로딩 인디케이터 컴포넌트(CP). 스피너·프로그레스 등 — 로딩 인디케이터 컴포넌트(CP-328~334)를, 검색 로딩에 활용 합니다. 컴포넌트 — 규칙(크기·위치·접근성)을 따르죠.

스켈레톤 vs 스피너. 로딩 — 표시 방식:

스피너 — 돌아가는 인디케이터. 간단하죠.

스켈레톤 결과 레이아웃의 회색 틀을 미리 보여줌. 결과가 어떻게 뜰지 예고해, 체감 대기가 짧죠.

검색 결과 — 로딩엔 둘 다 쓰입니다. 결과 — 성격에 맞게요.

체감 성능. 로딩 표시는, 실제 속도를 빠르게 하진 않지만, 체감 대기를 줄입니다. 진행 중임을 알면, 사용자 는 덜 불안하고 기다리죠. 좋은 로딩 UX는, 검색 경험을 부드럽게 합니다.

이 규칙은 검색(SP)의 ’결과 로딩 피드백’을 담당합니다 — 결과 표시 전 로딩 상태를 알려(031), 사용자가 검색이 진행 중 임을 알고 안심하게 하죠. 검색 결과 확인 단계의 출발점입니다.

정리하면 — 검색 후 결과가 뜰 때까지 반응이 없으면 사용자가 불안하고 중복 실행하므로, 로딩 상태(스피너·스켈레톤·‘검색 중’, 스크린 리더 안내 포함)를 즉각 표시해야 합니다.

3. 점검 / 개선

무엇을 점검하나

로딩 표시 — 검색 후 결과 전 로딩 상태(스피너·스켈레톤·텍스트)가 뜨는가.

즉각 피드백 — 검색 누른 즉시 로딩이 보이는가.

스크린 리더 — 로딩·결과 상태가 스크린 리더에 안내되는가(aria-live).

개선 방향

검색 후 즉각 로딩 표시(스피너·스켈레톤·‘검색 중’, CP-328~334).

aria-live로 로딩·결과 안내. 긴 로딩은 추가 안내.

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

역할	책임
퍼블리셔/개발	로딩 상태·접근성 구현
기획/UX	로딩 방식 설계

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

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

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 검색 후 결과 전 로딩 상태(스피너·스켈레톤·텍스트)가 뜨나요?

□ 검색 누른 즉시 로딩이 보이나요?

□ 로딩·결과 상태가 스크린 리더에 안내되나요(aria-live)?

❓ FAQ

Q1. 로딩 표시가 왜 필요한가요? 검색 후 결과가 뜰 때까지 반응이 없으면 사용자는 ‘안 되나?’ 불안하고 버튼을 또 누릅니다. 로딩을 보여주면 진행 중임을 알고 안심하죠. Q2. 스피너와 스켈레톤 중 뭘 쓰나요? 스피너는 간단, 스켈레톤은 결과 레이아웃 틀을 미리 보여줘 체감 대기가 짧습니다. 검색 결과 성격에 맞게 택하거나 함께 쓰죠. Q3. 스크린 리더에도 알리나요? 네. ’검색 중’을 aria-live로 알리고, 결과가 뜨면 결과 수도 안내합니다(BP-103). 동적 로딩을 스크린 리더 사용자도 인지하게요.

6. 마무리

SP-031의 메시지:

불러오는 중임을 알리기 — 검색 결과 표시 전 로딩 상태를 제공하라.

검색 후 반응이 없으면 사용자가 불안하고 중복 실행합니다. 로딩 상태를 즉각 표시해 진행 중임을 알리는 게 핵심이죠. 다음 편은 검색 결과 화면 검색어 입력 필드 유지입니다.

다음 편 예고 ▶ 「706. (SP-032) 검색 결과 화면에 검색어 입력 필드를 유지하고 있다.」

ViewCheck는 검색 결과 표시 전 로딩 상태 정보가 제공되는지를 진단합니다.

📚 참고 출처

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

WCAG 2.1 SC 4.1.3 Status Messages — https://www.w3.org/WAI/WCAG21/Understanding/status-messages.html

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

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