누르기 쉽게 크게

KRDS CP-217 — 캐러셀 관련 컨트롤 요소를 쉽게 조작할 수 있도록 충분히 크게 표현하고 있다.

0. 들어가며 — 캐러셀 1회차의 마지막

이번 337편은 캐러셀 1회차(CP-208~217)의 마지막 규칙입니다. 컨트롤 요소를 쉽게 조작할 수 있도록 충분히 크게 표현하라는 내용이죠.

캐러셀의 이전/다음 버튼, 점 인디케이터가 너무 작으면 — 마우스로도 겨냥하기 번거롭고, 특히 모바일 터치에서 정확히 누르기 어렵죠. CP-217은 컨트롤을 충분한 크기로 만들어 쉽게 조작하게 하라고 규정합니다. 페이지네이션 크기(CP-131), 탭 바 터치 영역(CP-134) 정신이죠. 이번 편을 풀어냅니다.

1. 규칙 원문 — 컨트롤 충분히 크게

CP-217 (컴포넌트 > 캐러셀) “캐러셀 관련 컨트롤 요소를 쉽게 조작할 수 있도록 충분히 크게 표현하고 있다.”

이전/다음 버튼, 점 인디케이터, 정지 버튼 등 캐러셀 컨트롤을 충분히 큰 크기·터치 영역으로 만들어, 마우스·터치로 쉽게 누를 수 있게 하라는 뜻입니다.

정리: 캐러셀 컨트롤을 충분히 크게 만들어 조작하기 쉽게 하라. 이게 CP-217입니다.

2. 왜 충분히 커야 하나

캐러셀 컨트롤은 사용자가 슬라이드를 넘기고 탐색하는 조작 수단입니다. 이 컨트롤을 쉽게 누를 수 있어야 캐러셀이 편하게 작동하죠. 컨트롤이 작으면 조작이 어려워집니다 — 타깃 크기(피츠의 법칙) 문제죠.

작은 컨트롤의 문제:

겨냥 어려움 — 작은 화살표·점은 마우스로도 정확히 겨냥하기 번거롭습니다. 여러 번 시도하거나 빗나가죠.

모바일 터치 실패 — 특히 모바일 터치는 손가락 접촉면이 넓어(약 9~10mm), 작은 컨트롤을 정확히 누르기 어렵습니다. 작은 점 인디케이터들이 다닥다닥 붙어 있으면 옆 점을 잘못 누르기 쉽죠.

점 인디케이터의 이중 부담 — 점 인디케이터는 ‘위치 표시’(CP-216)이자 ‘탐색 컨트롤’(점 클릭으로 그 슬라이 드 이동, CP-223)입니다. 클릭 대상이므로 충분히 커야 누르죠. 작은 점은 보기엔 되지만 누르긴 어렵습니다.

그래서 CP-217은 컨트롤을 충분히 크게 만들라고 합니다. 기준:

타깃 크기 — 웹 접근성의 타깃 크기 기준(WCAG SC 2.5.5/2.5.8, 보통 최소 24×24~44×44px)을 충족. 컨트롤 자체가 작아 보여도 클릭/터치 영역(패딩 포함)을 충분히 키우면 누르기 쉽죠. 예를 들어 점은 작게 보이되 그 주변 터치 영역을 넓게.

충분한 간격 — 컨트롤들(점들) 사이에 충분한 간격을 둬 인접 컨트롤 오클릭을 방지(브레드크럼 링크 간격 CP-082 정신).

모바일 고려 — 모바일에서 특히 충분한 크기·간격. 작은 점이 누르기 어려우면 분수형 등으로 전환하기도 (CP-221).

핵심은 — 사용자가 컨트롤을 정확하고 편하게 누를 수 있는 것입니다. 빈번히 쓰는 슬라이드 넘김·탐색 조작이라, 작은 컨트롤은 매번 스트레스가 되죠.

