관련된 것 바로 아래에 펼쳐라

KRDS CP-172 — 디스클로저를 통해 제공하고자 하는 부가 정보와 관련된 정보/컨트롤/섹션 아래에 배치하고 있다.

0. 들어가며 — 펼친 내용이 엉뚱한 데서 나오면

이번 292편은 디스클로저의 부가 정보를 그와 관련된 정보/컨트롤/섹션 바로 아래에 배치하라는 규칙입니다.

디스클로저를 펼치면 부가 정보가 나타나는데, 그 정보가 트리거(버튼)와 동떨어진 곳에서 펼쳐지면 — 사용자는 ‘내가 누른 것과 이 펼친 내용이 관련 있나?’ 헷갈리죠. 펼친 내용은 그것을 부른 트리거 바로 아래에 나와야, 관련성이 자연스럽게 읽힙니다. CP-172는 이 인접 배치를 규정합니다. 이번 편을 풀어냅니다.

1. 규칙 원문 — 관련 요소 아래 배치

CP-172 (컴포넌트 > 디스클로저) “디스클로저를 통해 제공하고자 하는 부가 정보와 관련된 정보/컨트롤/섹션 아래에 배치하고 있다.”

디스클로저로 펼치는 부가 정보를, 그것과 관련된 정보·컨트롤·섹션(즉 펼침 트리거)의 바로 아래에 배치해 관련성과 흐름을 자연스럽게 하라는 뜻입니다.

정리: 펼친 부가 정보를 관련 요소(트리거) 바로 아래에 배치하라. 이게 CP-172입니다.

2. 왜 관련 요소 아래에 배치하나

디스클로저는 ‘트리거(펼침 버튼)’와 ’펼침 콘텐츠(부가 정보)’ 한 쌍으로 작동합니다. 사용자는 트리거를 눌러 콘텐츠를 펼치죠. 이때 펼친 콘텐츠가 트리거와 시각적·구조적으로 연결돼 있어야, 사용자가 ‘내가 누른 것의 부가 정보구나’를 자연스럽게 인지합니다. 이 연결의 핵심이 ’바로 아래’ 배치죠.

① 인과 관계의 시각적 표현. 사용자가 트리거를 누르면 → 바로 아래에서 콘텐츠가 펼쳐지는 게 가장 직관적 입니다. ‘누른 곳 아래가 펼쳐진다’는 인과가 시각적으로 자연스럽게 읽히죠(게슈탈트 근접성 — 가까이 있는 것은 관련 있다고 인지). 만약 트리거를 눌렀는데 콘텐츠가 화면 다른 곳(위쪽, 옆, 멀리 떨어진 곳)에서 펼쳐지면 — 사용자는 ’어? 뭐가 바뀐 거지?’ 하고 변화를 못 알아채거나, 그 펼친 내용이 무엇의 부가 정보인지 헷갈립니다.

② 읽기 흐름. 사용자는 위→아래로 읽습니다. 트리거(제목·컨트롤)를 읽고 → 그 아래로 펼친 부가 정보를 이어 읽는 흐름이 자연스럽죠. ’제목 → 상세’의 순서입니다. 콘텐츠가 트리거 위나 옆에 나오면 이 흐름이 깨져, 읽기가 역행하거나 끊깁니다.

③ 맥락 보존. 부가 정보는 ’관련된 정보/컨트롤/섹션’의 보충입니다. 예를 들어 어떤 설정 옵션(컨트롤) 옆에 ’이 옵션 설명’을 디스클로저로 두면, 그 설명은 해당 옵션 바로 아래에 펼쳐져야 ’이 옵션의 설명’임이 분명하죠. FAQ라면 질문(트리거) 바로 아래에 답변(콘텐츠)이 펼쳐져야 ’이 질문의 답’임이 자명합니다. 관련 요소와 떨어지면 이 맥락이 흐려집니다.

접근성 — DOM 순서. 이 ’바로 아래’는 시각적 위치만이 아니라 DOM 순서여야 합니다. 펼침 콘텐츠가 DOM 에서 트리거 바로 다음에 위치해야 — 스크린 리더가 트리거를 읽은 직후 펼친 콘텐츠를 읽고, 키보드 초점도 트리거 다음으로 콘텐츠에 자연스럽게 이어지죠(CP-175의 상태 전달, 디스클로저 패턴의 초점 흐름과 연결). 시각적으론 아래 있는데 DOM상 멀리 있으면 스크린 리더·키보드 흐름이 어긋납니다. WAI-ARIA 디스클로저 패턴도 트리거(button) 바로 다음에 제어 대상 콘텐츠를 두는 구조를 권장하죠(aria-controls로 연결).

정리하면 — 디스클로저의 펼침 콘텐츠는 그것을 부른 관련 요소(트리거) 바로 아래에, 시각·DOM 양쪽으로 인접 배치해, 관련성과 읽기·탐색 흐름을 자연스럽게 해야 합니다. 이는 브레드크럼-제목 인접(CP-072), 콘텐츠 내 탐색 배치(CP-107·110)에서 본 ’관련 정보는 인접하게’의 디스클로저 버전이죠.

3. 점검 / 개선

무엇을 점검하나

바로 아래 배치 — 펼침 콘텐츠가 트리거 바로 아래에 나타나는가.

관련성 명확 — 펼친 내용이 무엇의 부가 정보인지 자연스럽게 읽히는가.

DOM 순서 — DOM상으로도 트리거 다음에 콘텐츠가 위치해 스크린 리더·초점이 이어지는가.

개선 방향

펼침 콘텐츠를 트리거 바로 다음(시각·DOM)에 배치.

aria-controls로 트리거-콘텐츠 연결. 멀리 떨어진 배치 교정.

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

역할	책임
디자이너	트리거-콘텐츠 인접 배치 설계
퍼블리셔/개발	시각·DOM 인접·aria-controls 구현

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

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

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 펼침 콘텐츠가 트리거 바로 아래에 나타나나요?

□ 펼친 내용이 무엇의 부가 정보인지 자연스럽게 읽히나요?

□ DOM상으로도 트리거 다음에 콘텐츠가 위치하나요?

❓ FAQ

Q1. 펼친 내용을 화면 다른 곳에 두면 안 되나요? 트리거와 떨어지면 관련성이 흐려지고 사용자가 변화를 못 알아챕니다. 바로 아래가 직관적입니다. Q2. 시각적으로만 아래 있으면 되나요? DOM 순서도 트리거 다음이어야 스크린 리더·키보드 흐름이 이어집니다. Q3. FAQ는 어떻게 배치하나요? 질문(트리거) 바로 아래에 답변(콘텐츠)을 펼쳐 ’이 질문의 답’임을 분명히 합니다.

6. 마무리

CP-172의 메시지:

관련된 것 바로 아래에 펼쳐라 — 부가 정보를 관련 요소 아래에 배치하라.

디스클로저의 펼침 콘텐츠는 그것을 부른 트리거 바로 아래에 나와야 관련성과 흐름이 자연스럽습니다. 떨어져 있으면 사용자가 변화를 못 알아채거나 맥락을 잃죠. 시각·DOM 양쪽으로 인접 배치해 스크린 리더·키보드 흐름도 이어지게 합니다. 다음 편은 섹션당 디스클로저 개수입니다.

다음 편 예고 ▶ 「293. (CP-173) 하나의 섹션에 하나의 디스클로저만 사용하고 있다.」

ViewCheck는 디스클로저 콘텐츠가 관련 요소 아래에 배치되는지를 진단합니다.

📚 참고 출처

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

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

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