진짜 기다릴 때만

KRDS CP-328 — 스피너는 실제 대기 상태가 필요한 경우에 사용하고 있다.

0. 들어가며 — 빙글빙글 로딩 아이콘

이번 448편부터 스피너(Spinner) 그룹입니다. 첫 규칙은 스피너를 실제 대기 상태가 필요한 경우에만 사용 하라는 규칙입니다.

스피너는 — 처리 시간이 걸리는 작업 동안 빙글빙글 돌며 ’기다리는 중’을 알리는 로딩 인디케이터입니다. 그런데 — 대기가 필요 없는데도 습관적으로 스피너를 띄우거나, 불필요하게 오래 돌리면 사용자가 헷갈리죠. CP-328은 스피너를 ’진짜 대기가 필요할 때’만 쓰라고 규정합니다. 이번 편을 풀어냅니다.

1. 원문 — 실제 대기 상태에만 사용

CP-328 (컴포넌트 > 스피너) “스피너는 실제 대기 상태가 필요한 경우에 사용하고 있다.”

스피너를, 실제로 처리 시간이 걸려 사용자가 기다려야 하는 상황에만 사용하라는 뜻입니다.

정리: 스피너는 진짜 대기가 필요할 때만 쓰라. 이게 CP-328입니다.

2. 왜 실제 대기 상태에만인가

스피너(Spinner)는 처리 시간이 걸리는 작업 동안 ‘시스템이 작동 중이고, 곧 결과가 나온다’를 알리는 로딩 인디케이터입니다. 데이터를 불러오거나, 폼을 제출하거나, 서버 응답을 기다릴 때 빙글빙글 돌죠. 그 목적은 사용자 불안(’멈춘 건가?’)을 줄이고 기다림을 안내하는 것입니다. 그래서 실제 대기가 있을 때 써야 의미가 있죠.

부적절한 스피너 사용의 문제:

대기가 없는데 띄움 — 즉시 끝나는 작업(거의 0초)에 스피너를 띄우면 — 깜빡하고 사라져 화면이 번쩍이죠. 오히려 산만하고, 없는 대기를 있는 것처럼 보이게 합니다.

습관적 남용 — 모든 클릭마다 스피너를 띄우면 — 사용자가 ‘또 기다려야 하나’ 하고 피로해집니다. 스피너가 ’정말 기다려야 하는 신호’라는 의미가 희석되죠.

불확정 스피너로 진짜 진행 숨김 진행률을 알 수 있는 작업(파일 업로드 등)인데 그냥 도는 스피너(불확정)만 쓰면, 사용자가 얼마나 남았는지 모릅니다. 이런 경우는 진행률 바(determinate)가 더 적합하죠.

그래서 CP-328은 — 스피너를 실제 대기가 필요한 경우에 쓰라고 합니다:

처리 시간이 있는 작업 — 데이터 로딩, 폼 제출, 서버 응답 대기 등 — 사용자가 실제로 기다려야 하는 작업에 스피너를 띄웁니다.

즉시 끝나면 생략 — 거의 즉시 끝나는 작업엔 — 스피너를 띄우지 않거나, 아주 짧은 지연 후에만 표시(예: 처리가 300ms 이상 걸릴 때만 스피너 표시)해, 깜빡임을 피하죠.

진행률을 알면 진행 바 — 진행 상태를 측정할 수 있으면(업로드 %) — 불확정 스피너 대신 진행률 바를 고려합니다. 스피너는 ’얼마나 걸릴지 모르는 불확정 대기’에 적합하죠.

스피너의 종류. 스피너는 크게 — ①불확정(indeterminate): 얼마나 걸릴지 모를 때 그냥 도는 것, ②확정 (determinate): 진행률을 호(arc)로 표시하는 것이 있습니다. CP-328은 — ’대기가 있을 때’라는 용도 자체를 다루고, 대기 성격(불확정/확정)에 맞는 형태를 고르는 건 후속 맥락이죠.

이 규칙은 스피너의 ’용도 정의’를 담당합니다 — 실제 대기가 있을 때만 스피너를 써(328), ’기다리는 중’이라는 신호의 의미를 지키죠. 이후 스피너 규칙들(크기·배치·애니메이션·개수·대비·접근성)이 이 위에 쌓입니다.

정리하면 — 스피너는 ’기다리는 중’을 알리는 로딩 인디케이터이므로, 실제 처리 시간이 있는 대기 상황에만 사용하고 즉시 끝나는 작업이나 진행률을 알 수 있는 작업엔 부적절하게 쓰지 말아야 합니다.

3. 점검 / 개선

무엇을 점검하나

실제 대기 — 스피너가 실제 처리 시간이 있는 작업에 쓰이는가.

즉시 작업 배제 — 거의 즉시 끝나는 작업에 불필요한 스피너가 없는가(깜빡임).

진행률 작업 — 진행률을 알 수 있는 작업에 진행 바를 고려했는가.

개선 방향

처리 시간 있는 작업(로딩·제출·응답 대기)에 스피너. 즉시 작업엔 생략 또는 지연 표시(예: 300ms+).

진행률 측정 가능하면 진행률 바 고려.

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

역할	책임
기획/UX	대기 상황·스피너 사용 정책
퍼블리셔/개발	스피너 표시 조건 구현

기관 유형	CP-328 적용
중앙행정기관(대표·운영) / 공공기관 / 지자체	✅ 필수 (스피너 사용 시)

로딩·제출 처리가 있는 모든 사이트가 해당됩니다.

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 스피너가 실제 처리 시간이 있는 작업에 쓰이나요?

□ 거의 즉시 끝나는 작업에 불필요한 스피너가 없나요(깜빡임)?

□ 진행률을 알 수 있는 작업에 진행 바를 고려했나요?

❓ FAQ

Q1. 모든 버튼 클릭에 스피너를 띄우면 안 되나요? 대기가 없는데 띄우면 깜빡이고 산만합니다. 실제 처리 시간이 있을 때만 띄우죠. Q2. 깜빡임을 어떻게 피하나요? 처리가 일정 시간(예: 300ms) 이상 걸릴 때만 스피너를 표시하면 짧은 작업의 깜빡 임을 피합니다. Q3. 진행률 바와 스피너는 어떻게 고르나요? 진행률을 알 수 있으면(업로드 %) 진행률 바, 얼마나 걸릴지 모르면 불확정 스피너입니다.

6. 마무리

CP-328의 메시지:

진짜 기다릴 때만 — 스피너는 실제 대기 상태가 필요한 경우에 사용하라.

스피너는 ’기다리는 중’을 알리는 로딩 인디케이터입니다. 실제 대기가 있을 때만 써서 그 신호의 의미를 지키고, 즉시 작업·진행률 작업엔 부적절하게 쓰지 않는 게 핵심이죠. 다음 편은 스피너 크기입니다.

다음 편 예고 ▶ 「449. (CP-329) 상황에 맞는 적절한 크기의 스피너를 사용하고 있다.」

ViewCheck는 스피너가 실제 대기 상태에 적절히 사용되는지를 진단합니다.

📚 참고 출처

KRDS 컴포넌트 — 스피너(Spinner) 가이드 — https://www.krds.go.kr/html/site/component/component_32.html

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

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