이 규칙은 캐러셀 컨트롤 4종 규칙(CP-213 비중첩, 214 명확 인지, 215 일관 위치, 217 충분한 크기)을 완성합니다 — 컨트롤이 콘텐츠를 안 가리고(213), 명확히 보이며(214), 일관된 위치에(215), 충분히 크면(217), 사용자가 캐러셀을 편하고 정확하게 조작하죠. 그리고 이 물리적 조작 편의는 키보드 접근성(CP-224)·스와이프(CP-218)와 함께 다양한 입력 수단을 포용합니다.

이로써 캐러셀 1회차(CP-208~217, 10편)를 마칩니다 — 자동 회전 안전(208·209), 콘텐츠 절제(210·211), 시각 구조 (212·213·214), 컨트롤 위치·표시·크기(215·216·217)까지. 다음 회차(2회차, CP-218~226)에서 스와이프·키보드· 접근성·텍스트 이미지 금지 등을 다루며 캐러셀을 완성합니다.

정리하면 — 캐러셀 컨트롤은 빈번히 쓰는 조작 수단이므로, 충분한 크기·터치 영역·간격으로 마우스·터치 모두에서 쉽게 누를 수 있게 해야 합니다.

3. 점검 / 개선

무엇을 점검하나

타깃 크기 — 이전/다음 버튼·점·정지 버튼의 클릭/터치 영역이 충분히 큰가.

간격 — 컨트롤(점)들 사이에 충분한 간격이 있어 오클릭이 없는가.

모바일 — 모바일 터치에서 정확히 누를 수 있는가.

개선 방향

컨트롤 클릭/터치 영역을 최소 권장 크기 이상으로(패딩 활용).

점 사이 간격 확보. 모바일에서 작으면 분수형 전환(CP-221).

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

역할	책임
디자이너	컨트롤 크기·터치 영역·간격 정의
퍼블리셔/개발	충분한 크기·간격 구현

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

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

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 이전/다음 버튼·점·정지 버튼의 클릭/터치 영역이 충분히 큰가요?

□ 컨트롤(점)들 사이에 충분한 간격이 있어 오클릭이 없나요?

□ 모바일 터치에서 정확히 누를 수 있나요?

❓ FAQ

Q1. 점이 작아 보이는데 어떻게 키우나요? 점은 작게 보이되 주변 클릭/터치 영역(패딩)을 넓히면 누르기 쉬워 집니다. Q2. 데스크톱은 마우스라 괜찮지 않나요? 마우스도 작은 타깃은 겨냥이 번거롭습니다. 게다가 같은 캐러셀이 모바일에서도 쓰이니 크기는 공통 확보합니다. Q3. 점이 많아 간격을 못 두면요? 슬라이드 5개 이내(CP-210)면 점도 적습니다. 많거나 좁으면 분수형으로 전환합니다(CP-221).

6. 마무리

CP-217의 메시지:

누르기 쉽게 크게 — 캐러셀 컨트롤을 충분한 크기로 조작하기 쉽게 하라.

캐러셀 컨트롤이 작으면 겨냥이 어렵고, 특히 모바일 터치에서 오클릭이 납니다. 충분한 크기·터치 영역·간격으로 마우스·터치 모두에서 쉽게 누르게 하죠. 이로써 캐러셀 1회차(CP-208~217)를 마칩니다. 다음 편은 캐러셀 2회차 시작 — 드래그/스와이프 전환입니다.

다음 편 예고 ▶ 「338. (CP-218) 드래그 앤 드롭/스와이프로 슬라이드를 전환할 수 있도록 구현하고 있다.」

ViewCheck는 캐러셀 컨트롤이 충분히 크게 표현되는지를 진단합니다.

📚 참고 출처

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

WCAG 2.2 SC 2.5.8 Target Size (Minimum) — https://www.w3.org/WAI/WCAG22/Understanding/target-size-minimum.html

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

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