셀은 짧게, 행은 여유롭게

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

0. 들어가며 — 표가 비교 도구가 되려면

이번 359편은 데이터 셀 텍스트는 3줄 이내로, 행 간격은 적절하게 구성해 비교 가능하게 하라는 규칙입니다.

표의 가치는 ’한눈에 비교’입니다. 그런데 셀 텍스트가 너무 길어 여러 줄로 늘어지거나, 행이 너무 빽빽하면 — 데이터 스캔·비교가 어렵죠. CP-239는 셀 텍스트를 3줄 이내로 제한하고 행 간격을 적절히 둬, 표를 깔끔한 비교 도구로 유지하라고 규정합니다. 이번 편을 풀어냅니다.

1. 규칙 원문 — 셀 텍스트 3줄·적절한 행 간격

CP-239 (컴포넌트 > 표) “데이터 셀의 텍스트는 3줄을 넘어가지 않도록 하고, 행과 행 사이의 간격을 적절하게 구성하여 데이터를 비교할 수 있도록 하고 있다.”

표 데이터 셀의 텍스트를 최대 3줄 이내로 유지하고, 행 사이 간격을 적절히 둬 사용자가 데이터를 쉽게 스캔·비교 하게 하라는 뜻입니다.

정리: 셀 텍스트는 3줄 이내, 행 간격은 적절하게 — 비교하기 쉽게. 이게 CP-239입니다.

2. 왜 셀 텍스트 3줄·적절한 행 간격인가

표는 ’데이터를 행·열로 정렬해 비교’하는 도구입니다. 이 비교가 효율적이려면 — 데이터를 빠르게 스캔할 수 있어야 하죠. 사용자는 표를 가로(한 행 읽기)·세로(한 열 비교)로 시선을 움직이며 훑습니다. 셀 텍스트가 길거나 행이 빽빽하면 이 스캔이 방해받죠.

① 셀 텍스트 3줄 이내. 표 셀에 긴 텍스트(문단 수준)가 들어가면:

행 높이 들쭉날쭉 — 한 셀의 텍스트가 길어 5~6줄이 되면, 그 행 전체가 그 높이만큼 커지죠. 행마다 높이가 제각각이면 표가 어수선하고 세로 스캔(같은 열 비교)이 어렵습니다.

스캔 부담 — 셀마다 긴 텍스트를 읽어야 하면 — 표를 ‘훑어 비교’하는 게 아니라 ’문서를 읽는’ 게 되어 느리죠. 표는 간결한 데이터(값·짧은 항목)를 비교하는 도구지, 긴 글을 담는 곳이 아닙니다.

그래서 CP-239는 셀 텍스트를 최대 3줄 이내로 유지하라고 합니다. 셀 내용은 간결하게(값·짧은 구) 작성하고, 긴 설명이 필요하면 — 요약만 셀에 담고 상세는 다른 곳(상세 페이지·툴팁 등)으로 보내죠. 3줄은 — 약간의 설명은 허용하되 문단 수준으로 길어지지 않게 하는 적정선입니다.

② 적절한 행 간격. 행과 행 사이의 간격(셀 패딩·행 높이)도 비교 효율에 중요합니다:

너무 빽빽하면 — 행들이 다닥다닥 붙어 있으면, 사용자가 ‘지금 어느 행을 보는지’ 헷갈리고 시선이 옆 행으로 미끄러지죠. 특히 세로로 같은 열의 값을 비교할 때, 행이 빽빽하면 어느 값이 어느 행 것인지 헷갈립니다.

적절한 간격 — 행에 충분한 세로 여백(패딩)을 두면, 각 행이 또렷이 구분되어 시선이 한 행에 머물기 쉽고, 가로로 한 행을 읽고 세로로 비교하기 편하죠. (행 구분선·줄무늬(zebra stripe)를 더하기도 합니다.)

이 둘이 합쳐져 — 표가 ’깔끔하게 정렬된, 스캔하기 쉬운 비교 도구’가 됩니다. 셀이 짧아 행 높이가 일정하고, 행 간격이 적절해 각 행이 또렷하면, 사용자는 표를 빠르게 훑으며 데이터를 비교하죠.

관련 규칙과의 연결. 이 규칙은 표의 ’가독성·비교성’을 담당합니다 — 정렬(CP-240, 숫자 우측·텍스트 좌측)로 같은 열 값을 비교하기 쉽게, 빈 셀 대시(CP-242)로 데이터 누락을 명확히, 정렬 기능(CP-241)으로 원하는 순서로 비교하게 하죠. CP-239(셀·행 구성)는 그 비교의 시각적 토대입니다. 그리고 셀 텍스트가 짧으면(3줄) 모바일 대응 (CP-243)도 수월하죠.

정리하면 — 표가 효율적 비교 도구가 되려면, 셀 텍스트를 3줄 이내로 간결히 유지해 행 높이를 일정하게 하고, 행 간격을 적절히 둬 각 행이 또렷이 구분되게 해야 합니다.

3. 점검 / 개선

무엇을 점검하나

셀 3줄 이내 — 데이터 셀 텍스트가 3줄을 넘지 않는가.

행 높이 일정 — 셀이 간결해 행 높이가 들쭉날쭉하지 않은가.

행 간격 적절 — 행 사이 간격이 적절해 각 행이 또렷이 구분되는가.

개선 방향

셀 텍스트를 간결하게(3줄 이내). 긴 설명은 요약+상세 링크/툴팁으로.

행에 충분한 세로 패딩·구분선·줄무늬로 행 구분.

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

역할	책임
콘텐츠/기획	셀 내용 간결화
디자이너/개발	셀 3줄 제한·행 간격 구현

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

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

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 데이터 셀 텍스트가 3줄을 넘지 않나요?

□ 셀이 간결해 행 높이가 들쭉날쭉하지 않나요?

□ 행 사이 간격이 적절해 각 행이 또렷이 구분되나요?

❓ FAQ

Q1. 셀에 긴 설명이 필요하면요? 요약만 셀에 담고 상세는 상세 페이지·툴팁으로 보냅니다. 표는 간결한 데이터 비교 도구입니다. Q2. 왜 3줄인가요? 약간의 설명은 허용하되 문단 수준으로 길어져 행 높이가 망가지지 않게 하는 적정선입니다. Q3. 행 간격은 얼마가 적절한가요? 각 행이 또렷이 구분되고 시선이 옆 행으로 안 미끄러질 정도의 세로 여백 입니다.

6. 마무리

CP-239의 메시지:

셀은 짧게, 행은 여유롭게 — 셀 텍스트 3줄 이내·적절한 행 간격으로 비교하기 쉽게.

표가 효율적 비교 도구가 되려면 셀이 간결해 행 높이가 일정하고, 행 간격이 적절해 각 행이 또렷해야 하죠. 셀 텍스트는 3줄 이내로, 긴 설명은 다른 곳으로 보냅니다. 다음 편은 데이터 정렬(숫자 우측·텍스트 좌측)입니다.

다음 편 예고 ▶ 「360. (CP-240) 양적 데이터를 전달하기 위한 숫자는 오른쪽으로 정렬, 텍스트 데이터, 명목 데이터는 왼쪽으로 정렬하고 있다.」

ViewCheck는 표의 셀 텍스트 길이와 행 간격이 비교에 적절한지를 진단합니다.

📚 참고 출처

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

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

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