작은 곳엔 작게, 큰 곳엔 크게

KRDS CP-329 — 상황에 맞는 적절한 크기의 스피너를 사용하고 있다.

0. 들어가며 — 버튼 안 스피너와 전체 화면 스피너

이번 449편은 상황에 맞는 적절한 크기의 스피너를 사용하라는 규칙입니다.

스피너는 — 쓰이는 맥락에 따라 적절한 크기가 다릅니다. 버튼 안의 작은 스피너, 카드 영역의 중간 스피너, 전체 화면 로딩의 큰 스피너. 맥락에 안 맞는 크기(버튼 안에 거대한 스피너)는 어색하고 레이아웃을 깨죠. CP-329는 상황에 맞는 스피너 크기를 규정합니다. 이번 편을 풀어냅니다.

1. 원문 — 상황에 맞는 적절한 크기

CP-329 (컴포넌트 > 스피너) “상황에 맞는 적절한 크기의 스피너를 사용하고 있다.”

스피너가 쓰이는 맥락(버튼 내부·영역·전체 화면 등)에 맞는 적절한 크기로 스피너를 사용하라는 뜻입니다.

정리: 스피너 크기를 쓰이는 상황에 맞게 적절히 하라. 이게 CP-329입니다.

2. 왜 상황에 맞는 크기인가

스피너는 — 다양한 맥락에서 쓰입니다. 작은 버튼 안부터 전체 화면 로딩까지요. 각 맥락은 — 적절한 스피너 크기가 다르죠. 크기가 맥락에 안 맞으면 어색하고 레이아웃이 깨집니다.

맥락별 적절한 크기:

버튼 내부 (작은 스피너) 폼 제출 버튼 안에 스피너를 띄울 때(CP-330) 스피너는 버튼 텍스트 높이에 맞는 작은 크기여야 합니다. 버튼보다 크면 버튼을 삐져나오거나 레이아웃이 깨지죠. 버튼 안 스피너는 작고 단정 해야 합니다.

영역·카드 (중간 스피너) — 특정 영역(카드, 리스트, 패널)의 콘텐츠를 로딩할 때 — 그 영역 크기에 맞는 중간 크기 스피너를 영역 중앙에 둡니다. 너무 작으면 안 보이고, 너무 크면 영역을 압도하죠.

전체 화면 (큰 스피너) — 페이지 전체를 로딩하거나 전체 화면 오버레이일 때 — 화면 중앙에 큰(또는 중대형) 스피너를 둬, 사용자가 전체가 로딩 중임을 명확히 알게 합니다.

크기가 맥락에 안 맞을 때:

너무 큰 경우 — 작은 버튼 안에 거대한 스피너를 넣으면 — 버튼을 삐져나오거나 텍스트를 밀어내 레이아웃이 깨집니다. 어색하죠.

너무 작은 경우 — 전체 화면 로딩에 아주 작은 스피너만 있으면 — 사용자가 못 보고 ‘멈춘 건가?’ 합니다.

일관성 부족 — 같은 맥락(여러 카드)인데 스피너 크기가 제각각이면 산만하죠.

그래서 CP-329는 — 스피너 크기를 맥락에 맞춰 정하라고 합니다. 디자인 시스템에서 — 보통 스피너 크기를 몇 단계 (small/medium/large)로 정의하고, 맥락에 맞는 단계를 쓰죠:

버튼 안 = small, 영역 = medium, 전체 화면 = large 식으로요. 정해진 크기 단계를 일관되게 적용합니다.

크기와 가독성·대비. 적절한 크기는 — 가시성과도 연결됩니다. 스피너가 보일 만큼 충분히 크되(특히 전체 화면), 맥락을 압도하지 않게요. 그리고 작은 스피너여도 — 경로·식별자 대비(CP-333)가 충분해야 보이죠.

이 규칙은 스피너의 ’맥락 적합성’을 담당합니다 — 쓰이는 상황(버튼·영역·전체)에 맞는 크기를 골라(329), 스피너가 어색하지 않고 적절히 보이게 하죠. 토글 레이아웃 일관(CP-315)처럼, 디자인 시스템의 크기 체계를 따르는 것입니다.

정리하면 — 스피너는 버튼·영역·전체 화면 등 맥락마다 적절한 크기가 다르므로, 상황에 맞는 크기(작게/중간/크게)를 일관되게 사용해 어색함과 레이아웃 깨짐을 피해야 합니다.

3. 점검 / 개선

무엇을 점검하나

맥락 적합 — 스피너 크기가 쓰이는 맥락(버튼·영역·전체)에 맞는가.

레이아웃 — 버튼 안 스피너가 버튼을 삐져나오지 않는가.

일관성 — 같은 맥락에서 스피너 크기가 일관되는가(디자인 시스템 크기 단계).

개선 방향

맥락별 크기 적용: 버튼=작게, 영역=중간, 전체 화면=크게.

디자인 시스템의 스피너 크기 단계(small/medium/large) 일관 사용.

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

역할	책임
디자이너	스피너 크기 단계·맥락 매핑 정의
퍼블리셔/개발	맥락별 크기 적용

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

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

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 스피너 크기가 쓰이는 맥락(버튼·영역·전체)에 맞나요?

□ 버튼 안 스피너가 버튼을 삐져나오지 않나요?

□ 같은 맥락에서 스피너 크기가 일관되나요?

❓ FAQ

Q1. 스피너 크기 기준이 있나요? 보통 디자인 시스템에서 small/medium/large 단계를 정의하고, 버튼=작게, 영역= 중간, 전체 화면=크게로 맥락에 맞춰 씁니다. Q2. 버튼 안 스피너가 큰데요? 버튼 텍스트 높이에 맞는 작은 크기여야 합니다. 크면 버튼을 삐져나와 레이아웃이 깨지죠. Q3. 전체 화면 스피너가 작으면요? 사용자가 못 보고 멈춘 줄 압니다. 전체 화면은 충분히 크게 중앙에 둬야 하죠.

6. 마무리

CP-329의 메시지:

작은 곳엔 작게, 큰 곳엔 크게 — 상황에 맞는 적절한 크기의 스피너를.

스피너는 버튼·영역·전체 화면 등 맥락마다 적절한 크기가 다릅니다. 상황에 맞는 크기를 일관되게 써서 어색함과 레이아웃 깨짐을 피하는 게 핵심이죠. 다음 편은 스피너 배치입니다.

다음 편 예고 ▶ 「450. (CP-330) 스피너는 처리가 진행 중인 영역 근처에 배치하고, 입력폼 제출 처리 상태는 제출 버튼 내부에 스피너를 사용하고 있다.」

ViewCheck는 스피너가 상황에 맞는 적절한 크기인지를 진단합니다.

📚 참고 출처

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

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

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