모달은 단순해야 한다

KRDS CP-180 — 모달 내부에 액션 버튼 외에 상호작용이 필요한 다른 컴포넌트를 사용하고 있지 않다. (탭, 아코디언, 입력폼 등)

0. 들어가며 — 300편, 모달을 단순하게

이번 300편은 모달 내부에 액션 버튼 외에 상호작용이 필요한 다른 컴포넌트(탭·아코디언·입력폼 등)를 사용하지 않는다는 규칙입니다. 시리즈 300편을 이 규칙으로 맞습니다.

모달은 ’짧고 집중된 결정·확인’을 위한 도구입니다(CP-176·179). 그런데 모달 안에 탭, 아코디언, 복잡한 입력폼 같은 또 다른 상호작용 컴포넌트를 넣으면 — 모달이 ’작은 페이지’처럼 비대해지고, 초점 관리·접근성이 복잡해지죠. CP-180은 모달을 단순하게 유지하라고 규정합니다. 이번 편을 풀어냅니다.

1. 규칙 원문 — 복잡한 상호작용 컴포넌트 배제

CP-180 (컴포넌트 > 모달) “모달 내부에 액션 버튼 외에 상호작용이 필요한 다른 컴포넌트를 사용하고 있지 않다. (탭, 아코디언, 입력폼 등)”

모달 안에는 액션 버튼(확인·취소 등)만 두고, 탭·아코디언·복잡한 입력폼처럼 별도의 상호작용이 필요한 컴포넌트를 넣지 말라는 뜻입니다.

정리: 모달엔 액션 버튼만, 탭·아코디언·입력폼 같은 복잡한 컴포넌트는 넣지 마라. 이게 CP-180입니다.

2. 왜 복잡한 컴포넌트를 배제하나

모달의 본질은 ’짧고 집중된 단일 상호작용’입니다 — 사용자의 흐름을 잠시 멈추고, 하나의 결정·확인·간단한 입력을 받은 뒤, 본래 흐름으로 돌려보내죠. 이 ’집중과 단순함’이 모달의 가치입니다. 모달 안에 복잡한 상호작용 컴포넌트를 넣으면 이 본질이 무너집니다.

① 집중의 분산. 모달은 사용자를 한 가지에 집중시키려 본문을 가립니다. 그런데 모달 안에 탭(여러 패널 전환), 아코디언(여러 펼침 항목), 복잡한 입력폼(여러 필드·검증)을 넣으면 — 사용자는 모달 안에서 또 여러 갈래의 상호 작용을 해야 하죠. ’집중’이 ’또 다른 복잡한 작업’으로 바뀝니다. 모달이 사실상 ’작은 페이지’가 되어, 모달을 쓰는 이유(단순 집중)가 사라지죠.

② 초점 관리의 복잡성. 모달의 핵심 접근성은 초점 가두기(focus trap) 입니다 — 모달이 열리면 초점이 모달 안에 갇혀, Tab으로 모달 내부만 순회하고 뒤의 본문으로 빠져나가지 않죠(CP-182의 논리적 초점 순서와 연결). 그런데 모달 안에 탭·아코디언처럼 자체 키보드 패턴(화살표 이동 등)을 가진 위젯이 들어가면 — 모달의 초점 관리와 내부 위젯의 초점 관리가 중첩되어 매우 복잡해집니다. 구현 난이도가 급증하고, 버그(초점 이탈, 순서 꼬임)가 생기기 쉽죠. 스크린 리더 사용자에게 모달 + 중첩 위젯의 구조는 혼란스럽습니다.

③ 크기·스크롤 문제. 복잡한 컴포넌트는 공간을 많이 차지해 모달이 커지고(CP-176 위반), 스크롤이 길어지죠 (CP-177). 탭으로 여러 패널을 전환하면 모달 높이가 패널마다 들썩이기도 합니다.

그래서 CP-180은 — 모달 안에는 액션 버튼만 두고, 별도 상호작용 컴포넌트는 배제하라고 합니다. 모달 콘텐츠는 ‘읽을 정보 + 간단한 선택’ 정도로 단순하게 유지하죠.

