좁으면 표를 다시 짜라

KRDS CP-243 — [모바일] 화면 너비가 충분하지 않은 경우 데이터의 배열 방식을 변경하여 제공하고 있다.

0. 들어가며 — 넓은 표를 좁은 화면에

이번 363편은 모바일처럼 화면이 좁을 때 데이터 배열 방식을 변경하라는 규칙입니다.

표는 여러 열을 가로로 펼쳐 보여줍니다 — 넓은 화면에선 괜찮지만, 좁은 모바일에선 열이 다 안 들어가죠. 이때 데스크톱 표를 그대로 욱여넣으면 글자가 잘리거나 가로 스크롤이 강요됩니다. CP-243은 좁은 화면에서 표의 배열 방식을 모바일에 맞게 바꿔 제공하라고 규정합니다. 이번 편을 풀어냅니다.

1. 규칙 원문 — 좁은 화면 배열 방식 변경

CP-243 (컴포넌트 > 표) [모바일] “화면 너비가 충분하지 않은 경우 데이터의 배열 방식을 변경하여 제공하고 있다.”

모바일 등 좁은 화면에서는 표의 데이터를 가로 나열 그대로 두지 말고, 좁은 화면에 맞는 배열(세로 카드형 등)로 변경해 제공하라는 뜻입니다.

정리: 좁은 화면에선 표 배열을 모바일에 맞게 바꿔라. 이게 CP-243입니다.

2. 왜 배열 방식을 변경하나

표는 본질적으로 가로로 넓은 컴포넌트입니다 — 여러 열(속성)을 가로로 펼쳐, 한 행(항목)의 여러 속성을 가로로 읽고 여러 행을 세로로 비교하죠. 이 구조는 충분한 가로 공간을 전제합니다(CP-238). 그런데 모바일(360~430px)은 가로가 좁아 — 열이 4개, 5개만 돼도 다 안 들어가죠.

좁은 화면에서 표를 그대로 두면:

데이터 잘림/축소 — 열이 화면 너비를 넘으면 셀 내용이 잘리거나, 강제로 줄여 글자가 안 읽힙니다.

가로 스크롤 강요 — 잘림을 피하려 가로 스크롤을 두면, 한 번에 일부 열만 보여 비교가 어렵죠(CP-238에서 본 문제). 단, 관계가 복잡한 표는 불가피하게 가로 스크롤을 쓰기도 합니다(CP-244).

가독성 붕괴 — 좁은 폭에 많은 열을 욱여넣으면 표 전체가 빽빽하고 어수선해집니다.

그래서 CP-243은 — 좁은 화면에서 데이터 배열 방식을 변경하라고 합니다. 대표적 방법:

카드형 전환(세로 재배열) — 가로로 펼쳐진 표를, 각 행을 세로 카드로 바꿉니다. 한 행(항목)의 여러 속성을 카드 안에 ‘레이블: 값’ 형태로 세로로 쌓죠. 예를 들어 ‘이름 | 부서 | 전화’ 표를 — 모바일에선 카드 하나에 “이름: 홍길동 / 부서: 민원과 / 전화: …” 식으로 세로로요. 좁은 폭에 잘 맞고, 한 항목의 정보를 온전히 봅니다.

열 우선순위(중요 열만) — 모바일에서는 중요한 열만 표시하고 부가 열은 숨기거나(펼침), 핵심 정보만 보여 주죠.

반응형 표 — 미디어 쿼리로 넓으면 일반 표, 좁으면 카드형으로 전환하는 반응형 구현.

핵심은 — 좁은 화면에서 표의 ’데이터’는 유지하되 ’배열(레이아웃)’을 화면에 맞게 바꿔, 잘림·가로 스크롤 없이 읽히게 하는 것입니다. 페이지네이션(CP-121 수직 배치), 캐러셀(CP-221 분수형), 사이드 메뉴(CP-096 햄버거)에서 본 ’좁은 화면 반응형 대응’의 표 버전이죠.

