복잡하면 가로 스크롤로 관계를 지켜라

KRDS CP-244 — [모바일] 행과 열 간의 관계 표현이 유지되어야 하거나 구성이 복잡한 경우 표 영역에 가로 스크롤을 사용하여 제공하고 있다.

0. 들어가며 — 카드형으로 못 바꾸는 표

이번 364편은 행·열 관계가 유지돼야 하거나 구성이 복잡한 표는 모바일에서 가로 스크롤로 제공하라는 규칙입니다.

앞 편(CP-243)에서 좁은 화면의 표는 카드형 등으로 재배열했습니다. 그런데 — 행·열의 비교 관계가 본질이거나 구조가 복잡한 표는, 카드형으로 바꾸면 그 관계가 깨지죠. 이런 표는 배열을 바꾸기보다 표 구조를 유지한 채 가로 스크롤 로 보는 게 낫습니다. CP-244는 그 선택을 규정합니다. CP-243의 짝이죠. 이번 편을 풀어냅니다.

1. 규칙 원문 — 복잡한 표는 가로 스크롤

CP-244 (컴포넌트 > 표) [모바일] “행과 열 간의 관계 표현이 유지되어야 하거나 구성이 복잡한 경우 표 영역에 가로 스크롤을 사용하여 제공하고 있다.”

행·열의 관계(비교 구조)가 유지돼야 하거나 구성이 복잡한 표는, 좁은 화면에서 배열을 바꾸지 말고 표 영역에 가로 스크롤을 둬 표 구조를 유지하라는 뜻입니다.

정리: 관계 유지 필요·복잡한 표는 모바일에서 가로 스크롤로 제공하라. 이게 CP-244입니다.

2. 왜 복잡한 표는 가로 스크롤인가

CP-243(배열 변경, 카드형)이 모바일 표 대응의 기본이지만 — 모든 표에 맞는 건 아닙니다. 카드형 재배열은 ’각 행을 독립된 카드로 분리’하는데, 이것이 부적합한 표가 있죠:

카드형이 안 맞는 표:

행·열 비교가 본질 — 표의 핵심이 ’여러 행을 같은 열로 비교’하는 것이면(예: 여러 연도의 통계 비교, 여러 상품의 사양 비교), 카드형으로 각 행을 분리하면 — 행 간 비교가 불가능해집니다. 카드를 위아래로 스크롤하며 봐야 해, 같은 열의 값을 나란히 비교 못 하죠. 표의 가치(한눈 비교)가 사라집니다.

구성이 복잡 — 셀 병합, 다단계 헤더(상위 헤더 + 하위 헤더), 행·열 머리글이 교차하는 복잡한 표는 — 카드형 으로 단순화하기 어렵고, 억지로 바꾸면 구조·관계가 왜곡되죠.

이런 표는 — 배열을 바꾸기보다 표 구조를 그대로 유지하는 게 낫습니다. 그러려면 좁은 화면에서 표가 넘치므로, 가로 스크롤을 씁니다 — 표 영역을 가로로 스크롤 가능하게 해, 사용자가 좌우로 밀어 모든 열을 보죠. 표의 행·열 구조와 관계가 그대로 유지되어, 비교·구조 파악이 가능합니다.

즉 CP-243과 CP-244는 표의 성격에 따른 모바일 대응 선택입니다:

단순 데이터, 행 독립적 → 카드형 재배열(CP-243). 좁은 폭에 잘 맞고 한 항목 정보를 온전히 봄.

비교 본질, 복잡한 구조 → 가로 스크롤(CP-244). 표 구조·관계 유지.

표를 만들 때 — ’이 표가 카드형으로 바꿔도 되는가, 아니면 구조를 유지해야 하는가’를 판단해 적절한 대응을 고릅니다.

가로 스크롤의 사용성 보완. 가로 스크롤은 — CP-238에서 본 단점(한 번에 일부 열만 보임, 비교 제한)이 있어, 불가피한 경우에만 쓰고 사용성을 보완해야 하죠:

