손가락으로 넘길 수 있게

KRDS CP-218 — 드래그 앤 드롭/스와이프로 슬라이드를 전환할 수 있도록 구현하고 있다.

0. 들어가며 — 캐러셀 2회차 시작

이번 338편부터 캐러셀 2회차(CP-218~226, 9편)로 캐러셀 그룹을 마무리합니다. 첫 규칙은 드래그/스와이프로 슬라이드를 전환할 수 있게 하라는 내용이죠.

캐러셀에 이전/다음 버튼만 있고 스와이프가 안 되면 — 특히 모바일 사용자는 답답합니다. 모바일에서 좌우로 넘기는 콘텐츠는 손가락 스와이프로 넘기는 게 자연스러운 기대죠. CP-218은 드래그·스와이프 전환을 지원하라고 규정합니다. 이번 편을 풀어냅니다.

1. 규칙 원문 — 드래그/스와이프 전환

CP-218 (컴포넌트 > 캐러셀) “드래그 앤 드롭/스와이프로 슬라이드를 전환할 수 있도록 구현하고 있다.”

캐러셀 슬라이드를, 마우스 드래그(데스크톱)나 터치 스와이프(모바일)로 좌우로 넘겨 전환할 수 있게 구현하라는 뜻입니다.

정리: 드래그·스와이프로 슬라이드를 넘길 수 있게 하라. 이게 CP-218입니다.

2. 왜 드래그·스와이프가 필요한가

캐러셀은 슬라이드를 좌우로 넘기는 컴포넌트입니다. 사용자가 슬라이드를 넘기는 방법이 여럿일수록 편하죠 — 버튼 클릭(CP-214), 점 인디케이터 클릭(CP-223), 그리고 드래그·스와이프입니다. 특히 스와이프는 모바일에서 가장 자연스러운 방식이죠.

① 모바일의 자연스러운 기대. 모바일 사용자는 좌우로 늘어선 콘텐츠를 보면 — 손가락으로 좌우 스와이프해 넘길 것을 직관적으로 기대합니다. 사진 갤러리, 앱 화면 전환 등에서 학습된 관용 동작이죠. 모바일 캐러셀에서 스와이프가 안 되면 — 사용자는 스와이프를 시도했다 안 넘어가서 당황하고, 작은 이전/다음 버튼을 찾아 눌러야 해 번거롭습니다. 스와이프 지원은 모바일 사용성의 기본 기대를 충족하죠.

② 직접 조작의 직관성. 드래그·스와이프는 ‘콘텐츠를 직접 손으로 미는’ 직접 조작(direct manipulation)입니다 — 버튼을 누르는 간접 조작보다 직관적이고 즉각적이죠. 사용자가 슬라이드를 손가락(또는 마우스)으로 잡아 끌면 슬라이드가 따라 움직여, 조작과 결과가 직결됩니다.

③ 입력 수단의 다양성. 사용자마다·환경마다 선호하는 입력이 다릅니다 — 터치 기기는 스와이프, 마우스는 드래그 나 버튼 클릭, 키보드는 화살표(CP-224). 여러 방법을 지원하면 각자 편한 방식으로 조작하죠. CP-218은 그중 드래그· 스와이프를 보장합니다.

구현·주의 사항:

터치 스와이프 — 모바일에서 좌우 터치 드래그로 슬라이드 전환. 충분한 스와이프 거리·속도 임계값을 둬, 살짝 스친 것으로 안 넘어가게(의도치 않은 전환 방지).

마우스 드래그 — 데스크톱에서 마우스로 슬라이드를 잡아 끄는 드래그 지원(선택적이지만 일관성에 좋음).

세로 스크롤과 충돌 방지 — 캐러셀의 가로 스와이프가 페이지의 세로 스크롤을 방해하지 않게 처리(가로 제스처 와 세로 제스처 구분).

