조작할 수 있다는 걸 보여라

KRDS CP-214 — 캐러셀 관련 컨트롤과 항목 탐색 식별자가 명확하게 인지될 수 있도록 표현하고 있다.

0. 들어가며 — 누를 수 있는지 모르면 못 쓴다

이번 334편은 캐러셀 컨트롤과 탐색 식별자가 명확하게 인지될 수 있도록 표현하라는 규칙입니다.

캐러셀에 이전/다음 버튼, 점 인디케이터가 있어도 — 너무 흐릿하거나 작아서 ’여기 조작할 수 있는 게 있다’를 사용자가 인지 못 하면, 있으나 마나죠. 사용자는 캐러셀이 첫 슬라이드만 보여주는 줄 알고 나머지를 못 봅니다. CP-214는 컨트롤·식별자를 명확히 인지되게 표현하라고 규정합니다. CP-213(비중첩)의 짝이죠. 이번 편을 풀어 냅니다.

1. 규칙 원문 — 컨트롤·식별자 명확 인지

CP-214 (컴포넌트 > 캐러셀) “캐러셀 관련 컨트롤과 항목 탐색 식별자가 명확하게 인지될 수 있도록 표현하고 있다.”

이전/다음 버튼, 점 인디케이터 등 캐러셀 컨트롤·탐색 식별자를, 사용자가 ’조작 가능한 요소’로 명확히 인지할 수 있게 또렷이 표현하라는 뜻입니다.

정리: 컨트롤·식별자를 조작 가능하게 명확히 인지되게 표현하라. 이게 CP-214입니다.

2. 왜 명확한 인지가 필요한가

캐러셀의 컨트롤(이전/다음 버튼, 점 인디케이터, 정지 버튼)은 — 사용자가 슬라이드를 넘기고 탐색하는 수단입니다. 이 컨트롤이 있다는 것을, 그리고 조작 가능하다는 것을 사용자가 인지해야 캐러셀을 제대로 쓰죠. 인지가 안 되면 컨트롤이 무용지물입니다.

컨트롤이 인지 안 될 때:

흐릿한 컨트롤 — 화살표나 점이 배경과 대비가 낮아 흐릿하면, 사용자가 그것이 있는지조차 모릅니다. 캐러셀이 첫 슬라이드만 있는 줄 알고 나머지를 안 보죠. 실제로 ‘캐러셀에 슬라이드가 더 있는데 사용자가 모르고 지나친다’ 는 문제가 흔합니다.

너무 작거나 모호한 표현 — 점 인디케이터가 너무 작거나, 화살표가 장식처럼 보여 ’누를 수 있는 버튼’으로 안 보이면, 사용자가 조작할 생각을 안 하죠.

상태 불명확 — 점 인디케이터가 현재 위치(어느 슬라이드를 보고 있는지)를 명확히 표시 안 하면, 사용자가 위치를 모릅니다(CP-216의 탐색 위치 표시와 연결).

그래서 CP-214는 컨트롤·식별자를 명확히 인지되게 표현하라고 합니다. 핵심은 두 가지 — ‘있음을 알게’와 ’조작 가능함을 알게’:

충분한 대비·크기 — 컨트롤이 배경·콘텐츠와 충분한 명도 대비(비텍스트 3:1, WCAG SC 1.4.11)를 갖고, 또렷이 보이는 크기로. 흐릿한 화살표·작은 점은 안 보이죠. (크기는 CP-217의 ’충분히 크게’와 연결.)

어포던스(조작 가능 단서) — 컨트롤이 ’누를 수 있는 것’처럼 보이게. 버튼 형태(원형 배경, 테두리), 명확한 화살표 아이콘, hover/focus 시 반응 등으로 ’클릭 가능’을 암시하죠. 점 인디케이터도 ’탐색 점’임이 분명하게.

현재 위치 강조 — 점 인디케이터 중 현재 슬라이드에 해당하는 점을 강조(채움·색·크기)해, 현재 위치를 명확히 (CP-216). 사용자가 ’지금 몇 번째고 몇 개 있는지’를 인지하죠.

