돌다 멈추면 고장난 줄

KRDS CP-331 — 불확정 스피너의 애니메이션의 루프를 중지하지 않고 있다.

0. 들어가며 — 스피너가 멈칫하면

이번 451편은 불확정 스피너의 애니메이션 루프를 중지하지 않게 하라는 규칙입니다.

불확정 스피너는 — 처리가 끝날 때까지 계속 돌아야 ‘아직 작동 중’을 알립니다. 그런데 — 애니메이션이 중간에 멈칫 하거나 끊기면, 사용자는 ’시스템이 멈췄나?’ 하고 불안해하죠. CP-331은 불확정 스피너가 처리 동안 끊김 없이 계속 돌게 하라고 규정합니다. 이번 편을 풀어냅니다.

1. 원문 — 애니메이션 루프 중지 금지

CP-331 (컴포넌트 > 스피너) “불확정 스피너의 애니메이션의 루프를 중지하지 않고 있다.”

불확정(계속 도는) 스피너의 회전 애니메이션이 처리 도중 멈추거나 끊기지 않고 계속 반복되게 하라는 뜻입니다.

정리: 불확정 스피너 애니메이션을 처리 동안 멈추지 마라. 이게 CP-331입니다.

2. 왜 루프를 중지하지 않나

스피너에는 — 두 종류가 있습니다(CP-328):

불확정 스피너(indeterminate) — 얼마나 걸릴지 모를 때 계속 도는 스피너. 진행률을 표시하지 않고, ’아직 작동 중’만 알리죠.

확정 스피너(determinate) — 진행률을 호(arc)·퍼센트로 표시하는 스피너.

CP-331은 불확정 스피너를 다룹니다. 불확정 스피너의 핵심은 끊임없이 도는 것으로 ’시스템이 살아 있고 작동 중’을 전하는 것입니다. 그래서 처리가 끝날 때까지 애니메이션이 멈추지 않고 계속 돌아야 하죠.

애니메이션이 멈출 때의 문제:

멈춘 줄 오해 — 불확정 스피너가 — 처리 도중 멈칫하거나 정지하면, 사용자는 ‘시스템이 멈췄다/고장났다’고 오해합니다. 스피너의 회전이 곧 ’작동 중’의 신호인데, 멈추면 정반대 메시지(’멈춤’)를 주죠. 사용자는 페이지를 새로고침하거나 떠납니다.

끊김(버벅임) — 애니메이션이 부드럽게 안 돌고 — 끊기거나 버벅이면, 시스템이 과부하거나 멈춰가는 인상을 줍니다. 불안하죠.

이런 멈춤·끊김의 원인은 보통 메인 스레드 블로킹입니다. JavaScript로 무거운 동기 작업(대량 데이터 처리, 복잡한 렌더링)을 메인 스레드에서 하면 그 동안 화면(애니메이션 포함)이 멈추죠. 역설적으로 스피너를 띄운 바로 그 처리가 메인 스레드를 막아 스피너 자체가 멈추는 겁니다.

그래서 CP-331은 — 불확정 스피너 애니메이션을 끊김 없이 유지하라고 합니다:

CSS 애니메이션 사용 스피너 회전을 JavaScript가 아니라 CSS 애니메이션/transform으로 구현하면, 브라우저의 컴포지터 스레드(메인 스레드와 별개)에서 처리돼 메인 스레드가 바빠도 계속 부드럽게 돕니다. @keyframes

transform: rotate가 표준이죠.

메인 스레드 블로킹 회피 — 무거운 작업은 — 비동기(async)·웹 워커·청크 분할로 처리해 메인 스레드를 막지 않게 합니다. 그러면 스피너가 안 멈추죠.

처리 끝까지 유지 — 처리가 진행되는 내내 애니메이션을 멈추지 않고, 완료되면 스피너를 제거(또는 결과로 전환) 합니다.

진동·정지 의도 배제. 일부러 스피너를 잠깐 멈추는(예: 단계 사이) 디자인도 — 사용자에게 ’멈춤’으로 읽혀 혼란 스럽죠. 불확정 스피너는 — 처리 동안 일관되게 계속 도는 게 맞습니다.

모션 민감 사용자 고려(보강). 끊김 없는 회전이 원칙이되 — 모션에 민감한 사용자(전정 장애)를 위해 prefers- reduced-motion을 존중하는 대안(예: 회전 대신 페이드, 또는 정적 텍스트)도 고려할 수 있죠. 다만 — 이 규칙의 핵심은 ’불확정 스피너가 작동 중일 땐 멈추지 않는다’입니다.

이 규칙은 스피너의 ’신뢰성 있는 작동 신호’를 담당합니다 — 불확정 스피너를 끊김 없이 돌려(331), 사용자가 ’시스템이 살아 작동 중’임을 확신하게 하죠. 멈추면 정반대 메시지가 되니, 부드러운 루프 유지가 핵심입니다.

정리하면 — 불확정 스피너가 멈추면 사용자가 시스템이 고장난 줄 오해하므로, CSS 애니메이션과 메인 스레드 블로킹 회피로 처리 동안 끊김 없이 계속 돌게 해야 합니다.

3. 점검 / 개선

무엇을 점검하나

끊김 없는 회전 — 불확정 스피너가 처리 동안 멈춤·버벅임 없이 도는가.

CSS 애니메이션 — 회전이 CSS transform으로 구현돼 메인 스레드와 분리됐는가.

블로킹 회피 — 무거운 작업이 비동기·워커로 메인 스레드를 막지 않는가.

개선 방향

스피너 회전을 CSS @keyframes + transform: rotate로(메인 스레드 분리).

무거운 작업은 async·웹 워커·청크 분할로 블로킹 회피. 의도적 정지 제거.

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

역할	책임
퍼블리셔/개발	CSS 애니메이션·블로킹 회피 구현
QA	처리 중 스피너 멈춤·끊김 검증

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

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

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 불확정 스피너가 처리 동안 멈춤·버벅임 없이 도나요?

□ 회전이 CSS transform으로 구현돼 메인 스레드와 분리됐나요?

□ 무거운 작업이 비동기·워커로 메인 스레드를 막지 않나요?

❓ FAQ

Q1. 스피너가 왜 멈추나요? 보통 무거운 JavaScript 작업이 메인 스레드를 막아 화면(애니메이션)이 멈춥니다. 역설적으로 스피너를 띄운 그 처리가 스피너를 멈추죠. Q2. 어떻게 안 멈추게 하나요? 회전을 CSS 애니메이션으로 하고(컴포지터 스레드), 무거운 작업은 async·웹 워커로 메인 스레드를 비웁니다. Q3. 모션 민감 사용자는요? prefers-reduced-motion을 존중하는 대안(페이드·텍스트)을 고려하죠. 단, 작동 중일 땐 멈춤 신호를 주지 않는 게 핵심입니다.

6. 마무리

CP-331의 메시지:

돌다 멈추면 고장난 줄 — 불확정 스피너 애니메이션을 처리 동안 끊김 없이.

불확정 스피너가 멈추면 사용자가 시스템이 고장난 줄 오해합니다. CSS 애니메이션과 메인 스레드 블로킹 회피로 끊김 없이 계속 돌게 하는 게 핵심이죠. 다음 편은 한 화면 스피너 개수입니다.

다음 편 예고 ▶ 「452. (CP-332) 한 화면에 1개의 스피너만 표시될 수 있도록 적용하고 있다.」

ViewCheck는 불확정 스피너 애니메이션이 끊김 없이 유지되는지를 진단합니다.

📚 참고 출처

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

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

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