한 동작으로 좌우를 보게

KRDS CP-246 — 가로 스크롤이 필요한 경우 단순한 동작으로 스크롤 위치를 조정할 수 있도록 하고 있다.

0. 들어가며 — 표 그룹의 마지막

이번 366편은 표 그룹(CP-238~246, 9개)의 마지막 규칙입니다. 가로 스크롤이 필요한 경우 단순한 동작으로 스크롤 위치를 조정할 수 있게 하라는 내용이죠.

CP-244에서 복잡한 표는 모바일에서 가로 스크롤로 제공한다고 했습니다. 그 가로 스크롤이 — 조작이 어렵거나 키보드 로 안 되면, 사용자가 표의 일부 열을 못 보죠. CP-246은 가로 스크롤을 단순하고 접근 가능한 동작으로 조정하게 하라고 규정하며 표 9개를 마무리합니다. 이번 편을 풀어냅니다.

1. 규칙 원문 — 단순한 동작으로 스크롤 조정

CP-246 (컴포넌트 > 표) “가로 스크롤이 필요한 경우 단순한 동작으로 스크롤 위치를 조정할 수 있도록 하고 있다.”

표에 가로 스크롤이 있을 때, 사용자가 단순하고 쉬운 동작(스와이프·스크롤바·버튼 등)으로 스크롤 위치를 조정해 모든 열을 볼 수 있게 하라는 뜻입니다.

정리: 가로 스크롤을 단순한 동작으로 조정할 수 있게 하라. 이게 CP-246입니다.

2. 왜 단순한 동작이어야 하나

가로 스크롤은 — 좁은 화면에서 넓은 표를 보는 수단입니다(CP-244). 하지만 가로 스크롤은 본질적으로 — 한 번에 일부 열만 보이고, 나머지를 보려면 스크롤해야 하는 ’추가 조작’을 요구하죠. 이 조작이 어렵거나 안 되면, 사용자가 안 보이는 열에 접근 못 해 표의 일부 데이터를 놓칩니다. 그래서 가로 스크롤 조작은 단순하고 누구나 할 수 있어야 합니다.

가로 스크롤 조작의 어려움:

세로 스크롤과 충돌 — 페이지는 세로로 스크롤되는데 표는 가로로 스크롤되어, 사용자가 어느 방향으로 스크롤 될지 헷갈리거나 의도와 다르게 동작하죠(특히 터치).

스크롤 수단 부재 인지 어려움 — 가로 스크롤이 가능한지조차 모르면(스크롤바·표시가 없으면) 사용자가 시도조차 안 하죠.

키보드·보조기기 어려움 — 가로 스크롤이 마우스 드래그·터치 스와이프로만 되면, 키보드·보조기기 사용자는 조작 못 합니다.

그래서 CP-246은 — 가로 스크롤 위치를 단순한 동작으로 조정하게 하라고 합니다. 수단:

터치 스와이프 — 모바일에서 좌우 스와이프로 자연스럽게 스크롤. 단 세로 스크롤과 구분되게(가로 제스처 인식).

스크롤바 — 표 영역에 가로 스크롤바를 보이게 둬, 드래그로 위치 조정. 스크롤 가능함도 알리죠.

좌우 버튼 — ‘◀ ▶’ 버튼을 둬 누르면 좌우로 스크롤. 스와이프를 못 쓰는 사용자도 버튼으로 조정하죠(캐러셀 단일 지점 CP-223 정신).

키보드 스크롤 — 표 영역에 키보드 초점을 두고 좌우 화살표로 스크롤되게. 키보드 사용자도 모든 열을 봅니다.

핵심은 — ’단순한 한 동작(스와이프 한 번, 버튼 한 번, 화살표 한 번)’으로 스크롤되어, 누구나 쉽게 모든 열에 접근하는 것입니다. 복잡한 제스처나 정밀한 조작을 요구하면 안 되죠(캐러셀 단일 지점 CP-223, 포인터 제스처 WCAG 2.5.1 정신).

스크롤 가능 인지(CP-244 연계). 단순 조작에 더해 — 가로 스크롤이 가능함을 알리는 것도 중요합니다. 표 가장자리에 그림자·페이드로 ‘오른쪽에 더 있다’를 표시하거나(모달 스크롤 인지 CP-177 정신), 스크롤바를 보이게 둬, 사용자가 스크롤을 시도하게 하죠. 조작이 단순해도 ’스크롤 되는 줄’ 몰라 안 하면 소용없으니까요.

