더 있다는 걸 알려라

KRDS CP-177 — 모달 콘텐츠 영역에 스크롤이 필요한 경우 사용자가 스크롤 영역을 인지할 수 있도록 표현하고 있다.

0. 들어가며 — 내용이 더 있는데 안 보이면

이번 297편은 모달 콘텐츠에 스크롤이 필요할 때 사용자가 스크롤 영역을 인지하게 표현하라는 규칙입니다.

모달은 크기가 제한적이라(CP-176), 긴 내용은 모달 안에서 스크롤됩니다. 그런데 ’더 아래에 내용이 있다’는 신호가 없으면 — 사용자는 보이는 부분만 전부라고 여겨 나머지를 놓치죠. 약관 모달에서 아래 내용을 못 보고 동의하는 식입니다. CP-177은 스크롤 영역임을 시각적으로 알리라고 규정합니다. 이번 편을 풀어냅니다.

1. 규칙 원문 — 스크롤 영역 인지 표현

CP-177 (컴포넌트 > 모달) “모달 콘텐츠 영역에 스크롤이 필요한 경우 사용자가 스크롤 영역을 인지할 수 있도록 표현하고 있다.”

모달 콘텐츠가 영역보다 길어 스크롤이 필요할 때, 사용자가 ’아래에 더 있다 / 이 영역은 스크롤된다’를 인지하게 시각적으로 표현하라는 뜻입니다.

정리: 모달 콘텐츠가 스크롤되면 그 사실을 사용자가 알게 표현하라. 이게 CP-177입니다.

2. 왜 스크롤 영역을 인지시키나

모달은 화면 일부에 떠 있는 제한된 영역입니다. 긴 콘텐츠(약관, 상세 안내, 목록)는 그 안에서 스크롤되죠. 문제는 — 스크롤 가능 여부가 명확하지 않으면 사용자가 보이는 부분만 전부라고 착각한다는 점입니다.

숨은 콘텐츠의 위험. 사용자는 화면에 보이는 것을 ’전체’로 인식하는 경향이 있습니다. 모달 콘텐츠가 영역 하단에서 깔끔하게 잘려 끝난 것처럼 보이면 — 그 아래 더 있는 줄 모르고 스크롤하지 않죠. 그 결과:

약관·동의 모달 — 사용자가 위쪽 일부만 읽고 ’내용 끝’으로 여겨 동의 버튼을 누릅니다. 정작 중요한 조항이 아래에 있어도 놓치죠. 공공 서비스에서 이는 고지 의무·동의 유효성 문제로 번질 수 있습니다.

상세 정보 모달 — 추가 정보·선택지가 아래에 있는데 못 보고 지나칩니다.

그래서 CP-177은 — 스크롤이 필요하면 그 사실을 시각적으로 분명히 표현하라고 합니다. 방법은 여러 가지:

스크롤바 노출 — 영역에 스크롤바를 보이게 둬, ’스크롤된다’를 직관적으로 알림. (스크롤바를 숨기는 디자인은 이 신호를 없애 위험하죠.)

그림자/페이드(scroll shadow) — 콘텐츠 영역 하단(과 상단)에 옅은 그림자나 페이드를 줘, ’경계 너머에 더 있다’를 암시. 끝까지 스크롤하면 그림자가 사라지게 해 ’끝’을 알리죠.

콘텐츠 잘림 단서 — 영역 경계에서 텍스트·항목이 일부러 살짝 잘려 보이게 해, ’여기서 끝이 아니다’를 시사.

‘더 보기’·진행 표시 — 필요시 스크롤 안내나 진행률 표시.

핵심은 — ’이 영역은 스크롤되고, 아직 더 볼 내용이 있다’를 사용자가 인지하게 하는 것입니다. 그래야 사용자가 끝까지 스크롤해 전체 내용을 보고 행동하죠.