다른 수단 병행 — 스와이프만이 아니라 버튼(CP-214)·점 인디케이터(CP-223)도 함께 제공. 스와이프를 모르거나 못 쓰는 사용자(일부 접근성 환경)를 위해 클릭 수단도 필수죠. 그리고 키보드(CP-224)로도 전환 가능해야 합니다 — 스와이프는 키보드 사용자에겐 안 되니까요.

접근성 — 스와이프만으로는 안 된다. 핵심 주의 — 드래그·스와이프는 운동 동작이 필요한 조작이라, 일부 사용자(운동 장애, 키보드 전용)는 못 합니다. 그래서 스와이프는 ’추가 편의’이고, 버튼·점 같은 단순 클릭 수단 (CP-223의 단일 지점 상호작용)과 키보드(CP-224)가 반드시 병행돼야 하죠. WCAG SC 2.5.1(포인터 제스처)도 복잡한 제스처에 단순 대안을 요구합니다. 즉 스와이프를 제공하되, 그것이 유일한 전환 수단이어선 안 됩니다.

정리하면 — 드래그·스와이프는 특히 모바일에서 자연스러운 직접 조작 수단이므로 캐러셀에 지원하되, 클릭·키보드 같은 단순 대안과 병행해 모든 사용자가 슬라이드를 전환하게 해야 합니다.

3. 점검 / 개선

무엇을 점검하나

스와이프 전환 — 모바일에서 좌우 스와이프로 슬라이드가 전환되는가.

드래그 전환 — 데스크톱 마우스 드래그로도 전환되는가(선택적).

대안 병행 — 버튼·점 클릭(CP-223)과 키보드(CP-224)도 함께 제공되는가.

개선 방향

터치 스와이프·마우스 드래그 구현(거리·속도 임계값, 세로 스크롤 충돌 방지).

버튼·점·키보드 등 단순 대안 병행(스와이프가 유일 수단 금지).

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

역할	책임
퍼블리셔/개발	스와이프·드래그·대안 수단 구현
접근성 담당	클릭·키보드 대안 병행 검증

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

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

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 모바일에서 좌우 스와이프로 슬라이드가 전환되나요?

□ 데스크톱 마우스 드래그로도 전환되나요(선택적)?

□ 버튼·점 클릭과 키보드도 함께 제공되나요?

❓ FAQ

Q1. 버튼만 있으면 충분하지 않나요? 모바일 사용자는 스와이프를 기대합니다. 안 되면 답답하죠. 스와이프를 지원하는 게 자연스럽습니다. Q2. 그럼 스와이프만 되게 하면요? 안 됩니다. 운동 장애·키보드 사용자는 스와이프를 못 합니다. 버튼·점·키보드 대안이 필수입니다(WCAG 2.5.1). Q3. 가로 스와이프가 세로 스크롤을 방해해요. 가로/세로 제스처를 구분 처리해 충돌을 막습니다.

6. 마무리

CP-218의 메시지:

손가락으로 넘길 수 있게 — 드래그·스와이프로 슬라이드를 전환하게 하라.

스와이프는 특히 모바일에서 자연스러운 직접 조작입니다. 지원하면 사용성이 좋아지죠. 단 운동 동작이 필요해 일부 사용자는 못 하므로, 버튼·점·키보드 같은 단순 대안과 반드시 병행해야 합니다. 다음 편은 슬라이드 1개일 때 컨트롤 숨김입니다.

다음 편 예고 ▶ 「339. (CP-219) 표시할 캐러셀 항목 수가 1개인 경우 캐러셀과 관련된 콘트롤러를 숨김처리 하고 있다.」

ViewCheck는 캐러셀이 드래그·스와이프 전환을 지원하는지를 진단합니다.

📚 참고 출처

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

WCAG 2.1 SC 2.5.1 Pointer Gestures — https://www.w3.org/WAI/WCAG21/Understanding/pointer-gestures.html

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

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