머리글 고정과 함께. CP-244에서 본 행 머리글 고정(sticky)과 함께 쓰면 — 사용자가 단순 동작으로 좌우 스크롤 하면서도, 고정된 머리글로 ‘어느 항목의 값인지’ 관계를 유지하죠. 단순 조작(246) + 머리글 고정(244) + 시맨틱 구조(245)가 함께 가로 스크롤 표를 쓸 만하게 만듭니다.

이로써 표 9개 규칙(CP-238~246)이 완성됩니다 — 공간 요건(238), 셀·행 구성(239), 정렬(240·241), 빈 셀(242), 모바일 대응(243·244·246), 시맨틱 구조(245)까지. 표를 비교 도구로서 제대로, 모바일·접근성까지 챙겨 만드는 규칙들이죠.

정리하면 — 가로 스크롤은 일부 열만 보이는 추가 조작을 요구하므로, 스와이프·버튼·키보드 등 단순한 동작으로 위치를 조정하게 하고 스크롤 가능함을 알려, 누구나 모든 열에 접근하게 해야 합니다.

3. 점검 / 개선

무엇을 점검하나

단순 조작 — 가로 스크롤이 스와이프·스크롤바·버튼 등 단순한 동작으로 조정되는가.

키보드 접근 — 키보드로도 가로 스크롤이 되는가.

스크롤 인지 — 가로 스크롤 가능함이 표시되는가(그림자·스크롤바, CP-244).

개선 방향

스와이프·스크롤바·좌우 버튼·키보드 화살표 등 단순 스크롤 수단 제공.

스크롤 가능 표시(그림자), 행 머리글 고정(CP-244) 병행.

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

역할	책임
디자이너	가로 스크롤 조작 수단·표시 정의
퍼블리셔/개발	스와이프·버튼·키보드 스크롤 구현

기관 유형	CP-246 적용
중앙행정기관(대표·운영) / 공공기관 / 지자체	✅ 필수 (가로 스크롤 표 사용 시)

가로 스크롤 표를 쓰는 모든 사이트가 해당됩니다.

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 가로 스크롤이 스와이프·스크롤바·버튼 등 단순한 동작으로 조정되나요?

□ 키보드로도 가로 스크롤이 되나요?

□ 가로 스크롤 가능함이 표시되나요(그림자·스크롤바)?

❓ FAQ

Q1. 스와이프만 되면 안 되나요? 스와이프를 못 쓰는 사용자(키보드·보조기기)도 있습니다. 버튼·키보드 화살표도 병행하는 게 좋죠. Q2. 스크롤되는 줄 모르면요? 그림자·스크롤바로 ’더 있다’를 알려, 사용자가 스크롤을 시도하게 합니다(CP-244). Q3. 키보드로 어떻게 스크롤하나요? 표 영역에 초점을 두고 좌우 화살표로 스크롤되게 구현합니다.

6. 마무리

CP-246의 메시지:

한 동작으로 좌우를 보게 — 가로 스크롤을 단순한 동작으로 조정하게 하라.

가로 스크롤은 일부 열만 보이는 추가 조작을 요구합니다. 스와이프·버튼·키보드 등 단순한 동작으로 위치를 조정 하게 하고 스크롤 가능함을 알려, 누구나 모든 열에 접근하게 하죠. 머리글 고정(CP-244)·시맨틱 구조(CP-245)와 함께 가로 스크롤 표를 완성합니다. 이로써 표 9개(CP-238~246)를 마칩니다. 다음 편부터는 새 컴포넌트 그룹 텍스트 목록(Text list) 으로 넘어갑니다.

다음 편 예고 ▶ 「367. (CP-247) 텍스트 목록 — (다음 컴포넌트 그룹 첫 규칙)」

ViewCheck는 표의 가로 스크롤이 단순한 동작으로 조정되는지를 진단합니다.

📚 참고 출처

KRDS 컴포넌트 — 표(Table) 가이드 — https://www.krds.go.kr/html/site/component/component_22.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컴포넌트,웹표준