색 비의존 — 현재 위치 등을 색만으로 표시하지 말고 형태(채움/빈 점, 크기)도 함께(색 무관 인식, 배지 CP-186·달력 CP-165 정신).

핵심은 — 사용자가 ’여기 조작할 수 있는 컨트롤이 있고, 이걸로 슬라이드를 넘길 수 있구나’를 즉시 인지하는 것입니다. 그래야 캐러셀의 모든 슬라이드를 탐색하죠.

이 규칙은 CP-213(비중첩)·CP-215(일관 위치)·CP-217(충분한 크기)과 함께 캐러셀 컨트롤의 사용성을 담당합니다 — 컨트롤이 콘텐츠를 안 가리고(213), 명확히 인지되며(214), 일관된 위치에(215), 충분히 크게(217) 있어야 사용자가 편하게 조작하죠. 그리고 이 시각적 명확성은 스크린 리더 접근성(CP-224 키보드, 컨트롤의 접근 가능한 이름)과 함께 완성됩니다.

정리하면 — 캐러셀 컨트롤·식별자는 사용자가 ’조작 가능한 요소’로 명확히 인지해야 쓸 수 있으므로, 충분한 대비· 크기·어포던스로 또렷이 표현해야 합니다.

3. 점검 / 개선

무엇을 점검하나

인지 가능 — 컨트롤·식별자가 흐릿하지 않고 또렷이 보이는가(대비·크기).

어포던스 — 컨트롤이 ’누를 수 있는 것’처럼 보이는가(버튼 형태·반응).

현재 위치 — 점 인디케이터가 현재 슬라이드를 명확히 강조하는가(색+형태).

개선 방향

컨트롤에 충분한 대비(3:1)·크기·버튼 형태·hover/focus 반응 부여.

현재 위치 점을 채움·색·크기로 강조(색만 의존 금지).

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

역할	책임
디자이너	컨트롤·식별자 명확 표현(대비·크기·어포던스) 정의
퍼블리셔/개발	컨트롤 시각 표현·상태 강조 구현

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

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

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 컨트롤·식별자가 흐릿하지 않고 또렷이 보이나요(대비·크기)?

□ 컨트롤이 ’누를 수 있는 것’처럼 보이나요(버튼 형태·반응)?

□ 점 인디케이터가 현재 슬라이드를 명확히 강조하나요(색+형태)?

❓ FAQ

Q1. 깔끔하게 컨트롤을 흐리게 하면 안 되나요? 흐리면 사용자가 컨트롤이 있는지 모르고 나머지 슬라이드를 못 봅니다. 또렷이 인지되게 해야 합니다. Q2. 현재 위치를 색만으로 표시하면요? 색맹 사용자가 구별 못 합니다. 채움/빈 점, 크기 등 형태도 함께 씁니다. Q3. CP-213과 뭐가 다른가요? CP-213은 ‘컨트롤이 콘텐츠를 안 가리게’, CP-214는 ’컨트롤 자체가 명확히 인지 되게’입니다. 함께 컨트롤 사용성을 이루죠.

6. 마무리

CP-214의 메시지:

조작할 수 있다는 걸 보여라 — 컨트롤·식별자를 명확히 인지되게 표현하라.

캐러셀 컨트롤이 흐릿하면 사용자가 있는지조차 몰라 나머지 슬라이드를 못 봅니다. 충분한 대비·크기·어포던스로 또렷이 표현하고, 현재 위치를 색+형태로 강조해 ’조작 가능한 컨트롤’임을 명확히 하죠. 다음 편은 컨트롤·식별자의 일관된 위치입니다.

다음 편 예고 ▶ 「335. (CP-215) 캐러셀 관련 컨트롤과 항목 탐색 식별자를 일관된 위치에 표시하고 있다.」

ViewCheck는 캐러셀 컨트롤·식별자가 명확히 인지되게 표현되는지를 진단합니다.

📚 참고 출처

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

WCAG 2.1 SC 1.4.11 Non-text Contrast — https://www.w3.org/WAI/WCAG21/Understanding/non-text-contrast.html

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

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