복잡한 작업이 필요하면? 탭·아코디언·복잡한 폼이 필요한 작업이라면 — 그건 모달이 아니라 별도 페이지로 처리하는 게 맞습니다(CP-176에서 본 ‘방대하면 페이지’ 정신). 여러 단계 입력, 복잡한 설정, 탭으로 나뉜 정보 등은 전용 페이지에서 충분한 공간과 단순한 초점 흐름으로 다루죠. 모달은 그 페이지로 가기 전의 ’확인’이나, 페이지 없이 끝나는 ’단순 결정’에 한정합니다.

‘간단한 입력’의 경계.** 규칙은 ’입력폼 등’을 배제 대상으로 듭니다. 다만 아주 간단한 단일 입력(예: 이름 하나, 사유 한 줄)은 모달에서 받기도 하죠. 핵심은’별도의 복잡한 상호작용이 필요한가**’입니다 — 여러 필드·검증· 단계가 얽힌 폼은 배제하고, 단순 결정·확인·한두 개 입력에 집중하라는 것이죠. 복잡도가 높아지면 모달이 아니라 페이지를 쓰라는 신호입니다.

이 규칙은 디스클로저 CP-169(중요 정보 숨기지 마라), 긴급 공지 CP-151(부적절한 정보 쓰지 마라)에서 본 ’컴포 넌트를 본분에 맞게 쓰라’의 모달 버전입니다 — 모달은 단순 집중용이니 복잡한 것을 욱여넣지 말라는 것이죠.

3. 점검 / 개선

무엇을 점검하나

복잡 컴포넌트 배제 — 모달 안에 탭·아코디언·복잡한 입력폼이 없는가.

단순성 — 모달 콘텐츠가 ‘읽을 정보 + 간단한 선택/입력 + 액션 버튼’ 수준인가.

대안 — 복잡한 작업은 별도 페이지로 처리되는가.

개선 방향

모달 내 탭·아코디언·복잡한 폼을 별도 페이지로 이전.

모달은 단순 결정·확인·한두 개 입력에 한정.

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

역할	책임
기획/UX	모달 vs 페이지 판단·복잡 작업 분리
퍼블리셔/개발	모달 내부 단순화·복잡 컴포넌트 제거

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

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

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 모달 안에 탭·아코디언·복잡한 입력폼이 없나요?

□ 모달 콘텐츠가 ‘읽을 정보 + 간단한 선택 + 액션 버튼’ 수준인가요?

□ 복잡한 작업은 별도 페이지로 처리되나요?

❓ FAQ

Q1. 왜 탭·아코디언을 넣으면 안 되나요? 모달의 집중·단순함을 깨고, 초점 관리(focus trap)와 내부 위젯 패턴이 중첩되어 접근성이 복잡해집니다. Q2. 간단한 입력도 안 되나요? 단일·간단한 입력은 가능합니다. 여러 필드·검증·단계가 얽힌 복잡한 폼이 배제 대상입니다. Q3. 복잡한 작업은 어디서 하나요? 별도 페이지에서 충분한 공간과 단순한 초점 흐름으로 처리합니다.

6. 마무리

CP-180의 메시지:

모달은 단순해야 한다 — 액션 버튼 외 복잡한 상호작용 컴포넌트를 넣지 마라.

모달은 짧고 집중된 결정·확인용입니다. 탭·아코디언·복잡한 폼을 넣으면 집중이 분산되고 초점 관리가 복잡해져 접근성이 무너지죠. 모달은 단순하게 두고, 복잡한 작업은 별도 페이지로 처리합니다. 다음 편은 의도하지 않은 모달 자동 시행 금지입니다.

다음 편 예고 ▶ 「301. (CP-181) 사용자가 의도하지 않은 모달을 자동으로 시행하고 있지 않다.」

ViewCheck는 모달 내부에 복잡한 상호작용 컴포넌트가 없는지를 진단합니다.

📚 참고 출처

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

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

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