기다리는 그곳에

KRDS CP-330 — 스피너는 처리가 진행 중인 영역 근처에 배치하고, 입력폼의 제출 처리 상태를 표시하기 위해 제출 버튼 내부에 스피너를 사용하고 있다.

0. 들어가며 — 스피너가 엉뚱한 곳에 있으면

이번 450편은 스피너를 처리가 진행 중인 영역 근처에 배치하고, 폼 제출 처리 상태는 제출 버튼 내부에 스피너로 표시하라는 규칙입니다.

스피너가 — 실제 처리되는 곳과 동떨어진 곳에 있으면, 사용자는 ‘무엇이 로딩 중인지’ 모르죠. 또 폼 제출 시 — 제출 버튼 안에 스피너를 넣으면, ’이 제출이 처리 중’임을 가장 직관적으로 알립니다. CP-330은 스피너의 배치 원칙과 제출 버튼 패턴을 규정합니다. 단계 표시기 근접 배치(CP-306 정신)의 스피너 버전이죠. 이번 편을 풀어냅니다.

1. 원문 — 진행 영역 근처 배치 + 제출 버튼 내부

CP-330 (컴포넌트 > 스피너) “스피너는 처리가 진행 중인 영역 근처에 배치하고, 입력폼의 제출 처리 상태를 표시하기 위해 제출 버튼 내부에 스피너를 사용하고 있다.”

스피너를 실제 처리가 일어나는 영역 가까이에 두고, 폼 제출의 처리 상태는 제출 버튼 안에 스피너로 표시하라는 뜻입니다.

정리: 스피너는 처리 영역 근처에, 폼 제출은 제출 버튼 안에. 이게 CP-330입니다.

2. 왜 진행 영역 근처·제출 버튼인가

스피너는 — ’여기가 처리 중이다’를 알립니다. 그래서 — 어디에 배치하느냐가 그 의미를 좌우하죠. CP-330은 배치 원칙과 폼 제출의 구체 패턴을 정합니다.

① 처리가 진행 중인 영역 근처 배치. 스피너는 — 실제로 로딩·처리되는 그 영역 가까이 둬야 합니다.

연결 인지 스피너가 로딩되는 콘텐츠 영역(목록·카드·표) 안이나 바로 옆에 있으면, 사용자는 ’아, 이 영역이 로딩 중이구나’를 즉시 압니다. 부분 로딩(특정 영역만 갱신)이면 그 영역에 스피너를 둬, 나머지는 그대로 쓸 수 있게요.

엉뚱한 배치의 문제 스피너가 처리 영역과 동떨어진 곳(화면 구석 등)에 있으면, 사용자는 ‘무엇이 로딩 중인지’ 모릅니다. 특히 한 영역만 로딩 중인데 화면 전체에 오버레이 스피너를 띄우면, 멀쩡한 다른 영역까지 막혀 불필요하게 기다리죠. 부분 로딩은 부분 스피너로요.

이는 — 근접성의 원리(단계 표시기 CP-306, 토글 레이블 CP-314)입니다. 관련된 것(처리·스피너)은 가까이 둬야 연결이 분명하죠.

② 폼 제출은 제출 버튼 내부 스피너. 입력 폼을 제출할 때(신청·로그인·검색) — 그 제출 버튼 안에 스피너를 넣는 게 표준 패턴입니다.

제출 처리 명확 — 사용자가 ‘제출’ 버튼을 누른 직후 — 버튼 텍스트가 스피너로 바뀌거나 텍스트 옆에 작은 스피너가 돌면, ’내 제출이 처리되고 있다’를 가장 직관적으로 압니다. 자신이 방금 누른 그 버튼에서 반응이 오니까요.

중복 제출 방지 — 제출 버튼 안에 스피너가 돌고 버튼이 비활성(disabled)되면 — 사용자가 처리 중에 또 누르는 중복 제출을 막죠. 처리 중임을 알리면서 재클릭을 방지합니다.

작은 크기 — 제출 버튼 안 스피너는 — 버튼 높이에 맞는 작은 크기(CP-329)여야 버튼을 안 깨뜨리죠.

배치 정리:

부분 영역 로딩 — 그 영역 안/옆에 스피너.

폼 제출 — 제출 버튼 내부에 스피너(+ 버튼 비활성).

전체 페이지 로딩 — 화면 중앙에 큰 스피너(CP-329).

핵심은 — 사용자가 ’기다리는 그 지점’에 스피너를 둬, 무엇이 처리 중인지 명확히 알리는 것입니다.

이 규칙은 스피너의 ’맥락적 배치’를 담당합니다 — 처리 영역 근처(또는 제출 버튼 안)에 스피너를 둬(330), 사용자가 무엇이 처리 중인지 알게 하죠. 크기(329)와 함께 스피너를 올바른 곳에 올바른 크기로 두는 것입니다.

정리하면 — 스피너가 처리 영역과 동떨어지면 무엇이 로딩 중인지 모르므로, 처리가 일어나는 영역 근처에 두고 폼 제출은 제출 버튼 내부에 스피너를 넣어(중복 제출도 방지) 처리 위치를 명확히 알려야 합니다.

3. 점검 / 개선

무엇을 점검하나

영역 근처 배치 — 스피너가 처리되는 영역 안/옆에 있는가(엉뚱한 곳 아님).

제출 버튼 스피너 — 폼 제출 시 제출 버튼 내부에 스피너가 표시되는가.

중복 제출 방지 — 제출 처리 중 버튼이 비활성되어 재클릭이 막히는가.

개선 방향

부분 로딩은 그 영역에 스피너. 전체는 화면 중앙. 엉뚱한 배치 교정.

폼 제출 시 제출 버튼 안 스피너 + 버튼 비활성(중복 제출 방지).

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

역할	책임
디자이너	스피너 배치·제출 버튼 패턴 정의
퍼블리셔/개발	영역별 배치·제출 버튼 스피너 구현

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

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

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 스피너가 처리되는 영역 안/옆에 있나요(엉뚱한 곳 아님)?

□ 폼 제출 시 제출 버튼 내부에 스피너가 표시되나요?

□ 제출 처리 중 버튼이 비활성되어 재클릭이 막히나요?

❓ FAQ

Q1. 한 영역만 로딩인데 전체 화면 스피너를 띄우면 안 되나요? 멀쩡한 다른 영역까지 막혀 불필요하게 기다립니다. 부분 로딩은 그 영역에 부분 스피너를 두죠. Q2. 왜 제출 버튼 안에 스피너를 넣나요? 사용자가 방금 누른 그 버튼에서 반응이 와 ’내 제출이 처리 중’임을 가장 직관적으로 압니다. 중복 제출도 막죠. Q3. 제출 버튼 스피너 크기는? 버튼 높이에 맞는 작은 크기입니다(CP-329). 크면 버튼이 깨지죠.

6. 마무리

CP-330의 메시지:

기다리는 그곳에 — 스피너를 처리 영역 근처에, 폼 제출은 제출 버튼 안에.

스피너가 처리 영역과 동떨어지면 무엇이 로딩 중인지 모릅니다. 처리 영역 근처에 두고, 폼 제출은 제출 버튼 내부에 스피너를 넣어 처리 위치를 알리고 중복 제출도 막는 게 핵심이죠. 다음 편은 불확정 스피너 애니메이션입니다.

다음 편 예고 ▶ 「451. (CP-331) 불확정 스피너의 애니메이션 루프를 중지하지 않고 있다.」

ViewCheck는 스피너가 처리 영역 근처·제출 버튼 내부에 배치됐는지를 진단합니다.

📚 참고 출처

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

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

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