내용에 맞는 크기로

KRDS CP-176 — 모달은 콘텐츠의 양을 고려하여 적절한 크기로 제공하고 있다.

0. 들어가며 — 모달 그룹의 첫 규칙

이번 296편부터 모달(Modal) 그룹(CP-176~183, 8개)으로 들어갑니다. 첫 규칙은 모달을 콘텐츠 양에 맞는 적절한 크기로 제공하라는 내용이죠.

먼저 ’모달’을 짚겠습니다. 모달은 현재 화면 위에 떠서 사용자의 주의를 집중시키는 대화 상자입니다 — 확인 요청, 상세 정보, 간단한 입력 등을 위해 본문을 가린 채 나타나죠. 모달이 너무 작으면 내용이 답답하게 끼고, 너무 크면 화면을 압도해 부담스럽습니다. CP-176은 담는 콘텐츠 양에 맞는 적정 크기를 규정합니다. 이번 편을 풀어 냅니다.

1. 규칙 원문 — 콘텐츠 양 고려한 적절한 크기

CP-176 (컴포넌트 > 모달) “모달은 콘텐츠의 양을 고려하여 적절한 크기로 제공하고 있다.”

모달의 크기를, 담는 콘텐츠의 양과 성격에 맞춰 적절하게 정해 — 너무 작아 답답하거나 너무 커서 압도하지 않게 하라는 뜻입니다.

정리: 모달은 콘텐츠 양에 맞는 적절한 크기로 제공하라. 이게 CP-176입니다.

2. 왜 콘텐츠에 맞는 크기여야 하나

모달은 본문 위에 떠서 사용자의 주의를 한곳에 모으는 컴포넌트입니다. 이 집중 효과가 제대로 작동하려면 — 크기가 콘텐츠에 적절히 맞아야 하죠. 크기가 안 맞으면 두 방향으로 문제가 생깁니다.

① 너무 작으면. 콘텐츠 양에 비해 모달이 작으면 — 내용이 좁은 공간에 빽빽하게 끼고, 곧장 스크롤(CP-177)이 생기죠. 짧은 확인 메시지(“삭제하시겠습니까?”)에는 작은 모달이 맞지만, 긴 약관이나 상세 정보를 작은 모달에 넣으면 사용자가 좁은 창에서 끝없이 스크롤하며 답답해합니다. 내용을 한눈에 파악하기 어렵고, 정보의 구조도 흐려지죠.

② 너무 크면. 반대로 짧은 내용에 비해 모달이 과하게 크면 — 화면을 거의 다 덮어 압도적이고, 빈 공간이 많아 어색합니다. 모달의 장점인 ’집중’이 ’부담’으로 바뀌죠. 또 큰 모달은 본문을 완전히 가려 맥락이 단절되고, 모바일 에선 화면을 꽉 채워 모달인지 새 페이지인지 헷갈리기도 합니다.

그래서 CP-176은 콘텐츠 양과 성격에 맞춰 크기를 정하라고 합니다:

짧은 확인/알림 — 작은 모달(다이얼로그). 메시지 + 버튼 정도.

중간 정보/입력 — 중간 크기. 적당한 내용과 컨트롤.

긴 상세/목록 — 큰 모달. 단, 너무 크면 모달보다 별도 페이지가 나을 수 있죠.

반응형 고려. 모달 크기는 화면에 맞춰 조정돼야 합니다 — 데스크톱에서는 적정 너비(예: 최대 너비 제한)로 중앙에 띄우되, 모바일에서는 좁은 화면에 맞춰 거의 전체 너비를 쓰거나 풀스크린 시트(bottom sheet) 형태로 전환하기도 하죠. 어떤 화면이든 콘텐츠가 답답하거나 넘치지 않게 합니다.

’모달이 적절한가’의 판단. 크기를 고민하다 보면 — 콘텐츠가 너무 많아 큰 모달이 필요한 경우, 애초에 모달이 맞는지 재고할 수 있습니다. 모달은 ’짧고 집중된 상호작용’에 적합하고, 내용이 방대하거나 복잡한 작업(여러 단계 입력, 긴 문서)은 별도 페이지가 나을 때가 많죠(CP-180에서 모달 내부에 복잡한 컴포넌트를 넣지 말라는 규칙과 연결). 크기 결정이 ’이게 모달감인가’의 신호이기도 합니다.

이 규칙은 모달의 기본 골격을 정합니다 — 적절한 크기(176) 위에, 스크롤 표현(177), 푸터 고정(178), 명확한 내용(179) 등이 얹히죠. 모든 사용자가 모달 내용을 편하게 보고 다루게 하는 출발점입니다.

3. 점검 / 개선

무엇을 점검하나

콘텐츠 적합성 — 모달 크기가 콘텐츠 양에 비해 답답하거나 과하지 않은가.

반응형 — 데스크톱·모바일 각 화면에 맞는 크기로 조정되는가.

모달 적합성 — 콘텐츠가 너무 방대해 별도 페이지가 나은 경우는 아닌가.

개선 방향

콘텐츠 성격별 크기 단계(소/중/대) 정의. 최대 너비·높이 제한.

모바일은 전체 너비·시트 형태 등으로 전환. 방대한 내용은 별도 페이지 검토.

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

역할	책임
디자이너	콘텐츠별 모달 크기·반응형 정의
퍼블리셔/개발	적정 크기·반응형 구현

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

확인·정보·입력 모달을 쓰는 모든 사이트가 해당됩니다.

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 모달 크기가 콘텐츠 양에 비해 답답하거나 과하지 않나요?

□ 데스크톱·모바일 각 화면에 맞는 크기로 조정되나요?

□ 콘텐츠가 너무 방대해 별도 페이지가 나은 경우는 아닌가요?

❓ FAQ

Q1. 모달이 정확히 뭔가요? 본문 위에 떠서 주의를 집중시키는 대화 상자입니다 — 확인 요청, 상세 정보, 간단 입력 등에 씁니다. Q2. 큰 내용은 큰 모달로 하면 되나요? 어느 정도는요. 다만 너무 방대하면 모달보다 별도 페이지가 나을 수 있습니다. 모달은 짧고 집중된 상호작용용입니다. Q3. 모바일에서도 같은 크기인가요? 화면에 맞춰 전체 너비·시트 형태 등으로 조정합니다.

6. 마무리

CP-176의 메시지:

내용에 맞는 크기로 — 모달은 콘텐츠 양을 고려해 적절한 크기로 제공하라.

모달은 주의를 집중시키는 도구라, 콘텐츠에 맞는 크기여야 합니다. 작으면 답답하고 스크롤이 생기며, 크면 압도 하죠. 콘텐츠 성격별 크기와 반응형 조정으로 적정선을 맞추고, 방대하면 별도 페이지를 검토합니다. 다음 편은 모달 콘텐츠의 스크롤 영역 표현입니다.

다음 편 예고 ▶ 「297. (CP-177) 모달 콘텐츠 영역에 스크롤이 필요한 경우 사용자가 스크롤 영역을 인지할 수 있도록 표현하고 있다.」

ViewCheck는 모달이 콘텐츠 양에 맞는 적절한 크기로 제공되는지를 진단합니다.

📚 참고 출처

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

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

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