구조·접근성과의 연결. 모달은 보통 헤더(제목) + 콘텐츠(스크롤 영역) + 푸터(액션 버튼)로 구성됩니다. 콘텐츠만 스크롤되고 헤더·푸터는 고정되는 게 일반적이죠(CP-178의 푸터 항상 표시와 연결) — 그래야 사용자가 스크롤 중에도 제목과 버튼을 늘 보며 맥락을 유지합니다. 또 스크롤 영역은 키보드로도 스크롤 가능해야 하고(영역에 포커스 + 화살표/PageDown, 또는 내부 포커스 가능 요소로 이동), 스크린 리더 사용자도 콘텐츠 전체를 읽을 수 있어야 하죠. ‘동의’ 같은 행동 전에 전체를 확인하게 하려면, 일부 구현은 ’끝까지 스크롤해야 동의 버튼 활성화’를 두기도 합니다.

정리하면 — 모달의 제한된 영역에서 긴 콘텐츠가 스크롤될 때, 그 사실과 ’더 있음’을 시각적으로 알려 사용자가 전체 내용을 놓치지 않게 해야 합니다.

3. 점검 / 개선

무엇을 점검하나

스크롤 인지 — 스크롤 필요 시 스크롤바·그림자·잘림 등으로 ’더 있음’이 표현되는가.

끝 인지 — 끝까지 스크롤하면 ’끝’임을 알 수 있는가(그림자 사라짐 등).

헤더·푸터 고정 — 콘텐츠만 스크롤되고 제목·버튼은 고정되는가(CP-178).

개선 방향

스크롤바 노출 또는 하단 scroll shadow·페이드로 ‘더 있음’ 표시.

헤더·푸터 고정, 콘텐츠 영역만 스크롤. 키보드 스크롤 지원.

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

역할	책임
디자이너	스크롤 인지 표현(그림자·스크롤바) 정의
퍼블리셔/개발	스크롤 영역·인지 신호·키보드 스크롤 구현

기관 유형	CP-177 적용
중앙행정기관(대표·운영) / 공공기관 / 지자체	✅ 필수 (긴 콘텐츠 모달 사용 시)

약관·상세 정보 등 긴 내용을 모달로 보여주는 사이트가 해당됩니다.

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 스크롤 필요 시 스크롤바·그림자 등으로 ’더 있음’이 표현되나요?

□ 끝까지 스크롤하면 ’끝’임을 알 수 있나요?

□ 콘텐츠만 스크롤되고 제목·버튼은 고정되나요?

❓ FAQ

Q1. 스크롤바를 숨기는 게 깔끔하지 않나요? 스크롤바는 ’스크롤된다’는 직관적 신호입니다. 숨기면 사용자가 더 있는 줄 모릅니다. 숨긴다면 그림자 등 대체 신호를 줘야 합니다. Q2. 약관을 다 안 읽고 동의하면요? 끝까지 스크롤 표시, 또는 ’끝까지 스크롤해야 동의 활성화’로 전체 확인을 유도할 수 있습니다. Q3. 키보드로도 스크롤되나요? 영역 포커스+화살표/PageDown, 또는 내부 포커스 요소로 스크롤되게 해야 합니다.

6. 마무리

CP-177의 메시지:

더 있다는 걸 알려라 — 모달 스크롤 영역을 사용자가 인지하게 표현하라.

모달의 제한된 영역에서 긴 콘텐츠가 스크롤될 때, 신호가 없으면 사용자는 보이는 부분만 전부로 착각해 나머지를 놓칩니다. 약관 동의 같은 데선 위험하죠. 스크롤바·그림자로 ’더 있음’을 알리고 헤더·푸터는 고정합니다. 다음 편은 액션 버튼 푸터의 항상 표시입니다.

다음 편 예고 ▶ 「298. (CP-178) 모달 내 액션 버튼이 제공되는 푸터가 항상 표시되도록 하고 있다.」

ViewCheck는 모달 스크롤 영역이 사용자에게 인지되게 표현되는지를 진단합니다.

📚 참고 출처

KRDS 컴포넌트 — 모달(Modal) 가이드 — https://www.krds.go.kr/html/site/component/component_16.html

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

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