단, 비교가 중요하면 가로 스크롤. 한 가지 예외 표의 핵심이 ’여러 행을 같은 열로 비교’하는 것이고, 카드형 으로 바꾸면 그 비교가 깨지는 경우(행·열 관계가 복잡하거나 비교가 본질인 표)에는 배열 변경 대신 가로 스크롤 을 쓰는 것이 나을 수 있습니다. 이는 다음 편 CP-244에서 다루죠. 즉 CP-243(배열 변경)과 CP-244(가로 스크롤)는 표의 성격에 따라 선택하는 모바일 대응 짝입니다 단순 데이터는 카드형 재배열(243), 복잡·비교 중심은 가로 스크롤(244).

접근성. 배열을 바꿔도 — 데이터의 구조(어느 값이 어느 항목·속성인지)는 유지돼야 합니다. 카드형으로 바꿀 때 각 값에 레이블(속성명)을 함께 보여줘 ‘이 값이 무엇인지’ 명확히 하고, 시맨틱 마크업(CP-245)으로 스크린 리더 에도 구조를 전하죠.

정리하면 — 표는 가로로 넓어 좁은 화면에 안 맞으므로, 모바일에서는 카드형 세로 재배열 등으로 배열 방식을 바꿔 잘림·가로 스크롤 없이 읽히게 하되, 비교가 본질인 표는 가로 스크롤(CP-244)을 선택합니다.

3. 점검 / 개선

무엇을 점검하나

배열 변경 — 좁은 화면에서 표가 카드형 등으로 재배열되는가(데스크톱 표 그대로 아님).

잘림·스크롤 없음 — 데이터 잘림이나 강제 가로 스크롤이 없는가(단순 표 기준).

레이블·구조 유지 — 재배열 후에도 각 값의 속성명·데이터 구조가 유지되는가.

개선 방향

좁은 화면 미디어 쿼리로 카드형 세로 재배열(레이블: 값). 중요 열 우선.

비교가 본질인 표는 가로 스크롤(CP-244) 선택. 구조·시맨틱(CP-245) 유지.

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

역할	책임
디자이너	모바일 표 배열(카드형 등) 설계
퍼블리셔/개발	반응형 배열 변경 구현

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

모바일에서 표를 보여주는 모든 사이트가 해당됩니다.

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 좁은 화면에서 표가 카드형 등으로 재배열되나요(데스크톱 표 그대로 아님)?

□ 데이터 잘림이나 강제 가로 스크롤이 없나요(단순 표 기준)?

□ 재배열 후에도 각 값의 속성명·데이터 구조가 유지되나요?

❓ FAQ

Q1. 모바일에서 표를 그대로 두면 안 되나요? 열이 다 안 들어가 잘리거나 가로 스크롤이 강요됩니다. 카드형 등으로 재배열하는 게 좋습니다. Q2. 카드형이 뭔가요? 각 행을 세로 카드로 바꿔 ‘레이블: 값’ 형태로 쌓는 것입니다. 좁은 폭에 잘 맞죠. Q3. 비교가 중요한 표는요? 카드형으로 바꾸면 비교가 깨지는 표는 가로 스크롤(CP-244)을 씁니다. 표 성격에 따라 선택하죠.

6. 마무리

CP-243의 메시지:

좁으면 표를 다시 짜라 — 좁은 화면에선 데이터 배열 방식을 변경하라.

표는 가로로 넓어 좁은 화면에 안 맞습니다. 모바일에선 카드형 세로 재배열 등으로 배열을 바꿔 잘림·가로 스크롤 없이 읽히게 하죠. 단 비교가 본질인 표는 가로 스크롤(CP-244)을 선택합니다. 다음 편이 그 가로 스크롤 대응입니다.

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

ViewCheck는 좁은 화면에서 표의 데이터 배열이 변경되는지를 진단합니다.

📚 참고 출처

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

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

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