무엇이고 무엇을 하는지 분명하게

KRDS CP-179 — 헤더, 콘텐츠, 버튼 레이블은 명확한 내용으로 제공하고 있다.

0. 들어가며 — 모달은 결정을 요구한다

이번 299편은 모달의 헤더·콘텐츠·버튼 레이블을 명확한 내용으로 제공하라는 규칙입니다.

모달은 사용자의 흐름을 멈추고 주의를 집중시켜 결정이나 확인을 요구합니다. 그런데 모달의 제목이 모호하거나, 내용이 불분명하거나, 버튼이 “확인/취소”처럼 두루뭉술하면 — 사용자는 ‘이게 무슨 모달이고 뭘 누르면 되는지’ 헷갈려 잘못된 결정을 하죠. CP-179는 모달의 세 요소를 명확하게 작성하라고 규정합니다. 이번 편을 풀어냅니다.

1. 규칙 원문 — 헤더·콘텐츠·버튼 레이블 명확

CP-179 (컴포넌트 > 모달) “헤더, 콘텐츠, 버튼 레이블은 명확한 내용으로 제공하고 있다.”

모달의 헤더(제목), 콘텐츠(본문), 버튼 레이블 각각을 명확하고 구체적으로 작성해, 사용자가 모달의 목적과 행동의 결과를 분명히 이해하게 하라는 뜻입니다.

정리: 모달의 제목·본문·버튼을 명확하게 작성하라. 이게 CP-179입니다.

2. 왜 명확한 내용이 중요한가

모달은 사용자의 작업 흐름을 의도적으로 중단시키는 강한 개입입니다. 본문을 가리고 떠서 “지금 이걸 확인/결정 하라”고 요구하죠. 이 개입이 정당하려면 — 사용자가 ’무엇을 묻는지, 무엇을 선택하는지’를 즉시·정확히 이해해야 합니다. 모호하면 사용자는 혼란 속에서 결정하거나, 이해 못 한 채 아무 버튼이나 눌러 의도치 않은 결과를 얻죠. 세 요소가 각각 명확해야 합니다.

① 헤더(제목) — ‘이게 무슨 모달인가’. 헤더는 모달의 정체와 목적을 한마디로 알립니다. “알림”, “확인” 같은 막연한 제목보다 — “회원 탈퇴 확인”, “신청서 제출”, “○○ 파일 삭제”처럼 무엇에 관한 것인지 구체적이어야 하죠. 사용자는 제목만 보고도 ’아, 탈퇴를 확인하는 모달이구나’를 압니다. 특히 스크린 리더 사용자는 모달이 열릴 때 제목을 먼저 듣고 맥락을 잡으므로(CP-182의 초점·aria-labelledby로 제목 연결), 제목의 명확성이 더 중요 하죠.

② 콘텐츠(본문) ‘무엇을 알아야/결정해야 하는가’. 본문은 사용자가 결정에 필요한 정보를 명확히 전합니다 무슨 일이 일어나는지, 결과가 무엇인지요. “정말 하시겠습니까?” 같은 모호한 문구보다 “탈퇴하면 모든 데이터가 삭제되며 복구할 수 없습니다”처럼 행동의 결과와 영향을 분명히 알려야 하죠. 특히 되돌릴 수 없는 행동(삭제· 탈퇴)은 그 영향을 명확히 고지해 사용자가 신중히 결정하게 합니다.

③ 버튼 레이블 ‘이걸 누르면 무슨 일이 일어나는가’. 가장 흔히 소홀히 하는 부분입니다. “확인/취소”, “예/ 아니오” 같은 범용 레이블은 사용자가 ‘확인이 무엇을 확인하는 거지?’ 헷갈리게 하죠. 대신 행동을 서술하는 구체적 레이블이 좋습니다 “탈퇴하기/취소”, “삭제/유지”, “제출하기/돌아가기”처럼요. 버튼만 봐도 결과를 예측 하게 하는 것이죠(긴급 공지 링크 CP-160, 페이지네이션 이름 CP-128에서 본 ’예측 가능한 레이블’과 같은 정신). 특히 위험한 행동의 버튼(“삭제”)은 명확히 구별돼야, 사용자가 실수로 누르지 않습니다.

