여러 개가 빙글빙글 돌면 정신없다

KRDS CP-332 — 한 화면에 1개의 스피너만 표시될 수 있도록 적용하고 있다.

0. 들어가며 — 화면 곳곳에서 도는 스피너들

이번 452편은 한 화면에 1개의 스피너만 표시되도록 적용하라는 규칙입니다.

화면 곳곳에서 여러 스피너가 동시에 빙글빙글 돌면 — 사용자는 어디에 집중해야 할지 모르고 산만하죠. 또 ‘뭐가 이렇게 로딩이 많지?’ 하고 불안해집니다. CP-332는 한 화면에 스피너를 1개로 제한하라고 규정합니다. 스피너 개수 절제 규칙이죠. 이번 편을 풀어냅니다.

1. 원문 — 한 화면 1개 스피너

CP-332 (컴포넌트 > 스피너) “한 화면에 1개의 스피너만 표시될 수 있도록 적용하고 있다.”

한 화면에서 동시에 여러 스피너가 돌지 않고, 1개의 스피너만 표시되게 적용하라는 뜻입니다.

정리: 한 화면에 스피너는 1개만. 이게 CP-332입니다.

2. 왜 한 화면 1개인가

스피너는 — 시선을 끄는 움직이는 요소입니다. 화면에 — 여러 스피너가 동시에 돌면, 그 시선 끌기가 충돌해 산만하고 혼란스럽죠. CP-332는 스피너 개수를 1개로 제한합니다.

여러 스피너가 동시에 돌 때의 문제:

시선 분산·산만 스피너는 움직임으로 시선을 끕니다. 여러 개가 동시에 돌면 시선이 여러 곳으로 분산돼, 사용자가 어디에 집중해야 할지 모르죠. 화면이 정신없습니다.

불안 가중 — 스피너가 여럿이면 — ‘뭐가 이렇게 로딩이 많지? 시스템이 느린가?’ 하는 불안을 키웁니다. 하나면 ’여기가 로딩 중’이라고 차분히 알리는데, 여럿이면 혼란스럽죠.

로딩 상태 불명확 — 여러 영역이 제각각 스피너를 돌리면 — ‘전체가 로딩 중인지, 일부만인지, 무엇을 기다리는 건지’ 파악이 어렵습니다.

그래서 CP-332는 — 한 화면에 스피너를 1개로 제한하라고 합니다. 여러 영역이 로딩될 때 처리법:

통합 스피너 — 여러 영역이 동시에 로딩되면 — 개별 스피너를 여럿 띄우지 말고, 하나의 대표 스피너(전체 영역 중앙 등)로 통합합니다. 사용자는 ’지금 로딩 중’을 하나의 신호로 차분히 알죠.

순차/우선 표시 — 여러 작업이 있으면 — 가장 중요한/현재 작업의 스피너 하나만 표시하고, 나머지는 그 안에 포함되게 처리합니다.

스켈레톤 등 대안 — 여러 콘텐츠 영역이 로딩될 땐 — 스피너 대신 스켈레톤 UI(콘텐츠 자리 회색 박스)를 쓰면, 움직이는 스피너 여럿의 산만함 없이 각 영역이 로딩 중임을 알릴 수 있죠. 스켈레톤은 스피너와 다른 패턴이라 ‘1개 스피너’ 제약과 충돌하지 않습니다.

예외적 맥락 구분. ’한 화면 1개’는 동시에 도는 스피너를 말합니다. 시간차로 한 스피너가 끝나고 다른 게 시작되는 건 괜찮죠(동시에 여럿이 아니므로). 핵심은 동시에 여러 스피너가 돌아 산만해지지 않게 하는 것입니다.

개수 절제의 일관성. 이는 — 태그 개수 절제(CP-306), 단계 표시기 적정 수(CP-321)처럼, 컴포넌트를 절제해 화면을 어지럽히지 않는 정신의 스피너 적용입니다. 움직이는 스피너는 특히 시선을 끌어 — 1개로 강하게 제한하죠.

이 규칙은 스피너의 ’시각적 절제’를 담당합니다 — 한 화면에 스피너를 1개로 제한해(332), 시선 분산·불안 없이 차분히 로딩을 알리죠. 여러 로딩은 통합 스피너나 스켈레톤으로 처리합니다.

정리하면 — 여러 스피너가 동시에 돌면 시선이 분산되고 불안이 커지므로, 한 화면에 스피너를 1개로 제한하고 여러 로딩은 통합 스피너나 스켈레톤 UI로 처리해야 합니다.

3. 점검 / 개선

무엇을 점검하나

1개 제한 — 한 화면에 동시에 도는 스피너가 1개인가.

통합 처리 — 여러 영역 로딩 시 통합 스피너로 묶었는가.

스켈레톤 대안 — 여러 콘텐츠 로딩에 스켈레톤 UI를 고려했는가.

개선 방향

동시 다중 스피너를 하나의 대표 스피너로 통합.

여러 콘텐츠 영역 로딩은 스켈레톤 UI로 대체(움직이는 스피너 여럿 회피).

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

역할	책임
기획/UX	로딩 패턴(통합 스피너/스켈레톤) 설계
퍼블리셔/개발	한 화면 1개 스피너 구현

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

스피너를 쓰는 모든 사이트가 해당됩니다.

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 한 화면에 동시에 도는 스피너가 1개인가요?

□ 여러 영역 로딩 시 통합 스피너로 묶었나요?

□ 여러 콘텐츠 로딩에 스켈레톤 UI를 고려했나요?

❓ FAQ

Q1. 여러 영역이 동시에 로딩되면요? 개별 스피너를 여럿 띄우지 말고 하나의 대표 스피너로 통합하거나, 스켈레톤 UI를 씁니다. Q2. 스켈레톤 UI는 스피너 1개 규칙에 안 걸리나요? 스켈레톤은 움직이는 스피너가 아닌 다른 로딩 패턴이라 충돌 하지 않습니다. 여러 영역에 써도 산만하지 않죠. Q3. 시간차로 스피너가 바뀌는 건요? 동시에 여럿이 아니면 괜찮습니다. 한 스피너가 끝나고 다른 게 시작되는 건 ‘동시 1개’ 제약에 안 걸리죠.

6. 마무리

CP-332의 메시지:

여러 개가 빙글빙글 돌면 정신없다 — 한 화면에 스피너는 1개만.

여러 스피너가 동시에 돌면 시선이 분산되고 불안이 커집니다. 한 화면에 1개로 제한하고, 여러 로딩은 통합 스피너나 스켈레톤 UI로 처리하는 게 핵심이죠. 다음 편은 스피너 명도 대비입니다.

다음 편 예고 ▶ 「453. (CP-333) 인접 배경과 경로 간 명도 대비, 경로와 식별자 간 명도 대비를 3:1 이상으로 표현하고 있다.」

ViewCheck는 한 화면에 스피너가 1개만 표시되는지를 진단합니다.

📚 참고 출처

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

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

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