펼침 속 펼침은 미로다

KRDS CP-193 — 하위 또는 상위 요소로 이미 아코디언 컴포넌트가 사용되었거나 탭 패턴이 사용된 경우 적용하고 있지 않다.

0. 들어가며 — 접는 것 안에 또 접는 것

이번 313편은 상위/하위에 이미 아코디언이나 탭 패턴이 있으면 아코디언을 또 적용하지 말라는 규칙입니다.

아코디언을 펼쳤더니 그 안에 또 아코디언이 있고, 그걸 펼치면 또 펼침이 있으면 — 사용자는 ‘몇 단계나 들어온 거지?’ 하고 미로에 빠지죠. 또 탭 안에 아코디언, 아코디언 안에 탭처럼 펼침/전환 패턴이 중첩되면 구조가 복잡 해집니다. CP-193은 이 중첩을 금지합니다. 이번 편을 풀어냅니다.

1. 규칙 원문 — 아코디언·탭 중첩 금지

CP-193 (컴포넌트 > 아코디언) “하위 또는 상위 요소로 이미 아코디언 컴포넌트가 사용되었거나 탭 패턴이 사용된 경우 적용하고 있지 않다.”

이미 상위나 하위에 아코디언이 있거나 탭 패턴이 쓰인 영역 안에서는, 아코디언을 추가로 중첩 적용하지 말라는 뜻입니다.

정리: 아코디언/탭이 이미 있는 곳에 아코디언을 또 중첩하지 마라. 이게 CP-193입니다.

2. 왜 중첩하면 안 되나

아코디언과 탭은 둘 다 ‘콘텐츠를 접거나 전환해 한 번에 일부만 보여주는’ 패턴입니다. 이런 패턴이 중첩되면 구조가 급격히 복잡해지죠. CP-193은 이 복잡성을 막습니다.

① 깊이의 미로. 아코디언 안에 또 아코디언이 있으면 — 사용자는 ’펼침 → 그 안의 펼침 → 또 그 안의 펼침’으로 계속 파고들어야 하죠. 몇 단계나 들어왔는지, 어디를 펼쳤다 어디를 접어야 하는지 추적하기 어렵습니다. 사이드 메뉴 깊이 제한(CP-092, 최대 2수준), 콘텐츠 내 탐색 깊이(CP-109, 최대 3단계)에서 본 ’깊으면 미로가 된다’는 원리가 여기서도 작동하죠. 접는 패턴의 중첩은 특히 더 혼란스럽습니다 — 각 층의 펼침/접힘 상태를 동시에 기억해야 하니까요.

② 펼침 상태 관리의 혼란. 중첩 아코디언에서는 펼침 상태가 복잡하게 얽힙니다 — 바깥 아코디언을 접으면 안의 펼친 내용은 어떻게 되는지, 안을 펼친 채 바깥을 접었다 다시 펼치면 안의 상태가 유지되는지 등. 사용자도, 개발 자도 이 상태 조합을 추적하기 어렵죠. 레이아웃도 펼침마다 출렁여 불안정합니다.

③ 접근성 구조의 중첩. 아코디언은 제목(헤더 버튼) + 패널 구조로 마크업되고(CP-199·201), 펼침 상태를 ARIA로 전달합니다(CP-200). 탭은 또 탭대로 role="tablist"/tab/tabpanel 패턴이 있죠. 이들이 중첩되면 — 스크린 리더가 ‘아코디언 안의 아코디언’, ‘탭 안의 아코디언’ 같은 복잡한 구조를 안내해야 해, 사용자가 현재 위치와 구조를 파악하기 매우 어렵습니다. 키보드 초점 관리도 중첩되어 복잡해지죠(모달 안 복잡 컴포넌트 금지 CP-180과 같은 정신).

