꼭 봐야 할 건 접지 마라

KRDS CP-192 — 사용자가 콘텐츠의 전체 또는 대부분을 반드시 확인해야 하거나 중요도가 높은 정보인 경우 적용하고 있지 않다.

0. 들어가며 — 아코디언 그룹의 첫 규칙

이번 312편부터 아코디언(Accordion) 그룹(CP-192~201, 10개)으로 들어갑니다. 첫 규칙은 전체 또는 대부분을 반드시 확인해야 하거나 중요도가 높은 정보엔 아코디언을 적용하지 말라는 내용이죠.

먼저 ‘아코디언’을 짚겠습니다. 아코디언은 여러 관련 항목을 헤더로 묶어 각각 펼치고 접는 컴포넌트입니다 — FAQ 목록처럼 질문 제목들이 나열되고, 클릭하면 답이 펼쳐지죠. 디스클로저(단일 펼침, CP-173)의 ’여러 개 묶음’ 버전입니다. 그런데 아코디언은 내용을 접어두므로 — 꼭 봐야 할 정보를 접으면 사용자가 놓치죠. CP-192는 이 부적절 용도를 금지합니다. 디스클로저 CP-169와 같은 정신이죠. 이번 편을 풀어냅니다.

1. 규칙 원문 — 전체 확인 필수·중요 정보엔 사용 금지

CP-192 (컴포넌트 > 아코디언) “사용자가 콘텐츠의 전체 또는 대부분을 반드시 확인해야 하거나 중요도가 높은 정보인 경우 적용하고 있지 않다.”

아코디언을, 사용자가 전체·대부분을 꼭 봐야 하는 콘텐츠나 중요도가 높은 정보를 담는 용도로 사용하지 말라는 뜻입니다.

정리: 꼭 다 봐야 하거나 중요한 정보는 아코디언으로 접지 마라. 이게 CP-192입니다.

2. 왜 이런 정보에 쓰면 안 되나

아코디언의 본질은 ‘여러 항목을 접어두고, 사용자가 관심 있는 것만 펼쳐 보게’ 하는 것입니다. 화면을 간결하게 유지하고 점진적 공개(디스클로저 CP-171의 정신)를 하는 도구죠. 즉 아코디언 안의 내용은 — ‘안 펼치면 안 보이는, 선택적으로 확인하는’ 정보입니다. 이 성격이 어떤 정보에는 맞고 어떤 정보에는 치명적이죠.

‘전체를 꼭 봐야 하는’ 콘텐츠 — 접으면 안 된다. 사용자가 전체 또는 대부분을 반드시 확인해야 하는 콘텐츠를 아코디언으로 접으면 — 사용자는 각 항목을 일일이 펼쳐야 다 볼 수 있죠. 사람들은 접힌 내용을 잘 안 펼치는 경향이 있어, 다수가 일부만 보고 지나갑니다. 예를 들어:

약관·이용 조건 전체 — 사용자가 모든 조항을 확인하고 동의해야 하는데, 조항을 아코디언으로 접으면 대부분 안 펼치고 동의하죠. 고지 의무·동의 유효성 문제가 생깁니다.

순차적으로 다 읽어야 할 안내 — 신청 절차 전체, 주의사항 전체 등.

이런 ‘전체 확인 필수’ 콘텐츠는 접지 말고 펼쳐진 채로(또는 일반 본문으로) 제공해야, 사용자가 빠짐없이 보죠.

중요도가 높은 정보 묻으면 안 된다. 사용자가 꼭 알아야 할 핵심 정보 필수 안내, 중대한 주의사항, 결정에 영향을 주는 정보 도 아코디언에 접으면 안 됩니다. 다수가 안 펼쳐 그 중요 정보를 놓친 채 진행하죠. 중요 정보는 항상 보이게 해야 합니다.

아코디언에 맞는 정보는? 반대로 아코디언은 — ‘있으면 좋지만 모두가 다 볼 필요는 없는, 선택적으로 찾아 보는’ 정보에 적합합니다. FAQ(궁금한 질문만 펼침), 상세 설명, 부가 옵션, 보조 안내 등이죠. 사용자가 자기 관심사만 펼쳐 보고, 나머지는 접힌 채 화면을 간결하게 둡니다.

판단 기준은 디스클로저(CP-169)와 같습니다 — ‘사용자가 이 정보를 못 보면 문제가 생기는가?’ 그렇다면(전체 확인 필수·중요 정보) 항상 보이게, 아니라면(선택적 부가 정보) 아코디언에 접어도 됩니다. 아코디언은 정보를 ’핵심(항상 보임)’과 ’선택적 부가(펼쳐야 보임)’로 나눠, 부가만 담는 도구죠.

이 규칙은 아코디언 용도의 ‘하지 말 것’을 정합니다 — 긴급 공지(CP-151), 디스클로저(CP-169), 모달(CP-180)에서 본 ’컴포넌트를 본분에 맞게’의 아코디언 버전이죠. 이어지는 규칙들이 아코디언을 ’제대로 쓰는 법’(중첩 금지 193, 아이콘 194·195, 헤더 196·197 등)을 다룹니다.

3. 점검 / 개선

무엇을 점검하나

전체 확인 필수 배제 — 다 봐야 할 콘텐츠(약관 등)가 아코디언에 접혀 있지 않은가.

중요 정보 배제 — 꼭 알아야 할 핵심 정보가 아코디언에 묻혀 있지 않은가.

선택적 부가 한정 — 아코디언 안 내용이 ‘선택적으로 찾아보는’ 부가 정보인가.

개선 방향

전체 확인 필수·중요 정보는 펼친 채·일반 본문으로 제공.

선택적 부가 정보(FAQ·상세·옵션)만 아코디언에 담기.

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

역할	책임
기획/UX	정보 중요도 분류(필수/선택)
디자이너/개발	필수·중요 정보를 항상 노출로 전환

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

펼침/접힘 아코디언을 쓰는 모든 사이트가 해당됩니다.

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 다 봐야 할 콘텐츠(약관 등)가 아코디언에 접혀 있지 않나요?

□ 꼭 알아야 할 핵심 정보가 아코디언에 묻혀 있지 않나요?

□ 아코디언 안 내용이 ‘선택적으로 찾아보는’ 부가 정보인가요?

❓ FAQ

Q1. 아코디언이 뭔가요? 여러 관련 항목을 헤더로 묶어 각각 펼치고 접는 컴포넌트입니다 — FAQ가 대표적이죠. 디스클로저(단일)의 묶음 버전입니다. Q2. 약관을 아코디언으로 정리하면 깔끔하지 않나요? 사용자가 다 확인해야 하는 약관은 접으면 대부분 안 펼치고 동의합니다. 펼친 채·본문으로 제공해야 합니다. Q3. 그럼 아코디언은 뭘 담나요? FAQ, 상세 설명, 부가 옵션 같은 ‘선택적으로 찾아보는’ 부가 정보입니다.

6. 마무리

CP-192의 메시지:

꼭 봐야 할 건 접지 마라 — 전체 확인 필수·중요 정보에 아코디언을 쓰지 마라.

아코디언은 접혀 있어 안 펼치면 안 보입니다. 다 봐야 할 콘텐츠나 중요 정보를 접으면 사용자가 놓치죠. 그런 정보는 항상 보이게, 선택적 부가 정보만 아코디언에 — 정보 중요도에 맞는 컴포넌트를 씁니다. 다음 편은 아코디언 중첩 금지입니다.

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

ViewCheck는 아코디언이 전체 확인 필수·중요 정보에 오용되지 않는지를 진단합니다.

📚 참고 출처

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

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

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