섹션 하나엔 펼침 하나

KRDS CP-173 — 하나의 섹션에 하나의 디스클로저만 사용하고 있다.

0. 들어가며 — 여러 개를 묶으면 아코디언이다

이번 293편은 하나의 섹션에 하나의 디스클로저만 사용하라는 규칙입니다.

디스클로저는 ‘하나의 부가 정보를 펼치고 접는’ 독립적 컴포넌트입니다. 그런데 한 섹션에 여러 디스클로저를 묶어 나열하면 — 그건 사실 아코디언(Accordion) 이라는 다른 컴포넌트에 가깝죠. CP-173은 디스클로저를 섹션당 하나로 한정해, 여러 개를 묶어야 하는 경우와 구분합니다. 이번 편을 풀어냅니다.

1. 규칙 원문 — 섹션당 디스클로저 하나

CP-173 (컴포넌트 > 디스클로저) “하나의 섹션에 하나의 디스클로저만 사용하고 있다.”

한 섹션(영역) 안에서는 디스클로저를 하나만 사용하고, 여러 개의 펼침 항목이 필요하면 적절한 다른 컴포넌트 (아코디언 등)를 쓰라는 뜻입니다.

정리: 한 섹션엔 디스클로저 하나만. 여러 개면 아코디언을 검토하라. 이게 CP-173입니다.

2. 왜 섹션당 하나여야 하나

이 규칙을 이해하려면 디스클로저와 아코디언의 차이를 알아야 합니다. 둘 다 ‘펼치고 접는’ 컴포넌트지만 성격이 다르죠:

디스클로저(Disclosure) — ’하나의 독립적인 부가 정보’를 펼치고 접는 단일 컴포넌트. 트리거 하나 + 콘텐츠 하나의 쌍이죠. 다른 펼침 항목과 묶이거나 연동되지 않는, 독립적인 ’더 보기’입니다.

아코디언(Accordion) — ‘여러 개의 관련 항목’을 묶어, 각각 펼치고 접는 컴포넌트. 여러 트리거-콘텐츠 쌍이 하나의 그룹으로 묶이죠. 보통 항목들이 같은 주제군이고, 때로 ’한 번에 하나만 펼침’ 같은 연동 규칙을 갖습니다.

CP-173은 — 한 섹션에 펼침 항목이 여러 개 필요하면, 그건 디스클로저를 여러 개 흩어놓을 게 아니라 아코 디언으로 묶는 게 맞다는 뜻입니다. 왜냐하면:

① 컴포넌트 의미의 명확성. 한 섹션에 디스클로저가 여러 개 나열돼 있으면 — 사용자도, 개발자도, 보조기술도 ‘이게 독립적 디스클로저들인지, 하나의 아코디언인지’ 헷갈립니다. 여러 펼침 항목이 한 주제군으로 묶여 있다면, 그건 아코디언으로 명시하는 게 의미가 분명하죠. 컴포넌트를 올바로 분류하면 — 디자인·동작·접근성 구현이 그 컴포넌트의 표준 패턴을 따르게 됩니다(아코디언은 아코디언의 WAI-ARIA 패턴, 디스클로저는 디스클로저 패턴).

② 일관된 동작·구조. 여러 펼침 항목을 아코디언으로 묶으면 — 항목 간 시각적 그룹핑, 일관된 간격·구분선, 필요시 ‘하나만 펼침’ 연동, 그룹 차원의 키보드 탐색(위/아래 화살표로 항목 이동) 등을 일관되게 적용하죠. 반면 독립 디스클로저를 여러 개 흩어두면 이런 그룹 차원의 일관성이 없어 산만해집니다.

③ 접근성 구조. 아코디언은 보통 제목 레벨(<h3> 등) + 버튼 구조로 마크업돼, 스크린 리더가 제목 탐색으로 항목들을 훑게 합니다(이는 아코디언 그룹 CP-185~ 에서 다룸). 여러 디스클로저를 묶음 의도 없이 나열하면 이 구조적 이점을 못 살리죠.

핵심 구분 기준 — ’이 펼침 항목들이 하나의 그룹/주제군으로 묶이는가?’입니다:

독립적인 단일 ‘더 보기’(예: 어떤 옵션의 설명 하나) → 디스클로저 (섹션당 하나).

여러 관련 항목의 펼침 묶음(예: FAQ 목록, 약관 조항들) → 아코디언.

그래서 CP-173은 ’한 섹션 한 디스클로저’를 통해, 디스클로저를 독립적 단일 용도로 한정합니다. 여러 개가 필요하다는 건 곧 ’묶어야 한다’는 신호이고, 그건 아코디언의 영역이죠. 이 경계를 지키면 컴포넌트가 의도에 맞게 쓰이고, 각자의 표준 패턴(동작·접근성)을 정확히 적용할 수 있습니다.

정리하면 — 디스클로저는 섹션당 하나의 독립적 펼침으로 쓰고, 여러 펼침 항목이 묶일 땐 아코디언을 써서 컴포넌트 의미와 구조를 명확히 합니다.

3. 점검 / 개선

무엇을 점검하나

섹션당 하나 — 한 섹션에 디스클로저가 하나만 있는가.

묶음 판별 — 여러 펼침 항목이 한 주제군으로 묶이는데 디스클로저로 흩어놓지 않았는가.

아코디언 전환 — 묶이는 항목들은 아코디언으로 구현됐는가.

개선 방향

한 섹션의 여러 펼침 항목을 아코디언으로 묶어 그룹·동작·접근성 일관화.

독립적 단일 펼침만 디스클로저로 유지.

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

역할	책임
디자이너/UX	디스클로저 vs 아코디언 분류
퍼블리셔/개발	묶음은 아코디언, 단일은 디스클로저로 구현

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

펼침/접힘 항목을 쓰는 모든 사이트가 해당됩니다.

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 한 섹션에 디스클로저가 하나만 있나요?

□ 여러 펼침 항목이 한 주제군으로 묶이는데 디스클로저로 흩어놓지 않았나요?

□ 묶이는 항목들은 아코디언으로 구현됐나요?

❓ FAQ

Q1. 디스클로저와 아코디언의 차이가 뭔가요? 디스클로저는 독립적 단일 ‘더 보기’, 아코디언은 여러 관련 항목의 펼침 묶음입니다. Q2. FAQ는 어느 것인가요? FAQ는 여러 질문-답변 묶음이라 아코디언이 맞습니다. 디스클로저를 여러 개 흩어 놓는 게 아니죠. Q3. 왜 구분이 중요한가요? 각 컴포넌트의 표준 패턴(동작·접근성·구조)을 정확히 적용하려면 의미가 분명해야 합니다.

6. 마무리

CP-173의 메시지:

섹션 하나엔 펼침 하나 — 여러 개면 아코디언을 써라.

디스클로저는 독립적 단일 ’더 보기’입니다. 한 섹션에 여러 펼침 항목이 묶이면 그건 아코디언의 영역이죠. 컴포넌트 의미를 분명히 해야 각자의 표준 패턴(동작·접근성)을 정확히 적용합니다. 다음 편은 디스클로저의 버튼 역할입니다.

다음 편 예고 ▶ 「294. (CP-174) 디스클로저를 버튼 역할로 제공하고 있다. (role=“button”)」

ViewCheck는 한 섹션에 디스클로저가 하나만 사용되는지를 진단합니다.

📚 참고 출처

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

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

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