빈칸 대신 대시를

KRDS CP-242 — 데이터 값이 존재하지 않는 경우 셀을 비워두지 않고 대시(-)를 제공하고 있다.

0. 들어가며 — 셀이 비어 있으면

이번 362편은 데이터 값이 없는 경우 셀을 비워두지 않고 대시(-)를 제공하라는 규칙입니다.

표에서 어떤 셀에 데이터가 없을 때 — 그냥 빈칸으로 두면, 사용자는 ‘데이터가 없는 건가? 깜빡 빠뜨린 건가? 로딩 중인가?’ 헷갈리죠. 또 스크린 리더는 빈 셀을 그냥 건너뛰어 정보를 못 줍니다. CP-242는 빈 셀에 대시(-) 같은 표시를 넣어 ’값 없음’을 명확히 하라고 규정합니다. 이번 편을 풀어냅니다.

1. 규칙 원문 — 빈 셀에 대시 제공

CP-242 (컴포넌트 > 표) “데이터 값이 존재하지 않는 경우 셀을 비워두지 않고 대시(-) 를 제공하고 있다.”

표에서 값이 없는 셀을 빈칸으로 두지 말고, 대시(-) 같은 표시로 ’데이터가 없음’을 명시하라는 뜻입니다.

정리: 값 없는 셀은 비워두지 말고 대시(-)로 표시하라. 이게 CP-242입니다.

2. 왜 빈 셀에 대시를 넣나

표에서 셀이 비어 있을 때 — 그 ’비어 있음’의 의미가 모호합니다. 사용자는 빈 셀을 보고 여러 가지로 해석할 수 있죠:

‘값이 없다’ (데이터가 실제로 존재하지 않음)

‘아직 입력 안 됐다’ (누락·미입력)

‘로딩 중이다’ (데이터를 불러오는 중)

‘표가 잘못됐다’ (오류로 셀이 빠짐)

빈칸 하나로는 이 중 어느 것인지 알 수 없죠. 사용자는 ‘이 셀은 왜 비어 있지? 데이터가 없는 건가, 빠뜨린 건가?’ 하고 혼란스러워합니다. 특히 다른 셀에는 값이 있는데 이 셀만 비면 — ‘실수로 누락된 게 아닐까’ 의심하죠.

그래서 CP-242는 — 값이 없는 셀에 대시(-) 같은 명시적 표시를 넣으라고 합니다. 대시가 있으면:

‘값 없음’ 명확 — 대시는 ’여기는 의도적으로 데이터가 없다’는 명확한 신호입니다. 사용자는 ’아, 이 항목은 해당 값이 없구나’를 알고 안심하죠. 빈칸의 모호함(누락? 오류?)이 사라집니다.

표의 완결성 — 모든 셀이 채워져(값 또는 대시) 표가 완성된 격자로 보입니다. 빈칸이 뚫린 표는 미완성·오류 처럼 보이지만, 대시로 채우면 정돈되죠.

접근성 스크린 리더. 이게 특히 중요합니다. 스크린 리더가 표를 읽을 때 빈 셀은 그냥 건너뛰거나 “빈 셀”이라고만 읽어, 비시각 사용자는 그 셀에 무엇이 있어야 하는지, 왜 비었는지 모르죠. 더 나아가 빈 셀이 많으면 행·열 구조 파악이 흐트러집니다. 대시(-)가 있으면 스크린 리더가 “대시” 또는 “없음”으로 읽어, 비시각 사용자도 ’이 셀은 값이 없다’를 명확히 인지하죠. (대시를 더 명확히 하려면 aria-label로 “값 없음” 같은 설명을 줄 수도 있습니다.)

구현·일관성:

일관된 표시 — 값 없는 셀을 모두 같은 표시(대시 -, 또는 ‘N/A’, ‘해당 없음’ 등 정한 것)로 통일. 어떤 빈 셀은 대시, 어떤 건 빈칸이면 일관성이 깨지죠.

의미 구분(선택) — 경우에 따라 — ’값이 0’과 ’값이 없음’은 다릅니다. 0은 ’0’으로, 없음은 대시로 구별 하죠(0을 대시로 표시하면 안 됨). ’데이터 없음’과 ’해당 없음(N/A)’을 구분해야 하면 다른 표시를 쓰기도 합니다.

시각적 절제 — 대시는 실제 값보다 약하게(연한 색 등) 표시해, 값과 구별하면서 시각적으로 튀지 않게 하기도 하죠.

이 규칙은 표의 ’데이터 완결성·명확성’을 담당합니다 — 셀·행 구성(CP-239), 정렬(CP-240·241)과 함께, 모든 셀이 명확한 의미를 갖게 하죠. 빈 셀은 표의 흔한 모호함이라, 대시 처리가 사용성·접근성을 높입니다.

정리하면 — 빈 셀은 ’값 없음/누락/오류’가 모호하고 스크린 리더가 건너뛰므로, 대시(-) 같은 명시적 표시로 ’값 없음’을 분명히 해 모든 사용자가 인지하게 해야 합니다.

3. 점검 / 개선

무엇을 점검하나

빈 셀 없음 — 값이 없는 셀이 빈칸이 아니라 대시(-) 등으로 표시되는가.

일관성 — 값 없는 셀이 모두 같은 표시로 통일됐는가.

접근성 — 스크린 리더가 ’값 없음’을 인지할 수 있는가(대시 낭독·aria-label).

개선 방향

값 없는 셀에 대시(-) 등 일관된 표시. 0과 없음을 구별.

필요 시 aria-label="값 없음" 등으로 스크린 리더 명확화.

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

역할	책임
퍼블리셔/개발	빈 셀 대시 처리·일관 적용
콘텐츠	값 없음/0/해당없음 구분 정의

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

값이 빌 수 있는 데이터 표를 쓰는 모든 사이트가 해당됩니다.

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 값이 없는 셀이 빈칸이 아니라 대시(-) 등으로 표시되나요?

□ 값 없는 셀이 모두 같은 표시로 통일됐나요?

□ 스크린 리더가 ’값 없음’을 인지할 수 있나요?

❓ FAQ

Q1. 빈칸으로 두면 안 되나요? 빈칸은 ‘값 없음/누락/오류’가 모호하고 스크린 리더가 건너뜁니다. 대시로 ’값 없음’을 명시합니다. Q2. 0과 없음은 같나요? 다릅니다. 0은 ’0’으로, 없음은 대시로 구별해야 합니다. 0을 대시로 표시하면 안 되죠. Q3. 대시 말고 다른 표시도 되나요? ’N/A’, ‘해당 없음’ 등도 가능합니다. 핵심은 빈칸을 피하고 일관되게 표시 하는 것입니다.

6. 마무리

CP-242의 메시지:

빈칸 대신 대시를 — 값 없는 셀을 대시(-)로 표시해 ’없음’을 명확히.

빈 셀은 ’값 없음/누락/오류’가 모호하고 스크린 리더가 건너뜁니다. 대시(-)로 ’값 없음’을 명시하면 사용자가 명확히 인지하고 표가 완결돼 보이죠. 0과 없음은 구별합니다. 다음 편은 모바일에서 표의 배열 방식 변경입니다.

다음 편 예고 ▶ 「363. (CP-243) [모바일] 화면 너비가 충분하지 않은 경우 데이터의 배열 방식을 변경하여 제공하고 있다.」

ViewCheck는 표의 빈 셀이 대시로 처리되는지를 진단합니다.

📚 참고 출처

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

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

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