모달은 짧게

KRDS BP-067 — 모달에서 데이터를 입력받는 경우 입력 관련 컴포넌트의 수를 5개 이내로 구성하고 있다.

0. 들어가며 — 입력 폼 그룹의 시작

이번 633편부터 입력 폼(Input form) 그룹(BP-067~083, 17개)입니다. 폼 설계의 핵심 원칙들이죠. 첫 편은 — 모달에서 데이터를 입력받는 경우 입력 컴포넌트를 5개 이내로 구성하라는 규칙입니다.

모달(팝업 창)은 — 좁고 일시적인 공간이라, 긴 폼에 안 맞죠. 입력 항목이 많으면 — 별도 페이지가 낫습니다. BP-067은 모달 입력을 5개 이내로 제한합니다. 이번 편을 풀어냅니다.

1. 원문 — 모달 입력 5개 이내

BP-067 (기본 패턴 > 입력 폼) “모달에서 데이터를 입력받는 경우 입력 관련 컴포넌트의 수를 5개 이내로 구성하고 있다.”

모달에서 입력받을 때 입력 컴포넌트를 5개 이내로 구성하라는 뜻입니다.

정리: 모달 입력 폼은 입력 컴포넌트 5개 이내로 하라. 이게 BP-067입니다.

2. 왜 모달 5개 이내인가

모달(modal, 팝업 대화상자)은 현재 화면 위에 떠서, 짧은 작업·확인을 처리하는 공간입니다. 좁고, 일시적이며, 배경을 가리죠. 이런 모달에서 데이터를 입력받을 때, 항목이 많으면 문제가 생깁니다. BP-067은 5개 이내로 제한합니다.

모달에 입력 항목이 많을 때의 문제:

좁은 공간 한계 모달은 화면 일부만 차지합니다. 입력 항목이 많으면, 모달 안에서 스크롤해야 하거나 모달이 너무 커져, 모달의 장점(집중·간결)이 사라지죠.

맥락 상실 모달은 배경(원래 화면)을 가립니다. 긴 입력을 하다 보면 원래 맥락을 잊고, 모달에 갇힌 느낌이 들죠. 긴 작업은 배경을 가리지 않는 별도 페이지가 낫습니다.

실수로 닫힘 위험 모달은 바깥 클릭·ESC로 쉽게 닫힙니다. 긴 입력 중 실수로 닫혀 입력이 날아가면 큰 손실 이죠.

그래서 BP-067은 — 모달 입력을 5개 이내로 제한합니다:

5개 이내 모달에서 입력받는 입력 컴포넌트(텍스트 입력·셀렉트·체크박스 등)를 5개 이내로요. 짧은 입력만 모달에서 처리하죠.

긴 폼은 별도 페이지 입력 항목이 6개 이상이거나 복잡하면, 모달이 아니라 별도 페이지(전용 폼 페이지)로 안내합니다. 충분한 공간에서 차분히 입력하게요. 단계가 필요하면 다단계 폼(BP-068·069)으로요.

모달의 적합한 용도 모달은 간단한 입력(검색 필터, 빠른 메모, 확인 다이얼로그)에 적합합니다. 회원가입·신청 서처럼 항목 많은 폼은 모달이 아니죠.

왜 5개인가. 5개는 좁은 모달에서 스크롤 없이 한눈에 보고, 짧게 끝낼 수 있는 실용적 상한입니다. 그 이상은 모달의 간결함을 해치고, 별도 페이지가 더 나은 신호죠.

모달 컴포넌트(CP) 연계. 모달 컴포넌트 규칙(CP-141~148)이 — 모달 자체의 구조·접근성이었다면, BP-067은 — 모달을 ‘입력 폼’ 용도로 쓸 때의 분량 제한입니다. 모달의 적절한 사용 패턴이죠.

이 규칙은 입력 폼의 ’모달 적정 사용’을 담당합니다 — 모달 입력을 5개 이내로 제한해(067), 긴 폼은 별도 페이지로 유도하고 모달은 짧은 입력에만 쓰게 하죠. 입력 폼 그룹의 출발점입니다.

정리하면 — 모달은 좁고 일시적이라 긴 입력에 안 맞으므로, 모달 입력은 컴포넌트 5개 이내로 하고 항목이 많으면 별도 페이지로 안내해야 합니다.

3. 점검 / 개선

무엇을 점검하나

5개 이내 — 모달 입력 폼의 입력 컴포넌트가 5개 이내인가.

긴 폼 분리 — 항목 많은 폼은 모달이 아닌 별도 페이지인가.

용도 적합 — 모달이 짧은 입력(필터·확인 등)에만 쓰이는가.

개선 방향

모달 입력 컴포넌트 5개 이내. 6개 이상·복잡하면 별도 페이지.

단계 필요 시 다단계 폼(BP-068·069). 모달은 짧은 입력 전용.

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

역할	책임
기획/UX	모달 vs 페이지 판단
퍼블리셔/개발	모달 입력 폼 구현

기관 유형	BP-067 적용
중앙행정기관(대표·운영) / 공공기관 / 지자체	✅ 권장 (모달 입력 사용 시)

모달에서 입력받는 사이트가 해당됩니다.

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 모달 입력 폼의 입력 컴포넌트가 5개 이내인가요?

□ 항목 많은 폼은 모달이 아닌 별도 페이지인가요?

□ 모달이 짧은 입력(필터·확인 등)에만 쓰이나요?

❓ FAQ

Q1. 왜 모달에 긴 폼을 두면 안 되나요? 모달은 좁고 일시적이며 배경을 가립니다. 긴 입력엔 스크롤·맥락 상실·실수로 닫힘 위험이 있죠. 별도 페이지가 낫습니다. Q2. 5개를 넘으면 어떻게 하나요? 별도 전용 폼 페이지로 안내합니다. 단계가 필요하면 다단계 폼(BP-068·069)으로요. Q3. 모달은 어떤 입력에 좋나요? 검색 필터, 빠른 메모, 확인 다이얼로그 같은 짧은 입력이요. 회원가입·신청서처럼 항목 많은 폼은 모달이 아니죠.

6. 마무리

BP-067의 메시지:

모달은 짧게 — 모달 입력 폼은 입력 컴포넌트 5개 이내로 구성하라.

모달은 좁고 일시적이라 긴 입력에 안 맞습니다. 입력을 5개 이내로 제한하고 긴 폼은 별도 페이지로 유도하는 게 핵심이죠. 다음 편은 단계별 입력의 논리적·선형적 관계입니다.

다음 편 예고 ▶ 「634. (BP-068) 단계별 데이터를 입력 받는 경우 각 단계 내 콘텐츠는 논리적, 선형적 관계를 가지고 있다.」

ViewCheck는 모달 입력 폼이 컴포넌트 5개 이내로 구성되는지를 진단합니다.

📚 참고 출처

KRDS 기본 패턴 — 입력 폼 가이드 — https://www.krds.go.kr/html/site/pattern/pattern_08.html

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

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