처음엔 접혀 있어야

KRDS CP-171 — 기본적으로 축소된 상태로 제공하고 있다.

0. 들어가며 — 접혀 있어야 디스클로저다

이번 291편은 디스클로저를 기본적으로 축소된(접힌) 상태로 제공하라는 규칙입니다.

디스클로저의 존재 이유는 ‘평소엔 접어 화면을 간결하게, 필요하면 펼쳐 보게’ 하는 것이죠. 그렇다면 기본 상태는 접힘이어야 합니다. 처음부터 펼쳐져 있으면 — 화면이 길어지고, ’접을 수 있는 부가 정보’라는 디스클로저 본연의 역할이 무색해지죠. CP-171은 이 기본 축소 상태를 규정합니다. 이번 편을 풀어냅니다.

1. 규칙 원문 — 기본 축소 상태

CP-171 (컴포넌트 > 디스클로저) “기본적으로 축소된 상태로 제공하고 있다.”

디스클로저의 초기(기본) 상태를 접힌(축소된) 상태로 두어, 사용자가 필요할 때 펼쳐 보게 하라는 뜻입니다.

정리: 디스클로저는 처음엔 접힌 상태로 제공하라. 이게 CP-171입니다.

2. 왜 기본이 축소 상태여야 하나

디스클로저는 정보를 ‘핵심(항상 보임)’과 ’부가(펼쳐야 보임)’로 나눠, 부가 정보를 접어두는 컴포넌트입니다 (CP-169). 이 ’접어두는’ 기능이 작동하려면 — 기본 상태가 접힘이어야 하죠. 기본이 펼침이면 디스클로저를 쓰는 의미가 없습니다.

① 화면 간결성. 디스클로저의 핵심 효용은 ’화면을 간결하게 유지’하는 것입니다. 부가 정보를 접어두면 사용자는 핵심만 먼저 보고, 화면이 짧고 깔끔하죠. 한 페이지에 디스클로저가 여러 개라면(FAQ 목록 등), 모두 펼쳐져 있으면 화면이 한없이 길어져 스크롤이 폭증하고 원하는 항목을 찾기 어렵습니다. 기본 접힘이면 — 제목(트리거)들만 짧게 나열돼 사용자가 전체를 훑고 관심 있는 것만 펼치죠. FAQ가 대표적입니다 — 질문 제목들만 보이고, 궁금한 질문만 펼쳐 답을 봅니다.

② 사용자 선택권. 기본 접힘은 사용자에게 ‘무엇을 펼쳐 볼지’ 선택권을 줍니다. 모든 부가 정보를 다 보여주는 게 아니라, 사용자가 필요로 하는 것만 능동적으로 펼치죠. 정보 과부하를 막고, 각자 관심사에 집중하게 합니다.

③ 점진적 공개(Progressive Disclosure). 디스클로저는 UX의 ‘점진적 공개’ 원칙을 구현합니다 — 처음엔 핵심만 보여주고, 사용자가 원하면 단계적으로 더 깊은 정보를 펼치는 것이죠. 이는 인지 부담을 줄이고 학습을 돕는 검증된 패턴입니다. 기본 접힘이 이 점진적 공개의 출발점이죠.

예외는 없나? 거의 모든 경우 기본 접힘이 맞습니다. 다만 — 만약 어떤 정보를 다수 사용자가 거의 항상 펼쳐 본다면, 그건 사실 ’부가’가 아니라 ’핵심’에 가까우므로 애초에 디스클로저로 접지 말고 항상 보이게 하는 게 맞죠 (CP-169의 정신). 즉 ’기본 펼침으로 둬야 할 것 같은 정보’는 디스클로저 대상이 아니라는 신호입니다. 디스클로저에 담는 건 ’안 봐도 되는 부가 정보’이고, 그렇다면 기본은 자연히 접힘이죠.

상태 표시와의 연결. 기본 축소 상태는 — 트리거(버튼)에 그 상태가 표시돼야 합니다. 접힌 상태면 ’펼치기’를 암시하는 표시(▶ 화살표, + 기호 등)와 aria-expanded="false"(CP-175)가 있어야 사용자·스크린 리더가 ’지금 접혀 있고 펼칠 수 있다’를 알죠. 펼치면 표시가 바뀌고(▼, −) aria-expanded="true"로 갱신됩니다. 즉 기본 접힘 상태가 시각·보조기술 양쪽에 명확히 전달돼야 합니다.

이 규칙은 디스클로저의 기본 동작을 정합니다 — CP-169·170(쓰지 말 곳)에 이어, CP-171(기본 접힘)·CP-172(배치)· CP-173(섹션당 하나)이 ’제대로 쓰는 법’을 다루고, CP-174(버튼 역할)·CP-175(상태 전달)가 접근성을 보강하죠.

3. 점검 / 개선

무엇을 점검하나

기본 접힘 — 디스클로저가 페이지 로드 시 접힌 상태인가.

상태 표시 — 접힌 상태가 시각 표시(▶·+)와 aria-expanded="false"로 전달되는가.

부가 정보 적합성 — 접어둘 만한 부가 정보인가(항상 펼쳐야 할 정보면 CP-169 검토).

개선 방향

디스클로저 초기 상태를 접힘으로 설정(aria-expanded="false", 내용 hidden).

거의 항상 펼쳐야 할 정보면 디스클로저 대신 항상 노출로 전환.

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

역할	책임
디자이너/UX	기본 접힘·점진적 공개 설계
퍼블리셔/개발	초기 축소 상태·상태 표시 구현

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

펼침/접힘 디스클로저를 쓰는 모든 사이트가 해당됩니다.

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 디스클로저가 페이지 로드 시 접힌 상태인가요?

□ 접힌 상태가 시각 표시(▶·+)와 aria-expanded="false"로 전달되나요?

□ 접어둘 만한 부가 정보인가요(항상 펼쳐야 할 정보가 아닌가요)?

❓ FAQ

Q1. 처음부터 펼쳐두면 안 되나요? 그러면 디스클로저를 쓰는 의미가 없습니다. 화면이 길어지고 접기 기능이 무색하죠. 기본은 접힘입니다. Q2. 다수가 항상 펼쳐 보는 정보면요? 그건 ’부가’가 아니라 ’핵심’에 가까우니, 디스클로저로 접지 말고 항상 보이게 하는 게 맞습니다(CP-169). Q3. 접힌 상태를 어떻게 알리나요? 시각 표시(▶·+)와 aria-expanded="false"(CP-175)로 사용자·스크린 리더에 전달합니다.

6. 마무리

CP-171의 메시지:

처음엔 접혀 있어야 — 디스클로저는 기본적으로 축소 상태로 제공하라.

디스클로저는 부가 정보를 접어 화면을 간결하게 하는 점진적 공개 도구입니다. 기본이 접힘이어야 그 역할을 하죠 — 핵심만 먼저 보이고, 사용자가 원하는 것만 펼칩니다. 거의 항상 펼치는 정보면 디스클로저 대상이 아닙니다. 다음 편은 디스클로저의 배치 위치입니다.

다음 편 예고 ▶ 「292. (CP-172) 디스클로저를 통해 제공하고자 하는 부가 정보와 관련된 정보/컨트롤/섹션 아래에 배치하고 있다.」

ViewCheck는 디스클로저가 기본 축소 상태로 제공되는지를 진단합니다.

📚 참고 출처

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

WAI-ARIA APG — Disclosure Pattern — https://www.w3.org/WAI/ARIA/apg/patterns/disclosure/

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

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