넘길 게 없으면 버튼도 없다

KRDS CP-219 — 표시할 캐러셀 항목 수가 1개인 경우 캐러셀과 관련된 콘트롤러를 숨김처리 하고 있다.

0. 들어가며 — 슬라이드가 하나뿐인데 화살표가 있으면

이번 339편은 캐러셀 항목 수가 1개인 경우 관련 컨트롤러를 숨김처리하라는 규칙입니다.

캐러셀에 표시할 슬라이드가 하나뿐이면 — 넘길 게 없으므로 이전/다음 버튼, 점 인디케이터, 정지 버튼 같은 컨트롤이 무의미하죠. 그런데 이 컨트롤이 그대로 남아 있으면, 사용자는 ‘눌러도 안 넘어가네?’ 하고 헷갈립니다. CP-219는 항목이 1개일 때 컨트롤을 숨기라고 규정합니다. 이번 편을 풀어냅니다.

1. 규칙 원문 — 항목 1개 시 컨트롤러 숨김

CP-219 (컴포넌트 > 캐러셀) “표시할 캐러셀 항목 수가 1개인 경우 캐러셀과 관련된 콘트롤러를 숨김처리 하고 있다.”

표시할 슬라이드가 하나뿐일 때는 이전/다음 버튼·점 인디케이터·정지 버튼 등 캐러셀 컨트롤을 숨겨, 불필요한 컨트롤로 혼란을 주지 않게 하라는 뜻입니다.

정리: 슬라이드가 1개면 캐러셀 컨트롤을 숨겨라. 이게 CP-219입니다.

2. 왜 단일 항목이면 컨트롤을 숨기나

캐러셀 컨트롤(이전/다음, 점 인디케이터, 정지 버튼)은 — ’여러 슬라이드를 넘기고 탐색’하기 위한 도구입니다. 그런데 슬라이드가 하나뿐이면, 넘길 것도 탐색할 것도 없죠. 이때 컨트롤이 남아 있으면 무의미하고 오히려 혼란을 줍니다.

단일 항목에 컨트롤이 있을 때의 문제:

헛조작·혼란 — 이전/다음 버튼이 있어 눌렀는데 안 넘어가면(슬라이드가 하나니까) — 사용자는 ‘고장났나?’, ‘내가 잘못 눌렀나?’ 하고 혼란스럽죠. 점 인디케이터가 점 하나만 있으면 어색하고요.

잘못된 기대 — 컨트롤이 있으면 사용자는 ‘슬라이드가 더 있겠구나’ 기대합니다. 그런데 하나뿐이면 기대가 어긋나죠.

시각적 군더더기 — 무의미한 컨트롤이 공간을 차지하고 콘텐츠 주변을 어수선하게 합니다.

그래서 CP-219는 — 슬라이드가 1개이면 컨트롤을 숨기라고 합니다. 이전/다음 버튼, 점 인디케이터, 정지 버튼 (자동 회전도 무의미하니 자동 회전 자체도 끔)을 모두 제거해, 사실상 단일 정적 배너/이미지처럼 보이게 하죠. 컨트롤이 없으면 사용자는 ’아, 이건 하나짜리구나’를 자연스럽게 인지하고 헛조작하지 않습니다.

’표시할 항목 수’의 동적 판단. 이 규칙은 특히 동적 콘텐츠에서 중요합니다. 캐러셀 슬라이드가 데이터에서 오는 경우(예: 진행 중인 행사 배너), 어떤 시점엔 슬라이드가 5개지만 어떤 시점엔 1개일 수 있죠. 그래서 — ’현재 표시할 항목 수’를 동적으로 확인해, 1개면 컨트롤을 숨기고 2개 이상이면 표시하는 조건부 렌더링이 필요합니다. 슬라이드가 0개면 캐러셀 자체를 숨기고요. 정적으로 컨트롤을 항상 두면, 데이터가 1개로 줄었을 때 무의미한 컨트롤이 남죠.

