부르지 않은 모달은 띄우지 마라

KRDS CP-181 — 사용자가 의도하지 않은 모달을 자동으로 시행하고 있지 않다.

0. 들어가며 — 갑자기 튀어나오는 모달

이번 301편은 사용자가 의도하지 않은 모달을 자동으로 시행하지 않는다는 규칙입니다.

모달은 사용자의 흐름을 멈추고 화면을 가리는 강한 개입입니다. 사용자가 스스로 부른 모달(버튼 클릭 등)은 괜찮지만 — 페이지 진입과 동시에 자동으로 뜨거나, 사용자가 원치 않는데 갑자기 튀어나오는 모달은 흐름을 방해 하고 짜증을 유발하죠. CP-181은 사용자 의도 없는 모달 자동 시행을 금지합니다. 이번 편을 풀어냅니다.

1. 규칙 원문 — 의도하지 않은 모달 자동 시행 금지

CP-181 (컴포넌트 > 모달) “사용자가 의도하지 않은 모달을 자동으로 시행하고 있지 않다.”

사용자의 명시적 행동(클릭 등) 없이, 페이지 로드나 임의 시점에 모달을 자동으로 띄우는 것을 하지 말라는 뜻입니다.

정리: 사용자가 부르지 않은 모달을 자동으로 띄우지 마라. 이게 CP-181입니다.

2. 왜 자동 모달이 문제인가

모달은 ‘사용자의 작업 흐름을 의도적으로 중단’시키는 강한 컴포넌트입니다(CP-179·180). 이 중단이 정당하려면 — 사용자가 그것을 예상하거나 스스로 불렀어야 하죠. 사용자가 ’삭제’ 버튼을 누르면 확인 모달이 뜨는 건 예상된 흐름이라 자연스럽습니다. 하지만 사용자가 아무것도 안 했는데 모달이 갑자기 뜨면 — 흐름이 폭력적으로 끊기고 불쾌해집니다.

자동 모달의 문제들:

① 흐름 방해·짜증. 사용자가 콘텐츠를 보려고 페이지에 들어왔는데, 진입 즉시 모달이 떠 본문을 가리면 — 사용자는 원래 보려던 것을 못 보고 모달을 먼저 처리해야 하죠. 홍보·구독 권유·설문 같은 자동 팝업 모달은 특히 짜증을 유발합니다. 사용자가 ‘부르지 않은’ 개입이라, 방해로만 느껴지죠.

② 맥락 상실·실수. 갑자기 뜬 모달에 사용자는 당황합니다. 무슨 모달인지 파악하기 전에 반사적으로 닫거나 아무 버튼이나 눌러, 의도치 않은 결과를 얻을 수 있죠. 특히 작업 중간에 자동 모달이 끼어들면 하던 작업의 맥락을 잃습니다.

③ 접근성·인지 부담. 자동으로 뜬 모달은 스크린 리더 사용자, 인지 장애 사용자에게 더 큰 혼란입니다 — 예상치 못한 초점 이동(모달로 강제 이동), 갑작스러운 콘텐츠 변화는 방향 감각을 무너뜨리죠. WCAG의 ‘예측 가능성’ 원칙(SC 3.2, 구조화 목록 CP-150에서 본)에도 어긋납니다 — 사용자가 트리거하지 않은 큰 맥락 변화는 피해야 하죠.

그래서 CP-181은 — 모달을 사용자의 명시적 행동에 의해서만 띄우라고 합니다. 버튼 클릭, 링크 선택 등 사용 자가 ‘이걸 누르면 모달이 뜨겠구나’ 예상하는 행동의 결과로만 나타나게 하죠.

예외는? 정말 시급하고 중요한 정보로 사용자를 즉시 중단시켜야 하는 경우(시스템 긴급 알림 등)가 드물게 있을 수 있습니다. 하지만 그런 ‘시급·중대’ 정보는 보통 긴급 공지(Critical alerts, CP-151~160) 컴포넌트가 담당 하죠 — 긴급 공지는 본문 상단에 자연스럽게 표시되지 본문을 모달로 가리지 않습니다. 즉 ’자동으로 사용자를 중단시켜야 할 정보’조차 모달보다 적합한 컴포넌트가 따로 있는 경우가 많습니다. 모달의 자동 시행은 거의 정당화 되지 않죠.

’의도하지 않은’의 핵심. 판단 기준은 ’사용자가 이 모달을 예상·요청했는가’입니다. 사용자 행동의 직접 결과면 정당하고(확인 모달 등), 사용자와 무관하게 시스템이 띄우면 부적절하죠. 마케팅 팝업, 자동 설문, 진입 광고 모달 등이 전형적인 위반 사례입니다.

정리하면 — 모달은 흐름을 끊는 강한 개입이므로 사용자의 명시적 행동으로만 띄우고, 사용자가 부르지 않은 자동 모달은 피해 흐름과 예측 가능성을 지켜야 합니다.

3. 점검 / 개선

무엇을 점검하나

사용자 트리거 — 모달이 사용자의 명시적 행동(클릭 등)으로만 뜨는가.

자동 팝업 없음 — 페이지 진입 시 자동 모달(홍보·설문 등)이 뜨지 않는가.

대안 — 시급 정보는 모달이 아닌 긴급 공지 등으로 표시되는가.

개선 방향

진입 자동 모달(홍보·구독·설문) 제거. 사용자 행동 기반 호출로 전환.

시급 정보는 긴급 공지(CP-151~) 등 적합한 컴포넌트로.

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

역할	책임
기획/운영	자동 모달 정책 제거·대안 수립
개발	사용자 트리거 기반 모달 호출 구현

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

모달을 쓰는 모든 사이트가 해당됩니다.

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 모달이 사용자의 명시적 행동(클릭 등)으로만 뜨나요?

□ 페이지 진입 시 자동 모달(홍보·설문 등)이 뜨지 않나요?

□ 시급 정보는 모달이 아닌 긴급 공지 등으로 표시되나요?

❓ FAQ

Q1. 진입 시 공지 모달을 띄우면 안 되나요? 사용자가 부르지 않은 자동 모달은 흐름을 방해합니다. 공지는 본문 상단 배너·긴급 공지로 표시하는 게 낫습니다. Q2. 긴급한 정보도 모달로 못 띄우나요? 시급·중대 정보는 긴급 공지(CP-151~)가 적합합니다. 모달은 거의 정당화되지 않습니다. Q3. 확인 모달은 자동 아닌가요? 사용자가 ‘삭제’ 등을 누른 직접 결과라 의도된 흐름입니다. 사용자 행동 없이 뜨는 게 문제입니다.

6. 마무리

CP-181의 메시지:

부르지 않은 모달은 띄우지 마라 — 의도하지 않은 모달 자동 시행을 하지 마라.

모달은 흐름을 끊는 강한 개입이라, 사용자의 명시적 행동으로만 띄워야 합니다. 진입 자동 팝업·설문 모달은 흐름을 방해하고 예측 가능성을 깨죠. 시급 정보조차 모달보다 긴급 공지가 적합합니다. 다음 편은 모달의 초점 이동 순서 입니다.

다음 편 예고 ▶ 「302. (CP-182) 모달과 내부 요소의 초점 이동 순서를 논리적으로 제공하고 있다.」

ViewCheck는 의도하지 않은 모달이 자동 시행되지 않는지를 진단합니다.

📚 참고 출처

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

WCAG 2.1 SC 3.2.1 On Focus — https://www.w3.org/WAI/WCAG21/Understanding/on-focus.html

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

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