좁은 데 표를 욱여넣지 마라

KRDS CP-238 — 표는 아코디언, 모달과 같이 공간의 제한으로 인해 데이터가 잘리거나 확인을 위해 가로 스크롤을 사용해야 하는 영역에는 사용하고 있지 않다.

0. 들어가며 — 표 그룹의 첫 규칙

이번 358편부터 표(Table) 그룹(CP-238~246, 9개)으로 들어갑니다. 첫 규칙은 공간 제한으로 데이터가 잘리거나 가로 스크롤이 필요한 영역(아코디언·모달 등)에는 표를 사용하지 말라는 내용이죠.

표는 행과 열로 데이터를 정렬해 한눈에 비교하게 하는 컴포넌트입니다 — 그러려면 충분한 가로 공간이 필요하죠. 그런데 아코디언 패널, 모달처럼 공간이 좁은 영역에 표를 넣으면 — 데이터가 잘리거나 가로 스크롤을 강요해 비교가 어려워집니다. CP-238은 좁은 영역에 표를 무리하게 쓰지 말라고 규정합니다. 이번 편을 풀어냅니다.

1. 규칙 원문 — 공간 제한 영역 사용 금지

CP-238 (컴포넌트 > 표) “표는 아코디언, 모달과 같이 공간의 제한으로 인해 데이터가 잘리거나 확인을 위해 가로 스크롤을 사용해야 하는 영역에는 사용하고 있지 않다.”

표를, 아코디언 패널·모달처럼 가로 공간이 좁아 데이터가 잘리거나 가로 스크롤을 써야 하는 영역에는 사용하지 말라는 뜻입니다.

정리: 좁아서 데이터가 잘리거나 가로 스크롤이 필요한 영역엔 표를 쓰지 마라. 이게 CP-238입니다.

2. 왜 좁은 영역에 표를 쓰면 안 되나

표의 본질적 가치는 — ’데이터를 행·열로 정렬해 한눈에 비교’하는 것입니다(탭이 비교에 부적절한 이유 CP-229의 반대 — 표가 비교에 적합하죠). 그런데 이 비교 기능은 모든 열이 한눈에 보일 때 작동합니다. 충분한 가로 공간이 있어야 여러 열이 나란히 보이고, 같은 행의 값들을 가로로, 같은 열의 값들을 세로로 비교하죠.

좁은 영역에서 표가 망가지는 경우:

데이터 잘림 — 표를 좁은 영역(아코디언 패널, 모달 등)에 넣으면 — 열이 다 안 들어가 일부 열이 잘리거나, 셀 내용이 줄바꿈·말줄임되어 안 읽히죠. 데이터가 잘리면 비교는커녕 값 자체를 못 봅니다.

가로 스크롤 강요 잘림을 피하려 표에 가로 스크롤을 두면 사용자가 좌우로 스크롤하며 봐야 하죠. 그런데 가로 스크롤은 한 번에 일부 열만 보여, 멀리 떨어진 열들을 동시에 비교 못 합니다. 표의 핵심인 ’한눈에 비교’가 무너지죠. 게다가 좁은 영역(모달) 안의 가로 스크롤은 중첩 스크롤(모달 세로 스크롤 + 표 가로 스크롤) 혼란을 부릅니다.

왜 아코디언·모달이 문제인가. 아코디언 패널(CP-198에서 본 패널은 페이지 흐름이지만 폭은 제한적)과 모달 (CP-176 화면 일부의 제한 영역)은 가로 공간이 제한된 영역입니다. 여기에 여러 열의 표를 넣으면 거의 필연적 으로 잘림·가로 스크롤이 생기죠. 그래서 CP-238은 이런 영역에 표를 쓰지 말라고 콕 집습니다.

대안:

표를 넓은 본문 영역에 — 표는 충분한 가로 공간이 있는 일반 본문(전체 너비) 영역에 둡니다.