머리글 고정(sticky header/column) — 가로 스크롤 시 첫 열(행 머리글, 예: 항목명)을 고정하면, 사용자가 좌우로 스크롤해도 ‘지금 보는 값이 어느 항목 것인지’ 알 수 있죠. 행 머리글 고정이 관계 유지의 핵심입니다.

스크롤 가능 표시 — 표가 가로 스크롤됨을 시각적으로 알림(그림자·페이드, 모달 스크롤 인지 CP-177 정신). 사용자가 ’오른쪽에 더 있다’를 알게요.

단순한 스크롤 조작 — 가로 스크롤 위치 조정이 단순한 동작으로 되게(다음 편 CP-246) — 스와이프, 스크롤바 등.

접근성. 가로 스크롤 영역은 — 키보드로도 스크롤되게 하고(영역 포커스+화살표), 스크린 리더가 표 구조(시맨틱 마크업 CP-245)로 관계를 인지하게 합니다. 시각 사용자가 머리글 고정으로 관계를 보듯, 비시각 사용자는 <th> 연결로 관계를 얻죠.

정리하면 — 행·열 비교가 본질이거나 구조가 복잡해 카드형 재배열이 부적합한 표는, 가로 스크롤로 표 구조·관계를 유지하되 머리글 고정·스크롤 표시로 사용성을 보완해야 합니다.

3. 점검 / 개선

무엇을 점검하나

적절한 선택 — 비교 본질·복잡한 표가 가로 스크롤로(카드형 강제 아님) 제공되는가.

머리글 고정 — 가로 스크롤 시 행 머리글(첫 열)이 고정되어 관계가 유지되는가.

스크롤 표시·접근성 — 스크롤 가능 표시가 있고 키보드·스크린 리더로 접근되는가.

개선 방향

비교 본질·복잡한 표는 가로 스크롤 적용. 행 머리글 sticky 고정.

스크롤 가능 표시(그림자), 키보드 스크롤·시맨틱 마크업(CP-245) 병행.

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

역할	책임
디자이너	표 성격별 모바일 대응(카드형/가로 스크롤) 결정
퍼블리셔/개발	가로 스크롤·머리글 고정·접근성 구현

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

비교·복잡 구조 표를 모바일에서 보여주는 사이트가 해당됩니다.

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 비교 본질·복잡한 표가 가로 스크롤로 제공되나요(카드형 강제 아님)?

□ 가로 스크롤 시 행 머리글(첫 열)이 고정되어 관계가 유지되나요?

□ 스크롤 가능 표시가 있고 키보드·스크린 리더로 접근되나요?

❓ FAQ

Q1. CP-243(카드형)과 뭐가 다른가요? 단순 데이터·행 독립적이면 카드형(243), 비교 본질·복잡 구조면 가로 스크롤(244)입니다. 표 성격에 따라 선택하죠. Q2. 가로 스크롤은 비교가 어렵지 않나요? 그래서 행 머리글을 고정해, 좌우로 스크롤해도 어느 항목 값인지 알게 합니다. Q3. 스크롤되는 걸 어떻게 알리나요? 표 가장자리에 그림자·페이드로 ’더 있다’를 표시합니다(CP-177 정신).

6. 마무리

CP-244의 메시지:

복잡하면 가로 스크롤로 관계를 지켜라 — 비교 본질·복잡 구조 표는 가로 스크롤로.

카드형으로 바꾸면 행 비교가 깨지거나 구조가 왜곡되는 표는, 가로 스크롤로 표 구조·관계를 유지하죠. 행 머리글 고정·스크롤 표시로 사용성을 보완합니다. CP-243(카드형)과 표 성격에 따라 선택하는 짝이죠. 다음 편은 표의 시맨틱 마크업입니다.

다음 편 예고 ▶ 「365. (CP-245) 데이터의 구조를 적절하게 반영하여 마크업하고 있다.」

ViewCheck는 복잡한 표가 모바일에서 가로 스크롤로 관계를 유지하는지를 진단합니다.

📚 참고 출처

KRDS 컴포넌트 — 표(Table) 가이드 — https://www.krds.go.kr/html/site/component/component_22.html

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

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