표 칸 안에서 펼치지 마라

KRDS CP-170 — 표의 셀 내부 콘텐츠에 사용하고 있지 않다.

0. 들어가며 — 표 칸이 들썩이면

이번 290편은 표(table)의 셀 내부 콘텐츠에 디스클로저를 사용하지 않는다는 규칙입니다.

표는 행과 열로 데이터를 정렬해 비교·탐색하게 하는 구조입니다. 그런데 표의 한 셀 안에 디스클로저(‘더 보기’)를 넣어 펼치면 — 그 셀(행)의 높이가 갑자기 늘어 표 전체 레이아웃이 들썩이고, 행 정렬이 어긋나죠. CP-170은 표 셀 안에서 디스클로저를 쓰지 말라고 규정합니다. 이번 편을 풀어냅니다.

1. 규칙 원문 — 표 셀 내부 사용 금지

CP-170 (컴포넌트 > 디스클로저) “표의 셀 내부 콘텐츠에 사용하고 있지 않다.”

디스클로저를 표(<table>)의 셀(<td>/<th>) 내부 콘텐츠를 펼치고 접는 용도로 사용하지 말라는 뜻입니다.

정리: 표 셀 안에서 디스클로저를 쓰지 마라. 이게 CP-170입니다.

2. 왜 표 셀 안에서 쓰면 안 되나

표의 핵심 가치는 ‘정렬된 격자 구조’ 입니다 — 데이터가 행과 열로 가지런히 맞춰져, 같은 열의 값을 세로로 비교하고 같은 행의 값을 가로로 읽죠. 이 격자 정렬이 표의 가독성과 비교 기능을 만듭니다. 그런데 셀 안에 디스 클로저를 넣으면 이 구조가 무너집니다.

① 레이아웃 들썩임. 표의 한 셀에서 디스클로저를 펼치면 그 셀의 내용이 늘어나죠. 그런데 표는 격자라 — 한 셀의 높이가 늘면 그 행 전체의 높이가 따라 늘어납니다(셀들은 행 높이를 공유). 그러면 그 행의 다른 셀들에 빈 공간이 생기고, 아래 행들이 통째로 밀려 내려가죠. 사용자가 한 셀을 펼쳤을 뿐인데 표 전체 레이아웃이 출렁 이며, 보고 있던 다른 데이터의 위치가 바뀌어 혼란스럽습니다. 펼침/접힘을 반복하면 표가 계속 들썩이죠.

② 정렬·비교 방해. 표는 같은 열을 세로로 비교하는 게 핵심인데, 어느 행만 펼쳐져 키가 커지면 — 행 간 정렬이 어긋나고, 펼친 행의 셀과 다른 행의 셀 위치가 안 맞아 비교가 어려워집니다. 격자의 일관성이 깨지죠.

③ 구조·접근성 혼란. 표는 시맨틱하게 <table>/<tr>/<td>로 데이터 구조를 표현합니다(스크린 리더가 “행 2, 열 3” 식으로 안내). 셀 안에 펼침 위젯이 들어가면 — 그 셀이 ’데이터’인지 ’인터랙티브 컨트롤’인지 모호해지고, 펼친 내용이 셀 구조 안에서 어색하게 자리 잡아 스크린 리더 탐색도 혼란스러워집니다. 표 셀은 ’하나의 데이터 값’을 담는 곳이지, 펼침 콘텐츠를 담는 컨테이너로는 적절치 않죠.

그래서 CP-170은 표 셀 안에서 디스클로저를 쓰지 말라고 합니다. 그럼 표 안의 긴 내용은 어떻게 다룰까요?

별도 행으로 펼치기 — 셀 안이 아니라, 클릭하면 그 행 아래에 새로운 전체 너비 행이 펼쳐지는 방식 (expandable row). 이건 셀 내부 디스클로저와 달리 행 단위로 처리해 격자를 덜 흔들죠(다만 이것도 구현 시 주의가 필요).

상세 페이지·모달 — 행을 클릭하면 별도 페이지나 모달로 상세를 보여줌(CP-163 달력의 손실 없는 확인 수단과 유사).

표 구조 재검토 — 애초에 셀에 긴 내용이 들어가야 한다면, 표가 적절한 형식인지 재고하거나 내용을 요약.

핵심은 — 표의 격자 정렬을 깨는 ’셀 내부 펼침’을 피하고, 긴 내용은 표 밖이나 행 단위 수단으로 다루는 것입니다. 이는 CP-169(중요 정보 숨기지 마라)와 함께 디스클로저의 ’쓰지 말아야 할 자리’를 정하죠 — 꼭 봐야 할 정보에도 (169), 격자 구조인 표 셀에도(170) 쓰지 않습니다.

3. 점검 / 개선

무엇을 점검하나

셀 내부 디스클로저 없음 — 표 <td>/<th> 안에 펼침/접힘 디스클로저가 없는가.

레이아웃 안정 — 표에서 펼침으로 행·격자가 들썩이지 않는가.

대안 사용 — 긴 내용이 별도 행·상세 페이지·모달로 처리되는가.

개선 방향

셀 내부 디스클로저 제거. 긴 내용은 expandable row·상세 페이지·모달로 이전.

표 셀은 단일 데이터 값에 한정.

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

역할	책임
기획/UX	표 내 긴 내용 처리 방식 설계
퍼블리셔/개발	셀 내부 디스클로저 제거·대안 구현

기관 유형	CP-170 적용
중앙행정기관(대표·운영) / 공공기관 / 지자체	✅ 필수 (표 + 디스클로저 사용 시)

표 안에 펼침 콘텐츠를 두려는 사이트가 해당됩니다.

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 표 <td>/<th> 안에 펼침/접힘 디스클로저가 없나요?

□ 표에서 펼침으로 행·격자가 들썩이지 않나요?

□ 긴 내용이 별도 행·상세 페이지·모달로 처리되나요?

❓ FAQ

Q1. 표 셀에 긴 내용이 있으면 어떻게 하나요? 셀 안 디스클로저 대신 별도 행 펼치기(expandable row), 상세 페이지·모달로 처리하거나 내용을 요약합니다. Q2. 왜 셀에서 펼치면 안 되나요? 셀 높이가 늘면 행 전체가 늘어 표 레이아웃이 들썩이고 정렬·비교가 어긋납니다. Q3. 행 전체를 펼치는 건 괜찮나요? 셀 내부보다 격자를 덜 흔들지만, 이것도 구현 시 주의가 필요합니다. 본 규칙의 핵심 금지는 ‘셀 내부’ 디스클로저입니다.

6. 마무리

CP-170의 메시지:

표 칸 안에서 펼치지 마라 — 셀 내부 콘텐츠에 디스클로저를 쓰지 마라.

표는 격자 정렬이 생명인데, 셀 안에서 펼치면 행 높이가 늘어 레이아웃이 들썩이고 비교가 어긋납니다. 긴 내용은 표 밖(상세 페이지·모달)이나 행 단위 수단으로 다루죠. CP-169와 함께 디스클로저의 부적절한 자리를 정합니다. 다음 편은 디스클로저의 기본 상태 — 축소입니다.

다음 편 예고 ▶ 「291. (CP-171) 기본적으로 축소된 상태로 제공하고 있다.」

ViewCheck는 디스클로저가 표 셀 내부에 사용되지 않는지를 진단합니다.

📚 참고 출처

KRDS 컴포넌트 — 디스클로저(Disclosure) 가이드 — https://www.krds.go.kr/html/site/component/component_15.html

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

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