좁은 영역엔 다른 형식 — 아코디언·모달 안에 데이터를 보여야 하면, 표가 아니라 — 정의 목록(<dl>), 카드, 키-값 나열 같은 세로 형식을 씁니다. 세로 형식은 좁은 폭에서도 잘 맞죠.

모바일 표 대응 — 좁은 화면(모바일)에서 표는 — 배열 방식 변경(CP-243)이나 불가피하면 가로 스크롤 (CP-244)로 대응하는 별도 규칙이 있습니다. 단 CP-238은 ’애초에 좁은 영역(아코디언·모달)에 표를 넣지 마라’는 설계 단계 규칙이죠.

핵심은 — 표는 ’한눈에 비교’가 목적이라 충분한 공간이 필수이고, 좁아서 잘리거나 가로 스크롤이 필요한 영역에 넣으면 그 목적이 무너지므로, 그런 영역엔 표 대신 다른 형식을 쓰라는 것입니다. 긴급 공지(CP-151), 탭(CP-229), 배지(CP-184)에서 본 ’컴포넌트를 적절한 맥락에’의 표 버전이죠.

정리하면 — 표는 충분한 가로 공간에서 한눈에 비교하는 도구이므로, 아코디언·모달처럼 좁아 잘림·가로 스크롤이 생기는 영역에는 쓰지 말고 세로 형식 등 다른 방식을 써야 합니다.

3. 점검 / 개선

무엇을 점검하나

공간 적합 — 표가 모든 열이 한눈에 보일 충분한 공간(넓은 본문)에 있는가.

좁은 영역 배제 — 아코디언·모달 등 좁은 영역에 잘림·가로 스크롤을 일으키는 표가 없는가.

대안 — 좁은 영역의 데이터는 정의 목록·카드 등 세로 형식인가.

개선 방향

표를 넓은 본문 영역에 배치. 좁은 영역(아코디언·모달)엔 표 미사용.

좁은 영역 데이터는 <dl>·카드 등 세로 형식으로.

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

역할	책임
기획/UX	표 vs 다른 형식 판단·배치 영역 결정
디자이너/개발	좁은 영역 표 배제·대안 적용

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

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

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 표가 모든 열이 한눈에 보일 충분한 공간에 있나요?

□ 아코디언·모달 등 좁은 영역에 잘림·가로 스크롤 표가 없나요?

□ 좁은 영역의 데이터는 정의 목록·카드 등 세로 형식인가요?

❓ FAQ

Q1. 모달에 표를 꼭 넣어야 하면요? 표가 잘리거나 가로 스크롤이 생기면 비교가 무너집니다. 세로 형식(정의 목록·카드)이나 별도 페이지를 검토하세요. Q2. 모바일에서 표는 어떻게 하나요? 모바일 좁은 화면은 배열 변경(CP-243)이나 불가피하면 가로 스크롤 (CP-244)로 대응합니다. 단 애초에 좁은 영역(아코디언·모달)엔 안 넣죠. Q3. 가로 스크롤이 왜 나쁜가요? 한 번에 일부 열만 보여 멀리 떨어진 열을 동시에 비교 못 합니다. 표의 핵심이 무너지죠.

6. 마무리

CP-238의 메시지:

좁은 데 표를 욱여넣지 마라 — 잘림·가로 스크롤이 생기는 영역엔 표를 쓰지 마라.

표는 충분한 공간에서 한눈에 비교하는 도구입니다. 아코디언·모달처럼 좁은 영역에 넣으면 데이터가 잘리거나 가로 스크롤이 강요되어 비교가 무너지죠. 넓은 본문에 두고, 좁은 영역엔 세로 형식을 씁니다. 다음 편은 셀 텍스트와 행 간격입니다.

다음 편 예고 ▶ 「359. (CP-239) 데이터 셀의 텍스트는 3줄을 넘어가지 않도록 하고, 행과 행 사이의 간격을 적절하게 구성하여 데이터를 비교할 수 있도록 하고 있다.」

ViewCheck는 표가 공간 제한 영역에 부적절하게 사용되지 않는지를 진단합니다.

📚 참고 출처

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

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

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