탭과의 관계. 규칙이 ‘탭 패턴’도 언급하는 이유 — 탭(콘텐츠 전환)과 아코디언(콘텐츠 펼침)은 유사한 목적 (콘텐츠를 분할해 일부만 보여줌)을 가진 패턴이라, 둘을 중첩하면 사용자가 ’여긴 탭으로 전환하고 저긴 아코디언 으로 펼치고’ 하는 혼합된 상호작용에 혼란스럽죠. 같은 영역에서는 하나의 분할 패턴(탭이든 아코디언이든)만 쓰는 게 명료합니다.

그럼 정보가 깊으면? 정보 구조가 정말 깊고 복잡하다면 — 중첩으로 욱여넣지 말고 구조를 재설계하거나 별도 페이지로 분리합니다(사이드 메뉴 CP-093의 ‘깊으면 분산’, 모달 CP-180의 ‘복잡하면 페이지’ 정신). 한 영역에 펼침/전환 패턴을 한 겹만 두고, 더 깊은 내용은 페이지를 나눠 각 페이지에서 단순하게 다루죠.

정리하면 — 아코디언·탭 같은 분할 패턴의 중첩은 깊이의 미로, 상태 관리 혼란, 접근성 구조 복잡을 낳으므로, 이미 그런 패턴이 있는 곳에 아코디언을 또 중첩하지 말고 구조를 단순하게 유지해야 합니다.

3. 점검 / 개선

무엇을 점검하나

아코디언 중첩 없음 — 아코디언 패널 안에 또 아코디언이 없는가.

탭 중복 없음 — 탭 안에 아코디언, 아코디언 안에 탭이 중첩되지 않았는가.

단순 구조 — 한 영역에 분할 패턴이 한 겹만 쓰였는가.

개선 방향

중첩된 아코디언/탭을 단일 패턴으로 풀거나 별도 페이지로 분리.

깊은 정보 구조는 페이지 분할로 재설계.

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

역할	책임
기획/IA	분할 패턴 중첩 방지·구조 재설계
디자이너/개발	단일 패턴 적용·중첩 제거

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

복잡한 정보 구조에 아코디언·탭을 쓰는 사이트가 해당됩니다.

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 아코디언 패널 안에 또 아코디언이 없나요?

□ 탭 안에 아코디언, 아코디언 안에 탭이 중첩되지 않았나요?

□ 한 영역에 분할 패턴이 한 겹만 쓰였나요?

❓ FAQ

Q1. 정보가 많으면 중첩이 불가피하지 않나요? 중첩은 미로가 됩니다. 구조를 재설계하거나 별도 페이지로 분리 하는 게 맞습니다. Q2. 탭과 아코디언을 같이 쓰면 안 되나요? 같은 영역에서 중첩하면 혼란스럽습니다. 한 영역엔 하나의 분할 패턴만 씁니다. Q3. 왜 깊으면 미로인가요? 각 층의 펼침/접힘 상태를 동시에 기억해야 하고, 어디 있는지 추적하기 어렵습니다.

6. 마무리

CP-193의 메시지:

펼침 속 펼침은 미로다 — 아코디언/탭이 있는 곳에 아코디언을 또 중첩하지 마라.

아코디언·탭 같은 분할 패턴의 중첩은 깊이의 미로, 상태 혼란, 접근성 복잡을 낳습니다. 한 영역에 분할 패턴을 한 겹만 두고, 깊은 정보는 구조 재설계나 페이지 분리로 단순하게 다루죠. 다음 편은 확장 상태 아이콘의 일관된 위치 입니다.

다음 편 예고 ▶ 「314. (CP-194) 아코디언의 확장 상태를 나타내는 아이콘은 항상 일관된 위치에 제공하고 있다.」

ViewCheck는 아코디언이 중첩·탭 중복 없이 사용되는지를 진단합니다.

📚 참고 출처

KRDS 컴포넌트 — 아코디언(Accordion) 가이드 — https://www.krds.go.kr/html/site/component/component_18.html

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

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