접근성. 컨트롤을 숨길 때는 — 시각적으로만이 아니라 보조기술·키보드에서도 제거해야 합니다(display:none 이나 DOM 미렌더링). 시각적으로만 숨기고 코드에 남으면, 스크린 리더가 무의미한 컨트롤을 읽거나 키보드 초점이 거기 가죠(사이드 메뉴 CP-105의 일관 숨김 정신).

이 규칙은 캐러셀의 ‘상황 적응’을 담당합니다 — 슬라이드 5개 이내(CP-210)가 상한이라면, 1개일 때 컨트롤 숨김 (CP-219)은 하한 처리죠. 캐러셀은 2~5개의 콘텐츠에 적합하고, 1개면 단일 배너로 단순화합니다. 페이지네이션 ’한 화면에 하나’(CP-118)에서 본 ‘불필요한 컨트롤 제거’ 정신과도 통하죠.

정리하면 — 슬라이드가 1개면 넘길 게 없어 컨트롤이 무의미하므로, 컨트롤을 (시각·보조기술 모두에서) 숨겨 단일 배너로 단순화하고 헛조작·혼란을 막아야 합니다.

3. 점검 / 개선

무엇을 점검하나

단일 항목 컨트롤 숨김 — 슬라이드가 1개일 때 이전/다음·점·정지 버튼이 숨겨지는가.

동적 판단 — 표시 항목 수를 확인해 조건부로 컨트롤을 렌더링하는가.

접근성 제거 — 숨긴 컨트롤이 보조기술·키보드에서도 제거됐는가.

개선 방향

표시 항목 수가 1이면 컨트롤·자동 회전 미렌더링(조건부 렌더링).

시각뿐 아니라 DOM·접근성 트리에서도 제거.

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

역할	책임
퍼블리셔/개발	항목 수 기반 조건부 컨트롤 렌더링
접근성 담당	숨김 컨트롤의 보조기술 제거 검증

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

슬라이드 수가 가변인 캐러셀을 쓰는 사이트에서 특히 중요합니다.

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 슬라이드가 1개일 때 이전/다음·점·정지 버튼이 숨겨지나요?

□ 표시 항목 수를 확인해 조건부로 컨트롤을 렌더링하나요?

□ 숨긴 컨트롤이 보조기술·키보드에서도 제거됐나요?

❓ FAQ

Q1. 항목이 1개면 캐러셀을 안 쓰면 되지 않나요? 동적 콘텐츠라 항목 수가 변할 수 있습니다. 1개로 줄면 컨트롤만 숨겨 단일 배너로 보이게 합니다. Q2. 컨트롤을 그냥 두면 안 되나요? 눌러도 안 넘어가 사용자가 혼란스럽고 잘못된 기대를 합니다. 숨겨야 합니다. Q3. 시각적으로만 숨기면요? 스크린 리더가 읽거나 키보드 초점이 갑니다. DOM·접근성 트리에서도 제거해야 합니다.

6. 마무리

CP-219의 메시지:

넘길 게 없으면 버튼도 없다 — 슬라이드가 1개면 컨트롤을 숨겨라.

슬라이드가 하나뿐이면 넘길 게 없어 컨트롤이 무의미하고 혼란을 줍니다. 표시 항목 수를 동적으로 확인해 1개면 컨트롤·자동 회전을 (시각·보조기술 모두에서) 숨겨 단일 배너로 단순화하죠. 다음 편은 모바일 도형형 식별자 버튼입니다.

다음 편 예고 ▶ 「340. (CP-220) [모바일] 화면 크기가 충분한 경우 도형형 항목 탐색 식별자를 버튼으로 제공 하고 있다.」

ViewCheck는 단일 항목 캐러셀에서 컨트롤이 숨김처리되는지를 진단합니다.

📚 참고 출처

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

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

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