슬라이드는 다섯까지

KRDS CP-210 — 슬라이드 수를 5개 이내로 사용하고 있다.

0. 들어가며 — 끝없이 도는 배너

이번 330편은 캐러셀 슬라이드 수를 5개 이내로 사용하라는 규칙입니다.

캐러셀에 슬라이드를 10개, 20개씩 넣으면 — 뒤쪽 슬라이드는 사용자가 거의 못 보고, 끝없이 도는 배너에 사용자는 ‘언제 끝나지?’ 싶죠. 또 한 자리를 너무 많은 콘텐츠가 차지하려 다투면 어느 것도 제대로 전달 안 됩니다. CP-210은 슬라이드를 5개 이내로 제한해 핵심에 집중시킵니다. 탭 바 5개(CP-137), 배지 하나(CP-188) 정신이죠. 이번 편을 풀어냅니다.

1. 규칙 원문 — 슬라이드 5개 이내

CP-210 (컴포넌트 > 캐러셀) “슬라이드 수를 5개 이내로 사용하고 있다.”

캐러셀의 슬라이드 개수를 최대 5개로 제한해, 각 슬라이드가 노출 기회를 갖고 사용자가 전체를 파악할 수 있게 하라는 뜻입니다.

정리: 캐러셀 슬라이드는 최대 5개. 이게 CP-210입니다.

2. 왜 5개 이내인가

캐러셀은 ‘한 자리에서 여러 콘텐츠를 번갈아 보여주는’ 도구입니다. 슬라이드가 많아질수록 — 각 슬라이드의 노출 기회가 줄고, 사용자의 인지 부담이 커지며, 뒤쪽 콘텐츠는 사실상 묻히죠.

① 노출 기회의 희석. 캐러셀은 한 번에 슬라이드 하나만 보여줍니다. 슬라이드가 5개면 한 슬라이드가 1/5의 노출 기회를 갖지만, 20개면 1/20로 줄죠. 자동 회전이라면 뒤쪽 슬라이드는 사용자가 그 자리를 떠난 뒤에야 나타나 거의 안 보입니다. 수동이라도 사용자가 20번을 다 넘겨 볼 리 없죠. 실제 데이터상 캐러셀 첫 슬라이드 외에는 클릭·조회가 급감하는 것으로 알려져 있습니다. 슬라이드를 많이 넣을수록 각 콘텐츠가 묻히는 역설이죠.

② 인지 부담·전체 파악 실패. 슬라이드가 많으면 사용자는 ‘전체가 몇 개고 뭐가 있는지’ 파악하기 어렵습니다. 탐색 식별자(점 인디케이터, CP-216)가 20개면 점이 너무 많아 위치 감각도 흐려지죠. 5개 이내면 — 사용자가 ’아, 배너가 5개 있구나’를 한눈에 알고, 점 인디케이터로 위치도 파악합니다.

③ 콘텐츠 우선순위 강제. 5개 제한은 — ’정말 중요한 콘텐츠 5개’를 고르도록 강제합니다. 모든 홍보·안내를 캐러셀에 욱여넣는 게 아니라, 가장 중요한 것만 추리죠. 이 우선순위 결정이 사용자에게 핵심을 명료하게 전합니다. 탭 바 5개(CP-137), 배지 하나(CP-188), 모달 단순화(CP-180)에서 본 ’핵심 집중을 위한 제한’의 캐러셀 버전이죠.

④ 캐러셀 적합성 재고. 보여줄 콘텐츠가 5개를 훨씬 넘는다면 — 캐러셀이 적합한지 재고할 신호입니다. 많은 콘텐츠는 캐러셀(한 자리 회전)보다 목록·그리드(다 펼쳐 보임)가 나을 수 있죠. 캐러셀은 ‘소수의 핵심 콘텐츠를 강조’하는 도구이지, ’많은 콘텐츠를 다 담는’ 도구가 아닙니다.

이 5개 제한은 캐러셀 사용성의 기본입니다. 그리고 슬라이드가 적으면 — 탐색 식별자(점)도 적어 깔끔하고(CP-216), 전체 수 표시도 명확하며(CP-216), 사용자가 전체를 빠르게 훑죠. 반대로 슬라이드가 1개뿐이면 캐러셀 컨트롤이 무의미하므로 컨트롤러를 숨기고(CP-219), 사실상 단일 배너로 두는 게 맞습니다 — 즉 캐러셀은 2~5개의 콘텐츠에 적합하죠.

정리하면 — 캐러셀은 소수의 핵심 콘텐츠를 강조하는 도구이므로, 슬라이드를 5개 이내로 제한해 각 슬라이드의 노출 기회와 사용자의 전체 파악을 보장해야 합니다.

3. 점검 / 개선

무엇을 점검하나

슬라이드 ≤5 — 캐러셀 슬라이드가 5개 이내인가.

핵심 선정 — 가장 중요한 콘텐츠만 추렸는가.

캐러셀 적합성 — 콘텐츠가 5개를 훨씬 넘으면 목록·그리드를 검토했는가.

개선 방향

슬라이드를 핵심 5개 이내로 제한. 나머지는 다른 영역(목록·그리드)으로.

콘텐츠가 많으면 캐러셀 대신 목록·그리드 검토.

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

역할	책임
기획/운영	캐러셀 핵심 콘텐츠 5개 선정
디자이너/개발	슬라이드 5개 제한 구현

기관 유형	CP-210 적용
중앙행정기관(대표·운영) / 공공기관 / 지자체	✅ 필수 (캐러셀 사용 시)

캐러셀을 쓰는 모든 사이트가 해당됩니다.

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 캐러셀 슬라이드가 5개 이내인가요?

□ 가장 중요한 콘텐츠만 추렸나요?

□ 콘텐츠가 5개를 훨씬 넘으면 목록·그리드를 검토했나요?

❓ FAQ

Q1. 홍보할 게 많은데 5개로 어떻게 줄이나요? 가장 중요한 5개만 캐러셀에, 나머지는 별도 목록·그리드로 보여줍니다. 많이 넣어도 뒤쪽은 거의 안 보입니다. Q2. 왜 많으면 안 되나요? 노출 기회가 희석되고 뒤쪽이 묻히며, 전체 파악이 어려워집니다. 5개가 적정선이죠. Q3. 슬라이드가 1개면요? 캐러셀 컨트롤이 무의미하니 컨트롤러를 숨기고(CP-219) 단일 배너로 둡니다.

6. 마무리

CP-210의 메시지:

슬라이드는 다섯까지 — 핵심 콘텐츠만 추려 5개 이내로.

캐러셀은 소수의 핵심 콘텐츠를 강조하는 도구입니다. 많이 넣으면 노출이 희석되고 뒤쪽이 묻히며 전체 파악이 어렵죠. 5개로 제한해 각 슬라이드의 기회와 전체 파악을 보장합니다. 콘텐츠가 많으면 목록·그리드가 낫죠. 다음 편은 슬라이드 텍스트의 2줄 제한입니다.

다음 편 예고 ▶ 「331. (CP-211) 캐러셀 항목의 텍스트 콘텐츠는 2줄 이내로 제공하고 있다.」

ViewCheck는 캐러셀 슬라이드 수가 5개 이내인지를 진단합니다.

📚 참고 출처

KRDS 컴포넌트 — 캐러셀(Carousel) 가이드 — https://www.krds.go.kr/html/site/component/component_20.html

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

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