일관성·간결성. 명확하되 간결해야 합니다 장황한 설명은 오히려 핵심을 흐리죠. 그리고 같은 종류 모달은 같은 패턴의 레이블을 쓰면(일관성) 사용자가 예측합니다. UX 라이팅의 원칙 사용자 언어로, 결과 중심으로, 모호함 없이 이 모달에 그대로 적용되죠.

이 규칙은 모달의 ’내용 품질’을 담당합니다 — 적절한 크기·구조(176~178)라는 그릇에, 명확한 내용(179)을 담아야 사용자가 모달을 제대로 이해하고 행동하죠. 그리고 모달 내부에 복잡한 컴포넌트를 넣지 않고(CP-180) 단순한 결정에 집중할 때, 이 명확성이 더 빛납니다.

정리하면 — 모달은 결정을 요구하는 강한 개입이므로, 제목·본문·버튼을 각각 명확·구체적으로 작성해 사용자가 목적과 결과를 정확히 이해하고 결정하게 해야 합니다.

3. 점검 / 개선

무엇을 점검하나

헤더 명확성 — 제목이 모달의 목적을 구체적으로 알리는가(“알림”류 모호함 배제).

콘텐츠 명확성 — 본문이 행동의 결과·영향을 분명히 전하는가.

버튼 레이블 — 버튼이 행동을 서술하는가(“확인/취소”류 범용 배제).

개선 방향

헤더: “○○ 확인/삭제/제출” 등 구체적으로. 본문: 결과·영향 명시(되돌릴 수 없으면 고지).

버튼: “탈퇴하기/삭제/제출하기” 등 행동 서술형. 위험 행동 명확히 구별.

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

역할	책임
UX 라이팅/기획	명확한 제목·본문·버튼 문구 작성
디자이너/개발	문구 적용·일관 패턴 구현

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

확인·결정을 요구하는 모달을 쓰는 모든 사이트가 해당됩니다.

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 제목이 모달 목적을 구체적으로 알리나요(“알림”류 모호함 배제)?

□ 본문이 행동의 결과·영향을 분명히 전하나요?

□ 버튼이 행동을 서술하나요(“확인/취소”류 범용 배제)?

❓ FAQ

Q1. “확인/취소”가 왜 문제죠? 무엇을 확인·취소하는지 모호합니다. “탈퇴하기/취소”처럼 행동을 서술하면 결과를 예측하게 됩니다. Q2. 본문에 결과를 다 적으면 길지 않나요? 명확하되 간결하게요. 핵심 결과(되돌릴 수 없음 등)만 분명히 알리고 장황함은 피합니다. Q3. 스크린 리더에도 제목이 중요한가요? 네. 모달이 열리면 제목을 먼저 들으므로(aria-labelledby), 제목의 명확성이 맥락 파악에 핵심입니다.

6. 마무리

CP-179의 메시지:

무엇이고 무엇을 하는지 분명하게 — 헤더·콘텐츠·버튼 레이블을 명확히 제공하라.

모달은 결정을 요구하는 강한 개입이라, 제목·본문·버튼이 명확해야 사용자가 목적과 결과를 정확히 이해합니다. “알림”, “확인/취소” 같은 모호함 대신 구체적·행동 서술형으로 작성하고, 위험한 행동은 결과를 고지하죠. 다음 편은 모달 내부에 복잡한 컴포넌트를 넣지 않는 규칙입니다.

다음 편 예고 ▶ 「300. (CP-180) 모달 내부에 액션 버튼 외에 상호작용이 필요한 다른 컴포넌트를 사용하고 있지 않다.」

ViewCheck는 모달의 헤더·콘텐츠·버튼 레이블이 명확한지를 진단합니다.

📚 참고 출처

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

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

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