빈 칸은 보여주지 마라

KRDS SP-167 — 내용이 없는 콘텐츠 섹션과 섹션 제목은 표시되지 않도록 하고 있다.

0. 들어가며 — 제목만 있고 내용이 없는 섹션이 보이면

이번 841편은 내용이 없는 콘텐츠 섹션과 섹션 제목은 표시되지 않도록 하라는 규칙입니다.

정책 상세 페이지에 — 제목만 있고 내용이 비어 있는 섹션이 보이면, 사용자는 ‘여기 뭐가 빠진 거 아냐?’ 혼란스럽죠. SP-167은 빈 섹션을 표시하지 않게 하라고 규정합니다. 템플릿 운영의 함정이죠. 이번 편을 풀어냅니다.

1. 원문 — 빈 섹션 미표시

SP-167 ([정보 확인] 서비스 패턴 > 정책 정보 확인 > 정보 확인) “내용이 없는 콘텐츠 섹션과 섹션 제목은 표시되지 않도록 하고 있다.”

내용이 없는 섹션과 그 제목은 표시하지 말라는 뜻입니다.

정리: 빈 섹션과 그 제목은 표시하지 말라. 이게 SP-167입니다.

2. 왜 빈 섹션 미표시인가

정책 상세 페이지는, 흔히 템플릿으로 만듭니다: ‘지원 내용’, ‘신청 방법’, ‘문의처’ 같은 고정 섹션을요. 그런데 특정 정책에 어떤 섹션 내용이 없으면, 제목만 덜렁 남죠. 이게 보이면 혼란스럽 습니다. SP-167은 빈 섹션 미표시를 요구합니다.

빈 섹션이 보일 때의 문제:

혼란 ‘문의처’ 제목만 있고 아래가 비어 있으면, 사용자는 ’문의처가 없나? 빠진 건가? 로딩 안 됐나?’를 헷갈립니다. 빈 칸이 오류처럼 보이죠.

신뢰 저하 빈 섹션이 많으면, 페이지가 미완성·관리 안 됨처럼 보입니다.

탐색 방해 빈 섹션 제목이, 스크린 리더 헤딩 탐색에 잡혀 헛걸음하게 합니다.

그래서 SP-167은 — 빈 섹션 미표시를 요구합니다:

내용 있을 때만 표시 콘텐츠 섹션은, 내용이 있을 때만 표시합니다. 내용이 없으면, 섹션 자체(제목 포함)를 렌더링하지 않게요. 조건부 렌더링이죠.

제목도 함께 제거 빈 섹션의 제목도 같이 제거합니다. 제목만 남기지 않게요. 헤딩 구조가 깨끗 하게요.

빈 상태 vs 미표시 구분 단, ’신청 내역 없음’처럼 빈 상태를 알려야 하는 경우(BP-038 빈 상태) 는 예외입니다. 그건 ’없음’을 명시하죠. SP-167은, 그 정책에 해당 없는 섹션을 빼는 것입니다.

레이아웃 유지 섹션을 빼도, 레이아웃이 깨지지 않게요. 남은 섹션이 자연스럽게 이어지게요.

조건부 렌더링의 원칙. 템플릿 기반 페이지는, 모든 섹션을 무조건 그리지 말고 내용 유무로 조건부 렌더링해야 합니다. 데이터가 있으면 그리고, 없으면 빼죠. 이게 빈 섹션을 없애는 근본 방법입니다. 데이터 바인딩 시 null/빈 체크가 핵심이죠.

깨끗한 정보 구조. 빈 섹션을 빼면, 페이지가 깨끗합니다. 사용자는 실제 내용이 있는 섹션만 보고, 혼란 없이 탐색하죠. 헤딩 구조(SP-164)도 정확해, 스크린 리더 탐색이 매끄럽습니다. 정보의 밀도와 정확성을 높이죠.

이 규칙은 정책 정보 확인(SP)의 ’깨끗한 구조’를 담당합니다 — 빈 섹션을 표시하지 않아(167), 사용자가 혼란 없이 실제 내용만 보게 하죠. 조건부 렌더링이 핵심입니다.

정리하면 — 제목만 있고 내용 없는 빈 섹션은 혼란·신뢰 저하·탐색 방해를 부르므로, 내용이 있을 때만 섹션(제목 포함)을 표시(조건부 렌더링, 빈 상태 안내는 예외)해야 합니다.

3. 점검 / 개선

무엇을 점검하나

조건부 표시 — 내용이 있을 때만 섹션이 표시되는가.

제목 제거 — 빈 섹션의 제목도 함께 제거되는가.

레이아웃·예외 — 섹션 제거 시 레이아웃 유지 + 빈 상태 안내는 예외인가.

개선 방향

내용 유무로 조건부 렌더링(null/빈 체크). 빈 섹션 제목 함께 제거.

섹션 제거 시 레이아웃 유지. ‘내역 없음’(BP-038) 빈 상태는 별개.

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

역할	책임
개발/퍼블리셔	조건부 렌더링 구현
콘텐츠/운영	섹션 내용 관리

기관 유형	SP-167 적용
중앙행정기관(대표·운영) / 공공기관 / 지자체	✅ 권장 (템플릿 상세 페이지)

템플릿 기반 정책 상세를 제공하는 기관이 해당됩니다.

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 내용이 있을 때만 섹션이 표시되나요?

□ 빈 섹션의 제목도 함께 제거되나요?

□ 섹션 제거 시 레이아웃 유지 + 빈 상태 안내는 예외인가요?

❓ FAQ

Q1. 빈 섹션이 왜 문제인가요? ‘문의처’ 제목만 있고 아래가 비면 ’없나? 빠진 건가? 로딩 안 됐나?’를 헷갈립니다. 빈 칸이 오류처럼 보이고, 페이지가 미완성처럼 보여 신뢰가 떨어지죠. 스크린 리더 헤딩 탐색도 헛걸음하고요. Q2. 어떻게 없애나요? 모든 섹션을 무조건 그리지 말고 내용 유무로 조건부 렌더링합니다. 데이터가 있으면 그리고, 없으면 섹션(제목 포함)을 빼요. 데이터 바인딩 시 null/빈 체크가 핵심이죠. Q3. ‘내역 없음’ 안내도 빼나요? 아니요. 그건 빈 상태(BP-038)를 알려야 하는 경우라 예외입니다. ’신청 내역 없음’처럼 ’없음’을 명시하죠. SP-167은 그 정책에 해당 없는 섹션을 빼는 것입니다.

6. 마무리

SP-167의 메시지:

빈 칸은 보여주지 마라 — 내용 없는 섹션과 제목은 표시하지 말라.

빈 섹션은 혼란·신뢰 저하·탐색 방해를 부릅니다. 내용이 있을 때만 조건부 렌더링해 깨끗한 정보 구조를 만드는 게 핵심이죠. 다음 편은 멀티미디어 콘텐츠 활용입니다.

다음 편 예고 ▶ 「842. (SP-168) 효과적인 정보 전달 및 사용자 흥미 유발을 위해 인포그래픽, 사진, 동영상 등의 콘텐츠를 적절하게 활용하여 구성하고 있다.」

ViewCheck는 내용 없는 섹션과 제목이 표시되지 않는지를 진단합니다.

📚 참고 출처

KRDS 서비스 패턴 — 정책 정보 확인 가이드 — https://www.krds.go.kr/html/site/service/service_05.html

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

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