패널 안에 또 스크롤은 금물

KRDS CP-198 — 패널 영역에 스크롤이 발생하지 않도록 하고 있다.

0. 들어가며 — 펼친 내용 안에 또 스크롤바가

이번 318편은 아코디언 패널 영역에 스크롤이 발생하지 않도록 하라는 규칙입니다.

아코디언 헤더를 펼치면 패널(내용)이 나타나는데, 그 패널에 자체 스크롤이 생기면 — 페이지 스크롤과 패널 스크롤이 중첩되어 사용자가 혼란스럽죠. 펼친 내용이 좁은 패널 안에서 또 스크롤되는 건 어색합니다. CP-198은 패널 내용이 펼침과 함께 자연스럽게 다 보이게 하고, 패널 내부 스크롤을 피하라고 규정합니다. 이번 편을 풀어 냅니다.

1. 규칙 원문 — 패널 영역 스크롤 미발생

CP-198 (컴포넌트 > 아코디언) “패널 영역에 스크롤이 발생하지 않도록 하고 있다.”

아코디언 패널이 펼쳐질 때 그 내용이 패널 자체 스크롤 없이 전부 보이게 해, 패널 안에 별도 스크롤바가 생기지 않게 하라는 뜻입니다.

정리: 아코디언 패널 안에 자체 스크롤이 생기지 않게 하라. 이게 CP-198입니다.

2. 왜 패널 스크롤이 문제인가

아코디언 패널이 펼쳐지면, 그 내용은 페이지 흐름 안에서 자연스럽게 펼쳐져 페이지 전체가 길어지는 게 정상 입니다. 사용자는 펼친 내용을 보려면 페이지를 스크롤하면 되죠. 그런데 패널에 고정 높이를 주고 자체 스크롤 (overflow: scroll)을 두면 — 패널 안에 별도 스크롤바가 생겨 여러 문제가 발생합니다.

① 중첩 스크롤의 혼란. 페이지에는 이미 페이지 스크롤이 있습니다. 패널 안에 또 스크롤이 생기면 — ’스크롤 속의 스크롤’이 되죠. 사용자가 마우스 휠을 굴리거나 터치로 스크롤할 때, 페이지가 스크롤되는지 패널이 스크롤 되는지 헷갈립니다. 패널 위에서 스크롤하면 패널만 움직이고, 패널 끝에 닿아야 페이지가 움직이는 식이라 조작이 어색하죠. 특히 모바일에서 중첩 스크롤은 매우 불편합니다(어느 영역이 스크롤될지 예측 불가).

② 내용 가려짐. 패널에 고정 높이를 주면, 펼친 내용이 그 높이를 넘으면 일부가 패널 안에 숨겨져 스크롤해야 보이죠. 사용자는 펼쳤는데도 내용을 한눈에 못 보고, 좁은 패널 안에서 또 스크롤해야 합니다. 펼침의 의미(내용을 드러냄)가 반감되죠.

③ 아코디언 본질과 충돌. 아코디언의 동작은 ‘펼치면 내용이 드러나 페이지가 늘어남’입니다. 패널 높이를 고정 하고 내부 스크롤을 두는 건 이 자연스러운 동작을 막는 것이죠. 아코디언은 내용을 ’접었다 펼치는’ 것이지, ‘좁은 창에 가두는’ 게 아닙니다.

그래서 CP-198은 — 패널이 펼쳐질 때 내용이 자체 스크롤 없이 전부 펼쳐지게 하라고 합니다. 패널 높이를 내용에 맞춰 자동(height: auto)으로 늘리고, 펼친 내용은 페이지 흐름 안에서 자연스럽게 보이며, 보려면 페이지를 스크롤 하면 되죠.

패널 내용이 너무 많으면? 패널 안 내용이 지나치게 방대해 패널이 너무 길어진다면 — 이는 내부 스크롤로 가둘 게 아니라, 내용 구성을 재고할 신호입니다:

내용 요약·정리 — 패널에 핵심만 담고 상세는 별도 페이지·링크로(콘텐츠 내 탐색 CP-109, 모달 CP-176의 ‘방대하면 페이지’ 정신).

아코디언 적합성 재고 — 너무 방대한 내용이면 애초에 아코디언이 맞는지 검토(CP-192의 용도 판단).

핵심은 — 패널 내부에 스크롤을 만들어 중첩 스크롤·내용 가려짐을 일으키지 말고, 펼침은 페이지 흐름 안에서 자연 스럽게 처리하라는 것입니다. 모달의 스크롤(CP-177)은 모달이 화면 일부에 떠 있는 제한 영역이라 내부 스크롤이 불가피하지만, 아코디언 패널은 페이지 흐름의 일부이므로 페이지 스크롤로 충분하죠 — 컴포넌트 성격이 다릅니다.

정리하면 — 아코디언 패널은 펼침과 함께 페이지 흐름에서 자연스럽게 늘어나야 하므로, 패널 자체 스크롤을 피해 중첩 스크롤과 내용 가려짐을 막아야 합니다.

3. 점검 / 개선

무엇을 점검하나

패널 내부 스크롤 없음 — 펼친 패널에 자체 스크롤바가 생기지 않는가.

내용 전체 노출 — 펼친 내용이 패널 안에 가려지지 않고 페이지 흐름에서 다 보이는가.

방대한 내용 처리 — 패널이 과도하게 길면 내용 요약·페이지 분리를 검토했는가.

개선 방향

패널 높이를 height: auto로, 내부 overflow: scroll 제거.

방대한 내용은 요약+상세 페이지 링크, 또는 아코디언 적합성 재고.

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

역할	책임
디자이너/UX	패널 내용 분량·구성 정리
퍼블리셔/개발	패널 자동 높이·내부 스크롤 제거

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

아코디언을 쓰는 모든 사이트가 해당됩니다.

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 펼친 패널에 자체 스크롤바가 생기지 않나요?

□ 펼친 내용이 패널 안에 가려지지 않고 페이지 흐름에서 다 보이나요?

□ 패널이 과도하게 길면 내용 요약·페이지 분리를 검토했나요?

❓ FAQ

Q1. 패널 내용이 길면 스크롤로 가두면 되지 않나요? 중첩 스크롤로 조작이 혼란스럽고 내용이 가려집니다. 페이지 흐름에서 자연스럽게 펼치는 게 맞습니다. Q2. 모달은 내부 스크롤(CP-177)을 쓰는데요? 모달은 화면에 떠 있는 제한 영역이라 불가피합니다. 아코디언 패널은 페이지 흐름의 일부라 페이지 스크롤로 충분합니다. Q3. 내용이 정말 방대하면요? 핵심만 패널에 담고 상세는 별도 페이지·링크로, 또는 아코디언이 맞는지 재고 합니다.

6. 마무리

CP-198의 메시지:

패널 안에 또 스크롤은 금물 — 패널 영역에 자체 스크롤이 생기지 않게 하라.

아코디언 패널은 펼침과 함께 페이지 흐름에서 자연스럽게 늘어나야 합니다. 패널에 자체 스크롤을 두면 중첩 스크롤 혼란과 내용 가려짐이 생기죠. 패널 높이를 자동으로 두고, 방대한 내용은 요약·페이지 분리로 다룹니다. 다음 편은 헤더 제목의 시맨틱 마크업입니다.

**다음 편 예고 ▶ 「319. (CP-199) 아코디언 헤더 내부의 제목은 페이지의 다른 콘텐츠의 구조에 맞추어

~

태그로 마크업하고 있다.」**

ViewCheck는 아코디언 패널 영역에 스크롤이 발생하지 않는지를 진단합니다.

📚 참고 출처

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

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

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